feat: implement tailwind v4 and shadcn

src/app/(app)/caregiver/dashboard/page.tsx

@@ -3,6 +3,19 @@
 import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
+import {
+  Loader2,
+  LogOut,
+  Sun,
+  Moon,
+  Sunrise,
+  ClipboardList,
+  Users,
+  Settings,
+} from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 interface User {
   id: number
@@ -30,7 +43,6 @@ export default function CaregiverDashboardPage() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Check auth
         const userRes = await fetch('/api/users/me', { credentials: 'include' })
         if (!userRes.ok) {
           router.push('/caregiver/login')
@@ -43,7 +55,6 @@ export default function CaregiverDashboardPage() {
         }
         setUser(userData.user)
 
-        // Fetch today's orders stats
         const today = new Date().toISOString().split('T')[0]
         const ordersRes = await fetch(`/api/meal-orders?where[date][equals]=${today}&limit=1000`, {
           credentials: 'include',
@@ -77,8 +88,8 @@ export default function CaregiverDashboardPage() {
 
   if (loading) {
     return (
-      <div className="login-page">
-        <div className="spinner" />
+      <div className="min-h-screen flex items-center justify-center bg-muted/50">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     )
   }
@@ -89,78 +100,127 @@ export default function CaregiverDashboardPage() {
       : 'Care Home'
 
   return (
-    <>
-      <header className="header">
-        <div className="header__content">
-          <h1 className="header__title">{tenantName}</h1>
-          <div className="header__user">
-            <span className="header__user-name">{user?.name || user?.email}</span>
-            <button onClick={handleLogout} className="btn btn--secondary">
+    <div className="min-h-screen bg-muted/50">
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-16 items-center justify-between">
+          <h1 className="text-xl font-semibold">{tenantName}</h1>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-muted-foreground">{user?.name || user?.email}</span>
+            <Button variant="outline" size="sm" onClick={handleLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
               Logout
-            </button>
+            </Button>
           </div>
         </div>
       </header>
 
-      <main className="container">
-        <div className="page-title">
-          <h1>Dashboard</h1>
-          <p>Today&apos;s overview</p>
+      <main className="container py-6">
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold tracking-tight">Dashboard</h2>
+          <p className="text-muted-foreground">Today&apos;s overview</p>
         </div>
 
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-card__value">{stats.total}</div>
-            <div className="stat-card__label">Total Orders Today</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-card__value">{stats.pending}</div>
-            <div className="stat-card__label">Pending</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-card__value">{stats.preparing}</div>
-            <div className="stat-card__label">Preparing</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-card__value">{stats.prepared}</div>
-            <div className="stat-card__label">Prepared</div>
-          </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
+              <ClipboardList className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.total}</div>
+              <p className="text-xs text-muted-foreground">Today</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Pending</CardTitle>
+              <div className="h-2 w-2 rounded-full bg-yellow-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.pending}</div>
+              <p className="text-xs text-muted-foreground">Awaiting preparation</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Preparing</CardTitle>
+              <div className="h-2 w-2 rounded-full bg-blue-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.preparing}</div>
+              <p className="text-xs text-muted-foreground">In progress</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Prepared</CardTitle>
+              <div className="h-2 w-2 rounded-full bg-green-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{stats.prepared}</div>
+              <p className="text-xs text-muted-foreground">Ready to serve</p>
+            </CardContent>
+          </Card>
         </div>
 
-        <div className="card">
-          <div className="card__header">
-            <h2>Quick Actions</h2>
-          </div>
-          <div className="card__body">
-            <div className="quick-actions">
-              <Link href="/caregiver/orders/new?mealType=breakfast" className="quick-action">
-                <div className="quick-action__icon">🌅</div>
-                <div className="quick-action__label">New Breakfast</div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <Link href="/caregiver/orders/new?mealType=breakfast">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <Sunrise className="h-8 w-8 mb-2 text-orange-500" />
+                    <span className="font-medium">New Breakfast</span>
+                  </CardContent>
+                </Card>
               </Link>
-              <Link href="/caregiver/orders/new?mealType=lunch" className="quick-action">
-                <div className="quick-action__icon">☀️</div>
-                <div className="quick-action__label">New Lunch</div>
+              <Link href="/caregiver/orders/new?mealType=lunch">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <Sun className="h-8 w-8 mb-2 text-yellow-500" />
+                    <span className="font-medium">New Lunch</span>
+                  </CardContent>
+                </Card>
               </Link>
-              <Link href="/caregiver/orders/new?mealType=dinner" className="quick-action">
-                <div className="quick-action__icon">🌙</div>
-                <div className="quick-action__label">New Dinner</div>
+              <Link href="/caregiver/orders/new?mealType=dinner">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <Moon className="h-8 w-8 mb-2 text-indigo-500" />
+                    <span className="font-medium">New Dinner</span>
+                  </CardContent>
+                </Card>
               </Link>
-              <Link href="/caregiver/orders" className="quick-action">
-                <div className="quick-action__icon">📋</div>
-                <div className="quick-action__label">View Orders</div>
+              <Link href="/caregiver/orders">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <ClipboardList className="h-8 w-8 mb-2 text-muted-foreground" />
+                    <span className="font-medium">View Orders</span>
+                  </CardContent>
+                </Card>
               </Link>
-              <Link href="/caregiver/residents" className="quick-action">
-                <div className="quick-action__icon">👥</div>
-                <div className="quick-action__label">Residents</div>
+              <Link href="/caregiver/residents">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <Users className="h-8 w-8 mb-2 text-muted-foreground" />
+                    <span className="font-medium">Residents</span>
+                  </CardContent>
+                </Card>
               </Link>
-              <Link href="/admin" className="quick-action">
-                <div className="quick-action__icon">⚙️</div>
-                <div className="quick-action__label">Admin Panel</div>
+              <Link href="/admin">
+                <Card className="cursor-pointer transition-colors hover:bg-accent">
+                  <CardContent className="flex flex-col items-center justify-center p-6">
+                    <Settings className="h-8 w-8 mb-2 text-muted-foreground" />
+                    <span className="font-medium">Admin Panel</span>
+                  </CardContent>
+                </Card>
               </Link>
             </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
       </main>
-    </>
+    </div>
   )
 }