@apptimate/ui 5.1.0 → 5.3.0

package/src/common-components/attendance-shifts/ShiftCalendar.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from '../../index';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { format, addMonths, subMonths, addWeeks, subWeeks, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isSameDay } from 'date-fns';
+import { getEmployeeCalendar, toggleSegmentCancellation, requestSegmentExchange, cancelSegmentExchange, getCalendarSummary, getAttendanceDays } from '@apptimate/core-lib';
+import DailySchedulePanel from './DailySchedulePanel';
+import CancelShiftModal from './CancelShiftModal';
+import ExchangeShiftModal from './ExchangeShiftModal';
+import SummaryStrip, { type SummaryData } from './SummaryStrip';
+import CalendarLegend from './CalendarLegend';
+import toast from 'react-hot-toast';
+
+interface ShiftCalendarProps {
+  employeeId?: string | number;
+  projectId?: string | number;
+  workforceId?: string | number;
+  showSummary?: boolean;
+  showLegend?: boolean;
+}
+
+export default function ShiftCalendar({ employeeId, projectId, workforceId, showSummary = true, showLegend = true }: ShiftCalendarProps) {
+  const [viewMode, setViewMode] = useState<'month' | 'week'>('month');
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null);
+  
+  // Modal states
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [exchangeModalOpen, setExchangeModalOpen] = useState(false);
+  const [activeShift, setActiveShift] = useState<any>(null);
+  const [activeSegmentNo, setActiveSegmentNo] = useState<number | null>(null);
+
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<{ holidays: any[], leaves: any[], rosters: any[], exchanges: any[] }>({
+    holidays: [], leaves: [], rosters: [], exchanges: []
+  });
+
+  const [summaryData, setSummaryData] = useState<SummaryData>({
+    workingDays: 0, present: 0, absent: 0, leave: 0, lop: 0,
+    holidays: 0, weeklyOffs: 0, otDays: 0, otHours: 0, lates: 0,
+  });
+  const [attendanceMap, setAttendanceMap] = useState<Record<string, string>>({});
+
+  const fetchCalendarData = useCallback(async (start: Date, end: Date) => {
+    try {
+      setLoading(true);
+      const startStr = format(start, 'yyyy-MM-dd');
+      const endStr = format(end, 'yyyy-MM-dd');
+      const res = await getEmployeeCalendar(employeeId || 0, startStr, endStr, projectId, workforceId);
+      if (res.is_success && res.result) {
+        setData(res.result);
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Failed to load calendar data");
+    } finally {
+      setLoading(false);
+    }
+  }, [employeeId]);
+
+  const monthStart = startOfMonth(currentDate);
+  const monthEnd = endOfMonth(monthStart);
+  
+  const startDate = viewMode === 'month' ? startOfWeek(monthStart) : startOfWeek(currentDate);
+  const endDate = viewMode === 'month' ? endOfWeek(monthEnd) : endOfWeek(currentDate);
+
+  const startMs = startDate.getTime();
+  const endMs = endDate.getTime();
+
+  const fetchSummaryAndAttendance = useCallback(async (start: Date, end: Date) => {
+    const monthStr = format(start, 'yyyy-MM');
+    const startStr = format(start, 'yyyy-MM-dd');
+    const endStr = format(end, 'yyyy-MM-dd');
+    try {
+      const [summaryRes, attendanceRes] = await Promise.allSettled([
+        showSummary ? getCalendarSummary(employeeId, monthStr) : Promise.resolve(null),
+        getAttendanceDays(employeeId || 0, startStr, endStr, projectId, workforceId),
+      ]);
+
+      if (summaryRes.status === 'fulfilled' && summaryRes.value && (summaryRes.value as any).is_success) {
+        const r = (summaryRes.value as any).result;
+        if (r) {
+          setSummaryData({
+            workingDays: r.working_days ?? 0,
+            present: r.present ?? 0,
+            absent: r.absent ?? 0,
+            leave: r.leave ?? 0,
+            lop: r.lop ?? 0,
+            holidays: r.holidays ?? 0,
+            weeklyOffs: r.weekly_offs ?? 0,
+            otDays: r.ot_days ?? 0,
+            otHours: r.ot_hours ?? 0,
+            lates: r.lates ?? 0,
+          });
+        }
+      }
+
+      if (attendanceRes.status === 'fulfilled' && attendanceRes.value && (attendanceRes.value as any).is_success) {
+        const days = (attendanceRes.value as any).result?.days || [];
+        const map: Record<string, string> = {};
+        days.forEach((d: any) => {
+          if (d.date && d.status) {
+            map[d.date] = d.status;
+          }
+        });
+        setAttendanceMap(map);
+      }
+    } catch {
+      // Silently fail for summary/attendance
+    }
+  }, [employeeId, showSummary]);
+
+  useEffect(() => {
+    fetchCalendarData(startDate, endDate);
+    fetchSummaryAndAttendance(monthStart, monthEnd);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startMs, endMs, fetchCalendarData, fetchSummaryAndAttendance]);
+
+  const prev = () => setCurrentDate(viewMode === 'month' ? subMonths(currentDate, 1) : subWeeks(currentDate, 1));
+  const next = () => setCurrentDate(viewMode === 'month' ? addMonths(currentDate, 1) : addWeeks(currentDate, 1));
+
+  const dateFormat = "d";
+  const days = eachDayOfInterval({ start: startDate, end: endDate });
+
+  const getAttendanceBorderClass = (day: Date): string => {
+    const key = format(day, 'yyyy-MM-dd');
+    const status = attendanceMap[key];
+    switch (status) {
+      case 'P': return 'border-l-[3px] border-l-emerald-400';
+      case 'A': return 'border-l-[3px] border-l-red-400';
+      case 'HD': return 'border-l-[3px] border-l-orange-400';
+      case 'L': return 'border-l-[3px] border-l-teal-400';
+      default: return '';
+    }
+  };
+
+  const getDayEvents = (day: Date) => {
+    const events = [];
+
+    // 1. Holidays
+    const holiday = data.holidays?.find(h => isSameDay(new Date(h.date), day));
+    if (holiday) {
+      events.push({ type: 'holiday', name: holiday.name, isOptional: holiday.is_optional });
+    }
+
+    // 2. Leaves
+    const leave = data.leaves?.find(l => {
+      if (!l.from_date || !l.to_date) return false;
+      const from = new Date(l.from_date);
+      const to = new Date(l.to_date);
+      from.setHours(0, 0, 0, 0);
+      to.setHours(23, 59, 59, 999);
+      return day >= from && day <= to;
+    });
+    if (leave) {
+      events.push({ type: 'leave', name: `${leave.leave_type?.name} (${leave.status})`, status: leave.status });
+    }
+
+    // 3. Shifts & Work Off
+    const roster = data.rosters?.find(r => r.roster_date && isSameDay(new Date(r.roster_date), day));
+    if (roster) {
+      if (roster.day_type === 'off') {
+        events.push({ type: 'off_day', name: 'Work Off' });
+      } else if (roster.template) {
+        const template = roster.template;
+        const rosterCancelled = roster.cancelled_segments || [];
+        // Check for exchanges on this day
+        const dayExchanges = data.exchanges?.filter(e => 
+          (e.requester_roster_date && isSameDay(new Date(e.requester_roster_date), day)) ||
+          (e.responder_roster_date && isSameDay(new Date(e.responder_roster_date), day))
+        ) || [];
+
+        const segmentsInfo = template.segments.map((s: any) => {
+          const isCancelled = rosterCancelled.some((c: any) => 
+            (typeof c === 'object' ? c.segment_no === s.segment_no : c === s.segment_no)
+          );
+          
+          const pendingExchange = dayExchanges.find(e => 
+            e.status === 'pending' && 
+            e.requester_segments && 
+            e.requester_segments.includes(s.segment_no)
+          );
+
+          return {
+            segment_no: s.segment_no,
+            str: `${s.start_time?.slice(0, 5) || ''} - ${s.end_time?.slice(0, 5) || ''}`,
+            isCancelled,
+            isExchangePending: !!pendingExchange,
+            pendingExchange
+          };
+        });
+
+        events.push({ 
+          type: 'shift', 
+          name: template.name, 
+          segmentsInfo,
+          roster_date: roster.roster_date,
+          template: roster.template
+        });
+      }
+    }
+
+    // Exchanges are now mapped directly into shift segmentsInfo.
+
+    return events;
+  };
+
+  const handleToggleCancel = async (roster_date: string, segment_no: number, reason?: string) => {
+    try {
+      const res = await toggleSegmentCancellation(employeeId, { roster_date, segment_no, reason });
+      if (res.is_success) {
+        toast.success(res.message);
+        fetchCalendarData(startDate, endDate);
+      } else {
+        toast.error(res.message || "Failed to update segment");
+      }
+    } catch (err: any) {
+      toast.error(err.message || "An error occurred");
+    }
+  };
+
+  const handleExchange = async (roster_date: string, segment_no: number, responder_id: number) => {
+    try {
+      // Stub for now. Once we create the Exchange API endpoint, we will call it here.
+      toast.success(`Exchange initiated with Employee ID ${responder_id} for segment ${segment_no}`);
+    } catch (err: any) {
+      toast.error(err.message || "An error occurred");
+    }
+  };
+
+  const handleDayClick = (day: Date) => {
+    setSelectedDay(day);
+  };
+
+  const handlePanelCancel = (shift: any, segment_no: number) => {
+    setActiveShift(shift);
+    setActiveSegmentNo(segment_no);
+    setCancelModalOpen(true);
+  };
+
+  const handlePanelExchange = (shift: any, segment_no: number) => {
+    setActiveShift(shift);
+    setActiveSegmentNo(segment_no);
+    setExchangeModalOpen(true);
+  };
+
+  const handleConfirmCancel = async (reason: string) => {
+    setCancelModalOpen(false);
+    if (!selectedDay || activeSegmentNo === null) return;
+    await handleToggleCancel(format(selectedDay, 'yyyy-MM-dd'), activeSegmentNo, reason);
+  };
+
+  const handleCancelExchangeRequest = async (exchangeId: number) => {
+    try {
+      const res = await cancelSegmentExchange(employeeId, exchangeId);
+      if (res.is_success) {
+        toast.success(res.message || "Exchange request cancelled");
+        fetchCalendarData(startDate, endDate);
+      } else {
+        toast.error(res.message || "Failed to cancel request");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+    }
+  };
+
+  const handleConfirmExchange = async (responderId: number, note: string) => {
+    if (!selectedDay || activeSegmentNo === null) return;
+    try {
+      const res = await requestSegmentExchange(employeeId, {
+        roster_date: format(selectedDay, 'yyyy-MM-dd'),
+        segment_no: activeSegmentNo,
+        requester_id: Number(employeeId === 'me' ? 0 : employeeId), // Ideally we pass the real ID, but controller uses data['requester_id']. Wait, in ESS `me` is tricky. Let's just pass `employeeId` if not 'me'.
+        responder_id: responderId,
+        reason: note
+      });
+      if (res.is_success) {
+        toast.success("Exchange requested successfully!");
+        setExchangeModalOpen(false);
+        fetchCalendarData(startDate, endDate);
+      } else {
+        toast.error(res.message || "Failed to request exchange");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+    }
+  };
+
+  return (
+    <div className="flex gap-4 items-start w-full">
+      {/* Main Calendar View */}
+      <div className="flex-1 bg-white rounded-[16px] border border-gray-200 overflow-hidden shadow-sm flex flex-col relative h-[calc(100vh-140px)]">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-100 flex items-center justify-between">
+        <h2 className="text-xl font-bold text-[#2D3142]">
+          {viewMode === 'month' 
+            ? format(currentDate, 'MMMM yyyy') 
+            : `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`}
+        </h2>
+        <div className="flex items-center gap-4">
+          <div className="flex p-0.5 bg-gray-100 rounded-lg">
+            <button
+              onClick={() => setViewMode('month')}
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${viewMode === 'month' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+            >
+              Month
+            </button>
+            <button
+              onClick={() => setViewMode('week')}
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${viewMode === 'week' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+            >
+              Week
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Button variant="bordered" size="small" onClick={prev} icon={<ChevronLeft size={16} />} />
+            <Button variant="bordered" size="small" onClick={() => setCurrentDate(new Date())}>Today</Button>
+            <Button variant="bordered" size="small" onClick={next} icon={<ChevronRight size={16} />} />
+          </div>
+        </div>
+      </div>
+
+      {/* Summary Strip */}
+      {showSummary && (
+        <div className="px-4 pt-3">
+          <SummaryStrip data={summaryData} />
+        </div>
+      )}
+
+      {/* Legend */}
+      {showLegend && (
+        <div className="px-4 pt-1">
+          <CalendarLegend />
+        </div>
+      )}
+
+      {/* Grid */}
+      <div className="flex-1 w-full bg-gray-50/50 p-4">
+        {/* Days Header */}
+        <div className="grid grid-cols-7 mb-2">
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (
+            <div key={d} className="text-center text-[12px] font-bold text-gray-400 uppercase tracking-wider">{d}</div>
+          ))}
+        </div>
+
+        {/* Days Grid */}
+        <div className="grid grid-cols-7 gap-3">
+          {days.map((day, idx) => {
+            const isCurrentMonth = isSameMonth(day, monthStart);
+            const isToday = isSameDay(day, new Date());
+            const events = (viewMode === 'month' && !isCurrentMonth) ? [] : getDayEvents(day);
+
+            return (
+              <div 
+                key={idx} 
+                onClick={() => handleDayClick(day)}
+                className={`rounded-xl p-3 border transition-colors cursor-pointer ${
+                  viewMode === 'month' ? 'min-h-[120px]' : 'min-h-[250px]'
+                } ${
+                  isCurrentMonth || viewMode === 'week' ? 'bg-white border-gray-200 hover:border-gray-300' : 'bg-gray-50/50 border-transparent text-gray-400'
+                } ${isToday ? 'ring-2 ring-primary-500 ring-offset-2' : ''} ${getAttendanceBorderClass(day)}`}
+              >
+                <div className={`text-sm font-semibold mb-2 ${isToday ? 'text-primary-600' : isCurrentMonth ? 'text-gray-700' : 'text-gray-400'}`}>
+                  {format(day, dateFormat)}
+                </div>
+                
+                <div className="flex flex-col gap-1.5">
+                  {events.map((evt, i) => (
+                    <div 
+                      key={i} 
+                      className={`overflow-hidden rounded-md ${
+                        evt.type === 'holiday' 
+                          ? evt.isOptional ? 'bg-warning-50 text-warning-700 border border-warning-100 p-1.5' : 'bg-primary-50 text-primary-700 border border-primary-100 p-1.5'
+                          : evt.type === 'leave'
+                            ? evt.status === 'approved' ? 'bg-success-50 text-success-700 border border-success-100 p-1.5' : 'bg-gray-100 text-gray-700 border border-gray-200 p-1.5'
+                            : evt.type === 'shift'
+                              ? 'bg-[#0D6EFD] text-white p-1.5 flex flex-col gap-0.5'
+                              : evt.type === 'exchange'
+                                ? evt.isPending 
+                                  ? 'bg-amber-50 text-amber-700 border border-amber-200 p-1.5 border-dashed' 
+                                  : 'bg-indigo-50 text-indigo-700 border border-indigo-200 p-1.5'
+                              : evt.type === 'off_day'
+                                ? 'bg-white text-red-600 border border-red-200 p-1.5'
+                                : 'bg-purple-50 text-purple-700 border border-purple-200 p-1.5'
+                      }`}
+                    >
+                      {evt.type === 'shift' ? (
+                        <>
+                          <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
+                          {evt.segmentsInfo && evt.segmentsInfo.length > 0 && (
+                            <div className="flex flex-col">
+                              {evt.segmentsInfo.map((info: any, idx: number) => (
+                                <div key={idx} className={`truncate text-[10px] leading-tight ${info.isCancelled ? 'line-through text-blue-200' : 'text-blue-100'}`}>
+                                  {info.str} {info.isExchangePending && <span className="text-amber-300 ml-1 font-bold">(Swap Pending)</span>}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </>
+                      ) : (
+                        <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      
+      {loading && (
+        <div className="absolute inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center z-10">
+          <div className="w-8 h-8 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
+        </div>
+      )}
+
+      </div>
+
+      {/* Right Sidebar - Daily Schedule */}
+      {selectedDay && (
+        <DailySchedulePanel
+          day={selectedDay}
+          events={getDayEvents(selectedDay)}
+          onCancelClick={handlePanelCancel}
+          onExchangeClick={handlePanelExchange}
+          onCancelExchangeRequest={handleCancelExchangeRequest}
+          onClose={() => setSelectedDay(null)}
+        />
+      )}
+      {/* Modals */}
+      <CancelShiftModal
+        isOpen={cancelModalOpen}
+        onClose={() => setCancelModalOpen(false)}
+        day={selectedDay}
+        shift={activeShift}
+        segmentNo={activeSegmentNo}
+        onConfirm={handleConfirmCancel}
+      />
+
+      <ExchangeShiftModal
+        isOpen={exchangeModalOpen}
+        onClose={() => setExchangeModalOpen(false)}
+        day={selectedDay}
+        shift={activeShift}
+        segmentNo={activeSegmentNo}
+        onConfirm={handleConfirmExchange}
+      />
+    </div>
+  );
+}