feat(classes): optimize teacher dashboard ui and implement grade management

src/modules/settings/components/admin-settings-view.tsx

@@ -11,8 +11,10 @@ import { Label } from "@/shared/components/ui/label"
 import { Separator } from "@/shared/components/ui/separator"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
 import { ThemePreferencesCard } from "./theme-preferences-card"
+import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
+import { UserProfile } from "@/modules/users/data-access"
 
-export function AdminSettingsView() {
+export function AdminSettingsView({ user }: { user: UserProfile }) {
   return (
     <div className="flex h-full flex-col gap-8 p-8">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
@@ -44,32 +46,7 @@ export function AdminSettingsView() {
         </TabsList>
 
         <TabsContent value="general" className="mt-6 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account</CardTitle>
-              <CardDescription>Basic profile information for this admin account.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" defaultValue="Admin User" disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input id="email" defaultValue="admin@nextedu.com" disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="role">Role</Label>
-                  <Input id="role" defaultValue="admin" className="tabular-nums" disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="status">Status</Label>
-                  <Input id="status" defaultValue="active" disabled />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          <ProfileSettingsForm user={user} />
 
           <Card>
             <CardHeader>
@@ -100,8 +77,8 @@ export function AdminSettingsView() {
                     Departments, classes, and academic year settings live under the School Management section.
                   </div>
                 </div>
-                <Button asChild variant="outline" className="shrink-0">
-                  <Link href="/admin/school/departments">Open</Link>
+                <Button variant="outline" size="sm" asChild>
+                  <Link href="/admin/school">Manage</Link>
                 </Button>
               </div>
             </CardContent>
@@ -128,29 +105,6 @@ export function AdminSettingsView() {
               </Button>
             </CardContent>
           </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Danger zone</CardTitle>
-              <CardDescription>Destructive actions are disabled in demo mode.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
-                <div className="flex h-9 w-9 items-center justify-center rounded-md bg-background">
-                  <Shield className="h-4 w-4 text-destructive" />
-                </div>
-                <div className="flex-1 space-y-1">
-                  <div className="text-sm font-medium">Reset system</div>
-                  <div className="text-sm text-muted-foreground">
-                    This action would clear all data and cannot be undone.
-                  </div>
-                </div>
-                <Button variant="destructive" disabled className="shrink-0">
-                  Reset
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
         </TabsContent>
       </Tabs>
     </div>

src/modules/settings/components/profile-settings-form.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import { useTransition } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Loader2, Save } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/shared/components/ui/card"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/shared/components/ui/form"
+import { UserProfile } from "@/modules/users/data-access"
+import { updateUserProfile } from "@/modules/users/actions"
+
+const profileFormSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters."),
+  email: z.string().email().optional(), // Read only
+  role: z.string().optional(), // Read only
+  phone: z.string().optional(),
+  address: z.string().optional(),
+  gender: z.string().optional(),
+  age: z.coerce.number().min(0).optional(),
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+
+export function ProfileSettingsForm({ user }: { user: UserProfile }) {
+  const [isPending, startTransition] = useTransition()
+
+  const form = useForm<ProfileFormValues>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(profileFormSchema) as any,
+    defaultValues: {
+      name: user.name ?? "",
+      email: user.email ?? "",
+      role: user.role ?? "",
+      phone: user.phone ?? "",
+      address: user.address ?? "",
+      gender: user.gender ?? "",
+      age: user.age ?? undefined,
+    },
+  })
+
+  function onSubmit(data: ProfileFormValues) {
+    startTransition(async () => {
+      try {
+        await updateUserProfile({
+          name: data.name,
+          phone: data.phone || undefined,
+          address: data.address || undefined,
+          gender: data.gender || undefined,
+          age: data.age || undefined,
+        })
+        toast.success("Profile updated successfully")
+      } catch (error) {
+        toast.error("Failed to update profile")
+        console.error(error)
+      }
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profile Information</CardTitle>
+        <CardDescription>Update your personal information.</CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="name"
+                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 {...field} disabled />
+                    </FormControl>
+                    <FormDescription>Email cannot be changed.</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="phone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Phone</FormLabel>
+                    <FormControl>
+                      <Input placeholder="+1 234 567 890" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="gender"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Gender</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select gender" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="male">Male</SelectItem>
+                        <SelectItem value="female">Female</SelectItem>
+                        <SelectItem value="other">Other</SelectItem>
+                        <SelectItem value="prefer_not_to_say">Prefer not to say</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="age"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Age</FormLabel>
+                    <FormControl>
+                      <Input type="number" placeholder="Age" {...field} value={field.value ?? ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <FormControl>
+                      <Input {...field} disabled className="capitalize" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="address"
+                render={({ field }) => (
+                  <FormItem className="col-span-1 sm:col-span-2">
+                    <FormLabel>Address</FormLabel>
+                    <FormControl>
+                      <Input placeholder="123 Main St, City, Country" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+          <CardFooter className="flex justify-end border-t px-6 py-4">
+            <Button type="submit" disabled={isPending}>
+              {isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                <>
+                  <Save className="mr-2 h-4 w-4" />
+                  Save Changes
+                </>
+              )}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  )
+}

src/modules/settings/components/student-settings-view.tsx

@@ -5,24 +5,13 @@ import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays } from "luc
 import { signOut } from "next-auth/react"
 
 import { ThemePreferencesCard } from "@/modules/settings/components/theme-preferences-card"
+import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
-import { Input } from "@/shared/components/ui/input"
-import { Label } from "@/shared/components/ui/label"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { UserProfile } from "@/modules/users/data-access"
 
-type SettingsUser = {
-  id?: string | null
-  name?: string | null
-  email?: string | null
-  role?: string | null
-}
-
-export function StudentSettingsView({ user }: { user: SettingsUser }) {
-  const role = "student"
-  const name = user.name ?? "-"
-  const email = user.email ?? "-"
-
+export function StudentSettingsView({ user }: { user: UserProfile }) {
   return (
     <div className="flex h-full flex-col gap-8 p-8">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
@@ -54,28 +43,7 @@ export function StudentSettingsView({ user }: { user: SettingsUser }) {
         </TabsList>
 
         <TabsContent value="general" className="mt-6 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account</CardTitle>
-              <CardDescription>Signed-in user details from session.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" value={name} disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input id="email" value={email} disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="role">Role</Label>
-                  <Input id="role" value={role} className="tabular-nums" disabled />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          <ProfileSettingsForm user={user} />
 
           <Card>
             <CardHeader>
@@ -133,4 +101,3 @@ export function StudentSettingsView({ user }: { user: SettingsUser }) {
     </div>
   )
 }
-

src/modules/settings/components/teacher-settings-view.tsx

@@ -5,24 +5,13 @@ import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays, Library, F
 import { signOut } from "next-auth/react"
 
 import { ThemePreferencesCard } from "@/modules/settings/components/theme-preferences-card"
+import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
-import { Input } from "@/shared/components/ui/input"
-import { Label } from "@/shared/components/ui/label"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { UserProfile } from "@/modules/users/data-access"
 
-type SettingsUser = {
-  id?: string | null
-  name?: string | null
-  email?: string | null
-  role?: string | null
-}
-
-export function TeacherSettingsView({ user }: { user: SettingsUser }) {
-  const role = "teacher"
-  const name = user.name ?? "-"
-  const email = user.email ?? "-"
-
+export function TeacherSettingsView({ user }: { user: UserProfile }) {
   return (
     <div className="flex h-full flex-col gap-8 p-8">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
@@ -54,28 +43,7 @@ export function TeacherSettingsView({ user }: { user: SettingsUser }) {
         </TabsList>
 
         <TabsContent value="general" className="mt-6 space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account</CardTitle>
-              <CardDescription>Signed-in user details from session.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" value={name} disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input id="email" value={email} disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="role">Role</Label>
-                  <Input id="role" value={role} className="tabular-nums" disabled />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          <ProfileSettingsForm user={user} />
 
           <Card>
             <CardHeader>
@@ -145,4 +113,3 @@ export function TeacherSettingsView({ user }: { user: SettingsUser }) {
     </div>
   )
 }
-