Development

Dockerfile

@@ -43,4 +43,4 @@ EXPOSE 80
 ENV PORT=80
 ENV HOSTNAME="0.0.0.0"
 
-CMD ["npm", "start"]
+CMD ["npm", "start"]

my-app/app/admin/admin-page-layout.tsx

@@ -1,36 +1,41 @@
-import { AppSidebar } from "@/app/admin/admin-sidebar"
-import { ModeToggle } from "@/components/nav-mode"
-import { Separator } from "@/components/ui/separator"
-import Link from "next/link"
+import { AppSidebar } from "@/app/admin/admin-sidebar";
+import { ModeToggle } from "@/components/nav-mode";
+import { Separator } from "@/components/ui/separator";
+import Link from "next/link";
 import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
-  BreadcrumbPage
-} from "@/components/ui/breadcrumb"
-import { SlashIcon } from "lucide-react"
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb";
+import { SlashIcon } from "lucide-react";
 
 interface BreadcrumbItem {
-  label: string
-  href: string
+  label: string;
+  href: string;
 }
 
 interface PageLayoutProps {
-  children: React.ReactNode
-  breadcrumbs?: BreadcrumbItem[]
-  header?: React.ReactNode
-  headerClassName?: string
+  children: React.ReactNode;
+  breadcrumbs?: BreadcrumbItem[];
+  header?: React.ReactNode;
+  headerClassName?: string;
 }
 
-export function PageLayout({ children, breadcrumbs = [], header, headerClassName }: PageLayoutProps) {
-  breadcrumbs = [{ label: "Admin", href: "/admin/dashboard" }, ...breadcrumbs]
+export function PageLayout({
+  children,
+  breadcrumbs = [],
+  header,
+  headerClassName,
+}: PageLayoutProps) {
+  breadcrumbs = [{ label: "Admin", href: "/admin/dashboard" }, ...breadcrumbs];
 
   return (
     <SidebarProvider
@@ -44,17 +49,19 @@ export function PageLayout({ children, breadcrumbs = [], header, headerClassName
       <SidebarInset>
         <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger />
-          <Separator
-            orientation="vertical"
-            className="m-2 max-h-6"
-          />
+          <Separator orientation="vertical" className="m-2 max-h-6" />
           <Breadcrumb>
             <BreadcrumbList>
               {breadcrumbs.map((item, index) => (
-                <div key={item.href} className="flex items-center">
+                <div
+                  key={`${item.href}-${index}`}
+                  className="flex items-center"
+                >
                   <BreadcrumbItem>
                     {index === breadcrumbs.length - 1 ? (
-                      <BreadcrumbPage className="font-bold">{item.label}</BreadcrumbPage>
+                      <BreadcrumbPage className="font-bold">
+                        {item.label}
+                      </BreadcrumbPage>
                     ) : (
                       <BreadcrumbLink asChild>
                         <Link href={item.href}>{item.label}</Link>
@@ -75,18 +82,16 @@ export function PageLayout({ children, breadcrumbs = [], header, headerClassName
           </div>
         </header>
         {header && (
-          <div className={`border-b bg-muted/40 px-4 py-6 md:px-6 ${headerClassName || ''}`}>
-            <div className="w-full">
-              {header}
-            </div>
+          <div
+            className={`border-b bg-muted/40 px-4 py-6 md:px-6 ${headerClassName || ""}`}
+          >
+            <div className="w-full">{header}</div>
           </div>
         )}
         <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
-          <div className="w-full">
-            {children}
-          </div>
+          <div className="w-full">{children}</div>
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
+  );
 }

my-app/app/admin/dashboard/header-stats-state.tsx

@@ -1,20 +1,24 @@
-"use client"
+"use client";
 
-import { Card, CardDescription, CardHeader } from "@/components/ui/card"
-import { LoadingSpinnerSmall } from "@/components/ui/loading-spinner"
-import { Button } from "@/components/ui/button"
-import { RefreshCw } from "lucide-react"
+import { Card, CardDescription, CardHeader } from "@/components/ui/card";
+import { LoadingSpinnerSmall } from "@/components/ui/loading-spinner";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
 
 interface HeaderStatsStateProps {
-  loading: boolean
-  error: string | null
-  refetch: () => void
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
 }
 
-export function HeaderStatsState({ loading, error, refetch }: HeaderStatsStateProps) {
+export function HeaderStatsState({
+  loading,
+  error,
+  refetch,
+}: HeaderStatsStateProps) {
   if (loading) {
     return (
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs grid-cols-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs grid-cols-4">
         {Array.from({ length: 4 }).map((_, index) => (
           <Card key={index} className="@container/card">
             <CardHeader>
@@ -26,12 +30,12 @@ export function HeaderStatsState({ loading, error, refetch }: HeaderStatsStatePr
           </Card>
         ))}
       </div>
-    )
+    );
   }
 
   if (error) {
     return (
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs grid-cols-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs grid-cols-4">
         <Card className="@container/card col-span-full">
           <CardHeader>
             <CardDescription>Dashboard Error</CardDescription>
@@ -47,8 +51,8 @@ export function HeaderStatsState({ loading, error, refetch }: HeaderStatsStatePr
           </CardHeader>
         </Card>
       </div>
-    )
+    );
   }
 
-  return null
+  return null;
 }