@etus/bhono-app 0.1.1

package/templates/base/src/client/routes/_authenticated/settings.tsx

@@ -0,0 +1,310 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from 'sonner'
+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 { Separator } from '@/components/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Icons } from '@/components/icons'
+import { useAuth } from '@/hooks/use-auth'
+import { UpdateProfileSchema, type UpdateProfileInput } from '@shared/schemas'
+
+export const Route = createFileRoute('/_authenticated/settings')({
+  component: SettingsPage,
+})
+
+function SettingsPage() {
+  const { user } = useAuth()
+
+  const form = useForm<UpdateProfileInput>({
+    resolver: zodResolver(UpdateProfileSchema),
+    defaultValues: {
+      name: user?.name ?? '',
+    },
+  })
+
+  const initials = user?.name
+    ? user.name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2)
+    : user?.email
+      ? user.email[0].toUpperCase()
+      : '?'
+
+  const onSubmit = async (data: UpdateProfileInput) => {
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      toast.success('Profile updated successfully')
+      console.log('Profile data:', data)
+    } catch {
+      toast.error('Failed to update profile. Please try again.')
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground">
+          Manage your account settings and preferences.
+        </p>
+      </div>
+
+      <Tabs defaultValue="profile" className="space-y-6">
+        <TabsList>
+          <TabsTrigger value="profile">
+            <Icons.user className="mr-2 h-4 w-4" />
+            Profile
+          </TabsTrigger>
+          <TabsTrigger value="account">
+            <Icons.settings className="mr-2 h-4 w-4" />
+            Account
+          </TabsTrigger>
+          <TabsTrigger value="notifications">
+            <Icons.bell className="mr-2 h-4 w-4" />
+            Notifications
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Profile Tab */}
+        <TabsContent value="profile" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile Picture</CardTitle>
+              <CardDescription>
+                Your profile picture is visible to other team members.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex items-center gap-6">
+              <Avatar className="h-20 w-20">
+                <AvatarImage src={user?.avatarUrl ?? undefined} alt={user?.name ?? ''} />
+                <AvatarFallback className="text-lg">{initials}</AvatarFallback>
+              </Avatar>
+              <div className="space-y-2">
+                <Button variant="outline" size="sm">
+                  <Icons.camera className="mr-2 h-4 w-4" />
+                  Change Photo
+                </Button>
+                <p className="text-xs text-muted-foreground">
+                  JPG, PNG or GIF. Max 2MB.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Personal Information</CardTitle>
+              <CardDescription>
+                Update your personal details here.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...form}>
+                <form onSubmit={(e) => { void form.handleSubmit(onSubmit)(e) }} className="space-y-4">
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Full Name</FormLabel>
+                          <FormControl>
+                            <Input placeholder="Enter your name" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <div className="space-y-2">
+                      <Label>Email Address</Label>
+                      <Input
+                        type="email"
+                        defaultValue={user?.email ?? ''}
+                        placeholder="Enter your email"
+                        disabled
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Email cannot be changed.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button type="submit" disabled={form.formState.isSubmitting}>
+                      {form.formState.isSubmitting && (
+                        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                      )}
+                      Save Changes
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Account Tab */}
+        <TabsContent value="account" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Connected Accounts</CardTitle>
+              <CardDescription>
+                Manage your connected OAuth providers.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                    <Icons.google className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Google</p>
+                    <p className="text-sm text-muted-foreground">
+                      {user?.email}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="flex items-center gap-1 text-sm text-emerald-600">
+                    <Icons.check className="h-4 w-4" />
+                    Connected
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Sessions</CardTitle>
+              <CardDescription>
+                Manage your active sessions across devices.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                    <Icons.globe className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Current Session</p>
+                    <p className="text-sm text-muted-foreground">
+                      Your current browser session
+                    </p>
+                  </div>
+                </div>
+                <span className="text-sm text-emerald-600">Active</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-destructive/50">
+            <CardHeader>
+              <CardTitle className="text-destructive">Danger Zone</CardTitle>
+              <CardDescription>
+                Irreversible and destructive actions.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Delete Account</p>
+                  <p className="text-sm text-muted-foreground">
+                    Permanently delete your account and all associated data.
+                  </p>
+                </div>
+                <Button variant="destructive" size="sm">
+                  Delete Account
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Notifications Tab */}
+        <TabsContent value="notifications" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Email Notifications</CardTitle>
+              <CardDescription>
+                Choose what emails you want to receive.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <NotificationToggle
+                title="Team Invitations"
+                description="Receive emails when someone invites you to a team."
+                defaultChecked
+              />
+              <Separator />
+              <NotificationToggle
+                title="Product Updates"
+                description="News about product updates and new features."
+                defaultChecked
+              />
+              <Separator />
+              <NotificationToggle
+                title="Security Alerts"
+                description="Important notifications about your account security."
+                defaultChecked
+                disabled
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function NotificationToggle({
+  title,
+  description,
+  defaultChecked = false,
+  disabled = false,
+}: {
+  title: string
+  description: string
+  defaultChecked?: boolean
+  disabled?: boolean
+}) {
+  const [checked, setChecked] = useState(defaultChecked)
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="space-y-0.5">
+        <p className="font-medium">{title}</p>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => { setChecked(!checked); }}
+        className={`
+          relative inline-flex h-6 w-11 shrink-0 cursor-pointer 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
+          disabled:cursor-not-allowed disabled:opacity-50
+          ${checked ? 'bg-primary' : 'bg-input'}
+        `}
+      >
+        <span
+          className={`
+            pointer-events-none inline-block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
+            ${checked ? 'translate-x-5' : 'translate-x-0'}
+          `}
+        />
+      </button>
+    </div>
+  )
+}