@trackany-device/components 1.0.0

package/src/elements/DriverCard.tsx

@@ -0,0 +1,67 @@
+import { cn } from '../lib/utils';
+import { Card, CardContent } from '../components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar';
+
+export interface DriverCardData {
+    id: string;
+    name: string;
+    licenseNumber?: string;
+    phone?: string;
+    avatar?: string;
+    status?: 'active' | 'inactive' | 'on-trip';
+    vehicleRegistration?: string;
+    href?: string;
+}
+
+const STATUS_LABELS: Record<string, { label: string; className: string }> = {
+    active:   { label: 'Active',   className: 'text-success' },
+    inactive: { label: 'Inactive', className: 'text-muted-foreground' },
+    'on-trip':{ label: 'On Trip',  className: 'text-primary' },
+};
+
+function getInitials(name: string): string {
+    return name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase();
+}
+
+interface DriverCardProps {
+    driver: DriverCardData;
+    className?: string;
+    onClick?: (driver: DriverCardData) => void;
+}
+
+export function DriverCard({ driver, className, onClick }: DriverCardProps) {
+    const statusConf = driver.status ? STATUS_LABELS[driver.status] : null;
+    const content = (
+        <Card className={cn('transition-shadow hover:shadow-md cursor-pointer', className)} onClick={() => onClick?.(driver)}>
+            <CardContent className="p-4">
+                <div className="flex items-center gap-3">
+                    <Avatar className="size-10 shrink-0">
+                        {driver.avatar && <AvatarImage src={driver.avatar} alt={driver.name} />}
+                        <AvatarFallback className="text-xs font-medium">{getInitials(driver.name)}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                            <p className="font-medium text-mono text-sm truncate">{driver.name}</p>
+                            {statusConf && (
+                                <span className={cn('text-xs font-medium shrink-0', statusConf.className)}>
+                                    {statusConf.label}
+                                </span>
+                            )}
+                        </div>
+                        {driver.licenseNumber && (
+                            <p className="text-xs text-muted-foreground mt-0.5">Lic: {driver.licenseNumber}</p>
+                        )}
+                        {driver.vehicleRegistration && (
+                            <p className="text-xs text-muted-foreground">Vehicle: {driver.vehicleRegistration}</p>
+                        )}
+                        {driver.phone && (
+                            <p className="text-xs text-muted-foreground">{driver.phone}</p>
+                        )}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+    if (driver.href) return <a href={driver.href} className="block no-underline">{content}</a>;
+    return content;
+}

package/src/elements/ForgotPasswordForm.tsx

@@ -0,0 +1,64 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+
+export interface ForgotPasswordFormData {
+    email: string;
+}
+
+export interface ForgotPasswordFormErrors {
+    email?: string;
+}
+
+interface Props {
+    data: ForgotPasswordFormData;
+    errors: ForgotPasswordFormErrors;
+    processing?: boolean;
+    status?: string;
+    loginUrl?: string;
+    onChange: (field: keyof ForgotPasswordFormData, value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function ForgotPasswordForm({
+    data,
+    errors,
+    processing = false,
+    status,
+    loginUrl = '/login',
+    onChange,
+    onSubmit,
+}: Props) {
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+                Enter your email and we'll send you a password reset link.
+            </p>
+
+            {status && <p className="text-sm text-green-600">{status}</p>}
+
+            <FormField label="Email" htmlFor="forgot-email">
+                <Input
+                    id="forgot-email"
+                    type="email"
+                    value={data.email}
+                    onChange={e => onChange('email', e.target.value)}
+                    placeholder="you@example.com"
+                    error={errors.email}
+                    required
+                    autoFocus
+                    autoComplete="email"
+                />
+            </FormField>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Send reset link
+            </Button>
+
+            <p className="text-center text-sm text-muted-foreground">
+                <a href={loginUrl} className="text-primary hover:underline">← Back to sign in</a>
+            </p>
+        </form>
+    );
+}

package/src/elements/IncidentCard.tsx

@@ -0,0 +1,67 @@
+import { cn } from '../lib/utils';
+import { Card, CardContent } from '../components/ui/card';
+import { AlertTriangle, AlertCircle, Info } from 'lucide-react';
+
+export type IncidentSeverity = 'critical' | 'high' | 'medium' | 'low' | 'info';
+
+export interface IncidentCardData {
+    id: string;
+    title: string;
+    description?: string;
+    severity: IncidentSeverity;
+    vehicle?: string;
+    driver?: string;
+    location?: string;
+    timestamp?: string;
+    resolved?: boolean;
+    href?: string;
+}
+
+const SEVERITY_CONFIG: Record<IncidentSeverity, { icon: typeof AlertTriangle; iconClass: string; borderClass: string; bgClass: string }> = {
+    critical: { icon: AlertTriangle, iconClass: 'text-destructive', borderClass: 'border-destructive/30', bgClass: 'bg-destructive/5' },
+    high:     { icon: AlertCircle,   iconClass: 'text-orange-500',  borderClass: 'border-orange-300',    bgClass: 'bg-orange-50' },
+    medium:   { icon: AlertTriangle, iconClass: 'text-yellow-500',  borderClass: 'border-yellow-300',    bgClass: 'bg-yellow-50' },
+    low:      { icon: Info,           iconClass: 'text-blue-500',    borderClass: 'border-blue-200',      bgClass: 'bg-blue-50' },
+    info:     { icon: Info,           iconClass: 'text-muted-foreground', borderClass: 'border-border',  bgClass: 'bg-muted/50' },
+};
+
+interface IncidentCardProps {
+    incident: IncidentCardData;
+    className?: string;
+    onClick?: (incident: IncidentCardData) => void;
+}
+
+export function IncidentCard({ incident, className, onClick }: IncidentCardProps) {
+    const conf = SEVERITY_CONFIG[incident.severity];
+    const Icon = conf.icon;
+    const content = (
+        <Card className={cn('transition-shadow hover:shadow-md cursor-pointer border', conf.borderClass, incident.resolved && 'opacity-60', className)} onClick={() => onClick?.(incident)}>
+            <CardContent className={cn('p-4', conf.bgClass)}>
+                <div className="flex items-start gap-3">
+                    <Icon className={cn('size-4 shrink-0 mt-0.5', conf.iconClass)} />
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-start justify-between gap-2">
+                            <p className="font-medium text-mono text-sm">{incident.title}</p>
+                            {incident.resolved && (
+                                <span className="text-xs text-success font-medium shrink-0">Resolved</span>
+                            )}
+                        </div>
+                        {incident.description && (
+                            <p className="text-xs text-muted-foreground mt-1">{incident.description}</p>
+                        )}
+                        <div className="flex flex-wrap gap-x-3 gap-y-0.5 mt-2">
+                            {incident.vehicle && <span className="text-xs text-muted-foreground">Vehicle: {incident.vehicle}</span>}
+                            {incident.driver && <span className="text-xs text-muted-foreground">Driver: {incident.driver}</span>}
+                            {incident.location && <span className="text-xs text-muted-foreground">{incident.location}</span>}
+                        </div>
+                        {incident.timestamp && (
+                            <p className="text-xs text-muted-foreground mt-1">{incident.timestamp}</p>
+                        )}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+    if (incident.href) return <a href={incident.href} className="block no-underline">{content}</a>;
+    return content;
+}

package/src/elements/LoginForm.tsx

@@ -0,0 +1,100 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { Checkbox } from '../controls/Checkbox';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+import { PasswordInput } from '../controls/PasswordInput';
+
+export interface LoginFormData {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+
+export interface LoginFormErrors {
+    email?: string;
+    password?: string;
+}
+
+interface Props {
+    data: LoginFormData;
+    errors: LoginFormErrors;
+    processing?: boolean;
+    status?: string;
+    canResetPassword?: boolean;
+    canRegister?: boolean;
+    forgotPasswordUrl?: string;
+    registerUrl?: string;
+    onChange: (field: keyof LoginFormData, value: string | boolean) => void;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function LoginForm({
+    data,
+    errors,
+    processing = false,
+    status,
+    canResetPassword = true,
+    canRegister = true,
+    forgotPasswordUrl = '/forgot-password',
+    registerUrl = '/register',
+    onChange,
+    onSubmit,
+}: Props) {
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            {status && <p className="text-sm text-green-600">{status}</p>}
+
+            <FormField label="Email" htmlFor="login-email">
+                <Input
+                    id="login-email"
+                    type="email"
+                    value={data.email}
+                    onChange={e => onChange('email', e.target.value)}
+                    placeholder="you@example.com"
+                    error={errors.email}
+                    required
+                    autoFocus
+                    autoComplete="email"
+                />
+            </FormField>
+
+            <FormField label="Password" htmlFor="login-password">
+                <PasswordInput
+                    id="login-password"
+                    value={data.password}
+                    onChange={e => onChange('password', e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password}
+                    required
+                    autoComplete="current-password"
+                />
+            </FormField>
+
+            <div className="flex items-center justify-between pt-1">
+                <Checkbox
+                    id="login-remember"
+                    label="Remember me"
+                    checked={data.remember}
+                    onChange={(e: { target: HTMLInputElement }) => onChange('remember', e.target.checked)}
+                />
+                {canResetPassword && (
+                    <a href={forgotPasswordUrl} className="text-sm text-primary hover:underline">
+                        Forgot password?
+                    </a>
+                )}
+            </div>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Sign in
+            </Button>
+
+            {canRegister && (
+                <p className="text-center text-sm text-muted-foreground">
+                    No account?{' '}
+                    <a href={registerUrl} className="text-primary hover:underline">Register</a>
+                </p>
+            )}
+        </form>
+    );
+}

package/src/elements/OtpForm.tsx

@@ -0,0 +1,71 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+
+export interface OtpFormErrors {
+    code?: string;
+}
+
+interface Props {
+    code: string;
+    errors: OtpFormErrors;
+    processing?: boolean;
+    status?: string;
+    recovery?: boolean;
+    onCodeChange: (value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+    onToggleRecovery?: () => void;
+}
+
+export function OtpForm({
+    code,
+    errors,
+    processing = false,
+    status,
+    recovery = false,
+    onCodeChange,
+    onSubmit,
+    onToggleRecovery,
+}: Props) {
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            {status && <p className="text-sm text-green-600">{status}</p>}
+
+            <p className="text-sm text-muted-foreground">
+                {recovery
+                    ? 'Enter one of your emergency recovery codes to regain access.'
+                    : 'Enter the 6-digit verification code sent to your phone.'}
+            </p>
+
+            <FormField label={recovery ? 'Recovery code' : 'Verification code'} htmlFor="otp-code">
+                <Input
+                    id="otp-code"
+                    type="text"
+                    inputMode={recovery ? 'text' : 'numeric'}
+                    value={code}
+                    onChange={e => onCodeChange(e.target.value)}
+                    placeholder={recovery ? 'xxxx-xxxx-xxxx' : '000000'}
+                    maxLength={recovery ? undefined : 6}
+                    error={errors.code}
+                    autoFocus
+                    autoComplete="one-time-code"
+                    required
+                    className="text-center tracking-[0.4em] placeholder:tracking-normal"
+                />
+            </FormField>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Verify
+            </Button>
+
+            {onToggleRecovery && (
+                <p className="text-center text-sm text-muted-foreground">
+                    <button type="button" onClick={onToggleRecovery} className="text-primary hover:underline">
+                        {recovery ? 'Use verification code instead' : 'Use a recovery code'}
+                    </button>
+                </p>
+            )}
+        </form>
+    );
+}

package/src/elements/RegisterForm.tsx

@@ -0,0 +1,150 @@
+import type { FormEvent, ReactNode } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+import { PasswordInput } from '../controls/PasswordInput';
+import { Select } from '../controls/Select';
+
+export interface PhoneCountry {
+    id: number;
+    iso_code: string;
+    name: string;
+    country_code: string;
+}
+
+export interface RegisterFormData {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+    phone?: string;
+    mobile_country_iso?: string;
+}
+
+export interface RegisterFormErrors {
+    name?: string;
+    email?: string;
+    password?: string;
+    password_confirmation?: string;
+    phone?: string;
+}
+
+interface Props {
+    data: RegisterFormData;
+    errors: RegisterFormErrors;
+    processing?: boolean;
+    loginUrl?: string;
+    phoneCountries?: PhoneCountry[];
+    banner?: ReactNode;
+    onChange: (field: keyof RegisterFormData, value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function RegisterForm({
+    data,
+    errors,
+    processing = false,
+    loginUrl = '/login',
+    phoneCountries,
+    banner,
+    onChange,
+    onSubmit,
+}: Props) {
+    const hasPhone = phoneCountries && phoneCountries.length > 0;
+
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            {banner}
+
+            <FormField label="Full name" htmlFor="reg-name">
+                <Input
+                    id="reg-name"
+                    type="text"
+                    value={data.name}
+                    onChange={e => onChange('name', e.target.value)}
+                    placeholder="Your full name"
+                    error={errors.name}
+                    required
+                    autoFocus
+                    autoComplete="name"
+                />
+            </FormField>
+
+            <FormField label="Email" htmlFor="reg-email">
+                <Input
+                    id="reg-email"
+                    type="email"
+                    value={data.email}
+                    onChange={e => onChange('email', e.target.value)}
+                    placeholder="you@example.com"
+                    error={errors.email}
+                    required
+                    autoComplete="email"
+                />
+            </FormField>
+
+            {hasPhone && (
+                <FormField label="Phone number" htmlFor="reg-phone" hint="Used for SMS verification and 2FA.">
+                    <div className="flex gap-2">
+                        <Select
+                            value={data.mobile_country_iso ?? phoneCountries[0]?.iso_code}
+                            onChange={e => onChange('mobile_country_iso', e.target.value)}
+                            aria-label="Country dial code"
+                            className="w-28 flex-none"
+                        >
+                            {phoneCountries.map(c => (
+                                <option key={c.id} value={c.iso_code}>
+                                    {c.iso_code} {c.country_code}
+                                </option>
+                            ))}
+                        </Select>
+                        <Input
+                            id="reg-phone"
+                            type="tel"
+                            value={data.phone ?? ''}
+                            onChange={e => onChange('phone', e.target.value)}
+                            placeholder="300 1234567"
+                            error={errors.phone}
+                            required
+                            autoComplete="tel"
+                            className="flex-1"
+                        />
+                    </div>
+                </FormField>
+            )}
+
+            <FormField label="Password" htmlFor="reg-password">
+                <PasswordInput
+                    id="reg-password"
+                    value={data.password}
+                    onChange={e => onChange('password', e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password}
+                    required
+                    autoComplete="new-password"
+                />
+            </FormField>
+
+            <FormField label="Confirm password" htmlFor="reg-confirm">
+                <PasswordInput
+                    id="reg-confirm"
+                    value={data.password_confirmation}
+                    onChange={e => onChange('password_confirmation', e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password_confirmation}
+                    required
+                    autoComplete="new-password"
+                />
+            </FormField>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Create account
+            </Button>
+
+            <p className="text-center text-sm text-muted-foreground">
+                Already have an account?{' '}
+                <a href={loginUrl} className="text-primary hover:underline">Sign in</a>
+            </p>
+        </form>
+    );
+}

package/src/elements/ResetPasswordForm.tsx

@@ -0,0 +1,72 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+import { PasswordInput } from '../controls/PasswordInput';
+
+export interface ResetPasswordFormData {
+    email: string;
+    password: string;
+    password_confirmation: string;
+}
+
+export interface ResetPasswordFormErrors {
+    email?: string;
+    password?: string;
+    password_confirmation?: string;
+}
+
+interface Props {
+    data: ResetPasswordFormData;
+    errors: ResetPasswordFormErrors;
+    processing?: boolean;
+    onChange: (field: keyof ResetPasswordFormData, value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function ResetPasswordForm({ data, errors, processing = false, onChange, onSubmit }: Props) {
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            <FormField label="Email" htmlFor="reset-email">
+                <Input
+                    id="reset-email"
+                    type="email"
+                    value={data.email}
+                    readOnly
+                    tabIndex={-1}
+                    error={errors.email}
+                    className="bg-muted text-muted-foreground"
+                />
+            </FormField>
+
+            <FormField label="New password" htmlFor="reset-password">
+                <PasswordInput
+                    id="reset-password"
+                    value={data.password}
+                    onChange={e => onChange('password', e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password}
+                    required
+                    autoFocus
+                    autoComplete="new-password"
+                />
+            </FormField>
+
+            <FormField label="Confirm new password" htmlFor="reset-confirm">
+                <PasswordInput
+                    id="reset-confirm"
+                    value={data.password_confirmation}
+                    onChange={e => onChange('password_confirmation', e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password_confirmation}
+                    required
+                    autoComplete="new-password"
+                />
+            </FormField>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Reset password
+            </Button>
+        </form>
+    );
+}