@trackany-device/components 1.0.0

package/src/components/keenicons/assets/styles.css

@@ -0,0 +1,4 @@
+@import './duotone/style.css';
+@import './outline/style.css';
+@import './filled/style.css';
+@import './solid/style.css';

package/src/components/keenicons/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './keenicons';

package/src/components/keenicons/keenicons.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+import type { KeeniconsProps } from './types';
+
+export const KeenIcon = forwardRef<HTMLElement, KeeniconsProps>(
+    ({ icon, style = 'duotone', className = '', ...props }, ref) => {
+        return (
+            <i
+                ref={ref}
+                {...props}
+                className={cn(`ki-${style}`, `ki-${icon}`, className)}
+            />
+        );
+    },
+);
+KeenIcon.displayName = 'KeenIcon';

package/src/components/keenicons/types.ts

@@ -0,0 +1,7 @@
+export type KeeniconsStyle = 'duotone' | 'filled' | 'solid' | 'outline';
+
+export interface KeeniconsProps {
+  icon: string;
+  style?: KeeniconsStyle;
+  className?: string;
+}

package/src/components/nav-footer.tsx

@@ -0,0 +1,49 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from './ui/sidebar';
+import { toUrl } from '../lib/utils';
+import type { NavItem } from '../types/navigation';
+
+export function NavFooter({
+    items,
+    className,
+    ...props
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
+    items: NavItem[];
+}) {
+    return (
+        <SidebarGroup
+            {...props}
+            className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}
+        >
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton
+                                asChild
+                                className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+                            >
+                                <a
+                                    href={toUrl(item.href)}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {item.icon && (
+                                        <item.icon className="h-5 w-5" />
+                                    )}
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    );
+}

package/src/components/nav-main.tsx

