@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/rounds/department-visit-sheet.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useState, useEffect, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { MentionTextarea } from './mention-textarea';
+import { completeDepartmentVisit, getDepartmentDevices } from '@/lib/actions/engineer-rounds';
+import { toast } from 'sonner';
+import { CheckCircle2, AlertTriangle, FileText, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
+
+interface DepartmentVisitSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  visit: {
+    id: string;
+    departmentId: string;
+    departmentName: string;
+    status: string;
+    notes?: { id: string; noteText: string; deviceMentions: any[]; author?: { fullName: string } }[];
+    ticketCount?: number;
+  } | null;
+  roundId: string;
+  hospitalId: string;
+  onCompleted: () => void;
+}
+
+export function DepartmentVisitSheet({
+  open,
+  onOpenChange,
+  visit,
+  roundId,
+  hospitalId,
+  onCompleted,
+}: DepartmentVisitSheetProps) {
+  const router = useRouter();
+  const [noteText, setNoteText] = useState('');
+  const [deviceMentions, setDeviceMentions] = useState<any[]>([]);
+  const [devices, setDevices] = useState<any[]>([]);
+  const [isPending, startTransition] = useTransition();
+  const [loadingDevices, setLoadingDevices] = useState(false);
+
+  // Load devices for this department
+  useEffect(() => {
+    if (visit && open) {
+      setLoadingDevices(true);
+      getDepartmentDevices(visit.departmentId).then(result => {
+        if (result.success) {
+          setDevices(result.data || []);
+        }
+        setLoadingDevices(false);
+      });
+    }
+  }, [visit?.departmentId, open]);
+
+  // Reset form when visit changes
+  useEffect(() => {
+    if (open) {
+      setNoteText('');
+      setDeviceMentions([]);
+    }
+  }, [visit?.id, open]);
+
+  if (!visit) return null;
+
+  const isCompleted = visit.status === 'completed';
+
+  const handleComplete = () => {
+    startTransition(async () => {
+      const result = await completeDepartmentVisit({
+        visitId: visit.id,
+        noteText: noteText.trim() || undefined,
+        deviceMentions,
+      });
+
+      if (result.success) {
+        toast.success(`${visit.departmentName} completed`);
+        onCompleted();
+        onOpenChange(false);
+      } else {
+        toast.error(result.error || 'Failed to complete visit');
+      }
+    });
+  };
+
+  const handleReportIssue = () => {
+    // Navigate to ticket creation with round context pre-filled
+    const params = new URLSearchParams({
+      departmentId: visit.departmentId,
+      hospitalId,
+      roundVisitId: visit.id,
+      source: 'department_device_selection',
+    });
+    router.push(`/tickets/create?${params.toString()}`);
+    onOpenChange(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="bottom" className="h-[85vh] sm:h-auto sm:max-h-[80vh] rounded-t-xl">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2 text-lg">
+            {isCompleted ? (
+              <CheckCircle2 className="h-5 w-5 text-green-500" />
+            ) : (
+              <div className="h-5 w-5 rounded-full border-2 border-muted-foreground/40" />
+            )}
+            {visit.departmentName}
+          </SheetTitle>
+          <p className="text-sm text-muted-foreground">
+            {devices.length} device{devices.length !== 1 ? 's' : ''} in department
+          </p>
+        </SheetHeader>
+
+        <div className="mt-6 space-y-4">
+          {/* Existing notes */}
+          {visit.notes && visit.notes.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-muted-foreground">Previous Notes</h4>
+              {visit.notes.map(note => (
+                <div key={note.id} className="rounded-md bg-muted/50 p-3 text-sm">
+                  <p>{note.noteText}</p>
+                  {note.deviceMentions?.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-1.5">
+                      {note.deviceMentions.map((m: any, i: number) => (
+                        <span
+                          key={`${m.deviceId}-${i}`}
+                          className="inline-flex items-center text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 px-1.5 py-0.5 rounded"
+                        >
+                          @{m.deviceName}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Ticket count */}
+          {(visit.ticketCount ?? 0) > 0 && (
+            <div className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
+              <AlertTriangle className="h-4 w-4" />
+              {visit.ticketCount} issue{visit.ticketCount !== 1 ? 's' : ''} reported
+            </div>
+          )}
+
+          {/* Note input (only if not completed) */}
+          {!isCompleted && (
+            <>
+              <div>
+                <label className="text-sm font-medium mb-1.5 block">
+                  Notes <span className="text-muted-foreground font-normal">(optional)</span>
+                </label>
+                <MentionTextarea
+                  value={noteText}
+                  onChange={(val, mentions) => {
+                    setNoteText(val);
+                    setDeviceMentions(mentions);
+                  }}
+                  devices={devices}
+                  placeholder='e.g. "All devices working well" or "Issue with @device..."'
+                  disabled={isPending}
+                />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col gap-2 pt-2">
+                <Button
+                  variant="outline"
+                  className="w-full justify-start gap-2 h-12 text-yellow-600 border-yellow-200 hover:bg-yellow-50 dark:text-yellow-400 dark:border-yellow-800 dark:hover:bg-yellow-950/30"
+                  onClick={handleReportIssue}
+                  disabled={isPending}
+                >
+                  <AlertTriangle className="h-5 w-5" />
+                  Report Issue
+                </Button>
+
+                <Button
+                  className="w-full h-12 gap-2 text-base"
+                  onClick={handleComplete}
+                  disabled={isPending}
+                >
+                  {isPending ? (
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                  ) : (
+                    <CheckCircle2 className="h-5 w-5" />
+                  )}
+                  Complete Department
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/rounds/mention-textarea.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+interface DeviceMention {
+  deviceId: string;
+  deviceName: string;
+  internalCode: string;
+}
+
+interface MentionTextareaProps {
+  value: string;
+  onChange: (value: string, mentions: DeviceMention[]) => void;
+  devices: { id: string; name: string; internalCode: string; assetNumber: string; currentStatusCode: string }[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function MentionTextarea({
+  value,
+  onChange,
+  devices,
+  placeholder = 'Add a note... Use @device to mention specific devices',
+  className,
+  disabled,
+}: MentionTextareaProps) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [mentions, setMentions] = useState<DeviceMention[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const filteredDevices = devices.filter(d =>
+    d.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    d.internalCode.toLowerCase().includes(searchTerm.toLowerCase())
+  ).slice(0, 8);
+
+  const handleTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    const cursorPos = e.target.selectionStart;
+
+    // Detect @ trigger
+    const textBeforeCursor = newValue.slice(0, cursorPos);
+    const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
+
+    if (atMatch) {
+      setSearchTerm(atMatch[1]);
+      setShowDropdown(true);
+      setSelectedIndex(0);
+    } else {
+      setShowDropdown(false);
+      setSearchTerm('');
+    }
+
+    onChange(newValue, mentions);
+  }, [mentions, onChange]);
+
+  const insertMention = useCallback((device: typeof devices[0]) => {
+    if (!textareaRef.current) return;
+
+    const textarea = textareaRef.current;
+    const cursorPos = textarea.selectionStart;
+    const textBeforeCursor = value.slice(0, cursorPos);
+    const textAfterCursor = value.slice(cursorPos);
+
+    // Find the @ position
+    const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
+    if (!atMatch) return;
+
+    const atStart = textBeforeCursor.lastIndexOf('@');
+    const mentionText = `@${device.name}`;
+    const newValue = value.slice(0, atStart) + mentionText + ' ' + textAfterCursor;
+
+    const newMention: DeviceMention = {
+      deviceId: device.id,
+      deviceName: device.name,
+      internalCode: device.internalCode,
+    };
+
+    const updatedMentions = [...mentions, newMention];
+    setMentions(updatedMentions);
+    setShowDropdown(false);
+    setSearchTerm('');
+    onChange(newValue, updatedMentions);
+
+    // Restore focus and cursor
+    setTimeout(() => {
+      textarea.focus();
+      const newCursorPos = atStart + mentionText.length + 1;
+      textarea.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
+  }, [value, mentions, onChange]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!showDropdown || filteredDevices.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(i => Math.min(i + 1, filteredDevices.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault();
+      insertMention(filteredDevices[selectedIndex]);
+    } else if (e.key === 'Escape') {
+      setShowDropdown(false);
+    }
+  }, [showDropdown, filteredDevices, selectedIndex, insertMention]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClick = () => setShowDropdown(false);
+    if (showDropdown) {
+      document.addEventListener('click', handleClick);
+      return () => document.removeEventListener('click', handleClick);
+    }
+  }, [showDropdown]);
+
+  return (
+    <div className="relative">
+      <Textarea
+        ref={textareaRef}
+        value={value}
+        onChange={handleTextChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        className={cn('min-h-[80px] resize-none', className)}
+        disabled={disabled}
+      />
+
+      {showDropdown && filteredDevices.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-md border bg-popover p-1 shadow-md animate-in fade-in-0 zoom-in-95">
+          <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+            Devices in this department
+          </div>
+          {filteredDevices.map((device, idx) => (
+            <button
+              key={device.id}
+              type="button"
+              className={cn(
+                'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+                idx === selectedIndex
+                  ? 'bg-accent text-accent-foreground'
+                  : 'hover:bg-accent/50'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                insertMention(device);
+              }}
+              onMouseEnter={() => setSelectedIndex(idx)}
+            >
+              <div className="flex flex-col items-start">
+                <span className="font-medium">{device.name}</span>
+                <span className="text-xs text-muted-foreground">{device.internalCode}</span>
+              </div>
+              <span className={cn(
+                'ml-auto text-[10px] px-1.5 py-0.5 rounded-full',
+                device.currentStatusCode === 'operational'
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+              )}>
+                {device.currentStatusCode?.replace(/_/g, ' ')}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {mentions.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-1.5">
+          {mentions.map((m, i) => (
+            <span
+              key={`${m.deviceId}-${i}`}
+              className="inline-flex items-center gap-1 text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 px-1.5 py-0.5 rounded"
+            >
+              @{m.deviceName}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/rounds/round-calendar.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useRouter } from 'next/navigation';
+
+interface CalendarDay {
+  date: string;
+  day: number;
+  dayName: string;
+  isWorkingDay: boolean;
+  status: 'completed' | 'partial' | 'missed' | 'in_progress' | 'scheduled' | 'off_day';
+  round: {
+    id: string;
+    totalDepartments: number;
+    completedDepartments: number;
+    totalIssuesReported: number;
+    totalNotes: number;
+  } | null;
+}
+
+interface RoundCalendarProps {
+  month: number;
+  year: number;
+  calendarDays: CalendarDay[];
+  summary: {
+    totalWorkingDays: number;
+    completed: number;
+    missed: number;
+    complianceRate: number;
+  };
+  engineerName?: string;
+  onMonthChange?: (month: number, year: number) => void;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  completed: 'bg-green-500 dark:bg-green-600 hover:bg-green-600 dark:hover:bg-green-500',
+  partial: 'bg-yellow-400 dark:bg-yellow-600 hover:bg-yellow-500 dark:hover:bg-yellow-500',
+  missed: 'bg-red-400 dark:bg-red-600 hover:bg-red-500 dark:hover:bg-red-500',
+  in_progress: 'bg-blue-400 dark:bg-blue-600 hover:bg-blue-500 dark:hover:bg-blue-500 animate-pulse',
+  scheduled: 'bg-muted hover:bg-muted-foreground/20',
+  off_day: 'bg-transparent',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  completed: 'Completed',
+  partial: 'Partial',
+  missed: 'Missed',
+  in_progress: 'In Progress',
+  scheduled: 'Scheduled',
+  off_day: 'Off Day',
+};
+
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+export function RoundCalendar({
+  month,
+  year,
+  calendarDays,
+  summary,
+  engineerName,
+  onMonthChange,
+}: RoundCalendarProps) {
+  const router = useRouter();
+
+  // Build calendar grid (weeks × 7)
+  const firstDay = new Date(year, month - 1, 1).getDay(); // 0=Sun
+  const totalDays = calendarDays.length;
+  const weeks: (CalendarDay | null)[][] = [];
+
+  let currentWeek: (CalendarDay | null)[] = [];
+  // Pad start
+  for (let i = 0; i < firstDay; i++) {
+    currentWeek.push(null);
+  }
+  for (const day of calendarDays) {
+    currentWeek.push(day);
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  // Pad end
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < 7) {
+      currentWeek.push(null);
+    }
+    weeks.push(currentWeek);
+  }
+
+  const handlePrev = () => {
+    const newMonth = month === 1 ? 12 : month - 1;
+    const newYear = month === 1 ? year - 1 : year;
+    onMonthChange?.(newMonth, newYear);
+  };
+
+  const handleNext = () => {
+    const newMonth = month === 12 ? 1 : month + 1;
+    const newYear = month === 12 ? year + 1 : year;
+    onMonthChange?.(newMonth, newYear);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <button
+          onClick={handlePrev}
+          className="p-2 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+        >
+          ←
+        </button>
+        <div className="text-center">
+          <h3 className="font-semibold text-lg">
+            {MONTH_NAMES[month - 1]} {year}
+          </h3>
+          {engineerName && (
+            <p className="text-sm text-muted-foreground">{engineerName}</p>
+          )}
+        </div>
+        <button
+          onClick={handleNext}
+          className="p-2 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+        >
+          →
+        </button>
+      </div>
+
+      {/* Calendar Grid */}
+      <div className="rounded-lg border bg-card p-4">
+        {/* Day labels */}
+        <div className="grid grid-cols-7 gap-1 mb-2">
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (
+            <div key={d} className="text-center text-xs font-medium text-muted-foreground py-1">
+              {d}
+            </div>
+          ))}
+        </div>
+
+        {/* Weeks */}
+        <TooltipProvider delayDuration={200}>
+          <div className="grid grid-cols-7 gap-1">
+            {weeks.flat().map((day, idx) => {
+              if (!day) {
+                return <div key={`empty-${idx}`} className="aspect-square" />;
+              }
+
+              const isToday = day.date === new Date().toISOString().split('T')[0];
+
+              return (
+                <Tooltip key={day.date}>
+                  <TooltipTrigger asChild>
+                    <button
+                      className={cn(
+                        'aspect-square rounded-sm transition-all duration-150 relative flex items-center justify-center text-xs font-medium',
+                        STATUS_COLORS[day.status],
+                        day.status === 'off_day' ? 'text-muted-foreground/40' : 'text-white',
+                        day.status === 'scheduled' && 'text-muted-foreground',
+                        isToday && 'ring-2 ring-primary ring-offset-1 ring-offset-background',
+                        day.round ? 'cursor-pointer' : 'cursor-default',
+                      )}
+                      onClick={() => {
+                        if (day.round) {
+                          router.push(`/rounds/${day.round.id}`);
+                        }
+                      }}
+                    >
+                      {day.day}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="text-xs">
+                    <div className="space-y-0.5">
+                      <p className="font-medium">{day.date} — {STATUS_LABELS[day.status]}</p>
+                      {day.round && (
+                        <>
+                          <p>{day.round.completedDepartments}/{day.round.totalDepartments} departments</p>
+                          {day.round.totalIssuesReported > 0 && (
+                            <p>{day.round.totalIssuesReported} issues reported</p>
+                          )}
+                          {day.round.totalNotes > 0 && (
+                            <p>{day.round.totalNotes} notes</p>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        </TooltipProvider>
+      </div>
+
+      {/* Legend & Summary */}
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <span className="w-3 h-3 rounded-sm bg-green-500" /> Completed
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="w-3 h-3 rounded-sm bg-yellow-400" /> Partial
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="w-3 h-3 rounded-sm bg-red-400" /> Missed
+          </span>
+          <span className="flex items-center gap-1">
+            <span className="w-3 h-3 rounded-sm bg-muted border" /> Off Day
+          </span>
+        </div>
+        <div className="text-sm font-medium">
+          <span className={cn(
+            summary.complianceRate >= 80 ? 'text-green-600 dark:text-green-400' :
+            summary.complianceRate >= 50 ? 'text-yellow-600 dark:text-yellow-400' :
+            'text-red-600 dark:text-red-400'
+          )}>
+            {summary.complianceRate}% compliance
+          </span>
+          <span className="text-muted-foreground ml-1">
+            ({summary.completed}/{summary.totalWorkingDays} working days)
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}