"feat: Integrate new backend package for admin layout updates"

backend/app/package.json

@@ -24,6 +24,11 @@
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "postcss-selector-parser": "^6.0.13",
-    "tailwindcss": "^3.3.6"
+    "tailwindcss": "^3.4.17"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "vite": "^6.3.5"
   }
 }

frontend/src/app/admin/layout.tsx

@@ -19,15 +19,15 @@ export default async function AdminLayout(props: AdminLayoutProps) {
 	}
 
 	return (
-		<main className="flex flex-1 flex-col gap-4">
+		<main className="flex flex-1 flex-col gap-6 p-2 md:p-4">
 			<div className="mx-auto grid w-full gap-2">
-				<h1 className="text-3xl font-semibold">Admin</h1>
+				<h1 className="text-3xl font-semibold text-foreground">Admin</h1>
 			</div>
 			<div className="mx-auto grid w-full items-start gap-4 md:gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
-				<nav className="grid gap-4 text-sm">
+				<nav className="grid gap-4 text-sm bg-background/50 p-3 rounded-lg dark:bg-background/10 shadow-sm">
 					<AdminSidebar />
 				</nav>
-				<div>{children}</div>
+				<div className="bg-background/50 p-2 rounded-lg dark:bg-background/10 shadow-sm">{children}</div>
 			</div>
 		</main>
 	);

frontend/src/components/data-card.tsx

@@ -24,14 +24,19 @@ export function DataCard(props: DataCardProps) {
 	const { title, description, value, icon } = props;
 
 	return (
-		<Card className="w-full">
+		<Card className="w-full overflow-hidden relative border dark:border-muted/40 dark:bg-background/30">
-			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+			<div className="absolute right-0 top-0 h-full w-16 bg-gradient-to-r from-transparent to-primary/5 dark:to-primary/10"></div>
-				<CardTitle className="text-sm font-medium">{title}</CardTitle>
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
-				<GenericIcon name={icon} className="h-4 w-4 text-muted-foreground" />
+				<CardTitle className="text-sm font-medium text-foreground/90">{title}</CardTitle>
+				<GenericIcon name={icon} className="h-5 w-5 text-primary dark:text-primary/90" />
 			</CardHeader>
-			<CardContent>
+			<CardContent className="relative z-10">
-				<div className="text-2xl font-bold">{value}</div>
+				<div className="text-2xl font-bold text-foreground">{value}</div>
-				<p className="text-xs text-muted-foreground">&nbsp;</p>
+				{description ? (
+					<p className="text-xs text-muted-foreground">{description}</p>
+				) : (
+					<p className="text-xs text-muted-foreground">&nbsp;</p>
+				)}
 			</CardContent>
 		</Card>
 	);

frontend/src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground dark:bg-muted/20",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-background/90 dark:data-[state=active]:text-primary dark:data-[state=active]:shadow-md dark:data-[state=active]:shadow-primary/10 dark:hover:text-foreground/90 hover:bg-background/80 hover:text-foreground/90",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:text-foreground/90",
       className
     )}
     {...props}