@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/rounds/round-department-list.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { DepartmentVisitSheet } from './department-visit-sheet';
+import { completeRound } from '@/lib/actions/engineer-rounds';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import {
+  CheckCircle2, Circle, Clock, AlertTriangle, PartyPopper,
+  FileText, Loader2, SkipForward,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { formatDistanceToNow } from 'date-fns';
+
+interface Visit {
+  id: string;
+  departmentId: string;
+  departmentName: string;
+  sequence: number;
+  status: string;
+  startedAt: string | null;
+  completedAt: string | null;
+  ticketCount: number;
+  notes: {
+    id: string;
+    noteText: string;
+    deviceMentions: any[];
+    author?: { id: string; fullName: string };
+  }[];
+  department: { id: string; name: string; code: string };
+}
+
+interface RoundData {
+  id: string;
+  roundDate: string;
+  shiftType: string;
+  status: string;
+  startedAt: string | null;
+  completedAt: string | null;
+  totalDepartments: number;
+  completedDepartments: number;
+  totalIssuesReported: number;
+  totalNotes: number;
+  hospitalId: string;
+  hospital: { id: string; name: string };
+  engineer: { id: string; fullName: string };
+  departmentVisits: Visit[];
+}
+
+interface RoundDepartmentListProps {
+  round: RoundData;
+}
+
+export function RoundDepartmentList({ round: initialRound }: RoundDepartmentListProps) {
+  const router = useRouter();
+  const [selectedVisit, setSelectedVisit] = useState<Visit | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const round = initialRound;
+  const visits = round.departmentVisits;
+  const completedCount = visits.filter(v => v.status === 'completed').length;
+  const progress = visits.length > 0 ? (completedCount / visits.length) * 100 : 0;
+  const allCompleted = completedCount === visits.length;
+  const isCompleted = round.status === 'completed';
+
+  const handleVisitClick = (visit: Visit) => {
+    setSelectedVisit(visit);
+    setSheetOpen(true);
+  };
+
+  const handleCompleteRound = () => {
+    startTransition(async () => {
+      const result = await completeRound({ roundId: round.id });
+      if (result.success) {
+        toast.success('Round completed successfully!');
+        router.refresh();
+      } else {
+        toast.error(result.error || 'Failed to complete round');
+      }
+    });
+  };
+
+  const formatTime = (ts: string | null) => {
+    if (!ts) return null;
+    return new Date(ts).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Progress header */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium">
+              {completedCount} / {visits.length} Departments
+            </span>
+            <span className="text-sm text-muted-foreground">
+              {Math.round(progress)}%
+            </span>
+          </div>
+          <Progress value={progress} className="h-2" />
+          {round.startedAt && (
+            <p className="text-xs text-muted-foreground mt-2">
+              Started {formatTime(round.startedAt)} · {round.shiftType} shift
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Department List (To-Do Style) */}
+      <div className="space-y-2">
+        {visits.map((visit) => {
+          const isVisitCompleted = visit.status === 'completed';
+          const isSkipped = visit.status === 'skipped';
+
+          return (
+            <button
+              key={visit.id}
+              onClick={() => handleVisitClick(visit)}
+              className={cn(
+                'w-full flex items-start gap-3 p-4 rounded-lg border transition-all text-left',
+                isVisitCompleted
+                  ? 'bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-900/40'
+                  : isSkipped
+                  ? 'bg-muted/30 border-muted opacity-60'
+                  : 'bg-card border-border hover:border-primary/40 hover:shadow-sm active:scale-[0.99]',
+              )}
+              disabled={isCompleted}
+            >
+              {/* Status Icon */}
+              <div className="mt-0.5 shrink-0">
+                {isVisitCompleted ? (
+                  <CheckCircle2 className="h-5 w-5 text-green-500" />
+                ) : isSkipped ? (
+                  <SkipForward className="h-5 w-5 text-muted-foreground" />
+                ) : (
+                  <Circle className="h-5 w-5 text-muted-foreground/40" />
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <span className={cn(
+                    'font-medium',
+                    isVisitCompleted && 'text-green-700 dark:text-green-400',
+                    isSkipped && 'line-through text-muted-foreground',
+                  )}>
+                    {visit.departmentName}
+                  </span>
+                  {isVisitCompleted && visit.completedAt && (
+                    <span className="text-xs text-muted-foreground shrink-0">
+                      {formatTime(visit.completedAt)}
+                    </span>
+                  )}
+                </div>
+
+                {/* Visit details */}
+                {isVisitCompleted && (
+                  <div className="flex flex-wrap items-center gap-2 mt-1">
+                    {visit.notes.length > 0 && (
+                      <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                        <FileText className="h-3 w-3" />
+                        {visit.notes.length} note{visit.notes.length !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                    {visit.ticketCount > 0 && (
+                      <span className="inline-flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400">
+                        <AlertTriangle className="h-3 w-3" />
+                        {visit.ticketCount} issue{visit.ticketCount !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                    {visit.notes.length === 0 && visit.ticketCount === 0 && (
+                      <span className="text-xs text-green-600/70 dark:text-green-500/70">
+                        No issues
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                {/* First note preview */}
+                {visit.notes.length > 0 && (
+                  <p className="text-xs text-muted-foreground mt-1 line-clamp-1">
+                    &quot;{visit.notes[0].noteText}&quot;
+                  </p>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Complete Round Button */}
+      {!isCompleted && (
+        <div className="pt-2">
+          {allCompleted ? (
+            <Card className="border-green-200 bg-green-50 dark:border-green-900/40 dark:bg-green-950/20">
+              <CardContent className="pt-6 text-center space-y-3">
+                <PartyPopper className="h-8 w-8 mx-auto text-green-500" />
+                <div>
+                  <h3 className="font-semibold text-green-700 dark:text-green-400">
+                    All departments visited!
+                  </h3>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {round.totalIssuesReported} issue{round.totalIssuesReported !== 1 ? 's' : ''} reported · {round.totalNotes} note{round.totalNotes !== 1 ? 's' : ''}
+                  </p>
+                </div>
+                <Button
+                  size="lg"
+                  className="w-full gap-2"
+                  onClick={handleCompleteRound}
+                  disabled={isPending}
+                >
+                  {isPending ? (
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                  ) : (
+                    <CheckCircle2 className="h-5 w-5" />
+                  )}
+                  Complete Round
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <Button
+              variant="outline"
+              size="lg"
+              className="w-full gap-2"
+              onClick={handleCompleteRound}
+              disabled={isPending}
+            >
+              {isPending ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <CheckCircle2 className="h-5 w-5" />
+              )}
+              Complete Round ({completedCount}/{visits.length} done)
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Completed Summary */}
+      {isCompleted && (
+        <Card className="border-green-200 bg-green-50 dark:border-green-900/40 dark:bg-green-950/20">
+          <CardContent className="pt-6 text-center">
+            <CheckCircle2 className="h-8 w-8 mx-auto text-green-500 mb-2" />
+            <h3 className="font-semibold text-green-700 dark:text-green-400">
+              Round Completed
+            </h3>
+            <p className="text-sm text-muted-foreground mt-1">
+              {completedCount}/{visits.length} departments · {round.totalIssuesReported} issues · {round.totalNotes} notes
+            </p>
+            {round.startedAt && round.completedAt && (
+              <p className="text-xs text-muted-foreground mt-1">
+                {formatTime(round.startedAt)} — {formatTime(round.completedAt)}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Department Visit Sheet */}
+      <DepartmentVisitSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        visit={selectedVisit}
+        roundId={round.id}
+        hospitalId={round.hospitalId}
+        onCompleted={() => router.refresh()}
+      />
+    </div>
+  );
+}

package/src/components/rounds/round-history-client.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { RoundCalendar } from './round-calendar';
+import { getRoundCalendarData } from '@/lib/actions/engineer-rounds';
+import {
+  CheckCircle2, XCircle, Clock, UserX, Loader2, AlertTriangle, FileText,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import Link from 'next/link';
+
+interface RoundHistoryClientProps {
+  initialHistory: any[];
+  initialCalendar: any;
+  initialCompliance: any;
+  isManager: boolean;
+  currentUserId: string;
+  pagination: any;
+}
+
+export function RoundHistoryClient({
+  initialHistory,
+  initialCalendar,
+  initialCompliance,
+  isManager,
+  currentUserId,
+  pagination,
+}: RoundHistoryClientProps) {
+  const [calendarData, setCalendarData] = useState(initialCalendar);
+  const [isPending, startTransition] = useTransition();
+
+  const handleMonthChange = (month: number, year: number) => {
+    startTransition(async () => {
+      const result = await getRoundCalendarData({
+        engineerId: currentUserId,
+        month,
+        year,
+      });
+      if (result.success) {
+        setCalendarData(result.data);
+      }
+    });
+  };
+
+  const statusIcons: Record<string, any> = {
+    completed: <CheckCircle2 className="h-4 w-4 text-green-500" />,
+    in_progress: <Clock className="h-4 w-4 text-blue-500 animate-pulse" />,
+    missed: <XCircle className="h-4 w-4 text-red-500" />,
+    scheduled: <Clock className="h-4 w-4 text-muted-foreground" />,
+    cancelled: <XCircle className="h-4 w-4 text-muted-foreground" />,
+  };
+
+  const formatTime = (ts: string | null) => {
+    if (!ts) return '';
+    return new Date(ts).toLocaleTimeString('en-US', {
+      hour: '2-digit', minute: '2-digit', hour12: true,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Calendar */}
+      {calendarData && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Round Activity</CardTitle>
+          </CardHeader>
+          <CardContent className="relative">
+            {isPending && (
+              <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10 rounded-lg">
+                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              </div>
+            )}
+            <RoundCalendar
+              month={calendarData.month}
+              year={calendarData.year}
+              calendarDays={calendarData.calendarDays}
+              summary={calendarData.summary}
+              onMonthChange={handleMonthChange}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Manager: Team Compliance */}
+      {isManager && initialCompliance && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Team Compliance Today</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {/* Summary Stats */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
+              <div className="rounded-lg bg-green-50 dark:bg-green-950/20 p-3 text-center">
+                <p className="text-2xl font-bold text-green-600 dark:text-green-400">
+                  {initialCompliance.summary.completed}
+                </p>
+                <p className="text-xs text-muted-foreground">Completed</p>
+              </div>
+              <div className="rounded-lg bg-blue-50 dark:bg-blue-950/20 p-3 text-center">
+                <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+                  {initialCompliance.summary.inProgress}
+                </p>
+                <p className="text-xs text-muted-foreground">In Progress</p>
+              </div>
+              <div className="rounded-lg bg-red-50 dark:bg-red-950/20 p-3 text-center">
+                <p className="text-2xl font-bold text-red-600 dark:text-red-400">
+                  {initialCompliance.summary.missed}
+                </p>
+                <p className="text-xs text-muted-foreground">Missed</p>
+              </div>
+              <div className="rounded-lg bg-muted p-3 text-center">
+                <p className="text-2xl font-bold">
+                  {initialCompliance.summary.complianceRate}%
+                </p>
+                <p className="text-xs text-muted-foreground">Compliance</p>
+              </div>
+            </div>
+
+            {/* Engineer list */}
+            <div className="space-y-1.5">
+              {initialCompliance.team.map((member: any) => (
+                <div
+                  key={member.engineerId}
+                  className="flex items-center gap-3 py-2 px-3 rounded-md hover:bg-muted/50"
+                >
+                  {member.status === 'completed' ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                  ) : member.status === 'in_progress' ? (
+                    <Clock className="h-4 w-4 text-blue-500 shrink-0" />
+                  ) : member.status === 'missed' ? (
+                    <XCircle className="h-4 w-4 text-red-500 shrink-0" />
+                  ) : member.status === 'off_duty' ? (
+                    <UserX className="h-4 w-4 text-muted-foreground shrink-0" />
+                  ) : (
+                    <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{member.engineerName}</p>
+                    <p className="text-xs text-muted-foreground">{member.hospitalName}</p>
+                  </div>
+                  <span className={cn(
+                    'text-xs font-medium capitalize',
+                    member.status === 'completed' && 'text-green-600 dark:text-green-400',
+                    member.status === 'in_progress' && 'text-blue-600 dark:text-blue-400',
+                    member.status === 'missed' && 'text-red-600 dark:text-red-400',
+                    member.status === 'off_duty' && 'text-muted-foreground',
+                  )}>
+                    {member.status?.replace(/_/g, ' ')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* History List */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Recent Rounds</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {initialHistory.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-4">
+              No rounds found
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {initialHistory.map((round: any) => (
+                <Link
+                  key={round.id}
+                  href={`/rounds/${round.id}`}
+                  className="flex items-start gap-3 py-3 px-3 rounded-lg hover:bg-muted/50 transition-colors"
+                >
+                  {statusIcons[round.status] || statusIcons.scheduled}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-sm font-medium">
+                        {round.engineer?.fullName || 'Unknown'}
+                      </span>
+                      <span className="text-xs text-muted-foreground capitalize">
+                        {round.shiftType}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      {new Date(round.roundDate + 'T00:00:00').toLocaleDateString('en-US', {
+                        weekday: 'short', month: 'short', day: 'numeric',
+                      })}
+                      {' · '}
+                      {round.hospital?.name}
+                    </p>
+                    <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                      <span>{round.completedDepartments}/{round.totalDepartments} depts</span>
+                      {round.totalIssuesReported > 0 && (
+                        <span className="flex items-center gap-1 text-yellow-600 dark:text-yellow-400">
+                          <AlertTriangle className="h-3 w-3" />
+                          {round.totalIssuesReported} issues
+                        </span>
+                      )}
+                      {round.totalNotes > 0 && (
+                        <span className="flex items-center gap-1">
+                          <FileText className="h-3 w-3" />
+                          {round.totalNotes} notes
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/rounds/start-round-card.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+  DialogDescription, DialogFooter,
+} from '@/components/ui/dialog';
+import { startRound } from '@/lib/actions/engineer-rounds';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { ShieldCheck, Loader2, Building2, Calendar, Clock, MapPin } from 'lucide-react';
+
+interface StartRoundCardProps {
+  hospitalId: string;
+  hospitalName?: string;
+  departments: { id: string; name: string; code: string }[];
+  shiftType: string;
+}
+
+export function StartRoundCard({
+  hospitalId,
+  hospitalName,
+  departments,
+  shiftType,
+}: StartRoundCardProps) {
+  const router = useRouter();
+  const [showSignDialog, setShowSignDialog] = useState(false);
+  const [password, setPassword] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  const today = new Date();
+  const dateStr = today.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  const handleStartRound = () => {
+    if (!password.trim()) {
+      toast.error('Please enter your password');
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await startRound({
+        hospitalId,
+        shiftType,
+        password,
+      });
+
+      if (result.success) {
+        toast.success('Round started! Good luck on your round.');
+        setShowSignDialog(false);
+        setPassword('');
+        router.refresh();
+      } else {
+        toast.error(result.error || 'Failed to start round');
+      }
+    });
+  };
+
+  return (
+    <>
+      <Card className="border-primary/20 shadow-sm">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-xl">Start Daily Round</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-3 text-sm">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Calendar className="h-4 w-4 shrink-0" />
+              <span>{dateStr}</span>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Building2 className="h-4 w-4 shrink-0" />
+              <span>{hospitalName || 'Your Hospital'}</span>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Clock className="h-4 w-4 shrink-0" />
+              <span className="capitalize">{shiftType} Shift</span>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <MapPin className="h-4 w-4 shrink-0" />
+              <span>{departments.length} department{departments.length !== 1 ? 's' : ''} to visit</span>
+            </div>
+          </div>
+
+          {/* Department Preview */}
+          <div className="flex flex-wrap gap-1.5 pt-1">
+            {departments.map(dept => (
+              <span
+                key={dept.id}
+                className="inline-flex items-center text-xs bg-muted px-2 py-1 rounded-md"
+              >
+                {dept.name}
+              </span>
+            ))}
+          </div>
+
+          <Button
+            size="lg"
+            className="w-full gap-2 text-base h-12"
+            onClick={() => setShowSignDialog(true)}
+          >
+            <ShieldCheck className="h-5 w-5" />
+            Sign &amp; Start Round
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* E-Signature Dialog */}
+      <Dialog open={showSignDialog} onOpenChange={setShowSignDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <ShieldCheck className="h-5 w-5 text-primary" />
+              Electronic Signature
+            </DialogTitle>
+            <DialogDescription>
+              Confirm your identity to start the daily engineering round.
+              This action will be recorded with your electronic signature.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="rounded-md bg-muted/50 p-3 text-sm space-y-1">
+              <p><span className="font-medium">Action:</span> Start Daily Engineering Round</p>
+              <p><span className="font-medium">Date:</span> {dateStr}</p>
+              <p><span className="font-medium">Shift:</span> <span className="capitalize">{shiftType}</span></p>
+              <p><span className="font-medium">Departments:</span> {departments.length}</p>
+            </div>
+
+            <div>
+              <Label htmlFor="sig-password">Enter your password to confirm</Label>
+              <Input
+                id="sig-password"
+                type="password"
+                placeholder="Your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleStartRound();
+                }}
+                disabled={isPending}
+                className="mt-1.5"
+                autoFocus
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowSignDialog(false);
+                setPassword('');
+              }}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleStartRound}
+              disabled={isPending || !password.trim()}
+              className="gap-2"
+            >
+              {isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <ShieldCheck className="h-4 w-4" />
+              )}
+              Confirm &amp; Start
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}