@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/team/team-page-client.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Users, Calendar as CalendarIcon, Building2, Search, Filter } from 'lucide-react';
+import { TeamHeaderStats } from './team-header-stats';
+import { EngineerCard } from './engineer-card';
+import { ScheduleCalendar } from './schedule-calendar';
+import { DepartmentCoverage } from './department-coverage';
+import { EditEngineerDialog } from './edit-engineer-dialog';
+import { EngineerDetailsDialog } from './engineer-details-dialog';
+import { EngineerTeamMember } from '@/lib/actions/engineers';
+import { useRouter } from 'next/navigation';
+
+interface TeamPageClientProps {
+  initialMembers: EngineerTeamMember[];
+  stats: {
+    totalEngineers: number;
+    onDutyToday: number;
+    onCallToday: number;
+    inMaintenanceToday: number;
+    offDutyToday: number;
+    totalActiveWorkOrders: number;
+  };
+  coverage: {
+    id: string;
+    name: string;
+    code: string;
+    deviceCount: number;
+    primaryEngineer: any;
+  }[];
+}
+
+export function TeamPageClient({ initialMembers, stats, coverage }: TeamPageClientProps) {
+  const router = useRouter();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [selectedEngineer, setSelectedEngineer] = useState<EngineerTeamMember | null>(null);
+  const [viewEngineer, setViewEngineer] = useState<EngineerTeamMember | null>(null);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+  const filteredMembers = initialMembers.filter((m) => {
+    const matchesSearch =
+      m.fullName.toLowerCase().includes(search.toLowerCase()) ||
+      m.jobTitle.toLowerCase().includes(search.toLowerCase()) ||
+      (m.specialization && m.specialization.toLowerCase().includes(search.toLowerCase())) ||
+      (m.extension && m.extension.includes(search));
+
+    const matchesStatus =
+      statusFilter === 'all' ||
+      m.dutyStatus === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  const handleEdit = (engineer: EngineerTeamMember) => {
+    setSelectedEngineer(engineer);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleCardClick = (engineer: EngineerTeamMember) => {
+    setViewEngineer(engineer);
+    setIsDetailsOpen(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Top Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Biomedical Engineering Team & Roster</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Clinical engineering staff directory, real-time hospital duty status, and department coverage roster.
+          </p>
+        </div>
+      </div>
+
+      {/* Top Stats Cards */}
+      <TeamHeaderStats stats={stats} />
+
+      {/* Main Tabs */}
+      <Tabs defaultValue="directory" className="space-y-5">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <TabsList className="grid grid-cols-3 w-full sm:w-auto h-9">
+            <TabsTrigger value="directory" className="text-xs gap-1.5 px-3">
+              <Users className="w-3.5 h-3.5" />
+              Team Directory
+            </TabsTrigger>
+            <TabsTrigger value="schedule" className="text-xs gap-1.5 px-3">
+              <CalendarIcon className="w-3.5 h-3.5" />
+              Duty Schedule
+            </TabsTrigger>
+            <TabsTrigger value="coverage" className="text-xs gap-1.5 px-3">
+              <Building2 className="w-3.5 h-3.5" />
+              Dept. Coverage
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* Tab 1: Directory */}
+        <TabsContent value="directory" className="space-y-4 m-0">
+          {/* Filters Bar */}
+          <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3">
+            <div className="relative w-full md:max-w-md">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search engineer by name, title, specialization, or extension..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-9 h-9 text-xs"
+              />
+            </div>
+
+            <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0 shrink-0">
+              <Button
+                variant={statusFilter === 'all' ? 'secondary' : 'ghost'}
+                size="sm"
+                onClick={() => setStatusFilter('all')}
+                className="text-xs h-8"
+              >
+                All ({initialMembers.length})
+              </Button>
+              <Button
+                variant={statusFilter === 'on_duty' ? 'secondary' : 'ghost'}
+                size="sm"
+                onClick={() => setStatusFilter('on_duty')}
+                className="text-xs h-8 text-emerald-700 dark:text-emerald-400 gap-1.5"
+              >
+                <span className="w-2 h-2 rounded-full bg-emerald-500" />
+                On Duty ({stats.onDutyToday})
+              </Button>
+              <Button
+                variant={statusFilter === 'on_call' ? 'secondary' : 'ghost'}
+                size="sm"
+                onClick={() => setStatusFilter('on_call')}
+                className="text-xs h-8 text-amber-700 dark:text-amber-400 gap-1.5"
+              >
+                <span className="w-2 h-2 rounded-full bg-amber-500" />
+                On Call ({stats.onCallToday})
+              </Button>
+              <Button
+                variant={statusFilter === 'off_duty' ? 'secondary' : 'ghost'}
+                size="sm"
+                onClick={() => setStatusFilter('off_duty')}
+                className="text-xs h-8 text-muted-foreground gap-1.5"
+              >
+                <span className="w-2 h-2 rounded-full bg-slate-400" />
+                Off Duty ({stats.offDutyToday})
+              </Button>
+            </div>
+          </div>
+
+          {/* Engineers Cards Grid */}
+          {filteredMembers.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {filteredMembers.map((member) => (
+                <EngineerCard
+                  key={member.id}
+                  engineer={member}
+                  onClick={handleCardClick}
+                  onEdit={handleEdit}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12 border border-dashed rounded-xl space-y-2 bg-muted/10">
+              <Users className="w-10 h-10 text-muted-foreground mx-auto" />
+              <p className="font-semibold text-sm">No engineers match your filter</p>
+              <p className="text-xs text-muted-foreground">Try clearing your search query or status filter.</p>
+              <Button variant="outline" size="sm" onClick={() => { setSearch(''); setStatusFilter('all'); }}>
+                Reset Filters
+              </Button>
+            </div>
+          )}
+        </TabsContent>
+
+        {/* Tab 2: Duty Calendar */}
+        <TabsContent value="schedule" className="space-y-4 m-0">
+          <ScheduleCalendar engineers={initialMembers} />
+        </TabsContent>
+
+        {/* Tab 3: Department Coverage */}
+        <TabsContent value="coverage" className="space-y-4 m-0">
+          <DepartmentCoverage coverage={coverage} />
+        </TabsContent>
+      </Tabs>
+
+      {/* Full Engineer Details Dialog */}
+      {viewEngineer && (
+        <EngineerDetailsDialog
+          engineer={viewEngineer}
+          open={isDetailsOpen}
+          onOpenChange={setIsDetailsOpen}
+          onEdit={handleEdit}
+          onStatusUpdated={() => router.refresh()}
+        />
+      )}
+
+      {/* Edit Engineer Dialog */}
+      {selectedEngineer && (
+        <EditEngineerDialog
+          key={selectedEngineer.id}
+          engineer={selectedEngineer}
+          open={isEditDialogOpen}
+          onOpenChange={setIsEditDialogOpen}
+          onSuccess={() => router.refresh()}
+        />
+      )}
+    </div>
+  );
+}
+

package/src/components/theme/theme-selector-card.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import { useTheme, type Theme } from '@/components/providers/theme-provider'
+import { Sun, Moon, Monitor } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export function ThemeSelectorCard() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const options: { value: Theme; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
+    { value: 'light', label: 'Light', icon: Sun },
+    { value: 'dark', label: 'Dark', icon: Moon },
+    { value: 'system', label: 'System', icon: Monitor },
+  ]
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground px-1">
+        Appearance & Theme
+      </h3>
+      <div className="bg-card rounded-xl border p-3 sm:p-4 shadow-sm">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex flex-col">
+            <span className="text-sm font-medium leading-snug">Interface Theme</span>
+            <span className="text-xs text-muted-foreground">
+              Select your preferred visual style or sync with device settings
+            </span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 mt-3.5">
+          {options.map((opt) => {
+            const Icon = opt.icon
+            const isSelected = mounted && theme === opt.value
+
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => setTheme(opt.value)}
+                className={cn(
+                  "flex items-center justify-center gap-2 p-2.5 rounded-lg border text-xs font-medium transition-all min-h-[44px]",
+                  isSelected
+                    ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                    : "bg-muted/40 hover:bg-muted text-muted-foreground hover:text-foreground border-transparent"
+                )}
+              >
+                <Icon className={cn("w-4 h-4", isSelected ? "text-primary-foreground" : "")} />
+                <span>{opt.label}</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/theme/theme-toggle.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import * as React from 'react'
+import { useTheme } from '@/components/providers/theme-provider'
+import { Moon, Sun, Monitor, Check } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="h-9 w-9">
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')} className="cursor-pointer justify-between">
+          <div className="flex items-center">
+            <Sun className="mr-2 h-4 w-4" />
+            <span>Light</span>
+          </div>
+          {theme === 'light' && <Check className="h-4 w-4 text-primary ml-2" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')} className="cursor-pointer justify-between">
+          <div className="flex items-center">
+            <Moon className="mr-2 h-4 w-4" />
+            <span>Dark</span>
+          </div>
+          {theme === 'dark' && <Check className="h-4 w-4 text-primary ml-2" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')} className="cursor-pointer justify-between">
+          <div className="flex items-center">
+            <Monitor className="mr-2 h-4 w-4" />
+            <span>System</span>
+          </div>
+          {theme === 'system' && <Check className="h-4 w-4 text-primary ml-2" />}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/tickets/staff-status-label.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { getStaffStatus, getStaffStatusStyle } from '@/lib/utils/staff-status';
+
+interface StaffStatusLabelProps {
+  statusCode: string;
+  showIcon?: boolean;
+  size?: 'sm' | 'default';
+}
+
+/**
+ * Staff-facing ticket status badge.
+ * Shows plain-language labels like "Being repaired" instead of "in_progress".
+ * Used in staff dashboards, ticket lists, and ticket detail pages.
+ */
+export function StaffStatusLabel({ statusCode, showIcon = true, size = 'default' }: StaffStatusLabelProps) {
+  const info = getStaffStatus(statusCode);
+  const style = getStaffStatusStyle(statusCode);
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'font-medium whitespace-nowrap',
+        style.bg,
+        style.text,
+        style.border,
+        size === 'sm' && 'text-xs px-1.5 py-0',
+      )}
+    >
+      {showIcon && <span className="mr-1">{info.icon}</span>}
+      {info.label}
+    </Badge>
+  );
+}
+
+/**
+ * Larger staff status display with description.
+ * Used on ticket detail pages for staff.
+ */
+export function StaffStatusBanner({ statusCode }: { statusCode: string }) {
+  const info = getStaffStatus(statusCode);
+  const style = getStaffStatusStyle(statusCode);
+
+  return (
+    <div className={cn('rounded-lg border px-4 py-3', style.bg, style.border)}>
+      <div className="flex items-center gap-2">
+        <span className="text-lg">{info.icon}</span>
+        <div>
+          <p className={cn('font-semibold text-sm', style.text)}>{info.label}</p>
+          {info.description && (
+            <p className="text-xs text-muted-foreground mt-0.5">{info.description}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/tickets/staff-ticket-card.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import { getStaffStatus, getStaffStatusStyle } from '@/lib/utils/staff-status';
+import { Monitor, User, MessageCircle } from 'lucide-react';
+
+export interface StaffTicketItem {
+  id: string;
+  ticketNumber: string;
+  title: string;
+  statusCode: string;
+  reportedAt?: Date | string | null;
+  updatedAt?: Date | string | null;
+  deviceName?: string | null;
+  deviceAssetNumber?: string | null;
+  assignedEngineerName?: string | null;
+}
+
+export function StaffTicketCard({ ticket }: { ticket: StaffTicketItem }) {
+  const status = getStaffStatus(ticket.statusCode);
+  const style = getStaffStatusStyle(ticket.statusCode);
+  const needsResponse = ticket.statusCode === 'waiting_requester';
+  const isResolved = ['resolved', 'closed'].includes(ticket.statusCode);
+
+  const updatedText = ticket.updatedAt
+    ? formatRelativeTime(new Date(ticket.updatedAt))
+    : ticket.reportedAt
+    ? formatRelativeTime(new Date(ticket.reportedAt))
+    : '';
+
+  return (
+    <Link
+      href={`/tickets/${ticket.id}`}
+      className={cn(
+        'block bg-card rounded-xl border shadow-sm overflow-hidden transition-all hover:shadow-md',
+        needsResponse && 'border-amber-300 dark:border-amber-800',
+        isResolved && 'opacity-75',
+        !needsResponse && !isResolved && 'border-border hover:border-primary/50',
+      )}
+    >
+      {/* Response requested banner */}
+      {needsResponse && (
+        <div className="bg-amber-50 dark:bg-amber-950/30 px-4 py-1.5 text-xs font-semibold text-amber-700 dark:text-amber-300 flex items-center gap-1.5 border-b border-amber-200 dark:border-amber-800">
+          <MessageCircle className="w-3.5 h-3.5" />
+          Response requested — tap to reply
+        </div>
+      )}
+
+      <div className="p-4">
+        {/* Title and status */}
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <p className="font-semibold text-sm line-clamp-1">{ticket.title}</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {ticket.ticketNumber}
+              {ticket.deviceName && (
+                <> · {ticket.deviceName}</>
+              )}
+            </p>
+          </div>
+          <span
+            className={cn(
+              'text-xs px-2 py-0.5 rounded-full font-medium whitespace-nowrap border',
+              style.bg,
+              style.text,
+              style.border
+            )}
+          >
+            {status.icon} {status.label}
+          </span>
+        </div>
+
+        {/* Engineer and time */}
+        <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
+          {ticket.assignedEngineerName ? (
+            <span className="flex items-center gap-1">
+              <User className="w-3 h-3" />
+              {ticket.assignedEngineerName}
+            </span>
+          ) : (
+            <span className="flex items-center gap-1 text-muted-foreground/70">
+              <User className="w-3 h-3" />
+              Awaiting assignment
+            </span>
+          )}
+          {updatedText && (
+            <span>Updated {updatedText}</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+/** Simple relative time formatter */
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}