@@ -0,0 +1,53 @@
+'use client';
+import { PlatformLink } from '../platform/context';
+import {
+    SidebarGroup,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from './ui/sidebar';
+import { useCurrentUrl } from '../hooks/use-current-url';
+import type { NavItem } from '../types/navigation';
+
+export function NavMain({ items = [] }: { items: NavItem[] }) {
+    const { isCurrentOrParentUrl } = useCurrentUrl();
+
+    return (
+        <SidebarGroup className="px-2 py-1">
+            <SidebarMenu className="gap-2">
+                {items.map((item) => {
+                    const active = isCurrentOrParentUrl(item.href);
+
+                    return (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton
+                                asChild
+                                isActive={active}
+                                size="lg"
+                                tooltip={{ children: item.title }}
+                                className={
+                                    active
+                                        ? 'border-l-[3px] border-sidebar-primary py-4 pl-[calc(0.75rem-3px)] text-sidebar-foreground'
+                                        : 'border-l-[3px] border-transparent py-4 pl-3 text-sidebar-foreground/70 hover:text-sidebar-foreground'
+                                }
+                            >
+                                <PlatformLink
+                                    href={item.href}
+                                    prefetch
+                                    className="group-data-[collapsible=icon]:justify-center"
+                                >
+                                    {item.icon && (
+                                        <item.icon className="h-[28px] w-[28px] shrink-0 group-data-[collapsible=icon]:mx-auto" />
+                                    )}
+                                    <span className="text-[13px] font-medium group-data-[collapsible=icon]:hidden">
+                                        {item.title}
+                                    </span>
+                                </PlatformLink>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    );
+                })}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}

package/src/components/nav-user.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { ChevronsUpDown } from 'lucide-react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from './ui/sidebar';
+import { UserInfo } from './user-info';
+import { UserMenuContent } from './user-menu-content';
+import { useIsMobile } from '../hooks/use-mobile';
+import type { User } from '../types/auth';
+
+export function NavUser({
+    user,
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+}: {
+    user: User;
+    settingsUrl?: string;
+    logoutUrl?: string;
+}) {
+    const { state } = useSidebar();
+    const isMobile = useIsMobile();
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent"
+                        >
+                            <UserInfo user={user} />
+                            <ChevronsUpDown className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        align="end"
+                        side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
+                    >
+                        <UserMenuContent
+                            user={user}
+                            settingsUrl={settingsUrl}
+                            logoutUrl={logoutUrl}
+                        />
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

package/src/components/notification-bell.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { Bell, CheckCheck, ExternalLink } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from './ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+
+interface NotificationData {
+    incident_id: number;
+    event_label: string;
+    priority_label: string;
+    message: string;
+    url: string;
+}
+
+interface Notification {
+    id: string;
+    data: NotificationData;
+    read_at: string | null;
+    created_at: string;
+}
+
+export interface NotificationBellProps {
+    unreadCount?: number;
+    fetchUrl?: string;
+    markReadUrl?: (id: string) => string;
+    markAllReadUrl?: string;
+    viewAllUrl?: string;
+}
+
+export function NotificationBell({
+    unreadCount = 0,
+    fetchUrl = '/api/v1/notifications',
+    markReadUrl = (id) => `/api/v1/notifications/${id}/read`,
+    markAllReadUrl = '/api/v1/notifications/read-all',
+    viewAllUrl = '/incidents',
+}: NotificationBellProps) {
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [localCount, setLocalCount] = useState(unreadCount);
+    const fetchedRef = useRef(false);
+
+    useEffect(() => { setLocalCount(unreadCount); }, [unreadCount]);
+
+    const fetchNotifications = useCallback(async () => {
+        if (loading) return;
+        setLoading(true);
+        try {
+            const res = await fetch(fetchUrl, {
+                headers: { Accept: 'application/json' },
+                credentials: 'same-origin',
+            });
+            if (res.ok) {
+                const json = await res.json();
+                setNotifications(json.notifications);
+            }
+        } finally {
+            setLoading(false);
+            fetchedRef.current = true;
+        }
+    }, [loading, fetchUrl]);
+
+    useEffect(() => {
+        if (open && !fetchedRef.current) fetchNotifications();
+    }, [open, fetchNotifications]);
+
+    const markRead = async (id: string) => {
+        await fetch(markReadUrl(id), {
+            method: 'POST',
+            headers: { 'X-CSRF-TOKEN': getCsrfToken(), Accept: 'application/json' },
+            credentials: 'same-origin',
+        });
+        setNotifications((prev) =>
+            prev.map((n) => n.id === id ? { ...n, read_at: new Date().toISOString() } : n),
+        );
+        setLocalCount((c) => Math.max(0, c - 1));
+    };
+
+    const markAllRead = async () => {
+        await fetch(markAllReadUrl, {
+            method: 'POST',
+            headers: { 'X-CSRF-TOKEN': getCsrfToken(), Accept: 'application/json' },
+            credentials: 'same-origin',
+        });
+        setNotifications((prev) => prev.map((n) => ({ ...n, read_at: new Date().toISOString() })));
+        setLocalCount(0);
+    };
+
+    const navigateTo = (notification: Notification) => {
+        if (!notification.read_at) markRead(notification.id);
+        setOpen(false);
+        window.location.href = notification.data.url;
+    };
+
+    return (
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="relative h-9 w-9"
+                    aria-label={`Notifications${localCount > 0 ? `, ${localCount} unread` : ''}`}
+                >
+                    <Bell className="h-5 w-5" />
+                    {localCount > 0 && (
+                        <span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-600 px-1 text-[10px] leading-none font-bold text-white">
+                            {localCount > 99 ? '99+' : localCount}
+                        </span>
+                    )}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-80 p-0" sideOffset={8}>
+                <div className="flex items-center justify-between border-b px-4 py-3">
+                    <span className="text-sm font-semibold">Notifications</span>
+                    {localCount > 0 && (
+                        <button
+                            onClick={markAllRead}
+                            className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800"
+                        >
+                            <CheckCheck className="h-3.5 w-3.5" />
+                            Mark all read
+                        </button>
+                    )}
+                </div>
+
+                <div className="max-h-96 overflow-y-auto">
+                    {loading && (
+                        <div className="space-y-2 p-3">
+                            {[1, 2, 3].map((i) => (
+                                <div key={i} className="h-14 animate-pulse rounded bg-neutral-100" />
+                            ))}
+                        </div>
+                    )}
+                    {!loading && notifications.length === 0 && (
+                        <div className="py-8 text-center text-sm text-neutral-500">No notifications</div>
+                    )}
+                    {!loading && notifications.map((notification) => (
+                        <button
+                            key={notification.id}
+                            onClick={() => navigateTo(notification)}
+                            className={`flex w-full items-start gap-3 border-b border-neutral-100 px-4 py-3 text-left text-sm last:border-0 hover:bg-neutral-50 ${!notification.read_at ? 'bg-blue-50' : ''}`}
+                        >
+                            <div className="mt-0.5 min-w-0 flex-1">
+                                <p className={`truncate ${!notification.read_at ? 'font-medium' : 'text-neutral-700'}`}>
+                                    {notification.data.message}
+                                </p>
+                                <p className="mt-0.5 text-xs text-neutral-400">
+                                    {formatRelativeTime(notification.created_at)}
+                                </p>
+                            </div>
+                            <ExternalLink className="mt-0.5 h-3.5 w-3.5 shrink-0 text-neutral-400" />
+                        </button>
+                    ))}
+                </div>
+
+                {notifications.length > 0 && (
+                    <div className="border-t px-4 py-2 text-center">
+                        <button
+                            onClick={() => { setOpen(false); window.location.href = viewAllUrl; }}
+                            className="text-xs text-blue-600 hover:text-blue-800"
+                        >
+                            View all incidents
+                        </button>
+                    </div>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+function getCsrfToken(): string {
+    return (
+        (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? ''
+    );
+}
+
+function formatRelativeTime(isoString: string): string {
+    const diff = Date.now() - new Date(isoString).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    return `${Math.floor(hrs / 24)}d ago`;
+}

package/src/components/products/product-card.tsx

@@ -0,0 +1,159 @@
+import { PlatformLink } from '../../platform/context';
+/**
+ * Unified product card.
+ *
+ * Used everywhere a product is displayed (featured carousel, products grid,
+ * filter page). Theme-aware (uses semantic tokens, no raw hex), supports
+ * USD/PKR pricing, badge labels, out-of-stock and bulk-quantity states.
+ */
+import { ArrowRight, Package } from 'lucide-react';
+
+import { Badge } from '../ui/badge';
+import { Card } from '../ui/card';
+
+export type Currency = 'USD' | 'PKR';
+
+export type ProductCardData = {
+    id: number;
+    name: string;
+    description: string | null;
+    image: string | null;
+    slug: string;
+    price_usd: number | null;
+    price_pkr?: number | null;
+    min_quantity?: number;
+    quantity_multiple?: number;
+    bulk_quantity?: number | null;
+    quantity?: number;
+    badge_label: string | null;
+    badge_color: string | null;
+};
+
+type Props = {
+    product: ProductCardData;
+    currency?: Currency;
+    /** Where the "Order" / "View Details" CTA navigates to. */
+    actionHref?: string;
+    actionLabel?: string;
+};
+
+export function formatProductPrice(
+    p: ProductCardData,
+    currency: Currency,
+): string | null {
+    if (currency === 'PKR') {
+        if (p.price_pkr != null) {
+            return `₨ ${p.price_pkr.toLocaleString('en-PK', { maximumFractionDigits: 0 })}`;
+        }
+
+        // Fall back to USD if PKR isn't priced — never show an empty cell.
+        return p.price_usd != null ? `$ ${p.price_usd.toFixed(2)}` : null;
+    }
+
+    return p.price_usd != null ? `$ ${p.price_usd.toFixed(2)}` : null;
+}
+
+export function ProductCard({
+    product,
+    currency = 'PKR',
+    actionHref,
+    actionLabel = 'View Details',
+}: Props) {
+    const price = formatProductPrice(product, currency);
+    const href = actionHref ?? `/products/${product.slug}`;
+    const outOfStock = product.quantity === 0;
+    const isBulk =
+        product.bulk_quantity != null &&
+        product.quantity != null &&
+        product.quantity > product.bulk_quantity;
+
+    return (
+        <Card className="group flex h-full flex-col overflow-hidden border-border bg-card p-0 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md">
+            {/* Image */}
+            <div className="relative flex aspect-square items-center justify-center overflow-hidden bg-muted">
+                {product.image ? (
+                    <img
+                        src={product.image}
+                        alt={product.name}
+                        className="h-full w-full object-contain p-6 transition-transform duration-300 group-hover:scale-105"
+                    />
+                ) : (
+                    <div className="relative flex h-20 w-20 items-center justify-center rounded-2xl bg-background/60 shadow-sm">
+                        <Package className="h-10 w-10 text-muted-foreground" />
+                    </div>
+                )}
+                {product.badge_label && (
+                    <Badge
+                        className="absolute top-3 left-3"
+                        style={
+                            product.badge_color
+                                ? {
+                                      backgroundColor: product.badge_color,
+                                      color: 'white',
+                                  }
+                                : undefined
+                        }
+                    >
+                        {product.badge_label}
+                    </Badge>
+                )}
+                {outOfStock && (
+                    <span className="absolute top-3 right-3 rounded-full bg-foreground/75 px-2.5 py-1 text-[11px] font-semibold text-background">
+                        Out of Stock
+                    </span>
+                )}
+            </div>
+
+            {/* Details */}
+            <div className="flex flex-1 flex-col p-5">
+                <h3 className="mb-1 text-base font-semibold text-card-foreground">
+                    {product.name}
+                </h3>
+                {product.description && (
+                    <p className="mb-4 line-clamp-2 flex-1 text-sm leading-relaxed text-muted-foreground">
+                        {product.description}
+                    </p>
+                )}
+
+                <div className="mt-auto flex items-center justify-between gap-3">
+                    <div>
+                        {price ? (
+                            <span className="text-lg font-semibold text-foreground tabular-nums">
+                                {price}
+                            </span>
+                        ) : (
+                            <span className="text-sm text-muted-foreground italic">
+                                Price on request
+                            </span>
+                        )}
+                        {(product.min_quantity ?? 1) > 1 && (
+                            <div className="text-xs text-muted-foreground">
+                                Min {product.min_quantity}
+                                {(product.quantity_multiple ?? 1) > 1
+                                    ? ` · ×${product.quantity_multiple}`
+                                    : ''}
+                            </div>
+                        )}
+                    </div>
+
+                    {isBulk ? (
+                        <a
+                            href="/contact?topic=bulk"
+                            className="inline-flex items-center gap-1.5 rounded-lg bg-warning-subtle px-3 py-1.5 text-xs font-semibold text-warning-fg transition hover:bg-warning-subtle/80"
+                        >
+                            Contact Us
+                        </a>
+                    ) : (
+                        <a
+                            href={href}
+                            className="inline-flex items-center gap-1.5 rounded-lg bg-primary/10 px-3 py-1.5 text-sm font-semibold text-primary transition hover:bg-primary hover:text-primary-foreground"
+                        >
+                            {actionLabel}
+                            <ArrowRight className="h-3.5 w-3.5" />
+                        </a>
+                    )}
+                </div>
+            </div>
+        </Card>
+    );
+}

package/src/components/text-link.tsx

@@ -0,0 +1,23 @@
+import { PlatformLink } from '../platform/context';
+import type { ComponentProps } from 'react';
+import { cn } from '../lib/utils';
+
+type Props = ComponentProps<typeof PlatformLink>;
+
+export default function TextLink({
+    className = '',
+    children,
+    ...props
+}: Props) {
+    return (
+        <PlatformLink
+            className={cn(
+                'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </PlatformLink>
+    );
+}