task-b complate

src/app/dashboard/overview/@bar_stats/error.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Icons } from '@/components/icons';
+import { useRouter } from 'next/navigation';
+import { useEffect, useTransition } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+interface StatsErrorProps {
+  error: Error;
+  reset: () => void; // Add reset function from error boundary
+}
+export default function StatsError({ error, reset }: StatsErrorProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  // the reload fn ensures the refresh is deffered  until the next render phase allowing react to handle any pending states before processing
+  const reload = () => {
+    startTransition(() => {
+      router.refresh();
+      reset();
+    });
+  };
+  return (
+    <Card className='border-red-500'>
+      <CardHeader className='flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row'>
+        <div className='flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6'>
+          <Alert variant='destructive' className='border-none'>
+            <Icons.alertCircle className='h-4 w-4' />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription className='mt-2'>
+              Failed to load statistics: {error.message}
+            </AlertDescription>
+          </Alert>
+        </div>
+      </CardHeader>
+      <CardContent className='flex h-[316px] items-center justify-center p-6'>
+        <div className='text-center'>
+          <p className='text-muted-foreground mb-4 text-sm'>
+            Unable to display statistics at this time
+          </p>
+          <Button
+            onClick={() => reload()}
+            variant='outline'
+            className='min-w-[120px]'
+            disabled={isPending}
+          >
+            Try again
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}