@etus/bhono-app 0.1.1

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

@@ -0,0 +1,416 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from '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 { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Icons } from '@/components/icons'
+import { useAuth } from '@/hooks/use-auth'
+
+export const Route = createFileRoute('/_authenticated/account')({
+  component: AccountPage,
+})
+
+function AccountPage() {
+  const { user }  = useAuth()
+
+  return (
+    <div className="space-y-8">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Account</h1>
+        <p className="text-muted-foreground">
+          Manage your account settings, security, and connected services.
+        </p>
+      </div>
+
+      {/* Connected Accounts Section */}
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-lg font-medium">Connected Accounts</h2>
+          <p className="text-sm text-muted-foreground">
+            Manage OAuth providers linked to your account.
+          </p>
+        </div>
+
+        <div className="grid gap-4">
+          {/* Google Account - Connected */}
+          <Card className="overflow-hidden">
+            <div className="flex items-center gap-4 p-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
+                <Icons.google className="h-6 w-6" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="font-medium">Google</p>
+                  <Badge variant="success" className="text-xs">Connected</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground truncate">
+                  {user?.email}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-muted-foreground hidden sm:block">
+                  Primary login method
+                </span>
+              </div>
+            </div>
+          </Card>
+
+          {/* GitHub Account - Not Connected */}
+          <Card className="overflow-hidden border-dashed">
+            <div className="flex items-center gap-4 p-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
+                <Icons.gitHub className="h-6 w-6" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="font-medium">GitHub</p>
+                  <Badge variant="outline" className="text-xs">Not connected</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Connect for additional sign-in options
+                </p>
+              </div>
+              <Button variant="outline" size="sm">
+                <Icons.plus className="mr-2 h-4 w-4" />
+                Connect
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Security Section */}
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-lg font-medium">Security</h2>
+          <p className="text-sm text-muted-foreground">
+            Keep your account secure with these settings.
+          </p>
+        </div>
+
+        <div className="grid gap-4">
+          {/* Two-Factor Authentication */}
+          <Card>
+            <div className="flex items-center gap-4 p-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30">
+                <Icons.shield className="h-6 w-6 text-amber-600 dark:text-amber-400" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <p className="font-medium">Two-Factor Authentication</p>
+                  <Badge variant="warning" className="text-xs">Recommended</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  Add an extra layer of security to your account
+                </p>
+              </div>
+              <Button variant="outline" size="sm">
+                Enable
+              </Button>
+            </div>
+          </Card>
+
+          {/* Password */}
+          <Card>
+            <div className="flex items-center gap-4 p-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
+                <Icons.key className="h-6 w-6 text-muted-foreground" />
+              </div>
+              <div className="flex-1">
+                <p className="font-medium">Password</p>
+                <p className="text-sm text-muted-foreground">
+                  Using OAuth login - no password set
+                </p>
+              </div>
+              <Button variant="outline" size="sm" disabled>
+                <Icons.pencil className="mr-2 h-4 w-4" />
+                Change
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Active Sessions Section */}
+      <section className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-medium">Active Sessions</h2>
+            <p className="text-sm text-muted-foreground">
+              Devices where you're currently logged in.
+            </p>
+          </div>
+          <Button variant="outline" size="sm">
+            Sign out all
+          </Button>
+        </div>
+
+        <div className="grid gap-4">
+          <SessionCard
+            device="Chrome on macOS"
+            location="San Francisco, CA"
+            lastActive="Active now"
+            isCurrent
+          />
+          <SessionCard
+            device="Safari on iPhone"
+            location="San Francisco, CA"
+            lastActive="2 hours ago"
+          />
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* API Access Section */}
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-lg font-medium">API Access</h2>
+          <p className="text-sm text-muted-foreground">
+            Manage API keys for programmatic access.
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base">API Keys</CardTitle>
+              <Button size="sm">
+                <Icons.plus className="mr-2 h-4 w-4" />
+                Create Key
+              </Button>
+            </div>
+            <CardDescription>
+              Generate API keys to integrate with external services.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="rounded-lg border border-dashed p-8 text-center">
+              <Icons.key className="mx-auto h-8 w-8 text-muted-foreground/50" />
+              <p className="mt-2 text-sm text-muted-foreground">
+                No API keys created yet
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Create a key to get started with the API
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      <Separator />
+
+      {/* Danger Zone */}
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-lg font-medium text-destructive">Danger Zone</h2>
+          <p className="text-sm text-muted-foreground">
+            Irreversible and destructive actions.
+          </p>
+        </div>
+
+        <Card className="border-destructive/30 bg-destructive/5">
+          <CardContent className="p-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              {/* Export Data */}
+              <div className="space-y-2">
+                <p className="font-medium">Export Data</p>
+                <p className="text-sm text-muted-foreground">
+                  Download a copy of all your data.
+                </p>
+                <Button variant="outline" size="sm">
+                  <Icons.arrowRight className="mr-2 h-4 w-4 -rotate-45" />
+                  Export
+                </Button>
+              </div>
+
+              {/* Delete Account */}
+              <div className="space-y-2">
+                <p className="font-medium">Delete Account</p>
+                <p className="text-sm text-muted-foreground">
+                  Permanently delete your account and data.
+                </p>
+                <DeleteAccountDialog userEmail={user?.email ?? ''} />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  )
+}
+
+function SessionCard({
+  device,
+  location,
+  lastActive,
+  isCurrent = false,
+}: {
+  device: string
+  location: string
+  lastActive: string
+  isCurrent?: boolean
+}) {
+  return (
+    <div className="flex items-center gap-4 rounded-lg border p-4">
+      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+        <Icons.globe className="h-5 w-5 text-muted-foreground" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <p className="font-medium text-sm">{device}</p>
+          {isCurrent && (
+            <Badge variant="success" className="text-xs">Current</Badge>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {location} · {lastActive}
+        </p>
+      </div>
+      {!isCurrent && (
+        <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+          <Icons.logout className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function DeleteAccountDialog({ userEmail }: { userEmail: string }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const DeleteConfirmSchema = useMemo(
+    () =>
+      z.object({
+        confirmText: z.string().refine((val) => val === userEmail, {
+          message: 'Digite seu email corretamente para confirmar',
+        }),
+      }),
+    [userEmail]
+  )
+
+  type DeleteConfirmInput = z.infer<typeof DeleteConfirmSchema>
+
+  const form = useForm<DeleteConfirmInput>({
+    resolver: zodResolver(DeleteConfirmSchema),
+    defaultValues: {
+      confirmText: '',
+    },
+  })
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
+    if (!open) form.reset()
+  }
+
+  const onSubmit = async (_data: DeleteConfirmInput) => {
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      toast.success('Account deleted successfully')
+      setIsOpen(false)
+      form.reset()
+    } catch {
+      toast.error('Failed to delete account. Please try again.')
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" size="sm">
+          <Icons.trash className="mr-2 h-4 w-4" />
+          Delete
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <Form {...form}>
+          <form onSubmit={(e) => { void form.handleSubmit(onSubmit)(e) }}>
+            <DialogHeader>
+              <DialogTitle className="text-destructive">Delete Account</DialogTitle>
+              <DialogDescription>
+                This action cannot be undone. This will permanently delete your account
+                and remove all associated data from our servers.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              <div className="rounded-lg bg-destructive/10 p-4 text-sm">
+                <p className="font-medium text-destructive">Warning</p>
+                <ul className="mt-2 list-inside list-disc space-y-1 text-muted-foreground">
+                  <li>All your data will be permanently deleted</li>
+                  <li>You will lose access to all workspaces</li>
+                  <li>This action is irreversible</li>
+                </ul>
+              </div>
+
+              <FormField
+                control={form.control}
+                name="confirmText"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Type <span className="font-mono font-medium">{userEmail}</span> to confirm
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter your email"
+                        className="font-mono"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => { setIsOpen(false) }}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="destructive"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <>
+                    <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                    Deleting...
+                  </>
+                ) : (
+                  <>
+                    <Icons.trash className="mr-2 h-4 w-4" />
+                    Delete Account
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,151 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Icons } from '@/components/icons'
+import { useAuth } from '@/hooks/use-auth'
+
+export const Route = createFileRoute('/_authenticated/dashboard')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { user } = useAuth()
+  const firstName = user?.name ? user.name.split(' ')[0] : 'there'
+
+  return (
+    <div className="space-y-8">
+      {/* Welcome section */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Welcome back, {firstName}
+        </h1>
+        <p className="text-muted-foreground">
+          Here&apos;s an overview of your workspace.
+        </p>
+      </div>
+
+      {/* Stats cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatsCard
+          title="Total Users"
+          value="0"
+          description="Active team members"
+          icon={<Icons.users className="h-4 w-4 text-muted-foreground" />}
+        />
+        <StatsCard
+          title="Accounts"
+          value="1"
+          description="Connected accounts"
+          icon={<Icons.layers className="h-4 w-4 text-muted-foreground" />}
+        />
+        <StatsCard
+          title="API Requests"
+          value="0"
+          description="Last 30 days"
+          icon={<Icons.zap className="h-4 w-4 text-muted-foreground" />}
+        />
+        <StatsCard
+          title="Uptime"
+          value="100%"
+          description="Last 30 days"
+          icon={<Icons.globe className="h-4 w-4 text-muted-foreground" />}
+        />
+      </div>
+
+      {/* Quick actions */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Icons.users className="h-5 w-5" />
+              Invite Team Members
+            </CardTitle>
+            <CardDescription>
+              Add collaborators to your workspace and manage permissions.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Use the API to send invitations or manage users programmatically.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Icons.database className="h-5 w-5" />
+              Database
+            </CardTitle>
+            <CardDescription>
+              Your data is stored securely on Cloudflare D1.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Built with Drizzle ORM for type-safe database queries.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Icons.shield className="h-5 w-5" />
+              Security
+            </CardTitle>
+            <CardDescription>
+              OAuth 2.0 authentication with secure JWT tokens.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Role-based access control and audit logging enabled.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent activity placeholder */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+          <CardDescription>
+            Your latest actions and events will appear here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-32 items-center justify-center rounded-md border border-dashed">
+            <p className="text-sm text-muted-foreground">
+              No recent activity
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function StatsCard({
+  title,
+  value,
+  description,
+  icon,
+}: {
+  title: string
+  value: string
+  description: string
+  icon: React.ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        {icon}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </CardContent>
+    </Card>
+  )
+}