@trackany-device/components 1.0.0 → 1.2.0

package/src/pages/login/TwoFactorChallengePage.tsx

@@ -0,0 +1,41 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import type { OtpFormErrors } from '../../elements/OtpForm';
+import { OtpForm } from '../../elements/OtpForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function TwoFactorChallengePage({
+    authLayout,
+    code,
+    setCode,
+    recovery = false,
+    setRecovery,
+    errors = {},
+    processing = false,
+    title = 'Two-factor authentication',
+    description = 'Verify your identity to continue',
+}: {
+    authLayout: AuthLayoutVariant;
+    code: string;
+    setCode: (v: string) => void;
+    recovery?: boolean;
+    setRecovery: (v: boolean) => void;
+    errors?: OtpFormErrors;
+    processing?: boolean;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <OtpForm
+                code={code}
+                errors={errors}
+                processing={processing}
+                recovery={recovery}
+                onCodeChange={setCode}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+                onToggleRecovery={() => setRecovery(!recovery)}
+            />
+        </AuthLayoutResolved>
+    );
+}

package/src/pages/login/VerifyEmailPage.tsx

@@ -0,0 +1,31 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import { VerifyEmailForm } from '../../elements/VerifyEmailForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function VerifyEmailPage({
+    authLayout,
+    processing = false,
+    status,
+    logoutUrl = '/logout',
+    title = 'Verify your email',
+    description = 'Check your inbox for a verification link',
+}: {
+    authLayout: AuthLayoutVariant;
+    processing?: boolean;
+    status?: string;
+    logoutUrl?: string;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <VerifyEmailForm
+                processing={processing}
+                status={status}
+                logoutUrl={logoutUrl}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+            />
+        </AuthLayoutResolved>
+    );
+}

package/src/pages/my/ActivityPage.tsx

