feat: implement tailwind v4 and shadcn

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

@@ -2,6 +2,13 @@
 
 import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
+import { Loader2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 export default function CaregiverLoginPage() {
   const router = useRouter()
@@ -11,7 +18,6 @@ export default function CaregiverLoginPage() {
   const [loading, setLoading] = useState(false)
   const [checking, setChecking] = useState(true)
 
-  // Check if already logged in
   useEffect(() => {
     const checkAuth = async () => {
       try {
@@ -50,7 +56,6 @@ export default function CaregiverLoginPage() {
         throw new Error(data.errors?.[0]?.message || 'Login failed')
       }
 
-      // Check if user has caregiver or admin role
       const user = data.user
       const hasCaregiverRole =
         user?.roles?.includes('super-admin') ||
@@ -60,7 +65,6 @@ export default function CaregiverLoginPage() {
         )
 
       if (!hasCaregiverRole) {
-        // Logout if not a caregiver
         await fetch('/api/users/logout', {
           method: 'POST',
           credentials: 'include',
@@ -78,31 +82,38 @@ export default function CaregiverLoginPage() {
 
   if (checking) {
     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>
     )
   }
 
   return (
-    <div className="login-page">
-      <div className="login-page__card">
-        <div className="login-page__logo">
-          <h1>Meal Planner</h1>
-          <p>Caregiver Portal</p>
+    <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold tracking-tight">Meal Planner</h1>
+          <p className="text-muted-foreground">Caregiver Portal</p>
         </div>
 
-        <div className="card">
-          <div className="card__body">
-            {error && <div className="message message--error">{error}</div>}
+        <Card>
+          <CardHeader>
+            <CardTitle>Login</CardTitle>
+            <CardDescription>Enter your credentials to access the caregiver portal</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
 
-            <form onSubmit={handleSubmit}>
-              <div className="form-group">
-                <label htmlFor="email">Email</label>
-                <input
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
                   type="email"
                   id="email"
-                  className="input"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Enter your email"
@@ -111,12 +122,11 @@ export default function CaregiverLoginPage() {
                 />
               </div>
 
-              <div className="form-group">
-                <label htmlFor="password">Password</label>
-                <input
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
                   type="password"
                   id="password"
-                  className="input"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
@@ -125,16 +135,19 @@ export default function CaregiverLoginPage() {
                 />
               </div>
 
-              <button
-                type="submit"
-                className="btn btn--primary btn--block btn--large"
-                disabled={loading}
-              >
-                {loading ? 'Logging in...' : 'Login'}
-              </button>
+              <Button type="submit" className="w-full" size="lg" disabled={loading}>
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Logging in...
+                  </>
+                ) : (
+                  'Login'
+                )}
+              </Button>
             </form>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
   )