@trackany-device/components 1.0.0

package/src/components/web/SiteFooter.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { PlatformLink } from '../../platform/context';
+
+import { CheckCircle2, Mail, MapPin, Phone } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+type NavLink = { id: number; label: string; href: string; target: string };
+
+export type FooterLinks = {
+    quick?: NavLink[];
+    support?: NavLink[];
+    legal?: NavLink[];
+};
+
+const CONTACT = {
+    phone: '+1 (800) 123-4567',
+    email: 'info@trackanydevice.com',
+    address: '123 Innovation Drive, Smart City, CA 94043, USA',
+};
+
+function DefaultAppLogo() {
+    const appName = (typeof window !== 'undefined' && (window as any).AppConfig?.appName) || 'Fleet Tracking';
+    return <span className="font-display text-sm font-semibold text-foreground">{appName}</span>;
+}
+
+interface SiteFooterProps {
+    AppLogo?: React.ComponentType;
+    footerLinks?: FooterLinks;
+    subscribeEndpoint?: string;
+}
+
+export default function SiteFooter({ AppLogo = DefaultAppLogo, footerLinks, subscribeEndpoint = '/subscribe' }: SiteFooterProps) {
+    const groups = footerLinks ?? { quick: [], support: [], legal: [] };
+    const appName = (typeof window !== 'undefined' && (window as any).AppConfig?.appName) || 'Fleet Tracking';
+
+    return (
+        <footer id="contact" className="border-t border-border bg-card">
+            <div className="mx-auto max-w-7xl px-5 py-14 sm:px-8 lg:px-16">
+                <div className="grid gap-10 border-b border-border pb-10 lg:grid-cols-2">
+                    <div>
+                        <PlatformLink href="/" className="mb-4 inline-flex items-center gap-2.5">
+                            <div className="flex h-9 items-center"><AppLogo /></div>
+                            <span className="font-display text-sm font-semibold text-foreground">{appName}</span>
+                        </PlatformLink>
+                        <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
+                            Smart tracking solutions for a connected world. Track any device, anywhere, anytime.
+                        </p>
+                    </div>
+
+                    <div className="grid gap-3 sm:grid-cols-3">
+                        <ContactRow icon={Phone} label="Phone"   value={CONTACT.phone}   />
+                        <ContactRow icon={Mail}  label="Email"   value={CONTACT.email}   />
+                        <ContactRow icon={MapPin} label="Address" value={CONTACT.address} />
+                    </div>
+                </div>
+
+                <div className="grid gap-10 py-10 sm:grid-cols-3">
+                    <FooterColumn title="Quick Links" links={groups.quick ?? []} />
+                    <FooterColumn title="Policies"    links={groups.legal  ?? []} />
+                    <SubscriptionForm endpoint={subscribeEndpoint} />
+                </div>
+            </div>
+
+            <div className="border-t border-border bg-muted/30">
+                <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-5 py-5 text-xs text-muted-foreground sm:flex-row sm:px-8 lg:px-16">
+                    <span>© {new Date().getFullYear()} {appName}. All rights reserved.</span>
+                    <span>Built for modern field operations · IoT · Fleet · Smart Infrastructure</span>
+                </div>
+            </div>
+        </footer>
+    );
+}
+
+function FooterColumn({ title, links }: { title: string; links: NavLink[] }) {
+    if (!links || links.length === 0) return null;
+    return (
+        <div>
+            <h3 className="mb-4 font-display text-xs font-semibold tracking-widest text-foreground uppercase">{title}</h3>
+            <ul className="space-y-2.5">
+                {links.map((link) => (
+                    <li key={link.id}>
+                        <PlatformLink href={link.href} target={link.target === '_blank' ? '_blank' : undefined} rel={link.target === '_blank' ? 'noopener noreferrer' : undefined} className="text-sm text-muted-foreground transition-colors hover:text-foreground">
+                            {link.label}
+                        </PlatformLink>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+function ContactRow({ icon: IconCmp, label, value }: { icon: React.ComponentType<{ className?: string }>; label: string; value: string }) {
+    return (
+        <div className="flex items-start gap-2.5">
+            <IconCmp className="mt-0.5 size-4 shrink-0 text-primary" />
+            <div>
+                <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">{label}</p>
+                <p className="text-sm text-foreground">{value}</p>
+            </div>
+        </div>
+    );
+}
+
+function SubscriptionForm({ endpoint }: { endpoint: string }) {
+    const [email, setEmail]       = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [done, setDone]         = useState(false);
+    const [error, setError]       = useState('');
+
+    async function submit(e: React.FormEvent) {
+        e.preventDefault();
+        setSubmitting(true);
+        setError('');
+        try {
+            const res = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                body: JSON.stringify({ email, source: 'footer' }),
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                setError(data?.errors?.email ?? 'Something went wrong.');
+            } else {
+                setDone(true);
+                setEmail('');
+                setTimeout(() => setDone(false), 4000);
+            }
+        } catch {
+            setError('Network error. Please try again.');
+        } finally {
+            setSubmitting(false);
+        }
+    }
+
+    return (
+        <div>
+            <h3 className="mb-4 font-display text-xs font-semibold tracking-widest text-foreground uppercase">Subscribe</h3>
+            <p className="mb-3 text-sm text-muted-foreground">Product updates, new device launches, and tips for getting more out of your fleet.</p>
+            <form className="flex flex-col gap-2 sm:flex-row" onSubmit={submit} noValidate>
+                <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your@email.com" aria-label="Email address" required className="flex-1" />
+                <Button type="submit" disabled={submitting} className="shrink-0">{submitting ? '…' : 'Subscribe'}</Button>
+            </form>
+            {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
+            {done && (
+                <p className="mt-2 inline-flex items-center gap-1 text-xs text-primary">
+                    <CheckCircle2 className="size-3" /> Thanks! You're subscribed.
+                </p>
+            )}
+        </div>
+    );
+}

package/src/components/web/SiteHeader.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { LayoutDashboard, Menu, Moon, ShoppingCart, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { Button } from '../ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet';
+import { useDarkMode } from '../../hooks/use-dark-mode';
+import { cn } from '../../lib/utils';
+import { PlatformLink } from '../../platform/context';
+
+type NavLink = { id: number; label: string; href: string; target: string };
+
+export type SiteHeaderAuth = {
+    user: { name: string; role: string } | null;
+};
+
+export type SiteHeaderHosts = {
+    central?: string | null;
+    admin?: string | null;
+    my?: string | null;
+};
+
+const FALLBACK_LINKS: NavLink[] = [
+    { id: 1, label: 'Products',   href: '/products',       target: '_self' },
+    { id: 2, label: 'Solutions',  href: '/solutions',      target: '_self' },
+    { id: 3, label: 'TAD101 Docs',href: '/docs/tad101',   target: '_self' },
+    { id: 4, label: 'Industries', href: '/industries',     target: '_self' },
+    { id: 5, label: 'Blog',       href: '/blog',           target: '_self' },
+    { id: 6, label: 'About',      href: '/about',          target: '_self' },
+    { id: 7, label: 'Contact',    href: '/contact',        target: '_self' },
+];
+
+function DefaultAppLogo() {
+    const appName = (typeof window !== 'undefined' && (window as any).AppConfig?.appName) || 'Fleet Tracking';
+    return <span className="font-display text-sm font-semibold text-foreground">{appName}</span>;
+}
+
+interface SiteHeaderProps {
+    AppLogo?: React.ComponentType;
+    navLinks?: NavLink[];
+    auth?: SiteHeaderAuth;
+    hosts?: SiteHeaderHosts;
+}
+
+export default function SiteHeader({ AppLogo = DefaultAppLogo, navLinks, auth, hosts }: SiteHeaderProps) {
+    const links = navLinks?.length ? navLinks : FALLBACK_LINKS;
+    const user = auth?.user ?? null;
+
+    const dashboardHref = (() => {
+        if (user?.role === 'admin') return hosts?.admin ?? '/admin';
+        return hosts?.my ?? '/dashboard';
+    })();
+    const dashboardIsExternal = /^https?:\/\//.test(dashboardHref);
+
+    const [scrolled, setScrolled] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
+
+    useEffect(() => {
+        const handler = () => setScrolled(window.scrollY > 24);
+        handler();
+        window.addEventListener('scroll', handler, { passive: true });
+        return () => window.removeEventListener('scroll', handler);
+    }, []);
+
+    return (
+        <header className={cn(
+            'fixed inset-x-0 top-0 z-50 border-b transition-colors duration-200',
+            scrolled ? 'border-border bg-background/85 backdrop-blur-md' : 'border-transparent bg-background/0',
+        )}>
+            <nav className="mx-auto flex h-16 max-w-7xl items-center gap-4 px-5">
+                <PlatformLink href="/" className="flex shrink-0 items-center gap-2" aria-label="Home">
+                    <AppLogo />
+                </PlatformLink>
+
+                <ul className="hidden flex-1 items-center justify-center gap-1 lg:flex">
+                    {links.map((link) => (
+                        <li key={link.id}><NavItem link={link} /></li>
+                    ))}
+                </ul>
+
+                <div className="ml-auto flex items-center gap-1.5">
+                    <DarkModeToggle />
+
+                    <Button asChild variant="ghost" size="icon" aria-label="Cart">
+                        <PlatformLink href="/cart"><ShoppingCart className="size-4" /></PlatformLink>
+                    </Button>
+
+                    <Button asChild size="sm" className="hidden sm:inline-flex">
+                        <PlatformLink href={dashboardHref} {...(dashboardIsExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
+                            <LayoutDashboard className="size-4" />
+                            {user?.role === 'admin' ? 'Admin' : 'Dashboard'}
+                        </PlatformLink>
+                    </Button>
+
+                    <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+                        <SheetTrigger asChild>
+                            <Button variant="ghost" size="icon" className="lg:hidden" aria-label="Open menu">
+                                <Menu className="size-5" />
+                            </Button>
+                        </SheetTrigger>
+                        <SheetContent side="right" className="w-full sm:max-w-sm">
+                            <SheetHeader><SheetTitle>Menu</SheetTitle></SheetHeader>
+                            <ul className="mt-2 flex flex-col gap-1 px-2">
+                                {links.map((link) => (
+                                    <li key={link.id}>
+                                        <NavItem link={link} mobile onNavigate={() => setMobileOpen(false)} />
+                                    </li>
+                                ))}
+                            </ul>
+                            <div className="mt-6 flex flex-col gap-2 px-2">
+                                <Button asChild>
+                                    <PlatformLink href={dashboardHref} onClick={() => setMobileOpen(false)}>
+                                        <LayoutDashboard className="size-4" />
+                                        {user?.role === 'admin' ? 'Admin' : 'Dashboard'}
+                                    </PlatformLink>
+                                </Button>
+                                <Button asChild variant="outline">
+                                    <PlatformLink href="/cart" onClick={() => setMobileOpen(false)}>
+                                        <ShoppingCart className="size-4" /> Cart
+                                    </PlatformLink>
+                                </Button>
+                            </div>
+                        </SheetContent>
+                    </Sheet>
+                </div>
+            </nav>
+        </header>
+    );
+}
+
+function NavItem({ link, mobile, onNavigate }: { link: NavLink; mobile?: boolean; onNavigate?: () => void }) {
+    const baseClass = mobile
+        ? 'block rounded-md px-3 py-2.5 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground'
+        : 'rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground';
+
+    if (link.href.startsWith('#')) {
+        return (
+            <PlatformLink href={link.href} onClick={(e) => { e?.preventDefault(); document.querySelector(link.href)?.scrollIntoView({ behavior: 'smooth' }); onNavigate?.(); }} className={baseClass}>
+                {link.label}
+            </PlatformLink>
+        );
+    }
+
+    return (
+        <PlatformLink href={link.href} target={link.target === '_blank' ? '_blank' : undefined} rel={link.target === '_blank' ? 'noopener noreferrer' : undefined} className={baseClass} onClick={onNavigate}>
+            {link.label}
+        </PlatformLink>
+    );
+}
+
+function DarkModeToggle() {
+    const { isDark, toggle } = useDarkMode();
+    return (
+        <Button variant="ghost" size="icon" onClick={toggle} aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+            {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+        </Button>
+    );
+}

package/src/components/workflows/workflow-canvas.tsx

@@ -0,0 +1,321 @@
+'use client';
+
+/**
+ * WorkflowCanvas — React Flow visual editor for workflow graphs.
+ *
+ * The underlying data shape (nodes + edges with action_type / config in
+ * node.data) was already React-Flow-compatible — this component drops in
+ * over the same structure the executor walks server-side.
+ *
+ * The toolbar lives in the parent edit page; this component renders only
+ * the canvas + action palette and emits change events upward.
+ */
+import {
+    addEdge,
+    Background,
+    Controls,
+    Handle,
+    Position,
+    ReactFlow,
+    ReactFlowProvider,
+    useEdgesState,
+    useNodesState,
+} from '@xyflow/react';
+import type { Connection, Edge, Node, NodeProps } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import {
+    AlertCircle,
+    Bell,
+    Hourglass,
+    Plus,
+    Send,
+    Trash2,
+    Webhook,
+    Zap,
+} from 'lucide-react';
+import { useCallback, useEffect, useRef } from 'react';
+import type { ComponentType } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type WorkflowNodeData = {
+    action_type: string;
+    label: string;
+    config: Record<string, unknown>;
+};
+
+export type WorkflowNode = Node<WorkflowNodeData>;
+export type WorkflowEdge = Edge;
+
+export type WorkflowGraph = {
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+};
+
+type ActionOption = {
+    value: string;
+    label: string;
+    icon: string;
+    color: string;
+};
+
+type Props = {
+    graph: WorkflowGraph;
+    actions: ActionOption[];
+    onChange: (graph: WorkflowGraph) => void;
+    onNodeSelect: (nodeId: string | null) => void;
+    selectedNodeId: string | null;
+};
+
+const ACTION_ICON: Record<string, ComponentType<{ className?: string }>> = {
+    trigger: Zap,
+    wait: Hourglass,
+    notify: Bell,
+    send_command: Send,
+    escalate_incident: AlertCircle,
+    webhook: Webhook,
+};
+
+const ACTION_TONE: Record<string, string> = {
+    trigger: 'border-primary/50 bg-primary/10 text-primary',
+    wait: 'border-warning/40 bg-warning-subtle text-warning-fg',
+    notify: 'border-info/40 bg-info-subtle text-info-fg',
+    send_command: 'border-primary/50 bg-primary/10 text-primary',
+    escalate_incident: 'border-danger/40 bg-danger-subtle text-danger',
+    webhook: 'border-border bg-accent text-accent-foreground',
+};
+
+function WorkflowNodeRenderer({ data, selected, id }: NodeProps<WorkflowNode>) {
+    const Icon = ACTION_ICON[data.action_type] ?? Plus;
+    const tone = ACTION_TONE[data.action_type] ?? 'border-border bg-card';
+    const isTrigger = data.action_type === 'trigger';
+
+    return (
+        <div
+            className={cn(
+                'min-w-[180px] rounded-xl border-2 bg-background px-4 py-3 shadow-sm transition-all',
+                tone,
+                selected &&
+                    'ring-2 ring-primary ring-offset-2 ring-offset-background',
+            )}
+            data-node-id={id}
+        >
+            {!isTrigger && (
+                <Handle
+                    type="target"
+                    position={Position.Left}
+                    className="!h-3 !w-3 !border-2 !bg-background"
+                />
+            )}
+            <div className="flex items-center gap-2">
+                <div
+                    className={cn(
+                        'grid size-8 shrink-0 place-items-center rounded-full',
+                        tone,
+                    )}
+                >
+                    <Icon className="size-4" />
+                </div>
+                <div className="min-w-0">
+                    <p className="truncate text-sm font-semibold">
+                        {data.label}
+                    </p>
+                    <p className="truncate text-[10px] tracking-wide text-muted-foreground uppercase">
+                        {data.action_type.replace('_', ' ')}
+                    </p>
+                </div>
+            </div>
+            <Handle
+                type="source"
+                position={Position.Right}
+                className="!h-3 !w-3 !border-2 !bg-background"
+            />
+        </div>
+    );
+}
+
+const nodeTypes = { workflowNode: WorkflowNodeRenderer };
+
+function Canvas({
+    graph,
+    actions,
+    onChange,
+    onNodeSelect,
+    selectedNodeId,
+}: Props) {
+    const [nodes, setNodes, onNodesChange] = useNodesState<WorkflowNode>(
+        graph.nodes,
+    );
+    const [edges, setEdges, onEdgesChange] = useEdgesState<WorkflowEdge>(
+        graph.edges,
+    );
+    // Track which graph (by reference equality) is currently mirrored into
+    // React Flow state. When the parent replaces the graph (e.g. on save),
+    // we reset internal state to match.
+    const lastSyncedGraph = useRef(graph);
+
+    useEffect(() => {
+        if (graph !== lastSyncedGraph.current) {
+            setNodes(graph.nodes);
+            setEdges(graph.edges);
+            lastSyncedGraph.current = graph;
+        }
+    }, [graph, setNodes, setEdges]);
+
+    // Push canvas changes back to the parent so save sees the latest graph.
+    useEffect(() => {
+        const next = { nodes, edges };
+        onChange(next);
+        lastSyncedGraph.current = next;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodes, edges]);
+
+    const onConnect = useCallback(
+        (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
+        [setEdges],
+    );
+
+    const addNode = (actionType: string) => {
+        // Date.now() is flagged by the react-hooks/purity rule because
+        // it's impure; addNode is an event handler (not called during
+        // render), so reading the clock here is safe — eslint-disable
+        // the one line rather than memoising a counter.
+        // eslint-disable-next-line react-hooks/purity
+        const id = `${actionType}-${Date.now()}`;
+        const lastNode = nodes[nodes.length - 1];
+        const x = lastNode ? lastNode.position.x + 240 : 100;
+        const y = lastNode ? lastNode.position.y : 100;
+        const newNode: WorkflowNode = {
+            id,
+            type: 'workflowNode',
+            position: { x, y },
+            data: {
+                action_type: actionType,
+                label:
+                    actions.find((a) => a.value === actionType)?.label ??
+                    actionType,
+                config: defaultConfigFor(actionType),
+            },
+        };
+
+        const newEdges = lastNode
+            ? [
+                  {
+                      id: `e-${lastNode.id}-${id}`,
+                      source: lastNode.id,
+                      target: id,
+                  },
+              ]
+            : [];
+
+        setNodes((ns) => [...ns, newNode]);
+        setEdges((es) => [...es, ...newEdges]);
+        onNodeSelect(id);
+    };
+
+    const removeSelectedNode = () => {
+        if (!selectedNodeId || selectedNodeId === 'trigger') {
+            return;
+        }
+
+        setNodes((ns) => ns.filter((n) => n.id !== selectedNodeId));
+        setEdges((es) =>
+            es.filter(
+                (e) =>
+                    e.source !== selectedNodeId && e.target !== selectedNodeId,
+            ),
+        );
+        onNodeSelect(null);
+    };
+
+    return (
+        <div className="flex h-full">
+            {/* Left rail — action palette */}
+            <aside className="w-56 shrink-0 overflow-auto border-r border-border bg-card p-4">
+                <h2 className="mb-3 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+                    Actions
+                </h2>
+                <div className="space-y-2">
+                    {actions.map((a) => {
+                        const Icon = ACTION_ICON[a.value] ?? Plus;
+
+                        return (
+                            <button
+                                key={a.value}
+                                onClick={() => addNode(a.value)}
+                                className={cn(
+                                    'flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors hover:bg-accent',
+                                    ACTION_TONE[a.value] ??
+                                        'border-border bg-background',
+                                )}
+                            >
+                                <Icon className="size-4 shrink-0" />
+                                {a.label}
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {selectedNodeId && selectedNodeId !== 'trigger' && (
+                    <button
+                        onClick={removeSelectedNode}
+                        className="mt-6 flex w-full items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-left text-sm text-destructive hover:bg-destructive/10"
+                    >
+                        <Trash2 className="size-4 shrink-0" />
+                        Delete selected node
+                    </button>
+                )}
+            </aside>
+
+            {/* Canvas */}
+            <div className="flex-1 bg-muted/30">
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    onConnect={onConnect}
+                    onNodeClick={(_, node) => onNodeSelect(node.id)}
+                    onPaneClick={() => onNodeSelect(null)}
+                    nodeTypes={nodeTypes}
+                    fitView
+                    fitViewOptions={{ padding: 0.2, maxZoom: 1.5 }}
+                    proOptions={{ hideAttribution: true }}
+                >
+                    <Background gap={20} size={1} />
+                    <Controls position="bottom-right" />
+                </ReactFlow>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Wrap the canvas in ReactFlowProvider so multiple instances can coexist
+ * (e.g. a future split view of workflow + run logs side by side).
+ */
+export function WorkflowCanvas(props: Props) {
+    return (
+        <ReactFlowProvider>
+            <Canvas {...props} />
+        </ReactFlowProvider>
+    );
+}
+
+function defaultConfigFor(actionType: string): Record<string, unknown> {
+    switch (actionType) {
+        case 'wait':
+            return { seconds: 10 };
+        case 'notify':
+            return { channels: ['in_app'], message: '' };
+        case 'send_command':
+            return { command: '', parameters: {} };
+        case 'escalate_incident':
+            return { priority: 'critical' };
+        case 'webhook':
+            return { url: '', method: 'POST' };
+        default:
+            return {};
+    }
+}

package/src/controls/Blockquote.tsx

@@ -0,0 +1,25 @@
+import type { BlockquoteHTMLAttributes, ReactNode } from 'react';
+
+interface Props extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    children: ReactNode;
+    cite?: string;
+}
+
+export function Blockquote({ children, cite, className = '', ...props }: Props) {
+    return (
+        <figure className={className}>
+            <blockquote
+                cite={cite}
+                className="border-l-4 border-primary pl-4 italic text-muted-foreground"
+                {...props}
+            >
+                {children}
+            </blockquote>
+            {cite && (
+                <figcaption className="mt-2 pl-4 text-xs text-muted-foreground/70">
+                    — <cite>{cite}</cite>
+                </figcaption>
+            )}
+        </figure>
+    );
+}