xertica-ui 2.3.0 → 2.4.0

package/components/pages/template-content/TemplateContent.tsx

@@ -1,1235 +1,1354 @@
-import React, { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { Button } from '../../ui/button';
-import { Input } from '../../ui/input';
-import { Label } from '../../ui/label';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from '../../ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
-import { Badge } from '../../ui/badge';
-import { Alert, AlertDescription, AlertTitle } from '../../ui/alert';
-import { Checkbox } from '../../ui/checkbox';
-import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
-import { Switch } from '../../ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
-import { Textarea } from '../../ui/textarea';
-import { Progress } from '../../ui/progress';
-import { Separator } from '../../ui/separator';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../ui/table';
-import {
-  Settings,
-  User,
-  Mail,
-  Phone,
-  Calendar,
-  Search,
-  Menu,
-  ChevronRight,
-  Home,
-  Users,
-  Plus,
-  Trash2,
-  Archive,
-  ArrowRightLeft,
-  History,
-  PanelRight,
-  FileEdit,
-  Filter,
-  Clock,
-  Map,
-  Bell,
-} from 'lucide-react';
-import { Slider } from '../../ui/slider';
-import { toast } from 'sonner';
-import { ScrollArea } from '../../ui/scroll-area';
-import { ThemeToggle } from '../../brand/theme-toggle';
-import { LanguageSelector } from '../../brand/language-selector';
-import { MapShowcase } from '../../examples/MapShowcase';
-import { Header } from '../../layout/header';
-import { Sidebar } from '../../layout/sidebar';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '../../ui/dialog';
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '../../ui/alert-dialog';
-import { PageHeader } from '../../ui/page-header';
-
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { useTeamMembers, useDashboardStore } from '../../../features/home';
-import { useTranslation } from 'react-i18next';
-import { SectionErrorBoundary } from '../../shared/error-boundary';
-import { Skeleton } from '../../ui/skeleton';
-
-/**
- * Comprehensive Showcase and Template Content component.
- *
- * @description
- * This component serves as a living kitchen-sink demonstration of the Xertica UI
- * Design System. It showcases almost every UI primitive (Cards, Tabs, Forms,
- * Tables, Dialogs, etc.) and layout variation (Header flexibility, Sidebar
- * toggling). It's primarily used for development, testing, and as a starting
- * point for new pages.
- *
- * @ai-rules
- * 1. Reference: Use this component as the primary source of truth for "how to compose" complex layouts in this library.
- * 2. Layout: Adjusts its own padding based on the `useLayout` context's sidebar state.
- * 3. Interaction: All showcase interactive elements (buttons, forms) use simple `toast` feedback or local state toggles.
- */
-export function TemplateContent() {
-  const { t } = useTranslation();
-  const layout = useOptionalLayout();
-  const [localSidebarExpanded, setLocalSidebarExpanded] = useState(false);
-  const [localSidebarWidth, setLocalSidebarWidth] = useState(280);
-  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
-  const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
-  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
-  const navigate = useNavigate();
-
-  // Server state
-  const { data: teamMembers = [], isLoading: teamLoading } = useTeamMembers();
-
-  // Client-side UI state (Zustand)
-  const progress = useDashboardStore(s => s.progress);
-  const setProgress = useDashboardStore(s => s.setProgress);
-  const sliderValue = useDashboardStore(s => s.sliderValue);
-  const setSliderValue = useDashboardStore(s => s.setSliderValue);
-  const switchEnabled = useDashboardStore(s => s.switchEnabled);
-  const toggleSwitch = useDashboardStore(s => s.toggleSwitch);
-
-  // Local UI-only toggles (no global relevance)
-  const [showSidebarUser, setShowSidebarUser] = useState(true);
-  const [showSidebarSettings, setShowSidebarSettings] = useState(true);
-  const [showSidebarLogout, setShowSidebarLogout] = useState(true);
-
-  // Header State
-  const [showHeaderActions, setShowHeaderActions] = useState(true);
-  const [showHeaderBreadcrumbs, setShowHeaderBreadcrumbs] = useState(true);
-
-  const handleFormSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    toast.success(t('templates.formSubmitSuccess'));
-  };
-
-  return (
-    <div
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
-      }}
-    >
-      {/* Sticky Header */}
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[
-          { label: t('nav.designSystem'), href: '/home', icon: <Home className="w-4 h-4" /> },
-          { label: t('templates.breadcrumb') },
-        ]}
-        renderLink={(href, props) => <Link to={href} {...props} />}
-      />
-
-      {/* Content area */}
-      <main className="flex-1 overflow-hidden bg-muted">
-        <ScrollArea className="h-full">
-          <div className="p-5 sm:p-4 md:p-6">
-            <div className="max-w-6xl mx-auto space-y-8">
-              {/* Page header */}
-              <PageHeader
-                title={t('templates.title')}
-                subtitle={t('templates.subtitle')}
-              />
-
-              {/* Page Header Example */}
-              <section>
-                <h3 className="mb-4">{t('templates.headerWithBreadcrumbs.sectionTitle')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.headerWithBreadcrumbs.cardTitle')}</CardTitle>
-                    <CardDescription>{t('templates.headerWithBreadcrumbs.cardDescription')}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]">
-                    <Header
-                      className="border-b"
-                      breadcrumbs={[
-                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.dashboard'), href: '#', icon: <Home className="w-4 h-4" /> },
-                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.settings'), href: '#', icon: <Settings className="w-4 h-4" /> },
-                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.users'), href: '#', icon: <Users className="w-4 h-4" /> },
-                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.accessProfile') },
-                      ]}
-                      showLanguageSelector={true}
-                      showThemeToggle={true}
-                    />
-                    <div className="p-6 min-h-[200px]">
-                      <h4 className="text-lg font-semibold mb-2">{t('templates.headerWithBreadcrumbs.exampleContentTitle')}</h4>
-                      <p className="text-muted-foreground">
-                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart1')}
-                        <strong>Header</strong>
-                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart2')}
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Alert Examples */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Alert variant="info">
-                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="destructive">
-                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="success">
-                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="warning">
-                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
-                  </Alert>
-                </div>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Cards & Tabs */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
-
-                <Tabs defaultValue="overview" className="w-full">
-                  <TabsList className="grid w-full grid-cols-4">
-                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
-                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
-                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
-                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
-                  </TabsList>
-
-                  {/* Overview Tab */}
-                  <TabsContent value="overview" className="space-y-4">
-                    <div className="grid gap-4 md:grid-cols-3">
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
-                          <CardDescription>{t('stats.last30Days')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              1,234
-                            </span>
-                            <Badge variant="default" className="ml-2">
-                              +12%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
-                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              $ 45.2k
-                            </span>
-                            <Badge variant="secondary" className="ml-2">
-                              +8%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
-                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              3.2%
-                            </span>
-                            <Badge variant="outline" className="ml-2">
-                              -2%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    </div>
-
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
-                        <CardDescription>{t('templates.overview.progressDescription')}</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between">
-                            <Label>{t('templates.overview.projectProgress')}</Label>
-                            <span className="[font-size:var(--text-small)] text-muted-foreground">
-                              {progress}%
-                            </span>
-                          </div>
-                          <Progress value={progress} className="w-full" />
-                          <div className="flex gap-2">
-                            <Button
-                              size="sm"
-                              onClick={() => setProgress(Math.max(0, progress - 10))}
-                            >
-                              -10%
-                            </Button>
-                            <Button
-                              size="sm"
-                              onClick={() => setProgress(Math.min(100, progress + 10))}
-                            >
-                              +10%
-                            </Button>
-                          </div>
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between">
-                            <Label>{t('templates.overview.volume')}</Label>
-                            <span className="[font-size:var(--text-small)] text-muted-foreground">
-                              {sliderValue[0]}%
-                            </span>
-                          </div>
-                          <Slider
-                            value={sliderValue}
-                            onValueChange={setSliderValue}
-                            min={0}
-                            max={100}
-                            step={1}
-                            className="w-full"
-                            aria-label={t('templates.overview.volume')}
-                          />
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  {/* Forms Tab */}
-                  <TabsContent value="forms" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
-                        <CardDescription>{t('templates.forms.registrationDescription')}</CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <form onSubmit={handleFormSubmit} className="space-y-4">
-                          <div className="grid gap-4 md:grid-cols-2">
-                            <div className="space-y-2">
-                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
-                              <Input id="firstName" placeholder={t('templates.forms.firstNamePlaceholder')} />
-                            </div>
-                            <div className="space-y-2">
-                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
-                              <Input id="lastName" placeholder={t('templates.forms.lastNamePlaceholder')} />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
-                            <div className="relative">
-                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                              <Input
-                                id="email"
-                                type="email"
-                                placeholder={t('templates.forms.emailPlaceholder')}
-                                className="pl-10"
-                              />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
-                            <div className="relative">
-                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                              <Input
-                                id="phone"
-                                type="tel"
-                                placeholder={t('templates.forms.phonePlaceholder')}
-                                className="pl-10"
-                              />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
-                            <Select>
-                              <SelectTrigger id="role">
-                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="developer">{t('templates.forms.roles.developer')}</SelectItem>
-                                <SelectItem value="designer">{t('templates.forms.roles.designer')}</SelectItem>
-                                <SelectItem value="manager">{t('templates.forms.roles.manager')}</SelectItem>
-                                <SelectItem value="analyst">{t('templates.forms.roles.analyst')}</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
-                            <Textarea
-                              id="bio"
-                              placeholder={t('templates.forms.bioPlaceholder')}
-                              rows={4}
-                            />
-                          </div>
-
-                          <Separator />
-
-                          <div className="space-y-4">
-                            <h4>{t('templates.forms.preferences')}</h4>
-
-                            <div className="space-y-3">
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="newsletter" />
-                                <Label htmlFor="newsletter" className="font-normal">
-                                  {t('templates.forms.newsletter')}
-                                </Label>
-                              </div>
-
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="notifications" />
-                                <Label htmlFor="notifications" className="font-normal">
-                                  {t('templates.forms.pushNotifications')}
-                                </Label>
-                              </div>
-
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="updates" />
-                                <Label htmlFor="updates" className="font-normal">
-                                  {t('templates.forms.featureUpdates')}
-                                </Label>
-                              </div>
-                            </div>
-
-                            <Separator />
-
-                            <div className="space-y-3">
-                              <Label>{t('templates.forms.accountType')}</Label>
-                              <RadioGroup defaultValue="personal" aria-label={t('templates.forms.accountType')}>
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="personal" id="personal" />
-                                  <Label htmlFor="personal" className="font-normal">
-                                    {t('templates.forms.accountPersonal')}
-                                  </Label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="business" id="business" />
-                                  <Label htmlFor="business" className="font-normal">
-                                    {t('templates.forms.accountBusiness')}
-                                  </Label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="enterprise" id="enterprise" />
-                                  <Label htmlFor="enterprise" className="font-normal">
-                                    {t('templates.forms.accountEnterprise')}
-                                  </Label>
-                                </div>
-                              </RadioGroup>
-                            </div>
-                          </div>
-                        </form>
-                      </CardContent>
-                      <CardFooter className="flex justify-between">
-                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
-                        <Button onClick={handleFormSubmit}>{t('templates.forms.createAccount')}</Button>
-                      </CardFooter>
-                    </Card>
-                  </TabsContent>
-
-                  {/* Data Tab */}
-                  <TabsContent value="data" className="space-y-4">
-                    <SectionErrorBoundary>
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.data.title')}</CardTitle>
-                        <CardDescription>{t('templates.data.description')}</CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <div className="mb-4">
-                          <div className="relative">
-                            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                            <Input
-                              placeholder={t('templates.data.searchPlaceholder')}
-                              aria-label={t('templates.data.searchPlaceholder')}
-                              className="pl-10"
-                            />
-                          </div>
-                        </div>
-
-                        <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
-                          <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead>{t('team.name')}</TableHead>
-                                <TableHead>{t('team.email')}</TableHead>
-                                <TableHead>{t('team.role')}</TableHead>
-                                <TableHead>{t('team.status')}</TableHead>
-                                <TableHead className="text-right">{t('team.actions')}</TableHead>
-                              </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                              {teamLoading ? (
-                                <>
-                                  {Array.from({ length: 5 }).map((_, i) => (
-                                    <TableRow key={i}>
-                                      <TableCell>
-                                        <div className="flex items-center gap-2">
-                                          <Skeleton className="size-8 rounded-full shrink-0" />
-                                          <Skeleton className="h-3.5 w-28" />
-                                        </div>
-                                      </TableCell>
-                                      <TableCell><Skeleton className="h-3.5 w-36" /></TableCell>
-                                      <TableCell><Skeleton className="h-3.5 w-20" /></TableCell>
-                                      <TableCell><Skeleton className="h-5 w-16 rounded-full" /></TableCell>
-                                      <TableCell className="text-right"><Skeleton className="h-7 w-14 ml-auto" /></TableCell>
-                                    </TableRow>
-                                  ))}
-                                </>
-                              ) : (
-                                teamMembers.map(member => (
-                                  <TableRow key={member.id}>
-                                    <TableCell>{member.name}</TableCell>
-                                    <TableCell>{member.email}</TableCell>
-                                    <TableCell>{t(`team.roles.${member.role}`)}</TableCell>
-                                    <TableCell>
-                                      <Badge
-                                        variant={
-                                          member.status === 'active'
-                                            ? 'default'
-                                            : member.status === 'away'
-                                              ? 'secondary'
-                                              : 'outline'
-                                        }
-                                      >
-                                        {t(`common.${member.status}`)}
-                                      </Badge>
-                                    </TableCell>
-                                    <TableCell className="text-right">
-                                      <Button variant="ghost" size="sm">
-                                        {t('common.edit')}
-                                      </Button>
-                                    </TableCell>
-                                  </TableRow>
-                                ))
-                              )}
-                            </TableBody>
-                          </Table>
-                        </div>
-                      </CardContent>
-                      <CardFooter className="flex justify-between items-center">
-                        <p className="text-muted-foreground">
-                          {t('team.showing', { count: teamMembers.length, total: teamMembers.length })}
-                        </p>
-                        <div className="flex gap-2">
-                          <Button variant="outline" size="sm">
-                            {t('common.previous')}
-                          </Button>
-                          <Button variant="outline" size="sm">
-                            {t('common.next')}
-                          </Button>
-                        </div>
-                      </CardFooter>
-                    </Card>
-                    </SectionErrorBoundary>
-                  </TabsContent>
-
-                  {/* Settings Tab */}
-                  <TabsContent value="settings" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.settings.title')}</CardTitle>
-                        <CardDescription>{t('templates.settings.description')}</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label htmlFor="dark-mode">{t('templates.settings.darkMode')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.darkModeDescription')}
-                            </p>
-                          </div>
-                          <Switch
-                            id="dark-mode"
-                            checked={switchEnabled}
-                            onCheckedChange={toggleSwitch}
-                          />
-                        </div>
-
-                        <Separator />
-
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label htmlFor="email-notifications">{t('templates.settings.emailNotifications')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.emailNotificationsDescription')}
-                            </p>
-                          </div>
-                          <Switch id="email-notifications" defaultChecked />
-                        </div>
-
-                        <Separator />
-
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label htmlFor="push-notifications">{t('templates.settings.pushNotifications')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.pushNotificationsDescription')}
-                            </p>
-                          </div>
-                          <Switch id="push-notifications" />
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-3">
-                          <Label>{t('templates.settings.language')}</Label>
-                          <Select defaultValue="pt-br">
-                            <SelectTrigger aria-label={t('templates.settings.language')}>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="pt-br">{t('templates.settings.languages.ptBR')}</SelectItem>
-                              <SelectItem value="en">{t('templates.settings.languages.en')}</SelectItem>
-                              <SelectItem value="es">{t('templates.settings.languages.es')}</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-3">
-                          <Label>{t('templates.settings.timezone')}</Label>
-                          <Select defaultValue="america-sao-paulo">
-                            <SelectTrigger aria-label={t('templates.settings.timezone')}>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="america-sao-paulo">
-                                {t('templates.settings.timezones.saoPaulo')}
-                              </SelectItem>
-                              <SelectItem value="america-new-york">
-                                {t('templates.settings.timezones.newYork')}
-                              </SelectItem>
-                              <SelectItem value="europe-london">{t('templates.settings.timezones.london')}</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      </CardContent>
-                      <CardFooter className="flex justify-between">
-                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
-                        <Button>{t('templates.settings.saveChanges')}</Button>
-                      </CardFooter>
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Button Variants */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
-                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-6">
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.variants')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button variant="default">Default</Button>
-                        <Button variant="secondary">Secondary</Button>
-                        <Button variant="outline">Outline</Button>
-                        <Button variant="ghost">Ghost</Button>
-                        <Button variant="link">Link</Button>
-                        <Button variant="destructive">Destructive</Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.sizes')}</Label>
-                      <div className="flex flex-wrap items-center gap-3">
-                        <Button size="sm">Small</Button>
-                        <Button size="default">Default</Button>
-                        <Button size="lg">Large</Button>
-                        <Button size="icon" aria-label={t('nav.settings')}>
-                          <Settings className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.withIcons')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button>
-                          <User className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.profile')}
-                        </Button>
-                        <Button variant="secondary">
-                          <Mail className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.messages')}
-                        </Button>
-                        <Button variant="outline">
-                          <Calendar className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.schedule')}
-                        </Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.states')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button disabled>{t('templates.buttons.disabled')}</Button>
-                        <Button variant="outline" disabled>
-                          {t('templates.buttons.outlineDisabled')}
-                        </Button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Badges */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.badges.title')}</CardTitle>
-                    <CardDescription>{t('templates.badges.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex flex-wrap gap-3">
-                      <Badge variant="default">Default</Badge>
-                      <Badge variant="secondary">Secondary</Badge>
-                      <Badge variant="outline">Outline</Badge>
-                      <Badge variant="destructive">Destructive</Badge>
-                      <Badge className="bg-success text-success-foreground">Success</Badge>
-                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
-                      <Badge className="bg-info text-info-foreground">Info</Badge>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Dialogs */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
-                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex justify-center py-6">
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
-                        </DialogTrigger>
-                        <DialogContent className="sm:max-w-[425px]">
-                          <DialogHeader>
-                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
-                            <DialogDescription>
-                              {t('templates.dialogs.editProfileDescription')}
-                            </DialogDescription>
-                          </DialogHeader>
-                          <div className="grid gap-4 py-4">
-                            <div className="grid grid-cols-4 items-center gap-4">
-                              <Label htmlFor="name" className="text-right">
-                                {t('templates.dialogs.name')}
-                              </Label>
-                              <Input id="name" defaultValue="John Doe" className="col-span-3" />
-                            </div>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                              <Label htmlFor="username" className="text-right">
-                                {t('templates.dialogs.username')}
-                              </Label>
-                              <Input id="username" defaultValue="@johndoe" className="col-span-3" />
-                            </div>
-                          </div>
-                          <DialogFooter>
-                            <Button type="submit">{t('templates.dialogs.update')}</Button>
-                          </DialogFooter>
-                        </DialogContent>
-                      </Dialog>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
-                      <CardDescription>{t('templates.dialogs.alertDialogDescription')}</CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex justify-center py-6">
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button variant="destructive">{t('templates.dialogs.deleteAccount')}</Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent className="sm:max-w-[425px]">
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
-                            <AlertDialogDescription>
-                              {t('templates.dialogs.deleteWarning')}
-                            </AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
-                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-                              {t('templates.dialogs.continue')}
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </CardContent>
-                  </Card>
-                </div>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Maps */}
-              <section>
-                <MapShowcase />
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Header Variations */}
-              <section>
-                <h3 className="mb-4">{t('templates.headerVariations.sectionTitle')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.headerVariations.cardTitle')}</CardTitle>
-                    <CardDescription>{t('templates.headerVariations.cardDescription')}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-6">
-                    <div className="p-4 border rounded-[var(--radius-lg)] bg-muted/30">
-                      <h4 className="text-sm font-semibold mb-4">{t('templates.headerVariations.visibleElements')}</h4>
-                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-                        <div className="flex items-center space-x-2">
-                          <Switch
-                            id="header-actions"
-                            checked={showHeaderActions}
-                            onCheckedChange={setShowHeaderActions}
-                          />
-                          <Label htmlFor="header-actions" className="cursor-pointer">
-                            {t('templates.headerVariations.actionButtons')}
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Switch
-                            id="header-bread"
-                            checked={showHeaderBreadcrumbs}
-                            onCheckedChange={setShowHeaderBreadcrumbs}
-                          />
-                          <Label htmlFor="header-bread" className="cursor-pointer">
-                            {t('templates.headerVariations.breadcrumbsLabel')}
-                          </Label>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="relative border rounded-[var(--radius-lg)] bg-muted/10 overflow-hidden shadow-inner">
-                      <div className="p-4 bg-background/50 border-b text-xs font-mono text-muted-foreground">
-                        {t('templates.headerVariations.preview')}
-                      </div>
-                      <Header
-                        title={!showHeaderBreadcrumbs ? t('templates.headerVariations.currentPage') : undefined}
-                        breadcrumbs={
-                          showHeaderBreadcrumbs
-                            ? [
-                                {
-                                  label: t('templates.headerVariations.breadcrumbBrand'),
-                                  href: '#',
-                                  icon: <Home className="w-4 h-4" />,
-                                },
-                                { label: t('templates.headerVariations.breadcrumbSettings'), href: '#' },
-                                { label: t('templates.headerVariations.breadcrumbProfile') },
-                              ]
-                            : undefined
-                        }
-                        actions={
-                          showHeaderActions
-                            ? [
-                                {
-                                  id: 'notify',
-                                  icon: <Bell className="w-5 h-5" />,
-                                  onClick: () => toast(t('templates.headerVariations.notificationsOpenedToast')),
-                                },
-                                {
-                                  id: 'mail',
-                                  label: t('templates.headerVariations.messagesLabel'),
-                                  icon: <Mail className="w-5 h-5" />,
-                                  onClick: () => toast(t('templates.headerVariations.messagesOpenedToast')),
-                                },
-                              ]
-                            : undefined
-                        }
-                      />
-                      <div className="h-32 flex items-center justify-center text-muted-foreground text-sm italic">
-                        {t('templates.headerVariations.contentArea')}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Sidebar Variations */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
-                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Tabs defaultValue="assistant" className="w-full">
-                      <TabsList className="mb-4">
-                        <TabsTrigger value="assistant">{t('templates.sidebar.assistantMode')}</TabsTrigger>
-                        <TabsTrigger value="default">{t('templates.sidebar.defaultMode')}</TabsTrigger>
-                      </TabsList>
-
-                      <div className="mb-6 p-4 border rounded-[var(--radius-lg)] bg-muted/30">
-                        <h4 className="text-sm font-semibold mb-4">{t('templates.sidebarControls.footerSettings')}</h4>
-                        <div className="flex flex-wrap gap-6 mt-2">
-                          <div className="flex items-center space-x-2">
-                            <Switch
-                              id="show-user"
-                              checked={showSidebarUser}
-                              onCheckedChange={setShowSidebarUser}
-                            />
-                            <Label htmlFor="show-user" className="cursor-pointer">
-                              {t('templates.sidebarControls.userProfile')}
-                            </Label>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Switch
-                              id="show-settings"
-                              checked={showSidebarSettings}
-                              onCheckedChange={setShowSidebarSettings}
-                            />
-                            <Label htmlFor="show-settings" className="cursor-pointer">
-                              {t('templates.sidebarControls.settings')}
-                            </Label>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Switch
-                              id="show-logout"
-                              checked={showSidebarLogout}
-                              onCheckedChange={setShowSidebarLogout}
-                            />
-                            <Label htmlFor="show-logout" className="cursor-pointer">
-                              {t('templates.sidebarControls.logoutButton')}
-                            </Label>
-                          </div>
-                        </div>
-
-                        <div className="mt-6 pt-6 border-t">
-                          <div className="flex items-center justify-between mb-4">
-                            <h4 className="text-sm font-semibold">{t('templates.sidebarControls.sidebarWidthDesktop')}</h4>
-                            <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
-                              {sidebarWidth}px
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-4">
-                            <span className="text-xs text-muted-foreground w-12 text-right">
-                              240px
-                            </span>
-                            <Slider
-                              value={[sidebarWidth]}
-                              onValueChange={val => setSidebarWidth(val[0])}
-                              min={240}
-                              max={450}
-                              step={10}
-                              className="flex-1"
-                              aria-label={t('templates.sidebarControls.sidebarWidthAriaLabel')}
-                            />
-                            <span className="text-xs text-muted-foreground w-12">450px</span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <TabsContent value="assistant">
-                        <div
-                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-                          style={{ transform: 'translateZ(0)' }}
-                        >
-                          <Sidebar
-                            expanded={true}
-                            width={sidebarWidth}
-                            onToggle={() => {}}
-                            user={{ email: 'admin@xertica.com' }}
-                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
-                            location={{ pathname: '/assistant/current' }}
-                            navigate={() => {}}
-                            variant="assistant"
-                            search={{
-                              show: true,
-                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
-                              filter: {
-                                show: true,
-                                content: (
-                                  <div className="p-2 space-y-2">
-                                    <div className="text-xs font-semibold uppercase text-muted-foreground px-2">
-                                      {t('templates.sidebarControls.filterByStatus')}
-                                    </div>
-                                    <div className="flex flex-wrap gap-2 p-1">
-                                      <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
-                                        {t('templates.sidebarControls.filterActive')}
-                                      </Badge>
-                                      <Badge
-                                        variant="outline"
-                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
-                                      >
-                                        {t('templates.sidebarControls.filterArchived')}
-                                      </Badge>
-                                      <Badge
-                                        variant="outline"
-                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
-                                      >
-                                        {t('templates.sidebarControls.filterPending')}
-                                      </Badge>
-                                    </div>
-                                  </div>
-                                ),
-                              },
-                            }}
-                            fixedArea={{
-                              show: true,
-                              content: (
-                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
-                                  <Plus className="w-4 h-4 mr-2" />
-                                  {t('templates.sidebar.newConversation')}
-                                </Button>
-                              ),
-                            }}
-                            navigationGroups={[
-                              {
-                                id: 'recent',
-                                label: t('templates.sidebar.recent'),
-                                icon: Clock,
-                                items: [
-                                  {
-                                    path: '/assistant/refatoracao',
-                                    label: t('templates.sidebar.items.sidebarRefactor'),
-                                    description: t('templates.sidebar.items.sidebarRefactorDescription'),
-                                    actions: [
-                                      {
-                                        label: t('templates.sidebar.actions.rename'),
-                                        icon: FileEdit,
-                                        onClick: () => toast(t('templates.sidebar.actions.renameToast')),
-                                      },
-                                      {
-                                        label: t('templates.sidebar.actions.move'),
-                                        icon: ArrowRightLeft,
-                                        children: [
-                                          {
-                                            label: t('templates.sidebar.actions.moveActive'),
-                                            onClick: () => toast(t('templates.sidebar.actions.moveActiveToast')),
-                                          },
-                                          {
-                                            label: t('templates.sidebar.actions.moveMonitoring'),
-                                            onClick: () => toast(t('templates.sidebar.actions.moveMonitoringToast')),
-                                          },
-                                          {
-                                            label: t('templates.sidebar.actions.moveArchive'),
-                                            onClick: () => toast(t('templates.sidebar.actions.moveArchiveToast')),
-                                          },
-                                        ],
-                                      },
-                                      {
-                                        label: t('templates.sidebar.actions.clear'),
-                                        icon: Trash2,
-                                        onClick: () => toast(t('templates.sidebar.actions.clearToast')),
-                                        variant: 'destructive',
-                                      },
-                                    ],
-                                  },
-                                ],
-                              },
-                              {
-                                id: 'projects',
-                                label: t('templates.sidebar.constructionMonitoring'),
-                                icon: Map,
-                                actions: [
-                                  {
-                                    label: t('templates.sidebar.actions.newCategory'),
-                                    icon: Plus,
-                                    onClick: () => toast(t('templates.sidebar.actions.newCategoryToast')),
-                                  },
-                                  {
-                                    label: t('templates.sidebar.actions.archiveGroup'),
-                                    icon: Archive,
-                                    onClick: () => toast(t('templates.sidebar.actions.archiveGroupToast')),
-                                  },
-                                ],
-                                items: [
-                                  {
-                                    path: '/assistant/br163',
-                                    label: t('templates.sidebar.items.br163Restoration'),
-                                    icon: () => (
-                                      <div className="w-2 h-2 rounded-full bg-yellow-500" />
-                                    ),
-                                    description: (
-                                      <div className="space-y-1.5 min-w-[160px]">
-                                        <Progress
-                                          value={67}
-                                          className="h-1.5 bg-sidebar-foreground/10"
-                                        />
-                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
-                                          <span>{t('templates.sidebar.items.br163Location')}</span>
-                                          <span>67%</span>
-                                        </div>
-                                      </div>
-                                    ),
-                                  },
-                                ],
-                              },
-                            ]}
-                            footer={{
-                              showUser: showSidebarUser,
-                              showSettings: showSidebarSettings,
-                              showLogout: showSidebarLogout,
-                            }}
-                          />
-                          <div
-                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-                            style={{ left: `${sidebarWidth}px` }}
-                          >
-                            <p className="text-muted-foreground text-center">
-                              {t('templates.sidebar.assistantContent')}
-                            </p>
-                          </div>
-                        </div>
-                      </TabsContent>
-
-                      <TabsContent value="default">
-                        <div
-                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-                          style={{ transform: 'translateZ(0)' }}
-                        >
-                          <Sidebar
-                            expanded={true}
-                            width={sidebarWidth}
-                            onToggle={() => {}}
-                            user={{
-                              name: 'Ariel Santos',
-                              email: 'admin@xertica.com',
-                              avatar: 'https://github.com/shadcn.png',
-                            }}
-                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
-                            onSettingsClick={() => toast(t('templates.sidebar.settingsClickedToast'))}
-                            location={{ pathname: '/home' }}
-                            navigate={() => {}}
-                            variant="default"
-                            routes={[
-                              { path: '/home', label: t('templates.sidebar.routes.home'), icon: Home },
-                              { path: '/dashboard', label: t('templates.sidebar.routes.dashboard'), icon: Users },
-                              { path: '/settings', label: t('templates.sidebar.routes.settings'), icon: Settings },
-                            ]}
-                            footer={{
-                              showUser: showSidebarUser,
-                              showSettings: showSidebarSettings,
-                              showLogout: showSidebarLogout,
-                            }}
-                          />
-                          <div
-                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-                            style={{ left: `${sidebarWidth}px` }}
-                          >
-                            <p className="text-muted-foreground text-center">
-                              {t('templates.sidebar.defaultContent')}
-                            </p>
-                          </div>
-                        </div>
-                      </TabsContent>
-                    </Tabs>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Footer Note */}
-              <Card className="mt-8">
-                <CardHeader>
-                  <CardTitle>{t('templates.footer.title')}</CardTitle>
-                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <p className="text-muted-foreground">
-                    {t('templates.footer.descriptionPart1')}
-                    <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
-                      xertica-ui
-                    </code>
-                    {t('templates.footer.descriptionPart2')}
-                  </p>
-                  <Alert variant="info">
-                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
-                    <AlertDescription>
-                      {t('templates.footer.tipDescriptionPart1')}
-                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
-                      {t('templates.footer.tipDescriptionPart2')}
-                    </AlertDescription>
-                  </Alert>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </ScrollArea>
-      </main>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+import { Label } from '../../ui/label';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
+import { Badge } from '../../ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '../../ui/alert';
+import { Checkbox } from '../../ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
+import { Switch } from '../../ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+import { Textarea } from '../../ui/textarea';
+import { Progress } from '../../ui/progress';
+import { Separator } from '../../ui/separator';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../ui/table';
+import {
+  Settings,
+  User,
+  Mail,
+  Phone,
+  Calendar,
+  Search,
+  Menu,
+  ChevronRight,
+  Home,
+  Users,
+  Plus,
+  Trash2,
+  Archive,
+  ArrowRightLeft,
+  History,
+  PanelRight,
+  FileEdit,
+  Filter,
+  Clock,
+  Map,
+  Bell,
+} from 'lucide-react';
+import { Slider } from '../../ui/slider';
+import { toast } from 'sonner';
+import { ScrollArea } from '../../ui/scroll-area';
+import { ThemeToggle } from '../../brand/theme-toggle';
+import { LanguageSelector } from '../../brand/language-selector';
+import { MapShowcase } from '../../examples/MapShowcase';
+import { Header } from '../../layout/header';
+import { Sidebar } from '../../layout/sidebar';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../../ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '../../ui/alert-dialog';
+import { PageHeader } from '../../ui/page-header';
+
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { useTeamMembers, useDashboardStore } from '../../../features/home';
+import { useTranslation } from 'react-i18next';
+import { SectionErrorBoundary } from '../../shared/error-boundary';
+import { Skeleton } from '../../ui/skeleton';
+
+/**
+ * Comprehensive Showcase and Template Content component.
+ *
+ * @description
+ * This component serves as a living kitchen-sink demonstration of the Xertica UI
+ * Design System. It showcases almost every UI primitive (Cards, Tabs, Forms,
+ * Tables, Dialogs, etc.) and layout variation (Header flexibility, Sidebar
+ * toggling). It's primarily used for development, testing, and as a starting
+ * point for new pages.
+ *
+ * @ai-rules
+ * 1. Reference: Use this component as the primary source of truth for "how to compose" complex layouts in this library.
+ * 2. Layout: Adjusts its own padding based on the `useLayout` context's sidebar state.
+ * 3. Interaction: All showcase interactive elements (buttons, forms) use simple `toast` feedback or local state toggles.
+ */
+export function TemplateContent() {
+  const { t } = useTranslation();
+  const layout = useOptionalLayout();
+  const { disableDarkMode } = useTheme();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = useState(false);
+  const [localSidebarWidth, setLocalSidebarWidth] = useState(280);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
+  const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
+  const navigate = useNavigate();
+
+  // Server state
+  const { data: teamMembers = [], isLoading: teamLoading } = useTeamMembers();
+
+  // Client-side UI state (Zustand)
+  const progress = useDashboardStore(s => s.progress);
+  const setProgress = useDashboardStore(s => s.setProgress);
+  const sliderValue = useDashboardStore(s => s.sliderValue);
+  const setSliderValue = useDashboardStore(s => s.setSliderValue);
+  const switchEnabled = useDashboardStore(s => s.switchEnabled);
+  const toggleSwitch = useDashboardStore(s => s.toggleSwitch);
+
+  // Local UI-only toggles (no global relevance)
+  const [showSidebarUser, setShowSidebarUser] = useState(true);
+  const [showSidebarSettings, setShowSidebarSettings] = useState(true);
+  const [showSidebarLogout, setShowSidebarLogout] = useState(true);
+
+  // Header State
+  const [showHeaderActions, setShowHeaderActions] = useState(true);
+  const [showHeaderBreadcrumbs, setShowHeaderBreadcrumbs] = useState(true);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    toast.success(t('templates.formSubmitSuccess'));
+  };
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
+      }}
+    >
+      {/* Sticky Header */}
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[
+          { label: t('nav.designSystem'), href: '/home', icon: <Home className="w-4 h-4" /> },
+          { label: t('templates.breadcrumb') },
+        ]}
+        renderLink={(href, props) => <Link to={href} {...props} />}
+      />
+
+      {/* Content area */}
+      <main className="flex-1 overflow-hidden bg-muted">
+        <ScrollArea className="h-full">
+          <div className="p-5 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              {/* Page header */}
+              <PageHeader title={t('templates.title')} subtitle={t('templates.subtitle')} />
+
+              {/* Page Header Example */}
+              <section>
+                <h3 className="mb-4">{t('templates.headerWithBreadcrumbs.sectionTitle')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.headerWithBreadcrumbs.cardTitle')}</CardTitle>
+                    <CardDescription>
+                      {t('templates.headerWithBreadcrumbs.cardDescription')}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]">
+                    <Header
+                      className="border-b"
+                      breadcrumbs={[
+                        {
+                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.dashboard'),
+                          href: '#',
+                          icon: <Home className="w-4 h-4" />,
+                        },
+                        {
+                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.settings'),
+                          href: '#',
+                          icon: <Settings className="w-4 h-4" />,
+                        },
+                        {
+                          label: t('templates.headerWithBreadcrumbs.breadcrumbs.users'),
+                          href: '#',
+                          icon: <Users className="w-4 h-4" />,
+                        },
+                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.accessProfile') },
+                      ]}
+                      showLanguageSelector={true}
+                      showThemeToggle={true}
+                    />
+                    <div className="p-6 min-h-[200px]">
+                      <h4 className="text-lg font-semibold mb-2">
+                        {t('templates.headerWithBreadcrumbs.exampleContentTitle')}
+                      </h4>
+                      <p className="text-muted-foreground">
+                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart1')}
+                        <strong>Header</strong>
+                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart2')}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Alert Examples */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Alert variant="info">
+                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="destructive">
+                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="success">
+                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="warning">
+                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
+                  </Alert>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Cards & Tabs */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
+
+                <Tabs defaultValue="overview" className="w-full">
+                  <TabsList className="grid w-full grid-cols-4">
+                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
+                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
+                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
+                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
+                  </TabsList>
+
+                  {/* Overview Tab */}
+                  <TabsContent value="overview" className="space-y-4">
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
+                          <CardDescription>{t('stats.last30Days')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              1,234
+                            </span>
+                            <Badge variant="default" className="ml-2">
+                              +12%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
+                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              $ 45.2k
+                            </span>
+                            <Badge variant="secondary" className="ml-2">
+                              +8%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
+                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              3.2%
+                            </span>
+                            <Badge variant="outline" className="ml-2">
+                              -2%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </div>
+
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
+                        <CardDescription>
+                          {t('templates.overview.progressDescription')}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>{t('templates.overview.projectProgress')}</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">
+                              {progress}%
+                            </span>
+                          </div>
+                          <Progress value={progress} className="w-full" />
+                          <div className="flex gap-2">
+                            <Button
+                              size="sm"
+                              onClick={() => setProgress(Math.max(0, progress - 10))}
+                            >
+                              -10%
+                            </Button>
+                            <Button
+                              size="sm"
+                              onClick={() => setProgress(Math.min(100, progress + 10))}
+                            >
+                              +10%
+                            </Button>
+                          </div>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>{t('templates.overview.volume')}</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">
+                              {sliderValue[0]}%
+                            </span>
+                          </div>
+                          <Slider
+                            value={sliderValue}
+                            onValueChange={setSliderValue}
+                            min={0}
+                            max={100}
+                            step={1}
+                            className="w-full"
+                            aria-label={t('templates.overview.volume')}
+                          />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Forms Tab */}
+                  <TabsContent value="forms" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
+                        <CardDescription>
+                          {t('templates.forms.registrationDescription')}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <form onSubmit={handleFormSubmit} className="space-y-4">
+                          <div className="grid gap-4 md:grid-cols-2">
+                            <div className="space-y-2">
+                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
+                              <Input
+                                id="firstName"
+                                placeholder={t('templates.forms.firstNamePlaceholder')}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
+                              <Input
+                                id="lastName"
+                                placeholder={t('templates.forms.lastNamePlaceholder')}
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
+                            <div className="relative">
+                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input
+                                id="email"
+                                type="email"
+                                placeholder={t('templates.forms.emailPlaceholder')}
+                                className="pl-10"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
+                            <div className="relative">
+                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input
+                                id="phone"
+                                type="tel"
+                                placeholder={t('templates.forms.phonePlaceholder')}
+                                className="pl-10"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
+                            <Select>
+                              <SelectTrigger id="role">
+                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="developer">
+                                  {t('templates.forms.roles.developer')}
+                                </SelectItem>
+                                <SelectItem value="designer">
+                                  {t('templates.forms.roles.designer')}
+                                </SelectItem>
+                                <SelectItem value="manager">
+                                  {t('templates.forms.roles.manager')}
+                                </SelectItem>
+                                <SelectItem value="analyst">
+                                  {t('templates.forms.roles.analyst')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
+                            <Textarea
+                              id="bio"
+                              placeholder={t('templates.forms.bioPlaceholder')}
+                              rows={4}
+                            />
+                          </div>
+
+                          <Separator />
+
+                          <div className="space-y-4">
+                            <h4>{t('templates.forms.preferences')}</h4>
+
+                            <div className="space-y-3">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="newsletter" />
+                                <Label htmlFor="newsletter" className="font-normal">
+                                  {t('templates.forms.newsletter')}
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="notifications" />
+                                <Label htmlFor="notifications" className="font-normal">
+                                  {t('templates.forms.pushNotifications')}
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="updates" />
+                                <Label htmlFor="updates" className="font-normal">
+                                  {t('templates.forms.featureUpdates')}
+                                </Label>
+                              </div>
+                            </div>
+
+                            <Separator />
+
+                            <div className="space-y-3">
+                              <Label>{t('templates.forms.accountType')}</Label>
+                              <RadioGroup
+                                defaultValue="personal"
+                                aria-label={t('templates.forms.accountType')}
+                              >
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="personal" id="personal" />
+                                  <Label htmlFor="personal" className="font-normal">
+                                    {t('templates.forms.accountPersonal')}
+                                  </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="business" id="business" />
+                                  <Label htmlFor="business" className="font-normal">
+                                    {t('templates.forms.accountBusiness')}
+                                  </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="enterprise" id="enterprise" />
+                                  <Label htmlFor="enterprise" className="font-normal">
+                                    {t('templates.forms.accountEnterprise')}
+                                  </Label>
+                                </div>
+                              </RadioGroup>
+                            </div>
+                          </div>
+                        </form>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
+                        <Button onClick={handleFormSubmit}>
+                          {t('templates.forms.createAccount')}
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Data Tab */}
+                  <TabsContent value="data" className="space-y-4">
+                    <SectionErrorBoundary>
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('templates.data.title')}</CardTitle>
+                          <CardDescription>{t('templates.data.description')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="mb-4">
+                            <div className="relative">
+                              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input
+                                placeholder={t('templates.data.searchPlaceholder')}
+                                aria-label={t('templates.data.searchPlaceholder')}
+                                className="pl-10"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
+                            <Table>
+                              <TableHeader>
+                                <TableRow>
+                                  <TableHead>{t('team.name')}</TableHead>
+                                  <TableHead>{t('team.email')}</TableHead>
+                                  <TableHead>{t('team.role')}</TableHead>
+                                  <TableHead>{t('team.status')}</TableHead>
+                                  <TableHead className="text-right">{t('team.actions')}</TableHead>
+                                </TableRow>
+                              </TableHeader>
+                              <TableBody>
+                                {teamLoading ? (
+                                  <>
+                                    {Array.from({ length: 5 }).map((_, i) => (
+                                      <TableRow key={i}>
+                                        <TableCell>
+                                          <div className="flex items-center gap-2">
+                                            <Skeleton className="size-8 rounded-full shrink-0" />
+                                            <Skeleton className="h-3.5 w-28" />
+                                          </div>
+                                        </TableCell>
+                                        <TableCell>
+                                          <Skeleton className="h-3.5 w-36" />
+                                        </TableCell>
+                                        <TableCell>
+                                          <Skeleton className="h-3.5 w-20" />
+                                        </TableCell>
+                                        <TableCell>
+                                          <Skeleton className="h-5 w-16 rounded-full" />
+                                        </TableCell>
+                                        <TableCell className="text-right">
+                                          <Skeleton className="h-7 w-14 ml-auto" />
+                                        </TableCell>
+                                      </TableRow>
+                                    ))}
+                                  </>
+                                ) : (
+                                  teamMembers.map(member => (
+                                    <TableRow key={member.id}>
+                                      <TableCell>{member.name}</TableCell>
+                                      <TableCell>{member.email}</TableCell>
+                                      <TableCell>{t(`team.roles.${member.role}`)}</TableCell>
+                                      <TableCell>
+                                        <Badge
+                                          variant={
+                                            member.status === 'active'
+                                              ? 'default'
+                                              : member.status === 'away'
+                                                ? 'secondary'
+                                                : 'outline'
+                                          }
+                                        >
+                                          {t(`common.${member.status}`)}
+                                        </Badge>
+                                      </TableCell>
+                                      <TableCell className="text-right">
+                                        <Button variant="ghost" size="sm">
+                                          {t('common.edit')}
+                                        </Button>
+                                      </TableCell>
+                                    </TableRow>
+                                  ))
+                                )}
+                              </TableBody>
+                            </Table>
+                          </div>
+                        </CardContent>
+                        <CardFooter className="flex justify-between items-center">
+                          <p className="text-muted-foreground">
+                            {t('team.showing', {
+                              count: teamMembers.length,
+                              total: teamMembers.length,
+                            })}
+                          </p>
+                          <div className="flex gap-2">
+                            <Button variant="outline" size="sm">
+                              {t('common.previous')}
+                            </Button>
+                            <Button variant="outline" size="sm">
+                              {t('common.next')}
+                            </Button>
+                          </div>
+                        </CardFooter>
+                      </Card>
+                    </SectionErrorBoundary>
+                  </TabsContent>
+
+                  {/* Settings Tab */}
+                  <TabsContent value="settings" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.settings.title')}</CardTitle>
+                        <CardDescription>{t('templates.settings.description')}</CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        {!disableDarkMode && (
+                          <>
+                            <div className="flex items-center justify-between">
+                              <div className="space-y-1">
+                                <Label htmlFor="dark-mode">
+                                  {t('templates.settings.darkMode')}
+                                </Label>
+                                <p className="text-muted-foreground">
+                                  {t('templates.settings.darkModeDescription')}
+                                </p>
+                              </div>
+                              <Switch
+                                id="dark-mode"
+                                checked={switchEnabled}
+                                onCheckedChange={toggleSwitch}
+                              />
+                            </div>
+
+                            <Separator />
+                          </>
+                        )}
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label htmlFor="email-notifications">
+                              {t('templates.settings.emailNotifications')}
+                            </Label>
+                            <p className="text-muted-foreground">
+                              {t('templates.settings.emailNotificationsDescription')}
+                            </p>
+                          </div>
+                          <Switch id="email-notifications" defaultChecked />
+                        </div>
+
+                        <Separator />
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label htmlFor="push-notifications">
+                              {t('templates.settings.pushNotifications')}
+                            </Label>
+                            <p className="text-muted-foreground">
+                              {t('templates.settings.pushNotificationsDescription')}
+                            </p>
+                          </div>
+                          <Switch id="push-notifications" />
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>{t('templates.settings.language')}</Label>
+                          <Select defaultValue="pt-br">
+                            <SelectTrigger aria-label={t('templates.settings.language')}>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="pt-br">
+                                {t('templates.settings.languages.ptBR')}
+                              </SelectItem>
+                              <SelectItem value="en">
+                                {t('templates.settings.languages.en')}
+                              </SelectItem>
+                              <SelectItem value="es">
+                                {t('templates.settings.languages.es')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>{t('templates.settings.timezone')}</Label>
+                          <Select defaultValue="america-sao-paulo">
+                            <SelectTrigger aria-label={t('templates.settings.timezone')}>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="america-sao-paulo">
+                                {t('templates.settings.timezones.saoPaulo')}
+                              </SelectItem>
+                              <SelectItem value="america-new-york">
+                                {t('templates.settings.timezones.newYork')}
+                              </SelectItem>
+                              <SelectItem value="europe-london">
+                                {t('templates.settings.timezones.london')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
+                        <Button>{t('templates.settings.saveChanges')}</Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+                </Tabs>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Button Variants */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
+                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.variants')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button variant="default">Default</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="link">Link</Button>
+                        <Button variant="destructive">Destructive</Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.sizes')}</Label>
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button size="sm">Small</Button>
+                        <Button size="default">Default</Button>
+                        <Button size="lg">Large</Button>
+                        <Button size="icon" aria-label={t('nav.settings')}>
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.withIcons')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button>
+                          <User className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.profile')}
+                        </Button>
+                        <Button variant="secondary">
+                          <Mail className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.messages')}
+                        </Button>
+                        <Button variant="outline">
+                          <Calendar className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.schedule')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.states')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button disabled>{t('templates.buttons.disabled')}</Button>
+                        <Button variant="outline" disabled>
+                          {t('templates.buttons.outlineDisabled')}
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Badges */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.badges.title')}</CardTitle>
+                    <CardDescription>{t('templates.badges.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Badge variant="default">Default</Badge>
+                      <Badge variant="secondary">Secondary</Badge>
+                      <Badge variant="outline">Outline</Badge>
+                      <Badge variant="destructive">Destructive</Badge>
+                      <Badge className="bg-success text-success-foreground">Success</Badge>
+                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
+                      <Badge className="bg-info text-info-foreground">Info</Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Dialogs */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
+                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                          <DialogHeader>
+                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
+                            <DialogDescription>
+                              {t('templates.dialogs.editProfileDescription')}
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="grid gap-4 py-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name" className="text-right">
+                                {t('templates.dialogs.name')}
+                              </Label>
+                              <Input id="name" defaultValue="John Doe" className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username" className="text-right">
+                                {t('templates.dialogs.username')}
+                              </Label>
+                              <Input id="username" defaultValue="@johndoe" className="col-span-3" />
+                            </div>
+                          </div>
+                          <DialogFooter>
+                            <Button type="submit">{t('templates.dialogs.update')}</Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
+                      <CardDescription>
+                        {t('templates.dialogs.alertDialogDescription')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="destructive">
+                            {t('templates.dialogs.deleteAccount')}
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent className="sm:max-w-[425px]">
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              {t('templates.dialogs.deleteWarning')}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
+                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                              {t('templates.dialogs.continue')}
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </CardContent>
+                  </Card>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Maps */}
+              <section>
+                <MapShowcase />
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Header Variations */}
+              <section>
+                <h3 className="mb-4">{t('templates.headerVariations.sectionTitle')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.headerVariations.cardTitle')}</CardTitle>
+                    <CardDescription>
+                      {t('templates.headerVariations.cardDescription')}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="p-4 border rounded-[var(--radius-lg)] bg-muted/30">
+                      <h4 className="text-sm font-semibold mb-4">
+                        {t('templates.headerVariations.visibleElements')}
+                      </h4>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            id="header-actions"
+                            checked={showHeaderActions}
+                            onCheckedChange={setShowHeaderActions}
+                          />
+                          <Label htmlFor="header-actions" className="cursor-pointer">
+                            {t('templates.headerVariations.actionButtons')}
+                          </Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            id="header-bread"
+                            checked={showHeaderBreadcrumbs}
+                            onCheckedChange={setShowHeaderBreadcrumbs}
+                          />
+                          <Label htmlFor="header-bread" className="cursor-pointer">
+                            {t('templates.headerVariations.breadcrumbsLabel')}
+                          </Label>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="relative border rounded-[var(--radius-lg)] bg-muted/10 overflow-hidden shadow-inner">
+                      <div className="p-4 bg-background/50 border-b text-xs font-mono text-muted-foreground">
+                        {t('templates.headerVariations.preview')}
+                      </div>
+                      <Header
+                        title={
+                          !showHeaderBreadcrumbs
+                            ? t('templates.headerVariations.currentPage')
+                            : undefined
+                        }
+                        breadcrumbs={
+                          showHeaderBreadcrumbs
+                            ? [
+                                {
+                                  label: t('templates.headerVariations.breadcrumbBrand'),
+                                  href: '#',
+                                  icon: <Home className="w-4 h-4" />,
+                                },
+                                {
+                                  label: t('templates.headerVariations.breadcrumbSettings'),
+                                  href: '#',
+                                },
+                                { label: t('templates.headerVariations.breadcrumbProfile') },
+                              ]
+                            : undefined
+                        }
+                        actions={
+                          showHeaderActions
+                            ? [
+                                {
+                                  id: 'notify',
+                                  icon: <Bell className="w-5 h-5" />,
+                                  onClick: () =>
+                                    toast(t('templates.headerVariations.notificationsOpenedToast')),
+                                },
+                                {
+                                  id: 'mail',
+                                  label: t('templates.headerVariations.messagesLabel'),
+                                  icon: <Mail className="w-5 h-5" />,
+                                  onClick: () =>
+                                    toast(t('templates.headerVariations.messagesOpenedToast')),
+                                },
+                              ]
+                            : undefined
+                        }
+                      />
+                      <div className="h-32 flex items-center justify-center text-muted-foreground text-sm italic">
+                        {t('templates.headerVariations.contentArea')}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Sidebar Variations */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
+                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Tabs defaultValue="assistant" className="w-full">
+                      <TabsList className="mb-4">
+                        <TabsTrigger value="assistant">
+                          {t('templates.sidebar.assistantMode')}
+                        </TabsTrigger>
+                        <TabsTrigger value="default">
+                          {t('templates.sidebar.defaultMode')}
+                        </TabsTrigger>
+                      </TabsList>
+
+                      <div className="mb-6 p-4 border rounded-[var(--radius-lg)] bg-muted/30">
+                        <h4 className="text-sm font-semibold mb-4">
+                          {t('templates.sidebarControls.footerSettings')}
+                        </h4>
+                        <div className="flex flex-wrap gap-6 mt-2">
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              id="show-user"
+                              checked={showSidebarUser}
+                              onCheckedChange={setShowSidebarUser}
+                            />
+                            <Label htmlFor="show-user" className="cursor-pointer">
+                              {t('templates.sidebarControls.userProfile')}
+                            </Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              id="show-settings"
+                              checked={showSidebarSettings}
+                              onCheckedChange={setShowSidebarSettings}
+                            />
+                            <Label htmlFor="show-settings" className="cursor-pointer">
+                              {t('templates.sidebarControls.settings')}
+                            </Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              id="show-logout"
+                              checked={showSidebarLogout}
+                              onCheckedChange={setShowSidebarLogout}
+                            />
+                            <Label htmlFor="show-logout" className="cursor-pointer">
+                              {t('templates.sidebarControls.logoutButton')}
+                            </Label>
+                          </div>
+                        </div>
+
+                        <div className="mt-6 pt-6 border-t">
+                          <div className="flex items-center justify-between mb-4">
+                            <h4 className="text-sm font-semibold">
+                              {t('templates.sidebarControls.sidebarWidthDesktop')}
+                            </h4>
+                            <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
+                              {sidebarWidth}px
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className="text-xs text-muted-foreground w-12 text-right">
+                              240px
+                            </span>
+                            <Slider
+                              value={[sidebarWidth]}
+                              onValueChange={val => setSidebarWidth(val[0])}
+                              min={240}
+                              max={450}
+                              step={10}
+                              className="flex-1"
+                              aria-label={t('templates.sidebarControls.sidebarWidthAriaLabel')}
+                            />
+                            <span className="text-xs text-muted-foreground w-12">450px</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <TabsContent value="assistant">
+                        <div
+                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+                          style={{ transform: 'translateZ(0)' }}
+                        >
+                          <Sidebar
+                            expanded={true}
+                            width={sidebarWidth}
+                            onToggle={() => {}}
+                            user={{ email: 'admin@xertica.com' }}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
+                            location={{ pathname: '/assistant/current' }}
+                            navigate={() => {}}
+                            variant="assistant"
+                            search={{
+                              show: true,
+                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
+                              filter: {
+                                show: true,
+                                content: (
+                                  <div className="p-2 space-y-2">
+                                    <div className="text-xs font-semibold uppercase text-muted-foreground px-2">
+                                      {t('templates.sidebarControls.filterByStatus')}
+                                    </div>
+                                    <div className="flex flex-wrap gap-2 p-1">
+                                      <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
+                                        {t('templates.sidebarControls.filterActive')}
+                                      </Badge>
+                                      <Badge
+                                        variant="outline"
+                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
+                                      >
+                                        {t('templates.sidebarControls.filterArchived')}
+                                      </Badge>
+                                      <Badge
+                                        variant="outline"
+                                        className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
+                                      >
+                                        {t('templates.sidebarControls.filterPending')}
+                                      </Badge>
+                                    </div>
+                                  </div>
+                                ),
+                              },
+                            }}
+                            fixedArea={{
+                              show: true,
+                              content: (
+                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
+                                  <Plus className="w-4 h-4 mr-2" />
+                                  {t('templates.sidebar.newConversation')}
+                                </Button>
+                              ),
+                            }}
+                            navigationGroups={[
+                              {
+                                id: 'recent',
+                                label: t('templates.sidebar.recent'),
+                                icon: Clock,
+                                items: [
+                                  {
+                                    path: '/assistant/refatoracao',
+                                    label: t('templates.sidebar.items.sidebarRefactor'),
+                                    description: t(
+                                      'templates.sidebar.items.sidebarRefactorDescription'
+                                    ),
+                                    actions: [
+                                      {
+                                        label: t('templates.sidebar.actions.rename'),
+                                        icon: FileEdit,
+                                        onClick: () =>
+                                          toast(t('templates.sidebar.actions.renameToast')),
+                                      },
+                                      {
+                                        label: t('templates.sidebar.actions.move'),
+                                        icon: ArrowRightLeft,
+                                        children: [
+                                          {
+                                            label: t('templates.sidebar.actions.moveActive'),
+                                            onClick: () =>
+                                              toast(t('templates.sidebar.actions.moveActiveToast')),
+                                          },
+                                          {
+                                            label: t('templates.sidebar.actions.moveMonitoring'),
+                                            onClick: () =>
+                                              toast(
+                                                t('templates.sidebar.actions.moveMonitoringToast')
+                                              ),
+                                          },
+                                          {
+                                            label: t('templates.sidebar.actions.moveArchive'),
+                                            onClick: () =>
+                                              toast(
+                                                t('templates.sidebar.actions.moveArchiveToast')
+                                              ),
+                                          },
+                                        ],
+                                      },
+                                      {
+                                        label: t('templates.sidebar.actions.clear'),
+                                        icon: Trash2,
+                                        onClick: () =>
+                                          toast(t('templates.sidebar.actions.clearToast')),
+                                        variant: 'destructive',
+                                      },
+                                    ],
+                                  },
+                                ],
+                              },
+                              {
+                                id: 'projects',
+                                label: t('templates.sidebar.constructionMonitoring'),
+                                icon: Map,
+                                actions: [
+                                  {
+                                    label: t('templates.sidebar.actions.newCategory'),
+                                    icon: Plus,
+                                    onClick: () =>
+                                      toast(t('templates.sidebar.actions.newCategoryToast')),
+                                  },
+                                  {
+                                    label: t('templates.sidebar.actions.archiveGroup'),
+                                    icon: Archive,
+                                    onClick: () =>
+                                      toast(t('templates.sidebar.actions.archiveGroupToast')),
+                                  },
+                                ],
+                                items: [
+                                  {
+                                    path: '/assistant/br163',
+                                    label: t('templates.sidebar.items.br163Restoration'),
+                                    icon: () => (
+                                      <div className="w-2 h-2 rounded-full bg-yellow-500" />
+                                    ),
+                                    description: (
+                                      <div className="space-y-1.5 min-w-[160px]">
+                                        <Progress
+                                          value={67}
+                                          className="h-1.5 bg-sidebar-foreground/10"
+                                        />
+                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
+                                          <span>{t('templates.sidebar.items.br163Location')}</span>
+                                          <span>67%</span>
+                                        </div>
+                                      </div>
+                                    ),
+                                  },
+                                ],
+                              },
+                            ]}
+                            footer={{
+                              showUser: showSidebarUser,
+                              showSettings: showSidebarSettings,
+                              showLogout: showSidebarLogout,
+                            }}
+                          />
+                          <div
+                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+                            style={{ left: `${sidebarWidth}px` }}
+                          >
+                            <p className="text-muted-foreground text-center">
+                              {t('templates.sidebar.assistantContent')}
+                            </p>
+                          </div>
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="default">
+                        <div
+                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+                          style={{ transform: 'translateZ(0)' }}
+                        >
+                          <Sidebar
+                            expanded={true}
+                            width={sidebarWidth}
+                            onToggle={() => {}}
+                            user={{
+                              name: 'Ariel Santos',
+                              email: 'admin@xertica.com',
+                              avatar: 'https://github.com/shadcn.png',
+                            }}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
+                            onSettingsClick={() =>
+                              toast(t('templates.sidebar.settingsClickedToast'))
+                            }
+                            location={{ pathname: '/home' }}
+                            navigate={() => {}}
+                            variant="default"
+                            routes={[
+                              {
+                                path: '/home',
+                                label: t('templates.sidebar.routes.home'),
+                                icon: Home,
+                              },
+                              {
+                                path: '/dashboard',
+                                label: t('templates.sidebar.routes.dashboard'),
+                                icon: Users,
+                              },
+                              {
+                                path: '/settings',
+                                label: t('templates.sidebar.routes.settings'),
+                                icon: Settings,
+                              },
+                            ]}
+                            footer={{
+                              showUser: showSidebarUser,
+                              showSettings: showSidebarSettings,
+                              showLogout: showSidebarLogout,
+                            }}
+                          />
+                          <div
+                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+                            style={{ left: `${sidebarWidth}px` }}
+                          >
+                            <p className="text-muted-foreground text-center">
+                              {t('templates.sidebar.defaultContent')}
+                            </p>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Footer Note */}
+              <Card className="mt-8">
+                <CardHeader>
+                  <CardTitle>{t('templates.footer.title')}</CardTitle>
+                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <p className="text-muted-foreground">
+                    {t('templates.footer.descriptionPart1')}
+                    <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
+                      xertica-ui
+                    </code>
+                    {t('templates.footer.descriptionPart2')}
+                  </p>
+                  <Alert variant="info">
+                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
+                    <AlertDescription>
+                      {t('templates.footer.tipDescriptionPart1')}
+                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
+                      {t('templates.footer.tipDescriptionPart2')}
+                    </AlertDescription>
+                  </Alert>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}