@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/team/schedule-calendar.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar as CalendarIcon, Clock, PhoneCall, Radio, ChevronLeft, ChevronRight, User } from 'lucide-react';
+import { EngineerTeamMember } from '@/lib/actions/engineers';
+
+interface ScheduleCalendarProps {
+  engineers: EngineerTeamMember[];
+}
+
+const DAYS_OF_WEEK = [
+  { key: 'Sun', label: 'Sunday', arabic: 'الأحد' },
+  { key: 'Mon', label: 'Monday', arabic: 'الاثنين' },
+  { key: 'Tue', label: 'Tuesday', arabic: 'الثلاثاء' },
+  { key: 'Wed', label: 'Wednesday', arabic: 'الأربعاء' },
+  { key: 'Thu', label: 'Thursday', arabic: 'الخميس' },
+  { key: 'Fri', label: 'Friday', arabic: 'الجمعة' },
+  { key: 'Sat', label: 'Saturday', arabic: 'السبت' },
+];
+
+export function ScheduleCalendar({ engineers }: ScheduleCalendarProps) {
+  // Current day of the week
+  const todayIndex = new Date().getDay(); // 0 is Sunday
+  const todayKey = DAYS_OF_WEEK[todayIndex].key;
+
+  const [selectedDay, setSelectedDay] = useState<string>(todayKey);
+
+  return (
+    <div className="space-y-6">
+      {/* Overview Banner */}
+      <Card className="bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border-primary/20">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <CardTitle className="text-lg flex items-center gap-2">
+                <CalendarIcon className="w-5 h-5 text-primary" />
+                Hospital Biomedical Duty Roster & On-Call Schedule
+              </CardTitle>
+              <CardDescription>
+                Regular clinical engineering coverage hours: Sunday to Thursday (08:00 AM – 04:00 PM). Emergency on-call is active 24/7.
+              </CardDescription>
+            </div>
+            <Badge variant="outline" className="bg-background/80 text-xs gap-1.5 py-1 px-2.5 font-medium">
+              <Clock className="w-3.5 h-3.5 text-primary" />
+              Standard Shift: 8 hrs
+            </Badge>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Day Selector Pills */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2.5">
+        {DAYS_OF_WEEK.map((day) => {
+          const isToday = day.key === todayKey;
+          const isSelected = day.key === selectedDay;
+          const onDutyCount = engineers.filter((e) => e.workingDays.includes(day.key)).length;
+          const onCallCount = engineers.filter((e) => e.onCallDays.includes(day.key)).length;
+
+          return (
+            <button
+              key={day.key}
+              onClick={() => setSelectedDay(day.key)}
+              className={`p-3 rounded-xl border text-center transition-all flex flex-col items-center justify-between min-h-[90px] relative ${
+                isSelected
+                  ? 'border-primary bg-primary text-primary-foreground shadow-md'
+                  : isToday
+                  ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-950/20 text-foreground'
+                  : 'border-border/60 bg-card hover:border-primary/40 text-foreground'
+              }`}
+            >
+              {isToday && (
+                <span
+                  className={`absolute -top-2 left-1/2 -translate-x-1/2 text-[9px] px-1.5 py-0.2 rounded-full font-bold uppercase tracking-wider ${
+                    isSelected ? 'bg-background text-primary' : 'bg-emerald-600 text-white'
+                  }`}
+                >
+                  Today
+                </span>
+              )}
+              <span className={`text-xs font-semibold ${isSelected ? 'text-primary-foreground' : 'text-muted-foreground'}`}>
+                {day.key}
+              </span>
+              <span className="text-sm font-bold my-1">{day.label.slice(0, 3)}</span>
+
+              <div className="flex items-center gap-1.5 text-[10px] mt-1">
+                {onDutyCount > 0 && (
+                  <span
+                    className={`px-1.5 py-0.5 rounded font-medium ${
+                      isSelected ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400'
+                    }`}
+                  >
+                    🟢 {onDutyCount}
+                  </span>
+                )}
+                {onCallCount > 0 && (
+                  <span
+                    className={`px-1.5 py-0.5 rounded font-medium ${
+                      isSelected ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-amber-500/15 text-amber-700 dark:text-amber-400'
+                    }`}
+                  >
+                    📞 {onCallCount}
+                  </span>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Selected Day Roster Details */}
+      <Card className="border-border/70 shadow-sm">
+        <CardHeader className="pb-3 border-b bg-muted/20">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base flex items-center gap-2">
+                <span>{DAYS_OF_WEEK.find((d) => d.key === selectedDay)?.label} Roster</span>
+                <span className="text-xs text-muted-foreground font-normal">
+                  ({DAYS_OF_WEEK.find((d) => d.key === selectedDay)?.arabic})
+                </span>
+                {selectedDay === todayKey && (
+                  <Badge className="bg-emerald-500 text-white text-[10px] ml-2">Active Today</Badge>
+                )}
+              </CardTitle>
+              <CardDescription className="text-xs mt-0.5">
+                Engineers scheduled for hospital on-site duty and emergency on-call rotation.
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-0 divide-y divide-border/60">
+          {engineers.map((eng) => {
+            const isWorking = eng.workingDays.includes(selectedDay);
+            const isOnCall = eng.onCallDays.includes(selectedDay);
+
+            return (
+              <div key={eng.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-muted/10 transition-colors">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-primary/10 text-primary font-bold flex items-center justify-center shrink-0 border border-primary/20">
+                    {eng.fullName.replace('Eng. ', '').split(' ').map((n) => n[0]).join('').slice(0, 2)}
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h4 className="font-semibold text-sm">{eng.fullName}</h4>
+                      <Badge variant="outline" className="text-[10px] py-0 px-1.5 font-normal">
+                        {eng.jobTitle}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-0.5">{eng.specialization}</p>
+                    <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                      {eng.extension && (
+                        <span>Ext: <strong className="text-foreground">{eng.extension}</strong></span>
+                      )}
+                      {eng.mobileNumber && (
+                        <span>Mobile: <strong className="text-foreground">{eng.mobileNumber}</strong></span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 shrink-0 self-end sm:self-center">
+                  {isWorking ? (
+                    <div className="text-right">
+                      <Badge className="bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30 gap-1.5 font-medium">
+                        <Radio className="w-3 h-3 text-emerald-500" />
+                        On-Site Duty ({eng.shiftHours || '08:00 - 16:00'})
+                      </Badge>
+                      <p className="text-[11px] text-muted-foreground mt-0.5">Hospital Workshop & Wards</p>
+                    </div>
+                  ) : isOnCall ? (
+                    <div className="text-right">
+                      <Badge className="bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30 gap-1.5 font-medium">
+                        <PhoneCall className="w-3 h-3 text-amber-500 animate-pulse" />
+                        Emergency On-Call (24h)
+                      </Badge>
+                      <p className="text-[11px] text-muted-foreground mt-0.5">Urgent response within 30 min</p>
+                    </div>
+                  ) : (
+                    <Badge variant="outline" className="text-muted-foreground gap-1.5">
+                      Off Duty / Rest
+                    </Badge>
+                  )}
+
+                  {eng.mobileNumber && (
+                    <Button asChild size="sm" variant="outline" className="h-8 gap-1.5 text-xs">
+                      <a href={`tel:${eng.mobileNumber}`}>
+                        <PhoneCall className="w-3.5 h-3.5 text-primary" />
+                        Call
+                      </a>
+                    </Button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

package/src/components/team/staff-engineer-team-view.tsx

@@ -0,0 +1,368 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import {
+  Phone,
+  Mail,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Calendar,
+  Wrench,
+  Moon,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface EngineerInfo {
+  id: string;
+  userId: string;
+  fullName: string;
+  email: string;
+  avatarUrl: string | null;
+  jobTitle: string;
+  specialization: string | null;
+  extension: string | null;
+  mobileNumber: string | null;
+  dutyStatus: string;
+  shiftHours: string | null;
+  workingDays: string[];
+  onCallDays: string[];
+  coveredDepartments: { id: string; name: string; code: string }[];
+  hospitalName: string | null;
+  activeTicketsCount: number;
+  activeMaintenanceCount: number;
+  assignedDevicesCount: number;
+}
+
+interface StaffEngineerTeamViewProps {
+  engineers: EngineerInfo[];
+}
+
+const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+const DUTY_STATUS_CONFIG: Record<
+  string,
+  {
+    label: string;
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    icon: typeof CheckCircle;
+  }
+> = {
+  on_duty: {
+    label: 'On Duty',
+    color: 'text-green-700 dark:text-green-300',
+    bgColor: 'bg-green-50 dark:bg-green-950/30',
+    borderColor: 'border-green-200 dark:border-green-800',
+    icon: CheckCircle,
+  },
+  on_call: {
+    label: 'On Call',
+    color: 'text-blue-700 dark:text-blue-300',
+    bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+    borderColor: 'border-blue-200 dark:border-blue-800',
+    icon: Phone,
+  },
+  in_maintenance: {
+    label: 'In Maintenance',
+    color: 'text-amber-700 dark:text-amber-300',
+    bgColor: 'bg-amber-50 dark:bg-amber-950/30',
+    borderColor: 'border-amber-200 dark:border-amber-800',
+    icon: Wrench,
+  },
+  off_duty: {
+    label: 'Off Duty',
+    color: 'text-gray-500 dark:text-gray-400',
+    bgColor: 'bg-gray-50 dark:bg-gray-900/30',
+    borderColor: 'border-gray-200 dark:border-gray-700',
+    icon: Moon,
+  },
+};
+
+export function StaffEngineerTeamView({ engineers }: StaffEngineerTeamViewProps) {
+  const [filter, setFilter] = useState<'all' | 'available'>('all');
+
+  const availableEngineers = engineers.filter(
+    (e) => e.dutyStatus === 'on_duty' || e.dutyStatus === 'on_call'
+  );
+  const filteredEngineers =
+    filter === 'available' ? availableEngineers : engineers;
+
+  const todayIndex = new Date().getDay();
+  const todayName = DAYS_OF_WEEK[todayIndex];
+
+  return (
+    <div className="space-y-5">
+      {/* Summary Strip */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-lg px-3 py-2">
+          <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
+          <span className="text-sm font-semibold text-green-700 dark:text-green-300">
+            {availableEngineers.length} available today
+          </span>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          {engineers.length} total engineers
+        </span>
+      </div>
+
+      {/* Filter */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => setFilter('all')}
+          className={cn(
+            'text-xs px-3 py-1.5 rounded-full border font-medium transition-colors',
+            filter === 'all'
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-card text-muted-foreground border-border hover:bg-muted'
+          )}
+        >
+          All ({engineers.length})
+        </button>
+        <button
+          onClick={() => setFilter('available')}
+          className={cn(
+            'text-xs px-3 py-1.5 rounded-full border font-medium transition-colors',
+            filter === 'available'
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-card text-muted-foreground border-border hover:bg-muted'
+          )}
+        >
+          Available Now ({availableEngineers.length})
+        </button>
+      </div>
+
+      {/* Engineer Cards */}
+      {filteredEngineers.length === 0 ? (
+        <div className="text-center py-12 border rounded-lg bg-muted/20">
+          <p className="text-muted-foreground text-sm">
+            No engineers are currently available.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {filteredEngineers.map((eng) => (
+            <EngineerCard
+              key={eng.id}
+              engineer={eng}
+              todayName={todayName}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EngineerCard({
+  engineer,
+  todayName,
+}: {
+  engineer: EngineerInfo;
+  todayName: string;
+}) {
+  const statusConfig = DUTY_STATUS_CONFIG[engineer.dutyStatus] || DUTY_STATUS_CONFIG.off_duty;
+  const StatusIcon = statusConfig.icon;
+  const initials = engineer.fullName
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .substring(0, 2)
+    .toUpperCase();
+
+  const isAvailable =
+    engineer.dutyStatus === 'on_duty' || engineer.dutyStatus === 'on_call';
+
+  return (
+    <Card
+      className={cn(
+        'shadow-sm overflow-hidden',
+        isAvailable
+          ? 'border-green-200 dark:border-green-900'
+          : 'opacity-75'
+      )}
+    >
+      {/* Status Banner */}
+      <div
+        className={cn(
+          'px-4 py-2 flex items-center gap-2 text-xs font-semibold border-b',
+          statusConfig.bgColor,
+          statusConfig.borderColor,
+          statusConfig.color
+        )}
+      >
+        <StatusIcon className="w-3.5 h-3.5" />
+        {statusConfig.label}
+        {engineer.shiftHours && (
+          <span className="text-muted-foreground font-normal ml-auto">
+            {engineer.shiftHours}
+          </span>
+        )}
+      </div>
+
+      <CardContent className="p-4">
+        {/* Name and Role */}
+        <div className="flex items-start gap-3">
+          <Avatar className="h-12 w-12 shrink-0">
+            <AvatarFallback
+              className={cn(
+                'text-sm font-bold',
+                isAvailable
+                  ? 'bg-primary/10 text-primary'
+                  : 'bg-muted text-muted-foreground'
+              )}
+            >
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <h3 className="font-semibold text-base">{engineer.fullName}</h3>
+            <p className="text-sm text-muted-foreground">{engineer.jobTitle}</p>
+            {engineer.specialization && (
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {engineer.specialization}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Contact Info */}
+        <div className="mt-4 space-y-2">
+          {engineer.mobileNumber && (
+            <a
+              href={`tel:${engineer.mobileNumber}`}
+              className="flex items-center gap-2 text-sm text-primary hover:underline min-h-[36px]"
+            >
+              <Phone className="w-4 h-4 shrink-0" />
+              {engineer.mobileNumber}
+            </a>
+          )}
+          {engineer.extension && (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Phone className="w-4 h-4 shrink-0" />
+              Ext. {engineer.extension}
+            </div>
+          )}
+          <a
+            href={`mailto:${engineer.email}`}
+            className="flex items-center gap-2 text-sm text-primary hover:underline min-h-[36px]"
+          >
+            <Mail className="w-4 h-4 shrink-0" />
+            {engineer.email}
+          </a>
+        </div>
+
+        {/* Weekly Schedule Calendar */}
+        <div className="mt-4">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+            <Calendar className="w-3.5 h-3.5 inline mr-1" />
+            Weekly Schedule
+          </p>
+          <div className="grid grid-cols-7 gap-1">
+            {DAYS_OF_WEEK.map((day) => {
+              const isWorkDay = engineer.workingDays.includes(day);
+              const isOnCallDay = engineer.onCallDays.includes(day);
+              const isToday = day === todayName;
+
+              return (
+                <div
+                  key={day}
+                  className={cn(
+                    'flex flex-col items-center py-1.5 rounded-lg text-center border',
+                    isToday && 'ring-2 ring-primary ring-offset-1',
+                    isWorkDay
+                      ? 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800'
+                      : isOnCallDay
+                      ? 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800'
+                      : 'bg-muted/30 border-border'
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'text-[10px] font-bold leading-none',
+                      isToday
+                        ? 'text-primary'
+                        : isWorkDay
+                        ? 'text-green-700 dark:text-green-300'
+                        : isOnCallDay
+                        ? 'text-blue-700 dark:text-blue-300'
+                        : 'text-muted-foreground'
+                    )}
+                  >
+                    {day}
+                  </span>
+                  <span className="text-[10px] mt-0.5 leading-none">
+                    {isWorkDay ? '✓' : isOnCallDay ? '📞' : '—'}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          <div className="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <span className="w-2 h-2 rounded-full bg-green-500 inline-block" />
+              Working
+            </span>
+            <span className="flex items-center gap-1">
+              <span className="w-2 h-2 rounded-full bg-blue-500 inline-block" />
+              On Call
+            </span>
+            <span className="flex items-center gap-1">
+              <span className="w-2 h-2 rounded-full bg-muted inline-block border" />
+              Off
+            </span>
+          </div>
+        </div>
+
+        {/* Covered Departments */}
+        {engineer.coveredDepartments.length > 0 && (
+          <div className="mt-4">
+            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">
+              Covers Departments
+            </p>
+            <div className="flex flex-wrap gap-1">
+              {engineer.coveredDepartments.map((dept) => (
+                <Badge
+                  key={dept.id}
+                  variant="secondary"
+                  className="text-xs"
+                >
+                  {dept.name}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Current Workload */}
+        {(engineer.activeTicketsCount > 0 ||
+          engineer.activeMaintenanceCount > 0) && (
+          <div className="mt-4 pt-3 border-t border-border">
+            <p className="text-xs text-muted-foreground">
+              Currently handling:{' '}
+              {engineer.activeTicketsCount > 0 && (
+                <span className="font-medium text-foreground">
+                  {engineer.activeTicketsCount} ticket
+                  {engineer.activeTicketsCount !== 1 ? 's' : ''}
+                </span>
+              )}
+              {engineer.activeTicketsCount > 0 &&
+                engineer.activeMaintenanceCount > 0 &&
+                ' and '}
+              {engineer.activeMaintenanceCount > 0 && (
+                <span className="font-medium text-foreground">
+                  {engineer.activeMaintenanceCount} maintenance task
+                  {engineer.activeMaintenanceCount !== 1 ? 's' : ''}
+                </span>
+              )}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/team/team-header-stats.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Users, Radio, PhoneCall, Wrench, ShieldCheck, Moon } from 'lucide-react';
+
+interface TeamHeaderStatsProps {
+  stats: {
+    totalEngineers: number;
+    onDutyToday: number;
+    onCallToday: number;
+    inMaintenanceToday: number;
+    offDutyToday: number;
+    totalActiveWorkOrders: number;
+  };
+}
+
+export function TeamHeaderStats({ stats }: TeamHeaderStatsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+      {/* Total Engineers */}
+      <Card className="p-4 bg-card border-border/70 shadow-sm flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-muted-foreground">Total Team</p>
+          <p className="text-2xl font-bold mt-0.5">{stats.totalEngineers}</p>
+          <span className="text-[11px] text-muted-foreground">Biomedical Engineers</span>
+        </div>
+        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+          <Users className="w-5 h-5" />
+        </div>
+      </Card>
+
+      {/* On Duty */}
+      <Card className="p-4 bg-emerald-50/50 dark:bg-emerald-950/20 border-emerald-200/60 dark:border-emerald-900/40 shadow-sm flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-emerald-800 dark:text-emerald-300">On Duty Today</p>
+          <div className="flex items-center gap-1.5 mt-0.5">
+            <span className="relative flex h-2.5 w-2.5">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+            </span>
+            <p className="text-2xl font-bold text-emerald-700 dark:text-emerald-400">{stats.onDutyToday}</p>
+          </div>
+          <span className="text-[11px] text-emerald-700/80 dark:text-emerald-400/80">In Hospital / Ready</span>
+        </div>
+        <div className="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
+          <Radio className="w-5 h-5" />
+        </div>
+      </Card>
+
+      {/* On Call */}
+      <Card className="p-4 bg-amber-50/50 dark:bg-amber-950/20 border-amber-200/60 dark:border-amber-900/40 shadow-sm flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-amber-800 dark:text-amber-300">On-Call Shift</p>
+          <p className="text-2xl font-bold text-amber-700 dark:text-amber-400 mt-0.5">{stats.onCallToday}</p>
+          <span className="text-[11px] text-amber-700/80 dark:text-amber-400/80">Emergency Responder</span>
+        </div>
+        <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center text-amber-600 dark:text-amber-400">
+          <PhoneCall className="w-5 h-5" />
+        </div>
+      </Card>
+
+      {/* Active Work Orders */}
+      <Card className="p-4 bg-blue-50/50 dark:bg-blue-950/20 border-blue-200/60 dark:border-blue-900/40 shadow-sm flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-blue-800 dark:text-blue-300">Active Workloads</p>
+          <p className="text-2xl font-bold text-blue-700 dark:text-blue-400 mt-0.5">{stats.totalActiveWorkOrders}</p>
+          <span className="text-[11px] text-blue-700/80 dark:text-blue-400/80">Open Tasks & Tickets</span>
+        </div>
+        <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-blue-600 dark:text-blue-400">
+          <Wrench className="w-5 h-5" />
+        </div>
+      </Card>
+
+      {/* Off Duty */}
+      <Card className="p-4 bg-slate-50 dark:bg-slate-900/40 border-border/70 shadow-sm col-span-2 md:col-span-1 flex items-center justify-between">
+        <div>
+          <p className="text-xs font-medium text-muted-foreground">Off Duty</p>
+          <p className="text-2xl font-bold text-muted-foreground mt-0.5">{stats.offDutyToday}</p>
+          <span className="text-[11px] text-muted-foreground">Rest / Post-Call</span>
+        </div>
+        <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+          <Moon className="w-5 h-5" />
+        </div>
+      </Card>
+    </div>
+  );
+}
+