@trackany-device/components 1.1.0 → 1.2.0

package/src/pages/tenant/InvitePage.tsx

@@ -0,0 +1,153 @@
+import {
+    Avatar, AvatarFallback,
+    Badge, Button,
+    Card, CardContent, CardFooter, CardHeader, CardTitle,
+    Input, Label, Select,
+    Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { CheckCircle2, Copy, Gift, Link2, Mail, Plus, UserPlus, XCircle } from 'lucide-react';
+import { useState } from 'react';
+
+export type InviteStatus = 'Accepted' | 'Pending' | 'Declined';
+
+export interface SentInvite {
+    name: string;
+    email: string;
+    status: InviteStatus;
+    activity: string;
+    initials: string;
+}
+
+const statusStyle: Record<InviteStatus, string> = {
+    Accepted: 'text-green-600 border-green-200 bg-green-50',
+    Pending:  'text-amber-600 border-amber-200 bg-amber-50',
+    Declined: 'text-red-600 border-red-200 bg-red-50',
+};
+
+export function InvitePeoplePage({ layout }: { layout: LayoutName }) {
+    const [email, setEmail] = useState('');
+    const [sent, setSent] = useState(false);
+    return (
+        <LayoutResolved layout={layout} title="Invite" currentUrl="/invite">
+            <div className="p-6 max-w-xl mx-auto space-y-6">
+                <h1 className="text-xl font-semibold">Invite a team member</h1>
+
+                {sent && (
+                    <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-2.5 text-sm text-green-700">
+                        <CheckCircle2 className="h-4 w-4 shrink-0" />Invitation sent to <strong>{email}</strong>
+                    </div>
+                )}
+
+                <Card>
+                    <CardHeader><CardTitle>Send an invitation</CardTitle></CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="space-y-1.5">
+                            <Label htmlFor="inv-email">Email address</Label>
+                            <Input id="inv-email" type="email" placeholder="colleague@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label htmlFor="inv-role">Role</Label>
+                            <Select id="inv-role" defaultValue="member">
+                                <option value="member">Member</option>
+                                <option value="operator">Operator</option>
+                                <option value="supervisor">Supervisor</option>
+                                <option value="admin">Admin</option>
+                            </Select>
+                        </div>
+                        <Button variant="outline" size="sm" className="w-full border-dashed"><Plus className="h-3.5 w-3.5 mr-1.5" />Add another email</Button>
+                    </CardContent>
+                    <CardFooter className="justify-center">
+                        <Button onClick={() => { if (email) setSent(true); }}><UserPlus className="h-4 w-4 mr-1.5" />Send invitation</Button>
+                    </CardFooter>
+                </Card>
+
+                <Card>
+                    <CardHeader><CardTitle>Invite via link</CardTitle></CardHeader>
+                    <CardContent className="space-y-3">
+                        <p className="text-sm text-muted-foreground">Share this link — anyone with it can join your organisation as a Member.</p>
+                        <div className="flex gap-2">
+                            <Input value="https://tad.io/invite/track-any-device/abc123xyz" readOnly className="text-xs font-mono" />
+                            <Button variant="outline" size="icon"><Copy className="h-4 w-4" /></Button>
+                        </div>
+                        <Button variant="outline" size="sm" className="w-full"><Link2 className="h-3.5 w-3.5 mr-1.5" />Regenerate link</Button>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader><CardTitle>Referral rewards</CardTitle></CardHeader>
+                    <CardContent className="space-y-3">
+                        <div className="flex items-center gap-3 rounded-lg bg-primary/5 border border-primary/20 p-4">
+                            <Gift className="h-8 w-8 text-primary shrink-0" />
+                            <div>
+                                <p className="text-sm font-semibold">Earn 1 month free</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">For every team member who joins and activates, you get 1 month free.</p>
+                            </div>
+                        </div>
+                        <div className="grid grid-cols-3 gap-3 text-center">
+                            {[{ v: '5', l: 'Invites sent' }, { v: '3', l: 'Accepted' }, { v: '2', l: 'Months earned' }].map(({ v, l }) => (
+                                <div key={l} className="rounded-lg border border-border p-3">
+                                    <p className="text-xl font-bold text-primary">{v}</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">{l}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function SentInvitesPage({ layout, invites }: { layout: LayoutName; invites: SentInvite[] }) {
+    return (
+        <LayoutResolved layout={layout} title="Sent Invites" currentUrl="/invite/sent">
+            <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">Sent invites</h1>
+                    <Button size="sm"><Mail className="h-4 w-4 mr-1.5" />Invite members</Button>
+                </div>
+
+                <Card>
+                    <CardContent className="p-0">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Person</TableHead>
+                                    <TableHead>Status</TableHead>
+                                    <TableHead>Last activity</TableHead>
+                                    <TableHead />
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {invites.map((inv) => (
+                                    <TableRow key={inv.email}>
+                                        <TableCell>
+                                            <div className="flex items-center gap-2.5">
+                                                <Avatar className="h-7 w-7"><AvatarFallback className="text-xs">{inv.initials}</AvatarFallback></Avatar>
+                                                <div>
+                                                    <p className="text-sm font-medium">{inv.name}</p>
+                                                    <p className="text-xs text-muted-foreground">{inv.email}</p>
+                                                </div>
+                                            </div>
+                                        </TableCell>
+                                        <TableCell>
+                                            <Badge variant="outline" className={`text-xs ${statusStyle[inv.status]}`}>{inv.status}</Badge>
+                                        </TableCell>
+                                        <TableCell className="text-sm text-muted-foreground">{inv.activity}</TableCell>
+                                        <TableCell className="text-right">
+                                            {inv.status === 'Pending' && (
+                                                <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-destructive"><XCircle className="h-3.5 w-3.5 mr-1" />Revoke</Button>
+                                            )}
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}

package/src/pages/tenant/LiveStreamPage.tsx

@@ -0,0 +1,141 @@
+import { Badge, StatCard, Card, CardContent, CardHeader, CardTitle } from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { AlertTriangle, MonitorPlay, Users, Wifi } from 'lucide-react';
+import { DevicesMiniMap } from '../../components/devices/devices-mini-map';
+import type { MiniMapDevice, MiniMapIncident } from '../../components/devices/devices-mini-map';
+
+export type { MiniMapDevice, MiniMapIncident };
+
+export type LiveIncidentPriority = 'critical' | 'high' | 'medium';
+
+export interface LiveIncident {
+    id: string;
+    assignee: string;
+    rule: string;
+    priority: LiveIncidentPriority;
+}
+
+export interface LiveVehicle {
+    reg: string;
+    location: string;
+    speed: string;
+}
+
+export interface LiveStats {
+    online: number;
+    offline: number;
+    activeTrips: number;
+    activeIncidents: number;
+    lastSync: string;
+}
+
+const priorityStyle: Record<LiveIncidentPriority, string> = {
+    critical: 'text-red-600 border-red-200 bg-red-50 text-xs',
+    high:     'text-orange-600 border-orange-200 bg-orange-50 text-xs',
+    medium:   'text-amber-600 border-amber-200 bg-amber-50 text-xs',
+};
+
+export function LiveStreamPage({
+    layout,
+    stats,
+    devices = [],
+    mapIncidents = [],
+}: {
+    layout: LayoutName;
+    stats: LiveStats;
+    devices?: MiniMapDevice[];
+    mapIncidents?: MiniMapIncident[];
+}) {
+    return (
+        <LayoutResolved layout={layout} title="Live Monitoring" currentUrl="/map">
+            <div className="relative flex h-[calc(100vh-3.5rem)] flex-col">
+                <div className="flex-1 relative">
+                    <DevicesMiniMap
+                        devices={devices}
+                        incidents={mapIncidents}
+                        height="100%"
+                        className="rounded-none border-0"
+                    />
+                </div>
+                <div className="flex items-center justify-between border-t border-border bg-background/95 px-4 py-2 text-xs text-muted-foreground backdrop-blur-sm">
+                    <div className="flex items-center gap-4">
+                        <span className="flex items-center gap-1.5"><Wifi className="h-3.5 w-3.5 text-green-500" />{stats.online} online</span>
+                        <span className="flex items-center gap-1.5"><Users className="h-3.5 w-3.5" />{stats.offline} offline</span>
+                        <span className="flex items-center gap-1.5"><MonitorPlay className="h-3.5 w-3.5 text-blue-500" />{stats.activeTrips} active trips</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Badge variant="destructive">{stats.activeIncidents} active incidents</Badge>
+                        <span>Last sync {stats.lastSync}</span>
+                    </div>
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function LiveStreamWithSidebarPage({
+    layout,
+    stats,
+    incidents,
+    vehicles,
+    devices = [],
+    mapIncidents = [],
+}: {
+    layout: LayoutName;
+    stats: Pick<LiveStats, 'online' | 'activeIncidents'>;
+    incidents: LiveIncident[];
+    vehicles: LiveVehicle[];
+    devices?: MiniMapDevice[];
+    mapIncidents?: MiniMapIncident[];
+}) {
+    return (
+        <LayoutResolved layout={layout} title="Live Monitoring" currentUrl="/map">
+            <div className="flex h-[calc(100vh-3.5rem)]">
+                <div className="flex-1 relative">
+                    <DevicesMiniMap
+                        devices={devices}
+                        incidents={mapIncidents}
+                        height="100%"
+                        className="rounded-none border-0"
+                    />
+                </div>
+                <div className="w-80 border-l border-border bg-background flex flex-col overflow-hidden">
+                    <div className="p-4 border-b border-border space-y-3">
+                        <div className="grid grid-cols-2 gap-2">
+                            <StatCard icon={Wifi}          label="Online"    value={String(stats.online)} />
+                            <StatCard icon={AlertTriangle} label="Incidents" value={String(stats.activeIncidents)} />
+                        </div>
+                    </div>
+                    <div className="flex-1 overflow-y-auto divide-y divide-border">
+                        <div className="px-4 py-2 bg-muted/30">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Active Incidents</p>
+                        </div>
+                        {incidents.map((inc) => (
+                            <div key={inc.id} className="p-3 hover:bg-muted/30 cursor-pointer">
+                                <div className="flex items-center justify-between mb-1">
+                                    <span className="text-xs font-mono text-muted-foreground">{inc.id}</span>
+                                    <Badge variant="outline" className={priorityStyle[inc.priority]}>{inc.priority}</Badge>
+                                </div>
+                                <p className="text-sm font-medium">{inc.assignee}</p>
+                                <p className="text-xs text-muted-foreground">{inc.rule}</p>
+                            </div>
+                        ))}
+                        <div className="px-4 py-2 bg-muted/30 mt-2">
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Online Vehicles</p>
+                        </div>
+                        {vehicles.map((v) => (
+                            <div key={v.reg} className="p-3 hover:bg-muted/30 cursor-pointer">
+                                <p className="text-sm font-mono font-medium">{v.reg}</p>
+                                <div className="flex items-center justify-between text-xs text-muted-foreground mt-0.5">
+                                    <span>{v.location}</span>
+                                    <span>{v.speed}</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}