@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/dashboard/action-buttons.tsx

@@ -0,0 +1,93 @@
+import Link from "next/link";
+import { QrCode, PlusCircle, Inbox, Users, MonitorSmartphone, Monitor, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface ActionButtonsProps {
+  role: string;
+  triageCount?: number;
+}
+
+export function ActionButtons({ role, triageCount = 0 }: ActionButtonsProps) {
+  const normalizedRole = (role || '').toUpperCase();
+  const isStaff = normalizedRole === 'STAFF' || normalizedRole === 'DEPT_MGR';
+  const isBiomed = normalizedRole.startsWith('BIOMED') || normalizedRole === 'BME';
+  const isAdmin = normalizedRole.includes('ADMIN');
+
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+      <Button asChild size="lg" className="w-full sm:w-auto min-h-[44px]">
+        <Link href="/devices/scan">
+          <QrCode className="mr-2 h-5 w-5" />
+          Scan Device
+        </Link>
+      </Button>
+
+      {isStaff && (
+        <Button asChild variant="secondary" size="lg" className="w-full sm:w-auto min-h-[44px]">
+          <Link href="/tickets/new">
+            <PlusCircle className="mr-2 h-5 w-5" />
+            Report a Problem
+          </Link>
+        </Button>
+      )}
+
+      {isBiomed && (
+        <>
+          <Button asChild variant="secondary" size="lg" className="w-full sm:w-auto min-h-[44px] relative">
+            <Link href="/tickets/triage">
+              <Inbox className="mr-2 h-5 w-5" />
+              Triage Queue
+              {triageCount > 0 && (
+                <Badge variant="destructive" className="ml-2 absolute -top-2 -right-2">
+                  {triageCount}
+                </Badge>
+              )}
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/tickets">
+              <Inbox className="mr-2 h-5 w-5" />
+              Helpdesk Tickets
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/devices">
+              <Monitor className="mr-2 h-5 w-5" />
+              Devices
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/departments">
+              <Building2 className="mr-2 h-5 w-5" />
+              Departments
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/team">
+              <Users className="mr-2 h-5 w-5" />
+              Engineering Team
+            </Link>
+          </Button>
+        </>
+      )}
+
+      {isAdmin && (
+        <>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/admin/users">
+              <Users className="mr-2 h-5 w-5" />
+              Manage Users
+            </Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto min-h-[44px]">
+            <Link href="/admin/devices">
+              <MonitorSmartphone className="mr-2 h-5 w-5" />
+              Manage Devices
+            </Link>
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/admin-alerts.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { ShieldAlert, Users, Building, UserPlus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface AdminAlertsData {
+  usersWithoutRoles: number;
+  pendingInvitations: number;
+  departmentsWithoutManager: number;
+}
+
+interface AdminAlertsProps {
+  alerts: AdminAlertsData;
+}
+
+export function AdminAlerts({ alerts }: AdminAlertsProps) {
+  const hasAlerts = alerts.usersWithoutRoles > 0 || alerts.pendingInvitations > 0 || alerts.departmentsWithoutManager > 0;
+
+  if (!hasAlerts) {
+    return null;
+  }
+
+  return (
+    <Card className="border-red-200">
+      <CardHeader className="pb-3 bg-red-50/50 rounded-t-xl border-b border-red-100">
+        <CardTitle className="text-lg flex items-center text-red-800">
+          <ShieldAlert className="w-5 h-5 mr-2 text-red-500" />
+          System Administration Alerts
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-4 space-y-3">
+        {alerts.usersWithoutRoles > 0 && (
+          <div className="flex items-center justify-between p-3 border rounded-lg bg-card min-h-[44px]">
+            <div className="flex items-center gap-3">
+              <div className="bg-red-100 dark:bg-red-950 p-2 rounded-full">
+                <Users className="w-4 h-4 text-red-700 dark:text-red-400" />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-red-900 dark:text-red-300">{alerts.usersWithoutRoles} Users Without Roles</span>
+                <span className="text-xs text-red-700/80 dark:text-red-400/80">Users cannot access the system until roles are assigned.</span>
+              </div>
+            </div>
+            <Button asChild size="sm" variant="outline" className="border-red-200 text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950">
+              <Link href="/admin/users?filter=no-role">Fix</Link>
+            </Button>
+          </div>
+        )}
+
+        {alerts.pendingInvitations > 0 && (
+          <div className="flex items-center justify-between p-3 border rounded-lg bg-card min-h-[44px]">
+            <div className="flex items-center gap-3">
+              <div className="bg-yellow-100 dark:bg-yellow-950 p-2 rounded-full">
+                <UserPlus className="w-4 h-4 text-yellow-700 dark:text-yellow-400" />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-yellow-900 dark:text-yellow-300">{alerts.pendingInvitations} Pending Invitations</span>
+                <span className="text-xs text-yellow-700/80 dark:text-yellow-400/80">Users have not yet accepted their invitations.</span>
+              </div>
+            </div>
+            <Button asChild size="sm" variant="outline" className="border-yellow-200 text-yellow-700 hover:bg-yellow-50 dark:border-yellow-800 dark:text-yellow-400 dark:hover:bg-yellow-950">
+              <Link href="/admin/users?status=invited">Review</Link>
+            </Button>
+          </div>
+        )}
+
+        {alerts.departmentsWithoutManager > 0 && (
+          <div className="flex items-center justify-between p-3 border rounded-lg bg-card min-h-[44px]">
+            <div className="flex items-center gap-3">
+              <div className="bg-orange-100 dark:bg-orange-950 p-2 rounded-full">
+                <Building className="w-4 h-4 text-orange-700 dark:text-orange-400" />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-orange-900 dark:text-orange-300">{alerts.departmentsWithoutManager} Departments Missing Manager</span>
+                <span className="text-xs text-orange-700/80 dark:text-orange-400/80">Some departments lack an assigned manager.</span>
+              </div>
+            </div>
+            <Button asChild size="sm" variant="outline" className="border-orange-200 text-orange-700 hover:bg-orange-50 dark:border-orange-800 dark:text-orange-400 dark:hover:bg-orange-950">
+              <Link href="/admin/departments?filter=no-manager">Manage</Link>
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/dashboard/availability-alerts.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { AlertTriangle, MonitorSmartphone } from "lucide-react";
+import { StatusBadge } from "@/components/shared/status-badge";
+
+interface UnavailableDevice {
+  id: string;
+  name: string;
+  assetNumber: string;
+  currentStatusCode: string;
+  departmentName?: string | null;
+  locationDescription?: string | null;
+}
+
+interface AvailabilityAlertsProps {
+  devices: UnavailableDevice[];
+}
+
+export function AvailabilityAlerts({ devices }: AvailabilityAlertsProps) {
+  return (
+    <Card className="border-orange-200 dark:border-orange-900 shadow-sm">
+      <CardHeader className="pb-3 bg-orange-50/50 dark:bg-orange-950/30 rounded-t-xl border-b border-orange-100 dark:border-orange-900">
+        <CardTitle className="text-lg flex items-center text-orange-800 dark:text-orange-300">
+          <AlertTriangle className="w-5 h-5 mr-2 text-orange-500" />
+          Unavailable Devices
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-4">
+        {devices.length === 0 ? (
+          <div className="text-center py-6 text-sm text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30 rounded-md border border-green-100 dark:border-green-900 flex flex-col items-center gap-2">
+            <MonitorSmartphone className="h-8 w-8 text-green-500 opacity-80" />
+            <p>All department devices are operational.</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {devices.map((device) => (
+              <Link key={device.id} href={`/devices/${device.id}`} className="block">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-orange-100 dark:border-orange-900 bg-card rounded-lg hover:bg-orange-50/30 dark:hover:bg-orange-950/30 transition-colors gap-2 min-h-[44px]">
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-semibold">{device.assetNumber}</span>
+                      <StatusBadge status={device.currentStatusCode} />
+                    </div>
+                    <span className="text-sm font-medium">{device.name}</span>
+                    <span className="text-xs text-muted-foreground flex gap-1 items-center">
+                      {device.departmentName} 
+                      {device.locationDescription && (
+                        <>
+                          <span>•</span>
+                          <span>{device.locationDescription}</span>
+                        </>
+                      )}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/dashboard/maintenance-due-list.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { formatDistanceToNow, isPast, isToday } from "date-fns";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Wrench } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface MaintenanceTaskItem {
+  id: string;
+  taskNumber: string;
+  title: string;
+  statusCode: string;
+  dueDate: Date | null;
+  deviceName?: string | null;
+  maintenanceType: string;
+}
+
+interface MaintenanceDueListProps {
+  tasks: MaintenanceTaskItem[];
+  title: string;
+}
+
+export function MaintenanceDueList({ tasks, title }: MaintenanceDueListProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg flex items-center">
+          <Wrench className="w-5 h-5 mr-2" />
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {tasks.length === 0 ? (
+          <p className="text-muted-foreground text-sm py-4 text-center border rounded-md bg-muted/20">
+            No maintenance tasks due.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {tasks.map((task) => {
+              let dueLabel = "Scheduled";
+              let dueColor = "bg-blue-100 text-blue-800 border-blue-200";
+
+              if (task.dueDate) {
+                const date = new Date(task.dueDate);
+                if (isPast(date) && !isToday(date)) {
+                  dueLabel = "Overdue";
+                  dueColor = "bg-red-100 text-red-800 border-red-200 font-medium";
+                } else if (isToday(date)) {
+                  dueLabel = "Due Today";
+                  dueColor = "bg-orange-100 text-orange-800 border-orange-200 font-medium";
+                } else {
+                  dueLabel = "Due Soon";
+                  dueColor = "bg-yellow-100 text-yellow-800 border-yellow-200";
+                }
+              }
+
+              return (
+                <Link key={task.id} href={`/maintenance/tasks/${task.id}`} className="block">
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors gap-2 min-h-[44px]">
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-semibold text-primary">{task.taskNumber}</span>
+                        <Badge variant="outline" className={cn("text-xs font-normal", dueColor)}>
+                          {dueLabel}
+                        </Badge>
+                      </div>
+                      <span className="text-sm font-medium line-clamp-1">{task.title}</span>
+                      {task.deviceName && (
+                        <span className="text-xs text-muted-foreground line-clamp-1">{task.deviceName}</span>
+                      )}
+                    </div>
+                    {task.dueDate && (
+                      <div className="text-xs text-muted-foreground whitespace-nowrap self-start sm:self-auto">
+                        {formatDistanceToNow(new Date(task.dueDate), { addSuffix: true })}
+                      </div>
+                    )}
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/dashboard/round-widget.tsx

@@ -0,0 +1,110 @@
+import { isEngineerRoundEnabled, getTodayRound } from '@/lib/actions/engineer-rounds';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Route, CheckCircle2, Clock, ArrowRight, ShieldCheck } from 'lucide-react';
+import Link from 'next/link';
+
+export async function RoundWidget() {
+  const enabled = await isEngineerRoundEnabled();
+  if (!enabled) return null;
+
+  const result = await getTodayRound();
+  if (!result.success) return null;
+
+  // Off day
+  if (result.isOffDay) {
+    return (
+      <Card className="border-muted bg-muted/20">
+        <CardContent className="pt-4 pb-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="rounded-md bg-muted p-2 text-muted-foreground">
+              <Route className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Daily Engineering Round</p>
+              <p className="text-xs text-muted-foreground">Not a scheduled working day</p>
+            </div>
+          </div>
+          <Link href="/rounds/history">
+            <Button variant="ghost" size="sm" className="gap-1 text-xs">
+              History <ArrowRight className="h-3 w-3" />
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Can start round
+  if (result.canStart && !result.data) {
+    return (
+      <Card className="border-primary/20 bg-primary/5">
+        <CardContent className="pt-4 pb-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className="rounded-md bg-primary/10 p-2 text-primary">
+              <Route className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-sm font-semibold">Today&apos;s Engineering Round</p>
+              <p className="text-xs text-muted-foreground">
+                {result.departments?.length || 0} departments scheduled · {result.shiftType} shift
+              </p>
+            </div>
+          </div>
+          <Link href="/rounds">
+            <Button size="sm" className="gap-1.5 w-full sm:w-auto">
+              <ShieldCheck className="h-4 w-4" />
+              Start Round
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Round in progress or completed
+  if (result.data) {
+    const round = result.data as any;
+    const isCompleted = round.status === 'completed';
+    const total = round.totalDepartments || round.departmentVisits?.length || 0;
+    const completed = round.completedDepartments || 0;
+    const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+    return (
+      <Card className={isCompleted ? 'border-green-200 bg-green-50/50 dark:border-green-900/30 dark:bg-green-950/10' : 'border-blue-200 bg-blue-50/50 dark:border-blue-900/30 dark:bg-blue-950/10'}>
+        <CardContent className="pt-4 pb-4 space-y-2.5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2.5">
+              <div className={`rounded-md p-1.5 ${isCompleted ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400'}`}>
+                {isCompleted ? <CheckCircle2 className="h-4 w-4" /> : <Clock className="h-4 w-4" />}
+              </div>
+              <div>
+                <p className="text-sm font-semibold">
+                  {isCompleted ? 'Daily Round Completed' : 'Daily Round In Progress'}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {completed} / {total} departments visited ({progress}%)
+                  {round.totalIssuesReported > 0 ? ` · ${round.totalIssuesReported} issues reported` : ''}
+                </p>
+              </div>
+            </div>
+
+            <Link href="/rounds">
+              <Button variant={isCompleted ? 'outline' : 'default'} size="sm" className="gap-1 text-xs">
+                {isCompleted ? 'View Round' : 'Continue Round'}
+                <ArrowRight className="h-3 w-3" />
+              </Button>
+            </Link>
+          </div>
+
+          {!isCompleted && (
+            <Progress value={progress} className="h-1.5" />
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return null;
+}

package/src/components/dashboard/stat-card.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  icon: ReactNode;
+  href: string;
+  color?: string;
+  trend?: string;
+  className?: string;
+}
+
+export function StatCard({ title, value, icon, href, trend, className }: StatCardProps) {
+  return (
+    <Link href={href} className="block min-h-[44px]">
+      <Card className={cn("hover:bg-muted/50 transition-colors cursor-pointer h-full", className)}>
+        <CardContent className="p-6">
+          <div className="flex items-center justify-between space-x-2">
+            <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
+            {icon}
+          </div>
+          <div className="flex flex-col mt-4">
+            <div className="text-3xl font-bold">{value}</div>
+            {trend && (
+              <p className="text-xs text-muted-foreground mt-1">
+                {trend}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+

package/src/components/dashboard/ticket-list-compact.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Ticket } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TicketItem {
+  id: string;
+  ticketNumber: string;
+  title: string;
+  statusCode: string;
+  priorityCode: string;
+  reportedAt: Date;
+  deviceName?: string | null;
+}
+
+interface TicketListCompactProps {
+  tickets: TicketItem[];
+  title: string;
+  emptyMessage: string;
+}
+
+export function TicketListCompact({ tickets, title, emptyMessage }: TicketListCompactProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg flex items-center">
+          <Ticket className="w-5 h-5 mr-2" />
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {tickets.length === 0 ? (
+          <p className="text-muted-foreground text-sm py-4 text-center border rounded-md bg-muted/20">
+            {emptyMessage}
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {tickets.map((ticket) => {
+              // Determine priority badge color
+              let priorityColor = "bg-gray-100 text-gray-800";
+              let priorityLabel = ticket.priorityCode;
+              if (ticket.priorityCode === 'p1_critical') {
+                priorityColor = "bg-red-100 text-red-800 border-red-200";
+                priorityLabel = "Critical";
+              } else if (ticket.priorityCode === 'p2_high') {
+                priorityColor = "bg-orange-100 text-orange-800 border-orange-200";
+                priorityLabel = "High";
+              } else if (ticket.priorityCode === 'p3_normal') {
+                priorityColor = "bg-blue-100 text-blue-800 border-blue-200";
+                priorityLabel = "Normal";
+              } else if (ticket.priorityCode === 'p4_low') {
+                priorityColor = "bg-gray-100 text-gray-800 border-gray-200";
+                priorityLabel = "Low";
+              }
+
+              return (
+                <Link key={ticket.id} href={`/tickets/${ticket.id}`} className="block">
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors gap-2 min-h-[44px]">
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-semibold text-primary">{ticket.ticketNumber}</span>
+                        <Badge variant="outline" className={cn("text-xs font-normal", priorityColor)}>
+                          {priorityLabel}
+                        </Badge>
+                      </div>
+                      <span className="text-sm font-medium line-clamp-1">{ticket.title}</span>
+                      {ticket.deviceName && (
+                        <span className="text-xs text-muted-foreground line-clamp-1">{ticket.deviceName}</span>
+                      )}
+                    </div>
+                    <div className="text-xs text-muted-foreground whitespace-nowrap self-start sm:self-auto">
+                      {formatDistanceToNow(new Date(ticket.reportedAt), { addSuffix: true })}
+                    </div>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+