[V0_FILE]typescriptreact:file="components/session-provider.tsx" "use client" import type React from "react" import { SessionProvider as NextAuthSessionProvider } from "next-auth/react" export function SessionProvider({ children }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="app/verify-email/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { useToast } from "@/components/ui/use-toast" const verificationSchema = z.object({ code: z.string().min(6, { message: "Verification code must be at least 6 characters" }), }) export default function VerifyEmailPage() { const router = useRouter() const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const [isResending, setIsResending] = useState(false) const form = useForm>({ resolver: zodResolver(verificationSchema), defaultValues: { code: "", }, }) async function onSubmit(values: z.infer) { setIsLoading(true) try { // Here you would typically make an API call to verify the code // For now, we'll just simulate a successful verification toast({ title: "Email verified", description: "Your email has been verified successfully.", }) // Redirect to login page router.push("/login") } catch (error) { toast({ variant: "destructive", title: "Verification failed", description: "Invalid verification code. Please try again.", }) } finally { setIsLoading(false) } } async function resendVerificationCode() { setIsResending(true) try { // Here you would typically make an API call to resend the verification code // For now, we'll just simulate a successful resend toast({ title: "Verification code sent", description: "A new verification code has been sent to your email.", }) } catch (error) { toast({ variant: "destructive", title: "Failed to resend", description: "An error occurred while resending the verification code. Please try again.", }) } finally { setIsResending(false) } } return (

Verify your email

We've sent a verification code to your email

Email Verification Enter the verification code sent to your email

Didn't receive a code?{" "}

Back to login

) } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { useToast } from "@/components/ui/use-toast" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Copy, CheckCircle, AlertCircle } from "lucide-react" const forgotPasswordSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), }) export default function ForgotPasswordPage() { const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const [emailSent, setEmailSent] = useState(false) const [resetUrl, setResetUrl] = useState(null) const [copied, setCopied] = useState(false) const form = useForm>({ resolver: zodResolver(forgotPasswordSchema), defaultValues: { email: "", }, }) const copyToClipboard = async () => { if (resetUrl) { await navigator.clipboard.writeText(resetUrl) setCopied(true) toast({ title: "Copied to clipboard" }) setTimeout(() => setCopied(false), 2000) } } async function onSubmit(values: z.infer) { setIsLoading(true) try { const response = await fetch('/api/auth/reset-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: values.email, action: 'request', }), }) const data = await response.json() if (data.success) { toast({ title: "Reset link generated", description: "Use the link below to reset your password.", }) setEmailSent(true) // Store reset URL for display if (data.devResetUrl) { setResetUrl(data.devResetUrl) } } else { throw new Error(data.error || 'Failed to generate reset link') } } catch (error) { toast({ variant: "destructive", title: "Failed to generate reset link", description: error instanceof Error ? error.message : "An error occurred. Please try again.", }) } finally { setIsLoading(false) } } return (

Forgot your password?

Enter your email to receive a password reset link

Reset Password {emailSent ? "Check your email for a reset link" : "Enter your email address to receive a reset link"} {!emailSent ? (

( Email )} /> ) : (

A password reset link has been generated for your account.

{resetUrl && ( Development Mode

Since email service is not configured, use this link to reset your password:


                          {resetUrl}

)}

Back to login

) } [V0_FILE]typescriptreact:file="types/next-auth.d.ts" declare module "next-auth" { interface User { role?: string } interface Session { user: { id?: string name?: string email?: string role?: string } } } declare module "next-auth/jwt" { interface JWT { role?: string } } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", success: "border-transparent bg-green-100 text-green-800 hover:bg-green-200/80", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/admin/scholars/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
  ),
)
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
  ),
)
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="app/student/settings/page.tsx"
"use client"

import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { StudentLayout } from "@/components/student-layout"
import { useToast } from "@/components/ui/use-toast"
import { Moon, Sun, Laptop, Bell, Eye, Download, Trash2, AlertTriangle, Shield, FileText } from "lucide-react"

const appearanceSchema = z.object({
  theme: z.enum(["light", "dark", "system"]),
  fontSize: z.enum(["small", "medium", "large"]),
  language: z.string().min(1, { message: "Please select a language" }),
})

const notificationSchema = z.object({
  emailNotifications: z.boolean(),
  smsNotifications: z.boolean(),
  applicationUpdates: z.boolean(),
  documentReminders: z.boolean(),
  paymentNotifications: z.boolean(),
})

const privacySchema = z.object({
  showProfile: z.boolean(),
  showContactInfo: z.boolean(),
  allowDataCollection: z.boolean(),
  allowCookies: z.boolean(),
})

export default function SettingsPage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("appearance")
  const [isLoading, setIsLoading] = useState(false)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)

const appearanceForm = useForm<z.infer<typeof appearanceSchema>>({
    resolver: zodResolver(appearanceSchema),
    defaultValues: {
      theme: "system",
      fontSize: "medium",
      language: "en",
    },
  })

const notificationForm = useForm<z.infer<typeof notificationSchema>>({
    resolver: zodResolver(notificationSchema),
    defaultValues: {
      emailNotifications: true,
      smsNotifications: true,
      applicationUpdates: true,
      documentReminders: true,
      paymentNotifications: true,
    },
  })

const privacyForm = useForm<z.infer<typeof privacySchema>>({
    resolver: zodResolver(privacySchema),
    defaultValues: {
      showProfile: true,
      showContactInfo: false,
      allowDataCollection: true,
      allowCookies: true,
    },
  })

async function onAppearanceSubmit(values: z.infer<typeof appearanceSchema>) {
    setIsLoading(true)
    try {
      // Here you would typically make an API call to update appearance settings
      setTimeout(() => {
        toast({
          title: "Appearance settings updated",
          description: "Your appearance settings have been updated successfully.",
        })
        setIsLoading(false)
      }, 1000)
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Update failed",
        description: "An error occurred while updating your appearance settings. Please try again.",
      })
      setIsLoading(false)
    }
  }

async function onNotificationSubmit(values: z.infer<typeof notificationSchema>) {
    setIsLoading(true)
    try {
      // Here you would typically make an API call to update notification settings
      setTimeout(() => {
        toast({
          title: "Notification settings updated",
          description: "Your notification settings have been updated successfully.",
        })
        setIsLoading(false)
      }, 1000)
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Update failed",
        description: "An error occurred while updating your notification settings. Please try again.",
      })
      setIsLoading(false)
    }
  }

async function onPrivacySubmit(values: z.infer<typeof privacySchema>) {
    setIsLoading(true)
    try {
      // Here you would typically make an API call to update privacy settings
      setTimeout(() => {
        toast({
          title: "Privacy settings updated",
          description: "Your privacy settings have been updated successfully.",
        })
        setIsLoading(false)
      }, 1000)
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Update failed",
        description: "An error occurred while updating your privacy settings. Please try again.",
      })
      setIsLoading(false)
    }
  }

const handleExportData = () => {
    setIsLoading(true)
    // Here you would typically make an API call to export user data
    setTimeout(() => {
      toast({
        title: "Data export initiated",
        description: "Your data export has been initiated. You will receive an email with your data shortly.",
      })
      setIsLoading(false)
    }, 1500)
  }

const handleDeleteAccount = () => {
    setIsLoading(true)
    // Here you would typically make an API call to delete the account
    setTimeout(() => {
      toast({
        title: "Account deletion initiated",
        description: "Your account deletion has been initiated. You will receive a confirmation email shortly.",
      })
      setShowDeleteConfirm(false)
      setIsLoading(false)
    }, 1500)
  }

return (
    <StudentLayout>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
          <p className="text-muted-foreground">Manage your account settings and preferences</p>
        </div>
      </div>

<Tabs defaultValue="appearance" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="appearance">Appearance</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="privacy">Privacy</TabsTrigger>
          <TabsTrigger value="account">Account</TabsTrigger>
        </TabsList>

<TabsContent value="appearance" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Appearance</CardTitle>
              <CardDescription>Customize how the scholarship system looks for you</CardDescription>
            </CardHeader>
            <CardContent>
              <Form {...appearanceForm}>
                <form onSubmit={appearanceForm.handleSubmit(onAppearanceSubmit)} className="space-y-6">
                  <FormField
                    control={appearanceForm.control}
                    name="theme"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Theme</FormLabel>
                        <div className="flex items-center space-x-4">
                          <FormControl>
                            <div className="flex space-x-4">
                              <div
                                className={`flex flex-col items-center space-y-2 ${field.value === "light" ? "text-primary" : "text-muted-foreground"}`}
                              >
                                <div
                                  className={`p-2 rounded-full cursor-pointer ${field.value === "light" ? "bg-primary/10" : "hover:bg-muted"}`}
                                  onClick={() => field.onChange("light")}
                                >
                                  <Sun className="h-5 w-5" />
                                </div>
                                <span className="text-xs">Light</span>
                              </div>
                              <div
                                className={`flex flex-col items-center space-y-2 ${field.value === "dark" ? "text-primary" : "text-muted-foreground"}`}
                              >
                                <div
                                  className={`p-2 rounded-full cursor-pointer ${field.value === "dark" ? "bg-primary/10" : "hover:bg-muted"}`}
                                  onClick={() => field.onChange("dark")}
                                >
                                  <Moon className="h-5 w-5" />
                                </div>
                                <span className="text-xs">Dark</span>
                              </div>
                              <div
                                className={`flex flex-col items-center space-y-2 ${field.value === "system" ? "text-primary" : "text-muted-foreground"}`}
                              >
                                <div
                                  className={`p-2 rounded-full cursor-pointer ${field.value === "system" ? "bg-primary/10" : "hover:bg-muted"}`}
                                  onClick={() => field.onChange("system")}
                                >
                                  <Laptop className="h-5 w-5" />
                                </div>
                                <span className="text-xs">System</span>
                              </div>
                            </div>
                          </FormControl>
                          <FormMessage />
                        </div>
                      </FormItem>
                    )}
                  />

<FormField
                    control={appearanceForm.control}
                    name="fontSize"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Font Size</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select font size" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="small">Small</SelectItem>
                            <SelectItem value="medium">Medium</SelectItem>
                            <SelectItem value="large">Large</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormDescription>This will adjust the size of text throughout the application.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

<FormField
                    control={appearanceForm.control}
                    name="language"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Language</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select language" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="en">English</SelectItem>
                            <SelectItem value="fil">Filipino</SelectItem>
                            <SelectItem value="es">Spanish</SelectItem>
                            <SelectItem value="zh">Chinese</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormDescription>
                          This will change the language used throughout the application.
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

<Button type="submit" disabled={isLoading}>
                    {isLoading ? "Saving..." : "Save Appearance Settings"}
                  </Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notifications" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Notification Settings</CardTitle>
              <CardDescription>Manage how you receive notifications</CardDescription>
            </CardHeader>
            <CardContent>
              <Form {...notificationForm}>
                <form onSubmit={notificationForm.handleSubmit(onNotificationSubmit)} className="space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <Bell className="mr-2 h-5 w-5" />
                      Communication Channels
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={notificationForm.control}
                        name="emailNotifications"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Email Notifications</FormLabel>
                              <FormDescription>Receive notifications via email</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={notificationForm.control}
                        name="smsNotifications"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">SMS Notifications</FormLabel>
                              <FormDescription>Receive notifications via text message</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <FileText className="mr-2 h-5 w-5" />
                      Notification Types
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={notificationForm.control}
                        name="applicationUpdates"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Application Updates</FormLabel>
                              <FormDescription>Notifications about your scholarship application status</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={notificationForm.control}
                        name="documentReminders"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Document Reminders</FormLabel>
                              <FormDescription>Reminders about required document submissions</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={notificationForm.control}
                        name="paymentNotifications"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Payment Notifications</FormLabel>
                              <FormDescription>Notifications about scholarship fund disbursements</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<Button type="submit" disabled={isLoading}>
                    {isLoading ? "Saving..." : "Save Notification Settings"}
                  </Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="privacy" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Privacy Settings</CardTitle>
              <CardDescription>Manage your privacy and data preferences</CardDescription>
            </CardHeader>
            <CardContent>
              <Form {...privacyForm}>
                <form onSubmit={privacyForm.handleSubmit(onPrivacySubmit)} className="space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <Eye className="mr-2 h-5 w-5" />
                      Profile Visibility
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={privacyForm.control}
                        name="showProfile"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Show Profile to Administrators</FormLabel>
                              <FormDescription>
                                Allow scholarship administrators to view your profile information
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={privacyForm.control}
                        name="showContactInfo"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Show Contact Information</FormLabel>
                              <FormDescription>
                                Allow scholarship administrators to view your contact information
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <Shield className="mr-2 h-5 w-5" />
                      Data Privacy
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={privacyForm.control}
                        name="allowDataCollection"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Allow Data Collection</FormLabel>
                              <FormDescription>
                                Allow the scholarship system to collect data for program improvement
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={privacyForm.control}
                        name="allowCookies"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Allow Cookies</FormLabel>
                              <FormDescription>
                                Allow the scholarship system to use cookies for better user experience
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<Button type="submit" disabled={isLoading}>
                    {isLoading ? "Saving..." : "Save Privacy Settings"}
                  </Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="account" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Account Management</CardTitle>
              <CardDescription>Manage your account data and settings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h3 className="text-lg font-medium flex items-center">
                  <Download className="mr-2 h-5 w-5" />
                  Export Your Data
                </h3>
                <p className="text-sm text-muted-foreground">
                  You can export all your personal data and scholarship information in a downloadable format.
                </p>
                <Button variant="outline" onClick={handleExportData} disabled={isLoading}>
                  {isLoading ? "Exporting..." : "Export My Data"}
                </Button>
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium flex items-center text-destructive">
                  <Trash2 className="mr-2 h-5 w-5" />
                  Delete Account
                </h3>
                <p className="text-sm text-muted-foreground">
                  Permanently delete your account and all associated data. This action cannot be undone.
                </p>
                {!showDeleteConfirm ? (
                  <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)}>
                    Delete My Account
                  </Button>
                ) : (
                  <Alert variant="destructive">
                    <AlertTriangle className="h-4 w-4" />
                    <AlertTitle>Are you sure you want to delete your account?</AlertTitle>
                    <AlertDescription>
                      <p className="mb-4">
                        This will permanently delete your account, all your personal information, and scholarship data.
                        This action cannot be undone.
                      </p>
                      <div className="flex space-x-2">
                        <Button variant="destructive" onClick={handleDeleteAccount} disabled={isLoading}>
                          {isLoading ? "Deleting..." : "Yes, Delete My Account"}
                        </Button>
                        <Button variant="outline" onClick={() => setShowDeleteConfirm(false)} disabled={isLoading}>
                          Cancel
                        </Button>
                      </div>
                    </AlertDescription>
                  </Alert>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </StudentLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx"
"use client"

import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AdminLayout } from "@/components/admin-layout"
import { useToast } from "@/components/ui/use-toast"
import { Moon, Sun, Laptop, Bell, Database, Settings2, Shield, FileText, Save, RefreshCw } from "lucide-react"

const notificationSchema = z.object({
  emailNotifications: z.boolean(),
  smsNotifications: z.boolean(),
  systemAlerts: z.boolean(),
  applicationUpdates: z.boolean(),
  securityAlerts: z.boolean(),
})

const systemSchema = z.object({
  autoApproveDocuments: z.boolean(),
  requireAdminVerification: z.boolean(),
  enableQRVerification: z.boolean(),
  enableBulkOperations: z.boolean(),
  enableAuditLog: z.boolean(),
  backupFrequency: z.enum(["daily", "weekly", "monthly"]),
  retentionPeriod: z.enum(["30days", "60days", "90days", "1year"]),
})

export default function AdminSettingsPage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("appearance")
  const [isLoading, setIsLoading] = useState(false)

const notificationForm = useForm<z.infer<typeof notificationSchema>>({
    resolver: zodResolver(notificationSchema),
    defaultValues: {
      emailNotifications: true,
      smsNotifications: true,
      systemAlerts: true,
      applicationUpdates: true,
      securityAlerts: true,
    },
  })

const systemForm = useForm<z.infer<typeof systemSchema>>({
    resolver: zodResolver(systemSchema),
    defaultValues: {
      autoApproveDocuments: false,
      requireAdminVerification: true,
      enableQRVerification: true,
      enableBulkOperations: true,
      enableAuditLog: true,
      backupFrequency: "daily",
      retentionPeriod: "90days",
    },
  })

async function onSystemSubmit(values: z.infer<typeof systemSchema>) {
    setIsLoading(true)
    try {
      // Here you would typically make an API call to update system settings
      setTimeout(() => {
        toast({
          title: "System settings updated",
          description: "The system settings have been updated successfully.",
        })
        setIsLoading(false)
      }, 1000)
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Update failed",
        description: "An error occurred while updating the system settings. Please try again.",
      })
      setIsLoading(false)
    }
  }

const handleBackupDatabase = () => {
    setIsLoading(true)
    // Here you would typically make an API call to backup the database
    setTimeout(() => {
      toast({
        title: "Database backup initiated",
        description: "The database backup has been initiated. You will be notified when it's complete.",
      })
      setIsLoading(false)
    }, 1500)
  }

const handleRestoreDatabase = () => {
    setIsLoading(true)
    // Here you would typically make an API call to restore the database
    setTimeout(() => {
      toast({
        title: "Database restore initiated",
        description: "The database restore has been initiated. You will be notified when it's complete.",
      })
      setIsLoading(false)
    }, 1500)
  }

return (
    <AdminLayout>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">System Settings</h1>
          <p className="text-muted-foreground">Manage system settings and preferences</p>
        </div>
      </div>

<Tabs defaultValue="appearance" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="appearance">Appearance</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="system">System</TabsTrigger>
          <TabsTrigger value="database">Database</TabsTrigger>
        </TabsList>

<div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <FileText className="mr-2 h-5 w-5" />
                      Notification Types
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={notificationForm.control}
                        name="systemAlerts"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">System Alerts</FormLabel>
                              <FormDescription>Important system alerts and announcements</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={notificationForm.control}
                        name="applicationUpdates"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Application Updates</FormLabel>
                              <FormDescription>Notifications about new scholarship applications</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={notificationForm.control}
                        name="securityAlerts"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Security Alerts</FormLabel>
                              <FormDescription>Notifications about security-related events</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<TabsContent value="system" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>System Settings</CardTitle>
              <CardDescription>Configure system-wide settings for the scholarship program</CardDescription>
            </CardHeader>
            <CardContent>
              <Form {...systemForm}>
                <form onSubmit={systemForm.handleSubmit(onSystemSubmit)} className="space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <Settings2 className="mr-2 h-5 w-5" />
                      Application Processing
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={systemForm.control}
                        name="autoApproveDocuments"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Auto-Approve Documents</FormLabel>
                              <FormDescription>
                                Automatically approve documents that meet all requirements
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={systemForm.control}
                        name="requireAdminVerification"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Require Admin Verification</FormLabel>
                              <FormDescription>Require administrator verification for all applications</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={systemForm.control}
                        name="enableQRVerification"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Enable QR Verification</FormLabel>
                              <FormDescription>Enable QR code verification for scholarship recipients</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={systemForm.control}
                        name="enableBulkOperations"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Enable Bulk Operations</FormLabel>
                              <FormDescription>Enable bulk approval/rejection of applications</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-medium flex items-center">
                      <Shield className="mr-2 h-5 w-5" />
                      Security & Compliance
                    </h3>
                    <div className="space-y-2">
                      <FormField
                        control={systemForm.control}
                        name="enableAuditLog"
                        render={({ field }) => (
                          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                            <div className="space-y-0.5">
                              <FormLabel className="text-base">Enable Audit Log</FormLabel>
                              <FormDescription>Keep a detailed log of all system activities</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={systemForm.control}
                        name="backupFrequency"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Backup Frequency</FormLabel>
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue placeholder="Select backup frequency" />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                <SelectItem value="daily">Daily</SelectItem>
                                <SelectItem value="weekly">Weekly</SelectItem>
                                <SelectItem value="monthly">Monthly</SelectItem>
                              </SelectContent>
                            </Select>
                            <FormDescription>How often the system should automatically backup data</FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={systemForm.control}
                        name="retentionPeriod"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Data Retention Period</FormLabel>
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue placeholder="Select retention period" />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                <SelectItem value="30days">30 Days</SelectItem>
                                <SelectItem value="60days">60 Days</SelectItem>
                                <SelectItem value="90days">90 Days</SelectItem>
                                <SelectItem value="1year">1 Year</SelectItem>
                              </SelectContent>
                            </Select>
                            <FormDescription>How long to keep audit logs and system data</FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

<Button type="submit" disabled={isLoading}>
                    {isLoading ? "Saving..." : "Save System Settings"}
                  </Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="database" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Database Management</CardTitle>
              <CardDescription>Manage database operations and maintenance</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h3 className="text-lg font-medium flex items-center">
                  <Save className="mr-2 h-5 w-5" />
                  Backup Database
                </h3>
                <p className="text-sm text-muted-foreground">
                  Create a backup of the entire scholarship database. This includes all student records, applications,
                  documents, and system settings.
                </p>
                <Button variant="outline" onClick={handleBackupDatabase} disabled={isLoading}>
                  <Database className="mr-2 h-4 w-4" />
                  {isLoading ? "Backing up..." : "Backup Database"}
                </Button>
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium flex items-center">
                  <RefreshCw className="mr-2 h-5 w-5" />
                  Restore Database
                </h3>
                <p className="text-sm text-muted-foreground">
                  Restore the database from a previous backup. This will replace all current data with the data from the
                  backup.
                </p>
                <Alert>
                  <AlertTitle>Warning</AlertTitle>
                  <AlertDescription>
                    Restoring the database will overwrite all current data. This action cannot be undone.
                  </AlertDescription>
                </Alert>
                <div className="flex items-center gap-4">
                  <Select defaultValue="latest">
                    <SelectTrigger className="w-[250px]">
                      <SelectValue placeholder="Select backup to restore" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="latest">Latest Backup (March 29, 2023 - 10:30 AM)</SelectItem>
                      <SelectItem value="march28">March 28, 2023 - 10:30 AM</SelectItem>
                      <SelectItem value="march27">March 27, 2023 - 10:30 AM</SelectItem>
                      <SelectItem value="march26">March 26, 2023 - 10:30 AM</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="destructive" onClick={handleRestoreDatabase} disabled={isLoading}>
                    {isLoading ? "Restoring..." : "Restore Database"}
                  </Button>
                </div>
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium">Database Statistics</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Total Records</div>
                    <div className="text-2xl font-bold">1,256</div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Database Size</div>
                    <div className="text-2xl font-bold">256 MB</div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Last Backup</div>
                    <div className="text-2xl font-bold">1 day ago</div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Backup Size</div>
                    <div className="text-2xl font-bold">128 MB</div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="app/api/auth/[...nextauth]/route.ts" isQuickEdit="true"
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

// Mock users for demo purposes
const users = [
  {
    id: "1",
    name: "Juan Dela Cruz",
    email: "student@example.com",
    password: "Student123", // Changed from password123 to Student123
    role: "student",
  },
  {
    id: "2",
    name: "Admin User",
    email: "admin@example.com",
    password: "Admin123", // Changed from password123 to Admin123
    role: "admin",
  },
]

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        try {
          if (!credentials?.email || !credentials?.password) {
            return null
          }

const user = users.find((user) => user.email === credentials.email)

if (!user) {
            return null
          }

// Simple password check for demo
          if (credentials.password !== user.password) {
            return null
          }

return {
            id: user.id,
            name: user.name,
            email: user.email,
            role: user.role,
          }
        } catch (error) {
          console.error("Auth error:", error)
          return null
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.role = token.role
      }
      return session
    },
  },
  pages: {
    signIn: "/login",
    error: "/login",
  },
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  secret: process.env.NEXTAUTH_SECRET || "THIS_IS_A_DEVELOPMENT_SECRET_CHANGE_IT",
  debug: false, // Set to false in production
}

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }
[V0_FILE]typescriptreact:file="components/auth-provider.tsx"
"use client"

import type React from "react"

import { SessionProvider } from "next-auth/react"

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}
[V0_FILE]typescriptreact:file="components/document-upload.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useCallback } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { 
  FileText, 
  Upload, 
  CheckCircle, 
  X, 
  AlertCircle,
  ImageIcon,
  FileIcon,
  RefreshCw
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { createDocument, getDocumentsByStudentId } from "@/lib/storage"

type DocumentStatus = {
  isUploading: boolean
  isUploaded: boolean
  progress: number
  fileName: string
  fileSize: string
  error: string | null
}

const initialDocumentStatus: DocumentStatus = {
  isUploading: false,
  isUploaded: false,
  progress: 0,
  fileName: "",
  fileSize: "",
  error: null,
}

export function DocumentUpload() {
  const { toast } = useToast()
  const { user } = useAuth()
  const [documents, setDocuments] = useState<Record<string, DocumentStatus>>({
    enrollmentForm: { ...initialDocumentStatus },
    grades: { ...initialDocumentStatus },
    schoolId: { ...initialDocumentStatus },
    barangayClearance: { ...initialDocumentStatus },
  })
  const [dragOver, setDragOver] = useState<string | null>(null)

// Load existing documents on mount
  useEffect(() => {
    if (user) {
      const existingDocs = getDocumentsByStudentId(user.id)
      const updatedDocuments = { ...documents }
      
      existingDocs.forEach((doc) => {
        const docType = getDocumentType(doc.name)
        if (docType && updatedDocuments[docType]) {
          updatedDocuments[docType] = {
            ...initialDocumentStatus,
            isUploaded: true,
            fileName: doc.name,
            fileSize: doc.fileSize,
          }
        }
      })
      
      setDocuments(updatedDocuments)
    }
  }, [user])

const getDocumentType = (name: string): string | null => {
    const nameMap: Record<string, string> = {
      "Enrollment Form": "enrollmentForm",
      "Grades": "grades",
      "School ID": "schoolId",
      "Barangay Clearance": "barangayClearance",
    }
    return nameMap[name] || null
  }

const getDocumentName = (documentType: string) => {
    switch (documentType) {
      case "enrollmentForm":
        return "Enrollment Form"
      case "grades":
        return "Grades"
      case "schoolId":
        return "School ID"
      case "barangayClearance":
        return "Barangay Clearance"
      default:
        return documentType
    }
  }

const formatFileSize = (bytes: number): string => {
    if (bytes < 1024) return bytes + " B"
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
    return (bytes / (1024 * 1024)).toFixed(1) + " MB"
  }

const validateFile = (file: File, acceptedTypes: string): string | null => {
    // Check file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      return "File size exceeds 5MB limit"
    }

// Check file type
    const extensions = acceptedTypes.split(",").map((t) => t.trim().toLowerCase())
    const fileExt = "." + file.name.split(".").pop()?.toLowerCase()
    
    if (!extensions.includes(fileExt)) {
      return `Invalid file type. Accepted: ${acceptedTypes}`
    }

return null
  }

const handleFileUpload = useCallback(async (documentType: string, file: File, acceptedTypes: string) => {
    // Validate file
    const error = validateFile(file, acceptedTypes)
    if (error) {
      setDocuments((prev) => ({
        ...prev,
        [documentType]: { ...prev[documentType], error },
      }))
      toast({
        variant: "destructive",
        title: "Upload failed",
        description: error,
      })
      return
    }

const fileSize = formatFileSize(file.size)

// Start upload
    setDocuments((prev) => ({
      ...prev,
      [documentType]: {
        ...prev[documentType],
        isUploading: true,
        progress: 10,
        fileName: file.name,
        fileSize,
        error: null,
      },
    }))

try {
      // Create form data for upload
      const formData = new FormData()
      formData.append('file', file)
      formData.append('folder', 'documents')
      formData.append('userId', user?.id || 'anonymous')

// Update progress to show we're uploading
      setDocuments((prev) => ({
        ...prev,
        [documentType]: { ...prev[documentType], progress: 30 },
      }))

// Upload to Vercel Blob via API
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      })

setDocuments((prev) => ({
        ...prev,
        [documentType]: { ...prev[documentType], progress: 70 },
      }))

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || 'Upload failed')
      }

const data = await response.json()

setDocuments((prev) => ({
        ...prev,
        [documentType]: { ...prev[documentType], progress: 90 },
      }))

// Save document metadata to storage
      if (user) {
        createDocument({
          studentId: user.id,
          name: getDocumentName(documentType),
          type: file.type.includes("pdf") ? "pdf" : "image",
          status: "pending",
          fileSize,
          semester: "1st Semester",
          academicYear: "2024-2025",
          url: data.url, // Store the Blob URL
        })
      }

// Complete upload
      setDocuments((prev) => ({
        ...prev,
        [documentType]: {
          ...prev[documentType],
          isUploading: false,
          isUploaded: true,
          progress: 100,
        },
      }))

toast({
        title: "Document uploaded successfully",
        description: (
          <div className="flex items-center gap-2">
            <CheckCircle className="h-4 w-4 text-green-600" />
            <span>{getDocumentName(documentType)} is now pending review</span>
          </div>
        ),
      })
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Upload failed'
      setDocuments((prev) => ({
        ...prev,
        [documentType]: {
          ...initialDocumentStatus,
          error: errorMessage,
        },
      }))
      toast({
        variant: "destructive",
        title: "Upload failed",
        description: errorMessage,
      })
    }
  }, [user, toast])

const handleFileChange = (documentType: string, acceptedTypes: string, e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || !e.target.files[0]) return
    handleFileUpload(documentType, e.target.files[0], acceptedTypes)
  }

const handleDrop = useCallback((documentType: string, acceptedTypes: string, e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(null)
    
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFileUpload(documentType, e.dataTransfer.files[0], acceptedTypes)
    }
  }, [handleFileUpload])

const handleDragOver = (documentType: string, e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(documentType)
  }

const handleDragLeave = () => {
    setDragOver(null)
  }

const handleRemoveDocument = (documentType: string) => {
    setDocuments((prev) => ({
      ...prev,
      [documentType]: { ...initialDocumentStatus },
    }))
    toast({
      title: "Document removed",
      description: "You can upload a new document",
    })
  }

const documentConfigs = [
    {
      type: "enrollmentForm",
      title: "Enrollment Form",
      description: "Current semester enrollment form",
      acceptedTypes: ".pdf",
      icon: FileText,
      required: true,
    },
    {
      type: "grades",
      title: "Grades / Report Card",
      description: "Previous semester grades",
      acceptedTypes: ".pdf",
      icon: FileText,
      required: true,
    },
    {
      type: "schoolId",
      title: "School ID",
      description: "Clear photo of your school ID",
      acceptedTypes: ".jpg,.jpeg,.png",
      icon: ImageIcon,
      required: true,
    },
    {
      type: "barangayClearance",
      title: "Barangay Clearance",
      description: "Valid barangay clearance",
      acceptedTypes: ".pdf",
      icon: FileText,
      required: true,
    },
  ]

const uploadedCount = Object.values(documents).filter((d) => d.isUploaded).length
  const totalRequired = documentConfigs.filter((d) => d.required).length

return (
    <div className="space-y-6">
      {/* Progress Summary */}
      <div className="bg-muted/50 rounded-lg p-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-medium">Upload Progress</span>
          <span className="text-sm text-muted-foreground">
            {uploadedCount} of {totalRequired} documents uploaded
          </span>
        </div>
        <Progress value={(uploadedCount / totalRequired) * 100} className="h-2" />
        {uploadedCount === totalRequired && (
          <p className="text-xs text-green-600 mt-2 flex items-center gap-1">
            <CheckCircle className="h-3 w-3" />
            All required documents uploaded
          </p>
        )}
      </div>

{/* Document Upload Cards */}
      <div className="grid gap-4 md:grid-cols-2">
        {documentConfigs.map((config) => {
          const docStatus = documents[config.type]
          const IconComponent = config.icon

return (
            <Card 
              key={config.type}
              className={`transition-all duration-200 ${
                dragOver === config.type ? "ring-2 ring-green-500 bg-green-50" : ""
              } ${docStatus.isUploaded ? "bg-green-50/50 border-green-200" : ""}`}
            >
              <CardContent className="p-4">
                <div 
                  className="flex flex-col"
                  onDrop={(e) => handleDrop(config.type, config.acceptedTypes, e)}
                  onDragOver={(e) => handleDragOver(config.type, e)}
                  onDragLeave={handleDragLeave}
                >
                  {/* Header */}
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-lg ${
                        docStatus.isUploaded 
                          ? "bg-green-100 text-green-600" 
                          : "bg-muted text-muted-foreground"
                      }`}>
                        <IconComponent className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="font-medium text-sm">{config.title}</h3>
                        <p className="text-xs text-muted-foreground">{config.description}</p>
                      </div>
                    </div>
                    {config.required && !docStatus.isUploaded && (
                      <span className="text-xs text-red-500 font-medium">Required</span>
                    )}
                  </div>

{/* Upload Area */}
                  {docStatus.isUploaded ? (
                    <div className="border rounded-lg p-3 bg-background">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2 min-w-0">
                          <CheckCircle className="h-4 w-4 text-green-600 shrink-0" />
                          <div className="min-w-0">
                            <p className="text-sm font-medium truncate">{docStatus.fileName}</p>
                            <p className="text-xs text-muted-foreground">{docStatus.fileSize}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-1">
                          <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded">
                            Pending Review
                          </span>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-7 w-7 text-muted-foreground hover:text-red-600"
                            onClick={() => handleRemoveDocument(config.type)}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ) : docStatus.isUploading ? (
                    <div className="border rounded-lg p-3 bg-background">
                      <div className="flex items-center gap-2 mb-2">
                        <RefreshCw className="h-4 w-4 animate-spin text-green-600" />
                        <span className="text-sm">Uploading {docStatus.fileName}...</span>
                      </div>
                      <Progress value={docStatus.progress} className="h-1.5" />
                      <p className="text-xs text-muted-foreground mt-1">
                        {Math.round(docStatus.progress)}% complete
                      </p>
                    </div>
                  ) : (
                    <div className="relative">
                      <Input
                        id={config.type}
                        type="file"
                        accept={config.acceptedTypes}
                        className="hidden"
                        onChange={(e) => handleFileChange(config.type, config.acceptedTypes, e)}
                      />
                      <Label
                        htmlFor={config.type}
                        className={`flex flex-col items-center justify-center p-4 border-2 border-dashed rounded-lg cursor-pointer transition-colors ${
                          dragOver === config.type
                            ? "border-green-500 bg-green-50"
                            : "border-muted-foreground/25 hover:border-green-500 hover:bg-muted/50"
                        }`}
                      >
                        <Upload className="h-6 w-6 text-muted-foreground mb-2" />
                        <span className="text-sm font-medium">
                          Drop file here or click to browse
                        </span>
                        <span className="text-xs text-muted-foreground mt-1">
                          {config.acceptedTypes.replace(/\./g, "").toUpperCase()} (max 5MB)
                        </span>
                      </Label>

{docStatus.error && (
                        <div className="flex items-center gap-1 mt-2 text-red-600">
                          <AlertCircle className="h-3 w-3" />
                          <span className="text-xs">{docStatus.error}</span>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="tailwind.config.ts" isFixed="true" isQuickEdit="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          // Add custom green shades
          50: "#f0fdf4",
          100: "#dcfce7",
          200: "#bbf7d0",
          300: "#86efac",
          400: "#4ade80",
          500: "#22c55e",
          600: "#16a34a",
          700: "#15803d",
          800: "#166534",
          900: "#14532d",
          950: "#052e16",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/application-status.tsx"
import { CheckCircle, Clock, XCircle } from "lucide-react"

interface ApplicationStatusProps {
  status: string
}

export function ApplicationStatus({ status }: ApplicationStatusProps) {
  const steps = [
    { id: 1, name: "Submitted", status: "complete" },
    {
      id: 2,
      name: "Under Review",
      status:
        status === "pending" ? "current" : status === "approved" || status === "rejected" ? "complete" : "upcoming",
    },
    { id: 3, name: "Decision", status: status === "approved" || status === "rejected" ? "complete" : "upcoming" },
  ]

return (
    <div className="mt-4">
      <div className="relative">
        <div className="absolute inset-0 flex items-center" aria-hidden="true">
          <div className="h-0.5 w-full bg-gray-200"></div>
        </div>
        <ul className="relative flex w-full justify-between">
          {steps.map((step) => (
            <li key={step.id} className="flex items-center justify-center">
              {step.status === "complete" ? (
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-green-500 to-green-600 shadow-md">
                  <CheckCircle className="h-5 w-5 text-white" />
                </div>
              ) : step.status === "current" ? (
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-amber-400 to-amber-500 shadow-md animate-pulse-slow">
                  <Clock className="h-5 w-5 text-white" />
                </div>
              ) : step.status === "upcoming" ? (
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
                  <span className="h-2.5 w-2.5 rounded-full bg-gray-400"></span>
                </div>
              ) : (
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-red-500 to-red-600 shadow-md">
                  <XCircle className="h-5 w-5 text-white" />
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>
      <ul className="mt-2 grid grid-cols-3 text-sm">
        {steps.map((step) => (
          <li key={step.id} className="text-center">
            <span
              className={`${
                step.status === "complete"
                  ? "text-green-600 font-medium"
                  : step.status === "current"
                    ? "text-amber-600 font-medium"
                    : step.status === "upcoming"
                      ? "text-gray-500"
                      : "text-red-600 font-medium"
              }`}
            >
              {step.name}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-table.tsx"
"use client"

import type React from "react"
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { cn } from "@/lib/utils"
import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"

export type SortDirection = "asc" | "desc" | null
export type ColumnDefinition<T> = {
  header: string
  accessorKey: keyof T
  cell?: (item: T) => React.ReactNode
  sortable?: boolean
  className?: string
}

interface EnhancedTableProps<T> {
  data: T[]
  columns: ColumnDefinition<T>[]
  caption?: string
  onRowClick?: (item: T) => void
  sortColumn?: keyof T
  sortDirection?: SortDirection
  onSort?: (column: keyof T) => void
  zebra?: boolean
  hover?: boolean
  stickyHeader?: boolean
  className?: string
}

export function EnhancedTable<T>({
  data,
  columns,
  caption,
  onRowClick,
  sortColumn,
  sortDirection,
  onSort,
  zebra = true,
  hover = true,
  stickyHeader = false,
  className,
}: EnhancedTableProps<T>) {
  const getSortIcon = (column: keyof T) => {
    if (column !== sortColumn) return <ChevronsUpDown className="ml-2 h-4 w-4 text-gray-400" />
    if (sortDirection === "asc") return <ChevronUp className="ml-2 h-4 w-4 text-green-600" />
    return <ChevronDown className="ml-2 h-4 w-4 text-green-600" />
  }

return (
    <div className="rounded-md border shadow-sm bg-white dark:bg-gray-950">
      <div className={cn("relative overflow-auto", className)}>
        <Table className={cn(zebra && "table-zebra", hover && "table-hover", stickyHeader && "table-sticky-header")}>
          {caption && <TableCaption>{caption}</TableCaption>}
          <TableHeader>
            <TableRow className="bg-gray-50 dark:bg-gray-800/50">
              {columns.map((column) => (
                <TableHead
                  key={String(column.accessorKey)}
                  className={cn(
                    "font-semibold text-gray-700 dark:text-gray-300",
                    column.sortable && "cursor-pointer select-none",
                    column.className,
                  )}
                  onClick={() => column.sortable && onSort?.(column.accessorKey)}
                >
                  <div className="flex items-center">
                    {column.header}
                    {column.sortable && getSortIcon(column.accessorKey)}
                  </div>
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.length === 0 ? (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
                  No results.
                </TableCell>
              </TableRow>
            ) : (
              data.map((item, index) => (
                <TableRow key={index} onClick={() => onRowClick?.(item)} className={cn(onRowClick && "cursor-pointer")}>
                  {columns.map((column) => (
                    <TableCell key={String(column.accessorKey)} className={column.className}>
                      {column.cell ? column.cell(item) : (item[column.accessorKey] as React.ReactNode)}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr ref={ref} className={cn("border-b transition-colors data-[state=selected]:bg-muted", className)} {...props} />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLTableCaptionAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
))
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="components/table-pagination.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"

interface TablePaginationProps {
  currentPage: number
  totalPages: number
  pageSize: number
  totalItems: number
  onPageChange: (page: number) => void
  onPageSizeChange: (pageSize: number) => void
  pageSizeOptions?: number[]
  showPageSizeOptions?: boolean
  className?: string
}

export function TablePagination({
  currentPage,
  totalPages,
  pageSize,
  totalItems,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions = [10, 20, 30, 50, 100],
  showPageSizeOptions = true,
  className,
}: TablePaginationProps) {
  const startItem = (currentPage - 1) * pageSize + 1
  const endItem = Math.min(currentPage * pageSize, totalItems)

return (
    <div className={`flex flex-col sm:flex-row items-center justify-between gap-4 py-4 ${className}`}>
      <div className="text-sm text-muted-foreground">
        Showing <span className="font-medium">{startItem}</span> to <span className="font-medium">{endItem}</span> of{" "}
        <span className="font-medium">{totalItems}</span> results
      </div>
      <div className="flex items-center space-x-2">
        {showPageSizeOptions && (
          <div className="flex items-center space-x-2">
            <p className="text-sm text-muted-foreground">Rows per page</p>
            <Select value={pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
              <SelectTrigger className="h-8 w-[70px]">
                <SelectValue placeholder={pageSize.toString()} />
              </SelectTrigger>
              <SelectContent>
                {pageSizeOptions.map((option) => (
                  <SelectItem key={option} value={option.toString()}>
                    {option}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8"
            onClick={() => onPageChange(1)}
            disabled={currentPage === 1}
          >
            <ChevronsLeft className="h-4 w-4" />
            <span className="sr-only">First page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8"
            onClick={() => onPageChange(currentPage - 1)}
            disabled={currentPage === 1}
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="sr-only">Previous page</span>
          </Button>
          <div className="flex items-center gap-1">
            <span className="text-sm font-medium">{currentPage}</span>
            <span className="text-sm text-muted-foreground">of</span>
            <span className="text-sm font-medium">{totalPages}</span>
          </div>
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8"
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            <ChevronRight className="h-4 w-4" />
            <span className="sr-only">Next page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8"
            onClick={() => onPageChange(totalPages)}
            disabled={currentPage === totalPages}
          >
            <ChevronsRight className="h-4 w-4" />
            <span className="sr-only">Last page</span>
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-100", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-gradient-to-r from-green-500 to-green-600 transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescript:file="app/api/register/route.ts"
import { NextResponse } from "next/server"
import { createUser, createApplication, isEmailPreApproved } from "@/lib/storage"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { fullName, email, password, address, contactNumber, age, barangay, schoolName, course, yearLevel } = body

// Validate required fields
    if (!fullName || !email || !password) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

if (!isEmailPreApproved(email)) {
      return NextResponse.json(
        {
          error:
            "This email is not authorized to register. Please contact the administrator to get your email approved.",
        },
        { status: 403 },
      )
    }

try {
      // Create user in in-memory storage
      const newUser = createUser({
        name: fullName,
        email: email,
        password: password,
        role: "student",
        profileData: {
          fullName,
          email,
          contactNumber: contactNumber || "",
          address: address || "",
          age: age || "",
          barangay: barangay || "",
          schoolName: schoolName || "",
          course: course || "",
          yearLevel: yearLevel || "",
          studentId: `STU-${Date.now()}`,
        },
      })

// Create application in in-memory storage
      createApplication({
        studentId: newUser.id,
        fullName: fullName,
        email: email,
        course: course || "",
        yearLevel: yearLevel || "",
        school: schoolName || "",
        barangay: barangay || "",
        status: "pending",
      })

return NextResponse.json({ success: true, message: "Registration successful" }, { status: 201 })
    } catch (error: any) {
      return NextResponse.json({ error: error.message || "User creation failed" }, { status: 400 })
    }
  } catch (error) {
    console.error("Registration error:", error)
    return NextResponse.json({ error: "An error occurred during registration" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/manual-redirect-button.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { getCurrentUser } from "@/lib/storage"

export function ManualRedirectButton() {
  const handleManualRedirect = () => {
    const user = getCurrentUser()
    if (!user) {
      console.log("No user found, cannot redirect")
      return
    }

console.log("Manual redirect for user role:", user.role)

if (user.role === "admin") {
      window.location.href = "/admin/dashboard"
    } else {
      window.location.href = "/student/dashboard"
    }
  }

return (
    <Button onClick={handleManualRedirect} variant="outline" className="mt-2 w-full">
      Click here if not redirected automatically
    </Button>
  )
}
[V0_FILE]typescriptreact:file="middleware.ts"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  // Log the request path for debugging
  console.log("Middleware running for path:", request.nextUrl.pathname)

// Always allow navigation - we'll handle auth in the components
  return NextResponse.next()
}

// Limit middleware to only run on these paths
export const config = {
  matcher: ["/student/:path*", "/admin/:path*"],
}
[V0_FILE]typescriptreact:file="app/admin/profile/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { getCurrentUser, updateUserProfile } from "@/lib/storage"
import { useAuth } from "@/contexts/auth-context"
import { AdminLayout } from "@/components/admin-layout"

const profileFormSchema = z.object({
  fullName: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
  bio: z.string().max(500, {
    message: "Bio must not be longer than 500 characters.",
  }),
  contactNumber: z.string().min(10, {
    message: "Contact number must be at least 10 digits.",
  }),
  position: z.string().min(2, {
    message: "Position must be at least 2 characters.",
  }),
  department: z.string().min(2, {
    message: "Department must be at least 2 characters.",
  }),
})

type ProfileFormValues = z.infer<typeof profileFormSchema>

export default function AdminProfilePage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [profileData, setProfileData] = useState<any>(null)

// Load profile data on component mount
  useEffect(() => {
    const currentUser = getCurrentUser()
    if (currentUser && currentUser.profileData) {
      console.log("Loaded admin profile data:", currentUser.profileData)
      setProfileData(currentUser.profileData)
    }
  }, [])

// Initialize form with default values or loaded profile data
  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues: {
      fullName: profileData?.fullName || "",
      email: profileData?.email || "",
      bio: profileData?.bio || "",
      contactNumber: profileData?.contactNumber || "",
      position: profileData?.position || "",
      department: profileData?.department || "",
    },
  })

// Update form values when profile data is loaded
  useEffect(() => {
    if (profileData) {
      form.reset({
        fullName: profileData.fullName || "",
        email: profileData.email || "",
        bio: profileData.bio || "",
        contactNumber: profileData.contactNumber || "",
        position: profileData.position || "",
        department: profileData.department || "",
      })
    }
  }, [profileData, form])

function onSubmit(data: ProfileFormValues) {
    setIsLoading(true)

try {
      if (user) {
        // Update user profile in storage
        const updatedUser = updateUserProfile(user.id, data)
        console.log("Admin profile updated:", updatedUser)

// Update local state
        if (updatedUser && updatedUser.profileData) {
          setProfileData(updatedUser.profileData)
        }

toast({
          title: "Profile updated",
          description: "Your profile has been updated successfully.",
          variant: "success",
        })
      } else {
        throw new Error("User not found")
      }
    } catch (error: any) {
      console.error("Profile update error:", error)
      toast({
        variant: "destructive",
        title: "Update failed",
        description: error.message || "An error occurred while updating your profile.",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        <div>
          <h3 className="text-lg font-medium">Admin Profile</h3>
          <p className="text-sm text-muted-foreground">Manage your administrator profile information here.</p>
        </div>
        <div className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Personal Information</CardTitle>
              <CardDescription>Update your personal information here.</CardDescription>
            </CardHeader>
            <CardContent>
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="fullName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Full Name</FormLabel>
                          <FormControl>
                            <Input placeholder="Your name" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Email</FormLabel>
                          <FormControl>
                            <Input placeholder="Your email" {...field} readOnly />
                          </FormControl>
                          <FormDescription>Your email cannot be changed.</FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="contactNumber"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Contact Number</FormLabel>
                          <FormControl>
                            <Input placeholder="Your contact number" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="position"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Position</FormLabel>
                          <FormControl>
                            <Input placeholder="Your position" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="department"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Department</FormLabel>
                          <FormControl>
                            <Input placeholder="Your department" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

<FormField
                    control={form.control}
                    name="bio"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Bio</FormLabel>
                        <FormControl>
                          <Textarea
                            placeholder="Tell us a little bit about yourself"
                            className="resize-none"
                            {...field}
                          />
                        </FormControl>
                        <FormDescription>Brief description for your profile. URLs are hyperlinked.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

<Button type="submit" disabled={isLoading}>
                    {isLoading ? (
                      <>
                        <svg
                          className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Updating...
                      </>
                    ) : (
                      "Update profile"
                    )}
                  </Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </div>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/features-section.tsx"
export function FeaturesSection() {
  return (
    <section className="relative w-full bg-white py-16 md:py-24 overflow-hidden">
      {/* Background patterns */}
      <div className="absolute inset-0 z-0">
        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-green-50 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-green-50 to-transparent"></div>
        <div className="absolute right-0 top-1/4 h-64 w-64 rounded-full bg-gradient-to-br from-green-200 to-emerald-100 opacity-20 blur-3xl"></div>
        <div className="absolute left-0 bottom-1/4 h-64 w-64 rounded-full bg-gradient-to-tr from-teal-200 to-green-100 opacity-20 blur-3xl"></div>
      </div>

<div className="container relative z-10 px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <div className="inline-block rounded-full bg-gradient-to-r from-green-100 to-emerald-100 px-4 py-1.5 text-sm font-medium text-green-800 shadow-md">
              Program Benefits
            </div>
            <h2 className="text-3xl font-bold tracking-tighter bg-gradient-to-r from-green-800 via-green-600 to-emerald-600 bg-clip-text text-transparent sm:text-4xl md:text-5xl">
              Why Choose Our Scholarship?
            </h2>
            <p className="max-w-[900px] text-gray-600 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
              Our scholarship program offers comprehensive support to help you achieve your educational goals.
            </p>
          </div>
        </div>
        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <div
              key={index}
              className="group relative overflow-hidden rounded-xl border border-green-100 bg-gradient-to-br from-white to-green-50 p-6 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-green-200/40"
            >
              {/* Background gradient blob */}
              <div className="absolute -right-4 -bottom-4 h-32 w-32 rounded-full bg-gradient-to-br from-green-200 to-emerald-100 opacity-30 blur-xl transition-all duration-300 group-hover:opacity-50"></div>

{/* Icon with gradient background */}
              <div className="relative mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-emerald-400 p-3 text-white shadow-lg shadow-green-200/50">
                {feature.icon}
                <div className="absolute inset-0 rounded-xl bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-20"></div>
              </div>

<h3 className="relative mb-2 text-xl font-bold text-green-900">{feature.title}</h3>
              <p className="relative text-gray-600">{feature.description}</p>

{/* Hover indicator */}
              <div className="absolute bottom-0 left-0 h-1 w-0 bg-gradient-to-r from-green-500 to-emerald-400 transition-all duration-300 group-hover:w-full"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

const features = [
  {
    title: "Financial Support",
    description: "Receive comprehensive financial assistance for tuition, books, and living expenses.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M16 8h-6.5a2.5 2.5 0 0 0 0 5h3a2.5 2.5 0 0 1 0 5H6"></path>
        <path d="M12 18v2"></path>
        <path d="M12 4v2"></path>
      </svg>
    ),
  },
  {
    title: "Mentorship",
    description: "Connect with experienced mentors who will guide you through your academic journey.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
      </svg>
    ),
  },
  {
    title: "Career Opportunities",
    description: "Access exclusive job placements and internship opportunities with our partner companies.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect width="20" height="14" x="2" y="7" rx="2"></rect>
        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
      </svg>
    ),
  },
  {
    title: "Digital Verification",
    description: "Secure QR code system for easy verification and tracking of your scholarship status.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect width="5" height="5" x="3" y="3" rx="1"></rect>
        <rect width="5" height="5" x="16" y="3" rx="1"></rect>
        <rect width="5" height="5" x="3" y="16" rx="1"></rect>
        <path d="M21 16h-3a2 2 0 0 0-2 2v3"></path>
        <path d="M21 21v.01"></path>
        <path d="M12 7v3a2 2 0 0 1-2 2H7"></path>
        <path d="M3 12h.01"></path>
        <path d="M12 3h.01"></path>
        <path d="M12 16v.01"></path>
        <path d="M16 12h1"></path>
        <path d="M21 12v.01"></path>
      </svg>
    ),
  },
  {
    title: "Community Support",
    description: "Join a vibrant community of scholars and alumni for networking and support.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M18 8a6 6 0 0 0-6-6 6 6 0 0 0-6 6c0 7-3 9-3 9h18s-3-2-3-9"></path>
        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
      </svg>
    ),
  },
  {
    title: "Easy Application",
    description: "Simple and straightforward application process with real-time status updates.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <path d="m9 15 2 2 4-4"></path>
      </svg>
    ),
  },
]
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx"
export function TestimonialsSection() {
  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-br from-green-900 via-green-800 to-green-700 py-16 md:py-24">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-green-200/20 to-transparent"></div>
        <div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-green-200/20 to-transparent"></div>

{/* Animated circles */}
        <div className="animate-pulse-slow absolute top-1/4 right-1/4 h-64 w-64 rounded-full bg-gradient-to-br from-green-400 to-teal-300 opacity-10 blur-3xl"></div>
        <div className="animate-pulse-slow absolute bottom-1/4 left-1/4 h-80 w-80 rounded-full bg-gradient-to-tr from-emerald-400 to-green-300 opacity-10 blur-3xl"></div>

{/* Mesh pattern */}
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptMCAzMGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptLTMwLTE4YzMuMzE0IDAgNi0yLjY4NiA2LTZzLTIuNjg2LTYtNi02Yy0zLjMxNCAwLTYgMi42ODYtNiA2czIuNjg2IDYgNiA2em0wIDMwYzMuMzE0IDAgNi0yLjY4NiA2LTZzLTIuNjg2LTYtNi02Yy0zLjMxNCAwLTYgMi42ODYtNiA2czIuNjg2IDYgNiA2eiIgc3Ryb2tlPSIjMTY4MDNkIiBzdHJva2Utb3BhY2l0eT0iLjEiLz48L2c+PC9zdmc+')] opacity-20"></div>
      </div>

<div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((testimonial, index) => (
            <div
              key={index}
              className="group relative flex flex-col rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm p-1 transition-all duration-300 hover:-translate-y-2"
            >
              {/* Card border gradient */}
              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-green-400/20 via-emerald-300/20 to-green-400/20 opacity-50"></div>

{/* Card content */}
              <div className="relative flex h-full flex-col rounded-lg bg-white/10 backdrop-blur-sm p-6 z-10">
                {/* Quote icon */}
                <div className="absolute -top-4 -left-2 text-4xl text-green-300/20 font-serif">"</div>
                <div className="absolute -bottom-4 -right-2 text-4xl text-green-300/20 font-serif rotate-180">"</div>

{/* Stars */}
                <div className="mb-4 flex">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <svg
                      key={star}
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="text-yellow-300 drop-shadow-md"
                    >
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                  ))}
                </div>

{/* Quote */}
                <p className="flex-1 text-green-50">"{testimonial.quote}"</p>

{/* Author */}
                <div className="mt-6 flex items-center space-x-3">
                  <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-green-200/30 shadow-inner">
                    <div className="absolute inset-0 bg-gradient-to-br from-green-400/20 to-emerald-300/20"></div>
                    <img
                      src={`/placeholder.svg?height=48&width=48&text=${testimonial.name.charAt(0)}`}
                      alt={testimonial.name}
                      className="relative h-full w-full object-cover z-10"
                    />
                  </div>
                  <div>
                    <h4 className="font-semibold text-white">{testimonial.name}</h4>
                    <p className="text-sm text-green-200">{testimonial.role}</p>
                  </div>
                </div>

{/* Hover effect */}
                <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-green-400/10 to-emerald-300/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Top wave */}
      <div className="absolute top-0 left-0 right-0 transform rotate-180">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="w-full">
          <path
            fill="#ffffff"
            fillOpacity="1"
            d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,202.7C672,203,768,181,864,181.3C960,181,1056,203,1152,197.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          ></path>
        </svg>
      </div>

{/* Bottom wave */}
      <div className="absolute bottom-0 left-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="w-full">
          <path
            fill="#ffffff"
            fillOpacity="1"
            d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,202.7C672,203,768,181,864,181.3C960,181,1056,203,1152,197.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          ></path>
        </svg>
      </div>
    </section>
  )
}

const testimonials = [
  {
    name: "Maria Santos",
    role: "Computer Science Student",
    quote:
      "The scholarship program changed my life. I was able to focus on my studies without worrying about finances.",
  },
  {
    name: "Juan Dela Cruz",
    role: "Engineering Graduate",
    quote: "Thanks to this scholarship, I graduated with honors and secured a job at a top engineering firm.",
  },
  {
    name: "Ana Reyes",
    role: "Medical Student",
    quote:
      "The mentorship program connected me with professionals in my field who guided me through my academic journey.",
  },
]
[V0_FILE]typescriptreact:file="components/faq-section.tsx"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

export function FaqSection() {
  return (
    <section className="relative w-full bg-white py-16 md:py-24 overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-green-50 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-green-50 to-transparent"></div>

{/* Decorative circles */}
        <div className="absolute -left-20 top-1/3 h-64 w-64 rounded-full bg-gradient-to-br from-green-100 to-emerald-50 opacity-70 blur-3xl"></div>
        <div className="absolute -right-20 bottom-1/3 h-64 w-64 rounded-full bg-gradient-to-tr from-teal-100 to-green-50 opacity-70 blur-3xl"></div>
      </div>

<div className="relative mx-auto max-w-3xl py-12">
          {/* Decorative elements */}
          <div className="absolute -left-6 -top-6 h-20 w-20 rounded-full bg-gradient-to-br from-green-200 to-emerald-100 opacity-30 blur-xl"></div>
          <div className="absolute -right-6 -bottom-6 h-20 w-20 rounded-full bg-gradient-to-tr from-teal-200 to-green-100 opacity-30 blur-xl"></div>

{/* FAQ accordion */}
          <div className="relative rounded-2xl border border-green-100 bg-white/80 backdrop-blur-sm p-6 shadow-xl">
            <Accordion type="single" collapsible className="w-full">
              {faqs.map((faq, index) => (
                <AccordionItem
                  key={index}
                  value={`item-${index}`}
                  className="group border-b border-green-100 last:border-0"
                >
                  <AccordionTrigger className="text-left text-green-900 hover:text-green-700 hover:no-underline">
                    <span className="flex items-center">
                      <span className="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-green-100 to-emerald-50 text-xs font-medium text-green-800 shadow-sm group-data-[state=open]:bg-gradient-to-br group-data-[state=open]:from-green-500 group-data-[state=open]:to-emerald-400 group-data-[state=open]:text-white">
                        {index + 1}
                      </span>
                      {faq.question}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent className="text-gray-600 pl-10">{faq.answer}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  )
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;

--secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;

--muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 142.1 76.2% 36.3%;
    --radius: 0.75rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 142.1 70.6% 45.3%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom animations and effects */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
  }
}

@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-gradient {
  animation: gradient-shift 3s ease infinite;
  background-size: 200% 200%;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.6s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.8s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-slow {
  animation: bounce 2s infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

/* Smooth transitions for all interactive elements */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Enhanced hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Button 3D effect */
.button-3d {
  background: linear-gradient(145deg, #10b981, #059669);
  box-shadow: 0 4px 15px 0 rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.button-3d:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-3d:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px 0 rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Table styles */
.table-zebra tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.05);
  transition: background-color 0.2s ease;
}

.table-sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}

/* Background pattern */
.bg-pattern {
  background-image: radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(5, 150, 105, 0.1) 0%, transparent 50%);
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom badge variants */
.badge-success {
  @apply bg-green-100 text-green-800 hover:bg-green-200;
}

/* Enhanced UI Elements */
.header-gradient {
  @apply bg-gradient-to-r from-green-600 to-green-700;
}

.bg-dots {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2316a34a' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.6);
  outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ClientProviders } from "@/components/client-providers"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "BTS - Bawat Tahanan May Scholar",
  description: "Municipal scholarship program for deserving students",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className} suppressHydrationWarning>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/client-providers.tsx"
"use client"

import type React from "react"

import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { AuthProvider } from "@/contexts/auth-context"

export function ClientProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
      <AuthProvider>
        {children}
        <Toaster />
      </AuthProvider>
    </ThemeProvider>
  )
}
[V0_FILE]typescriptreact:file="components/simple-features.tsx" isQuickEdit="true"
export function SimpleFeatures() {
  return (
    <section className="relative w-full bg-gradient-to-br from-white via-green-50 to-emerald-50 py-16 md:py-24 overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-green-100/50 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-emerald-100/50 to-transparent"></div>

{/* Colorful floating shapes */}
        <div className="absolute top-20 left-10 w-20 h-20 bg-gradient-to-br from-green-300/30 to-emerald-400/20 rounded-full blur-xl animate-pulse"></div>
        <div className="absolute bottom-20 right-10 w-32 h-32 bg-gradient-to-tr from-teal-300/30 to-green-400/20 rounded-full blur-xl animate-pulse"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-gradient-to-r from-emerald-200/20 to-green-300/20 rounded-full blur-2xl"></div>
      </div>

<div className="container relative z-10 px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
          <div className="inline-block rounded-full bg-gradient-to-r from-green-100 to-emerald-100 px-4 py-1.5 text-sm font-medium text-green-800 shadow-md">
            Why Choose BTS?
          </div>
          <h2 className="text-3xl font-bold tracking-tighter bg-gradient-to-r from-green-700 via-green-600 to-emerald-600 bg-clip-text text-transparent sm:text-4xl md:text-5xl">
            Your Path to Success
          </h2>
          <p className="max-w-[900px] text-gray-600 md:text-xl/relaxed">
            Discover the benefits that make our scholarship program unique and effective.
          </p>
        </div>

<div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <div
              key={index}
              className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-white to-green-50/50 p-8 shadow-lg border border-green-100/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-green-200/40"
            >
              {/* Background gradient effect */}
              <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 via-emerald-400/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

{/* Icon with colorful background */}
              <div className="relative mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-green-500 to-emerald-500 p-4 text-white shadow-lg shadow-green-500/30 group-hover:shadow-green-500/50 transition-all duration-300">
                {feature.icon}
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </div>

<h3 className="relative mb-3 text-xl font-bold text-green-900 group-hover:text-green-800 transition-colors">
                {feature.title}
              </h3>
              <p className="relative text-gray-600 leading-relaxed">{feature.description}</p>

{/* Hover accent line */}
              <div className="absolute bottom-0 left-0 h-1 w-0 bg-gradient-to-r from-green-500 to-emerald-500 transition-all duration-300 group-hover:w-full"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

const features = [
  {
    title: "Easy Application",
    description: "Simple online application process with step-by-step guidance and real-time status updates.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <path d="m9 15 2 2 4-4"></path>
      </svg>
    ),
  },
  {
    title: "Financial Support",
    description:
      "Comprehensive financial assistance covering tuition, books, and living expenses for qualified students.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M16 8h-6.5a2.5 2.5 0 0 0 0 5h3a2.5 2.5 0 0 1 0 5H6"></path>
        <path d="M12 18v2"></path>
        <path d="M12 4v2"></path>
      </svg>
    ),
  },
  {
    title: "Digital Verification",
    description: "Secure QR code system for easy verification and tracking of your scholarship status and benefits.",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect width="5" height="5" x="3" y="3" rx="1"></rect>
        <rect width="5" height="5" x="16" y="3" rx="1"></rect>
        <rect width="5" height="5" x="3" y="16" rx="1"></rect>
        <path d="M21 16h-3a2 2 0 0 0-2 2v3"></path>
        <path d="M21 21v.01"></path>
        <path d="M12 7v3a2 2 0 0 1-2 2H7"></path>
        <path d="M3 12h.01"></path>
        <path d="M12 3h.01"></path>
        <path d="M12 16v.01"></path>
        <path d="M16 12h1"></path>
        <path d="M21 12v.01"></path>
      </svg>
    ),
  },
]
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { HeroSection } from "@/components/hero-section"
import { MainNav } from "@/components/main-nav"
import { FeaturesSection } from "@/components/features-section"
import { TestimonialsSection } from "@/components/testimonials-section"
import { FaqSection } from "@/components/faq-section"
import { CtaSection } from "@/components/cta-section"
import { EnhancedFooter } from "@/components/enhanced-footer"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-gradient-to-r from-green-600 via-emerald-600 to-green-700 backdrop-blur-md shadow-lg">
        <div className="container flex h-16 items-center">
          <MainNav />
          <div className="ml-auto flex items-center space-x-4">
            <Link href="/login">
              <Button
                variant="ghost"
                className="text-white hover:text-white hover:bg-green-800 transition-all duration-300 font-medium border border-transparent hover:border-green-500"
                style={{ backgroundColor: "rgba(22, 101, 52, 0.3)" }}
              >
                Log in
              </Button>
            </Link>
            <Link href="/register">
              <Button className="bg-white text-green-700 hover:bg-gray-50 hover:text-green-800 rounded-full px-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 font-semibold">
                Register
              </Button>
            </Link>
          </div>
        </div>
      </header>
      <main className="flex-1">
        <HeroSection />
        <FeaturesSection />
        <TestimonialsSection />
        <FaqSection />
        <CtaSection />
      </main>
      <EnhancedFooter />
    </div>
  )
}
[V0_FILE]png:file="public/images/education-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-geNQtpvrcyAXOYDvHrHWzqaYXJHFkB.png"
[V0_FILE]jpeg:file="public/images/bts-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/442480374_3252051198263997_5622688569621733813_n.jpg-lHAt4VAKekr72C6ZsQgUm1bowKpqn8.jpeg"
[V0_FILE]typescriptreact:file="components/main-nav.tsx"
"use client"
import { usePathname } from "next/navigation"

export function MainNav() {
  const pathname = usePathname()

return <div className="mr-4 flex">{/* Brand and navigation items removed */}</div>
}
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "html5-qrcode": "^2.3.8",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "next-auth": "4.24.11",
    "chart.js": "4.5.0",
    "react-chartjs-2": "5.3.0",
    "@vercel/blob": "2.0.1",
    "resend": "6.8.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import type { User } from "@/lib/storage"
import { getCurrentUser, login as loginStorage, logout as logoutStorage, initializeStorage } from "@/lib/storage"

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<User | null>
  logout: () => void
  isLoading: boolean
}

const AuthContext = createContext<AuthContextType | null>(null)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [mounted, setMounted] = useState(false)
  const router = useRouter()

// Set mounted state
  useEffect(() => {
    setMounted(true)
  }, [])

useEffect(() => {
    if (!mounted) return

const loadUser = () => {
      try {
        // Initialize in-memory storage with sample data
        initializeStorage()
        const currentUser = getCurrentUser()
        setUser(currentUser)
      } catch (error) {
        console.error("Error loading user:", error)
        setUser(null)
      } finally {
        setIsLoading(false)
      }
    }

loadUser()
  }, [mounted])

const login = async (email: string, password: string): Promise<User | null> => {
    try {
      logoutStorage()
      setUser(null)

const loggedInUser = loginStorage(email, password)
      if (loggedInUser) {
        setUser(loggedInUser)
        return loggedInUser
      }
      return null
    } catch (error) {
      console.error("Login error:", error)
      return null
    }
  }

const logout = () => {
    try {
      setUser(null)
      logoutStorage()
      router.push("/login")
    } catch (error) {
      console.error("Logout error:", error)
      if (typeof window !== "undefined") {
        window.location.href = "/login"
      }
    }
  }

if (!mounted || isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
      </div>
    )
  }

return <AuthContext.Provider value={{ user, login, logout, isLoading }}>{children}</AuthContext.Provider>
}

export function useAuth(): AuthContextType {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/student/history/page.tsx" isQuickEdit="true"
"use client"

import { useAuth } from "@/contexts/auth-context"
import { getApplicationHistoryByStudentId } from "@/lib/storage"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, DollarSign, GraduationCap, MapPin, History, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function ApplicationHistoryPage() {
  const { user } = useAuth()

if (!user) {
    return (
      <div className="flex h-screen w-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600 mx-auto"></div>
          <p className="mt-4 text-slate-600 font-medium">Loading application history...</p>
        </div>
      </div>
    )
  }

const applicationHistory = getApplicationHistoryByStudentId(user.id)

return (
    <div className="space-y-6 animate-fade-in">
      <div className="relative overflow-hidden rounded-xl bg-pattern p-6">
        <div className="absolute top-0 right-0 w-64 h-64 bg-green-400 rounded-full filter blur-3xl opacity-10 -mr-20 -mt-20"></div>
        <div className="relative flex items-center gap-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-green-600">
            <History className="h-6 w-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-gray-900">Application History</h1>
            <p className="text-gray-600 mt-1">View your completed scholarship applications and their outcomes.</p>
          </div>
        </div>
      </div>

<div className="flex items-center gap-4 mb-6">
        <Link href="/student/dashboard">
          <Button
            variant="outline"
            className="flex items-center gap-2 hover:bg-green-50 hover:text-green-700 hover:border-green-300 transition-colors bg-transparent"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Dashboard
          </Button>
        </Link>
      </div>

{applicationHistory.length === 0 ? (
        <div className="card-hover">
          <Card className="overflow-hidden border border-green-100 shadow-md">
            <div className="h-1.5 bg-gradient-to-r from-green-400 to-green-600"></div>
            <CardContent className="flex flex-col items-center justify-center py-12 bg-gradient-to-r from-green-50 to-white">
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-100 mb-4">
                <GraduationCap className="h-8 w-8 text-green-600" />
              </div>
              <h3 className="text-lg font-semibold mb-2 text-gray-900">No Application History</h3>
              <p className="text-gray-600 text-center max-w-md">
                You haven't completed any scholarship applications yet. Once you complete an application and receive
                financial aid, it will appear here.
              </p>
            </CardContent>
          </Card>
        </div>
      ) : (
        <div className="grid gap-6">
          {applicationHistory.map((historyItem, index) => (
            <div
              key={historyItem.id}
              className="card-hover animate-fade-in"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <Card className="overflow-hidden border border-green-100 shadow-md">
                <div className="h-1.5 bg-gradient-to-r from-green-400 to-green-600"></div>
                <CardHeader className="pb-3 bg-gradient-to-r from-green-50 to-white">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-4">
                      <div
                        className={`flex h-12 w-12 items-center justify-center rounded-full ${
                          historyItem.outcome === "approved" ? "bg-green-100" : "bg-red-100"
                        }`}
                      >
                        <GraduationCap
                          className={`h-6 w-6 ${
                            historyItem.outcome === "approved" ? "text-green-600" : "text-red-600"
                          }`}
                        />
                      </div>
                      <div>
                        <CardTitle className="text-xl text-gray-900">
                          {historyItem.applicationData.course} - {historyItem.applicationData.yearLevel}
                        </CardTitle>
                        <CardDescription className="flex items-center gap-2 mt-1 text-gray-600">
                          <MapPin className="h-4 w-4" />
                          {historyItem.applicationData.schoolName}
                        </CardDescription>
                      </div>
                    </div>
                    <Badge
                      variant={historyItem.outcome === "approved" ? "custom" : "destructive"}
                      className={
                        historyItem.outcome === "approved"
                          ? "bg-green-100 text-green-800 hover:bg-green-200 shadow-sm"
                          : "shadow-sm"
                      }
                    >
                      {historyItem.outcome === "approved" ? "Approved" : "Rejected"}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4 pt-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="flex items-center gap-3 p-3 rounded-lg bg-white shadow-sm border border-gray-100">
                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
                        <Calendar className="h-4 w-4 text-blue-600" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-900">Completed</p>
                        <p className="text-sm text-gray-600">
                          {new Date(historyItem.completedAt).toLocaleDateString()}
                        </p>
                      </div>
                    </div>

{historyItem.financialAidAmount && (
                      <div className="flex items-center gap-3 p-3 rounded-lg bg-white shadow-sm border border-gray-100">
                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
                          <DollarSign className="h-4 w-4 text-green-600" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900">Financial Aid</p>
                          <p className="text-sm font-semibold text-green-600">
                            ₱{historyItem.financialAidAmount.toLocaleString()}
                          </p>
                        </div>
                      </div>
                    )}

<div className="flex items-center gap-3 p-3 rounded-lg bg-white shadow-sm border border-gray-100">
                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-100">
                        <GraduationCap className="h-4 w-4 text-purple-600" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-900">Academic Year</p>
                        <p className="text-sm text-gray-600">
                          {historyItem.applicationData.academicYear || "2024-2025"}
                        </p>
                      </div>
                    </div>
                  </div>

{historyItem.notes && (
                    <div className="pt-4 border-t border-gray-200">
                      <div className="p-4 rounded-lg bg-slate-50 border border-slate-200">
                        <p className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2">
                          <div className="h-4 w-4 rounded-full bg-slate-200 flex items-center justify-center">
                            <div className="h-2 w-2 rounded-full bg-slate-500"></div>
                          </div>
                          Notes
                        </p>
                        <p className="text-sm text-gray-700 leading-relaxed">{historyItem.notes}</p>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/scholars/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AdminLayout } from "@/components/admin-layout"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Search, Eye, Users, Mail, GraduationCap, Calendar } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { getUsers, getApplications, hasPermission } from "@/lib/storage"
import { PermissionGuard } from "@/components/permission-guard"
import { useAuth } from "@/contexts/auth-context"

// Define a type for scholar data
type Scholar = {
  id: string
  name: string
  course: string
  yearLevel: string
  barangay: string
  school: string
  status: "active" | "inactive"
  semester: string
  academicYear: string
  email?: string
  phone?: string
  address?: string
  profileImage?: string
  gpa?: string
  birthDate?: string
}

export default function ScholarsPage() {
  const { toast } = useToast()
  const [searchTerm, setSearchTerm] = useState("")
  const [yearFilter, setYearFilter] = useState("all")
  const [barangayFilter, setBarangayFilter] = useState("all")
  const [scholars, setScholars] = useState<Scholar[]>([])
  const [barangays, setBarangays] = useState<string[]>([])
  const [loading, setLoading] = useState(true)
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false)
  const [selectedScholar, setSelectedScholar] = useState<Scholar | null>(null)

// Load real data from local storage
  useEffect(() => {
    setLoading(true)

// Get all users and applications from local storage
    const users = getUsers().filter((user) => user.role === "student")
    const applications = getApplications()

// Create a map of barangays for filtering
    const uniqueBarangays = new Set<string>()

// Transform users and applications into scholar objects
    const scholarsList: Scholar[] = users.map((user) => {
      // Find the application for this user if it exists
      const application = applications.find((app) => app.studentId === user.id || app.email === user.email)

// Get profile data
      const profileData = user.profileData || {}

// Add barangay to the set of unique barangays
      const barangay = application?.barangay || profileData?.barangay || "Unknown"
      uniqueBarangays.add(barangay)

return {
        id: user.id,
        name: user.name || profileData?.fullName || "Unknown",
        course: application?.course || profileData?.course || "Unknown",
        yearLevel: application?.yearLevel || profileData?.yearLevel || "Unknown",
        barangay: barangay,
        school: application?.school || profileData?.schoolName || "Unknown",
        status: "active", // Default to active for now
        semester: "1st Semester", // Default value
        academicYear: "2023-2024", // Default value
        email: user.email,
        phone: profileData?.phoneNumber || application?.phoneNumber,
        address: profileData?.address || application?.address,
        profileImage: profileData?.profileImage,
        gpa: profileData?.gpa || "N/A",
        birthDate: profileData?.birthDate,
      }
    })

setScholars(scholarsList)
    setBarangays(Array.from(uniqueBarangays))
    setLoading(false)
  }, [])

// Filter scholars based on search term and filters
  const filteredScholars = scholars.filter((scholar) => {
    const matchesSearch =
      scholar.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      scholar.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      scholar.course.toLowerCase().includes(searchTerm.toLowerCase())

const matchesYear = yearFilter === "all" || scholar.yearLevel.toLowerCase().includes(yearFilter.toLowerCase())

const matchesBarangay = barangayFilter === "all" || scholar.barangay === barangayFilter

return matchesSearch && matchesYear && matchesBarangay
  })

const handleViewProfile = (scholarId: string) => {
    const scholar = scholars.find((s) => s.id === scholarId)
    if (scholar) {
      setSelectedScholar(scholar)
      setIsProfileModalOpen(true)
    }
  }

return (
    <PermissionGuard permission="scholars">
      <AdminLayout>
        <div className="mb-8">
          <div className="flex items-center gap-4 mb-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600">
              <Users className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold tracking-tight text-slate-900">Scholars</h1>
              <p className="text-slate-600">Manage and monitor scholarship recipients</p>
            </div>
          </div>
        </div>

<Card className="border-0 shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold text-slate-900">All Scholars</CardTitle>
            <CardDescription className="text-slate-600">
              List of all students who have registered in the system
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div className="flex w-full max-w-sm items-center space-x-2">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                    <Input
                      placeholder="Search scholars..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-9 border-slate-200 focus:border-emerald-500 focus:ring-emerald-500"
                    />
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <Select value={yearFilter} onValueChange={setYearFilter}>
                    <SelectTrigger className="w-[150px] border-slate-200">
                      <SelectValue placeholder="Year Level" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Years</SelectItem>
                      <SelectItem value="1st">1st Year</SelectItem>
                      <SelectItem value="2nd">2nd Year</SelectItem>
                      <SelectItem value="3rd">3rd Year</SelectItem>
                      <SelectItem value="4th">4th Year</SelectItem>
                    </SelectContent>
                  </Select>
                  <Select value={barangayFilter} onValueChange={setBarangayFilter}>
                    <SelectTrigger className="w-[150px] border-slate-200">
                      <SelectValue placeholder="Barangay" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Barangays</SelectItem>
                      {barangays.map((barangay) => (
                        <SelectItem key={barangay} value={barangay}>
                          {barangay}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="rounded-lg border border-slate-200 bg-white">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Scholar ID</TableHead>
                      <TableHead>Name</TableHead>
                      <TableHead>Course</TableHead>
                      <TableHead>Year Level</TableHead>
                      <TableHead>School</TableHead>
                      <TableHead>Barangay</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {loading ? (
                      <TableRow>
                        <TableCell colSpan={8} className="h-24 text-center">
                          Loading scholars...
                        </TableCell>
                      </TableRow>
                    ) : filteredScholars.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={8} className="h-24 text-center">
                          No scholars found. Please register students to see them here.
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredScholars.map((scholar) => (
                        <TableRow key={scholar.id}>
                          <TableCell className="font-medium">{scholar.id}</TableCell>
                          <TableCell>{scholar.name}</TableCell>
                          <TableCell>{scholar.course}</TableCell>
                          <TableCell>{scholar.yearLevel}</TableCell>
                          <TableCell>{scholar.school}</TableCell>
                          <TableCell>{scholar.barangay}</TableCell>
                          <TableCell>
                            <Badge variant={scholar.status === "active" ? "success" : "outline"}>
                              {scholar.status === "active" ? "Active" : "Inactive"}
                            </Badge>
                          </TableCell>
                          <TableCell className="text-right">
                            <Button variant="ghost" size="icon" onClick={() => handleViewProfile(scholar.id)}>
                              <Eye className="h-4 w-4" />
                              <span className="sr-only">View Profile</span>
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          </CardContent>
        </Card>

<Dialog open={isProfileModalOpen} onOpenChange={setIsProfileModalOpen}>
          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle className="text-xl font-semibold">Scholar Profile</DialogTitle>
            </DialogHeader>

{selectedScholar && (
              <div className="space-y-6">
                {/* Profile Header */}
                <div className="flex items-center gap-4 p-4 bg-gradient-to-r from-emerald-50 to-green-50 rounded-lg">
                  <Avatar className="h-16 w-16">
                    <AvatarImage src={selectedScholar.profileImage || "/placeholder.svg"} alt={selectedScholar.name} />
                    <AvatarFallback className="bg-emerald-500 text-white text-lg">
                      {selectedScholar.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")
                        .toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="text-xl font-semibold text-slate-900">{selectedScholar.name}</h3>
                    <p className="text-slate-600">Scholar ID: {selectedScholar.id}</p>
                    <Badge variant={selectedScholar.status === "active" ? "success" : "outline"} className="mt-1">
                      {selectedScholar.status === "active" ? "Active" : "Inactive"}
                    </Badge>
                  </div>
                </div>

{/* Contact Information */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm font-medium flex items-center gap-2">
                        <Mail className="h-4 w-4 text-emerald-600" />
                        Contact Information
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <div>
                        <p className="text-xs text-slate-500">Email</p>
                        <p className="text-sm font-medium">{selectedScholar.email || "Not provided"}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Phone</p>
                        <p className="text-sm font-medium">{selectedScholar.phone || "Not provided"}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Address</p>
                        <p className="text-sm font-medium">{selectedScholar.address || "Not provided"}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Barangay</p>
                        <p className="text-sm font-medium">{selectedScholar.barangay}</p>
                      </div>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm font-medium flex items-center gap-2">
                        <GraduationCap className="h-4 w-4 text-emerald-600" />
                        Academic Information
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                      <div>
                        <p className="text-xs text-slate-500">School</p>
                        <p className="text-sm font-medium">{selectedScholar.school}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Course</p>
                        <p className="text-sm font-medium">{selectedScholar.course}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Year Level</p>
                        <p className="text-sm font-medium">{selectedScholar.yearLevel}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">GPA</p>
                        <p className="text-sm font-medium">{selectedScholar.gpa}</p>
                      </div>
                    </CardContent>
                  </Card>
                </div>

{/* Scholarship Details */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm font-medium flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-emerald-600" />
                      Scholarship Details
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <p className="text-xs text-slate-500">Academic Year</p>
                      <p className="text-sm font-medium">{selectedScholar.academicYear}</p>
                    </div>
                    <div>
                      <p className="text-xs text-slate-500">Semester</p>
                      <p className="text-sm font-medium">{selectedScholar.semester}</p>
                    </div>
                    {selectedScholar.birthDate && (
                      <div>
                        <p className="text-xs text-slate-500">Birth Date</p>
                        <p className="text-sm font-medium">{selectedScholar.birthDate}</p>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            )}
          </DialogContent>
        </Dialog>
      </AdminLayout>
    </PermissionGuard>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Shield, Users, FileText, Lock, Scale, AlertTriangle } from "lucide-react"

export default function TermsAndConditions() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-md shadow-sm">
        <div className="container flex h-16 items-center">
          <Link href="/">
            <Button variant="ghost" className="flex items-center space-x-2 text-green-700 hover:text-green-800">
              <ArrowLeft className="h-4 w-4" />
              <span>Back to Home</span>
            </Button>
          </Link>
        </div>
      </header>

<main className="container mx-auto px-4 py-12 max-w-4xl">
        {/* Hero Section */}
        <div className="text-center mb-12">
          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg">
              <Scale className="h-8 w-8 text-white" />
            </div>
          </div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4 text-balance">Terms and Conditions</h1>
          <p className="text-xl text-gray-600 text-balance max-w-2xl mx-auto">
            Please read these terms carefully before using the BTS Scholarship Platform
          </p>
          <div className="mt-6 text-sm text-gray-500">
            Last updated: {new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
          </div>
        </div>

{/* Terms Content */}
        <div className="space-y-8">
          {/* Section 1: Acceptance of Terms */}
          <Card className="border-l-4 border-l-green-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Shield className="h-5 w-5 text-green-600" />
                <span>1. Acceptance of Terms</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                By accessing and using the Bawat Tahanan May Scholar (BTS) scholarship platform ("Platform"), you accept
                and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the
                above, please do not use this service.
              </p>
              <p>
                These Terms and Conditions constitute a legally binding agreement between you ("User" or "you") and BTS
                ("we," "us," or "our") regarding your use of our scholarship application and management platform.
              </p>
            </CardContent>
          </Card>

{/* Section 2: Eligibility */}
          <Card className="border-l-4 border-l-blue-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5 text-blue-600" />
                <span>2. User Eligibility</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>To be eligible to use this Platform, you must:</p>
              <ul>
                <li>Be at least 16 years of age or have parental/guardian consent</li>
                <li>Be a resident of the Philippines</li>
                <li>Provide accurate and truthful information during registration</li>
                <li>Meet the specific eligibility criteria for scholarship programs offered</li>
                <li>Have the legal capacity to enter into binding agreements</li>
              </ul>
              <p>
                We reserve the right to verify your eligibility at any time and may suspend or terminate accounts that
                do not meet these requirements.
              </p>
            </CardContent>
          </Card>

{/* Section 3: Account Registration */}
          <Card className="border-l-4 border-l-purple-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-purple-600" />
                <span>3. Account Registration and Responsibilities</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>When creating an account, you agree to:</p>
              <ul>
                <li>Provide accurate, current, and complete information</li>
                <li>Maintain and promptly update your account information</li>
                <li>Keep your login credentials secure and confidential</li>
                <li>Accept responsibility for all activities under your account</li>
                <li>Notify us immediately of any unauthorized use of your account</li>
              </ul>
              <p>
                You are solely responsible for maintaining the confidentiality of your account and password. We are not
                liable for any loss or damage arising from your failure to comply with this security obligation.
              </p>
            </CardContent>
          </Card>

{/* Section 4: Platform Use and Prohibited Activities */}
          <Card className="border-l-4 border-l-red-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <AlertTriangle className="h-5 w-5 text-red-600" />
                <span>4. Platform Use and Prohibited Activities</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>You may use our Platform only for lawful purposes. You agree NOT to:</p>
              <ul>
                <li>Submit false, misleading, or fraudulent information</li>
                <li>Upload malicious software, viruses, or harmful code</li>
                <li>Attempt to gain unauthorized access to our systems</li>
                <li>Interfere with or disrupt the Platform's functionality</li>
                <li>Use automated tools to access or interact with the Platform</li>
                <li>Violate any applicable laws or regulations</li>
                <li>Harass, abuse, or harm other users</li>
                <li>Share your account credentials with others</li>
              </ul>
              <p>
                Violation of these terms may result in immediate suspension or termination of your account and potential
                legal action.
              </p>
            </CardContent>
          </Card>

{/* Section 5: Content Submission and Ownership */}
          <Card className="border-l-4 border-l-indigo-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-indigo-600" />
                <span>5. Content Submission and Ownership</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>Regarding content you submit to our Platform:</p>
              <ul>
                <li>You retain ownership of your personal documents and information</li>
                <li>
                  You grant us a limited license to use, store, and process your content for scholarship evaluation
                  purposes
                </li>
                <li>
                  You warrant that you have the right to submit all content and that it does not infringe on third-party
                  rights
                </li>
                <li>You are responsible for the accuracy and authenticity of all submitted documents</li>
                <li>We may retain your information for record-keeping and compliance purposes</li>
              </ul>
              <p>
                All submitted documents must be authentic and unaltered. Submission of fraudulent documents will result
                in immediate disqualification and account termination.
              </p>
            </CardContent>
          </Card>

{/* Section 6: Data Privacy and Security */}
          <Card className="border-l-4 border-l-green-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Lock className="h-5 w-5 text-green-600" />
                <span>6. Data Privacy and Security</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We are committed to protecting your privacy and personal information:</p>
              <ul>
                <li>We collect only information necessary for scholarship evaluation and administration</li>
                <li>Your personal data is encrypted and stored securely</li>
                <li>We do not sell or share your personal information with third parties without consent</li>
                <li>You have the right to access, correct, or delete your personal information</li>
                <li>We comply with applicable data protection laws and regulations</li>
                <li>We implement industry-standard security measures to protect your data</li>
              </ul>
              <p>For detailed information about our data practices, please refer to our Privacy Policy.</p>
            </CardContent>
          </Card>

{/* Section 7: Intellectual Property */}
          <Card className="border-l-4 border-l-orange-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Shield className="h-5 w-5 text-orange-600" />
                <span>7. Intellectual Property Rights</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                The Platform and its original content, features, and functionality are owned by BTS and are protected by
                international copyright, trademark, patent, trade secret, and other intellectual property laws.
              </p>
              <ul>
                <li>You may not reproduce, distribute, or create derivative works without permission</li>
                <li>All trademarks and logos are property of their respective owners</li>
                <li>You may not use our intellectual property for commercial purposes</li>
                <li>Any feedback or suggestions you provide may be used by us without compensation</li>
              </ul>
            </CardContent>
          </Card>

{/* Section 8: Limitation of Liability */}
          <Card className="border-l-4 border-l-yellow-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <AlertTriangle className="h-5 w-5 text-yellow-600" />
                <span>8. Limitation of Liability</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                To the fullest extent permitted by law, BTS shall not be liable for any indirect, incidental, special,
                consequential, or punitive damages, including but not limited to:
              </p>
              <ul>
                <li>Loss of profits, data, or other intangible losses</li>
                <li>Damages resulting from your use or inability to use the Platform</li>
                <li>Unauthorized access to or alteration of your transmissions or data</li>
                <li>Technical failures or interruptions of service</li>
              </ul>
              <p>
                Our total liability shall not exceed the amount of fees paid by you, if any, for using our Platform.
              </p>
            </CardContent>
          </Card>

{/* Section 9: Account Termination */}
          <Card className="border-l-4 border-l-red-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5 text-red-600" />
                <span>9. Account Termination</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We may terminate or suspend your account immediately, without prior notice, for:</p>
              <ul>
                <li>Violation of these Terms and Conditions</li>
                <li>Fraudulent or misleading information submission</li>
                <li>Abusive behavior towards other users or staff</li>
                <li>Technical abuse or security violations</li>
                <li>Inactivity for extended periods</li>
              </ul>
              <p>
                You may also terminate your account at any time by contacting our support team. Upon termination, your
                right to use the Platform will cease immediately.
              </p>
            </CardContent>
          </Card>

{/* Section 10: Governing Law */}
          <Card className="border-l-4 border-l-blue-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Scale className="h-5 w-5 text-blue-600" />
                <span>10. Governing Law and Dispute Resolution</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                These Terms and Conditions are governed by and construed in accordance with the laws of the Republic of
                the Philippines.
              </p>
              <p>Any disputes arising from these terms or your use of the Platform shall be resolved through:</p>
              <ul>
                <li>Good faith negotiations between the parties</li>
                <li>Mediation, if direct negotiation fails</li>
                <li>Binding arbitration under Philippine law, if mediation is unsuccessful</li>
                <li>Philippine courts shall have exclusive jurisdiction for any legal proceedings</li>
              </ul>
            </CardContent>
          </Card>

{/* Section 11: Changes to Terms */}
          <Card className="border-l-4 border-l-purple-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-purple-600" />
                <span>11. Changes to Terms</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                We reserve the right to modify or replace these Terms and Conditions at any time. We will provide notice
                of significant changes by:
              </p>
              <ul>
                <li>Posting the updated terms on our Platform</li>
                <li>Sending email notifications to registered users</li>
                <li>Displaying prominent notices on the Platform</li>
              </ul>
              <p>
                Your continued use of the Platform after any changes constitutes acceptance of the new Terms and
                Conditions.
              </p>
            </CardContent>
          </Card>

{/* Section 12: Contact Information */}
          <Card className="border-l-4 border-l-green-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-green-600" />
                <span>12. Contact Information</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>If you have any questions about these Terms and Conditions, please contact us:</p>
              <div className="bg-gray-50 p-4 rounded-lg mt-4">
                <p>
                  <strong>Bawat Tahanan May Scholar (BTS)</strong>
                </p>
                <p>Email: legal@bts-scholarship.ph</p>
                <p>Phone: +63 123 456 7890</p>
                <p>Address: 123 Education Street, Manila, Philippines</p>
                <p>Business Hours: Monday - Friday, 8:00 AM - 5:00 PM (PHT)</p>
              </div>
              <p className="mt-4">We will respond to your inquiries within 48 hours during business days.</p>
            </CardContent>
          </Card>
        </div>

{/* Acknowledgment Section */}
        <Card className="mt-12 bg-gradient-to-r from-green-50 to-emerald-50 border-green-200">
          <CardContent className="p-8 text-center">
            <h3 className="text-xl font-semibold text-gray-900 mb-4">Acknowledgment</h3>
            <p className="text-gray-700 mb-6 max-w-2xl mx-auto">
              By using the BTS Scholarship Platform, you acknowledge that you have read, understood, and agree to be
              bound by these Terms and Conditions.
            </p>
            <Link href="/">
              <Button className="bg-green-600 hover:bg-green-700 text-white px-8 py-2">Return to Platform</Button>
            </Link>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Shield, Eye, Lock, Database, Users, FileText } from "lucide-react"

export default function PrivacyPolicy() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-md shadow-sm">
        <div className="container flex h-16 items-center">
          <Link href="/">
            <Button variant="ghost" className="flex items-center space-x-2 text-blue-700 hover:text-blue-800">
              <ArrowLeft className="h-4 w-4" />
              <span>Back to Home</span>
            </Button>
          </Link>
        </div>
      </header>

<main className="container mx-auto px-4 py-12 max-w-4xl">
        {/* Hero Section */}
        <div className="text-center mb-12">
          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg">
              <Shield className="h-8 w-8 text-white" />
            </div>
          </div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4 text-balance">Privacy Policy</h1>
          <p className="text-xl text-gray-600 text-balance max-w-2xl mx-auto">
            Your privacy is important to us. Learn how we collect, use, and protect your personal information.
          </p>
          <div className="mt-6 text-sm text-gray-500">
            Last updated: {new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
          </div>
        </div>

{/* Privacy Policy Content */}
        <div className="space-y-8">
          {/* Section 1: Information We Collect */}
          <Card className="border-l-4 border-l-blue-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Database className="h-5 w-5 text-blue-600" />
                <span>1. Information We Collect</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We collect information you provide directly to us, including:</p>
              <ul>
                <li>
                  <strong>Personal Information:</strong> Name, email address, phone number, address, age
                </li>
                <li>
                  <strong>Educational Information:</strong> School name, course, year level, academic records
                </li>
                <li>
                  <strong>Application Documents:</strong> Transcripts, certificates, identification documents
                </li>
                <li>
                  <strong>Account Information:</strong> Username, password (encrypted), profile preferences
                </li>
                <li>
                  <strong>Communication Data:</strong> Messages, support requests, feedback
                </li>
              </ul>
              <p>We also automatically collect certain information when you use our platform:</p>
              <ul>
                <li>Device information (browser type, operating system)</li>
                <li>Usage data (pages visited, time spent, features used)</li>
                <li>Log data (IP address, access times, error logs)</li>
              </ul>
            </CardContent>
          </Card>

{/* Section 2: How We Use Your Information */}
          <Card className="border-l-4 border-l-green-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Eye className="h-5 w-5 text-green-600" />
                <span>2. How We Use Your Information</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We use the information we collect to:</p>
              <ul>
                <li>Process and evaluate scholarship applications</li>
                <li>Verify your identity and eligibility</li>
                <li>Communicate with you about your application status</li>
                <li>Provide customer support and respond to inquiries</li>
                <li>Improve our platform and services</li>
                <li>Comply with legal obligations and requirements</li>
                <li>Prevent fraud and ensure platform security</li>
                <li>Send important updates and notifications</li>
              </ul>
              <p>We do not use your personal information for marketing purposes without your explicit consent.</p>
            </CardContent>
          </Card>

{/* Section 3: Information Sharing */}
          <Card className="border-l-4 border-l-purple-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5 text-purple-600" />
                <span>3. Information Sharing and Disclosure</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We may share your information in the following circumstances:</p>
              <ul>
                <li>
                  <strong>Scholarship Evaluation:</strong> With authorized evaluators and committee members
                </li>
                <li>
                  <strong>Educational Institutions:</strong> With schools for verification purposes
                </li>
                <li>
                  <strong>Legal Requirements:</strong> When required by law or legal process
                </li>
                <li>
                  <strong>Service Providers:</strong> With trusted third parties who assist in platform operations
                </li>
                <li>
                  <strong>Safety and Security:</strong> To protect rights, property, or safety of users
                </li>
              </ul>
              <p>We never sell, rent, or trade your personal information to third parties for commercial purposes.</p>
            </CardContent>
          </Card>

{/* Section 4: Data Security */}
          <Card className="border-l-4 border-l-red-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Lock className="h-5 w-5 text-red-600" />
                <span>4. Data Security</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We implement comprehensive security measures to protect your information:</p>
              <ul>
                <li>Encryption of sensitive data in transit and at rest</li>
                <li>Secure servers with regular security updates</li>
                <li>Access controls and authentication requirements</li>
                <li>Regular security audits and monitoring</li>
                <li>Employee training on data protection practices</li>
                <li>Incident response procedures for security breaches</li>
              </ul>
              <p>
                While we strive to protect your information, no method of transmission over the internet is 100% secure.
              </p>
            </CardContent>
          </Card>

{/* Section 5: Your Rights */}
          <Card className="border-l-4 border-l-indigo-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-indigo-600" />
                <span>5. Your Privacy Rights</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>You have the following rights regarding your personal information:</p>
              <ul>
                <li>
                  <strong>Access:</strong> Request a copy of your personal information
                </li>
                <li>
                  <strong>Correction:</strong> Update or correct inaccurate information
                </li>
                <li>
                  <strong>Deletion:</strong> Request deletion of your personal information
                </li>
                <li>
                  <strong>Portability:</strong> Receive your data in a structured format
                </li>
                <li>
                  <strong>Restriction:</strong> Limit how we process your information
                </li>
                <li>
                  <strong>Objection:</strong> Object to certain types of processing
                </li>
              </ul>
              <p>To exercise these rights, please contact us using the information provided below.</p>
            </CardContent>
          </Card>

{/* Section 6: Data Retention */}
          <Card className="border-l-4 border-l-orange-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Database className="h-5 w-5 text-orange-600" />
                <span>6. Data Retention</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We retain your personal information for different periods depending on the purpose:</p>
              <ul>
                <li>
                  <strong>Active Applications:</strong> Throughout the application and evaluation process
                </li>
                <li>
                  <strong>Successful Applicants:</strong> For the duration of the scholarship program
                </li>
                <li>
                  <strong>Unsuccessful Applications:</strong> Up to 2 years for record-keeping
                </li>
                <li>
                  <strong>Account Information:</strong> Until account deletion is requested
                </li>
                <li>
                  <strong>Legal Requirements:</strong> As required by applicable laws
                </li>
              </ul>
              <p>After the retention period, we securely delete or anonymize your information.</p>
            </CardContent>
          </Card>

{/* Section 7: Cookies and Tracking */}
          <Card className="border-l-4 border-l-yellow-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Eye className="h-5 w-5 text-yellow-600" />
                <span>7. Cookies and Tracking Technologies</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We use cookies and similar technologies to:</p>
              <ul>
                <li>Remember your login status and preferences</li>
                <li>Analyze platform usage and performance</li>
                <li>Provide personalized user experience</li>
                <li>Ensure platform security and prevent fraud</li>
              </ul>
              <p>
                You can control cookie settings through your browser preferences. Disabling cookies may affect platform
                functionality.
              </p>
            </CardContent>
          </Card>

{/* Section 8: Third-Party Services */}
          <Card className="border-l-4 border-l-teal-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5 text-teal-600" />
                <span>8. Third-Party Services</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>Our platform may integrate with third-party services for:</p>
              <ul>
                <li>Email delivery and communication</li>
                <li>Document storage and processing</li>
                <li>Analytics and performance monitoring</li>
                <li>Payment processing (if applicable)</li>
              </ul>
              <p>These services have their own privacy policies, and we encourage you to review them.</p>
            </CardContent>
          </Card>

{/* Section 9: International Transfers */}
          <Card className="border-l-4 border-l-pink-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Shield className="h-5 w-5 text-pink-600" />
                <span>9. International Data Transfers</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>
                Your information may be transferred to and processed in countries other than the Philippines. When we do
                this:
              </p>
              <ul>
                <li>We ensure adequate protection through appropriate safeguards</li>
                <li>We comply with applicable data protection laws</li>
                <li>We use standard contractual clauses or other approved mechanisms</li>
                <li>We maintain the same level of protection as required in the Philippines</li>
              </ul>
            </CardContent>
          </Card>

{/* Section 10: Changes to Privacy Policy */}
          <Card className="border-l-4 border-l-gray-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-gray-600" />
                <span>10. Changes to This Privacy Policy</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>We may update this Privacy Policy from time to time. When we do:</p>
              <ul>
                <li>We will post the updated policy on our platform</li>
                <li>We will notify you of significant changes via email</li>
                <li>We will update the "Last updated" date at the top</li>
                <li>Your continued use constitutes acceptance of the changes</li>
              </ul>
              <p>We encourage you to review this policy periodically for any updates.</p>
            </CardContent>
          </Card>

{/* Section 11: Contact Information */}
          <Card className="border-l-4 border-l-blue-500">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-blue-600" />
                <span>11. Contact Us</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="prose prose-gray max-w-none">
              <p>If you have questions about this Privacy Policy or our data practices, please contact us:</p>
              <div className="bg-gray-50 p-4 rounded-lg mt-4">
                <p>
                  <strong>Privacy Officer</strong>
                </p>
                <p>Bawat Tahanan May Scholar (BTS)</p>
                <p>Email: privacy@bts-scholarship.ph</p>
                <p>Phone: +63 123 456 7890</p>
                <p>Address: 123 Education Street, Manila, Philippines</p>
                <p>Business Hours: Monday - Friday, 8:00 AM - 5:00 PM (PHT)</p>
              </div>
              <p className="mt-4">We will respond to privacy-related inquiries within 30 days.</p>
            </CardContent>
          </Card>
        </div>

{/* Acknowledgment Section */}
        <Card className="mt-12 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
          <CardContent className="p-8 text-center">
            <h3 className="text-xl font-semibold text-gray-900 mb-4">Your Privacy Matters</h3>
            <p className="text-gray-700 mb-6 max-w-2xl mx-auto">
              We are committed to protecting your privacy and handling your personal information responsibly. If you
              have any concerns, please don't hesitate to contact us.
            </p>
            <Link href="/">
              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2">Return to Platform</Button>
            </Link>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/apply-now/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/apply-now/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Search, MoreHorizontal, Eye, CheckCircle, XCircle, Clock, FileText } from "lucide-react"
import {
  getNewScholarApplications,
  updateNewScholarApplication,
  addPreApprovedEmail,
  type NewScholarApplication,
} from "@/lib/storage"
import { useToast } from "@/components/ui/use-toast"

export default function ApplyNowPage() {
  const [applications, setApplications] = useState<NewScholarApplication[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const { toast } = useToast()

useEffect(() => {
    const loadApplications = () => {
      const newApplications = getNewScholarApplications()
      setApplications(newApplications)
    }

loadApplications()
  }, [])

const handleApproveApplication = async (application: NewScholarApplication) => {
    try {
      // Add email to pre-approved emails list
      await addPreApprovedEmail(
        application.email,
        `${application.firstName} ${application.lastName}`,
        `Approved from Apply Now application ${application.id}`,
        "admin",
      )

// Update application status
      const updatedApp = updateNewScholarApplication(application.id, { status: "approved" })
      if (updatedApp) {
        setApplications((prev) => prev.map((app) => (app.id === application.id ? updatedApp : app)))

toast({
          title: "Application Approved",
          description: `${application.firstName} ${application.lastName}'s email has been added to approved emails list.`,
        })
      }
    } catch (error) {
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "Failed to approve application",
        variant: "destructive",
      })
    }
  }

const handleRejectApplication = (applicationId: string) => {
    const updatedApp = updateNewScholarApplication(applicationId, { status: "rejected" })
    if (updatedApp) {
      setApplications((prev) => prev.map((app) => (app.id === applicationId ? updatedApp : app)))

toast({
        title: "Application Rejected",
        description: "The application has been rejected.",
      })
    }
  }

const filteredApplications = applications.filter((app) => {
    const fullName = `${app.firstName} ${app.lastName}`.toLowerCase()
    const matchesSearch =
      fullName.includes(searchTerm.toLowerCase()) ||
      app.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      app.id.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || app.status === statusFilter
    return matchesSearch && matchesStatus
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return (
          <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Pending
          </Badge>
        )
      case "approved":
        return (
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Approved
          </Badge>
        )
      case "rejected":
        return (
          <Badge variant="secondary" className="bg-red-100 text-red-800">
            <XCircle className="w-3 h-3 mr-1" />
            Rejected
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const statusCounts = {
    all: applications.length,
    pending: applications.filter((app) => app.status === "pending").length,
    approved: applications.filter((app) => app.status === "approved").length,
    rejected: applications.filter((app) => app.status === "rejected").length,
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold text-slate-900">Apply Now (New Scholar Applications)</h1>
          <p className="text-slate-600 mt-2">
            Manage new scholarship applications submitted through the Apply Now page
          </p>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-600">Total Applications</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">{statusCounts.all}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-600">Pending</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-yellow-600">{statusCounts.pending}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-600">Approved</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">{statusCounts.approved}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-600">Rejected</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-red-600">{statusCounts.rejected}</div>
            </CardContent>
          </Card>
        </div>

{/* Filters and Search */}
        <Card>
          <CardHeader>
            <CardTitle>Applications</CardTitle>
            <CardDescription>Review and manage new scholarship applications from first-time applicants</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col sm:flex-row gap-4 mb-6">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <Input
                  placeholder="Search by name, email, or application ID..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <div className="flex gap-2">
                {["all", "pending", "approved", "rejected"].map((status) => (
                  <Button
                    key={status}
                    variant={statusFilter === status ? "default" : "outline"}
                    size="sm"
                    onClick={() => setStatusFilter(status)}
                    className={statusFilter === status ? "bg-emerald-600 hover:bg-emerald-700" : ""}
                  >
                    {status === "all" ? "All" : status.charAt(0).toUpperCase() + status.slice(1)}
                    <Badge variant="secondary" className="ml-2 bg-slate-100 text-slate-600">
                      {statusCounts[status as keyof typeof statusCounts]}
                    </Badge>
                  </Button>
                ))}
              </div>
            </div>

{/* Applications Table */}
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Application ID</TableHead>
                    <TableHead>Applicant</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Documents</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Submitted</TableHead>
                    <TableHead className="w-[50px]">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredApplications.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-8 text-slate-500">
                        {applications.length === 0
                          ? "No applications submitted yet. Applications will appear here when users submit the Apply Now form."
                          : "No applications found matching your criteria"}
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredApplications.map((application) => (
                      <TableRow key={application.id}>
                        <TableCell className="font-medium">{application.id}</TableCell>
                        <TableCell>
                          <div>
                            <div className="font-medium">
                              {application.firstName} {application.middleName && `${application.middleName} `}
                              {application.lastName}
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">{application.email}</div>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-col gap-1">
                            {application.barangayClearance && (
                              <div className="flex items-center gap-1 text-xs">
                                <FileText className="w-3 h-3" />
                                <span>Barangay: {application.barangayClearance}</span>
                              </div>
                            )}
                            {application.indigencyCertificate && (
                              <div className="flex items-center gap-1 text-xs">
                                <FileText className="w-3 h-3" />
                                <span>Indigency: {application.indigencyCertificate}</span>
                              </div>
                            )}
                            {application.voterCertification && (
                              <div className="flex items-center gap-1 text-xs">
                                <FileText className="w-3 h-3" />
                                <span>Voter: {application.voterCertification}</span>
                              </div>
                            )}
                            {!application.barangayClearance &&
                              !application.indigencyCertificate &&
                              !application.voterCertification && (
                                <div className="text-xs text-slate-500">No documents uploaded</div>
                              )}
                          </div>
                        </TableCell>
                        <TableCell>{getStatusBadge(application.status)}</TableCell>
                        <TableCell className="text-sm">{formatDate(application.submittedAt)}</TableCell>
                        <TableCell>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem>
                                <Eye className="mr-2 h-4 w-4" />
                                View Details
                              </DropdownMenuItem>
                              {application.status !== "approved" && (
                                <DropdownMenuItem onClick={() => handleApproveApplication(application)}>
                                  <CheckCircle className="mr-2 h-4 w-4" />
                                  Approve & Add to Emails
                                </DropdownMenuItem>
                              )}
                              {application.status !== "rejected" && (
                                <DropdownMenuItem onClick={() => handleRejectApplication(application.id)}>
                                  <XCircle className="mr-2 h-4 w-4" />
                                  Reject
                                </DropdownMenuItem>
                              )}
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isQuickEdit="true"
"use client"

import { useToast } from "@/components/ui/use-toast"
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/components/ui/use-toast"
import { createUser, createApplication, initializeStorage, isEmailPreApproved } from "@/lib/storage"
import { ArrowLeft, ArrowRight, CheckCircle, User, School, Lock, Mail } from "lucide-react"

// Initialize storage when the page loads
if (typeof window !== "undefined") {
  initializeStorage()
}

type FormData = {
  email: string
  fullName: string
  address: string
  contactNumber: string
  age: string
  gender: string
  barangay: string
  school: string
  course: string
  yearLevel: string
  password: string
  confirmPassword: string
  isPWD: boolean
}

export default function RegisterPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [step, setStep] = useState(0)
  const [emailValidated, setEmailValidated] = useState(false)
  const [errors, setErrors] = useState<Partial<FormData>>({})
  const totalSteps = 4

const [formData, setFormData] = useState<FormData>({
    email: "",
    fullName: "",
    address: "",
    contactNumber: "",
    age: "",
    gender: "",
    barangay: "",
    school: "",
    course: "",
    yearLevel: "",
    password: "",
    confirmPassword: "",
    isPWD: false,
  })

const updateField = (field: keyof FormData, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

const validateEmail = async () => {
    if (!formData.email) {
      setErrors({ email: "Please enter your email address" })
      toast({
        variant: "destructive",
        title: "Email required",
        description: "Please enter your email address",
      })
      return false
    }

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(formData.email)) {
      setErrors({ email: "Please enter a valid email address" })
      toast({
        variant: "destructive",
        title: "Invalid email",
        description: "Please enter a valid email address",
      })
      return false
    }

const isApproved = isEmailPreApproved(formData.email)
    if (!isApproved) {
      setErrors({ email: "This email is not authorized to register" })
      toast({
        variant: "destructive",
        title: "Email not authorized",
        description: "This email is not authorized to register. Please contact the administrator.",
      })
      return false
    }

setEmailValidated(true)
    setErrors({ email: "" })
    return true
  }

const validateCurrentStep = async () => {
    if (step === 0) {
      return await validateEmail()
    }

const newErrors: Partial<FormData> = {}
    let isValid = true

if (step === 1) {
      const requiredFields: (keyof FormData)[] = ["fullName", "address", "contactNumber", "age", "gender", "barangay"]

requiredFields.forEach((field) => {
        if (!formData[field] || formData[field].trim() === "") {
          newErrors[field] = "This field is required"
          isValid = false
        }
      })

if (formData.contactNumber && formData.contactNumber.length < 10) {
        newErrors.contactNumber = "Contact number must be at least 10 digits"
        isValid = false
      }
    }

if (step === 2) {
      const requiredFields: (keyof FormData)[] = ["school", "course", "yearLevel"]

requiredFields.forEach((field) => {
        if (!formData[field] || formData[field].trim() === "") {
          newErrors[field] = "This field is required"
          isValid = false
        }
      })
    }

if (step === 3) {
      if (!formData.password || formData.password.length < 8) {
        newErrors.password = "Password must be at least 8 characters"
        isValid = false
      }
      if (formData.password !== formData.confirmPassword) {
        newErrors.confirmPassword = "Passwords do not match"
        isValid = false
      }
      if (!formData.isPWD) {
        toast({
          variant: "destructive",
          title: "Terms and Conditions required",
          description: "You must agree to the Terms of Service and Privacy Policy to create an account.",
        })
        isValid = false
      }
    }

setErrors(newErrors)
    return isValid
  }

const handleNext = async () => {
    const isValid = await validateCurrentStep()
    if (isValid && step < totalSteps - 1) {
      setStep(step + 1)
    }
  }

const handlePrevious = () => {
    if (step > 0) {
      setStep(step - 1)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (step < 3) {
      handleNext()
      return
    }

const isValid = await validateCurrentStep()
    if (!isValid) return

setIsLoading(true)
    try {
      const userData = {
        name: formData.fullName,
        email: formData.email,
        password: formData.password,
        role: "student" as const,
      }

const profileData = {
        fullName: formData.fullName,
        email: formData.email,
        contactNumber: formData.contactNumber,
        address: formData.address,
        age: formData.age,
        gender: formData.gender,
        barangay: formData.barangay,
        bio: "",
        school: formData.school,
        course: formData.course,
        yearLevel: formData.yearLevel,
        isPWD: formData.isPWD,
      }

const newUser = createUser(userData, profileData)

const applicationData = {
        studentId: newUser.id,
        fullName: formData.fullName,
        email: formData.email,
        course: formData.course,
        yearLevel: formData.yearLevel,
        school: formData.school,
        barangay: formData.barangay,
        gender: formData.gender,
        age: formData.age,
        status: "pending" as const,
      }

createApplication(applicationData)

toast({
        title: "Registration successful",
        description: "Your account has been created. Please login to access your account.",
      })

setTimeout(() => {
        router.push("/login")
      }, 2000)
    } catch (error: any) {
      toast({
        variant: "destructive",
        title: "Registration failed",
        description: error.message || "An error occurred during registration. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

const progressPercentage = (step / totalSteps) * 100

return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50">
      {/* Header */}
      <header className="w-full bg-green-600 shadow-xl">
        <div className="container flex h-16 items-center">
          <Link href="/" className="flex items-center space-x-2 text-white hover:text-green-100 transition-colors">
            <ArrowLeft className="h-4 w-4" />
            <span className="font-medium">Back to Home</span>
          </Link>
        </div>
      </header>

{/* Main Content */}
      <div className="flex-1 flex items-center justify-center p-6">
        <div className="w-full max-w-4xl">
          <div className="bg-white rounded-3xl shadow-2xl border border-white/20 overflow-hidden">
            {/* Progress Bar */}
            <div className="h-3 bg-slate-200">
              <div
                className="h-full bg-green-500 transition-all duration-700"
                style={{ width: `${progressPercentage}%` }}
              />
            </div>

<div className="px-8 py-8 text-center bg-green-600 text-white">
              <div className="flex items-center justify-center gap-6">
                <div className="flex items-center gap-3">
                  <img
                    src="/images/image.png"
                    alt="City of Carmona Logo"
                    className="h-12 w-12 rounded-full object-contain"
                  />
                </div>
                <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full">
                  {step === 0 && <Mail className="w-8 h-8 text-white" />}
                  {step === 1 && <User className="w-8 h-8 text-white" />}
                  {step === 2 && <School className="w-8 h-8 text-white" />}
                  {step === 3 && <Lock className="w-8 h-8 text-white" />}
                </div>
                <div className="text-left">
                  <h1 className="text-3xl font-bold mb-2 text-white">Join Our Program</h1>
                  <p className="text-white/90">Create your scholarship account</p>
                </div>
                <div className="flex items-center space-x-2">
                  <span className="text-lg font-semibold text-white">Step {step + 1}</span>
                  <span className="text-white/80">/</span>
                  <span className="text-white/80">{totalSteps}</span>
                </div>
              </div>
            </div>

{/* Form Section */}
            <div className="p-8">
              <Card className="border-0 shadow-none bg-transparent">
                <CardHeader className="pb-6 px-0">
                  <CardTitle className="text-xl text-center text-slate-800">
                    {step === 0 && "Email Verification"}
                    {step === 1 && "Personal Information"}
                    {step === 2 && "Educational Information"}
                    {step === 3 && "Account Credentials"}
                  </CardTitle>
                  <CardDescription className="text-center text-slate-600">
                    {step === 0 && "Verify your email is authorized to register"}
                    {step === 1 && "Enter your personal details"}
                    {step === 2 && "Tell us about your education"}
                    {step === 3 && "Create your login credentials"}
                  </CardDescription>
                </CardHeader>

<CardContent className="px-0">
                  <form onSubmit={handleSubmit} className="space-y-5">
                    {/* Step 0: Email Verification */}
                    {step === 0 && (
                      <div className="space-y-2">
                        <Label htmlFor="email" className="flex items-center gap-1">
                          Email Address
                          {emailValidated && <CheckCircle className="h-4 w-4 text-green-500" />}
                        </Label>
                        <Input
                          id="email"
                          type="email"
                          placeholder="name@example.com"
                          value={formData.email}
                          onChange={(e) => updateField("email", e.target.value)}
                          className="h-12 rounded-xl"
                        />
                        <p className="text-sm text-slate-600">
                          Only pre-approved emails can register for the scholarship program.
                        </p>
                        {errors.email && <p className="text-sm text-red-600">{errors.email}</p>}
                      </div>
                    )}

{/* Step 1: Personal Information */}
                    {step === 1 && (
                      <>
                        {emailValidated && (
                          <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-xl">
                            <div className="flex items-center gap-2 text-green-700">
                              <CheckCircle className="h-4 w-4" />
                              <span className="text-sm font-medium">Email verified: {formData.email}</span>
                            </div>
                          </div>
                        )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div className="space-y-2">
                            <Label htmlFor="fullName">Full Name</Label>
                            <Input
                              id="fullName"
                              placeholder="Juan Dela Cruz"
                              value={formData.fullName}
                              onChange={(e) => updateField("fullName", e.target.value)}
                              className="h-12 rounded-xl"
                            />
                            {errors.fullName && <p className="text-sm text-red-600">{errors.fullName}</p>}
                          </div>

<div className="space-y-2">
                            <Label htmlFor="contactNumber">Contact Number</Label>
                            <Input
                              id="contactNumber"
                              type="tel"
                              placeholder="09123456789"
                              value={formData.contactNumber}
                              onChange={(e) => updateField("contactNumber", e.target.value.replace(/[^0-9]/g, ""))}
                              className="h-12 rounded-xl"
                            />
                            {errors.contactNumber && <p className="text-sm text-red-600">{errors.contactNumber}</p>}
                          </div>

<div className="space-y-2 md:col-span-2">
                            <Label htmlFor="address">Address</Label>
                            <Input
                              id="address"
                              placeholder="123 Main St, City"
                              value={formData.address}
                              onChange={(e) => updateField("address", e.target.value)}
                              className="h-12 rounded-xl"
                            />
                            {errors.address && <p className="text-sm text-red-600">{errors.address}</p>}
                          </div>

<div className="space-y-2">
                            <Label htmlFor="age">Age</Label>
                            <Input
                              id="age"
                              type="number"
                              placeholder="18"
                              value={formData.age}
                              onChange={(e) => updateField("age", e.target.value)}
                              className="h-12 rounded-xl"
                              min="16"
                              max="30"
                            />
                            {errors.age && <p className="text-sm text-red-600">{errors.age}</p>}
                          </div>

<div className="space-y-2">
                            <Label>Gender</Label>
                            <Select value={formData.gender} onValueChange={(value) => updateField("gender", value)}>
                              <SelectTrigger className="h-12 rounded-xl">
                                <SelectValue placeholder="Select your gender" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Male">Male</SelectItem>
                                <SelectItem value="Female">Female</SelectItem>
                              </SelectContent>
                            </Select>
                            {errors.gender && <p className="text-sm text-red-600">{errors.gender}</p>}
                          </div>

<div className="space-y-2">
                            <Label>Person with Disability (PWD)</Label>
                            <div className="flex items-center gap-3 h-12 px-4 border rounded-xl bg-background">
                              <input
                                type="checkbox"
                                id="isPWD"
                                checked={formData.isPWD}
                                onChange={(e) => updateField("isPWD", e.target.checked)}
                                className="h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary"
                              />
                              <Label htmlFor="isPWD" className="text-sm font-normal cursor-pointer">
                                Yes, I am a Person with Disability
                              </Label>
                            </div>
                          </div>

<div className="space-y-2">
                            <Label>Barangay</Label>
                            <Select value={formData.barangay} onValueChange={(value) => updateField("barangay", value)}>
                              <SelectTrigger className="h-12 rounded-xl">
                                <SelectValue placeholder="Select your barangay" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="Barangay 1">Barangay 1</SelectItem>
                                <SelectItem value="Barangay 2">Barangay 2</SelectItem>
                                <SelectItem value="Barangay 3">Barangay 3</SelectItem>
                                <SelectItem value="Barangay 4">Barangay 4</SelectItem>
                                <SelectItem value="Barangay 5">Barangay 5</SelectItem>
                                <SelectItem value="Barangay 6">Barangay 6</SelectItem>
                                <SelectItem value="Barangay 7">Barangay 7</SelectItem>
                                <SelectItem value="Barangay 8">Barangay 8</SelectItem>
                                <SelectItem value="Barangay 9">Barangay 9</SelectItem>
                                <SelectItem value="Barangay 10">Barangay 10</SelectItem>
                                <SelectItem value="Barangay 11">Barangay 11</SelectItem>
                                <SelectItem value="Barangay 12">Barangay 12</SelectItem>
                              </SelectContent>
                            </Select>
                            {errors.barangay && <p className="text-sm text-red-600">{errors.barangay}</p>}
                          </div>
                        </div>
                      </>
                    )}

{/* Step 2: Educational Information */}
                    {step === 2 && (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="space-y-2 md:col-span-2">
                          <Label htmlFor="school">School Name</Label>
                          <Input
                            id="school"
                            placeholder="University of Example"
                            value={formData.school}
                            onChange={(e) => updateField("school", e.target.value)}
                            className="h-12 rounded-xl"
                          />
                          {errors.school && <p className="text-sm text-red-600">{errors.school}</p>}
                        </div>

<div className="space-y-2">
                          <Label htmlFor="course">Course</Label>
                          <Input
                            id="course"
                            placeholder="Bachelor of Science in Computer Science"
                            value={formData.course}
                            onChange={(e) => updateField("course", e.target.value)}
                            className="h-12 rounded-xl"
                          />
                          {errors.course && <p className="text-sm text-red-600">{errors.course}</p>}
                        </div>

<div className="space-y-2">
                          <Label>Year Level</Label>
                          <Select value={formData.yearLevel} onValueChange={(value) => updateField("yearLevel", value)}>
                            <SelectTrigger className="h-12 rounded-xl">
                              <SelectValue placeholder="Select your year level" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="1st Year">1st Year</SelectItem>
                              <SelectItem value="2nd Year">2nd Year</SelectItem>
                              <SelectItem value="3rd Year">3rd Year</SelectItem>
                              <SelectItem value="4th Year">4th Year</SelectItem>
                            </SelectContent>
                          </Select>
                          {errors.yearLevel && <p className="text-sm text-red-600">{errors.yearLevel}</p>}
                        </div>
                      </div>
                    )}

{/* Step 3: Account Information */}
                    {step === 3 && (
                      <div className="space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div className="space-y-2">
                            <Label htmlFor="password">Password</Label>
                            <Input
                              id="password"
                              type="password"
                              placeholder="••••••••"
                              value={formData.password}
                              onChange={(e) => updateField("password", e.target.value)}
                              className="h-12 rounded-xl"
                            />
                            {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
                          </div>

<div className="space-y-2">
                            <Label htmlFor="confirmPassword">Confirm Password</Label>
                            <Input
                              id="confirmPassword"
                              type="password"
                              placeholder="••••••••"
                              value={formData.confirmPassword}
                              onChange={(e) => updateField("confirmPassword", e.target.value)}
                              className="h-12 rounded-xl"
                            />
                            {errors.confirmPassword && <p className="text-sm text-red-600">{errors.confirmPassword}</p>}
                          </div>

<div className="md:col-span-2">
                            <p className="text-sm text-slate-600">
                              Password must be at least 8 characters with at least one uppercase letter, one lowercase
                              letter, and one number.
                            </p>
                          </div>
                        </div>

<div className="flex items-start space-x-3 p-4 bg-slate-50 rounded-xl border">
                          <Checkbox
                            id="acceptTerms"
                            checked={formData.isPWD}
                            onCheckedChange={(checked) => updateField("isPWD", checked as boolean)}
                            className="mt-1"
                          />
                          <div className="space-y-1">
                            <Label htmlFor="acceptTerms" className="text-sm font-medium leading-relaxed cursor-pointer">
                              I agree to the{" "}
                              <Link
                                href="/terms"
                                target="_blank"
                                className="text-green-600 hover:text-green-700 underline"
                              >
                                Terms of Service
                              </Link>{" "}
                              and{" "}
                              <Link
                                href="/privacy"
                                target="_blank"
                                className="text-green-600 hover:text-green-700 underline"
                              >
                                Privacy Policy
                              </Link>
                              .
                            </Label>
                            <p className="text-xs text-slate-500">
                              By checking this box, you acknowledge that you have read and understood our terms and
                              privacy policy.
                            </p>
                          </div>
                        </div>
                      </div>
                    )}

{/* Navigation Buttons */}
                    <div className="flex justify-between pt-8 border-t border-slate-100">
                      {step > 0 ? (
                        <Button
                          type="button"
                          variant="outline"
                          onClick={handlePrevious}
                          className="flex items-center gap-2 h-12 px-6 rounded-xl bg-transparent"
                        >
                          <ArrowLeft className="h-4 w-4" />
                          Previous
                        </Button>
                      ) : (
                        <div></div>
                      )}

{step < 3 ? (
                        <Button
                          type="button"
                          onClick={handleNext}
                          className="bg-green-500 hover:bg-green-600 text-white flex items-center gap-2 h-12 px-6 rounded-xl"
                        >
                          {step === 0 ? "Verify Email" : "Next"}
                          <ArrowRight className="h-4 w-4" />
                        </Button>
                      ) : (
                        <Button
                          type="submit"
                          disabled={isLoading}
                          className="bg-green-500 hover:bg-green-600 text-white flex items-center gap-2 h-12 px-6 rounded-xl"
                        >
                          {isLoading ? (
                            <>
                              <svg
                                className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  className="opacity-25"
                                  cx="12"
                                  cy="12"
                                  r="10"
                                  stroke="currentColor"
                                  strokeWidth="4"
                                ></circle>
                                <path
                                  className="opacity-75"
                                  fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                ></path>
                              </svg>
                              Creating Account...
                            </>
                          ) : (
                            <>
                              Create Account
                              <ArrowRight className="h-4 w-4" />
                            </>
                          )}
                        </Button>
                      )}
                    </div>
                  </form>
                </CardContent>

<CardFooter className="flex flex-col items-center space-y-4 pt-6 px-0 border-t border-slate-100">
                  <div className="text-sm text-center text-slate-600">
                    Already have an account?{" "}
                    <Link href="/login" className="text-green-600 hover:text-green-700 font-medium transition-colors">
                      Sign in here
                    </Link>
                  </div>
                </CardFooter>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AdminLayout } from "@/components/admin-layout"
import { getStatistics, getUsers, getApplications } from "@/lib/storage"
import { FileText, Clock, LayoutDashboard, CheckCircle, XCircle, Calendar } from "lucide-react"
import { Badge } from "@/components/ui/badge"

export default function AdminDashboard() {
  const [stats, setStats] = useState({
    totalApplications: 0,
    pendingApplications: 0,
    approvedApplications: 0,
    rejectedApplications: 0,
    totalScholars: 0,
    totalFunds: 0,
  })
  const [recentApplications, setRecentApplications] = useState<any[]>([])
  const [barangayData, setBarangayData] = useState<{ labels: string[]; data: number[] }>({
    labels: [],
    data: [],
  })
  const [courseData, setCourseData] = useState<{ labels: string[]; data: number[] }>({
    labels: [],
    data: [],
  })
  const [yearLevelData, setYearLevelData] = useState<{ labels: string[]; data: number[] }>({
    labels: ["1st Year", "2nd Year", "3rd Year", "4th Year"],
    data: [0, 0, 0, 0],
  })

useEffect(() => {
    // Get statistics from in-memory storage
    const statistics = getStatistics()
    setStats(statistics)

// Get applications for chart data
    const applications = getApplications()
    const users = getUsers().filter((user) => user.role === "student")

// Get recent applications (last 10, sorted by date)
    const sortedApplications = applications
      .sort(
        (a, b) =>
          new Date(b.submittedAt || b.createdAt || "").getTime() -
          new Date(a.submittedAt || a.createdAt || "").getTime(),
      )
      .slice(0, 10)

setRecentApplications(sortedApplications)

// Process barangay data
    const barangayCounts: Record<string, number> = {}
    applications.forEach((app) => {
      if (app.barangay) {
        barangayCounts[app.barangay] = (barangayCounts[app.barangay] || 0) + 1
      }
    })

// If no applications with barangay data, try to get from user profiles
    if (Object.keys(barangayCounts).length === 0) {
      users.forEach((user) => {
        const barangay = user.profileData?.barangay
        if (barangay) {
          barangayCounts[barangay] = (barangayCounts[barangay] || 0) + 1
        }
      })
    }

// Sort barangays by count (descending)
    const sortedBarangays = Object.entries(barangayCounts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5) // Take top 5

setBarangayData({
      labels: sortedBarangays.map(([name]) => name),
      data: sortedBarangays.map(([, count]) => count),
    })

// Process course data
    const courseCounts: Record<string, number> = {}
    applications.forEach((app) => {
      if (app.course) {
        courseCounts[app.course] = (courseCounts[app.course] || 0) + 1
      }
    })

// If no applications with course data, try to get from user profiles
    if (Object.keys(courseCounts).length === 0) {
      users.forEach((user) => {
        const course = user.profileData?.course
        if (course) {
          courseCounts[course] = (courseCounts[course] || 0) + 1
        }
      })
    }

// Sort courses by count (descending)
    const sortedCourses = Object.entries(courseCounts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 6) // Take top 6

setCourseData({
      labels: sortedCourses.map(([name]) => name),
      data: sortedCourses.map(([, count]) => count),
    })

// Process year level data
    const yearLevels = ["1st Year", "2nd Year", "3rd Year", "4th Year"]
    const yearCounts = [0, 0, 0, 0]

applications.forEach((app) => {
      const yearIndex = yearLevels.findIndex((year) => app.yearLevel && app.yearLevel.includes(year.split(" ")[0]))
      if (yearIndex !== -1) {
        yearCounts[yearIndex]++
      }
    })

// If no applications with year level data, try to get from user profiles
    if (yearCounts.every((count) => count === 0)) {
      users.forEach((user) => {
        const yearLevel = user.profileData?.yearLevel
        if (yearLevel) {
          const yearIndex = yearLevels.findIndex((year) => yearLevel.includes(year.split(" ")[0]))
          if (yearIndex !== -1) {
            yearCounts[yearIndex]++
          }
        }
      })
    }

setYearLevelData({
      labels: yearLevels,
      data: yearCounts,
    })
  }, [])

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "approved":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "rejected":
        return <XCircle className="h-4 w-4 text-red-600" />
      default:
        return <Clock className="h-4 w-4 text-amber-600" />
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "approved":
        return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Approved</Badge>
      case "rejected":
        return <Badge className="bg-red-100 text-red-800 hover:bg-red-100">Rejected</Badge>
      default:
        return <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-100">Pending</Badge>
    }
  }

return (
    <AdminLayout>
      <div className="mb-8">
        <div className="flex items-center gap-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600">
            <LayoutDashboard className="h-6 w-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-slate-900">Admin Dashboard</h1>
            <p className="text-slate-600">Manage scholarship applications and monitor program statistics</p>
          </div>
        </div>
      </div>

<div className="space-y-6">
        {/* Statistics Cards */}
        <div className="grid gap-6 md:grid-cols-3">
          <Card className="border-0 shadow-sm bg-gradient-to-br from-blue-50 to-blue-100/50">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-semibold text-slate-700">Total Applications</CardTitle>
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
                <FileText className="h-5 w-5 text-blue-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-slate-900">{stats.totalApplications}</div>
              <p className="text-xs text-slate-600 mt-1">Total scholarship applications</p>
            </CardContent>
          </Card>

<Card className="border-0 shadow-sm bg-gradient-to-br from-amber-50 to-amber-100/50">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-semibold text-slate-700">Pending Applications</CardTitle>
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100">
                <Clock className="h-5 w-5 text-amber-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-slate-900">{stats.pendingApplications}</div>
              <p className="text-xs text-slate-600 mt-1">
                {stats.totalApplications > 0
                  ? Math.round((stats.pendingApplications / stats.totalApplications) * 100)
                  : 0}
                % of total applications
              </p>
            </CardContent>
          </Card>

<Card className="border-0 shadow-sm bg-gradient-to-br from-emerald-50 to-emerald-100/50">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-semibold text-slate-700">Approved Scholars</CardTitle>
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
                <CheckCircle className="h-5 w-5 text-emerald-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-slate-900">{stats.approvedApplications}</div>
              <p className="text-xs text-slate-600 mt-1">
                {stats.totalApplications > 0
                  ? Math.round((stats.approvedApplications / stats.totalApplications) * 100)
                  : 0}
                % approval rate
              </p>
            </CardContent>
          </Card>
        </div>

{/* Recent Applications */}
        <Card className="border-0 shadow-sm">
          <CardHeader className="pb-4">
            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100">
                <Calendar className="h-4 w-4 text-slate-600" />
              </div>
              <div>
                <CardTitle className="text-lg font-semibold text-slate-900">Recent Applications</CardTitle>
                <CardDescription className="text-slate-600">
                  Latest scholarship applications with submission dates and times
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentApplications.length > 0 ? (
                recentApplications.map((application) => (
                  <div
                    key={application.id}
                    className="flex items-center justify-between p-4 rounded-lg border border-slate-200 bg-slate-50/50 hover:bg-slate-100/50 transition-colors"
                  >
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-2">{getStatusIcon(application.status)}</div>
                      <div>
                        <h4 className="font-semibold text-slate-900">{application.fullName}</h4>
                        <div className="flex items-center gap-4 text-sm text-slate-600">
                          <span>{application.course}</span>
                          <span>•</span>
                          <span>{application.school}</span>
                          <span>•</span>
                          <span>{application.yearLevel}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <div className="text-sm font-medium text-slate-900">
                          {formatDate(application.submittedAt || application.createdAt || new Date().toISOString())}
                        </div>
                        <div className="text-xs text-slate-500">{application.barangay}</div>
                      </div>
                      {getStatusBadge(application.status)}
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center py-8 text-slate-500">
                  <FileText className="h-12 w-12 mx-auto mb-4 text-slate-300" />
                  <p>No applications found</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js"
import { Line, Bar, Pie, Doughnut } from "react-chartjs-2"
import { forwardRef } from "react"

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Title,
  Tooltip,
  Legend,
  Filler,
)

type ChartType = "line" | "bar" | "pie" | "doughnut"

interface ChartProps {
  type: ChartType
  data: any
  options?: any
}

export const Chart = forwardRef<ChartJS, ChartProps>(({ type, data, options }, ref) => {
  switch (type) {
    case "line":
      return <Line ref={ref} data={data} options={options} />
    case "bar":
      return <Bar ref={ref} data={data} options={options} />
    case "pie":
      return <Pie ref={ref} data={data} options={options} />
    case "doughnut":
      return <Doughnut ref={ref} data={data} options={options} />
    default:
      return null
  }
})
Chart.displayName = "Chart"

export const ChartContainer = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>
}

export const ChartTooltip = () => {
  return null
}

export const ChartTooltipContent = () => {
  return null
}

export const ChartLegend = () => {
  return null
}

export const ChartLegendContent = () => {
  return null
}

export const ChartStyle = () => {
  return null
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from 'next/navigation'
import { Button } from "@/components/ui/button"
import Image from "next/image"

export function HeroSection() {
  const [isLoaded, setIsLoaded] = useState(false)
  const [isTrackLoading, setIsTrackLoading] = useState(false)
  const router = useRouter()

useEffect(() => {
    // Trigger animations after component mounts
    const timer = setTimeout(() => {
      setIsLoaded(true)
    }, 100)

return () => clearTimeout(timer)
  }, [])

const handleTrackClick = () => {
    setIsTrackLoading(true)
    // Simulate loading delay for smooth transition
    setTimeout(() => {
      router.push("/login")
    }, 600)
  }

return (
    <section className="relative w-full bg-gradient-to-br from-emerald-50 via-green-100 to-teal-50 py-20 md:py-32 overflow-hidden min-h-screen flex items-center justify-center">
      {/* Enhanced background with more vibrant colors */}
      <div className="absolute inset-0 z-0">
        {/* Vibrant gradient overlays */}
        <div
          className={`absolute top-0 left-1/2 transform -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-br from-green-300/40 via-emerald-200/30 to-teal-200/20 rounded-full opacity-80 blur-3xl transition-all duration-1000 ${
            isLoaded ? "scale-100 opacity-80" : "scale-75 opacity-0"
          }`}
          style={{ animationDelay: "0.2s" }}
        ></div>
        <div
          className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[600px] h-[300px] bg-gradient-to-tr from-emerald-400/30 via-green-300/20 to-teal-300/20 rounded-full opacity-60 blur-2xl transition-all duration-1000 ${
            isLoaded ? "scale-100 opacity-60" : "scale-75 opacity-0"
          }`}
          style={{ animationDelay: "0.4s" }}
        ></div>

{/* Additional colorful depth layers */}
        <div
          className={`absolute top-20 left-1/4 w-96 h-96 bg-gradient-to-br from-green-200/50 to-emerald-300/40 rounded-full opacity-50 blur-3xl animate-pulse transition-all duration-1200 ${
            isLoaded ? "scale-100 opacity-50" : "scale-50 opacity-0"
          }`}
          style={{ animationDelay: "0.6s" }}
        ></div>
        <div
          className={`absolute bottom-20 right-1/4 w-80 h-80 bg-gradient-to-tl from-teal-200/60 to-green-200/40 rounded-full opacity-40 blur-3xl transition-all duration-1200 ${
            isLoaded ? "scale-100 opacity-40" : "scale-50 opacity-0"
          }`}
          style={{ animationDelay: "0.8s" }}
        ></div>

{/* More vibrant floating shapes */}
        <div
          className={`absolute top-32 left-1/4 w-6 h-6 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full opacity-70 animate-bounce transition-all duration-500 ${
            isLoaded ? "opacity-70 translate-y-0" : "opacity-0 translate-y-4"
          }`}
          style={{ animationDelay: "1s" }}
        ></div>
        <div
          className={`absolute top-48 right-1/3 w-4 h-4 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-full opacity-60 animate-bounce transition-all duration-500 ${
            isLoaded ? "opacity-60 translate-y-0" : "opacity-0 translate-y-4"
          }`}
          style={{ animationDelay: "1.2s" }}
        ></div>
        <div
          className={`absolute bottom-32 left-1/3 w-5 h-5 bg-gradient-to-r from-teal-400 to-green-500 rounded-full opacity-80 animate-bounce transition-all duration-500 ${
            isLoaded ? "opacity-80 translate-y-0" : "opacity-0 translate-y-4"
          }`}
          style={{ animationDelay: "1.4s" }}
        ></div>
        <div
          className={`absolute top-40 right-1/4 w-4 h-4 bg-gradient-to-r from-green-500 to-emerald-400 rounded-full opacity-50 animate-bounce transition-all duration-500 ${
            isLoaded ? "opacity-50 translate-y-0" : "opacity-0 translate-y-4"
          }`}
          style={{ animationDelay: "1.6s" }}
        ></div>
      </div>

<div className="container relative z-10 px-4 md:px-6 w-full">
        <div className="flex flex-col items-center justify-center text-center space-y-10 max-w-5xl mx-auto">
          {/* Status indicator with entrance animation */}
          <div
            className={`flex items-center justify-center space-x-2 text-sm transition-all duration-700 ease-out ${
              isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
            style={{ animationDelay: "0.3s" }}
          >
            <div className="relative">
              <div className="h-2 w-2 rounded-full bg-gradient-to-r from-green-400 to-green-600 shadow-lg animate-pulse"></div>
              <div className="absolute inset-0 h-2 w-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
            </div>
            <span className="text-gray-600 font-medium">Now accepting applications for 2025</span>
          </div>

{/* BTS Logo replacing the text heading */}
          <div className="space-y-8 w-full flex flex-col items-center justify-center">
            <div className="relative flex items-center justify-center">
              <div
                className={`transition-all duration-1000 ease-out ${
                  isLoaded ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-8 scale-95"
                }`}
                style={{ animationDelay: "0.5s" }}
              >
                <Image
                  src="/images/bts-logo.jpg"
                  alt="Bawat Tahanan May Scholar - BTS Logo"
                  width={800}
                  height={400}
                  className="mx-auto rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-105 max-w-full h-auto"
                  priority
                />
              </div>
            </div>
            <div className="w-full flex justify-center">
              <p
                className={`text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed text-center transition-all duration-800 ease-out ${
                  isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
                }`}
                style={{ animationDelay: "0.7s" }}
              >
                Empowering communities through education. Your journey to academic success starts here.
              </p>
            </div>
          </div>

{/* Enhanced CTA buttons with loading states and animations */}
          <div
            className={`flex flex-col sm:flex-row gap-6 pt-6 w-full justify-center items-center transition-all duration-800 ease-out ${
              isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
            }`}
            style={{ animationDelay: "0.9s" }}
          >
            {/* Remove Apply Now button from hero section */}
            <Button
              variant="ghost"
              size="lg"
              onClick={handleTrackClick}
              disabled={isTrackLoading}
              className="relative text-green-600 hover:text-green-700 hover:bg-green-50 px-12 py-4 text-lg transition-all duration-300 border border-green-200/50 hover:border-green-300 shadow-lg hover:shadow-xl transform hover:scale-105 rounded-full disabled:opacity-80 disabled:cursor-not-allowed disabled:transform-none min-w-[180px]"
            >
              {isTrackLoading ? (
                <>
                  <svg
                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-green-600"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  <span>Loading...</span>
                </>
              ) : (
                "Track Application"
              )}
            </Button>
          </div>

{/* Achievement badges with staggered entrance animation */}
          <div
            className={`flex flex-wrap justify-center items-center gap-4 pt-8 w-full transition-all duration-800 ease-out ${
              isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
            }`}
            style={{ animationDelay: "1.3s" }}
          >
            {["✓ Verified Program", "✓ Government Approved", "✓ Community Focused"].map((text, index) => (
              <div
                key={index}
                className={`bg-white/80 backdrop-blur-sm rounded-full px-6 py-3 shadow-lg border border-green-100 transform hover:scale-105 transition-all duration-300 ${
                  isLoaded ? "scale-100 opacity-100" : "scale-90 opacity-0"
                }`}
                style={{ animationDelay: `${1.4 + index * 0.1}s` }}
              >
                <span className="text-sm font-medium text-green-600">{text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Custom CSS for additional animations */}
      <style jsx>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

@keyframes scaleIn {
          from {
            opacity: 0;
            transform: scale(0.9);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }

.animate-fade-in-up {
          animation: fadeInUp 0.6s ease-out forwards;
        }

.animate-scale-in {
          animation: scaleIn 0.5s ease-out forwards;
        }
      `}</style>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx" isQuickEdit="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"

export function CtaSection() {
  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-br from-green-800 via-green-700 to-green-600 py-16 md:py-24">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        {/* Animated gradient blobs */}
        <div className="animate-pulse-slow absolute -top-24 -right-24 h-96 w-96 rounded-full bg-gradient-to-br from-green-500 to-emerald-400 opacity-30 blur-3xl"></div>
        <div className="animate-pulse-slow absolute top-1/2 -left-24 h-64 w-64 rounded-full bg-gradient-to-tr from-teal-500 to-green-400 opacity-20 blur-3xl"></div>
        <div className="animate-pulse-slow absolute bottom-0 right-1/4 h-80 w-80 rounded-full bg-gradient-to-r from-emerald-500 to-teal-400 opacity-20 blur-3xl"></div>

{/* Diagonal lines pattern */}
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptMCAzMGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptLTMwLTE4YzMuMzE0IDAgNi0yLjY4NiA2LTZzLTIuNjg2LTYtNi02Yy0zLjMxNCAwLTYgMi42ODYtNiA2czIuNjg2IDYgNiA2em0wIDMwYzMuMzE0IDAgNi0yLjY4NiA2LTZzLTIuNjg2LTYtNi02Yy0zLjMxNCAwLTYgMi42ODYtNiA2czIuNjg2IDYgNiA2eiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iLjEiLz48L2c+PC9zdmc+')] opacity-20"></div>
      </div>

<div className="container relative z-10 px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-8 text-center">
          {/* Decorative element */}
          <div className="h-1 w-20 rounded-full bg-gradient-to-r from-green-300 to-emerald-200"></div>

<div className="space-y-4">
            <h2 className="text-3xl font-bold tracking-tighter text-white drop-shadow-md sm:text-4xl md:text-5xl">
              Ready to Start Your{" "}
              <span className="bg-gradient-to-r from-green-200 to-emerald-100 bg-clip-text text-transparent">
                Journey?
              </span>
            </h2>
            <p className="max-w-[600px] text-green-100 md:text-xl/relaxed">
              Apply now and take the first step towards a brighter future. Our team is ready to support you every step
              of the way.
            </p>
          </div>

<div className="flex flex-col gap-3 min-[400px]:flex-row">
            <Link href="/login">
              <Button
                size="lg"
                variant="outline"
                className="border-2 border-white/30 bg-white/10 text-white backdrop-blur-sm transition-all duration-300 hover:bg-white/20 hover:border-white/50 hover:translate-y-[-2px]"
              >
                Track Application
              </Button>
            </Link>
          </div>

{/* Floating elements */}
          <div className="absolute -top-10 left-10 hidden rotate-12 rounded-lg bg-white/90 backdrop-blur-sm p-3 shadow-xl transform md:block">
            <div className="flex items-center space-x-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-green-600"
              >
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
              <span className="text-xs font-medium text-green-900">Quick Application</span>
            </div>
          </div>

<div className="absolute -bottom-10 right-10 hidden -rotate-6 rounded-lg bg-white/90 backdrop-blur-sm p-3 shadow-xl transform md:block">
            <div className="flex items-center space-x-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-green-600"
              >
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
              </svg>
              <span className="text-xs font-medium text-green-900">Secure Process</span>
            </div>
          </div>
        </div>
      </div>

export function EnhancedFooter() {
  return (
    <footer className="relative bg-gradient-to-br from-green-700 via-green-800 to-green-900 text-white overflow-hidden">
      {/* Background patterns and effects */}
      <div className="absolute inset-0 z-0">
        {/* Gradient overlays */}
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-green-800/10 via-emerald-700/5 to-teal-800/10"></div>

{/* Animated background shapes */}
        <div className="absolute top-10 left-10 w-32 h-32 bg-gradient-to-br from-green-400/10 to-emerald-300/5 rounded-full blur-xl animate-pulse"></div>
        <div className="absolute bottom-10 right-10 w-40 h-40 bg-gradient-to-tr from-teal-400/10 to-green-300/5 rounded-full blur-xl animate-pulse"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-emerald-500/5 to-green-400/5 rounded-full blur-3xl"></div>

{/* Dot pattern */}
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptMCAzMGMzLjMxNCAwIDYtMi42ODYgNiLTZzIuNjg2LTYtNi02Yy0zLjMxNCAwLTYgMi42ODYtNiA2czIuNjg2IDYgNiA2eiIgc3Ryb2tlPSIjMTY4MDNkIiBzdHJva2Utb3BhY2l0eT0iLjEiLz48L2c+PC9zdmc+')] opacity-10"></div>
      </div>

<div className="container relative z-10 px-4 md:px-6 py-16">
        {/* Main footer content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          {/* Brand section */}
          <div className="lg:col-span-2">
            <div className="flex items-center space-x-3 mb-6">
              <div className="relative">
                <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-white"
                  >
                    <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
                    <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
                  </svg>
                </div>
                <div className="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl blur opacity-50"></div>
              </div>
              <div>
                <h3 className="text-2xl font-bold text-white">BTS</h3>
                <p className="text-gray-100 text-sm leading-relaxed">Bawat Tahanan May Scholar</p>
              </div>
            </div>
            <p className="text-gray-100 mb-6 max-w-md leading-relaxed">
              Empowering communities through education. We believe every household deserves a scholar, creating
              opportunities for academic excellence and community development.
            </p>
            <div className="flex space-x-4">
              {/* Social media icons */}
              {[
                { name: "Facebook", icon: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" },
                {
                  name: "Twitter",
                  icon: "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z",
                },
                {
                  name: "Instagram",
                  icon: "M16 8a6 6 0 0 1 6 6v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h7a6 6 0 0 1 6 6z",
                },
              ].map((social, index) => (
                <div
                  key={index}
                  className="w-10 h-10 bg-gradient-to-br from-green-600/20 to-emerald-600/20 backdrop-blur-sm rounded-lg flex items-center justify-center border border-green-400/20 hover:border-green-400/40 transition-all duration-300 hover:scale-110 cursor-pointer group"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-white group-hover:text-green-200 transition-colors"
                  >
                    <path d={social.icon}></path>
                  </svg>
                </div>
              ))}
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h4 className="text-lg font-semibold text-white mb-6 relative">
              Quick Links
              <div className="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full"></div>
            </h4>
            <ul className="space-y-3">
              {[
                { name: "Apply Now", href: "/apply" },
                { name: "Track Application", href: "/login" },
                { name: "About Us", href: "#" },
                { name: "Contact", href: "#" },
                { name: "FAQ", href: "#" },
              ].map((link, index) => (
                <li key={index}>
                  <Link
                    href={link.href}
                    style={link.name === "Apply Now" ? { color: "#ffffff" } : {}}
                    className="text-white hover:text-green-200 transition-colors duration-300 flex items-center group leading-relaxed font-medium"
                  >
                    <span className="w-1.5 h-1.5 bg-green-400 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Contact Info */}
          <div>
            <h4 className="text-lg font-semibold text-white mb-6 relative">
              Contact Info
              <div className="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full"></div>
            </h4>
            <div className="space-y-4">
              <div className="flex items-start space-x-3">
                <div className="w-8 h-8 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg flex items-center justify-center mt-0.5">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-white"
                  >
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                </div>
                <div>
                  <p className="text-white text-sm leading-relaxed">123 Education Street</p>
                  <p className="text-gray-100 text-sm leading-relaxed">Manila, Philippines</p>
                </div>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg flex items-center justify-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-white"
                  >
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                </div>
                <p className="text-white text-sm leading-relaxed">+63 123 456 7890</p>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg flex items-center justify-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-white"
                  >
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                  </svg>
                </div>
                <p className="text-white text-sm leading-relaxed">info@bts-scholarship.ph</p>
              </div>
            </div>
          </div>
        </div>

{/* Bottom section */}
        <div className="border-t border-green-700/30 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <p className="text-gray-100 text-sm leading-relaxed">
              © {new Date().getFullYear()} Bawat Tahanan May Scholar (BTS). All rights reserved.
            </p>
            <div className="flex space-x-6">
              <Link href="#" className="text-gray-100 hover:text-white text-sm transition-colors leading-relaxed">
                Privacy Policy
              </Link>
              <Link href="/terms" className="text-gray-100 hover:text-white text-sm transition-colors leading-relaxed">
                Terms of Service
              </Link>
              <Link href="#" className="text-gray-100 hover:text-white text-sm transition-colors leading-relaxed">
                Cookie Policy
              </Link>
            </div>
          </div>
        </div>
      </div>

{/* Removed the wave decoration and replaced with solid green */}
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/admin/scheduling/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  getVerificationSchedules,
  createVerificationSchedule,
  updateVerificationSchedule,
  deleteVerificationSchedule,
  endVerificationSchedule,
  type VerificationSchedule,
  getFinancialDistributionSchedules,
  createFinancialDistributionSchedule,
  updateFinancialDistributionSchedule,
  deleteFinancialDistributionSchedule,
  endFinancialDistributionSchedule,
  type FinancialDistributionSchedule,
  hasPermission,
} from "@/lib/storage"
import { PermissionGuard } from "@/components/permission-guard"
import { useAuth } from "@/contexts/auth-context"
import { Calendar, Plus, Edit, Trash2, StopCircle, DollarSign, X } from 'lucide-react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

const BARANGAYS = [
  "Barangay 1",
  "Barangay 2",
  "Barangay 3",
  "Barangay 4",
  "Barangay 5",
  "Barangay 6",
  "Barangay 7",
  "Barangay 8",
  "Barangay 9",
  "Barangay 10",
  "Barangay 11",
  "Barangay 12",
]

export default function SchedulingPage() {
  const { toast } = useToast()
  
  const [activeTab, setActiveTab] = useState("verification")
  const [verificationSchedules, setVerificationSchedules] = useState<VerificationSchedule[]>([])
  const [financialSchedules, setFinancialSchedules] = useState<FinancialDistributionSchedule[]>([])
  const [isAddModalOpen, setIsAddModalOpen] = useState(false)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [selectedSchedule, setSelectedSchedule] = useState<VerificationSchedule | FinancialDistributionSchedule | null>(null)
  const [formData, setFormData] = useState({
    barangay: "",
    barangays: [] as string[], // added barangays array for multi-select
    startDate: "",
    endDate: "",
    dailyLimit: "",
    distributionAmount: "",
    startTime: "",
  })

useEffect(() => {
    loadSchedules()
  }, [])

const loadSchedules = () => {
    const verificationLoaded = getVerificationSchedules()
    const financialLoaded = getFinancialDistributionSchedules()
    setVerificationSchedules(verificationLoaded)
    setFinancialSchedules(financialLoaded)
  }

const resetForm = () => {
    setFormData({
      barangay: "",
      barangays: [],
      startDate: "",
      endDate: "",
      dailyLimit: "",
      distributionAmount: "",
      startTime: "",
    })
  }

const toggleBarangay = (barangay: string) => {
    setFormData(prev => ({
      ...prev,
      barangays: prev.barangays.includes(barangay)
        ? prev.barangays.filter(b => b !== barangay)
        : [...prev.barangays, barangay]
    }))
  }

const selectBarangayRange = (start: number, end: number) => {
    const newBarangays = BARANGAYS.slice(start - 1, end)
    setFormData(prev => ({
      ...prev,
      barangays: newBarangays
    }))
  }

const handleAddSchedule = () => {
    if (activeTab === "verification") {
      if (!formData.barangay || !formData.startDate || !formData.endDate) {
        toast({
          variant: "destructive",
          title: "Validation Error",
          description: "Please fill in all required fields.",
        })
        return
      }
    } else {
      if (formData.barangays.length === 0 || !formData.startDate || !formData.endDate) {
        toast({
          variant: "destructive",
          title: "Validation Error",
          description: "Please select at least one barangay and fill in dates.",
        })
        return
      }
    }

// Validate dates
    const start = new Date(formData.startDate)
    const end = new Date(formData.endDate)

if (end < start) {
      toast({
        variant: "destructive",
        title: "Invalid Dates",
        description: "End date must be after start date.",
      })
      return
    }

try {
      if (activeTab === "verification") {
        createVerificationSchedule({
          barangay: formData.barangay,
          startDate: formData.startDate,
          endDate: formData.endDate,
          dailyLimit: formData.dailyLimit ? Number.parseInt(formData.dailyLimit) : undefined,
          createdBy: "admin",
        })

toast({
          title: "Schedule Created",
          description: `Verification schedule for ${formData.barangay} has been created successfully.`,
        })
      } else {
        if (!formData.distributionAmount) {
          toast({
            variant: "destructive",
            title: "Validation Error",
            description: "Distribution amount is required.",
          })
          return
        }

formData.barangays.forEach(barangay => {
          createFinancialDistributionSchedule({
            barangays: [barangay],
            startDate: formData.startDate,
            endDate: formData.endDate,
            startTime: formData.startTime,
            distributionAmount: Number.parseFloat(formData.distributionAmount),
            createdBy: "admin",
          })
        })

toast({
          title: "Schedules Created",
          description: `Financial distribution schedules for ${formData.barangays.length} barangays have been created successfully.`,
        })
      }

setIsAddModalOpen(false)
      resetForm()
      loadSchedules()
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to create schedule. Please try again.",
      })
    }
  }

const handleEditSchedule = () => {
    if (!selectedSchedule || !formData.startDate || !formData.endDate) {
      toast({
        variant: "destructive",
        title: "Validation Error",
        description: "Please fill in all required fields.",
      })
      return
    }

// Validate dates
    const start = new Date(formData.startDate)
    const end = new Date(formData.endDate)

if (end < start) {
      toast({
        variant: "destructive",
        title: "Invalid Dates",
        description: "End date must be after start date.",
      })
      return
    }

try {
      if (activeTab === "verification") {
        updateVerificationSchedule(selectedSchedule.id, {
          barangay: formData.barangay,
          startDate: formData.startDate,
          endDate: formData.endDate,
          dailyLimit: formData.dailyLimit ? Number.parseInt(formData.dailyLimit) : undefined,
        })
      } else {
        updateFinancialDistributionSchedule(selectedSchedule.id, {
          barangays: formData.barangays.length > 0 ? formData.barangays : ["Barangay 1"],
          startDate: formData.startDate,
          endDate: formData.endDate,
          startTime: formData.startTime,
          distributionAmount: Number.parseFloat(formData.distributionAmount),
        })
      }

toast({
        title: "Schedule Updated",
        description: `Schedule has been updated successfully.`,
      })

setIsEditModalOpen(false)
      setSelectedSchedule(null)
      resetForm()
      loadSchedules()
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to update schedule. Please try again.",
      })
    }
  }

const handleDeleteSchedule = () => {
    if (!selectedSchedule) return

try {
      if (activeTab === "verification") {
        deleteVerificationSchedule(selectedSchedule.id)
      } else {
        deleteFinancialDistributionSchedule(selectedSchedule.id)
      }

toast({
        title: "Schedule Deleted",
        description: "Schedule has been deleted successfully.",
      })

setIsDeleteDialogOpen(false)
      setSelectedSchedule(null)
      loadSchedules()
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to delete schedule. Please try again.",
      })
    }
  }

const handleEndSchedule = (schedule: VerificationSchedule | FinancialDistributionSchedule) => {
    try {
      if (activeTab === "verification") {
        endVerificationSchedule(schedule.id)
      } else {
        endFinancialDistributionSchedule(schedule.id)
      }

toast({
        title: "Schedule Ended",
        description: `Schedule has been ended.`,
      })

loadSchedules()
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Failed to end schedule. Please try again.",
      })
    }
  }

const openEditModal = (schedule: VerificationSchedule | FinancialDistributionSchedule) => {
    setSelectedSchedule(schedule)
    const isFinancial = "distributionAmount" in schedule
    setFormData({
      barangay: !isFinancial ? schedule.barangay : "",
      barangays: isFinancial ? schedule.barangays : [],
      startDate: schedule.startDate.split("T")[0],
      endDate: schedule.endDate.split("T")[0],
      dailyLimit: !isFinancial && "dailyLimit" in schedule ? schedule.dailyLimit?.toString() || "" : "",
      distributionAmount: isFinancial ? schedule.distributionAmount.toString() : "",
      startTime: isFinancial ? (schedule.startTime || "") : "",
    })
    setIsEditModalOpen(true)
  }

const openDeleteDialog = (schedule: VerificationSchedule | FinancialDistributionSchedule) => {
    setSelectedSchedule(schedule)
    setIsDeleteDialogOpen(true)
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>
      case "ended":
        return <Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">Ended</Badge>
      case "upcoming":
        return <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">Upcoming</Badge>
      default:
        return <Badge>{status}</Badge>
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    })
  }

const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-PH", {
      style: "currency",
      currency: "PHP",
    }).format(amount)
  }

const formatTime = (timeString: string) => {
    if (!timeString) return "N/A"
    return timeString
  }

return (
    <PermissionGuard permission="scheduling">
      <AdminLayout>
        <div className="mb-8">
          <div className="flex items-center gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600">
              <Calendar className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold tracking-tight text-slate-900">Scheduling Management</h1>
              <p className="text-slate-600">Manage schedules for document verification and financial distribution</p>
            </div>
          </div>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="verification" className="flex items-center gap-2">
              <Calendar className="h-4 w-4" />
              Document Verification
            </TabsTrigger>
            <TabsTrigger value="financial" className="flex items-center gap-2">
              <DollarSign className="h-4 w-4" />
              Financial Distribution
            </TabsTrigger>
          </TabsList>

<TabsContent value="verification">
            <Card className="border-0 shadow-sm">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-lg font-semibold text-slate-900">Document Verification Scheduling</CardTitle>
                    <CardDescription className="text-slate-600">
                      View and manage barangay-based walk-in verification schedules
                    </CardDescription>
                  </div>
                  <Button onClick={() => setIsAddModalOpen(true)} className="bg-emerald-600 hover:bg-emerald-700">
                    <Plus className="mr-2 h-4 w-4" />
                    Add Schedule
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-slate-200 bg-white">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Barangay Name</TableHead>
                        <TableHead>Start Date</TableHead>
                        <TableHead>End Date</TableHead>
                        <TableHead>Daily Limit</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {verificationSchedules.length === 0 ? (
                        <TableRow>
                          <TableCell colSpan={6} className="h-24 text-center">
                            <div className="flex flex-col items-center justify-center text-slate-500">
                              <Calendar className="h-12 w-12 mb-2 text-slate-300" />
                              <p>No schedules found. Click "Add Schedule" to create one.</p>
                            </div>
                          </TableCell>
                        </TableRow>
                      ) : (
                        verificationSchedules.map((schedule) => (
                          <TableRow key={schedule.id}>
                            <TableCell className="font-medium">{schedule.barangay}</TableCell>
                            <TableCell>{formatDate(schedule.startDate)}</TableCell>
                            <TableCell>{formatDate(schedule.endDate)}</TableCell>
                            <TableCell>{schedule.dailyLimit || "No limit"}</TableCell>
                            <TableCell>{getStatusBadge(schedule.status)}</TableCell>
                            <TableCell className="text-right">
                              <div className="flex items-center justify-end gap-2">
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => openEditModal(schedule)}
                                  disabled={schedule.status === "ended"}
                                >
                                  <Edit className="h-4 w-4" />
                                  <span className="sr-only">Edit</span>
                                </Button>
                                {schedule.status === "active" && (
                                  <Button variant="ghost" size="icon" onClick={() => handleEndSchedule(schedule)}>
                                    <StopCircle className="h-4 w-4 text-amber-600" />
                                    <span className="sr-only">End</span>
                                  </Button>
                                )}
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => openDeleteDialog(schedule)}
                                  className="text-red-600 hover:text-red-700 hover:bg-red-50"
                                >
                                  <Trash2 className="h-4 w-4" />
                                  <span className="sr-only">Delete</span>
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))
                      )}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="financial">
            <Card className="border-0 shadow-sm">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-lg font-semibold text-slate-900">Financial Distribution Scheduling</CardTitle>
                    <CardDescription className="text-slate-600">
                      View and manage barangay-based financial aid distribution schedules
                    </CardDescription>
                  </div>
                  <Button onClick={() => setIsAddModalOpen(true)} className="bg-emerald-600 hover:bg-emerald-700">
                    <Plus className="mr-2 h-4 w-4" />
                    Add Schedule
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-slate-200 bg-white">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Barangays</TableHead>
                        <TableHead>Start Date</TableHead>
                        <TableHead>Start Time</TableHead>
                        <TableHead>End Date</TableHead>
                        <TableHead>Distribution Amount</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {financialSchedules.length === 0 ? (
                        <TableRow>
                          <TableCell colSpan={7} className="h-24 text-center">
                            <div className="flex flex-col items-center justify-center text-slate-500">
                              <DollarSign className="h-12 w-12 mb-2 text-slate-300" />
                              <p>No schedules found. Click "Add Schedule" to create one.</p>
                            </div>
                          </TableCell>
                        </TableRow>
                      ) : (
                        financialSchedules.map((schedule) => (
                          <TableRow key={schedule.id}>
                            <TableCell className="font-medium text-sm">
                              <div className="flex flex-wrap gap-1">
                                {schedule.barangays.map(b => (
                                  <Badge key={b} className="bg-blue-100 text-blue-800 hover:bg-blue-100">{b}</Badge>
                                ))}
                              </div>
                            </TableCell>
                            <TableCell>{formatDate(schedule.startDate)}</TableCell>
                            <TableCell className="font-mono text-sm">{formatTime(schedule.startTime)}</TableCell>
                            <TableCell>{formatDate(schedule.endDate)}</TableCell>
                            <TableCell className="font-semibold text-green-600">{formatCurrency(schedule.distributionAmount)}</TableCell>
                            <TableCell>{getStatusBadge(schedule.status)}</TableCell>
                            <TableCell className="text-right">
                              <div className="flex items-center justify-end gap-2">
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => openEditModal(schedule)}
                                  disabled={schedule.status === "ended"}
                                >
                                  <Edit className="h-4 w-4" />
                                  <span className="sr-only">Edit</span>
                                </Button>
                                {schedule.status === "active" && (
                                  <Button variant="ghost" size="icon" onClick={() => handleEndSchedule(schedule)}>
                                    <StopCircle className="h-4 w-4 text-amber-600" />
                                    <span className="sr-only">End</span>
                                  </Button>
                                )}
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => openDeleteDialog(schedule)}
                                  className="text-red-600 hover:text-red-700 hover:bg-red-50"
                                >
                                  <Trash2 className="h-4 w-4" />
                                  <span className="sr-only">Delete</span>
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        ))
                      )}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

{/* Add Schedule Modal */}
        <Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>
                {activeTab === "verification" ? "Add Verification Schedule" : "Add Financial Distribution Schedule"}
              </DialogTitle>
              <DialogDescription>
                {activeTab === "verification"
                  ? "Create a new document verification schedule for a barangay."
                  : "Create a new financial distribution schedule for barangays."}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              {activeTab === "verification" ? (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="barangay">Barangay Name *</Label>
                    <Select
                      value={formData.barangay}
                      onValueChange={(value) => setFormData({ ...formData, barangay: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select barangay" />
                      </SelectTrigger>
                      <SelectContent>
                        {BARANGAYS.map((barangay) => (
                          <SelectItem key={barangay} value={barangay}>
                            {barangay}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </>
              ) : (
                <div className="space-y-3">
                  <Label>Select Barangays *</Label>
                  <div className="border border-slate-200 rounded-lg p-4 bg-slate-50 space-y-3 max-h-64 overflow-y-auto">
                    <div className="grid grid-cols-2 gap-2">
                      {BARANGAYS.map((barangay) => (
                        <label key={barangay} className="flex items-center gap-2 cursor-pointer p-2 hover:bg-white rounded">
                          <input
                            type="checkbox"
                            checked={formData.barangays.includes(barangay)}
                            onChange={() => toggleBarangay(barangay)}
                            className="w-4 h-4"
                          />
                          <span className="text-sm">{barangay}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => selectBarangayRange(1, 10)}>
                      Select 1-10
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => selectBarangayRange(1, 12)}>
                      Select All
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => setFormData({ ...formData, barangays: [] })}>
                      Clear All
                    </Button>
                  </div>
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="startDate">Start Date *</Label>
                <Input
                  id="startDate"
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                />
              </div>
              {activeTab === "financial" && (
                <div className="space-y-2">
                  <Label htmlFor="startTime">Start Time (Optional)</Label>
                  <Input
                    id="startTime"
                    type="time"
                    value={formData.startTime}
                    onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
                  />
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="endDate">End Date *</Label>
                <Input
                  id="endDate"
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                />
              </div>
              {activeTab === "verification" && (
                <div className="space-y-2">
                  <Label htmlFor="dailyLimit">Daily Limit (Optional)</Label>
                  <Input
                    id="dailyLimit"
                    type="number"
                    placeholder="Enter daily verification limit"
                    value={formData.dailyLimit}
                    onChange={(e) => setFormData({ ...formData, dailyLimit: e.target.value })}
                  />
                </div>
              )}
              {activeTab === "financial" && (
                <div className="space-y-2">
                  <Label htmlFor="distributionAmount">Distribution Amount *</Label>
                  <Input
                    id="distributionAmount"
                    type="number"
                    placeholder="Enter distribution amount in PHP"
                    value={formData.distributionAmount}
                    onChange={(e) => setFormData({ ...formData, distributionAmount: e.target.value })}
                  />
                </div>
              )}
            </div>
            <div className="flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => {
                  setIsAddModalOpen(false)
                  resetForm()
                }}
              >
                Cancel
              </Button>
              <Button onClick={handleAddSchedule} className="bg-emerald-600 hover:bg-emerald-700">
                Create Schedule
              </Button>
            </div>
          </DialogContent>
        </Dialog>

{/* Edit Schedule Modal */}
        <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>
                {activeTab === "verification" ? "Edit Verification Schedule" : "Edit Financial Distribution Schedule"}
              </DialogTitle>
              <DialogDescription>Update the schedule details.</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              {activeTab === "verification" ? (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="edit-barangay">Barangay Name *</Label>
                    <Select
                      value={formData.barangay}
                      onValueChange={(value) => setFormData({ ...formData, barangay: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select barangay" />
                      </SelectTrigger>
                      <SelectContent>
                        {BARANGAYS.map((barangay) => (
                          <SelectItem key={barangay} value={barangay}>
                            {barangay}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </>
              ) : (
                <div className="space-y-3">
                  <Label>Select Barangays *</Label>
                  <div className="border border-slate-200 rounded-lg p-4 bg-slate-50 space-y-3 max-h-64 overflow-y-auto">
                    <div className="grid grid-cols-2 gap-2">
                      {BARANGAYS.map((barangay) => (
                        <label key={barangay} className="flex items-center gap-2 cursor-pointer p-2 hover:bg-white rounded">
                          <input
                            type="checkbox"
                            checked={formData.barangays.includes(barangay)}
                            onChange={() => toggleBarangay(barangay)}
                            className="w-4 h-4"
                          />
                          <span className="text-sm">{barangay}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => selectBarangayRange(1, 10)}>
                      Select 1-10
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => selectBarangayRange(1, 12)}>
                      Select All
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => setFormData({ ...formData, barangays: [] })}>
                      Clear All
                    </Button>
                  </div>
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="edit-startDate">Start Date *</Label>
                <Input
                  id="edit-startDate"
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                />
              </div>
              {activeTab === "financial" && (
                <div className="space-y-2">
                  <Label htmlFor="edit-startTime">Start Time (Optional)</Label>
                  <Input
                    id="edit-startTime"
                    type="time"
                    value={formData.startTime}
                    onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
                  />
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="edit-endDate">End Date *</Label>
                <Input
                  id="edit-endDate"
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                />
              </div>
              {activeTab === "verification" && (
                <div className="space-y-2">
                  <Label htmlFor="edit-dailyLimit">Daily Limit (Optional)</Label>
                  <Input
                    id="edit-dailyLimit"
                    type="number"
                    placeholder="Enter daily verification limit"
                    value={formData.dailyLimit}
                    onChange={(e) => setFormData({ ...formData, dailyLimit: e.target.value })}
                  />
                </div>
              )}
              {activeTab === "financial" && (
                <div className="space-y-2">
                  <Label htmlFor="edit-distributionAmount">Distribution Amount *</Label>
                  <Input
                    id="edit-distributionAmount"
                    type="number"
                    placeholder="Enter distribution amount in PHP"
                    value={formData.distributionAmount}
                    onChange={(e) => setFormData({ ...formData, distributionAmount: e.target.value })}
                  />
                </div>
              )}
            </div>
            <div className="flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => {
                  setIsEditModalOpen(false)
                  setSelectedSchedule(null)
                  resetForm()
                }}
              >
                Cancel
              </Button>
              <Button onClick={handleEditSchedule} className="bg-emerald-600 hover:bg-emerald-700">
                Update Schedule
              </Button>
            </div>
          </DialogContent>
        </Dialog>

{/* Delete Confirmation Dialog */}
        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Are you sure?</AlertDialogTitle>
              <AlertDialogDescription>
                This will permanently delete the schedule. This action cannot be undone.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel
                onClick={() => {
                  setIsDeleteDialogOpen(false)
                  setSelectedSchedule(null)
                }}
              >
                Cancel
              </AlertDialogCancel>
              <AlertDialogAction onClick={handleDeleteSchedule} className="bg-red-600 hover:bg-red-700">
                Delete
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </AdminLayout>
    </PermissionGuard>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/components/ui/use-toast"
import { AlertCircle, LogIn, Eye, EyeOff, GraduationCap, Shield, Users } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"

export default function LoginPage() {
  const { user, login } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [loginError, setLoginError] = useState("")
  const [showPassword, setShowPassword] = useState(false)

const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [errors, setErrors] = useState({
    email: "",
    password: "",
  })

useEffect(() => {
    setEmail("")
    setPassword("")
    setErrors({ email: "", password: "" })
    setLoginError("")
    setIsLoading(false)
  }, [])

// Redirect if already logged in
  useEffect(() => {
    if (user) {
      const dashboardPath = user.role === "admin" ? "/admin/dashboard" : "/student/dashboard"
      router.push(dashboardPath)
    }
  }, [user, router])

const validateForm = () => {
    const newErrors = { email: "", password: "" }

if (!email) {
      newErrors.email = "Email is required"
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = "Please enter a valid email address"
    }

if (!password) {
      newErrors.password = "Password is required"
    }

setErrors(newErrors)
    return !newErrors.email && !newErrors.password
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()

if (!validateForm()) {
      return
    }

setIsLoading(true)
    setLoginError("")

try {
      const loggedInUser = await login(email, password)

if (!loggedInUser) {
        setLoginError("Invalid email or password. Please try again.")
        return
      }

toast({
        title: "Login successful",
        description: `Welcome back, ${loggedInUser.name}!`,
      })

// Redirect based on user role
      const dashboardPath = loggedInUser.role === "admin" ? "/admin/dashboard" : "/student/dashboard"
      router.push(dashboardPath)
    } catch (error) {
      console.error("Login error:", error)
      setLoginError("An error occurred during login. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

// Don't render login form if user is already logged in
  if (user) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
      </div>
    )
  }

return (
    <div className="min-h-screen flex">
      {/* Left Side - Branding & Information */}
      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-green-600 via-emerald-600 to-green-700 relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-white rounded-full blur-3xl"></div>
        </div>

{/* Content */}
        <div className="relative z-10 flex flex-col justify-center px-16 text-white">
          <div className="mb-12">
            <div className="flex items-center gap-3 mb-8">
              <div className="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center">
                <GraduationCap className="w-8 h-8 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold">BTS Scholarship</h1>
                <p className="text-white/80 text-sm">Municipality of Carmona</p>
              </div>
            </div>

<h2 className="text-4xl font-bold mb-6 leading-tight">
              Empowering Students
              <br />
              Through Education
            </h2>
            <p className="text-white/90 text-lg leading-relaxed max-w-md">
              Access your scholarship portal to manage applications, track your status, and stay updated on financial
              aid distributions.
            </p>
          </div>

{/* Features */}
          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <Shield className="w-6 h-6" />
              </div>
              <div>
                <h3 className="font-semibold text-lg">Secure Access</h3>
                <p className="text-white/80 text-sm">Your data is protected with industry-standard security</p>
              </div>
            </div>

<div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <Users className="w-6 h-6" />
              </div>
              <div>
                <h3 className="font-semibold text-lg">Easy Management</h3>
                <p className="text-white/80 text-sm">Track applications and manage your scholarship journey</p>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Right Side - Login Form */}
      <div className="w-full lg:w-1/2 flex items-center justify-center bg-slate-50 p-8">
        <div className="w-full max-w-md">
          {/* Mobile Header */}
          <div className="lg:hidden text-center mb-10">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-600 to-emerald-600 rounded-2xl mb-4">
              <GraduationCap className="w-8 h-8 text-white" />
            </div>
            <h1 className="text-2xl font-bold text-slate-800">BTS Scholarship</h1>
            <p className="text-slate-600">Municipality of Carmona</p>
          </div>

{/* Login Form */}
          <div className="bg-white rounded-2xl shadow-xl p-8 border border-slate-200">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold text-slate-800 mb-2">Welcome Back</h2>
              <p className="text-slate-600">Sign in to access your account</p>
            </div>

{loginError && (
              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl" role="alert">
                <div className="flex items-center gap-2 text-red-700">
                  <AlertCircle className="h-4 w-4 flex-shrink-0" />
                  <span className="text-sm font-medium">{loginError}</span>
                </div>
              </div>
            )}

<form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="email" className="text-slate-700 font-medium">
                  Email Address
                </Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="name@example.com"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value)
                    if (errors.email) {
                      setErrors((prev) => ({ ...prev, email: "" }))
                    }
                  }}
                  className="h-12 border-slate-300 focus:border-green-500 focus:ring-green-500/20 bg-white rounded-xl"
                  disabled={isLoading}
                />
                {errors.email && <p className="text-sm text-red-600">{errors.email}</p>}
              </div>

<div className="space-y-2">
                <Label htmlFor="password" className="text-slate-700 font-medium">
                  Password
                </Label>
                <div className="relative">
                  <Input
                    id="password"
                    name="password"
                    type={showPassword ? "text" : "password"}
                    autoComplete="current-password"
                    placeholder="Enter your password"
                    value={password}
                    onChange={(e) => {
                      setPassword(e.target.value)
                      if (errors.password) {
                        setErrors((prev) => ({ ...prev, password: "" }))
                      }
                    }}
                    className="h-12 border-slate-300 focus:border-green-500 focus:ring-green-500/20 bg-white pr-12 rounded-xl"
                    disabled={isLoading}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword(!showPassword)}
                    disabled={isLoading}
                  >
                    {showPassword ? (
                      <EyeOff className="h-5 w-5 text-slate-400" />
                    ) : (
                      <Eye className="h-5 w-5 text-slate-400" />
                    )}
                  </Button>
                </div>
                {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
              </div>

<div className="flex items-center justify-end">
                <Link
                  href="/forgot-password"
                  className="text-sm text-green-600 hover:text-green-700 font-medium transition-colors"
                >
                  Forgot password?
                </Link>
              </div>

<Button
                type="submit"
                disabled={isLoading}
                className="w-full h-12 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold shadow-lg shadow-green-500/25 transition-all duration-300 rounded-xl"
              >
                {isLoading ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    Signing in...
                  </>
                ) : (
                  <>
                    <LogIn className="mr-2 h-5 w-5" />
                    Sign In
                  </>
                )}
              </Button>
            </form>

<div className="mt-8 pt-6 border-t border-slate-200">
              <p className="text-center text-slate-600">
                Don't have an account?{" "}
                <Link href="/register" className="text-green-600 hover:text-green-700 font-semibold transition-colors">
                  Create account
                </Link>
              </p>
            </div>
          </div>

{/* Back to Home Link */}
          <div className="mt-6 text-center">
            <Link href="/" className="text-slate-600 hover:text-slate-800 text-sm font-medium transition-colors">
              Back to Home
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-9d34INobTLaE4zHSizkDZCklF4m6Wg.png"
[V0_FILE]typescriptreact:file="components/admin-layout.tsx"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  LayoutDashboard,
  FileText,
  Users,
  QrCode,
  BarChart3,
  User,
  LogOut,
  Menu,
  X,
  ChevronDown,
  Bell,
  Search,
  Calendar,
  CheckCircle,
  Info,
  AlertCircle,
  Mail,
} from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import {
  getNotificationsByUserId,
  markNotificationAsRead,
  markAllNotificationsAsRead,
  hasPermission,
  getAdminRoleLabel,
  type Notification,
  type AdminRole,
} from "@/lib/storage"
import { Shield, UsersRound } from "lucide-react"

interface AdminLayoutProps {
  children: React.ReactNode
}

export function AdminLayout({ children }: AdminLayoutProps) {
  const router = useRouter()
  const pathname = usePathname()
  const { user, logout, isLoading } = useAuth()
  const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [hasCheckedAuth, setHasCheckedAuth] = useState(false)
  const [isNotificationOpen, setIsNotificationOpen] = useState(false)
  const [notifications, setNotifications] = useState<Notification[]>([])

useEffect(() => {
    if (!isLoading && !hasCheckedAuth) {
      setHasCheckedAuth(true)
      if (!user) {
        console.log("AdminLayout: No user found, redirecting to login")
        router.push("/login")
      } else if (user.role !== "admin") {
        console.log("AdminLayout: User is not an admin, redirecting to student dashboard")
        router.push("/student/dashboard")
      } else {
        console.log("AdminLayout: User is an admin, allowing access")
      }
    }
  }, [user, isLoading, hasCheckedAuth, router])

useEffect(() => {
    if (user && user.role === "admin") {
      const adminNotifications = getNotificationsByUserId(user.id)
      setNotifications(adminNotifications)
    }
  }, [user])

useEffect(() => {
    if (user && user.role === "admin") {
      const interval = setInterval(() => {
        const adminNotifications = getNotificationsByUserId(user.id)
        setNotifications(adminNotifications)
      }, 30000) // Refresh every 30 seconds

return () => clearInterval(interval)
    }
  }, [user])

if (isLoading || !hasCheckedAuth || !user || user.role !== "admin") {
    return (
      <div className="flex h-screen w-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600 mx-auto"></div>
          <p className="mt-4 text-slate-600 font-medium">Loading admin panel...</p>
        </div>
      </div>
    )
  }

const handleLogout = () => {
    setIsLogoutDialogOpen(false)
    logout()
  }

// All navigation items with their required permissions
  const allNavigationItems = [
    { href: "/admin/dashboard", icon: LayoutDashboard, label: "Dashboard", permission: "dashboard" },
    { href: "/admin/scholars", icon: Users, label: "Scholars", permission: "scholars" },
    { href: "/admin/applications", icon: FileText, label: "Applications", permission: "applications" },
    { href: "/admin/approved-emails", icon: Mail, label: "Approved Emails", permission: "approved-emails" },
    { href: "/admin/verification", icon: QrCode, label: "QR Verification", permission: "verification" },
    { href: "/admin/reports", icon: BarChart3, label: "Reports", permission: "reports" },
    { href: "/admin/scheduling", icon: Calendar, label: "Scheduling", permission: "scheduling" },
    { href: "/admin/staff-management", icon: UsersRound, label: "Staff Management", permission: "staff-management" },
  ]

// Filter navigation items based on user permissions
  const navigationItems = allNavigationItems.filter((item) => hasPermission(user, item.permission))

const adminRoleLabel = user?.adminRole ? getAdminRoleLabel(user.adminRole as AdminRole) : "Administrator"

const unreadCount = notifications.filter((n) => !n.isRead).length

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "warning":
        return <AlertCircle className="h-4 w-4 text-amber-500" />
      case "announcement":
        return <Calendar className="h-4 w-4 text-blue-500" />
      default:
        return <Info className="h-4 w-4 text-blue-500" />
    }
  }

const formatNotificationTime = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))

if (diffInHours < 1) {
      return "Just now"
    } else if (diffInHours < 24) {
      return `${diffInHours}h ago`
    } else {
      const diffInDays = Math.floor(diffInHours / 24)
      return `${diffInDays}d ago`
    }
  }

const handleNotificationClick = (notification: Notification) => {
    if (!notification.isRead) {
      markNotificationAsRead(notification.id)
      const updatedNotifications = getNotificationsByUserId(user!.id)
      setNotifications(updatedNotifications)
    }

if (notification.actionUrl) {
      router.push(notification.actionUrl)
    }
    setIsNotificationOpen(false)
  }

const handleMarkAllAsRead = () => {
    if (user) {
      markAllNotificationsAsRead(user.id)
      const updatedNotifications = getNotificationsByUserId(user.id)
      setNotifications(updatedNotifications)
    }
  }

const isActive = (path: string) => {
    return pathname === path
  }

return (
    <div className="flex min-h-screen flex-col bg-slate-50/50">
      {/* Enhanced Header */}
      <header className="sticky top-0 z-50 border-b border-slate-200/60 bg-white/80 backdrop-blur-xl shadow-sm">
        <div className="flex h-16 items-center justify-between px-6">
          <div className="flex items-center gap-4">
            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
              <SheetTrigger asChild className="lg:hidden">
                <Button variant="ghost" size="icon" className="hover:bg-slate-100">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-80 p-0">
                <div className="flex h-full flex-col bg-white">
                  {/* Mobile Header */}
                  <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
                    <div className="flex items-center gap-3">
                      <div className="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center shadow-inner">
                        <img
                          src="/images/image.png"
                          alt="City of Carmona Logo"
                          className="h-6 w-6 rounded-full object-cover"
                        />
                      </div>
                      <span className="text-lg font-bold text-slate-900">BTS Admin</span>
                    </div>
                    <Button variant="ghost" size="icon" onClick={() => setIsMobileMenuOpen(false)}>
                      <X className="h-5 w-5" />
                    </Button>
                  </div>

{/* Mobile Navigation */}
                  <div className="flex-1 overflow-auto py-6">
                    <div className="mb-6 px-6">
                      <div className="flex items-center gap-3 rounded-xl bg-slate-50 p-4">
                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
                          <User className="h-5 w-5 text-emerald-600" />
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-slate-900">{user.name}</p>
                          <p className="text-xs text-slate-500">{adminRoleLabel}</p>
                        </div>
                      </div>
                    </div>

<nav className="space-y-1 px-4">
                      <div className="mb-4">
                        <p className="mb-3 px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
                          Navigation
                        </p>
                        {navigationItems.map((item) => (
                          <Link
                            key={item.href}
                            href={item.href}
                            className={`group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all ${
                              isActive(item.href)
                                ? "bg-emerald-100 text-emerald-700"
                                : "text-slate-700 hover:bg-emerald-50 hover:text-emerald-700"
                            }`}
                            onClick={() => setIsMobileMenuOpen(false)}
                          >
                            <div
                              className={`flex h-6 w-6 items-center justify-center rounded-md transition-colors ${
                                isActive(item.href)
                                  ? "bg-emerald-200 text-emerald-700"
                                  : "bg-slate-100 group-hover:bg-emerald-100 group-hover:text-emerald-600"
                              }`}
                            >
                              <item.icon className="h-4 w-4" />
                            </div>
                            {item.label}
                          </Link>
                        ))}
                      </div>

<div>
                        <p className="mb-3 px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
                          Account
                        </p>
                        <button
                          onClick={() => setIsLogoutDialogOpen(true)}
                          className="group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 transition-all hover:bg-red-50"
                        >
                          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-slate-100 transition-colors group-hover:bg-red-100 group-hover:text-red-600">
                            <LogOut className="h-4 w-4" />
                          </div>
                          Logout
                        </button>
                      </div>
                    </nav>
                  </div>

{/* Mobile Logout */}
                  <div className="border-t border-slate-200 p-4">
                    <button
                      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 transition-all hover:bg-red-50"
                      onClick={() => {
                        setIsMobileMenuOpen(false)
                        setIsLogoutDialogOpen(true)
                      }}
                    >
                      <LogOut className="h-5 w-5" />
                      Logout
                    </button>
                  </div>
                </div>
              </SheetContent>
            </Sheet>

{/* Desktop Brand */}
            <div className="hidden lg:flex items-center gap-3">
              <div className="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center shadow-inner">
                <img src="/images/image.png" alt="City of Carmona Logo" className="h-6 w-6 rounded-full object-cover" />
              </div>
              <span className="text-lg font-bold text-slate-900">BTS Admin</span>
            </div>
          </div>

{/* Header Actions */}
          <div className="flex items-center gap-2">
            <div className="flex-1 flex justify-center max-w-md mx-8">
              <div className="relative w-full">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 z-10" />
                <Input
                  placeholder="Search anything..."
                  className="pl-10 w-full h-9 border-slate-200 focus:border-emerald-500 focus:ring-emerald-500 bg-white/50 backdrop-blur-sm"
                />
              </div>
            </div>

{/* Admin Notifications */}
            <DropdownMenu open={isNotificationOpen} onOpenChange={setIsNotificationOpen}>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="hover:bg-slate-100 relative">
                  <Bell className="h-5 w-5 text-slate-600" />
                  {unreadCount > 0 && (
                    <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-xs text-white flex items-center justify-center">
                      {unreadCount > 9 ? "9+" : unreadCount}
                    </span>
                  )}
                  <span className="sr-only">Notifications</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-80 max-h-96 overflow-y-auto">
                <DropdownMenuLabel className="flex items-center justify-between">
                  <span>Admin Notifications</span>
                  {unreadCount > 0 && (
                    <Button variant="ghost" size="sm" onClick={handleMarkAllAsRead} className="text-xs h-6 px-2">
                      Mark all read
                    </Button>
                  )}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />

{notifications.length === 0 ? (
                  <div className="p-4 text-center text-sm text-muted-foreground">No notifications yet</div>
                ) : (
                  notifications.map((notification) => (
                    <DropdownMenuItem
                      key={notification.id}
                      className={`p-3 cursor-pointer ${!notification.isRead ? "bg-blue-50" : ""}`}
                      onClick={() => handleNotificationClick(notification)}
                    >
                      <div className="flex gap-3 w-full">
                        <div className="flex-shrink-0 mt-1">{getNotificationIcon(notification.type)}</div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-start justify-between gap-2">
                            <p
                              className={`text-sm font-medium ${!notification.isRead ? "text-gray-900" : "text-gray-600"}`}
                            >
                              {notification.title}
                            </p>
                            <span className="text-xs text-muted-foreground flex-shrink-0">
                              {formatNotificationTime(notification.createdAt)}
                            </span>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{notification.message}</p>
                          {!notification.isRead && <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>}
                        </div>
                      </div>
                    </DropdownMenuItem>
                  ))
                )}
              </DropdownMenuContent>
            </DropdownMenu>

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="gap-2 hover:bg-slate-100">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100">
                    <User className="h-4 w-4 text-emerald-600" />
                  </div>
                  <span className="hidden sm:inline-block text-sm font-medium">{user.name}</span>
                  <ChevronDown className="h-4 w-4 text-slate-500" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => setIsLogoutDialogOpen(true)} className="text-red-600">
                  <LogOut className="mr-2 h-4 w-4" />
                  Logout
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

<div className="flex flex-1">
        {/* Enhanced Sidebar */}
        <aside className="hidden lg:flex w-64 flex-col border-r border-slate-200/60 bg-white">
          <div className="flex-1 overflow-auto py-6">
            {/* User Profile Card */}
            <div className="mx-4 mb-6">
              <div className="flex items-center gap-3 rounded-xl bg-gradient-to-r from-emerald-50 to-emerald-100/50 p-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
                  <User className="h-5 w-5 text-emerald-600" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-slate-900">{user.name}</p>
                  <p className="text-xs text-emerald-600">{adminRoleLabel}</p>
                </div>
              </div>
            </div>

{/* Navigation */}
            <nav className="space-y-1 px-4">
              <div className="mb-6">
                <p className="mb-3 px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
                  Main Navigation
                </p>
                <div className="space-y-1">
                  {navigationItems.map((item) => (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={`group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all ${
                        isActive(item.href)
                          ? "bg-emerald-100 text-emerald-700"
                          : "text-slate-700 hover:bg-emerald-50 hover:text-emerald-700"
                      }`}
                    >
                      <div
                        className={`flex h-6 w-6 items-center justify-center rounded-md transition-colors ${
                          isActive(item.href)
                            ? "bg-emerald-200 text-emerald-700"
                            : "bg-slate-100 group-hover:bg-emerald-100 group-hover:text-emerald-600"
                        }`}
                      >
                        <item.icon className="h-4 w-4" />
                      </div>
                      {item.label}
                    </Link>
                  ))}
                </div>
              </div>

<div>
                <p className="mb-3 px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Account</p>
                <button
                  onClick={() => setIsLogoutDialogOpen(true)}
                  className="group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-red-600 transition-all hover:bg-red-50"
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-slate-100 transition-colors group-hover:bg-red-100 group-hover:text-red-600">
                    <LogOut className="h-4 w-4" />
                  </div>
                  Logout
                </button>
              </div>
            </nav>
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 overflow-auto">
          <div className="p-6">{children}</div>
        </main>
      </div>

{/* Logout Dialog */}
      <AlertDialog open={isLogoutDialogOpen} onOpenChange={setIsLogoutDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure you want to logout?</AlertDialogTitle>
            <AlertDialogDescription>
              You will be logged out of your account and redirected to the login page.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleLogout} className="bg-emerald-600 hover:bg-emerald-700">
              Logout
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/student-layout.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { FileText, QrCode, Search, History, Settings, User } from "lucide-react"
import { Input } from "@/components/ui/input"

import { useState, useEffect } from "react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { LogOut, Menu, X, ChevronDown, Bell, Calendar, CheckCircle, Info, AlertCircle } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import {
  getNotificationsByUserId,
  markNotificationAsRead,
  markAllNotificationsAsRead,
  type Notification,
} from "@/lib/storage"

interface StudentLayoutProps {
  children: React.ReactNode
}

export function StudentLayout({ children }: StudentLayoutProps) {
  const router = useRouter()
  const pathname = usePathname()
  const { user, logout, isLoading } = useAuth()
  const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [hasCheckedAuth, setHasCheckedAuth] = useState(false)
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [isNotificationOpen, setIsNotificationOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    // Only check auth once loading is complete
    if (!isLoading && !hasCheckedAuth) {
      setHasCheckedAuth(true)

// Only redirect if not logged in or not a student
      if (!user) {
        console.log("StudentLayout: No user found, redirecting to login")
        router.push("/login")
      } else if (user.role !== "student") {
        console.log("StudentLayout: User is not a student, redirecting to admin dashboard")
        router.push("/admin/dashboard")
      } else {
        console.log("StudentLayout: User is a student, allowing access")
      }
    }
  }, [user, isLoading, hasCheckedAuth, router])

// Load notifications when user is available
  useEffect(() => {
    if (user && user.role === "student") {
      const userNotifications = getNotificationsByUserId(user.id)
      setNotifications(userNotifications)
    }
  }, [user])

// Don't render anything while checking auth
  if (isLoading || !hasCheckedAuth || !user || user.role !== "student") {
    return (
      <div className="flex h-screen w-screen items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

const isActive = (path: string) => {
    return pathname === path
  }

const unreadCount = notifications.filter((n) => !n.isRead).length

const handleNotificationClick = (notification: Notification) => {
    if (!notification.isRead) {
      markNotificationAsRead(notification.id)
      // Refresh notifications
      const updatedNotifications = getNotificationsByUserId(user.id)
      setNotifications(updatedNotifications)
    }

if (notification.actionUrl) {
      router.push(notification.actionUrl)
    }
    setIsNotificationOpen(false)
  }

const handleMarkAllAsRead = () => {
    markAllNotificationsAsRead(user.id)
    const updatedNotifications = getNotificationsByUserId(user.id)
    setNotifications(updatedNotifications)
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-40 border-b header-gradient text-primary-foreground shadow-md">
        <div className="container flex h-16 items-center justify-between py-4">
          <div className="flex items-center gap-2">
            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
              <SheetTrigger asChild className="lg:hidden">
                <Button
                  variant="ghost"
                  size="icon"
                  className="lg:hidden transition-transform hover:rotate-180 duration-300"
                >
                  <Menu className="h-6 w-6" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-[240px] sm:w-[300px]">
                <div className="flex h-full flex-col">
                  <div className="flex items-center justify-between border-b px-4 py-4">
                    <div className="flex items-center gap-2">
                      <img
                        src="/images/image.png"
                        alt="City of Carmona Logo"
                        className="h-8 w-8 rounded-full object-cover"
                      />
                      <span className="text-lg font-bold">BTS</span>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setIsMobileMenuOpen(false)}
                      className="transition-transform hover:rotate-90 duration-200"
                    >
                      <X className="h-5 w-5" />
                      <span className="sr-only">Close</span>
                    </Button>
                  </div>

<div className="flex-1 overflow-auto py-6">
                    <div className="mb-6 px-4">
                      <div className="flex items-center gap-2 rounded-md bg-white p-3 shadow-sm border border-gray-100">
                        <div className="h-8 w-8 rounded-full bg-green-100 p-1.5">
                          <User className="h-full w-full text-green-600" />
                        </div>
                        <div>
                          <p className="text-sm font-medium">{user.name}</p>
                          <p className="text-xs text-muted-foreground">Student</p>
                        </div>
                      </div>
                    </div>

<div className="space-y-1 px-4">
                      <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500">
                        Main Navigation
                      </p>
                      <div className="flex flex-col gap-1">
                        <Link
                          href="/student/dashboard"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/dashboard")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/dashboard")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <Calendar className="h-4 w-4" />
                          </div>
                          <span>Dashboard</span>
                        </Link>
                        <Link
                          href="/student/documents"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/documents")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/documents")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <FileText className="h-4 w-4" />
                          </div>
                          <span>Documents</span>
                        </Link>
                        <Link
                          href="/student/qrcode"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/qrcode")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/qrcode")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <QrCode className="h-4 w-4" />
                          </div>
                          <span>QR Code</span>
                        </Link>
                        <Link
                          href="/student/history"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/history")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/history")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <History className="h-4 w-4" />
                          </div>
                          <span>Application History</span>
                        </Link>
                      </div>
                    </div>

<div className="space-y-1 px-4">
                      <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Account</p>
                      <div className="flex flex-col gap-1">
                        <Link
                          href="/student/profile"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/profile")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/profile")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <User className="h-4 w-4" />
                          </div>
                          <span>Profile</span>
                        </Link>
                        <Link
                          href="/student/settings"
                          className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                            isActive("/student/settings")
                              ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                              : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                          }`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          <div
                            className={`flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200 ${
                              isActive("/student/settings")
                                ? "bg-white/20 text-white"
                                : "bg-gray-100 text-gray-500 group-hover:bg-green-100 group-hover:text-green-600"
                            }`}
                          >
                            <Settings className="h-4 w-4" />
                          </div>
                          <span>Settings</span>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
            <Link href="/student/dashboard" className="flex items-center gap-2 text-primary-foreground">
              <div className="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center shadow-inner">
                <img src="/images/image.png" alt="City of Carmona Logo" className="h-6 w-6 rounded-full object-cover" />
              </div>
              <span className="text-lg font-bold">BTS</span>
            </Link>
          </div>
          <div className="hidden lg:flex lg:items-center lg:gap-6">
            <nav className="flex items-center gap-4"></nav>
          </div>
          <div className="flex items-center gap-2">
            <div className="flex-1 flex justify-center max-w-sm mx-6">
              <div className="relative w-full">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/70 z-10" />
                <Input
                  placeholder="Search..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 w-full h-9 border-white/20 focus:border-white/40 focus:ring-white/20 bg-white/10 backdrop-blur-sm text-white placeholder:text-white/70"
                />
              </div>
            </div>

{/* Notifications Dropdown */}
            <DropdownMenu open={isNotificationOpen} onOpenChange={setIsNotificationOpen}>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="text-primary-foreground relative">
                  <Bell className="h-5 w-5" />
                  {unreadCount > 0 && (
                    <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-xs text-white flex items-center justify-center animate-pulse">
                      {unreadCount > 9 ? "9+" : unreadCount}
                    </span>
                  )}
                  <span className="sr-only">Notifications</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-80 max-h-96 overflow-y-auto">
                <DropdownMenuLabel className="flex items-center justify-between">
                  <span>Notifications</span>
                  {unreadCount > 0 && (
                    <Button variant="ghost" size="sm" onClick={handleMarkAllAsRead} className="text-xs h-6 px-2">
                      Mark all read
                    </Button>
                  )}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  className="gap-1 text-primary-foreground transition-all duration-200 hover:bg-primary-foreground/10"
                >
                  <span className="hidden sm:inline-block">{user.name}</span>
                  <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56 shadow-lg border border-gray-200 rounded-lg p-1">
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{user.name}</p>
                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                {/* Added Profile button */}
                <DropdownMenuItem
                  href="/student/profile"
                  className="cursor-pointer hover:bg-green-50 transition-colors duration-200"
                >
                  <User className="mr-2 h-4 w-4" />
                  Profile
                </DropdownMenuItem>
                {/* Added Settings button */}
                <DropdownMenuItem
                  href="/student/settings"
                  className="cursor-pointer hover:bg-green-50 transition-colors duration-200"
                >
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => setIsLogoutDialogOpen(true)}
                  className="cursor-pointer text-red-600 hover:bg-red-50 transition-colors duration-200"
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  Logout
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

{/* Sidebar and Main Content */}
      <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
        {/* Sidebar */}
        <aside className="fixed top-16 z-30 hidden h-[calc(100vh-4rem)] w-full shrink-0 overflow-y-auto border-r border-gray-200 bg-gray-50/50 md:sticky md:block">
          <div className="py-6 pr-6">
            <div className="mb-6 px-3">
              <div className="flex items-center gap-2 rounded-md bg-white p-3 shadow-sm">
                <div className="h-8 w-8 rounded-full bg-green-100 p-1.5">
                  <User className="h-full w-full text-green-600" />
                </div>
                <div>
                  <p className="text-sm font-medium">{user.name}</p>
                  <p className="text-xs text-muted-foreground">Student</p>
                </div>
              </div>
            </div>

<div className="space-y-1 px-3">
              <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Main Navigation</p>
              <nav className="flex flex-col gap-1">
                <Link
                  href="/student/dashboard"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/dashboard")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <Calendar className="h-4 w-4" />
                  </div>
                  <span>Dashboard</span>
                </Link>
                <Link
                  href="/student/documents"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/documents")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <FileText className="h-4 w-4" />
                  </div>
                  <span>Documents</span>
                </Link>
                <Link
                  href="/student/qrcode"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/qrcode")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <QrCode className="h-4 w-4" />
                  </div>
                  <span>QR Code</span>
                </Link>
                <Link
                  href="/student/history"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/history")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <History className="h-4 w-4" />
                  </div>
                  <span>Application History</span>
                </Link>
              </nav>
            </div>

{/* Added Account section with Profile and Settings links for sidebar */}
            <div className="mt-6 space-y-1 px-3">
              <p className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Account</p>
              <nav className="flex flex-col gap-1">
                <Link
                  href="/student/profile"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/profile")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <User className="h-4 w-4" />
                  </div>
                  <span>Profile</span>
                </Link>
                <Link
                  href="/student/settings"
                  className={`group flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 ${
                    isActive("/student/settings")
                      ? "bg-gradient-to-r from-green-500 to-green-600 text-white shadow-md"
                      : "hover:bg-white hover:text-green-600 hover:shadow-sm"
                  }`}
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md transition-all duration-200">
                    <Settings className="h-4 w-4" />
                  </div>
                  <span>Settings</span>
                </Link>
                <button
                  onClick={() => setIsLogoutDialogOpen(true)}
                  className="group flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 hover:bg-white hover:text-red-600 hover:shadow-sm"
                >
                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-gray-500 transition-all duration-200 group-hover:bg-red-100 group-hover:text-red-600">
                    <LogOut className="h-4 w-4" />
                  </div>
                  <span>Logout</span>
                </button>
              </nav>
            </div>
          </div>
        </aside>

{/* Main Content */}
        <main className="w-full py-6 bg-dots">{children}</main>
      </div>

{/* Logout Confirmation Dialog */}
      <AlertDialog open={isLogoutDialogOpen} onOpenChange={setIsLogoutDialogOpen}>
        <AlertDialogContent className="border-2 border-gray-200 shadow-xl rounded-xl overflow-hidden">
          <div className="h-1 bg-gradient-to-r from-red-400 to-red-600 w-full"></div>
          <AlertDialogHeader className="pt-6">
            <AlertDialogTitle className="text-xl">Are you sure you want to logout?</AlertDialogTitle>
            <AlertDialogDescription>
              You will be logged out of your account and redirected to the login page.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className="gap-2">
            <AlertDialogCancel className="shadow-sm hover:shadow transition-all duration-200">Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                logout()
                setIsLogoutDialogOpen(false)
              }}
              className="relative bg-gradient-to-b from-red-500 to-red-600 text-white font-medium py-2 px-4 rounded-md shadow-md transform transition-all duration-200 active:translate-y-0.5 active:shadow-sm hover:-translate-y-0.5 hover:shadow-lg border-b-2 border-red-700"
            >
              Logout
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/qr-code.tsx"
"use client"

import { useEffect, useState } from "react"
import { useAuth } from "@/contexts/auth-context"

interface QRCodeProps {
  size?: number
}

export function QRCode({ size = 512 }: QRCodeProps) {
  const { user } = useAuth()
  const [qrCodeUrl, setQrCodeUrl] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState("")

useEffect(() => {
    const generateQRCode = async () => {
      try {
        setIsLoading(true)
        setError("")

if (!user) {
          setError("User not found")
          setIsLoading(false)
          return
        }

// Get the profile data with fallbacks
        const profileData = user.studentProfile || user.profileData || {}
        const studentId = profileData.studentId || user.id

// Create VERY simple QR data - just the student ID prefixed with BTS:
        // This creates a much cleaner QR code that's easy to scan
        const qrValue = `BTS:${studentId}`
        
        console.log("[v0] QR Code generating with value:", qrValue)

// Create QR code with simple data - much cleaner and easier to scan
        const encodedValue = encodeURIComponent(qrValue)
        // Use lower error correction (M) for cleaner QR code with less density
        const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodedValue}&ecc=M&margin=4`

setQrCodeUrl(qrUrl)
        setIsLoading(false)
      } catch (err) {
        console.error("QR Code generation error:", err)
        setError("Failed to generate QR code")
        setIsLoading(false)
      }
    }

generateQRCode()
  }, [user, size])

if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center p-8 bg-white rounded-lg border">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mb-4"></div>
        <p className="text-sm text-gray-500">Generating QR code...</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="flex flex-col items-center justify-center p-8 bg-white rounded-lg border">
        <div className="text-red-500 mb-4">
          <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
            />
          </svg>
        </div>
        <p className="text-sm text-red-600 text-center">{error}</p>
        <button
          onClick={() => window.location.reload()}
          className="mt-2 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm"
        >
          Retry
        </button>
      </div>
    )
  }

return (
    <div className="flex flex-col items-center justify-center p-6 bg-white rounded-lg border shadow-sm">
      <div className="bg-white p-4 rounded-lg">
        <img
          src={qrCodeUrl || "/placeholder.svg"}
          alt="Student QR Code"
          width={size}
          height={size}
          className="border-4 border-gray-200 rounded-lg"
          onError={(e) => {
            console.error("QR Code image failed to load")
            setError("Failed to load QR code image")
          }}
        />
      </div>
      {/* BTS branding below QR code */}
      <div className="mt-2 bg-green-600 rounded-full px-4 py-1">
        <span className="text-white font-bold text-sm">BTS Scholar</span>
      </div>
      <p className="mt-4 text-sm text-gray-600 text-center font-medium">Scan this QR code for verification</p>
      <p className="text-xs text-gray-400 text-center mt-1">BTS Scholarship System</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student/qrcode/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { StudentLayout } from "@/components/student-layout"
import { QRCode } from "@/components/qr-code"
import { useToast } from "@/components/ui/use-toast"
import { Download, Share2, Smartphone, Shield, Info, AlertCircle, History } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import Link from "next/link"

export default function QRCodePage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("view")
  const { user } = useAuth()
  const [studentData, setStudentData] = useState({
    id: "",
    name: "",
    course: "",
    yearLevel: "",
    school: "",
  })

useEffect(() => {
    if (user) {
      // Extract student data from user profile with better fallbacks
      const profileData = user.profileData || {}
      setStudentData({
        id: profileData.studentId || user.id || "2022-12345",
        name: profileData.fullName || user.name || "Juan Miguel Dela Cruz",
        course: profileData.course || "Bachelor of Science in Computer Science",
        yearLevel: profileData.yearLevel || "2nd Year",
        school: profileData.schoolName || "University of the Philippines Diliman",
      })
    }
  }, [user])

const handleDownloadQRCode = async () => {
    try {
      const profileData = user?.studentProfile || user?.profileData || {}
      const studentId = profileData.studentId || user?.id

const qrData = {
        type: "BTS_SCHOLARSHIP",
        id: studentId,
        v: "1.0",
      }

const qrValue = JSON.stringify(qrData)
      const encodedValue = encodeURIComponent(qrValue)
      // Increased size to 1200x1200 with larger margin for better print quality
      const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=1200x1200&data=${encodedValue}&ecc=H&margin=10&qzone=2`

// Create a temporary link to download the QR code
      const link = document.createElement("a")
      link.href = qrUrl
      link.download = `bts-scholarship-qrcode-${studentData.id}.png`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

toast({
        title: "QR Code downloaded",
        description: "Your secure QR code has been downloaded successfully.",
      })
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Download failed",
        description: "Could not download QR code. Please try again.",
      })
    }
  }

const handleShareQRCode = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: "My BTS Scholarship QR Code",
          text: `Scholarship QR Code for ${studentData.name}`,
          url: window.location.href,
        })

toast({
          title: "QR Code shared",
          description: "Your QR code has been shared successfully.",
        })
      } else {
        // Fallback: copy URL to clipboard
        await navigator.clipboard.writeText(window.location.href)
        toast({
          title: "Link copied",
          description: "QR code page link copied to clipboard.",
        })
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Share failed",
        description: "Failed to share QR code. Please try again.",
      })
    }
  }

return (
    <StudentLayout>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">QR Code</h1>
          <p className="text-muted-foreground">View and manage your scholarship verification QR code</p>
        </div>
      </div>

<Tabs defaultValue="view" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="view">View QR Code</TabsTrigger>
          <TabsTrigger value="usage">How to Use</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
        </TabsList>

<TabsContent value="view" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Your Scholarship QR Code</CardTitle>
              <CardDescription>
                Use this QR code for scholarship verification and financial aid collection
              </CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col items-center justify-center">
              <div>
                <QRCode size={400} />
              </div>
              <div className="mt-6 text-center space-y-1">
                <p className="font-semibold text-lg">{studentData.name}</p>
                <p className="text-sm text-muted-foreground">Student ID: {studentData.id}</p>
                <p className="text-sm text-muted-foreground font-medium">{studentData.course}</p>
                <p className="text-sm text-muted-foreground">
                  {studentData.yearLevel}, {studentData.school}
                </p>
              </div>
            </CardContent>
            <CardFooter className="flex justify-center gap-4">
              <Button onClick={handleDownloadQRCode} className="bg-green-600 hover:bg-green-700 text-white">
                <Download className="mr-2 h-4 w-4" />
                Download QR Code
              </Button>
              <Button
                variant="outline"
                onClick={handleShareQRCode}
                className="border-green-600 text-green-600 hover:bg-green-50 bg-transparent"
              >
                <Share2 className="mr-2 h-4 w-4" />
                Share QR Code
              </Button>
            </CardFooter>
          </Card>

<Alert>
            <Info className="h-4 w-4" />
            <AlertTitle>Important</AlertTitle>
            <AlertDescription>
              Present this QR code to the scholarship office when collecting your financial aid. Make sure to bring a
              valid ID for verification.
            </AlertDescription>
          </Alert>
        </TabsContent>

<TabsContent value="usage" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>How to Use Your QR Code</CardTitle>
              <CardDescription>
                Learn how to use your QR code for scholarship verification and financial aid collection
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <h3 className="text-lg font-medium flex items-center">
                  <Smartphone className="mr-2 h-5 w-5" />
                  Digital Verification
                </h3>
                <p className="text-sm text-muted-foreground">
                  Your QR code contains encrypted information about your scholarship status. When scanned by authorized
                  personnel, it verifies your identity and eligibility for financial aid.
                </p>
                <ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground pl-5">
                  <li>Save the QR code to your phone or print it out</li>
                  <li>Present the QR code to the scholarship office staff</li>
                  <li>They will scan your code using the official verification app</li>
                  <li>Once verified, you can proceed with financial aid collection</li>
                </ol>
              </div>

<div className="space-y-2">
                <h3 className="text-lg font-medium flex items-center">
                  <Shield className="mr-2 h-5 w-5" />
                  Identity Verification
                </h3>
                <p className="text-sm text-muted-foreground">
                  For security purposes, you will still need to present a valid ID along with your QR code. This ensures
                  that only you can access your scholarship benefits.
                </p>
                <div className="bg-muted p-4 rounded-md text-sm">
                  <p className="font-medium">Acceptable IDs:</p>
                  <ul className="list-disc list-inside space-y-1 text-muted-foreground pl-5">
                    <li>School ID</li>
                    <li>Government-issued ID (e.g., National ID, Driver's License)</li>
                    <li>Passport</li>
                    <li>Voter's ID</li>
                  </ul>
                </div>
              </div>

<div className="space-y-2">
                <h3 className="text-lg font-medium flex items-center">
                  <Info className="mr-2 h-5 w-5" />
                  When to Use Your QR Code
                </h3>
                <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground pl-5">
                  <li>During financial aid disbursement events</li>
                  <li>When claiming your scholarship check or allowance</li>
                  <li>For verification during scholarship-related activities</li>
                  <li>When accessing special scholarship privileges or services</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="security" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>QR Code Security</CardTitle>
              <CardDescription>Important information about keeping your QR code secure</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertTitle>Security Warning</AlertTitle>
                <AlertDescription>
                  Never share your QR code with unauthorized individuals. Your QR code is linked to your scholarship
                  account and could be misused if it falls into the wrong hands.
                </AlertDescription>
              </Alert>

<div className="space-y-2">
                <h3 className="text-lg font-medium">Security Features</h3>
                <p className="text-sm text-muted-foreground">
                  Your QR code includes several security features to prevent unauthorized use:
                </p>
                <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground pl-5">
                  <li>Encrypted student information</li>
                  <li>Timestamp to prevent replay attacks</li>
                  <li>Can only be verified by official scholarship verification app</li>
                  <li>Requires additional ID verification</li>
                </ul>
              </div>

<div className="space-y-2">
                <h3 className="text-lg font-medium">Best Practices</h3>
                <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground pl-5">
                  <li>Do not post your QR code on social media or public platforms</li>
                  <li>Only present your QR code to authorized scholarship personnel</li>
                  <li>Report immediately if you suspect your QR code has been compromised</li>
                  <li>Keep your student account credentials secure</li>
                  <li>Regularly check your scholarship account for any unauthorized activities</li>
                </ul>
              </div>

<div className="bg-muted p-4 rounded-md">
                <p className="font-medium">Lost or Compromised QR Code?</p>
                <p className="text-sm text-muted-foreground mt-1">
                  If you believe your QR code has been compromised or if you've lost access to it, please contact the
                  scholarship office immediately to have your QR code reset.
                </p>
                <Button
                  variant="outline"
                  className="mt-2 bg-transparent"
                  onClick={() => {
                    toast({
                      title: "Request submitted",
                      description:
                        "Your request to reset your QR code has been submitted. Please check your email for further instructions.",
                    })
                  }}
                >
                  Request QR Code Reset
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

<div className="mt-8 pt-6 border-t border-gray-200">
        <Card className="bg-gradient-to-r from-green-50 to-white border-green-100">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-green-500 to-green-600">
                  <History className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">Application History</h3>
                  <p className="text-sm text-gray-600">View your completed scholarship applications and outcomes</p>
                </div>
              </div>
              <Link href="/student/history">
                <Button className="bg-green-600 hover:bg-green-700 text-white">View History</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </StudentLayout>
  )
}
[V0_FILE]typescriptreact:file="components/qr-scanner.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { Html5Qrcode } from "html5-qrcode"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Maximize, Minimize } from "lucide-react"

interface QrScannerProps {
  onResult: (result: string) => void
}

export function QrScanner({ onResult }: QrScannerProps) {
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const scannerRef = useRef<Html5Qrcode | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const scannerContainerRef = useRef<HTMLDivElement | null>(null)

const initializeScanner = async () => {
    if (!containerRef.current) return

const qrScannerId = "qr-scanner"
    setError(null)
    setIsLoading(true)

try {
      if (scannerContainerRef.current && containerRef.current?.contains(scannerContainerRef.current)) {
        containerRef.current.removeChild(scannerContainerRef.current)
        scannerContainerRef.current = null
      }

const scannerContainer = document.createElement("div")
      scannerContainer.id = qrScannerId
      scannerContainerRef.current = scannerContainer
      containerRef.current.appendChild(scannerContainer)

scannerRef.current = new Html5Qrcode(qrScannerId)

const config = {
        fps: 30,
        qrbox: (viewfinderWidth: number, viewfinderHeight: number) => {
          const minEdgePercentage = isFullscreen ? 0.5 : 0.7
          const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)
          const calculatedSize = Math.floor(minEdgeSize * minEdgePercentage)
          const qrboxSize = Math.max(calculatedSize, 50)
          return {
            width: qrboxSize,
            height: qrboxSize,
          }
        },
        aspectRatio: 1.0,
        disableFlip: false,
        rememberLastUsedCamera: true,
        supportedScanTypes: [Html5Qrcode.SCAN_TYPE_CAMERA],
        experimentalFeatures: {
          useBarCodeDetectorIfSupported: true,
        },
        videoConstraints: {
          facingMode: "environment",
          width: isFullscreen ? { ideal: 1920 } : { ideal: 1280 },
          height: isFullscreen ? { ideal: 1080 } : { ideal: 720 },
          advanced: [{ focusMode: "continuous" }, { exposureMode: "continuous" }, { whiteBalanceMode: "continuous" }],
        },
      }

const cameraConfigs = [
        {
          facingMode: "environment",
          width: { ideal: isFullscreen ? 1920 : 1280 },
          height: { ideal: isFullscreen ? 1080 : 720 },
          advanced: [{ focusMode: "continuous" }, { exposureMode: "continuous" }],
        },
        { facingMode: "environment" },
        { facingMode: "user" },
        { facingMode: { ideal: "environment" } },
        {},
      ]

let scannerStarted = false

for (const cameraConfig of cameraConfigs) {
        if (scannerStarted) break

try {
          await scannerRef.current.start(
            cameraConfig,
            config,
            (decodedText) => {
              console.log("[v0] QR Scanner SUCCESS - Decoded:", decodedText)
              onResult(decodedText)
            },
            (errorMessage) => {
              // Only log non-routine errors
              if (
                !errorMessage.includes("No QR code found") &&
                !errorMessage.includes("QR code parse error") &&
                !errorMessage.includes("Unable to detect QR code") &&
                !errorMessage.includes("NotFoundException")
              ) {
                console.log("[v0] QR Scanner error:", errorMessage)
              }
            },
          )
          scannerStarted = true
          setIsLoading(false)
        } catch (cameraError) {
          console.log("[v0] Camera config failed:", cameraConfig, cameraError)
        }
      }

if (!scannerStarted) {
        throw new Error("Unable to access camera with any configuration")
      }
    } catch (err) {
      console.error("[v0] Scanner initialization failed:", err)
      let errorMessage = "Camera access failed. "
      if (err instanceof Error) {
        if (err.message.includes("NotReadableError")) {
          errorMessage += "Camera may be in use by another app. Please close other camera apps and try again."
        } else if (err.message.includes("NotAllowedError")) {
          errorMessage += "Camera permission denied. Please allow camera access and refresh the page."
        } else if (err.message.includes("NotFoundError")) {
          errorMessage += "No camera found. Please ensure your device has a working camera."
        } else {
          errorMessage += err.message
        }
      }
      setError(errorMessage)
      setIsLoading(false)
    }
  }

const toggleFullscreen = () => {
    setIsFullscreen(!isFullscreen)
  }

useEffect(() => {
    if (scannerRef.current) {
      initializeScanner()
    }
  }, [isFullscreen])

useEffect(() => {
    initializeScanner()

return () => {
      const cleanup = async () => {
        try {
          if (scannerRef.current && scannerRef.current.isScanning) {
            await scannerRef.current.stop()
          }
        } catch (err) {
          console.log("[v0] Error stopping scanner:", err)
        } finally {
          if (scannerContainerRef.current && containerRef.current?.contains(scannerContainerRef.current)) {
            try {
              containerRef.current.removeChild(scannerContainerRef.current)
            } catch (removeErr) {
              console.log("[v0] Element already removed or not found:", removeErr)
            }
          }
          scannerContainerRef.current = null
          scannerRef.current = null
        }
      }

cleanup()
    }
  }, [onResult])

if (isFullscreen) {
    return (
      <div className="fixed inset-0 z-50 bg-black flex flex-col">
        <div className="flex justify-between items-center p-4 bg-black/80 text-white">
          <h3 className="text-lg font-semibold">QR Code Scanner</h3>
          <Button variant="ghost" size="sm" onClick={toggleFullscreen} className="text-white hover:bg-white/20">
            <Minimize className="h-4 w-4" />
          </Button>
        </div>
        <div ref={containerRef} className="flex-1 relative bg-black">
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white z-10">
              <div className="text-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
                <p>Initializing camera...</p>
              </div>
            </div>
          )}
          {error && (
            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white p-4 text-center z-10">
              <p className="mb-4">{error}</p>
              <Button variant="outline" size="sm" onClick={initializeScanner}>
                Retry Camera Access
              </Button>
            </div>
          )}
        </div>
        <div className="p-4 bg-black/80 text-center text-white">
          <p className="text-sm mb-1">Hold QR code steady within the scanning area</p>
          <p className="text-xs text-gray-300">Ensure good lighting and keep the code flat for faster detection</p>
        </div>
      </div>
    )
  }

return (
    <Card className="overflow-hidden">
      <div className="flex justify-between items-center p-3 border-b">
        <h3 className="text-sm font-medium">QR Scanner</h3>
        <Button variant="ghost" size="sm" onClick={toggleFullscreen} className="h-8 w-8 p-0">
          <Maximize className="h-4 w-4" />
        </Button>
      </div>
      <div ref={containerRef} className="relative w-full h-[500px] bg-gray-100">
        {isLoading && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white">
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
              <p>Initializing camera...</p>
            </div>
          </div>
        )}
        {error && (
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white p-4 text-center">
            <p className="mb-4">{error}</p>
            <Button variant="outline" size="sm" onClick={initializeScanner}>
              Retry Camera Access
            </Button>
          </div>
        )}
      </div>
      <div className="p-3 text-center">
        <p className="text-sm text-muted-foreground mb-1">Hold QR code steady within the scanning area</p>
        <p className="text-xs text-muted-foreground">
          Ensure good lighting and keep the code flat for faster detection
        </p>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/student/documents/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { StudentLayout } from "@/components/student-layout"
import { DocumentUpload } from "@/components/document-upload"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { FileText, CheckCircle, AlertCircle, Clock, Download, Eye, FolderOpen } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { getDocumentsByStudentId, type Document } from "@/lib/storage"

export default function DocumentsPage() {
  const { toast } = useToast()
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState("upload")
  const [documentHistory, setDocumentHistory] = useState<Document[]>([])

// Load documents from storage
  useEffect(() => {
    if (user) {
      const docs = getDocumentsByStudentId(user.id)
      setDocumentHistory(docs)
    }
  }, [user, activeTab])

// Refresh documents when switching to history tab
  const handleTabChange = (value: string) => {
    setActiveTab(value)
    if (value === "history" && user) {
      const docs = getDocumentsByStudentId(user.id)
      setDocumentHistory(docs)
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    }).format(date)
  }

const handleViewDocument = (documentId: string) => {
    toast({
      title: "Viewing document",
      description: `Opening document ${documentId} in a new tab.`,
    })
    // In a real application, this would open the document in a new tab
  }

const handleDownloadDocument = (documentId: string) => {
    toast({
      title: "Downloading document",
      description: `Document ${documentId} is being downloaded.`,
    })
    // In a real application, this would trigger a download
  }

return (
    <StudentLayout>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Documents</h1>
          <p className="text-muted-foreground">Upload and manage your scholarship documents</p>
        </div>
      </div>

<Tabs defaultValue="upload" className="space-y-4" onValueChange={handleTabChange}>
        <TabsList>
          <TabsTrigger value="upload">Upload Documents</TabsTrigger>
          <TabsTrigger value="history">Document History</TabsTrigger>
          <TabsTrigger value="requirements">Requirements</TabsTrigger>
        </TabsList>

<TabsContent value="upload" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Upload Required Documents</CardTitle>
              <CardDescription>Upload all required documents for your scholarship application</CardDescription>
            </CardHeader>
            <CardContent>
              <DocumentUpload />
              <div className="flex justify-end mt-6">
                <Button className="bg-green-600 hover:bg-green-700 text-white">Submit All Documents</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Document History</CardTitle>
              <CardDescription>View the status and history of your uploaded documents</CardDescription>
            </CardHeader>
            <CardContent>
              {documentHistory.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-12 text-center">
                  <div className="rounded-full bg-muted p-4 mb-4">
                    <FolderOpen className="h-8 w-8 text-muted-foreground" />
                  </div>
                  <h3 className="text-lg font-medium mb-1">No documents uploaded yet</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    Upload your required documents in the Upload tab to see them here
                  </p>
                  <Button variant="outline" onClick={() => setActiveTab("upload")}>
                    Go to Upload
                  </Button>
                </div>
              ) : (
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Document</TableHead>
                        <TableHead>Semester</TableHead>
                        <TableHead>Uploaded</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {documentHistory.map((doc) => (
                        <TableRow key={doc.id}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <FileText className="h-5 w-5 text-muted-foreground" />
                              <div>
                                <p className="font-medium">{doc.name}</p>
                                <p className="text-xs text-muted-foreground">{doc.fileSize}</p>
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <p>{doc.semester}</p>
                            <p className="text-xs text-muted-foreground">{doc.academicYear}</p>
                          </TableCell>
                          <TableCell>{formatDate(doc.uploadedAt)}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {doc.status === "approved" && (
                                <Badge variant="success" className="flex items-center gap-1 bg-green-100 text-green-800">
                                  <CheckCircle className="h-3 w-3" />
                                  Approved
                                </Badge>
                              )}
                              {doc.status === "rejected" && (
                                <Badge variant="destructive" className="flex items-center gap-1">
                                  <AlertCircle className="h-3 w-3" />
                                  Rejected
                                </Badge>
                              )}
                              {doc.status === "pending" && (
                                <Badge variant="outline" className="flex items-center gap-1">
                                  <Clock className="h-3 w-3" />
                                  Pending
                                </Badge>
                              )}
                            </div>
                            {doc.status === "rejected" && doc.feedback && (
                              <p className="text-xs text-red-500 mt-1">{doc.feedback}</p>
                            )}
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Button variant="ghost" size="icon" onClick={() => handleViewDocument(doc.id)}>
                                <Eye className="h-4 w-4" />
                                <span className="sr-only">View</span>
                              </Button>
                              <Button variant="ghost" size="icon" onClick={() => handleDownloadDocument(doc.id)}>
                                <Download className="h-4 w-4" />
                                <span className="sr-only">Download</span>
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="requirements" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Document Requirements</CardTitle>
              <CardDescription>List of required documents for scholarship application</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">General Requirements</h3>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Enrollment Form (PDF format)</li>
                    <li>Official Receipt (if applicable, PDF format)</li>
                    <li>Last Semester's Grades (PDF format)</li>
                    <li>School ID or Government ID (JPG or PNG format)</li>
                    <li>2x2 ID Picture (JPG or PNG format)</li>
                  </ul>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Barangay Requirements</h3>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Barangay Clearance (PDF format)</li>
                    <li>Indigency Certificate (PDF format)</li>
                    <li>Letter of Request from Parent/Guardian (PDF format)</li>
                  </ul>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">File Requirements</h3>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Maximum file size: 5MB per document</li>
                    <li>Accepted formats: PDF, JPG, PNG</li>
                    <li>Documents must be clear and legible</li>
                    <li>All pages must be included in a single file</li>
                  </ul>
                </div>

<div className="rounded-md bg-amber-50 p-4 text-amber-800 border border-amber-200">
                  <h4 className="font-medium">Important Notes:</h4>
                  <ul className="list-disc pl-5 mt-2 space-y-1 text-sm">
                    <li>All documents must be submitted before the deadline to be considered for the scholarship.</li>
                    <li>Incomplete or illegible documents may result in rejection of your application.</li>
                    <li>
                      If any document is rejected, you will receive feedback and can resubmit the corrected document.
                    </li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </StudentLayout>
  )
}
[V0_FILE]typescript:file="app/api/upload/delete/route.ts"
import { del } from '@vercel/blob'
import { type NextRequest, NextResponse } from 'next/server'

export async function DELETE(request: NextRequest) {
  try {
    const { url } = await request.json()

if (!url) {
      return NextResponse.json({ error: 'No URL provided' }, { status: 400 })
    }

// Delete from Vercel Blob
    await del(url)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error('Delete error:', error)
    return NextResponse.json({ error: 'Delete failed' }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/upload/route.ts"
import { put } from '@vercel/blob'
import { type NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    const file = formData.get('file') as File
    const folder = formData.get('folder') as string || 'documents'
    const userId = formData.get('userId') as string

if (!file) {
      return NextResponse.json({ error: 'No file provided' }, { status: 400 })
    }

// Validate file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      return NextResponse.json({ error: 'File size exceeds 5MB limit' }, { status: 400 })
    }

// Create a unique filename with timestamp and user context
    const timestamp = Date.now()
    const sanitizedName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_')
    const pathname = `${folder}/${userId || 'anonymous'}/${timestamp}-${sanitizedName}`

// Upload to Vercel Blob
    const blob = await put(pathname, file, {
      access: 'public',
    })

return NextResponse.json({
      success: true,
      url: blob.url,
      pathname: blob.pathname,
      filename: file.name,
      size: file.size,
      type: file.type,
    })
  } catch (error) {
    console.error('Upload error:', error)
    return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/auth/reset-password/route.ts"
import { type NextRequest, NextResponse } from 'next/server'
import { getUserByEmail, updateUser } from '@/lib/storage'

// In-memory storage for reset tokens (will be replaced with database)
const resetTokens = new Map<string, { email: string; expires: number }>()

function generateToken(): string {
  return Math.random().toString(36).substring(2) + Date.now().toString(36)
}

// Request password reset
export async function POST(request: NextRequest) {
  try {
    const { email, action, token, newPassword } = await request.json()

if (action === 'request') {
      // Request password reset
      if (!email) {
        return NextResponse.json({ error: 'Email is required' }, { status: 400 })
      }

const user = getUserByEmail(email)
      if (!user) {
        // Don't reveal if email exists or not for security
        return NextResponse.json({ 
          success: true, 
          message: 'If an account with that email exists, a reset link has been sent.' 
        })
      }

// Generate reset token
      const resetToken = generateToken()
      const expires = Date.now() + 60 * 60 * 1000 // 1 hour

resetTokens.set(resetToken, { email, expires })

// Get the base URL
      const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
      const resetUrl = `${baseUrl}/reset-password?token=${resetToken}`

// Send email
      try {
        await fetch(`${baseUrl}/api/email`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            to: email,
            template: 'password_reset',
            data: { resetUrl },
          }),
        })
      } catch (emailError) {
        console.error('Failed to send reset email:', emailError)
      }

// Log reset URL to console for testing
      console.log('\n========================================')
      console.log('PASSWORD RESET LINK (Console Mode)')
      console.log('========================================')
      console.log('Email:', email)
      console.log('Reset URL:', resetUrl)
      console.log('Token:', resetToken)
      console.log('Expires:', new Date(expires).toLocaleString())
      console.log('========================================\n')

return NextResponse.json({ 
        success: true, 
        message: 'If an account with that email exists, a reset link has been sent.',
        // For development testing - shows in browser console
        devResetUrl: resetUrl,
      })
    } 
    
    if (action === 'reset') {
      // Reset password with token
      if (!token || !newPassword) {
        return NextResponse.json({ error: 'Token and new password are required' }, { status: 400 })
      }

const tokenData = resetTokens.get(token)
      if (!tokenData) {
        return NextResponse.json({ error: 'Invalid or expired reset token' }, { status: 400 })
      }

if (Date.now() > tokenData.expires) {
        resetTokens.delete(token)
        return NextResponse.json({ error: 'Reset token has expired' }, { status: 400 })
      }

const user = getUserByEmail(tokenData.email)
      if (!user) {
        return NextResponse.json({ error: 'User not found' }, { status: 400 })
      }

// Update password
      updateUser(user.id, { password: newPassword })

// Delete used token
      resetTokens.delete(token)

return NextResponse.json({ success: true, message: 'Password has been reset successfully' })
    }

if (action === 'verify') {
      // Verify token is valid
      if (!token) {
        return NextResponse.json({ error: 'Token is required' }, { status: 400 })
      }

const tokenData = resetTokens.get(token)
      if (!tokenData || Date.now() > tokenData.expires) {
        return NextResponse.json({ valid: false })
      }

return NextResponse.json({ valid: true, email: tokenData.email })
    }

return NextResponse.json({ error: 'Invalid action' }, { status: 400 })
  } catch (error) {
    console.error('Password reset error:', error)
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/reset-password/page.tsx"
"use client"

import { useState, useEffect, Suspense } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import Link from "next/link"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { useToast } from "@/components/ui/use-toast"
import { CheckCircle, XCircle, Loader2 } from "lucide-react"

const resetPasswordSchema = z.object({
  password: z.string().min(8, { message: "Password must be at least 8 characters" }),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"],
})

function ResetPasswordForm() {
  const { toast } = useToast()
  const router = useRouter()
  const searchParams = useSearchParams()
  const token = searchParams.get('token')
  
  const [isLoading, setIsLoading] = useState(false)
  const [isVerifying, setIsVerifying] = useState(true)
  const [isValidToken, setIsValidToken] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const [email, setEmail] = useState('')

const form = useForm<z.infer<typeof resetPasswordSchema>>({
    resolver: zodResolver(resetPasswordSchema),
    defaultValues: {
      password: "",
      confirmPassword: "",
    },
  })

// Verify token on mount
  useEffect(() => {
    async function verifyToken() {
      if (!token) {
        setIsVerifying(false)
        return
      }

try {
        const response = await fetch('/api/auth/reset-password', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token, action: 'verify' }),
        })

const data = await response.json()
        setIsValidToken(data.valid)
        if (data.email) setEmail(data.email)
      } catch {
        setIsValidToken(false)
      } finally {
        setIsVerifying(false)
      }
    }

verifyToken()
  }, [token])

async function onSubmit(values: z.infer<typeof resetPasswordSchema>) {
    setIsLoading(true)
    try {
      const response = await fetch('/api/auth/reset-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          token,
          newPassword: values.password,
          action: 'reset',
        }),
      })

const data = await response.json()

if (data.success) {
        setIsSuccess(true)
        toast({
          title: "Password reset successful",
          description: "You can now log in with your new password.",
        })
      } else {
        throw new Error(data.error || 'Failed to reset password')
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Failed to reset password",
        description: error instanceof Error ? error.message : "An error occurred. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

if (isVerifying) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col items-center justify-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-green-600 mb-4" />
            <p className="text-muted-foreground">Verifying reset link...</p>
          </div>
        </CardContent>
      </Card>
    )
  }

if (!token || !isValidToken) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col items-center justify-center py-8">
            <div className="rounded-full bg-red-100 p-3 mb-4">
              <XCircle className="h-8 w-8 text-red-600" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Invalid or Expired Link</h3>
            <p className="text-muted-foreground text-center mb-4">
              This password reset link is invalid or has expired.
            </p>
            <Link href="/forgot-password">
              <Button>Request New Reset Link</Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    )
  }

if (isSuccess) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col items-center justify-center py-8">
            <div className="rounded-full bg-green-100 p-3 mb-4">
              <CheckCircle className="h-8 w-8 text-green-600" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Password Reset Complete</h3>
            <p className="text-muted-foreground text-center mb-4">
              Your password has been successfully reset.
            </p>
            <Link href="/login">
              <Button>Go to Login</Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Set New Password</CardTitle>
        <CardDescription>
          {email ? `Resetting password for ${email}` : "Enter your new password below"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>New Password</FormLabel>
                  <FormControl>
                    <Input type="password" placeholder="Enter new password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Confirm Password</FormLabel>
                  <FormControl>
                    <Input type="password" placeholder="Confirm new password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Resetting...
                </>
              ) : (
                "Reset Password"
              )}
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex justify-center">
        <div className="text-sm text-center">
          <Link href="/login" className="text-primary underline underline-offset-4 hover:text-primary/90">
            Back to login
          </Link>
        </div>
      </CardFooter>
    </Card>
  )
}

export default function ResetPasswordPage() {
  return (
    <div className="container flex h-screen w-screen flex-col items-center justify-center">
      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
        <div className="flex flex-col space-y-2 text-center">
          <h1 className="text-2xl font-semibold tracking-tight">Reset Password</h1>
          <p className="text-sm text-muted-foreground">Create a new password for your account</p>
        </div>

<Suspense fallback={
          <Card>
            <CardContent className="pt-6">
              <div className="flex flex-col items-center justify-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-green-600 mb-4" />
                <p className="text-muted-foreground">Loading...</p>
              </div>
            </CardContent>
          </Card>
        }>
          <ResetPasswordForm />
        </Suspense>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/storage.ts"
// Storage utility functions for the scholarship system
// IN-MEMORY ONLY - No localStorage or sessionStorage - Data resets on page refresh

// ==================== TYPE DEFINITIONS ====================

// Admin role types for RBAC
export type AdminRole = "head_admin" | "verifier_staff" | "scanner_staff"

// Permissions for each admin role
export const ADMIN_PERMISSIONS: Record<AdminRole, string[]> = {
  head_admin: [
    "dashboard", "scholars", "applications", "approved-emails", 
    "verification", "reports", "scheduling", "staff-management", "settings"
  ],
  verifier_staff: [
    "dashboard", "scholars", "applications", "verification"
  ],
  scanner_staff: [
    "dashboard", "verification"
  ],
}

export type User = {
  id: string
  name: string
  email: string
  password: string
  role: "student" | "admin"
  adminRole?: AdminRole // Sub-role for admin users
  profileData?: StudentProfile | AdminProfile
  isPWD?: boolean // Added PWD field
  studentProfile?: any // For student registration data
  profilePicture?: string
}

export type StudentProfile = {
  fullName: string
  email: string
  contactNumber: string
  address: string
  age: string
  barangay: string
  bio?: string
  schoolName: string
  course: string
  yearLevel: string
  studentId: string
  isPWD?: boolean // Added PWD field
}

export type AdminProfile = {
  fullName: string
  email: string
  contactNumber: string
  position: string
  department: string
  bio?: string
}

export type Application = {
  id: string
  studentId: string
  fullName: string
  email: string
  course: string
  yearLevel: string
  school: string
  barangay: string
  status: "pending" | "approved" | "rejected"
  createdAt: string
  updatedAt: string
  submittedAt: string
  feedback?: string
  isPWD?: boolean // Added PWD field
}

export type Document = {
  id: string
  studentId: string
  name: string
  type: string
  status: "pending" | "approved" | "rejected"
  uploadedAt: string
  reviewedAt?: string
  feedback?: string
  fileSize: string
  semester: string
  academicYear: string
  url?: string // Vercel Blob URL for the actual file
}

export type Notification = {
  id: string
  userId: string
  title: string
  message: string
  type: "info" | "success" | "warning" | "announcement"
  isRead: boolean
  createdAt: string
  actionUrl?: string
}

export type NewScholarApplication = {
  id: string
  firstName: string
  lastName: string
  middleName?: string
  email: string
  barangayClearance?: string
  indigencyCertificate?: string
  voterCertification?: string
  status: "pending" | "approved" | "rejected"
  submittedAt: string
  updatedAt: string
}

export type PreApprovedEmail = {
  id: string
  email: string
  fullName?: string
  notes?: string
  status: "available" | "used"
  addedBy: string
  addedAt: string
  isUsed: boolean
  usedAt?: string
  usedBy?: string
}

export type ApplicationHistory = {
  id: string
  studentId: string
  applicationData: {
    course: string
    yearLevel: string
    school: string
    schoolName: string
    barangay: string
    academicYear: string
  }
  outcome: "approved" | "rejected"
  completedAt: string
  completedDate: string
  financialAidAmount: number
  notes?: string
}

export type VerificationSchedule = {
  id: string
  barangay: string
  startDate: string
  endDate: string
  dailyLimit?: number
  status: "active" | "ended" | "upcoming"
  createdAt: string
  createdBy: string
  updatedAt: string
}

export type FinancialDistributionSchedule = {
  id: string
  barangays: string[]
  startDate: string
  endDate: string
  startTime: string
  distributionAmount: number
  status: "active" | "ended" | "upcoming"
  createdAt: string
  createdBy: string
  updatedAt: string
}

// ==================== IN-MEMORY DATA STORE ====================
// This data will reset when the page refreshes

let currentUser: User | null = null
let users: User[] = []
let applications: Application[] = []
let documents: Document[] = []
let notifications: Notification[] = []
let newScholarApplications: NewScholarApplication[] = []
let preApprovedEmails: PreApprovedEmail[] = []
let verificationSchedules: VerificationSchedule[] = []
let financialDistributionSchedules: FinancialDistributionSchedule[] = []
let eligibleStudents: { odestudentId: string; odemarkedAt: string; odeverifiedBy: string }[] = []
let applicationHistory: ApplicationHistory[] = []

// ==================== INITIALIZATION ====================

export function initializeStorage(): void {
  // Only initialize if data is empty
  if (users.length > 0) return

const adminUser: User = {
    id: "admin1",
    name: "Admin User",
    email: "admin@carmona.gov.ph",
    password: "Admin123",
    role: "admin",
    adminRole: "head_admin", // Head admin has full access
    profileData: {
      fullName: "Maria Elena Santos",
      email: "admin@carmona.gov.ph",
      contactNumber: "09171234567",
      position: "Scholarship Program Administrator",
      department: "Municipal Scholarship Office",
      bio: "Responsible for overseeing the BTS scholarship program.",
    },
  }

users = [adminUser]

applications = []
  documents = []
  notifications = []
}

// ==================== USER FUNCTIONS ====================

export function getUsers(): User[] {
  return [...users]
}

export function getAllUsers(): User[] {
  return [...users]
}

export function getUserByEmail(email: string): User | null {
  if (!email) return null
  return users.find((user) => user.email.toLowerCase() === email.toLowerCase()) || null
}

export function getUserById(id: string): User | null {
  if (!id) return null
  return users.find((user) => user.id === id) || null
}

export function getCurrentUser(): User | null {
  return currentUser
}

export function login(email: string, password: string): User | null {
  const user = users.find((u) => u.email === email && u.password === password)
  if (user) {
    currentUser = user
    return user
  }
  return null
}

export function logout(): void {
  currentUser = null
}

export function updateUserProfile(userId: string, profileData: Partial<StudentProfile | AdminProfile>): User | null {
  const userIndex = users.findIndex((u) => u.id === userId)
  if (userIndex === -1) return null

users[userIndex] = {
    ...users[userIndex],
    profileData: { ...users[userIndex].profileData, ...profileData } as StudentProfile | AdminProfile,
  }

if (currentUser && currentUser.id === userId) {
    currentUser = users[userIndex]
  }

return users[userIndex]
}

export function updateUserPassword(userId: string, currentPassword: string, newPassword: string): boolean {
  const userIndex = users.findIndex((u) => u.id === userId)
  if (userIndex === -1) return false
  if (users[userIndex].password !== currentPassword) return false

users[userIndex].password = newPassword
  return true
}

export function createUser(userData: Omit<User, "id">, profileData?: any): User {
  const newUser: User = {
    ...userData,
    id: `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    profileData: profileData || userData.profileData,
  }
  users.push(newUser)

if (newUser.role === "student") {
    createNotification({
      userId: newUser.id,
      title: "Welcome to BTS Scholarship Program!",
      message:
        "Thank you for registering. Complete your profile and submit your scholarship application to get started.",
      type: "info",
      isRead: false,
      actionUrl: "/student/dashboard",
    })

// Notify admins about new student registration
    const admins = users.filter((u) => u.role === "admin")
    admins.forEach((admin) => {
      createNotification({
        userId: admin.id,
        title: "New Student Registration",
        message: `${newUser.name} (${newUser.email}) has registered for the scholarship program.`,
        type: "info",
        isRead: false,
        actionUrl: "/admin/scholars",
      })
    })
  }

return newUser
}

// Alias functions
export function getUser(userId: string): User | null {
  return getUserById(userId)
}

export function updateUser(userId: string, profileData: Partial<StudentProfile | AdminProfile>): User | null {
  return updateUserProfile(userId, profileData)
}

export function updateEducationInfo(userId: string, educationData: Partial<StudentProfile>): User | null {
  return updateUserProfile(userId, educationData)
}

// ==================== APPLICATION FUNCTIONS ====================

export function getApplications(): Application[] {
  return [...applications]
}

export function getAllApplications(): Application[] {
  return [...applications]
}

export function getApplicationById(id: string): Application | null {
  if (!id) return null
  return applications.find((app) => app.id === id) || null
}

export function getApplicationsByStudentId(studentId: string): Application[] {
  if (!studentId) return []
  return applications.filter((app) => app.studentId === studentId)
}

export function createApplication(
  data: Omit<Application, "id" | "createdAt" | "updatedAt" | "submittedAt">,
): Application {
  const newApplication: Application = {
    ...data,
    id: `app-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    submittedAt: new Date().toISOString(),
  }
  applications.push(newApplication)

createNotification({
    userId: data.studentId,
    title: "Application Submitted Successfully",
    message:
      "Your scholarship application has been submitted and is now under review. You'll receive updates on your application status.",
    type: "success",
    isRead: false,
    actionUrl: "/student/dashboard",
  })

const admins = users.filter((u) => u.role === "admin")
  admins.forEach((admin) => {
    createNotification({
      userId: admin.id,
      title: "New Application Submitted",
      message: `${data.fullName} submitted a scholarship application. Course: ${data.course}, Year: ${data.yearLevel}, Barangay: ${data.barangay}`,
      type: "info",
      isRead: false,
      actionUrl: "/admin/dashboard",
    })
  })

return newApplication
}

export function updateApplicationStatus(
  id: string,
  status: "pending" | "approved" | "rejected",
  feedback?: string,
): Application | null {
  const appIndex = applications.findIndex((app) => app.id === id)
  if (appIndex === -1) return null

applications[appIndex] = {
    ...applications[appIndex],
    status,
    feedback,
    updatedAt: new Date().toISOString(),
  }

const application = applications[appIndex]
  const student = users.find((u) => u.id === application.studentId)

if (student) {
    if (status === "approved") {
      createNotification({
        userId: student.id,
        title: "Application Approved!",
        message: `Congratulations! Your scholarship application has been approved. ${feedback || "You can now proceed with the next steps in your student dashboard."}`,
        type: "success",
        isRead: false,
        actionUrl: "/student/dashboard",
      })
    } else if (status === "rejected") {
      createNotification({
        userId: student.id,
        title: "Application Update",
        message: `Your scholarship application has been reviewed. ${feedback || "Please contact the scholarship office for more information."}`,
        type: "warning",
        isRead: false,
        actionUrl: "/student/dashboard",
      })
    }
  }

const admins = users.filter((u) => u.role === "admin")
  admins.forEach((admin) => {
    createNotification({
      userId: admin.id,
      title: "Application Status Updated",
      message: `Application for ${application.fullName} has been ${status}. Course: ${application.course}, Barangay: ${application.barangay}`,
      type: "info",
      isRead: false,
      actionUrl: "/admin/scholars",
    })
  })

return applications[appIndex]
}

export function updateApplication(id: string, updates: Partial<Application>): Application | null {
  const appIndex = applications.findIndex((app) => app.id === id)
  if (appIndex === -1) return null

applications[appIndex] = {
    ...applications[appIndex],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

return applications[appIndex]
}

// ==================== DOCUMENT FUNCTIONS ====================

export function getDocuments(): Document[] {
  return [...documents]
}

export function getDocumentsByStudentId(studentId: string): Document[] {
  if (!studentId) return []
  return documents.filter((doc) => doc.studentId === studentId)
}

export function createDocument(data: Omit<Document, "id" | "uploadedAt">): Document {
  const newDocument: Document = {
    ...data,
    id: `doc-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    uploadedAt: new Date().toISOString(),
  }
  documents.push(newDocument)
  return newDocument
}

export function updateDocumentStatus(
  id: string,
  status: "pending" | "approved" | "rejected",
  feedback?: string,
): Document | null {
  const docIndex = documents.findIndex((doc) => doc.id === id)
  if (docIndex === -1) return null

documents[docIndex] = {
    ...documents[docIndex],
    status,
    feedback,
    reviewedAt: new Date().toISOString(),
  }

return documents[docIndex]
}

// ==================== NOTIFICATION FUNCTIONS ====================

export function getNotifications(): Notification[] {
  return [...notifications]
}

export function getNotificationsByUserId(userId: string): Notification[] {
  if (!userId) return []
  return notifications.filter((n) => n.userId === userId)
}

export function createNotification(data: Omit<Notification, "id" | "createdAt">): Notification {
  const newNotification: Notification = {
    ...data,
    id: `notif-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    createdAt: new Date().toISOString(),
  }
  notifications.push(newNotification)
  return newNotification
}

export function markNotificationAsRead(id: string): Notification | null {
  const notifIndex = notifications.findIndex((n) => n.id === id)
  if (notifIndex === -1) return null

notifications[notifIndex] = {
    ...notifications[notifIndex],
    isRead: true,
  }

return notifications[notifIndex]
}

export function markAllNotificationsAsRead(userId: string): void {
  notifications = notifications.map((n) => (n.userId === userId ? { ...n, isRead: true } : n))
}

// ==================== PRE-APPROVED EMAIL FUNCTIONS ====================

export function getPreApprovedEmails(): PreApprovedEmail[] {
  return [...preApprovedEmails]
}

export function addPreApprovedEmail(
  email: string,
  fullName?: string,
  notes?: string,
  addedBy?: string,
): PreApprovedEmail {
  const newEmail: PreApprovedEmail = {
    id: `email-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    email: email,
    fullName,
    notes,
    status: "available",
    addedBy: addedBy || "admin",
    addedAt: new Date().toISOString(),
    isUsed: false,
  }
  preApprovedEmails.push(newEmail)

const admins = users.filter((u) => u.role === "admin")
  admins.forEach((admin) => {
    if (admin.id !== addedBy) {
      createNotification({
        userId: admin.id,
        title: "New Pre-Approved Email Added",
        message: `Email ${email}${fullName ? ` (${fullName})` : ""} has been added to the pre-approved list.`,
        type: "info",
        isRead: false,
        actionUrl: "/admin/approved-emails",
      })
    }
  })

return newEmail
}

export function removePreApprovedEmail(id: string): boolean {
  const initialLength = preApprovedEmails.length
  preApprovedEmails = preApprovedEmails.filter((e) => e.id !== id)
  return preApprovedEmails.length < initialLength
}

export function isEmailPreApproved(email: string): boolean {
  if (!email) return false
  const result = preApprovedEmails.some((e) => e?.email?.toLowerCase() === email.toLowerCase() && !e.isUsed)
  return result
}

export function markEmailAsUsed(email: string, userId: string): void {
  const emailIndex = preApprovedEmails.findIndex((e) => e.email.toLowerCase() === email.toLowerCase())
  if (emailIndex !== -1) {
    preApprovedEmails[emailIndex] = {
      ...preApprovedEmails[emailIndex],
      isUsed: true,
      usedAt: new Date().toISOString(),
      usedBy: userId,
    }
  }
}

// ==================== NEW SCHOLAR APPLICATION FUNCTIONS ====================

export function getNewScholarApplications(): NewScholarApplication[] {
  return [...newScholarApplications]
}

export function createNewScholarApplication(
  data: Omit<NewScholarApplication, "id" | "submittedAt" | "updatedAt" | "status">,
): NewScholarApplication {
  const newApp: NewScholarApplication = {
    ...data,
    id: `new-app-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    status: "pending",
    submittedAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
  newScholarApplications.push(newApp)
  return newApp
}

export function updateNewScholarApplicationStatus(
  id: string,
  status: "pending" | "approved" | "rejected",
): NewScholarApplication | null {
  const appIndex = newScholarApplications.findIndex((app) => app.id === id)
  if (appIndex === -1) return null

newScholarApplications[appIndex] = {
    ...newScholarApplications[appIndex],
    status,
    updatedAt: new Date().toISOString(),
  }

return newScholarApplications[appIndex]
}

export function updateNewScholarApplication(
  id: string,
  updates: Partial<NewScholarApplication>,
): NewScholarApplication | null {
  const appIndex = newScholarApplications.findIndex((app) => app.id === id)
  if (appIndex === -1) return null

newScholarApplications[appIndex] = {
    ...newScholarApplications[appIndex],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

return newScholarApplications[appIndex]
}

// ==================== VERIFICATION SCHEDULE FUNCTIONS ====================

export function getVerificationSchedules(): VerificationSchedule[] {
  return verificationSchedules.map((schedule) => ({
    ...schedule,
    status: calculateScheduleStatus(schedule.startDate, schedule.endDate),
  }))
}

export function createVerificationSchedule(data: Omit<VerificationSchedule, "id" | "createdAt">): VerificationSchedule {
  const newSchedule: VerificationSchedule = {
    ...data,
    id: `vs-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    createdAt: new Date().toISOString(),
  }
  verificationSchedules.push(newSchedule)

const affectedStudents = users.filter((u) => u.role === "student" && u.profileData?.barangay === data.barangay)

affectedStudents.forEach((student) => {
    createNotification({
      userId: student.id,
      title: "Verification Schedule Announced",
      message: `Document verification for ${data.barangay} is scheduled from ${new Date(data.startDate).toLocaleDateString()} to ${new Date(data.endDate).toLocaleDateString()}. Please prepare your documents.`,
      type: "announcement",
      isRead: false,
      actionUrl: "/student/dashboard",
    })
  })

return newSchedule
}

export function updateVerificationSchedule(
  id: string,
  updates: Partial<VerificationSchedule>,
): VerificationSchedule | null {
  const scheduleIndex = verificationSchedules.findIndex((s) => s.id === id)
  if (scheduleIndex === -1) return null

verificationSchedules[scheduleIndex] = {
    ...verificationSchedules[scheduleIndex],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

return verificationSchedules[scheduleIndex]
}

export function deleteVerificationSchedule(id: string): boolean {
  const initialLength = verificationSchedules.length
  verificationSchedules = verificationSchedules.filter((s) => s.id !== id)
  return verificationSchedules.length < initialLength
}

export function endVerificationSchedule(id: string): VerificationSchedule | null {
  const scheduleIndex = verificationSchedules.findIndex((s) => s.id === id)
  if (scheduleIndex === -1) return null

verificationSchedules[scheduleIndex] = {
    ...verificationSchedules[scheduleIndex],
    status: "ended",
    endDate: new Date().toISOString().split("T")[0],
    updatedAt: new Date().toISOString(),
  }

return verificationSchedules[scheduleIndex]
}

// ==================== FINANCIAL DISTRIBUTION SCHEDULE FUNCTIONS ====================

export function getFinancialDistributionSchedules(): FinancialDistributionSchedule[] {
  return financialDistributionSchedules.map((schedule) => ({
    ...schedule,
    status: calculateScheduleStatus(schedule.startDate, schedule.endDate),
  }))
}

export function getFinancialDistributionScheduleForBarangay(barangay: string): FinancialDistributionSchedule | null {
  const schedule = financialDistributionSchedules.find(
    (s) => s.barangays.includes(barangay) && calculateScheduleStatus(s.startDate, s.endDate) !== "ended",
  )

if (!schedule) return null

return {
    ...schedule,
    status: calculateScheduleStatus(schedule.startDate, schedule.endDate),
  }
}

export function createFinancialDistributionSchedule(
  data: Omit<FinancialDistributionSchedule, "id" | "createdAt">,
): FinancialDistributionSchedule {
  const newSchedule: FinancialDistributionSchedule = {
    ...data,
    id: `fds-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    createdAt: new Date().toISOString(),
  }
  financialDistributionSchedules.push(newSchedule)

data.barangays.forEach((barangay) => {
    const affectedStudents = users.filter((u) => u.role === "student" && u.profileData?.barangay === barangay)

const approvedApplications = applications.filter((app) => app.status === "approved" && app.barangay === barangay)

// Only notify students with approved applications
    const notifiedStudents = affectedStudents.filter((student) =>
      approvedApplications.some((app) => app.studentId === student.id),
    )

notifiedStudents.forEach((student) => {
      createNotification({
        userId: student.id,
        title: "Financial Aid Distribution Scheduled",
        message: `Financial aid distribution for ${barangay} is scheduled on ${new Date(data.startDate).toLocaleDateString()}${data.startTime ? ` at ${data.startTime}` : ""}. Amount: ₱${data.distributionAmount.toLocaleString()}. Please bring valid ID.`,
        type: "success",
        isRead: false,
        actionUrl: "/student/dashboard",
      })
    })
  })

return newSchedule
}

export function updateFinancialDistributionSchedule(
  id: string,
  updates: Partial<FinancialDistributionSchedule>,
): FinancialDistributionSchedule | null {
  const scheduleIndex = financialDistributionSchedules.findIndex((s) => s.id === id)
  if (scheduleIndex === -1) return null

financialDistributionSchedules[scheduleIndex] = {
    ...financialDistributionSchedules[scheduleIndex],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

return financialDistributionSchedules[scheduleIndex]
}

export function deleteFinancialDistributionSchedule(id: string): boolean {
  const initialLength = financialDistributionSchedules.length
  financialDistributionSchedules = financialDistributionSchedules.filter((s) => s.id !== id)
  return financialDistributionSchedules.length < initialLength
}

export function endFinancialDistributionSchedule(id: string): FinancialDistributionSchedule | null {
  const scheduleIndex = financialDistributionSchedules.findIndex((s) => s.id === id)
  if (scheduleIndex === -1) return null

financialDistributionSchedules[scheduleIndex] = {
    ...financialDistributionSchedules[scheduleIndex],
    status: "ended",
    endDate: new Date().toISOString().split("T")[0],
    updatedAt: new Date().toISOString(),
  }

return financialDistributionSchedules[scheduleIndex]
}

// ==================== HELPER FUNCTIONS ====================

function calculateScheduleStatus(startDate: string, endDate: string): "active" | "ended" | "upcoming" {
  const now = new Date()
  const start = new Date(startDate)
  const end = new Date(endDate)

if (now < start) return "upcoming"
  if (now > end) return "ended"
  return "active"
}

// ==================== STATISTICS FUNCTIONS ====================

export function getStatistics() {
  const allApplications = getApplications()
  const allUsers = getUsers()

return {
    totalScholars: allUsers.filter((u) => u.role === "student").length,
    pendingApplications: allApplications.filter((a) => a.status === "pending").length,
    approvedApplications: allApplications.filter((a) => a.status === "approved").length,
    rejectedApplications: allApplications.filter((a) => a.status === "rejected").length,
    totalApplications: allApplications.length,
  }
}

// ==================== ELIGIBILITY FUNCTIONS ====================

export function markStudentAsEligible(studentId: string, verifiedBy: string): boolean {
  const existingIndex = eligibleStudents.findIndex((e) => e.odestudentId === studentId)
  if (existingIndex !== -1) return true

eligibleStudents.push({
    odestudentId: studentId,
    odemarkedAt: new Date().toISOString(),
    odeverifiedBy: verifiedBy,
  })

return true
}

export function isStudentEligible(studentId: string): boolean {
  return eligibleStudents.some((e) => e.odestudentId === studentId)
}

export function getEligibleStudents() {
  return [...eligibleStudents]
}

// ==================== CLAIMED STATUS FUNCTIONS ====================

type ClaimedRecord = {
  odestudentId: string
  odeclaimedAt: string
  odeclaimedBy: string
  odeamount?: number
}

let claimedStudents: ClaimedRecord[] = []

export function markStudentAsClaimed(studentId: string, claimedBy: string, amount?: number): { success: boolean; message: string } {
  // Check if student is eligible first
  if (!isStudentEligible(studentId)) {
    return { success: false, message: "Student must be verified as eligible before claiming" }
  }
  
  // Check if already claimed
  const existingIndex = claimedStudents.findIndex((c) => c.odestudentId === studentId)
  if (existingIndex !== -1) {
    return { success: false, message: "Student has already claimed their financial aid" }
  }

// Get the student's current application
  const studentApplication = applications.find((app) => app.studentId === studentId && app.status === "approved")
  const student = users.find((u) => u.id === studentId)
  const profile = student?.studentProfile || student?.profileData

const claimedAt = new Date().toISOString()

// Add to claimed records
  claimedStudents.push({
    odestudentId: studentId,
    odeclaimedAt: claimedAt,
    odeclaimedBy: claimedBy,
    odeamount: amount,
  })

// Archive to application history
  if (studentApplication && student) {
    const historyEntry: Omit<ApplicationHistory, "id"> = {
      studentId: studentId,
      applicationData: {
        course: profile?.education?.course || profile?.course || studentApplication.course || "N/A",
        yearLevel: profile?.education?.yearLevel || profile?.yearLevel || studentApplication.yearLevel || "N/A",
        school: profile?.education?.school || profile?.school || studentApplication.school || "N/A",
        schoolName: profile?.education?.school || profile?.school || studentApplication.school || "N/A",
        barangay: profile?.barangay || studentApplication.barangay || "N/A",
        academicYear: studentApplication.academicYear || getCurrentAcademicYear(),
      },
      outcome: "approved",
      completedAt: claimedAt,
      completedDate: new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }),
      financialAidAmount: amount || 0,
      notes: "Financial aid successfully claimed",
    }
    addApplicationHistory(historyEntry)

// Remove the current application (clear for next semester)
    applications = applications.filter((app) => !(app.studentId === studentId && app.status === "approved"))
    
    // Remove from eligible students
    eligibleStudents = eligibleStudents.filter((e) => e.odestudentId !== studentId)
    
    // Remove from claimed students (since it's now in history)
    claimedStudents = claimedStudents.filter((c) => c.odestudentId !== studentId)
    
    // Clear student's documents for next semester
    documents = documents.filter((doc) => doc.studentId !== studentId)
  }

return { success: true, message: "Financial aid claimed and archived to history. Ready for next semester!" }
}

export function hasStudentClaimed(studentId: string): boolean {
  return claimedStudents.some((c) => c.odestudentId === studentId)
}

export function getClaimedRecord(studentId: string): ClaimedRecord | undefined {
  return claimedStudents.find((c) => c.odestudentId === studentId)
}

export function getClaimedStudents() {
  return [...claimedStudents]
}

// ==================== APPLICATION HISTORY FUNCTIONS ====================

export function getApplicationHistoryByStudentId(studentId: string): ApplicationHistory[] {
  return applicationHistory.filter((h) => h.studentId === studentId)
}

export function addApplicationHistory(data: Omit<ApplicationHistory, "id">): ApplicationHistory {
  const newHistory: ApplicationHistory = {
    ...data,
    id: `hist-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
  }
  applicationHistory.push(newHistory)
  return newHistory
}

// ==================== VERIFICATION FUNCTIONS ====================

export function verifyStudent(
  studentId: string,
  adminId: string,
): { success: boolean; message: string; student?: User } {
  const user = getUserById(studentId)
  if (!user) {
    return { success: false, message: "Student not found" }
  }

const userApplications = getApplicationsByStudentId(studentId)
  const approvedApp = userApplications.find((app) => app.status === "approved")

if (!approvedApp) {
    return { success: false, message: "No approved application found for this student" }
  }

markStudentAsEligible(studentId, adminId)

return {
    success: true,
    message: "Student verified successfully",
    student: user,
  }
}

// ==================== RBAC FUNCTIONS ====================

export function hasPermission(user: User | null, permission: string): boolean {
  if (!user || user.role !== "admin") return false
  const adminRole = user.adminRole || "head_admin" // Default to head_admin for backwards compatibility
  return ADMIN_PERMISSIONS[adminRole]?.includes(permission) || false
}

export function getAdminRoleLabel(adminRole: AdminRole): string {
  switch (adminRole) {
    case "head_admin":
      return "Head Administrator"
    case "verifier_staff":
      return "Verification Staff"
    case "scanner_staff":
      return "QR Scanner Staff"
    default:
      return "Staff"
  }
}

export function getStaffMembers(): User[] {
  return users.filter((u) => u.role === "admin")
}

export function createStaffMember(data: {
  name: string
  email: string
  password: string
  adminRole: AdminRole
}): User | { error: string } {
  // Check if email already exists
  const existingUser = getUserByEmail(data.email)
  if (existingUser) {
    return { error: "Email already exists" }
  }

const newStaff: User = {
    id: `staff-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
    name: data.name,
    email: data.email,
    password: data.password,
    role: "admin",
    adminRole: data.adminRole,
    profileData: {
      fullName: data.name,
      email: data.email,
      contactNumber: "",
      position: getAdminRoleLabel(data.adminRole),
      department: "Municipal Scholarship Office",
    },
  }

users.push(newStaff)
  return newStaff
}

export function updateStaffRole(staffId: string, newRole: AdminRole): User | null {
  const staffIndex = users.findIndex((u) => u.id === staffId && u.role === "admin")
  if (staffIndex === -1) return null

users[staffIndex] = {
    ...users[staffIndex],
    adminRole: newRole,
    profileData: {
      ...users[staffIndex].profileData,
      position: getAdminRoleLabel(newRole),
    } as AdminProfile,
  }

return users[staffIndex]
}

export function deleteStaffMember(staffId: string): boolean {
  // Prevent deleting the head admin
  const staff = users.find((u) => u.id === staffId)
  if (!staff || staff.adminRole === "head_admin") return false

const initialLength = users.length
  users = users.filter((u) => u.id !== staffId)
  return users.length < initialLength
}

// ==================== DEBUG FUNCTIONS (NO-OP) ====================

export function clearAllData(): void {
  users = []
  applications = []
  documents = []
  notifications = []
  newScholarApplications = []
  preApprovedEmails = []
  verificationSchedules = []
  financialDistributionSchedules = []
  eligibleStudents = []
  claimedStudents = []
  applicationHistory = []
  currentUser = null
  }

export function debugViewAllUsers(): void {
  console.log("Users:", users)
}

export function checkStorageStatus() {
  return {
    isInitialized: users.length > 0,
    version: "in-memory",
    userCount: users.length,
    applicationCount: applications.length,
    documentCount: documents.length,
  }
}

export function resetToFreshState(): void {
  clearAllData()
  initializeStorage()
}
[V0_FILE]typescriptreact:file="app/reset-password/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/api/email/route.ts"
import { type NextRequest, NextResponse } from 'next/server'
import { Resend } from 'resend'

// Lazy initialization - only create Resend instance when API key is available
let resendInstance: Resend | null = null
function getResend(): Resend | null {
  if (!process.env.RESEND_API_KEY) return null
  if (!resendInstance) {
    resendInstance = new Resend(process.env.RESEND_API_KEY)
  }
  return resendInstance
}

interface SendEmailRequest {
  to: string
  template: EmailTemplate
  data: Record<string, string>
}

const emailTemplates: Record<EmailTemplate, { subject: string; getBody: (data: Record<string, string>) => string }> = {
  welcome: {
    subject: 'Welcome to BTS Scholarship Program',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
          <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0;">Municipality of Carmona</p>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Welcome, ${data.name}!</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Your account has been successfully created for the Barangay Tertiary Scholarship (BTS) Program.
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            You can now submit your scholarship application and upload the required documents through your student dashboard.
          </p>
          <div style="text-align: center; margin: 30px 0;">
            <a href="${data.loginUrl}" style="background: #16a34a; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; display: inline-block;">
              Go to Dashboard
            </a>
          </div>
        </div>
        <div style="padding: 20px; text-align: center; color: #6b7280; font-size: 12px;">
          <p>Municipality of Carmona - BTS Scholarship Program</p>
        </div>
      </div>
    `,
  },
  application_submitted: {
    subject: 'Application Received - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Application Received</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Dear ${data.name},
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            We have received your scholarship application. Your application is now under review.
          </p>
          <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <p style="margin: 0; color: #6b7280;"><strong>Application ID:</strong> ${data.applicationId}</p>
            <p style="margin: 10px 0 0; color: #6b7280;"><strong>Submitted:</strong> ${data.submittedDate}</p>
            <p style="margin: 10px 0 0; color: #6b7280;"><strong>Status:</strong> <span style="color: #f59e0b;">Pending Review</span></p>
          </div>
          <p style="color: #4b5563; line-height: 1.6;">
            You will be notified once your application has been reviewed. Please ensure all your documents are uploaded.
          </p>
        </div>
      </div>
    `,
  },
  application_approved: {
    subject: 'Congratulations! Application Approved - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <div style="text-align: center; margin-bottom: 20px;">
            <div style="background: #dcfce7; border-radius: 50%; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;">
              <span style="font-size: 30px;">✓</span>
            </div>
          </div>
          <h2 style="color: #16a34a; text-align: center;">Application Approved!</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Dear ${data.name},
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            Congratulations! Your scholarship application has been approved. You are now an official BTS Scholar.
          </p>
          <div style="background: #dcfce7; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <p style="margin: 0; color: #166534; font-weight: bold;">Next Steps:</p>
            <ul style="color: #166534; margin: 10px 0 0; padding-left: 20px;">
              <li>Check the verification schedule for your barangay</li>
              <li>Prepare your QR code for verification</li>
              <li>Wait for the financial distribution schedule</li>
            </ul>
          </div>
        </div>
      </div>
    `,
  },
  application_rejected: {
    subject: 'Application Update - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Application Update</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Dear ${data.name},
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            We regret to inform you that your scholarship application could not be approved at this time.
          </p>
          <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <p style="margin: 0; color: #991b1b; font-weight: bold;">Reason:</p>
            <p style="margin: 10px 0 0; color: #991b1b;">${data.reason}</p>
          </div>
          <p style="color: #4b5563; line-height: 1.6;">
            You may reapply in the next application period after addressing the issues mentioned above.
          </p>
        </div>
      </div>
    `,
  },
  password_reset: {
    subject: 'Password Reset Request - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Password Reset</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            You requested to reset your password. Click the button below to create a new password.
          </p>
          <div style="text-align: center; margin: 30px 0;">
            <a href="${data.resetUrl}" style="background: #16a34a; color: white; padding: 12px 30px; text-decoration: none; border-radius: 6px; display: inline-block;">
              Reset Password
            </a>
          </div>
          <p style="color: #6b7280; font-size: 14px;">
            This link will expire in 1 hour. If you didn't request this, please ignore this email.
          </p>
        </div>
      </div>
    `,
  },
  verification_schedule: {
    subject: 'Verification Schedule Announced - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Verification Schedule</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Dear ${data.name},
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            A verification schedule has been announced for your barangay.
          </p>
          <div style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <p style="margin: 0; color: #6b7280;"><strong>Barangay:</strong> ${data.barangay}</p>
            <p style="margin: 10px 0 0; color: #6b7280;"><strong>Date:</strong> ${data.startDate} - ${data.endDate}</p>
          </div>
          <p style="color: #4b5563; line-height: 1.6;">
            Please bring your valid ID and QR code for verification.
          </p>
        </div>
      </div>
    `,
  },
  financial_distribution: {
    subject: 'Financial Aid Distribution Schedule - BTS Scholarship',
    getBody: (data) => `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <div style="background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); padding: 30px; text-align: center;">
          <h1 style="color: white; margin: 0;">BTS Scholarship</h1>
        </div>
        <div style="padding: 30px; background: #f9fafb;">
          <h2 style="color: #1f2937;">Financial Aid Distribution</h2>
          <p style="color: #4b5563; line-height: 1.6;">
            Dear ${data.name},
          </p>
          <p style="color: #4b5563; line-height: 1.6;">
            The financial aid distribution schedule for your barangay has been announced.
          </p>
          <div style="background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <p style="margin: 0; color: #166534;"><strong>Barangay:</strong> ${data.barangay}</p>
            <p style="margin: 10px 0 0; color: #166534;"><strong>Date:</strong> ${data.date}</p>
            <p style="margin: 10px 0 0; color: #166534;"><strong>Time:</strong> ${data.time}</p>
            <p style="margin: 10px 0 0; color: #166534;"><strong>Amount:</strong> ₱${data.amount}</p>
          </div>
          <p style="color: #4b5563; line-height: 1.6;">
            Please bring your valid ID and QR code to claim your financial aid.
          </p>
        </div>
      </div>
    `,
  },
}

export async function POST(request: NextRequest) {
  try {
    const body: SendEmailRequest = await request.json()
    const { to, template, data } = body

if (!to || !template) {
      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 })
    }

const emailTemplate = emailTemplates[template]
    if (!emailTemplate) {
      return NextResponse.json({ error: 'Invalid template' }, { status: 400 })
    }

// Check if Resend API key is configured
    const resend = getResend()
    if (!resend) {
      // Console-based testing mode
      console.log('\n========================================')
      console.log('EMAIL NOTIFICATION (Console Mode)')
      console.log('========================================')
      console.log('To:', to)
      console.log('Subject:', emailTemplate.subject)
      console.log('Template:', template)
      console.log('Data:', JSON.stringify(data, null, 2))
      console.log('========================================\n')
      
      return NextResponse.json({ 
        success: true, 
        mode: 'console',
        message: 'Email logged to console (Resend not configured)' 
      })
    }

// Send real email via Resend
    const { data: emailData, error } = await resend.emails.send({
      from: 'BTS Scholarship <noreply@resend.dev>',
      to: [to],
      subject: emailTemplate.subject,
      html: emailTemplate.getBody(data),
    })

if (error) {
      console.error('Email send error:', error)
      return NextResponse.json({ error: 'Failed to send email' }, { status: 500 })
    }

return NextResponse.json({ success: true, id: emailData?.id })
  } catch (error) {
    console.error('Email API error:', error)
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/staff-management/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { AdminLayout } from "@/components/admin-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/contexts/auth-context"
import {
  getStaffMembers,
  createStaffMember,
  updateStaffRole,
  deleteStaffMember,
  getAdminRoleLabel,
  hasPermission,
  type User,
  type AdminRole,
  ADMIN_PERMISSIONS,
} from "@/lib/storage"
import {
  UserPlus,
  Shield,
  ShieldCheck,
  QrCode,
  Trash2,
  Edit,
  Users,
  Eye,
  EyeOff,
} from "lucide-react"
import { useRouter } from "next/navigation"

export default function StaffManagementPage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const router = useRouter()
  const [staffMembers, setStaffMembers] = useState<User[]>([])
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [selectedStaff, setSelectedStaff] = useState<User | null>(null)
  const [showPassword, setShowPassword] = useState(false)
  
  const [newStaff, setNewStaff] = useState({
    name: "",
    email: "",
    password: "",
    adminRole: "verifier_staff" as AdminRole,
  })

// Check permission on mount
  useEffect(() => {
    if (user && !hasPermission(user, "staff-management")) {
      router.push("/admin/dashboard")
      toast({
        variant: "destructive",
        title: "Access Denied",
        description: "You don't have permission to access staff management.",
      })
    }
  }, [user, router, toast])

// Load staff members
  useEffect(() => {
    const members = getStaffMembers()
    setStaffMembers(members)
  }, [])

const handleAddStaff = () => {
    if (!newStaff.name || !newStaff.email || !newStaff.password) {
      toast({
        variant: "destructive",
        title: "Missing Information",
        description: "Please fill in all required fields.",
      })
      return
    }

const result = createStaffMember(newStaff)
    
    if ("error" in result) {
      toast({
        variant: "destructive",
        title: "Error",
        description: result.error,
      })
      return
    }

setStaffMembers(getStaffMembers())
    setIsAddDialogOpen(false)
    setNewStaff({
      name: "",
      email: "",
      password: "",
      adminRole: "verifier_staff",
    })

toast({
      title: "Staff Added",
      description: `${result.name} has been added as ${getAdminRoleLabel(result.adminRole!)}.`,
    })
  }

const handleEditRole = () => {
    if (!selectedStaff) return

const updatedStaff = updateStaffRole(selectedStaff.id, selectedStaff.adminRole!)
    
    if (updatedStaff) {
      setStaffMembers(getStaffMembers())
      setIsEditDialogOpen(false)
      setSelectedStaff(null)

toast({
        title: "Role Updated",
        description: `${updatedStaff.name}'s role has been updated to ${getAdminRoleLabel(updatedStaff.adminRole!)}.`,
      })
    }
  }

const handleDeleteStaff = () => {
    if (!selectedStaff) return

const success = deleteStaffMember(selectedStaff.id)
    
    if (success) {
      setStaffMembers(getStaffMembers())
      setIsDeleteDialogOpen(false)
      
      toast({
        title: "Staff Removed",
        description: `${selectedStaff.name} has been removed from the system.`,
      })
      setSelectedStaff(null)
    } else {
      toast({
        variant: "destructive",
        title: "Cannot Delete",
        description: "Cannot delete the head administrator.",
      })
    }
  }

const getRoleBadgeColor = (role: AdminRole) => {
    switch (role) {
      case "head_admin":
        return "bg-purple-100 text-purple-800 border-purple-200"
      case "verifier_staff":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "scanner_staff":
        return "bg-green-100 text-green-800 border-green-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const getRoleIcon = (role: AdminRole) => {
    switch (role) {
      case "head_admin":
        return <ShieldCheck className="h-4 w-4" />
      case "verifier_staff":
        return <Shield className="h-4 w-4" />
      case "scanner_staff":
        return <QrCode className="h-4 w-4" />
      default:
        return <Users className="h-4 w-4" />
    }
  }

if (!user || !hasPermission(user, "staff-management")) {
    return null
  }

return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Staff Management</h1>
            <p className="text-slate-600">Manage admin staff accounts and their access permissions</p>
          </div>
          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
            <DialogTrigger asChild>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <UserPlus className="h-4 w-4 mr-2" />
                Add Staff Member
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Add New Staff Member</DialogTitle>
                <DialogDescription>
                  Create a new staff account with specific role permissions.
                </DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    placeholder="Enter full name"
                    value={newStaff.name}
                    onChange={(e) => setNewStaff({ ...newStaff, name: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="staff@carmona.gov.ph"
                    value={newStaff.email}
                    onChange={(e) => setNewStaff({ ...newStaff, email: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="Enter password"
                      value={newStaff.password}
                      onChange={(e) => setNewStaff({ ...newStaff, password: e.target.value })}
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-0 top-0 h-full px-3"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="role">Staff Role</Label>
                  <Select
                    value={newStaff.adminRole}
                    onValueChange={(value: AdminRole) => setNewStaff({ ...newStaff, adminRole: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select role" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="verifier_staff">
                        <div className="flex items-center gap-2">
                          <Shield className="h-4 w-4 text-blue-600" />
                          <span>Verification Staff</span>
                        </div>
                      </SelectItem>
                      <SelectItem value="scanner_staff">
                        <div className="flex items-center gap-2">
                          <QrCode className="h-4 w-4 text-green-600" />
                          <span>QR Scanner Staff</span>
                        </div>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground mt-1">
                    {newStaff.adminRole === "verifier_staff" 
                      ? "Can view scholars, applications, and verify students"
                      : "Can only scan QR codes for verification"}
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={handleAddStaff} className="bg-emerald-600 hover:bg-emerald-700">
                  Add Staff
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

{/* Role Permissions Overview */}
        <div className="grid gap-4 md:grid-cols-3">
          <Card>
            <CardHeader className="pb-2">
              <div className="flex items-center gap-2">
                <div className="p-2 rounded-lg bg-purple-100">
                  <ShieldCheck className="h-5 w-5 text-purple-600" />
                </div>
                <CardTitle className="text-base">Head Administrator</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-2">Full system access</p>
              <div className="flex flex-wrap gap-1">
                {ADMIN_PERMISSIONS.head_admin.map((perm) => (
                  <Badge key={perm} variant="outline" className="text-xs bg-purple-50">
                    {perm}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-2">
              <div className="flex items-center gap-2">
                <div className="p-2 rounded-lg bg-blue-100">
                  <Shield className="h-5 w-5 text-blue-600" />
                </div>
                <CardTitle className="text-base">Verification Staff</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-2">Verify scholars and manage applications</p>
              <div className="flex flex-wrap gap-1">
                {ADMIN_PERMISSIONS.verifier_staff.map((perm) => (
                  <Badge key={perm} variant="outline" className="text-xs bg-blue-50">
                    {perm}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-2">
              <div className="flex items-center gap-2">
                <div className="p-2 rounded-lg bg-green-100">
                  <QrCode className="h-5 w-5 text-green-600" />
                </div>
                <CardTitle className="text-base">QR Scanner Staff</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-2">QR code scanning only</p>
              <div className="flex flex-wrap gap-1">
                {ADMIN_PERMISSIONS.scanner_staff.map((perm) => (
                  <Badge key={perm} variant="outline" className="text-xs bg-green-50">
                    {perm}
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Staff List */}
        <Card>
          <CardHeader>
            <CardTitle>Staff Members</CardTitle>
            <CardDescription>
              {staffMembers.length} staff member{staffMembers.length !== 1 ? "s" : ""} in the system
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Permissions</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {staffMembers.map((staff) => (
                    <TableRow key={staff.id}>
                      <TableCell className="font-medium">{staff.name}</TableCell>
                      <TableCell>{staff.email}</TableCell>
                      <TableCell>
                        <Badge className={`${getRoleBadgeColor(staff.adminRole!)} flex items-center gap-1 w-fit`}>
                          {getRoleIcon(staff.adminRole!)}
                          {getAdminRoleLabel(staff.adminRole!)}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {ADMIN_PERMISSIONS[staff.adminRole!]?.slice(0, 3).map((perm) => (
                            <Badge key={perm} variant="outline" className="text-xs">
                              {perm}
                            </Badge>
                          ))}
                          {ADMIN_PERMISSIONS[staff.adminRole!]?.length > 3 && (
                            <Badge variant="outline" className="text-xs">
                              +{ADMIN_PERMISSIONS[staff.adminRole!].length - 3} more
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        {staff.adminRole !== "head_admin" && (
                          <div className="flex justify-end gap-2">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => {
                                setSelectedStaff(staff)
                                setIsEditDialogOpen(true)
                              }}
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              onClick={() => {
                                setSelectedStaff(staff)
                                setIsDeleteDialogOpen(true)
                              }}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        )}
                        {staff.adminRole === "head_admin" && (
                          <span className="text-xs text-muted-foreground">Protected</span>
                        )}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Edit Role Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Staff Role</DialogTitle>
            <DialogDescription>
              Change the role and permissions for {selectedStaff?.name}.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Current Role</Label>
              <p className="text-sm text-muted-foreground">
                {selectedStaff && getAdminRoleLabel(selectedStaff.adminRole!)}
              </p>
            </div>
            <div className="space-y-2">
              <Label>New Role</Label>
              <Select
                value={selectedStaff?.adminRole}
                onValueChange={(value: AdminRole) => 
                  setSelectedStaff(selectedStaff ? { ...selectedStaff, adminRole: value } : null)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="verifier_staff">
                    <div className="flex items-center gap-2">
                      <Shield className="h-4 w-4 text-blue-600" />
                      <span>Verification Staff</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="scanner_staff">
                    <div className="flex items-center gap-2">
                      <QrCode className="h-4 w-4 text-green-600" />
                      <span>QR Scanner Staff</span>
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleEditRole} className="bg-emerald-600 hover:bg-emerald-700">
              Save Changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Delete Confirmation Dialog */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remove Staff Member?</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to remove {selectedStaff?.name} from the system? 
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteStaff}
              className="bg-red-600 hover:bg-red-700"
            >
              Remove
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </AdminLayout>
  )
}
[V0_FILE]typescriptreact:file="components/permission-guard.tsx"
"use client"

import React from "react"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { hasPermission } from "@/lib/storage"
import { useToast } from "@/components/ui/use-toast"

interface PermissionGuardProps {
  children: React.ReactNode
  permission: string
  fallbackUrl?: string
}

export function PermissionGuard({ 
  children, 
  permission, 
  fallbackUrl = "/admin/dashboard" 
}: PermissionGuardProps) {
  const { user, isLoading } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    if (!isLoading && user && user.role === "admin") {
      if (!hasPermission(user, permission)) {
        toast({
          variant: "destructive",
          title: "Access Denied",
          description: "You don't have permission to access this page.",
        })
        router.push(fallbackUrl)
      }
    }
  }, [user, isLoading, permission, router, toast, fallbackUrl])

if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600"></div>
      </div>
    )
  }

if (!user || user.role !== "admin" || !hasPermission(user, permission)) {
    return null
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/applications/page.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AdminLayout } from "@/components/admin-layout"
import { ApplicationsTable } from "@/components/applications-table"
import { FileText } from "lucide-react"
import { PermissionGuard } from "@/components/permission-guard"

export default function ApplicationsPage() {
  return (
    <PermissionGuard permission="applications">
      <AdminLayout>
        <div className="mb-8">
          <div className="flex items-center gap-4 mb-2">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600">
              <FileText className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold tracking-tight text-slate-900">Applications</h1>
              <p className="text-slate-600">Manage and review scholarship applications</p>
            </div>
          </div>
        </div>

<Card className="border-0 shadow-sm">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold text-slate-900">All Applications</CardTitle>
            <CardDescription className="text-slate-600">Review and process scholarship applications</CardDescription>
          </CardHeader>
          <CardContent>
            <ApplicationsTable />
          </CardContent>
        </Card>
      </AdminLayout>
    </PermissionGuard>
  )
}
[V0_FILE]typescriptreact:file="app/student/dashboard/page.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { StudentLayout } from "@/components/student-layout"
import { ApplicationStatus } from "@/components/application-status"
import { useAuth } from "@/contexts/auth-context"
import {
  getApplicationsByStudentId,
  getDocumentsByStudentId,
  getApplicationHistoryByStudentId,
  getVerificationSchedules,
  getFinancialDistributionScheduleForBarangay,
  hasStudentClaimed,
  getClaimedRecord,
  type StudentProfile,
  type VerificationSchedule,
  type FinancialDistributionSchedule,
  type Application,
} from "@/lib/storage"
import {
  FileText,
  Calendar,
  School,
  ChevronRight,
  Clock,
  History,
  AlertCircle,
  CheckCircle,
  Info,
  DollarSign,
  Wallet,
  XCircle,
} from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

function formatDate(dateString: string | undefined): string {
  if (!dateString) return "Not yet"
  const date = new Date(dateString)
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })
}

function getTimelineSteps(application: Application | null, userId?: string) {
  const steps = [
    {
      id: "submitted",
      title: "Application Submitted",
      description: "Your application has been successfully submitted.",
      status: "pending" as "completed" | "current" | "pending",
      date: "",
    },
    {
      id: "verification",
      title: "Document Verification",
      description: "Your documents are being reviewed by our staff.",
      status: "pending" as "completed" | "current" | "pending",
      date: "",
    },
    {
      id: "approval",
      title: "Application Review",
      description: "Waiting for final review from the scholarship committee.",
      status: "pending" as "completed" | "current" | "pending",
      date: "",
    },
    {
      id: "financial",
      title: "Financial Aid Release",
      description: "Scholarship funds will be released after approval.",
      status: "pending" as "completed" | "current" | "pending",
      date: "",
    },
  ]

if (!application) {
    // No application yet - all steps pending
    return steps
  }

// Check if student has claimed their financial aid
  const hasClaimed = userId ? hasStudentClaimed(userId) : false
  const claimedRecord = userId ? getClaimedRecord(userId) : undefined

// Step 1: Application Submitted - always completed if application exists
  steps[0].status = "completed"
  steps[0].date = formatDate(application.submittedAt || application.createdAt)

if (application.status === "pending") {
    // Application is pending - verification is in progress
    steps[1].status = "current"
    steps[1].date = "In Progress"
    steps[2].status = "pending"
    steps[2].date = "Pending"
    steps[3].status = "pending"
    steps[3].date = "Pending"
  } else if (application.status === "approved") {
    // Application approved
    steps[1].status = "completed"
    steps[1].date = "Verified"
    steps[2].status = "completed"
    steps[2].date = formatDate(application.updatedAt)
    steps[2].description = "Your application has been approved by the scholarship committee."
    
    if (hasClaimed) {
      // Financial aid has been claimed
      steps[3].status = "completed"
      steps[3].date = claimedRecord ? formatDate(claimedRecord.odeclaimedAt) : "Claimed"
      steps[3].title = "Financial Aid Claimed"
      steps[3].description = "Congratulations! You have successfully received your scholarship funds."
    } else {
      // Approved but not yet claimed
      steps[3].status = "current"
      steps[3].date = "Ready for release"
      steps[3].description = "You are eligible to receive your scholarship funds during the distribution schedule."
    }
  } else if (application.status === "rejected") {
    // Application rejected
    steps[1].status = "completed"
    steps[1].date = "Reviewed"
    steps[2].status = "completed"
    steps[2].date = formatDate(application.updatedAt)
    steps[2].title = "Application Rejected"
    steps[2].description =
      application.feedback || "Your application was not approved. Please contact the office for more information."
    steps[3].status = "pending"
    steps[3].date = "N/A"
  }

return steps
}

export default function StudentDashboard() {
  const { user } = useAuth()
  const [studentData, setStudentData] = useState({
    id: "",
    name: "",
    email: "",
    course: "",
    yearLevel: "",
    school: "",
    applicationStatus: "pending",
    semester: "1st Semester",
    academicYear: "2023-2024",
    barangay: "",
  })

const [currentApplication, setCurrentApplication] = useState<Application | null>(null)
  const [applicationHistory, setApplicationHistory] = useState([])
  const [verificationSchedule, setVerificationSchedule] = useState<VerificationSchedule | null>(null)
  const [scheduleStatus, setScheduleStatus] = useState<"active" | "ended" | "upcoming" | "none">("none")
  const [financialSchedule, setFinancialSchedule] = useState<FinancialDistributionSchedule | null>(null)
  const [financialScheduleStatus, setFinancialScheduleStatus] = useState<"active" | "ended" | "upcoming" | "none">(
    "none",
  )
  const [hasClaimed, setHasClaimed] = useState(false)
  const [claimedDate, setClaimedDate] = useState<string | null>(null)

useEffect(() => {
    if (user) {
      // Check if student has claimed their financial aid
      const claimed = hasStudentClaimed(user.id)
      setHasClaimed(claimed)
      if (claimed) {
        const record = getClaimedRecord(user.id)
        if (record) {
          setClaimedDate(record.odeclaimedAt)
        }
      }
      
      // Get student application data
      const applications = getApplicationsByStudentId(user.id)
      const documents = getDocumentsByStudentId(user.id)
      const history = getApplicationHistoryByStudentId(user.id)
      setApplicationHistory(history)

// Get student's barangay from profile
      const profile = user.profileData as StudentProfile
      const studentBarangay = profile?.barangay || ""

if (applications.length > 0) {
        const latestApplication = applications[applications.length - 1]
        setCurrentApplication(latestApplication)
        setStudentData({
          id: user.id,
          name: user.profileData?.fullName || user.name,
          email: user.profileData?.email || user.email,
          course: latestApplication.course || user.profileData?.course || "",
          yearLevel: latestApplication.yearLevel || user.profileData?.yearLevel || "",
          school: latestApplication.school || user.profileData?.schoolName || "",
          applicationStatus: latestApplication.status,
          semester: "1st Semester",
          academicYear: "2023-2024",
          barangay: studentBarangay,
        })
      } else {
        setCurrentApplication(null)
        setStudentData({
          id: user.id,
          name: user.profileData?.fullName || user.name,
          email: user.profileData?.email || user.email,
          course: user.profileData?.course || "",
          yearLevel: user.profileData?.yearLevel || "",
          school: user.profileData?.schoolName || "",
          applicationStatus: "pending",
          semester: "1st Semester",
          academicYear: "2023-2024",
          barangay: studentBarangay,
        })
      }

if (studentBarangay) {
        const schedules = getVerificationSchedules()
        const matchingSchedule = schedules.find((schedule) => schedule.barangay === studentBarangay)

if (matchingSchedule) {
          setVerificationSchedule(matchingSchedule)

// Determine current status based on dates
          const now = new Date()
          const start = new Date(matchingSchedule.startDate)
          const end = new Date(matchingSchedule.endDate)

if (now < start) {
            setScheduleStatus("upcoming")
          } else if (now > end) {
            setScheduleStatus("ended")
          } else {
            setScheduleStatus("active")
          }
        } else {
          setScheduleStatus("none")
        }

const financialDistributionSchedule = getFinancialDistributionScheduleForBarangay(studentBarangay)

if (financialDistributionSchedule) {
          setFinancialSchedule(financialDistributionSchedule)

// Determine current status based on dates
          const now = new Date()
          const start = new Date(financialDistributionSchedule.startDate)
          const end = new Date(financialDistributionSchedule.endDate)

if (now < start) {
            setFinancialScheduleStatus("upcoming")
          } else if (now > end) {
            setFinancialScheduleStatus("ended")
          } else {
            setFinancialScheduleStatus("active")
          }
        } else {
          setFinancialScheduleStatus("none")
        }
      }
    }
  }, [user])

return (
    <StudentLayout>
      <div className="relative overflow-hidden rounded-xl bg-pattern p-6 mb-6">
        <div className="absolute top-0 right-0 w-64 h-64 bg-green-400 rounded-full filter blur-3xl opacity-10 -mr-20 -mt-20"></div>
        <div className="relative">
          <h1 className="text-3xl font-bold tracking-tight text-gray-900">Welcome Back, {studentData.name}</h1>
          <p className="text-gray-600 mt-1">Here's an overview of your scholarship application</p>
        </div>
      </div>

{hasClaimed && (
        <div className="mb-6 animate-fade-in">
          <Alert className="border-emerald-300 bg-emerald-50">
            <CheckCircle className="h-5 w-5 text-emerald-600" />
            <AlertTitle className="text-emerald-900 font-semibold">Financial Aid Successfully Claimed</AlertTitle>
            <AlertDescription className="text-emerald-800">
              <div className="mt-2 space-y-2">
                <p>
                  Congratulations! You have successfully received your scholarship financial aid
                  {claimedDate && (
                    <span>
                      {" "}on{" "}
                      <span className="font-medium">
                        {new Date(claimedDate).toLocaleDateString("en-US", {
                          month: "long",
                          day: "numeric",
                          year: "numeric",
                        })}
                      </span>
                    </span>
                  )}
                  .
                </p>
                <p className="mt-3 pt-3 border-t border-emerald-200 text-sm">
                  Thank you for being part of the BTS Scholarship Program. Continue to excel in your studies!
                </p>
              </div>
            </AlertDescription>
          </Alert>
        </div>
      )}

<div className="mb-6 animate-fade-in">
        {scheduleStatus === "active" && verificationSchedule && (
          <Alert className="border-green-200 bg-green-50">
            <CheckCircle className="h-5 w-5 text-green-600" />
            <AlertTitle className="text-green-900 font-semibold">Document Verification Schedule</AlertTitle>
            <AlertDescription className="text-green-800">
              <div className="mt-2 space-y-2">
                <p className="font-medium">
                  Barangay: <span className="text-green-900">{verificationSchedule.barangay}</span>
                </p>
                <p>
                  Schedule:{" "}
                  <span className="font-medium">
                    {new Date(verificationSchedule.startDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>{" "}
                  to{" "}
                  <span className="font-medium">
                    {new Date(verificationSchedule.endDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </p>
                {verificationSchedule.dailyLimit && (
                  <p className="text-sm">Daily limit: {verificationSchedule.dailyLimit} students</p>
                )}
                <p className="mt-3 pt-3 border-t border-green-200 text-sm">
                  <strong>Reminder:</strong> Please bring your original documents to the Municipal Hall for verification
                  during the scheduled period.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{scheduleStatus === "upcoming" && verificationSchedule && (
          <Alert className="border-blue-200 bg-blue-50">
            <Info className="h-5 w-5 text-blue-600" />
            <AlertTitle className="text-blue-900 font-semibold">Upcoming Verification Schedule</AlertTitle>
            <AlertDescription className="text-blue-800">
              <div className="mt-2 space-y-2">
                <p className="font-medium">
                  Barangay: <span className="text-blue-900">{verificationSchedule.barangay}</span>
                </p>
                <p>
                  Schedule starts on:{" "}
                  <span className="font-medium">
                    {new Date(verificationSchedule.startDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </p>
                <p>
                  Schedule ends on:{" "}
                  <span className="font-medium">
                    {new Date(verificationSchedule.endDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </p>
                <p className="mt-3 pt-3 border-t border-blue-200 text-sm">
                  Please prepare your original documents for verification at the Municipal Hall.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{scheduleStatus === "ended" && verificationSchedule && (
          <Alert className="border-amber-200 bg-amber-50">
            <AlertCircle className="h-5 w-5 text-amber-600" />
            <AlertTitle className="text-amber-900 font-semibold">Verification Period Ended</AlertTitle>
            <AlertDescription className="text-amber-800">
              <div className="mt-2 space-y-2">
                <p>
                  The document verification period for{" "}
                  <span className="font-medium">{verificationSchedule.barangay}</span> has ended on{" "}
                  <span className="font-medium">
                    {new Date(verificationSchedule.endDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                  .
                </p>
                <p className="mt-3 pt-3 border-t border-amber-200 text-sm">
                  Please wait for future announcements regarding the next verification schedule.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{scheduleStatus === "none" && (
          <Alert className="border-gray-200 bg-gray-50">
            <Info className="h-5 w-5 text-gray-600" />
            <AlertTitle className="text-gray-900 font-semibold">Verification Schedule</AlertTitle>
            <AlertDescription className="text-gray-700">
              <p className="mt-2">
                The document verification schedule for your barangay has not been announced yet. Please check back later
                for updates.
              </p>
            </AlertDescription>
          </Alert>
        )}
      </div>

<div className="mb-6 animate-fade-in">
        {financialScheduleStatus === "active" && financialSchedule && (
          <Alert className="border-blue-200 bg-blue-50">
            <Wallet className="h-5 w-5 text-blue-600" />
            <AlertTitle className="text-blue-900 font-semibold">Financial Aid Distribution Schedule</AlertTitle>
            <AlertDescription className="text-blue-800">
              <div className="mt-2 space-y-2">
                <p className="font-medium">Distribution is now active for your barangay</p>
                <p>
                  Start Date:{" "}
                  <span className="font-medium">
                    {new Date(financialSchedule.startDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </p>
                <p>
                  End Date:{" "}
                  <span className="font-medium">
                    {new Date(financialSchedule.endDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                </p>
                <p>
                  Distribution Time: <span className="font-medium">{financialSchedule.startTime}</span>
                </p>
                <p>
                  Aid Amount:{" "}
                  <span className="font-medium text-blue-900">
                    ₱{financialSchedule.distributionAmount.toLocaleString()}
                  </span>
                </p>
                <p className="mt-3 pt-3 border-t border-blue-200 text-sm">
                  <strong>Important:</strong> Please proceed to the Municipal Hall at the scheduled time to claim your
                  financial aid. Bring a valid ID for verification.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{financialScheduleStatus === "upcoming" && financialSchedule && (
          <Alert className="border-indigo-200 bg-indigo-50">
            <DollarSign className="h-5 w-5 text-indigo-600" />
            <AlertTitle className="text-indigo-900 font-semibold">Upcoming Financial Aid Distribution</AlertTitle>
            <AlertDescription className="text-indigo-800">
              <div className="mt-2 space-y-2">
                <p className="font-medium">Get ready! Financial aid distribution is coming soon.</p>
                <p>
                  Distribution Starts:{" "}
                  <span className="font-medium">
                    {new Date(financialSchedule.startDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}{" "}
                    at {financialSchedule.startTime}
                  </span>
                </p>
                <p>
                  Expected Aid Amount:{" "}
                  <span className="font-medium text-indigo-900">
                    ₱{financialSchedule.distributionAmount.toLocaleString()}
                  </span>
                </p>
                <p className="mt-3 pt-3 border-t border-indigo-200 text-sm">
                  Mark your calendar! Financial aid will be distributed at the Municipal Hall during the scheduled
                  period.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{financialScheduleStatus === "ended" && financialSchedule && (
          <Alert className="border-orange-200 bg-orange-50">
            <AlertCircle className="h-5 w-5 text-orange-600" />
            <AlertTitle className="text-orange-900 font-semibold">Financial Aid Distribution Period Ended</AlertTitle>
            <AlertDescription className="text-orange-800">
              <div className="mt-2 space-y-2">
                <p>
                  The financial aid distribution period ended on{" "}
                  <span className="font-medium">
                    {new Date(financialSchedule.endDate).toLocaleDateString("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </span>
                  .
                </p>
                <p className="mt-3 pt-3 border-t border-orange-200 text-sm">
                  If you haven't claimed your aid, please contact the Municipal Scholarship Office for assistance.
                </p>
              </div>
            </AlertDescription>
          </Alert>
        )}

{financialScheduleStatus === "none" && (
          <Alert className="border-gray-200 bg-gray-50">
            <Info className="h-5 w-5 text-gray-600" />
            <AlertTitle className="text-gray-900 font-semibold">Financial Aid Distribution Schedule</AlertTitle>
            <AlertDescription className="text-gray-700">
              <p className="mt-2">
                The financial aid distribution schedule for your barangay has not been announced yet. Please check back
                later for updates.
              </p>
            </AlertDescription>
          </Alert>
        )}
      </div>

<div className="space-y-6 animate-fade-in">
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <div className="card-hover">
            <Card className="overflow-hidden border border-green-100 shadow-md">
              <div className="h-1.5 bg-gradient-to-r from-green-400 to-green-600"></div>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 bg-gradient-to-r from-green-50 to-white">
                <CardTitle className="text-sm font-medium">Application Status</CardTitle>
<Badge
  variant={
  hasClaimed
  ? "custom"
  : studentData.applicationStatus === "approved"
  ? "custom"
  : studentData.applicationStatus === "rejected"
  ? "destructive"
  : "outline"
  }
  className={
  hasClaimed
  ? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200 shadow-sm"
  : studentData.applicationStatus === "approved"
  ? "bg-green-100 text-green-800 hover:bg-green-200 shadow-sm"
  : studentData.applicationStatus === "rejected"
  ? "shadow-sm"
  : !currentApplication && applicationHistory.length > 0
  ? "bg-blue-100 text-blue-800 hover:bg-blue-200 shadow-sm"
  : "shadow-sm"
  }
  >
  {hasClaimed
  ? "Claimed"
  : studentData.applicationStatus === "approved"
  ? "Approved"
  : studentData.applicationStatus === "rejected"
  ? "Rejected"
  : !currentApplication && applicationHistory.length > 0
  ? "Ready to Apply"
  : "Pending"}
  </Badge>
              </CardHeader>
              <CardContent className="pt-4">
                <div className="flex items-center gap-3 mb-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
                    <Calendar className="h-5 w-5 text-green-600" />
                  </div>
                  <div>
                    <div className="text-sm text-muted-foreground">Academic Year</div>
                    <div className="font-medium">
                      {studentData.academicYear}, {studentData.semester}
                    </div>
                  </div>
                </div>
                <ApplicationStatus status={studentData.applicationStatus} />
              </CardContent>
            </Card>
          </div>

<div className="card-hover">
            <Card className="overflow-hidden border border-green-100 shadow-md">
              <div className="h-1.5 bg-gradient-to-r from-blue-400 to-blue-600"></div>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 bg-gradient-to-r from-blue-50 to-white">
                <CardTitle className="text-sm font-medium">Academic Information</CardTitle>
                <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                  <School className="h-4 w-4 text-blue-600" />
                </div>
              </CardHeader>
              <CardContent className="pt-4">
                <div className="grid gap-3">
                  <div className="flex justify-between items-center p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">School:</span>
                    <span className="text-sm font-medium">{studentData.school || "Not provided"}</span>
                  </div>
                  <div className="flex justify-between items-center p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">Course:</span>
                    <span className="text-sm font-medium">{studentData.course || "Not provided"}</span>
                  </div>
                  <div className="flex justify-between items-center p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">Year Level:</span>
                    <span className="text-sm font-medium">{studentData.yearLevel || "Not provided"}</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="card-hover">
            <Card className="overflow-hidden border border-green-100 shadow-md">
              <div className="h-1.5 bg-gradient-to-r from-amber-400 to-amber-600"></div>
              <CardHeader className="bg-gradient-to-r from-amber-50 to-white">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle>Required Documents</CardTitle>
                    <CardDescription>Check your document submission status</CardDescription>
                  </div>
                  <div className="h-10 w-10 rounded-full bg-amber-100 flex items-center justify-center">
                    <FileText className="h-5 w-5 text-amber-600" />
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">Enrollment Form</span>
                    <Badge variant="outline" className="shadow-sm">
                      Required
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">Grades</span>
                    <Badge variant="outline" className="shadow-sm">
                      Required
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between p-2 rounded-md bg-white shadow-sm border border-gray-100">
                    <span className="text-sm">School ID</span>
                    <Badge variant="outline" className="shadow-sm">
                      Required
                    </Badge>
                  </div>
                </div>
                <div className="mt-4">
                  <Link href="/student/documents">
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full group shadow-sm hover:shadow transition-all duration-200 bg-transparent"
                    >
                      <span>View all documents</span>
                      <ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

<div className="grid gap-6 md:grid-cols-1">
          <div className="card-hover">
            <Card className="overflow-hidden border-0 shadow-lg bg-gradient-to-br from-white to-gray-50">
              <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b">
                <div className="flex justify-between items-center">
                  <div>
                    <CardTitle>Application Timeline</CardTitle>
                    <CardDescription>Track your scholarship application progress</CardDescription>
                  </div>
                  <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                    <Clock className="h-5 w-5 text-green-600" />
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                {!currentApplication ? (
                  <div className="text-center py-8">
                    {applicationHistory.length > 0 ? (
                      <>
                        <div className="h-16 w-16 rounded-full bg-gradient-to-br from-green-100 to-emerald-100 flex items-center justify-center mx-auto mb-4">
                          <CheckCircle className="h-8 w-8 text-green-600" />
                        </div>
                        <h3 className="text-lg font-semibold mb-2 text-green-800">Ready for Next Semester!</h3>
                        <p className="text-sm text-muted-foreground mb-4 max-w-md mx-auto">
                          Your previous application has been completed. You can now apply for the next semester's scholarship.
                        </p>
                        <Link href="/student/documents">
                          <Button className="bg-green-600 hover:bg-green-700">
                            Apply for Next Semester
                          </Button>
                        </Link>
                      </>
                    ) : (
                      <>
                        <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                        <h3 className="text-lg font-semibold mb-2">No Application Yet</h3>
                        <p className="text-sm text-muted-foreground mb-4">
                          You haven't submitted a scholarship application yet.
                        </p>
                        <Link href="/student/documents">
                          <Button className="bg-green-600 hover:bg-green-700">Submit Application</Button>
                        </Link>
                      </>
                    )}
                  </div>
                ) : (
                  <div className="relative pl-6 border-l-2 border-green-200">
                    {getTimelineSteps(currentApplication, user?.id).map((step, index) => {
                      const isCompleted = step.status === "completed"
                      const isCurrent = step.status === "current"
                      const isPending = step.status === "pending"
                      const isRejected = currentApplication?.status === "rejected" && step.id === "approval"

return (
                        <div
                          key={step.id}
                          className={`mb-8 relative animate-fade-in ${isPending ? "opacity-50" : ""}`}
                          style={{ animationDelay: `${0.1 * (index + 1)}s` }}
                        >
                          <div
                            className={`absolute -left-[25px] h-6 w-6 rounded-full flex items-center justify-center shadow-md ${
                              isCompleted
                                ? isRejected
                                  ? "bg-gradient-to-r from-red-500 to-red-600"
                                  : "bg-gradient-to-r from-green-500 to-green-600"
                                : isCurrent
                                  ? "bg-gradient-to-r from-green-200 to-green-300 animate-pulse"
                                  : "bg-muted"
                            }`}
                          >
                            {isCompleted ? (
                              isRejected ? (
                                <XCircle className="h-3 w-3 text-white" />
                              ) : (
                                <CheckCircle className="h-3 w-3 text-white" />
                              )
                            ) : (
                              <div
                                className={`h-2 w-2 rounded-full ${isCurrent ? "bg-green-600" : "bg-muted-foreground"}`}
                              ></div>
                            )}
                          </div>
                          <div className="pb-2">
                            <h3 className={`text-base font-semibold ${isRejected ? "text-red-600" : ""}`}>
                              {step.title}
                            </h3>
                            <p className={`text-sm ${isRejected ? "text-red-500" : "text-muted-foreground"}`}>
                              {step.date}
                            </p>
                          </div>
                          <p
                            className={`text-sm p-3 rounded-md shadow-sm border ${
                              isRejected ? "bg-red-50 border-red-200 text-red-700" : "bg-white border-gray-100"
                            }`}
                          >
                            {step.description}
                          </p>
                        </div>
                      )
                    })}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>

{applicationHistory.length > 0 && (
          <div className="grid gap-6 md:grid-cols-1">
            <div className="card-hover">
              <Card className="overflow-hidden border border-purple-100 shadow-md">
                <div className="h-1.5 bg-gradient-to-r from-purple-400 to-purple-600"></div>
                <CardHeader className="bg-gradient-to-r from-purple-50 to-white">
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Application History</CardTitle>
                      <CardDescription>Your previous scholarship applications and outcomes</CardDescription>
                    </div>
                    <div className="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                      <History className="h-5 w-5 text-purple-600" />
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="pt-6">
                  <div className="space-y-4">
                    {applicationHistory.slice(0, 3).map((historyItem, index) => (
                      <div
                        key={historyItem.id}
                        className="flex items-center justify-between p-4 rounded-lg bg-white shadow-sm border border-gray-100 animate-fade-in"
                        style={{ animationDelay: `${index * 0.1}s` }}
                      >
                        <div className="flex items-center gap-4">
                          <div
                            className={`h-10 w-10 rounded-full flex items-center justify-center ${
                              historyItem.outcome === "approved" ? "bg-green-100" : "bg-red-100"
                            }`}
                          >
                            <Calendar
                              className={`h-5 w-5 ${
                                historyItem.outcome === "approved" ? "text-green-600" : "text-red-600"
                              }`}
                            />
                          </div>
                          <div>
                            <h4 className="font-medium text-gray-900">
                              {historyItem.applicationData.course} - {historyItem.applicationData.yearLevel}
                            </h4>
                            <p className="text-sm text-gray-600">
                              {historyItem.applicationData.school} • {historyItem.applicationData.barangay}
                            </p>
                            <p className="text-xs text-gray-500">
                              Completed: {new Date(historyItem.completedDate).toLocaleDateString()}
                            </p>
                          </div>
                        </div>
                        <div className="text-right">
                          <Badge
                            variant={historyItem.outcome === "approved" ? "custom" : "destructive"}
                            className={
                              historyItem.outcome === "approved" ? "bg-green-100 text-green-800 hover:bg-green-200" : ""
                            }
                          >
                            {historyItem.outcome === "approved" ? "Approved" : "Rejected"}
                          </Badge>
                          {historyItem.financialAidAmount > 0 && (
                            <p className="text-sm font-medium text-green-600 mt-1">
                              ₱{historyItem.financialAidAmount.toLocaleString()}
                            </p>
                          )}
                        </div>
                      </div>
                    ))}
                    {applicationHistory.length > 3 && (
                      <div className="text-center pt-2">
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-purple-600 border-purple-200 hover:bg-purple-50 bg-transparent"
                        >
                          View All History ({applicationHistory.length} total)
                        </Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </StudentLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/verification/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/approved-emails/page.tsx"
"use client"

import { useState, useEffect } from "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 { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { AdminLayout } from "@/components/admin-layout"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Plus, Trash2, Mail, CheckCircle, XCircle, Calendar, User, AlertCircle } from "lucide-react"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { getPreApprovedEmails, addPreApprovedEmail, removePreApprovedEmail, hasPermission, type PreApprovedEmail } from "@/lib/storage"
import { PermissionGuard } from "@/components/permission-guard"
import { useAuth } from "@/contexts/auth-context"

export default function ApprovedEmailsPage() {
  const { toast } = useToast()
  const [emails, setEmails] = useState<PreApprovedEmail[]>([])
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [emailsInput, setEmailsInput] = useState("")
  const [addResults, setAddResults] = useState<{ success: string[]; failed: string[] }>({ success: [], failed: [] })

// Load emails on component mount
  useEffect(() => {
    loadEmails()
  }, [])

const loadEmails = () => {
    const preApprovedEmails = getPreApprovedEmails()
    setEmails(preApprovedEmails)
  }

const handleAddEmails = async () => {
    if (!emailsInput.trim()) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Please enter at least one email address",
      })
      return
    }

// Parse emails from input (supports comma, semicolon, newline, or space separated)
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    const rawEmails = emailsInput
      .split(/[\n,;\s]+/)
      .map((e) => e.trim().toLowerCase())
      .filter((e) => e.length > 0)
    
    // Remove duplicates
    const uniqueEmails = [...new Set(rawEmails)]

if (uniqueEmails.length === 0) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "No valid email addresses found",
      })
      return
    }

setIsLoading(true)
    const successEmails: string[] = []
    const failedEmails: string[] = []

for (const email of uniqueEmails) {
      if (!emailRegex.test(email)) {
        failedEmails.push(`${email} (invalid format)`)
        continue
      }

try {
        await addPreApprovedEmail(
          email,
          undefined,
          undefined,
          "admin1",
        )
        successEmails.push(email)
      } catch (error: any) {
        failedEmails.push(`${email} (${error.message || "already exists"})`)
      }
    }

setAddResults({ success: successEmails, failed: failedEmails })

if (successEmails.length > 0) {
      toast({
        title: "Emails Added",
        description: `Successfully added ${successEmails.length} email${successEmails.length > 1 ? "s" : ""}${failedEmails.length > 0 ? `. ${failedEmails.length} failed.` : ""}`,
      })
      loadEmails()
    } else {
      toast({
        variant: "destructive",
        title: "Error",
        description: "No emails were added. Check the results below.",
      })
    }

setIsLoading(false)
  }

const resetDialog = () => {
    setEmailsInput("")
    setAddResults({ success: [], failed: [] })
    setIsAddDialogOpen(false)
  }

const handleRemoveEmail = async (id: string, email: string) => {
    try {
      const success = removePreApprovedEmail(id)
      if (success) {
        toast({
          title: "Success",
          description: `Removed ${email} from pre-approved list`,
        })
        loadEmails()
      } else {
        toast({
          variant: "destructive",
          title: "Error",
          description: "Failed to remove email",
        })
      }
    } catch (error: any) {
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message || "Failed to remove email",
      })
    }
  }

return (
    <PermissionGuard permission="approved-emails">
      <AdminLayout>
        <div className="space-y-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold tracking-tight">Pre-Approved Emails</h1>
              <p className="text-muted-foreground">Manage the list of emails authorized to register for scholarships</p>
            </div>

<Dialog open={isAddDialogOpen} onOpenChange={(open) => {
              if (!open) resetDialog()
              else setIsAddDialogOpen(true)
            }}>
              <DialogTrigger asChild>
                <Button className="bg-green-600 hover:bg-green-700">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Emails
                </Button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                  <DialogTitle>Add Pre-Approved Emails</DialogTitle>
                  <DialogDescription>
                    Add one or multiple email addresses to the pre-approved list. You can paste a list of emails separated by commas, semicolons, spaces, or new lines.
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="emails">Email Addresses *</Label>
                    <Textarea
                      id="emails"
                      placeholder="Enter emails (one per line or separated by commas)
example1@email.com
example2@email.com, example3@email.com"
                      value={emailsInput}
                      onChange={(e) => setEmailsInput(e.target.value)}
                      className="min-h-[120px] font-mono text-sm"
                    />
                    <p className="text-xs text-muted-foreground">
                      Supports multiple formats: one email per line, comma-separated, or space-separated.
                    </p>
                  </div>

{/* Results display */}
                  {(addResults.success.length > 0 || addResults.failed.length > 0) && (
                    <div className="space-y-3">
                      {addResults.success.length > 0 && (
                        <Alert className="border-green-200 bg-green-50">
                          <CheckCircle className="h-4 w-4 text-green-600" />
                          <AlertDescription className="text-green-800">
                            <span className="font-medium">Added ({addResults.success.length}):</span>
                            <div className="mt-1 text-xs max-h-20 overflow-y-auto">
                              {addResults.success.join(", ")}
                            </div>
                          </AlertDescription>
                        </Alert>
                      )}
                      {addResults.failed.length > 0 && (
                        <Alert className="border-red-200 bg-red-50">
                          <AlertCircle className="h-4 w-4 text-red-600" />
                          <AlertDescription className="text-red-800">
                            <span className="font-medium">Failed ({addResults.failed.length}):</span>
                            <div className="mt-1 text-xs max-h-20 overflow-y-auto">
                              {addResults.failed.join(", ")}
                            </div>
                          </AlertDescription>
                        </Alert>
                      )}
                    </div>
                  )}
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={resetDialog} disabled={isLoading}>
                    {addResults.success.length > 0 ? "Done" : "Cancel"}
                  </Button>
                  <Button onClick={handleAddEmails} disabled={isLoading || !emailsInput.trim()}>
                    {isLoading ? "Adding..." : "Add Emails"}
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>

{/* Statistics Cards */}
          <div className="grid gap-4 md:grid-cols-3">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Pre-Approved</CardTitle>
                <Mail className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{emails.length}</div>
                <p className="text-xs text-muted-foreground">Emails in the system</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Available</CardTitle>
                <CheckCircle className="h-4 w-4 text-green-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-600">{emails.filter((email) => !email.isUsed).length}</div>
                <p className="text-xs text-muted-foreground">Ready for registration</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Used</CardTitle>
                <XCircle className="h-4 w-4 text-blue-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">{emails.filter((email) => email.isUsed).length}</div>
                <p className="text-xs text-muted-foreground">Already registered</p>
              </CardContent>
            </Card>
          </div>

{/* Emails Table */}
          <Card>
            <CardHeader>
              <CardTitle>Pre-Approved Email List</CardTitle>
              <CardDescription>All emails authorized to register for the scholarship program</CardDescription>
            </CardHeader>
            <CardContent>
              {emails.length === 0 ? (
                <div className="text-center py-8">
                  <Mail className="mx-auto h-12 w-12 text-muted-foreground" />
                  <h3 className="mt-2 text-sm font-semibold">No pre-approved emails</h3>
                  <p className="mt-1 text-sm text-muted-foreground">
                    Get started by adding the first pre-approved email.
                  </p>
                </div>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Email Address</TableHead>
                      <TableHead>Full Name</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Added Date</TableHead>
                      <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {emails.map((email) => (
                      <TableRow key={email.id}>
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-2">
                            <Mail className="h-4 w-4 text-muted-foreground" />
                            {email.email}
                          </div>
                        </TableCell>
                        <TableCell>
                          {email.fullName ? (
                            <div className="flex items-center gap-2">
                              <User className="h-4 w-4 text-muted-foreground" />
                              {email.fullName}
                            </div>
                          ) : (
                            <span className="text-muted-foreground">Not specified</span>
                          )}
                        </TableCell>
                        <TableCell>
                          {email.isUsed ? (
                            <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                              Used
                            </Badge>
                          ) : (
                            <Badge variant="default" className="bg-green-100 text-green-800">
                              Available
                            </Badge>
                          )}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Calendar className="h-4 w-4" />
                            {formatDate(email.addedAt)}
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>Remove Pre-Approved Email</AlertDialogTitle>
                                <AlertDialogDescription>
                                  Are you sure you want to remove <strong>{email.email}</strong> from the pre-approved
                                  list? This action cannot be undone.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction
                                  onClick={() => handleRemoveEmail(email.id, email.email)}
                                  className="bg-red-600 hover:bg-red-700"
                                >
                                  Remove
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </div>
      </AdminLayout>
    </PermissionGuard>
  )
}
[V0_FILE]typescriptreact:file="components/applications-table.tsx"
"use client"

import { useState, useEffect } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { MoreHorizontal, Check, X, FileText, Download, Eye } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { getApplications, updateApplication, type Application } from "@/lib/storage"

interface ApplicationsTableProps {
  limit?: number
}

export function ApplicationsTable({ limit }: ApplicationsTableProps) {
  const { toast } = useToast()
  const [applications, setApplications] = useState<Application[]>([])
  const [loading, setLoading] = useState(true)
  const [documentsModalOpen, setDocumentsModalOpen] = useState(false)
  const [selectedApplication, setSelectedApplication] = useState<Application | null>(null)
  const [rejectDialogOpen, setRejectDialogOpen] = useState(false)
  const [applicationToReject, setApplicationToReject] = useState<Application | null>(null)
  const [rejectionReason, setRejectionReason] = useState("")
  const [isRejecting, setIsRejecting] = useState(false)

useEffect(() => {
    setLoading(true)
    const allApplications = getApplications()

const sortedApplications = allApplications.sort(
      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
    )

const limitedApplications = limit ? sortedApplications.slice(0, limit) : sortedApplications

setApplications(limitedApplications)
    setLoading(false)
  }, [limit])

const handleViewApplication = (applicationId: string) => {
    toast({
      title: "Viewing application",
      description: `Opening application ${applicationId} for review.`,
    })
  }

const handleViewDocuments = (applicationId: string) => {
    const application = applications.find((app) => app.id === applicationId)
    if (application) {
      setSelectedApplication(application)
      setDocumentsModalOpen(true)
    }
  }

const handleApproveApplication = (applicationId: string) => {
    const updatedApplication = updateApplication(applicationId, { status: "approved" })

if (updatedApplication) {
      setApplications(applications.map((app) => (app.id === applicationId ? { ...app, status: "approved" } : app)))

toast({
        title: "Application approved",
        description: `Application ${applicationId} has been approved.`,
        variant: "success",
      })
    } else {
      toast({
        title: "Error",
        description: "Failed to approve application. Please try again.",
        variant: "destructive",
      })
    }
  }

const openRejectDialog = (application: Application) => {
    setApplicationToReject(application)
    setRejectionReason("")
    setRejectDialogOpen(true)
  }

const handleRejectApplication = () => {
    if (!applicationToReject) return

if (!rejectionReason.trim()) {
      toast({
        title: "Reason required",
        description: "Please provide a reason for rejecting this application.",
        variant: "destructive",
      })
      return
    }

setIsRejecting(true)
    const updatedApplication = updateApplication(applicationToReject.id, { 
      status: "rejected",
      feedback: rejectionReason.trim()
    })

if (updatedApplication) {
      setApplications(applications.map((app) => 
        app.id === applicationToReject.id 
          ? { ...app, status: "rejected", feedback: rejectionReason.trim() } 
          : app
      ))

toast({
        title: "Application rejected",
        description: `Application for ${applicationToReject.fullName} has been rejected.`,
        variant: "default",
      })

setRejectDialogOpen(false)
      setApplicationToReject(null)
      setRejectionReason("")
    } else {
      toast({
        title: "Error",
        description: "Failed to reject application. Please try again.",
        variant: "destructive",
      })
    }
    setIsRejecting(false)
  }

return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[120px]">Application ID</TableHead>
              <TableHead className="w-[200px]">Name</TableHead>
              <TableHead className="w-[250px]">Course</TableHead>
              <TableHead className="w-[200px]">School</TableHead>
              <TableHead className="w-[120px]">Year Level</TableHead>
              <TableHead className="w-[150px]">Location</TableHead>
              <TableHead className="w-[140px]">Date Applied</TableHead>
              <TableHead className="w-[100px]">Status</TableHead>
              <TableHead className="w-[80px] text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={9} className="h-24 text-center">
                  Loading applications...
                </TableCell>
              </TableRow>
            ) : applications.length === 0 ? (
              <TableRow>
                <TableCell colSpan={9} className="h-24 text-center">
                  No applications found. Students need to apply for scholarships to see them here.
                </TableCell>
              </TableRow>
            ) : (
              applications.map((application) => (
                <TableRow key={application.id}>
                  <TableCell className="font-medium w-[120px] font-mono text-sm">{application.id}</TableCell>
                  <TableCell className="w-[200px] font-medium">{application.fullName}</TableCell>
                  <TableCell className="w-[250px] text-sm">{application.course}</TableCell>
                  <TableCell className="w-[200px] text-sm">{application.school}</TableCell>
                  <TableCell className="w-[120px] text-sm">{application.yearLevel}</TableCell>
                  <TableCell className="w-[150px] text-sm text-muted-foreground">{application.barangay}</TableCell>
                  <TableCell className="w-[140px] text-sm">
                    {new Date(application.createdAt).toLocaleDateString()}
                  </TableCell>
                  <TableCell className="w-[100px]">
                    <Badge
                      variant={
                        application.status === "approved"
                          ? "success"
                          : application.status === "rejected"
                            ? "destructive"
                            : "outline"
                      }
                      className="text-xs"
                    >
                      {application.status.charAt(0).toUpperCase() + application.status.slice(1)}
                    </Badge>
                  </TableCell>
                  <TableCell className="w-[80px] text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <MoreHorizontal className="h-4 w-4" />
                          <span className="sr-only">Open menu</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => handleViewDocuments(application.id)}>
                          <FileText className="mr-2 h-4 w-4" />
                          View Documents
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleApproveApplication(application.id)}>
                          <Check className="mr-2 h-4 w-4" />
                          Approve
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => openRejectDialog(application)}>
                          <X className="mr-2 h-4 w-4" />
                          Reject
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

<Dialog open={documentsModalOpen} onOpenChange={setDocumentsModalOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-emerald-600" />
              Student Documents - {selectedApplication?.fullName}
            </DialogTitle>
          </DialogHeader>

{selectedApplication && (
            <div className="space-y-6">
              <div className="bg-emerald-50 p-4 rounded-lg border border-emerald-200">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="font-medium text-emerald-800">Application ID:</span>
                    <p className="text-emerald-700">{selectedApplication.id}</p>
                  </div>
                  <div>
                    <span className="font-medium text-emerald-800">Course:</span>
                    <p className="text-emerald-700">{selectedApplication.course}</p>
                  </div>
                  <div>
                    <span className="font-medium text-emerald-800">School:</span>
                    <p className="text-emerald-700">{selectedApplication.school}</p>
                  </div>
                  <div>
                    <span className="font-medium text-emerald-800">Date Applied:</span>
                    <p className="text-emerald-700">{new Date(selectedApplication.createdAt).toLocaleDateString()}</p>
                  </div>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                      <FileText className="h-4 w-4 text-blue-600" />
                      Academic Records
                    </h3>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        <Eye className="h-3 w-3 mr-1" />
                        View
                      </Button>
                      <Button size="sm" variant="outline">
                        <Download className="h-3 w-3 mr-1" />
                        Download
                      </Button>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600">Official transcript and grades</p>
                  <div className="mt-2 text-xs text-gray-500">
                    Status: <span className="text-green-600 font-medium">Verified</span>
                  </div>
                </div>

<div className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                      <FileText className="h-4 w-4 text-green-600" />
                      Financial Documents
                    </h3>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        <Eye className="h-3 w-3 mr-1" />
                        View
                      </Button>
                      <Button size="sm" variant="outline">
                        <Download className="h-3 w-3 mr-1" />
                        Download
                      </Button>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600">Income statements and tax documents</p>
                  <div className="mt-2 text-xs text-gray-500">
                    Status: <span className="text-green-600 font-medium">Verified</span>
                  </div>
                </div>

<div className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                      <FileText className="h-4 w-4 text-purple-600" />
                      Identification
                    </h3>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        <Eye className="h-3 w-3 mr-1" />
                        View
                      </Button>
                      <Button size="sm" variant="outline">
                        <Download className="h-3 w-3 mr-1" />
                        Download
                      </Button>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600">Valid government-issued ID</p>
                  <div className="mt-2 text-xs text-gray-500">
                    Status: <span className="text-green-600 font-medium">Verified</span>
                  </div>
                </div>

<div className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                      <FileText className="h-4 w-4 text-orange-600" />
                      Enrollment Certificate
                    </h3>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        <Eye className="h-3 w-3 mr-1" />
                        View
                      </Button>
                      <Button size="sm" variant="outline">
                        <Download className="h-3 w-3 mr-1" />
                        Download
                      </Button>
                    </div>
                  </div>
                  <p className="text-sm text-gray-600">Current enrollment verification</p>
                  <div className="mt-2 text-xs text-gray-500">
                    Status: <span className="text-green-600 font-medium">Verified</span>
                  </div>
                </div>
              </div>

<div className="flex justify-end gap-3 pt-4 border-t">
                <Button variant="outline" onClick={() => setDocumentsModalOpen(false)}>
                  Close
                </Button>
                <Button
                  variant="default"
                  className="bg-emerald-600 hover:bg-emerald-700"
                  onClick={() => {
                    toast({
                      title: "Documents verified",
                      description: `All documents for ${selectedApplication.fullName} have been verified.`,
                    })
                  }}
                >
                  Mark as Verified
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

{/* Rejection Reason Dialog */}
      <Dialog open={rejectDialogOpen} onOpenChange={(open) => {
        if (!open) {
          setRejectDialogOpen(false)
          setApplicationToReject(null)
          setRejectionReason("")
        }
      }}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-red-600">
              <X className="h-5 w-5" />
              Reject Application
            </DialogTitle>
            <DialogDescription>
              You are about to reject the application for <span className="font-medium">{applicationToReject?.fullName}</span>. 
              Please provide a reason for rejection. This will be visible to the student.
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 py-4">
            <div className="bg-gray-50 p-3 rounded-lg border text-sm">
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <span className="text-muted-foreground">Application ID:</span>
                  <p className="font-medium">{applicationToReject?.id}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Course:</span>
                  <p className="font-medium">{applicationToReject?.course}</p>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="rejection-reason" className="text-sm font-medium">
                Reason for Rejection <span className="text-red-500">*</span>
              </Label>
              <Textarea
                id="rejection-reason"
                placeholder="e.g., Incomplete documents, Ineligible based on residency requirements, Missing academic records..."
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                className="min-h-[120px] resize-none"
              />
              <p className="text-xs text-muted-foreground">
                This reason will be displayed to the student in their dashboard.
              </p>
            </div>
          </div>

<DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => {
                setRejectDialogOpen(false)
                setApplicationToReject(null)
                setRejectionReason("")
              }}
              disabled={isRejecting}
            >
              Cancel
            </Button>
            <Button 
              variant="destructive"
              onClick={handleRejectApplication}
              disabled={isRejecting || !rejectionReason.trim()}
            >
              {isRejecting ? "Rejecting..." : "Reject Application"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/page.tsx"
"use client"

import type React from "react"
import { useState, useEffect, useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AdminLayout } from "@/components/admin-layout"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Download,
  Users,
  CheckCircle,
  Clock,
  XCircle,
  TrendingUp,
  GraduationCap,
  MapPin,
  School,
  BookOpen,
  UserIcon,
  ChevronRight,
  Accessibility,
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import {
  Bar,
  BarChart,
  Pie,
  PieChart,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
} from "recharts"
import { getAllApplications, getAllUsers, hasPermission, type Application, type User } from "@/lib/storage"
import { PermissionGuard } from "@/components/permission-guard"
import { useAuth } from "@/contexts/auth-context"
import type { StudentProfile } from "@/lib/types" // Added import for StudentProfile

interface StudentListModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  description: string
  students: any[]
  applications?: Application[]
  filterType?: "all" | "approved" | "pending" | "rejected" | "pwd"
}

function StudentListModal({
  isOpen,
  onClose,
  title,
  description,
  students,
  applications,
  filterType,
}: StudentListModalProps) {
  const getFilteredStudents = () => {
    if (!filterType || filterType === "all") return students

if (!applications) return students

const filteredAppUserIds = applications.filter((app) => app.status === filterType).map((app) => app.userId)

return students.filter((student) => filteredAppUserIds.includes(student.id))
  }

const filteredStudents = getFilteredStudents()

const getStatusBadge = (studentId: string) => {
    if (!applications) return null
    const app = applications.find((a) => a.userId === studentId)
    if (!app) return <Badge variant="outline">No Application</Badge>

switch (app.status) {
      case "approved":
        return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">Approved</Badge>
      case "pending":
        return <Badge className="bg-amber-500/10 text-amber-600 border-amber-200">Pending</Badge>
      case "rejected":
        return <Badge className="bg-red-500/10 text-red-600 border-red-200">Rejected</Badge>
      default:
        return <Badge variant="outline">{app.status}</Badge>
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-xl">
            <Users className="h-5 w-5 text-primary" />
            {title}
          </DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <ScrollArea className="h-[400px] pr-4">
          {filteredStudents.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full py-12 text-muted-foreground">
              <Users className="h-12 w-12 mb-4 opacity-50" />
              <p>No students found</p>
            </div>
          ) : (
            <div className="space-y-2">
              {filteredStudents.map((student, index) => {
                const profile = student.profileData as StudentProfile
                return (
                  <div
                    key={student.id}
                    className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
                  >
                    <div className="flex items-center gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary font-semibold">
                        {index + 1}
                      </div>
                      <div>
                        <p className="font-medium">{profile?.fullName || student.name || "Unknown"}</p>
                        <p className="text-sm text-muted-foreground">{student.email}</p>
                        {profile?.course && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {profile.course} • {profile.yearLevel || "N/A"} • {profile.schoolName || "N/A"}
                          </p>
                        )}
                      </div>
                    </div>
                    {applications && getStatusBadge(student.id)}
                  </div>
                )
              })}
            </div>
          )}
        </ScrollArea>
        <div className="flex justify-between items-center pt-4 border-t">
          <p className="text-sm text-muted-foreground">
            Showing {filteredStudents.length} student{filteredStudents.length !== 1 ? "s" : ""}
          </p>
          <Button variant="outline" onClick={onClose}>
            Close
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

interface StatCardProps {
  title: string
  value: number | string
  description: string
  icon: React.ReactNode
  iconBg: string
  iconColor: string
  onClick?: () => void
  trend?: string
}

function StatCard({ title, value, description, icon, iconBg, iconColor, onClick, trend }: StatCardProps) {
  return (
    <Card
      className={`relative overflow-hidden transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-lg hover:scale-[1.02] hover:border-primary/50" : ""}`}
      onClick={onClick}
    >
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        <div className={`p-2.5 rounded-xl ${iconBg}`}>
          <div className={iconColor}>{icon}</div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="flex items-baseline gap-2">
          <div className="text-3xl font-bold">{value}</div>
          {trend && (
            <span className="text-xs text-emerald-600 font-medium flex items-center gap-0.5">
              <TrendingUp className="h-3 w-3" />
              {trend}
            </span>
          )}
        </div>
        <p className="text-xs text-muted-foreground mt-1">{description}</p>
        {onClick && (
          <div className="flex items-center gap-1 text-xs text-primary mt-3 font-medium">
            Click to view list
            <ChevronRight className="h-3 w-3" />
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// Helper function to get current academic year
function getCurrentAcademicYear(): string {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() // 0-indexed (0 = January)
  // Academic year typically starts in June/August
  // If we're in June or later, it's the current year to next year
  // If we're before June, it's last year to current year
  if (month >= 5) { // June onwards
    return `${year}-${year + 1}`
  }
  return `${year - 1}-${year}`
}

// Generate academic year options (current + past 4 years)
function getAcademicYearOptions(): string[] {
  const currentYear = getCurrentAcademicYear()
  const [startYear] = currentYear.split("-").map(Number)
  const options: string[] = []
  for (let i = 0; i < 5; i++) {
    const year = startYear - i
    options.push(`${year}-${year + 1}`)
  }
  return options
}

export default function ReportsPage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("overview")
  const [academicYear, setAcademicYear] = useState(getCurrentAcademicYear())
  const [semester, setSemester] = useState("1st")
  const academicYearOptions = getAcademicYearOptions()

const [scholars, setScholars] = useState<any[]>([])
  const [applications, setApplications] = useState<Application[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [selectedModal, setSelectedModal] = useState<{
    title: string
    description: string
    filter: string
  } | null>(null)

useEffect(() => {
    const allApplications = getAllApplications()
    const allStudents = getAllUsers().filter((u) => u.role === "student")
    
    setApplications(allApplications)
    setUsers(allStudents)
    
    // Build scholars data by combining user data with application data
    const scholarsData = allApplications.map((app) => {
      const student = allStudents.find((u) => u.id === app.studentId)
      const studentProfile = student?.studentProfile || student?.profileData
      
      return {
        id: app.studentId,
        name: app.fullName || student?.name,
        email: student?.email || app.email,
        profileData: {
          fullName: app.fullName || studentProfile?.fullName || student?.name,
          yearLevel: app.yearLevel || studentProfile?.education?.yearLevel || studentProfile?.yearLevel,
          barangay: app.barangay || studentProfile?.barangay,
          gender: app.gender || studentProfile?.gender,
          age: app.age || studentProfile?.age || (studentProfile?.dateOfBirth ? calculateAge(studentProfile.dateOfBirth) : undefined),
          course: app.course || studentProfile?.education?.course || studentProfile?.course,
          schoolName: app.school || studentProfile?.education?.school || studentProfile?.schoolName,
        },
        applicationStatus: app.status,
      }
    })
    
    console.log("[v0] Reports - Applications loaded:", allApplications.length)
    console.log("[v0] Reports - Students loaded:", allStudents.length)
    console.log("[v0] Reports - Scholars data built:", scholarsData)
    
    setScholars(scholarsData)
  }, [])
  
  // Helper to calculate age from date of birth
  function calculateAge(dateOfBirth: string): string {
    const today = new Date()
    const birthDate = new Date(dateOfBirth)
    let age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--
    }
    return age.toString()
  }

const stats = useMemo(() => {
    const approved = applications.filter((a) => a.status === "approved").length
    const pending = applications.filter((a) => a.status === "pending").length
    const rejected = applications.filter((a) => a.status === "rejected").length
    const pwdCount = applications.filter((a) => a.isPWD === true).length // Added PWD count

return {
      total: applications.length,
      approved,
      pending,
      rejected,
      pwdCount, // Added PWD count to stats
      approvalRate: applications.length > 0 ? Math.round((approved / applications.length) * 100) : 0,
    }
  }, [applications])

const openStudentModal = (
    title: string,
    description: string,
    filterType: "all" | "approved" | "pending" | "rejected" | "pwd",
  ) => {
    setSelectedModal({ title, description, filter: filterType })
  }

const getFilteredStudents = (filter: string) => {
    switch (filter) {
      case "approved":
        return applications.filter((a) => a.status === "approved")
      case "pending":
        return applications.filter((a) => a.status === "pending")
      case "rejected":
        return applications.filter((a) => a.status === "rejected")
      case "pwd": // Added PWD filter
        return applications.filter((a) => a.isPWD === true)
      default:
        return applications
    }
  }

const getYearLevelData = () => {
    const yearLevels = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const yearLevel = profile?.yearLevel || "Unknown"
        acc[yearLevel] = (acc[yearLevel] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const colorMap: Record<string, string> = {
      "1st Year": "#3b82f6",
      "2nd Year": "#10b981",
      "3rd Year": "#f59e0b",
      "4th Year": "#ef4444",
      "5th Year": "#8b5cf6",
    }

const data = Object.entries(yearLevels).map(([name, value]) => ({
      name,
      value,
      fill: colorMap[name] || "#6b7280",
    }))
    return data
  }

const getBarangayData = () => {
    const barangays = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const barangay = profile?.barangay || "Unknown"
        acc[barangay] = (acc[barangay] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]
    const data = Object.entries(barangays)
      .sort(([, a], [, b]) => b - a)
      .slice(0, 5)
      .map(([name, value], index) => ({
        name,
        value,
        fill: colors[index],
      }))
    return data
  }

const getGenderData = () => {
    const genders = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const gender = profile?.gender || "Unknown"
        acc[gender] = (acc[gender] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const data = Object.entries(genders).map(([name, value]) => ({
      name,
      value,
      fill: name === "Female" ? "#ec4899" : name === "Male" ? "#3b82f6" : "#6b7280",
    }))
    return data
  }

const getAgeData = () => {
    const ageGroups = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const age = Number.parseInt(profile?.age || "0")
        let group = "Unknown"
        if (age >= 16 && age <= 18) group = "16-18"
        else if (age >= 19 && age <= 21) group = "19-21"
        else if (age >= 22 && age <= 24) group = "22-24"
        else if (age >= 25) group = "25+"

acc[group] = (acc[group] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444"]
    const data = ["16-18", "19-21", "22-24", "25+"].map((name, index) => ({
      name,
      value: ageGroups[name] || 0,
      fill: colors[index],
    }))
    return data
  }

const getCourseData = () => {
    const courses = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const course = profile?.course || "Unknown"
        const match = course.match(/\b([A-Z]{2,})\b/)
        const abbrev = match ? match[1] : course.split(" ").slice(0, 2).join(" ")
        acc[abbrev] = (acc[abbrev] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"]
    const data = Object.entries(courses).map(([name, value], index) => ({
      name,
      value,
      fill: colors[index % colors.length],
    }))
    return data
  }

const getSchoolData = () => {
    const schools = scholars.reduce(
      (acc, scholar) => {
        const profile = scholar.profileData as StudentProfile
        const school = profile?.schoolName || "Unknown"
        const shortName = school.length > 25 ? school.substring(0, 25) + "..." : school
        acc[shortName] = (acc[shortName] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"]
    const data = Object.entries(schools).map(([name, value], index) => ({
      name,
      value,
      fill: colors[index % colors.length],
    }))
    return data
  }

const getApplicationStatusData = () => {
    const data = [
      { name: "Approved", value: stats.approved, fill: "#10b981" },
      { name: "Pending", value: stats.pending, fill: "#f59e0b" },
      { name: "Rejected", value: stats.rejected, fill: "#ef4444" },
    ]
    return data
  }

const yearLevelData = getYearLevelData()
  const barangayData = getBarangayData()
  const genderData = getGenderData()
  const ageData = getAgeData()
  const courseData = getCourseData()
  const schoolData = getSchoolData()
  const applicationStatusData = getApplicationStatusData()

const handleExportReport = (format: string) => {
    toast({
      title: `Exporting report as ${format.toUpperCase()}`,
      description: "Your report is being generated and will download shortly.",
    })
  }

const CustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-background border border-border rounded-lg shadow-lg p-3">
          <p className="font-semibold text-foreground">{payload[0].name}</p>
          <p className="text-sm text-muted-foreground">
            Count: <span className="font-bold text-foreground">{payload[0].value}</span>
          </p>
        </div>
      )
    }
    return null
  }

const renderChart = (data: any[], chartElement: React.ReactNode, emptyMessage: string) => {
    if (!data || data.length === 0 || data.every((d) => d.value === 0)) {
      return (
        <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
          <GraduationCap className="h-12 w-12 mb-4 opacity-30" />
          <p>{emptyMessage}</p>
        </div>
      )
    }
    return chartElement
  }

return (
    <PermissionGuard permission="reports">
      <AdminLayout>
        {selectedModal && (
          <StudentListModal
            isOpen={true}
            onClose={() => setSelectedModal(null)}
            title={selectedModal.title}
            description={selectedModal.description}
            students={scholars}
            applications={applications}
            filterType={selectedModal.filter}
          />
        )}

<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Reports & Analytics</h1>
            <p className="text-muted-foreground mt-1">Generate and view scholarship program insights</p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => handleExportReport("pdf")} className="gap-2">
              <Download className="h-4 w-4" />
              Export PDF
            </Button>
            <Button variant="outline" size="sm" onClick={() => handleExportReport("excel")} className="gap-2">
              <Download className="h-4 w-4" />
              Export Excel
            </Button>
          </div>
        </div>

<div className="flex flex-col gap-4 sm:flex-row sm:items-center mb-6">
          <div className="flex items-center gap-2">
            <Select value={academicYear} onValueChange={setAcademicYear}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Academic Year" />
              </SelectTrigger>
              <SelectContent>
                {academicYearOptions.map((year) => (
                  <SelectItem key={year} value={year}>{year}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select value={semester} onValueChange={setSemester}>
              <SelectTrigger className="w-[150px]">
                <SelectValue placeholder="Semester" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1st">1st Semester</SelectItem>
                <SelectItem value="2nd">2nd Semester</SelectItem>
                <SelectItem value="summer">Summer</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<Tabs defaultValue="overview" className="space-y-6" onValueChange={setActiveTab}>
          <TabsList className="bg-muted/50 p-1">
            <TabsTrigger value="overview" className="gap-2">
              <TrendingUp className="h-4 w-4" />
              Overview
            </TabsTrigger>
            <TabsTrigger value="demographics" className="gap-2">
              <Users className="h-4 w-4" />
              Demographics
            </TabsTrigger>
            <TabsTrigger value="academic" className="gap-2">
              <GraduationCap className="h-4 w-4" />
              Academic
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
              <StatCard
                title="Total Scholars"
                value={stats.total}
                description="Registered students in the program"
                icon={<Users className="h-5 w-5" />}
                iconBg="bg-blue-500/10"
                iconColor="text-blue-600"
                onClick={() =>
                  openStudentModal(
                    "All Registered Scholars",
                    "Complete list of all registered students in the scholarship program",
                    "all",
                  )
                }
              />
              <StatCard
                title="Approved Applications"
                value={stats.approved}
                description={`${stats.approvalRate}% approval rate`}
                icon={<CheckCircle className="h-5 w-5" />}
                iconBg="bg-emerald-500/10"
                iconColor="text-emerald-600"
                onClick={() =>
                  openStudentModal("Approved Scholars", "Students with approved scholarship applications", "approved")
                }
              />
              <StatCard
                title="Pending Applications"
                value={stats.pending}
                description="Awaiting review and approval"
                icon={<Clock className="h-5 w-5" />}
                iconBg="bg-amber-500/10"
                iconColor="text-amber-600"
                onClick={() =>
                  openStudentModal("Pending Applications", "Students awaiting application review", "pending")
                }
              />
              <StatCard
                title="Rejected Applications"
                value={stats.rejected}
                description="Applications not approved"
                icon={<XCircle className="h-5 w-5" />}
                iconBg="bg-red-500/10"
                iconColor="text-red-600"
                onClick={() =>
                  openStudentModal("Rejected Applications", "Students with rejected applications", "rejected")
                }
              />
              <StatCard
                title="PWD Scholars"
                value={stats.pwdCount}
                description="Persons with disability"
                icon={<Accessibility className="h-5 w-5" />}
                iconBg="bg-purple-500/10"
                iconColor="text-purple-600"
                onClick={() => openStudentModal("PWD Scholars", "Students registered as Persons with Disability", "pwd")}
              />
            </div>

<Card className="bg-gradient-to-br from-primary/5 via-background to-background border-primary/20">
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Overall Approval Rate</p>
                    <div className="flex items-baseline gap-2 mt-1">
                      <span className="text-4xl font-bold text-primary">{stats.approvalRate}%</span>
                      <span className="text-sm text-muted-foreground">based on {applications.length} applications</span>
                    </div>
                  </div>
                  <div className="hidden sm:block">
                    <div className="h-20 w-20 rounded-full bg-primary/10 flex items-center justify-center">
                      <TrendingUp className="h-10 w-10 text-primary" />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<div className="grid gap-6 md:grid-cols-2">
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <GraduationCap className="h-5 w-5 text-primary" />
                    Scholars by Year Level
                  </CardTitle>
                  <CardDescription>Distribution of scholars across different year levels</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  {renderChart(
                    yearLevelData,
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie
                          data={yearLevelData}
                          dataKey="value"
                          nameKey="name"
                          cx="50%"
                          cy="50%"
                          outerRadius={100}
                          label={({ name, value }) => `${name}: ${value}`}
                          labelLine={true}
                        >
                          {yearLevelData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Pie>
                        <Tooltip content={<CustomTooltip />} />
                        <Legend />
                      </PieChart>
                    </ResponsiveContainer>,
                    "No scholar data available",
                  )}
                </CardContent>
              </Card>
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-primary" />
                    Scholars by Barangay
                  </CardTitle>
                  <CardDescription>Top 5 barangays with most scholars</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  {renderChart(
                    barangayData,
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={barangayData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                        <XAxis dataKey="name" stroke="#6b7280" fontSize={12} />
                        <YAxis stroke="#6b7280" />
                        <Tooltip content={<CustomTooltip />} />
                        <Bar dataKey="value" radius={[8, 8, 0, 0]}>
                          {barangayData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Bar>
                      </BarChart>
                    </ResponsiveContainer>,
                    "No barangay data available",
                  )}
                </CardContent>
              </Card>
            </div>

<Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="h-5 w-5 text-primary" />
                  Application Status Overview
                </CardTitle>
                <CardDescription>Current status of all scholarship applications</CardDescription>
              </CardHeader>
              <CardContent className="h-96">
                {renderChart(
                  applicationStatusData,
                  <ResponsiveContainer width="100%" height={350}>
                    <BarChart data={applicationStatusData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                      <XAxis dataKey="name" stroke="#6b7280" />
                      <YAxis stroke="#6b7280" />
                      <Tooltip content={<CustomTooltip />} />
                      <Bar dataKey="value" radius={[8, 8, 0, 0]}>
                        {applicationStatusData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.fill} />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>,
                  "No application data available",
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="demographics" className="space-y-6">
            <div className="grid gap-4 md:grid-cols-4">
              <StatCard
                title="Total Scholars"
                value={stats.total}
                description="All scholarship recipients"
                icon={<Users className="h-5 w-5" />}
                iconBg="bg-blue-500/10"
                iconColor="text-blue-600"
                onClick={() => openStudentModal("All Scholars", "Complete list of all registered scholars", "all")}
              />
              <StatCard
                title="Approved Scholars"
                value={stats.approved}
                description={`${stats.total > 0 ? Math.round((stats.approved / stats.total) * 100) : 0}% of registered students`}
                icon={<CheckCircle className="h-5 w-5" />}
                iconBg="bg-emerald-500/10"
                iconColor="text-emerald-600"
                onClick={() => openStudentModal("Approved Scholars", "Students with approved applications", "approved")}
              />
              <StatCard
                title="Pending Applications"
                value={stats.pending}
                description="Awaiting review"
                icon={<Clock className="h-5 w-5" />}
                iconBg="bg-amber-500/10"
                iconColor="text-amber-600"
                onClick={() => openStudentModal("Pending Applications", "Students awaiting review", "pending")}
              />
              <StatCard
                title="PWD Scholars"
                value={stats.pwdCount}
                description={`${stats.total > 0 ? Math.round((stats.pwdCount / stats.total) * 100) : 0}% of total scholars`}
                icon={<Accessibility className="h-5 w-5" />}
                iconBg="bg-purple-500/10"
                iconColor="text-purple-600"
                onClick={() => openStudentModal("PWD Scholars", "Persons with Disability in the program", "pwd")}
              />
            </div>

<div className="grid gap-6 md:grid-cols-2">
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <UserIcon className="h-5 w-5 text-primary" />
                    Gender Distribution
                  </CardTitle>
                  <CardDescription>Distribution of scholars by gender</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  {renderChart(
                    genderData,
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie
                          data={genderData}
                          dataKey="value"
                          nameKey="name"
                          cx="50%"
                          cy="50%"
                          outerRadius={100}
                          label={({ name, value }) => `${name}: ${value}`}
                        >
                          {genderData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Pie>
                        <Tooltip content={<CustomTooltip />} />
                        <Legend />
                      </PieChart>
                    </ResponsiveContainer>,
                    "No gender data available",
                  )}
                </CardContent>
              </Card>
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="h-5 w-5 text-primary" />
                    Age Distribution
                  </CardTitle>
                  <CardDescription>Distribution of scholars by age group</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  {renderChart(
                    ageData,
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={ageData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                        <XAxis dataKey="name" stroke="#6b7280" />
                        <YAxis stroke="#6b7280" />
                        <Tooltip content={<CustomTooltip />} />
                        <Bar dataKey="value" radius={[8, 8, 0, 0]}>
                          {ageData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Bar>
                      </BarChart>
                    </ResponsiveContainer>,
                    "No age data available",
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="academic" className="space-y-6">
            <div className="grid gap-6 md:grid-cols-2">
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    Scholars by Course
                  </CardTitle>
                  <CardDescription>Distribution of scholars across different courses</CardDescription>
                </CardHeader>
                <CardContent className="h-96">
                  {renderChart(
                    courseData,
                    <ResponsiveContainer width="100%" height={350}>
                      <BarChart data={courseData} layout="vertical">
                        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                        <XAxis type="number" stroke="#6b7280" />
                        <YAxis dataKey="name" type="category" width={80} stroke="#6b7280" fontSize={12} />
                        <Tooltip content={<CustomTooltip />} />
                        <Bar dataKey="value" radius={[0, 8, 8, 0]}>
                          {courseData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Bar>
                      </BarChart>
                    </ResponsiveContainer>,
                    "No course data available",
                  )}
                </CardContent>
              </Card>
              <Card className="shadow-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <School className="h-5 w-5 text-primary" />
                    Scholars by School
                  </CardTitle>
                  <CardDescription>Distribution of scholars across different schools</CardDescription>
                </CardHeader>
                <CardContent className="h-96">
                  {renderChart(
                    schoolData,
                    <ResponsiveContainer width="100%" height={350}>
                      <PieChart>
                        <Pie
                          data={schoolData}
                          dataKey="value"
                          nameKey="name"
                          cx="50%"
                          cy="50%"
                          outerRadius={100}
                          label={({ value }) => `${value}`}
                        >
                          {schoolData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.fill} />
                          ))}
                        </Pie>
                        <Tooltip content={<CustomTooltip />} />
                        <Legend />
                      </PieChart>
                    </ResponsiveContainer>,
                    "No school data available",
                  )}
                </CardContent>
              </Card>
            </div>

<Card className="shadow-sm">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="h-5 w-5 text-primary" />
                  Application Statistics
                </CardTitle>
                <CardDescription>Overview of application statuses</CardDescription>
              </CardHeader>
              <CardContent className="h-80">
                {renderChart(
                  applicationStatusData,
                  <ResponsiveContainer width="100%" height={350}>
                    <PieChart>
                      <Pie
                        data={applicationStatusData}
                        dataKey="value"
                        nameKey="name"
                        cx="50%"
                        cy="50%"
                        outerRadius={100}
                        label={({ name, value }) => `${name}: ${value}`}
                      >
                        {applicationStatusData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.fill} />
                        ))}
                      </Pie>
                      <Tooltip content={<CustomTooltip />} />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>,
                  "No application data available",
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </AdminLayout>
    </PermissionGuard>
  )
}
[V0_FILE]typescriptreact:file="app/student/profile/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/components/ui/use-toast"
import { Camera, Mail, GraduationCap, User, Lock, Bell, ArrowLeft } from "lucide-react"
import { updateUser, updateUserPassword } from "@/lib/storage" // Note: getUserById is not used in the provided updates

export default function ProfilePage() {
  const { user } = useAuth()
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("personal")
  const [isLoading, setIsLoading] = useState(false)
  const [profilePicture, setProfilePicture] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const { toast } = useToast()

const [personalInfo, setPersonalInfo] = useState({
    fullName: "",
    email: "",
    contactNumber: "",
    address: "",
    age: "",
    gender: "",
    barangay: "",
    isPWD: false,
  })

const [educationInfo, setEducationInfo] = useState({
    school: "",
    course: "",
    yearLevel: "",
    studentId: "",
  })

const [securityInfo, setSecurityInfo] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const [notificationSettings, setNotificationSettings] = useState({
    emailNotifications: true,
    smsNotifications: false,
    applicationUpdates: true,
    documentReminders: true,
    paymentNotifications: true,
    marketingEmails: false,
  })

useEffect(() => {
    // Handle both studentProfile and profileData (from registration)
    console.log("[v0] Profile page - user:", user)
    console.log("[v0] Profile page - studentProfile:", user?.studentProfile)
    console.log("[v0] Profile page - profileData:", user?.profileData)
    
    const profile = user?.studentProfile || user?.profileData
    console.log("[v0] Profile page - using profile:", profile)
    
    if (profile) {
      setPersonalInfo({
        fullName: profile.fullName || `${profile.firstName || ""} ${profile.middleName ? profile.middleName + " " : ""}${profile.lastName || ""}${profile.suffix ? " " + profile.suffix : ""}`.trim() || user?.name || "",
        email: user?.email || "",
        contactNumber: profile.contactNumber || "",
        address: profile.address || "",
        age: profile.age || (profile.dateOfBirth ? calculateAge(profile.dateOfBirth) : ""),
        gender: profile.gender || "",
        barangay: profile.barangay || "",
        isPWD: profile.isPWD || false,
      })

// Handle education data from both structures
      if (profile.education) {
        setEducationInfo({
          school: profile.education.school || "",
          course: profile.education.course || "",
          yearLevel: profile.education.yearLevel || "",
          studentId: profile.education.studentId || "",
        })
      } else if (profile.school || profile.course || profile.yearLevel) {
        // Handle flat structure from registration
        setEducationInfo({
          school: profile.school || "",
          course: profile.course || "",
          yearLevel: profile.yearLevel || "",
          studentId: profile.studentId || "",
        })
      }

if (user?.profilePicture) {
        setProfilePicture(user.profilePicture)
      }
    }
  }, [user])

const calculateAge = (dateOfBirth: string): string => {
    const today = new Date()
    const birthDate = new Date(dateOfBirth)
    let age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--
    }
    return age.toString()
  }

const handlePersonalUpdate = async () => {
    if (!user) return

setIsLoading(true)
    try {
      const nameParts = personalInfo.fullName.trim().split(" ")
      const currentProfile = user.studentProfile || user.profileData || {}
      const updatedProfile = {
        ...currentProfile,
        fullName: personalInfo.fullName,
        firstName: nameParts[0] || "",
        lastName: nameParts[nameParts.length - 1] || "",
        middleName: nameParts.length > 2 ? nameParts.slice(1, -1).join(" ") : undefined,
        contactNumber: personalInfo.contactNumber,
        address: personalInfo.address,
        age: personalInfo.age,
        gender: personalInfo.gender,
        barangay: personalInfo.barangay,
        isPWD: personalInfo.isPWD,
      }

const success = updateUser(user.id, {
        name: personalInfo.fullName, // Assuming 'name' is a top-level field in your user object
        studentProfile: updatedProfile,
      })

if (success) {
        toast({
          title: "Success",
          description: "Personal information updated successfully",
        })
      } else {
        throw new Error("Update failed")
      }
    } catch (error) {
      console.error("Failed to update personal information:", error)
      toast({
        title: "Error",
        description: "Failed to update personal information",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleEducationUpdate = async () => {
    if (!user) return

setIsLoading(true)
    try {
      const updatedProfile = {
        ...user.studentProfile,
        education: {
          school: educationInfo.school,
          course: educationInfo.course,
          yearLevel: educationInfo.yearLevel,
          studentId: educationInfo.studentId,
        },
      }

const success = updateUser(user.id, {
        studentProfile: updatedProfile,
      })

if (success) {
        toast({
          title: "Success",
          description: "Education information updated successfully",
        })
      } else {
        throw new Error("Update failed")
      }
    } catch (error) {
      console.error("Failed to update education information:", error)
      toast({
        title: "Error",
        description: "Failed to update education information",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSecurityUpdate = async () => {
    if (!user) return

if (securityInfo.newPassword !== securityInfo.confirmPassword) {
      toast({
        title: "Error",
        description: "New passwords do not match",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)
    try {
      const success = updateUserPassword(user.id, securityInfo.currentPassword, securityInfo.newPassword)

if (success) {
        toast({
          title: "Success",
          description: "Password updated successfully",
        })
        setSecurityInfo({
          currentPassword: "",
          newPassword: "",
          confirmPassword: "",
        })
      } else {
        throw new Error("Password update failed")
      }
    } catch (error) {
      console.error("Failed to update password:", error)
      toast({
        title: "Error",
        description: "Failed to update password. Please check your current password.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleNotificationUpdate = async () => {
    setIsLoading(true)
    try {
      // In a real application, you would call an API to update notification settings here.
      // For this example, we'll just simulate a successful update.
      setTimeout(() => {
        toast({
          title: "Success",
          description: "Notification preferences updated successfully",
        })
        setIsLoading(false)
      }, 500) // Simulate network delay
    } catch (error) {
      console.error("Failed to update notification preferences:", error)
      toast({
        title: "Error",
        description: "Failed to update notification preferences",
        variant: "destructive",
      })
      setIsLoading(false)
    }
  }

const handleProfilePictureChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Basic validation for image file type and size
      if (!file.type.startsWith("image/")) {
        toast({
          title: "Invalid file type",
          description: "Please upload an image file.",
          variant: "destructive",
        })
        return
      }
      if (file.size > 5 * 1024 * 1024) {
        // 5MB limit
        toast({
          title: "File too large",
          description: "Profile picture must be less than 5MB.",
          variant: "destructive",
        })
        return
      }

setIsLoading(true)
      try {
        // Upload to Vercel Blob
        const formData = new FormData()
        formData.append('file', file)
        formData.append('folder', 'profile-pictures')
        formData.append('userId', user?.id || 'anonymous')

const response = await fetch('/api/upload', {
          method: 'POST',
          body: formData,
        })

if (!response.ok) {
          throw new Error('Upload failed')
        }

const data = await response.json()
        
        // Update local state with the Blob URL
        setProfilePicture(data.url)
        
        if (user) {
          // Save the Blob URL to user storage
          const success = updateUser(user.id, { profilePicture: data.url })
          if (success) {
            toast({
              title: "Success",
              description: "Profile picture updated successfully",
            })
          } else {
            toast({
              title: "Error",
              description: "Failed to save profile picture.",
              variant: "destructive",
            })
          }
        }
      } catch (error) {
        console.error("Failed to upload profile picture:", error)
        toast({
          title: "Error",
          description: "Failed to upload profile picture. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
  }

// Handle removing profile picture
  const removeProfilePicture = async () => {
    if (!user) return
    
    setIsLoading(true)
    try {
      // If there's a current profile picture URL, delete it from Blob storage
      if (profilePicture && profilePicture.includes('blob.vercel-storage.com')) {
        await fetch('/api/upload/delete', {
          method: 'DELETE',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url: profilePicture }),
        })
      }
      
      setProfilePicture(null)
      const success = updateUser(user.id, { profilePicture: null })
      if (success) {
        toast({
          title: "Success",
          description: "Profile picture removed successfully",
        })
      } else {
        toast({
          title: "Error",
          description: "Failed to remove profile picture.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Failed to remove profile picture:", error)
      toast({
        title: "Error",
        description: "Failed to remove profile picture.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

if (!user) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <p className="text-gray-500">Please log in to view your profile</p>
      </div>
    )
  }

return (
    <div className="container mx-auto max-w-6xl p-6 space-y-8">
      <div className="flex items-center gap-4">
        <Button variant="outline" onClick={() => router.push("/student/dashboard")} className="gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Dashboard
        </Button>
      </div>

{/* Profile Header */}
      <Card className="border-0 shadow-lg">
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row items-center gap-6">
            <div className="relative">
              <Avatar className="h-32 w-32 border-4 border-green-100">
                <AvatarImage src={profilePicture || undefined} alt={personalInfo.fullName} />
                <AvatarFallback className="bg-green-500 text-white text-3xl">
                  {personalInfo.fullName
                    .split(" ")
                    .map((n) => n[0])
                    .join("")
                    .toUpperCase()
                    .slice(0, 2)}
                </AvatarFallback>
              </Avatar>
              <Button
                size="icon"
                variant="secondary"
                className="absolute bottom-0 right-0 rounded-full h-10 w-10 shadow-md hover:shadow-lg"
                onClick={() => fileInputRef.current?.click()}
              >
                <Camera className="h-4 w-4" />
              </Button>
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                className="hidden"
                onChange={handleProfilePictureChange}
              />
            </div>
            <div className="flex-1 text-center md:text-left space-y-2">
              <h1 className="text-3xl font-bold text-gray-900">{personalInfo.fullName}</h1>
              <p className="text-gray-600 flex items-center justify-center md:justify-start gap-2">
                <Mail className="h-4 w-4" />
                {personalInfo.email}
              </p>
              <div className="flex flex-wrap gap-2 justify-center md:justify-start">
                <Badge variant="secondary" className="bg-green-100 text-green-700">
                  Student
                </Badge>
                {personalInfo.isPWD && (
                  <Badge variant="secondary" className="bg-purple-100 text-purple-700">
                    PWD
                  </Badge>
                )}
                <Badge variant="outline">{personalInfo.barangay}</Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Profile Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-4 lg:w-auto lg:inline-grid">
          <TabsTrigger value="personal" className="gap-2">
            <User className="h-4 w-4" />
            Personal
          </TabsTrigger>
          <TabsTrigger value="education" className="gap-2">
            <GraduationCap className="h-4 w-4" />
            Education
          </TabsTrigger>
          <TabsTrigger value="security" className="gap-2">
            <Lock className="h-4 w-4" />
            Security
          </TabsTrigger>
          <TabsTrigger value="notifications" className="gap-2">
            <Bell className="h-4 w-4" />
            Notifications
          </TabsTrigger>
        </TabsList>

{/* Personal Information Tab */}
        <TabsContent value="personal">
          <Card>
            <CardHeader>
              <CardTitle>Personal Information</CardTitle>
              <CardDescription>Update your personal details and contact information</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="fullName">Full Name</Label>
                  <Input
                    id="fullName"
                    value={personalInfo.fullName}
                    onChange={(e) => setPersonalInfo({ ...personalInfo, fullName: e.target.value })}
                    placeholder="Juan Dela Cruz"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input id="email" value={personalInfo.email} disabled className="bg-gray-50" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="contactNumber">Contact Number</Label>
                  <Input
                    id="contactNumber"
                    value={personalInfo.contactNumber}
                    onChange={(e) => setPersonalInfo({ ...personalInfo, contactNumber: e.target.value })}
                    placeholder="09123456789"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="age">Age</Label>
                  <Input
                    id="age"
                    value={personalInfo.age}
                    onChange={(e) => setPersonalInfo({ ...personalInfo, age: e.target.value })}
                    placeholder="20"
                    type="number"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="gender">Gender</Label>
                  <Select
                    value={personalInfo.gender}
                    onValueChange={(value) => setPersonalInfo({ ...personalInfo, gender: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select gender" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Male">Male</SelectItem>
                      <SelectItem value="Female">Female</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="barangay">Barangay</Label>
                  <Select
                    value={personalInfo.barangay}
                    onValueChange={(value) => setPersonalInfo({ ...personalInfo, barangay: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select barangay" />
                    </SelectTrigger>
                    <SelectContent>
                      {Array.from({ length: 18 }, (_, i) => i + 1).map((num) => (
                        <SelectItem key={num} value={`Barangay ${num}`}>
                          Barangay {num}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="address">Address</Label>
                  <Input
                    id="address"
                    value={personalInfo.address}
                    onChange={(e) => setPersonalInfo({ ...personalInfo, address: e.target.value })}
                    placeholder="Complete address"
                  />
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="isPWD"
                  checked={personalInfo.isPWD}
                  onCheckedChange={(checked) => setPersonalInfo({ ...personalInfo, isPWD: checked as boolean })}
                />
                <Label htmlFor="isPWD" className="text-sm font-normal cursor-pointer">
                  I am a Person with Disability (PWD)
                </Label>
              </div>
              <Separator />
              <Button onClick={handlePersonalUpdate} disabled={isLoading} className="bg-green-600 hover:bg-green-700">
                {isLoading ? "Saving..." : "Save Changes"}
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Education Tab */}
        <TabsContent value="education">
          <Card>
            <CardHeader>
              <CardTitle>Education Information</CardTitle>
              <CardDescription>Update your educational background and details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="school">School/University</Label>
                  <Input
                    id="school"
                    value={educationInfo.school}
                    onChange={(e) => setEducationInfo({ ...educationInfo, school: e.target.value })}
                    placeholder="University of the Philippines"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="course">Course/Program</Label>
                  <Input
                    id="course"
                    value={educationInfo.course}
                    onChange={(e) => setEducationInfo({ ...educationInfo, course: e.target.value })}
                    placeholder="Bachelor of Science in Computer Science"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="yearLevel">Year Level</Label>
                  <Select
                    value={educationInfo.yearLevel}
                    onValueChange={(value) => setEducationInfo({ ...educationInfo, yearLevel: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select year level" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1st Year">1st Year</SelectItem>
                      <SelectItem value="2nd Year">2nd Year</SelectItem>
                      <SelectItem value="3rd Year">3rd Year</SelectItem>
                      <SelectItem value="4th Year">4th Year</SelectItem>
                      <SelectItem value="5th Year">5th Year</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="studentId">Student ID</Label>
                  <Input
                    id="studentId"
                    value={educationInfo.studentId}
                    onChange={(e) => setEducationInfo({ ...educationInfo, studentId: e.target.value })}
                    placeholder="2024-12345"
                    disabled
                    className="bg-gray-50"
                  />
                </div>
              </div>
              <Separator />
              <Button onClick={handleEducationUpdate} disabled={isLoading} className="bg-green-600 hover:bg-green-700">
                {isLoading ? "Saving..." : "Save Changes"}
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Security Tab */}
        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle>Security Settings</CardTitle>
              <CardDescription>Update your password and security preferences</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="currentPassword">Current Password</Label>
                  <Input
                    id="currentPassword"
                    type="password"
                    value={securityInfo.currentPassword}
                    onChange={(e) => setSecurityInfo({ ...securityInfo, currentPassword: e.target.value })}
                    placeholder="Enter current password"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="newPassword">New Password</Label>
                  <Input
                    id="newPassword"
                    type="password"
                    value={securityInfo.newPassword}
                    onChange={(e) => setSecurityInfo({ ...securityInfo, newPassword: e.target.value })}
                    placeholder="Enter new password"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="confirmPassword">Confirm New Password</Label>
                  <Input
                    id="confirmPassword"
                    type="password"
                    value={securityInfo.confirmPassword}
                    onChange={(e) => setSecurityInfo({ ...securityInfo, confirmPassword: e.target.value })}
                    placeholder="Confirm new password"
                  />
                </div>
              </div>
              <Separator />
              <Button onClick={handleSecurityUpdate} disabled={isLoading} className="bg-green-600 hover:bg-green-700">
                {isLoading ? "Updating..." : "Update Password"}
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Notifications Tab */}
        <TabsContent value="notifications">
          <Card>
            <CardHeader>
              <CardTitle>Notification Preferences</CardTitle>
              <CardDescription>Manage how you receive updates and alerts</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Email Notifications</Label>
                    <p className="text-sm text-gray-500">Receive notifications via email</p>
                  </div>
                  <Checkbox
                    id="emailNotifications" // Added ID for clarity
                    checked={notificationSettings.emailNotifications}
                    onCheckedChange={(checked) =>
                      setNotificationSettings({ ...notificationSettings, emailNotifications: checked as boolean })
                    }
                  />
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>SMS Notifications</Label>
                    <p className="text-sm text-gray-500">Receive notifications via SMS</p>
                  </div>
                  <Checkbox
                    id="smsNotifications" // Added ID for clarity
                    checked={notificationSettings.smsNotifications}
                    onCheckedChange={(checked) =>
                      setNotificationSettings({ ...notificationSettings, smsNotifications: checked as boolean })
                    }
                  />
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Application Updates</Label>
                    <p className="text-sm text-gray-500">Get notified about application status changes</p>
                  </div>
                  <Checkbox
                    id="applicationUpdates" // Added ID for clarity
                    checked={notificationSettings.applicationUpdates}
                    onCheckedChange={(checked) =>
                      setNotificationSettings({ ...notificationSettings, applicationUpdates: checked as boolean })
                    }
                  />
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Document Reminders</Label>
                    <p className="text-sm text-gray-500">Receive reminders about document submissions</p>
                  </div>
                  <Checkbox
                    id="documentReminders" // Added ID for clarity
                    checked={notificationSettings.documentReminders}
                    onCheckedChange={(checked) =>
                      setNotificationSettings({ ...notificationSettings, documentReminders: checked as boolean })
                    }
                  />
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Payment Notifications</Label>
                    <p className="text-sm text-gray-500">Get notified about financial distribution</p>
                  </div>
                  <Checkbox
                    id="paymentNotifications" // Added ID for clarity
                    checked={notificationSettings.paymentNotifications}
                    onCheckedChange={(checked) =>
                      setNotificationSettings({ ...notificationSettings, paymentNotifications: checked as boolean })
                    }
                  />
                </div>
              </div>
              <Separator />
              <Button
                onClick={handleNotificationUpdate}
                disabled={isLoading}
                className="bg-green-600 hover:bg-green-700"
              >
                {isLoading ? "Saving..." : "Save Preferences"}
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/verification/page.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { AdminLayout } from "@/components/admin-layout"
import { QrScanner } from "@/components/qr-scanner"
import { useToast } from "@/components/ui/use-toast"
import { getUsers, getApplications, markStudentAsEligible, markStudentAsClaimed, hasStudentClaimed, isStudentEligible } from "@/lib/storage"
import { useAuth } from "@/contexts/auth-context"
import { Check, User, QrCode, Keyboard, Search } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

async function decryptData(encryptedData: string, key: string): Promise<string> {
  try {
    const encoder = new TextEncoder()
    const keyBuffer = await crypto.subtle.digest("SHA-256", encoder.encode(key))
    const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM" }, false, ["decrypt"])

// Decode from base64
    const combined = new Uint8Array(
      atob(encryptedData)
        .split("")
        .map((char) => char.charCodeAt(0)),
    )

// Extract IV and encrypted data
    const iv = combined.slice(0, 12)
    const encrypted = combined.slice(12)

const decrypted = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, cryptoKey, encrypted)

return new TextDecoder().decode(decrypted)
  } catch (error) {
    throw new Error("Failed to decrypt QR code data")
  }
}

export default function QRVerificationPage() {
  const { toast } = useToast()
  const { user } = useAuth()
  const [studentId, setStudentId] = useState("")
  const [isScanning, setIsScanning] = useState(false)
  const [isClaimed, setIsClaimed] = useState(false)
  const [verificationResult, setVerificationResult] = useState<{
    verified: boolean
    userId?: string // The actual user ID for marking as claimed
    failureReason?: string
    failureDetails?: string
    student?: {
      id: string
      name: string
      course: string
      yearLevel: string
      status: string
      profilePicture?: string
    }
  } | null>(null)

const handleMarkAsClaimed = () => {
    if (!verificationResult?.userId || !user) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Cannot mark as claimed. Student or admin information missing.",
      })
      return
    }

const result = markStudentAsClaimed(verificationResult.userId, user.id)
    
    if (result.success) {
      setIsClaimed(true)
      toast({
        title: "Financial Aid Claimed",
        description: result.message,
      })
      
      // Clear the verification result after a delay to allow for another scan
      setTimeout(() => {
        setVerificationResult(null)
        setIsClaimed(false)
        setStudentId("")
      }, 3000)
    } else {
      toast({
        variant: "destructive",
        title: "Error",
        description: result.message,
      })
    }
  }

const handleManualVerify = () => {
    if (!studentId.trim()) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Please enter a student ID or email",
      })
      return
    }

const searchTerm = studentId.trim().toLowerCase()

// Get all users and find the student with matching student ID, email, or user ID
    const users = getUsers()
    
    const student = users.find(
      (user) =>
        user.role === "student" &&
        (user.studentProfile?.studentId?.toLowerCase() === searchTerm ||
          user.studentProfile?.education?.studentId?.toLowerCase() === searchTerm ||
          user.profileData?.studentId?.toLowerCase() === searchTerm ||
          user.email?.toLowerCase() === searchTerm ||
          user.id?.toLowerCase() === searchTerm)
    )

if (student) {
      const profile = student.studentProfile || student.profileData
      
      // Check if student has an approved application
      // Application.studentId is the user's id (not a separate student ID number)
      const applications = getApplications()
      
      const studentApplication = applications.find(
        (app) => app.studentId === student.id && app.status === "approved"
      )

if (studentApplication) {
  const eligibilityResult = markStudentAsEligible(profile?.studentId || student.id)
  
  // Check if already claimed
  const alreadyClaimed = hasStudentClaimed(student.id)
  setIsClaimed(alreadyClaimed)
  
  setVerificationResult({
  verified: true,
  userId: student.id, // Store the user ID for marking as claimed
  student: {
  id: profile?.studentId || profile?.education?.studentId || student.id,
  name: profile?.fullName ||
  (profile?.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null) ||
  student.name ||
  "Unknown",
  course: profile?.course || profile?.education?.course || "N/A",
  yearLevel: profile?.yearLevel || profile?.education?.yearLevel || "N/A",
  status: alreadyClaimed ? "claimed" : studentApplication.status,
  profilePicture: profile?.profilePicture || student.profilePicture,
  },
  })

toast({
          title: (
            <div className="flex items-center gap-2">
              <Check className="h-4 w-4 text-green-600" />
              Verification successful
            </div>
          ),
          description: eligibilityResult.success
            ? "Student verified and marked as eligible"
            : "Student verified but eligibility marking failed",
        })
      } else {
        // Student found but no approved application
        const allApplications = applications.filter((app) => app.studentId === student.id)
        const latestApp = allApplications[allApplications.length - 1]
        
        let failureReason = "No Approved Application"
        let failureDetails = "Student found but has no approved scholarship application."
        
        if (latestApp) {
          if (latestApp.status === "pending") {
            failureReason = "Application Pending"
            failureDetails = "Student's application is still under review. Please wait for admin approval."
          } else if (latestApp.status === "rejected") {
            failureReason = "Application Rejected"
            failureDetails = latestApp.feedback 
              ? `Application was rejected: ${latestApp.feedback}`
              : "Student's application was rejected by the scholarship committee."
          }
        } else {
          failureReason = "No Application Found"
          failureDetails = "Student is registered but has not submitted a scholarship application."
        }
        
        setVerificationResult({
          verified: false,
          failureReason,
          failureDetails,
        })

toast({
          variant: "destructive",
          title: "Verification failed",
          description: failureReason,
        })
      }
    } else {
      setVerificationResult({
        verified: false,
        failureReason: "Student Not Found",
        failureDetails: "No student found with this ID, email, or user ID. Please check the information and try again.",
      })

toast({
        variant: "destructive",
        title: "Verification failed",
        description: "Student not found. Try searching by email or user ID.",
      })
    }
  }

const handleQRCodeResult = async (result: string) => {
    try {
      let studentIdFromQR: string
      let data: any = {}; // Declare data variable

// Check for new simple format: BTS:studentId
      if (result.startsWith("BTS:")) {
        studentIdFromQR = result.replace("BTS:", "")
      }
      // Check if QR code is encrypted (legacy)
      else if (result.startsWith("BTS_ENCRYPTED:")) {
        const encryptedData = result.replace("BTS_ENCRYPTED:", "")
        const secretKey = "BTS-SCHOLARSHIP-SECRET-KEY-2024"
        const decryptedJson = await decryptData(encryptedData, secretKey)
        data = JSON.parse(decryptedJson)
        studentIdFromQR = data.studentId || data.id
      } else {
        // Handle legacy JSON format
        try {
          data = JSON.parse(result)
          studentIdFromQR = data.studentId || data.id
        } catch {
          // If not JSON, treat the whole string as student ID
          studentIdFromQR = result
        }
      }

setStudentId(studentIdFromQR)

// Get all users and find the student with matching student ID
      const users = getUsers()

const student = users.find(
        (user) =>
          user.role === "student" &&
          (user.studentProfile?.studentId === studentIdFromQR ||
            user.profileData?.studentId === studentIdFromQR ||
            user.id === studentIdFromQR),
      )

if (student) {
        const profile = student.studentProfile || student.profileData
        if (profile) {
          // Check if student has an approved application
          const applications = getApplications()

const studentApplication = applications.find((app) => app.studentId === student.id && app.status === "approved")

if (studentApplication) {
  const eligibilityResult = markStudentAsEligible(profile.studentId || student.id)
  
  // Check if already claimed
  const alreadyClaimed = hasStudentClaimed(student.id)
  setIsClaimed(alreadyClaimed)
  
  setVerificationResult({
  verified: true,
  userId: student.id, // Store the user ID for marking as claimed
  student: {
  id: profile.studentId || student.id,
  name: profile.fullName || profile.firstName + " " + profile.lastName || student.name,
  course: profile.course || profile.education?.course || "N/A",
  yearLevel: profile.yearLevel || profile.education?.yearLevel || "N/A",
  status: alreadyClaimed ? "claimed" : studentApplication.status,
  profilePicture: profile.profilePicture || student.profilePicture,
  },
  })

toast({
              title: (
                <div className="flex items-center gap-2">
                  <Check className="h-4 w-4 text-green-600" />
                  Verification successful
                </div>
              ),
              description: eligibilityResult.success
                ? "Student verified and marked as eligible"
                : "Student verified but eligibility marking failed",
            })
          } else {
            // Student found but no approved application
            const allApplications = applications.filter((app) => app.studentId === student.id)
            const latestApp = allApplications[allApplications.length - 1]
            
            let failureReason = "No Approved Application"
            let failureDetails = "Student found but has no approved scholarship application."
            
            if (latestApp) {
              if (latestApp.status === "pending") {
                failureReason = "Application Pending"
                failureDetails = "Student's application is still under review. Please wait for admin approval."
              } else if (latestApp.status === "rejected") {
                failureReason = "Application Rejected"
                failureDetails = latestApp.feedback 
                  ? `Application was rejected: ${latestApp.feedback}`
                  : "Student's application was rejected by the scholarship committee."
              }
            } else {
              failureReason = "No Application Found"
              failureDetails = "Student is registered but has not submitted a scholarship application."
            }
            
            setVerificationResult({
              verified: false,
              failureReason,
              failureDetails,
            })

toast({
              variant: "destructive",
              title: "Verification failed",
              description: failureReason,
            })
          }
        }
      } else {
        setVerificationResult({
          verified: false,
          failureReason: "Student Not Found",
          failureDetails: "No student found with this QR code. The student may not be registered in the system.",
        })

toast({
          variant: "destructive",
          title: "Verification failed",
          description: "Student not found in the system",
        })
      }

// Camera stays on for continuous scanning - no setIsScanning(false) here
    } catch (error) {
      console.error("QR Code decryption error:", error)
      toast({
        variant: "destructive",
        title: "Invalid QR code",
        description: "The QR code contains invalid or corrupted data",
      })
    }
  }

return (
    <AdminLayout>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">QR Code Verification</h1>
          <p className="text-muted-foreground">Verify students for financial aid distribution</p>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Verify Student</CardTitle>
            <CardDescription>Scan QR code or enter student details manually</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="manual" className="w-full">
              <TabsList className="grid w-full grid-cols-2 mb-4">
                <TabsTrigger value="manual" className="flex items-center gap-2">
                  <Keyboard className="h-4 w-4" />
                  Manual Entry
                </TabsTrigger>
                <TabsTrigger value="qr" className="flex items-center gap-2">
                  <QrCode className="h-4 w-4" />
                  QR Scanner
                </TabsTrigger>
              </TabsList>
              
              <TabsContent value="manual" className="space-y-4">
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                  <p className="text-sm text-blue-800">
                    Enter the student's ID, email address, or user ID to verify their eligibility.
                  </p>
                </div>
                
                <div className="space-y-3">
                  <label className="text-sm font-medium">Student ID / Email / User ID</label>
                  <div className="flex gap-2">
                    <div className="relative flex-1">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                      <Input
                        placeholder="e.g., 2024-00001 or student@email.com"
                        value={studentId}
                        onChange={(e) => setStudentId(e.target.value)}
                        onKeyDown={(e) => e.key === "Enter" && handleManualVerify()}
                        className="pl-10"
                      />
                    </div>
                    <Button onClick={handleManualVerify} className="shrink-0">
                      <Check className="h-4 w-4 mr-2" />
                      Verify
                    </Button>
                  </div>
                </div>
                
                <div className="pt-4 border-t">
                  <p className="text-xs text-muted-foreground">
                    Tip: You can search by student ID number, registered email, or system user ID.
                  </p>
                </div>
              </TabsContent>
              
              <TabsContent value="qr" className="space-y-4">
                {isScanning ? (
                  <div className="space-y-4">
                    <QrScanner onResult={handleQRCodeResult} />
                    <Button variant="outline" className="w-full bg-transparent" onClick={() => setIsScanning(false)}>
                      Cancel Scanning
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                      <p className="text-sm text-amber-800">
                        Make sure to allow camera access when prompted. Position the QR code within the scanner frame.
                      </p>
                    </div>
                    <Button className="w-full" onClick={() => setIsScanning(true)}>
                      <QrCode className="h-4 w-4 mr-2" />
                      Start QR Scanner
                    </Button>
                    <p className="text-xs text-center text-muted-foreground">
                      Camera not working? Use the Manual Entry tab instead.
                    </p>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Verification Result</CardTitle>
            <CardDescription>Student information and verification status</CardDescription>
          </CardHeader>
          <CardContent>
            {verificationResult ? (
              verificationResult.verified ? (
                <div className="space-y-4">
                  <div className="rounded-lg bg-green-50 p-4 text-green-700 border border-green-200">
                    <div className="flex items-center gap-2 font-semibold">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-5 w-5"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          fillRule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                          clipRule="evenodd"
                        />
                      </svg>
                      Student Verified & Eligible
                    </div>
                    <p className="mt-1 text-sm">
                      This student has been verified and marked as eligible for financial aid distribution.
                    </p>
                  </div>

<div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg border">
                    <div className="relative">
                      {verificationResult.student?.profilePicture ? (
                        <img
                          src={verificationResult.student.profilePicture || "/placeholder.svg"}
                          alt={`${verificationResult.student.name} profile`}
                          className="w-16 h-16 rounded-full object-cover border-2 border-green-500"
                        />
                      ) : (
                        <div className="w-16 h-16 rounded-full bg-gray-200 border-2 border-green-500 flex items-center justify-center">
                          <User className="w-8 h-8 text-gray-500" />
                        </div>
                      )}
                      <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                        <Check className="w-3 h-3 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg">{verificationResult.student?.name}</h3>
                      <p className="text-sm text-gray-600">{verificationResult.student?.id}</p>
                    </div>
                  </div>

<div className="space-y-3">
                    <div className="grid grid-cols-2 gap-1">
                      <div className="text-sm font-medium">Course:</div>
                      <div className="text-sm">{verificationResult.student?.course}</div>
                    </div>
                    <div className="grid grid-cols-2 gap-1">
                      <div className="text-sm font-medium">Year Level:</div>
                      <div className="text-sm">{verificationResult.student?.yearLevel}</div>
                    </div>
                    <div className="grid grid-cols-2 gap-1">
                      <div className="text-sm font-medium">Status:</div>
                      <div className="text-sm">{verificationResult.student?.status}</div>
                    </div>
                  </div>

{isClaimed ? (
  <div className="w-full p-4 rounded-lg bg-green-50 border border-green-200 text-center">
    <div className="flex items-center justify-center gap-2 text-green-700 font-medium">
      <Check className="h-5 w-5" />
      Financial Aid Successfully Claimed
    </div>
    <p className="text-sm text-green-600 mt-2">
      Application archived to history. Student can now apply for next semester.
    </p>
    <p className="text-xs text-muted-foreground mt-2">
      Resetting in a moment...
    </p>
  </div>
) : (
  <Button className="w-full" onClick={handleMarkAsClaimed}>
    Mark as Claimed
  </Button>
)}
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="rounded-lg bg-red-50 p-4 text-red-700 border border-red-200">
                    <div className="flex items-center gap-2 font-semibold">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path
                          fillRule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                          clipRule="evenodd"
                        />
                      </svg>
                      Verification Failed
                    </div>
                  </div>
                  
                  <div className="bg-gray-50 rounded-lg border p-4 space-y-3">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Reason</p>
                      <p className="text-base font-semibold text-red-600">
                        {verificationResult.failureReason || "Unknown Error"}
                      </p>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-gray-500">Details</p>
                      <p className="text-sm text-gray-700">
                        {verificationResult.failureDetails || "This student is not eligible or not found in the system."}
                      </p>
                    </div>
                  </div>
                  
                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
                    <p className="text-xs text-amber-800">
                      <span className="font-medium">What to do:</span> Direct the student to the admin office to resolve their application status or verify their registration.
                    </p>
                  </div>
                </div>
              )
            ) : (
              <div className="flex flex-col items-center justify-center h-48 text-center text-muted-foreground">
                <p>No verification result yet.</p>
                <p className="text-sm">Scan a QR code or enter a student ID to verify.</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  )
}</article></body></html>