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

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>
   )
 }
-