@@ -0,0 +1,160 @@
+import {
+    Avatar, AvatarFallback,
+    Badge, Button,
+    Card, CardContent, CardHeader, CardTitle,
+    Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+    Timeline, TimelineItem,
+} from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { Download, Filter, Search, type LucideIcon } from 'lucide-react';
+import type { ElementType } from 'react';
+
+export type ActivityVariant = 'default' | 'danger' | 'warning' | 'success' | 'info';
+
+export interface ActivityItem {
+    icon: LucideIcon;
+    title: string;
+    detail: string;
+    datetime: string;
+    variant: ActivityVariant;
+}
+
+export interface LoginEntry {
+    device: string;
+    location: string;
+    ip: string;
+    date: string;
+    ok: boolean;
+}
+
+export interface FeedItem {
+    initials: string;
+    name: string;
+    action: string;
+    time: string;
+    badge: { label: string; cls: string };
+}
+
+export function ActivityTimelinePage({ layout, items }: { layout: LayoutName; items: ActivityItem[] }) {
+    return (
+        <LayoutResolved layout={layout} title="Activity" currentUrl="/activity">
+            <div className="p-6 max-w-2xl mx-auto space-y-6">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-xl font-semibold">Activity</h1>
+                    <div className="flex gap-2">
+                        <Button variant="outline" size="sm"><Filter className="h-3.5 w-3.5 mr-1.5" />Filter</Button>
+                        <Button variant="outline" size="sm"><Download className="h-3.5 w-3.5 mr-1.5" />Export</Button>
+                    </div>
+                </div>
+                <Card>
+                    <CardHeader><CardTitle>Recent activity</CardTitle></CardHeader>
+                    <CardContent>
+                        <Timeline>
+                            {items.map((item, i) => (
+                                <TimelineItem key={i} icon={item.icon} title={item.title} datetime={item.datetime} variant={item.variant}>
+                                    {item.detail}
+                                </TimelineItem>
+                            ))}
+                        </Timeline>
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function LoginHistoryPage({ layout, logins }: { layout: LayoutName; logins: LoginEntry[] }) {
+    return (
+        <LayoutResolved layout={layout} title="Login History" currentUrl="/activity/login">
+            <div className="p-6 max-w-3xl mx-auto space-y-6">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-xl font-semibold">Login history</h1>
+                    <div className="flex items-center gap-2">
+                        <div className="relative">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                            <input placeholder="Search…" className="pl-8 pr-3 py-1.5 text-sm rounded-lg border border-border bg-background" />
+                        </div>
+                        <Button variant="outline" size="sm"><Download className="h-3.5 w-3.5 mr-1.5" />Export</Button>
+                    </div>
+                </div>
+
+                <Card>
+                    <CardContent className="p-0">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Device</TableHead>
+                                    <TableHead>Location</TableHead>
+                                    <TableHead>IP address</TableHead>
+                                    <TableHead>Date &amp; time</TableHead>
+                                    <TableHead>Status</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {logins.map((row, i) => (
+                                    <TableRow key={i}>
+                                        <TableCell className="text-sm font-medium">{row.device}</TableCell>
+                                        <TableCell className="text-sm text-muted-foreground">{row.location}</TableCell>
+                                        <TableCell className="text-xs font-mono text-muted-foreground">{row.ip}</TableCell>
+                                        <TableCell className="text-sm text-muted-foreground">{row.date}</TableCell>
+                                        <TableCell>
+                                            <Badge variant="outline" className={`text-xs ${row.ok ? 'text-green-600 border-green-200 bg-green-50' : 'text-red-600 border-red-200 bg-red-50'}`}>
+                                                {row.ok ? 'Success' : 'Failed'}
+                                            </Badge>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader><CardTitle>Login statistics</CardTitle></CardHeader>
+                    <CardContent>
+                        <div className="grid grid-cols-3 gap-4 text-center">
+                            {[
+                                { label: 'Total logins',    value: String(logins.length * 30), sub: 'Last 90 days'    },
+                                { label: 'Failed attempts', value: String(logins.filter((l) => !l.ok).length), sub: 'Last 90 days', warn: true },
+                                { label: 'Unique devices',  value: String(new Set(logins.map((l) => l.device)).size), sub: 'Across sessions' },
+                            ].map(({ label, value, sub, warn }) => (
+                                <div key={label} className="rounded-lg border border-border p-4">
+                                    <p className={`text-2xl font-bold ${warn ? 'text-destructive' : ''}`}>{value}</p>
+                                    <p className="text-sm font-medium mt-0.5">{label}</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">{sub}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function AccountActivityFeedPage({ layout, items }: { layout: LayoutName; items: FeedItem[] }) {
+    return (
+        <LayoutResolved layout={layout} title="Activity Feed" currentUrl="/activity/feed">
+            <div className="p-6 max-w-xl mx-auto space-y-6">
+                <h1 className="text-xl font-semibold">Activity feed</h1>
+                <Card>
+                    <CardContent className="p-0">
+                        {items.map((item, i) => (
+                            <div key={i} className="flex items-start gap-3 px-5 py-4 border-b border-border last:border-0">
+                                <Avatar className="h-8 w-8 mt-0.5 shrink-0">
+                                    <AvatarFallback className="text-xs">{item.initials}</AvatarFallback>
+                                </Avatar>
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-sm"><span className="font-medium">{item.name}</span> {item.action}</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">{item.time}</p>
+                                </div>
+                                <Badge variant="outline" className={`text-xs shrink-0 ${item.badge.cls}`}>{item.badge.label}</Badge>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}

package/src/pages/my/GetStartedPage.tsx

@@ -0,0 +1,221 @@
+import {
+    Badge, Button,
+    Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+    ChecklistItem,
+    Progress,
+} from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import {
+    Bell, CheckCircle2, Download,
+    Globe, MapPin, Shield, Smartphone,
+    Users, Zap,
+} from 'lucide-react';
+import { useState } from 'react';
+import type { LucideIcon } from 'lucide-react';
+
+export interface OnboardingStep {
+    icon: LucideIcon;
+    title: string;
+    desc: string;
+    action: string | null;
+}
+
+export function OnboardingChecklistPage({
+    layout,
+    steps,
+    initialCompleted,
+}: {
+    layout: LayoutName;
+    steps: OnboardingStep[];
+    initialCompleted?: number[];
+}) {
+    const [completed, setCompleted] = useState(new Set(initialCompleted ?? []));
+    const doneCount = completed.size;
+    const total = steps.length;
+    const percent = Math.round((doneCount / total) * 100);
+    const activeIndex = steps.findIndex((_, i) => !completed.has(i));
+
+    return (
+        <LayoutResolved layout={layout} title="Get Started" currentUrl="/get-started">
+            <div className="p-6 max-w-2xl mx-auto space-y-6">
+                <div>
+                    <h1 className="text-xl font-semibold">Get started</h1>
+                    <p className="text-sm text-muted-foreground mt-0.5">Complete these steps to get the most out of TAD.</p>
+                </div>
+
+                <Card>
+                    <CardContent className="p-5">
+                        <div className="flex items-center justify-between mb-2">
+                            <p className="text-sm font-medium">{doneCount} of {total} steps completed</p>
+                            <p className="text-sm font-semibold text-primary">{percent}%</p>
+                        </div>
+                        <Progress value={percent} className="h-2" />
+                    </CardContent>
+                </Card>
+
+                <div className="space-y-3">
+                    {steps.map((step, i) => (
+                        <ChecklistItem
+                            key={i}
+                            icon={step.icon}
+                            title={step.title}
+                            description={step.desc}
+                            done={completed.has(i)}
+                            active={i === activeIndex}
+                            action={step.action ?? undefined}
+                            onAction={() => {
+                                const next = new Set(completed);
+                                if (next.has(i)) next.delete(i); else next.add(i);
+                                setCompleted(next);
+                            }}
+                            className="cursor-pointer"
+                        />
+                    ))}
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function WelcomeScreenPage({ layout }: { layout: LayoutName }) {
+    return (
+        <LayoutResolved layout={layout} title="Welcome" currentUrl="/get-started">
+            <div className="p-6 max-w-3xl mx-auto space-y-8">
+                <div className="text-center space-y-2 pt-4">
+                    <div className="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 mb-2">
+                        <Zap className="h-8 w-8 text-primary" />
+                    </div>
+                    <h1 className="text-2xl font-bold">Welcome to TAD</h1>
+                    <p className="text-muted-foreground max-w-md mx-auto">
+                        Track Any Device is your all-in-one fleet intelligence platform. Let's get you set up in a few quick steps.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-3 gap-4">
+                    {[
+                        { icon: Smartphone, title: 'Add a device',     desc: 'Pair GPS trackers or phones to your fleet.',           cta: 'Add device',  primary: true  },
+                        { icon: Users,      title: 'Invite your team', desc: 'Bring operators and supervisors on board.',             cta: 'Invite',      primary: false },
+                        { icon: Globe,      title: 'Watch live',       desc: 'See all your devices on the real-time map.',            cta: 'Open map',    primary: false },
+                    ].map(({ icon: Icon, title, desc, cta, primary }) => (
+                        <Card key={title} className={primary ? 'border-primary/40 bg-primary/5' : ''}>
+                            <CardContent className="p-5 text-center space-y-3">
+                                <div className={`inline-flex h-10 w-10 items-center justify-center rounded-xl ${primary ? 'bg-primary/10' : 'bg-muted'}`}>
+                                    <Icon className={`h-5 w-5 ${primary ? 'text-primary' : 'text-muted-foreground'}`} />
+                                </div>
+                                <div>
+                                    <p className="text-sm font-semibold">{title}</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
+                                </div>
+                                <Button size="sm" variant={primary ? 'default' : 'outline'} className="w-full">{cta}</Button>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Quick tips</CardTitle>
+                        <CardDescription>Make the most of your TAD subscription.</CardDescription>
+                    </CardHeader>
+                    <CardContent className="divide-y divide-border">
+                        {[
+                            { icon: MapPin,   tip: 'Set geofences on your most-visited locations to get automatic entry/exit alerts.' },
+                            { icon: Bell,     tip: 'Enable SOS alerts and make sure your operators know how to trigger them.' },
+                            { icon: Shield,   tip: 'Turn on 2FA and enforce it for all team members in Security settings.' },
+                            { icon: Download, tip: 'Download the TAD mobile app to manage your fleet from anywhere.' },
+                        ].map(({ icon: Icon, tip }, i) => (
+                            <div key={i} className="flex items-start gap-3 py-3.5">
+                                <div className="rounded-lg bg-muted p-1.5 shrink-0 mt-0.5">
+                                    <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                                </div>
+                                <p className="text-sm text-muted-foreground">{tip}</p>
+                            </div>
+                        ))}
+                    </CardContent>
+                    <CardFooter>
+                        <Button variant="outline" size="sm" className="w-full">View all documentation</Button>
+                    </CardFooter>
+                </Card>
+
+                <div className="text-center">
+                    <Button variant="ghost" size="sm" className="text-muted-foreground">Skip onboarding</Button>
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function PlanUpgradePage({ layout }: { layout: LayoutName }) {
+    return (
+        <LayoutResolved layout={layout} title="Upgrade Plan" currentUrl="/get-started/upgrade">
+            <div className="p-6 max-w-2xl mx-auto space-y-6">
+                <h1 className="text-xl font-semibold">Get more from TAD</h1>
+
+                <Card className="border-primary/30 bg-gradient-to-br from-primary/5 to-transparent">
+                    <CardContent className="p-6">
+                        <div className="flex items-start gap-4">
+                            <div className="rounded-xl bg-primary/10 p-3 shrink-0">
+                                <Zap className="h-6 w-6 text-primary" />
+                            </div>
+                            <div className="flex-1">
+                                <div className="flex items-center gap-2">
+                                    <p className="font-semibold">You're on the Starter plan</p>
+                                    <Badge variant="outline" className="text-xs">Starter</Badge>
+                                </div>
+                                <p className="text-sm text-muted-foreground mt-1">Upgrade to Pro to unlock unlimited devices, advanced analytics, and priority support.</p>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <div className="grid grid-cols-2 gap-4">
+                    {[
+                        {
+                            plan: 'Pro',
+                            price: '$49',
+                            period: '/month',
+                            features: ['Up to 50 devices', 'Advanced analytics', 'Geofence alerts', 'API access', 'Priority support'],
+                            highlight: true,
+                        },
+                        {
+                            plan: 'Enterprise',
+                            price: 'Custom',
+                            period: '',
+                            features: ['Unlimited devices', 'White-label option', 'Dedicated CSM', 'SLA guarantees', 'SSO & SCIM'],
+                            highlight: false,
+                        },
+                    ].map(({ plan, price, period, features, highlight }) => (
+                        <Card key={plan} className={highlight ? 'border-primary/40' : ''}>
+                            <CardHeader>
+                                <div className="flex items-center justify-between">
+                                    <CardTitle className="text-base">{plan}</CardTitle>
+                                    {highlight && <Badge className="text-xs">Popular</Badge>}
+                                </div>
+                                <p className="text-2xl font-bold">{price}<span className="text-sm font-normal text-muted-foreground">{period}</span></p>
+                            </CardHeader>
+                            <CardContent>
+                                <ul className="space-y-2">
+                                    {features.map((f) => (
+                                        <li key={f} className="flex items-center gap-2 text-sm">
+                                            <CheckCircle2 className="h-3.5 w-3.5 text-green-600 shrink-0" />{f}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </CardContent>
+                            <CardFooter>
+                                <Button size="sm" className="w-full" variant={highlight ? 'default' : 'outline'}>
+                                    {plan === 'Enterprise' ? 'Contact sales' : 'Upgrade to Pro'}
+                                </Button>
+                            </CardFooter>
+                        </Card>
+                    ))}
+                </div>
+
+                <div className="text-center text-xs text-muted-foreground">
+                    Questions? <a href="#" className="text-primary underline">Chat with our team</a> or <a href="#" className="text-primary underline">compare all plans</a>.
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}

package/src/pages/my/NotificationsPage.tsx

@@ -0,0 +1,133 @@
+import {
+    Button, Card, CardContent, CardHeader, CardTitle,
+    Label, SettingsRow, Switch, Separator,
+} from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import {
+    Bell, BellOff, CalendarClock, ClipboardCheck, DollarSign,
+    FileText, Mail, MessageCircle, Monitor, Phone, Tablet, Users,
+} from 'lucide-react';
+
+export interface UserContact {
+    email: string;
+    phone: string;
+}
+
+export interface DigestItem {
+    label: string;
+    desc: string;
+    on: boolean;
+}
+
+export function NotificationChannelsPage({ layout, user }: { layout: LayoutName; user: UserContact }) {
+    return (
+        <LayoutResolved layout={layout} title="Notifications" currentUrl="/notifications">
+            <div className="p-6 max-w-2xl mx-auto space-y-6">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-xl font-semibold">Notifications</h1>
+                    <div className="flex items-center gap-2"><Label className="text-sm">Team-wide alerts</Label><Switch /></div>
+                </div>
+
+                <Card>
+                    <CardHeader className="pb-0">
+                        <CardTitle>Notification channels</CardTitle>
+                    </CardHeader>
+                    <div>
+                        <SettingsRow icon={Mail}    title="Email"   description={user.email}                                   action={<Switch defaultChecked />} />
+                        <SettingsRow icon={Phone}   title="Mobile"  description={user.phone}                                   action={<Switch />} />
+                        <SettingsRow icon={Monitor} title="Desktop" description="Enable real-time desktop browser alerts."    action={<Switch defaultChecked />} />
+                        <SettingsRow
+                            icon={Bell}
+                            title="Slack"
+                            description="Receive instant alerts for messages and updates directly in Slack."
+                            action={<Button variant="outline" size="sm">Connect Slack</Button>}
+                        />
+                    </div>
+                </Card>
+
+                <Card>
+                    <CardHeader className="pb-0">
+                        <CardTitle>Fleet alerts</CardTitle>
+                    </CardHeader>
+                    <div>
+                        <SettingsRow icon={Bell}           title="Critical incidents"  description="SOS pressed, speeding, and high-priority rule violations."  action={<Switch defaultChecked />} />
+                        <SettingsRow icon={Monitor}        title="Device offline"      description="When a tracked device stops reporting."                    action={<Switch defaultChecked />} />
+                        <SettingsRow icon={ClipboardCheck} title="Geofence violations" description="Device enters or exits a restricted zone."                action={<Switch defaultChecked />} />
+                        <SettingsRow icon={Tablet}         title="Low battery"         description="Battery below 20% on any device."                         action={<Switch />} />
+                        <SettingsRow icon={CalendarClock}  title="Trip completed"      description="Notification when an assignee finishes a trip."           action={<Switch />} />
+                    </div>
+                </Card>
+
+                <Card>
+                    <CardHeader className="pb-0">
+                        <CardTitle>Other notifications</CardTitle>
+                    </CardHeader>
+                    <div>
+                        <SettingsRow icon={DollarSign}    title="Budget warning"       description="Get notified if nearing your device quota limit."        action={<Switch defaultChecked />} />
+                        <SettingsRow icon={FileText}      title="Invoice alert"        description="Alert for new and unpaid invoices."                      action={<Button variant="outline" size="sm">View invoices</Button>} />
+                        <SettingsRow icon={MessageCircle} title="Feedback alert"       description="When a team member submits new feedback."                action={<Switch defaultChecked />} />
+                        <SettingsRow icon={Users}         title="Collaboration invite" description="Invite to collaborate on a new report or document."      action={<Switch defaultChecked />} />
+                        <SettingsRow icon={ClipboardCheck}title="Status change"        description="Notifies changes in incident or task status."            action={<Switch defaultChecked />} />
+                    </div>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function DoNotDisturbPage({ layout, digestItems }: { layout: LayoutName; digestItems: DigestItem[] }) {
+    return (
+        <LayoutResolved layout={layout} title="Notifications" currentUrl="/notifications">
+            <div className="p-6 max-w-2xl mx-auto space-y-6">
+                <h1 className="text-xl font-semibold">Notifications</h1>
+
+                <Card>
+                    <CardHeader><CardTitle>Do Not Disturb</CardTitle></CardHeader>
+                    <CardContent className="space-y-4">
+                        <p className="text-sm text-muted-foreground">Activate Do Not Disturb to silence all notifications and focus without interruptions during specified hours or tasks.</p>
+                        <div className="flex items-center justify-between rounded-lg border border-border p-4">
+                            <div className="flex items-center gap-3">
+                                <BellOff className="h-5 w-5 text-muted-foreground" />
+                                <div>
+                                    <p className="text-sm font-medium">Do Not Disturb</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">All notifications are paused</p>
+                                </div>
+                            </div>
+                            <Switch />
+                        </div>
+                        <Separator />
+                        <p className="text-sm font-medium">Scheduled quiet hours</p>
+                        <div className="grid grid-cols-2 gap-3">
+                            <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">Start time</Label>
+                                <input type="time" defaultValue="22:00" className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm" />
+                            </div>
+                            <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">End time</Label>
+                                <input type="time" defaultValue="07:00" className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm" />
+                            </div>
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <div><p className="text-sm font-medium">Allow critical incident alerts</p><p className="text-xs text-muted-foreground">SOS and high-priority violations bypass DND</p></div>
+                            <Switch defaultChecked />
+                        </div>
+                        <div className="flex justify-end"><Button size="sm">Save schedule</Button></div>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader><CardTitle>Email digest</CardTitle></CardHeader>
+                    <CardContent className="space-y-3">
+                        {digestItems.map(({ label, desc, on }) => (
+                            <div key={label} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
+                                <div><p className="text-sm font-medium">{label}</p><p className="text-xs text-muted-foreground mt-0.5">{desc}</p></div>
+                                <Switch defaultChecked={on} />
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}