@apptimate/ui 6.9.0 → 7.1.0

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

@@ -14,11 +14,12 @@ interface BulkAttendanceModalProps {
   onClose: () => void;
   onSuccess: () => void;
   fetchProjects?: () => Promise<any>;
+  fetchAccounts?: (type?: string) => Promise<any>;
   initialProjectId?: string;
   isFixedProject?: boolean;
 }
 
-export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects, initialProjectId, isFixedProject }: BulkAttendanceModalProps) {
+export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects, fetchAccounts, initialProjectId, isFixedProject }: BulkAttendanceModalProps) {
   const [projects, setProjects] = useState<any[]>([]);
   const [projectId, setProjectId] = useState<string>(initialProjectId || "");
   const [attendanceDate, setAttendanceDate] = useState<string>(new Date().toISOString().split("T")[0]);
@@ -26,28 +27,45 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
   const [globalEmployees, setGlobalEmployees] = useState<any[]>([]);
   const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [accounts, setAccounts] = useState<any[]>([]);
+  const [paymentAccountId, setPaymentAccountId] = useState<string>("");
 
-  // Time entries state: Record<employee_id, { in: string, out: string, break: number, isPresent: boolean }>
-  const [timeEntries, setTimeEntries] = useState<Record<string, { in: string, out: string, break: number, isPresent: boolean }>>({});
+  // Time entries state: Record<employee_id, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>
+  const [timeEntries, setTimeEntries] = useState<Record<string, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>>({});
 
   useEffect(() => {
     if (isOpen) {
       loadProjects();
       loadGlobalEmployees();
+      if (fetchAccounts) {
+        fetchAccounts("asset").then((res) => {
+          if (res.is_success && res.result) {
+            setAccounts(res.result);
+          }
+        });
+      }
       setAttendanceDate(new Date().toISOString().split("T")[0]);
       setProjectId(initialProjectId || "");
-      setEmployees([]);
+      setPaymentAccountId("");
       setTimeEntries({});
+      
+      // If initialProjectId is already set, the second useEffect won't trigger because projectId hasn't changed.
+      // So we force a load if we already have the ID.
+      if (initialProjectId) {
+         // loadEmployees will be triggered by the second useEffect if projectId changes.
+         // If it doesn't change, we need to call it here.
+         // We will just let the second useEffect handle it by adding isOpen to its dependencies.
+      }
     }
   }, [isOpen, initialProjectId]);
 
   useEffect(() => {
-    if (projectId && attendanceDate) {
+    if (isOpen && projectId && attendanceDate) {
       loadEmployees();
-    } else {
+    } else if (!isOpen) {
       setEmployees([]);
     }
-  }, [projectId, attendanceDate]);
+  }, [projectId, attendanceDate, isOpen]);
 
   const loadGlobalEmployees = async () => {
     try {
@@ -83,9 +101,23 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
         setEmployees(res.result);
         
         // Initialize time entries for these employees
-        const newEntries: Record<string, { in: string, out: string, break: number, isPresent: boolean }> = {};
+        const newEntries: Record<string, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }> = {};
         res.result.forEach((emp: any) => {
-          newEntries[emp.id] = { in: "09:00", out: "18:00", break: 0, isPresent: true };
+          let inTime = "09:00";
+          let outTime = "18:00";
+          let breakHrs = 0;
+          let isPresent = true;
+          let salaryAdvance = 0;
+          
+          if (emp.attendance) {
+              isPresent = emp.attendance.status === 'Present';
+              if (emp.attendance.punch_in_time) inTime = emp.attendance.punch_in_time;
+              if (emp.attendance.punch_out_time) outTime = emp.attendance.punch_out_time;
+              breakHrs = emp.attendance.break_hours || 0;
+              salaryAdvance = emp.attendance.salary_advance || 0;
+          }
+          
+          newEntries[emp.id] = { in: inTime, out: outTime, break: breakHrs, isPresent: isPresent, salaryAdvance: salaryAdvance };
         });
         setTimeEntries(newEntries);
       }
@@ -96,7 +128,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
     }
   };
 
-  const handleTimeChange = (empId: string, type: 'in' | 'out' | 'break' | 'isPresent', value: string | number | boolean) => {
+  const handleTimeChange = (empId: string, type: 'in' | 'out' | 'break' | 'isPresent' | 'salaryAdvance', value: string | number | boolean) => {
     setTimeEntries(prev => ({
       ...prev,
       [empId]: {
@@ -111,7 +143,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
     setEmployees(prev => [...prev, { id: fakeId, is_manual: true }]);
     setTimeEntries(prev => ({
       ...prev,
-      [fakeId]: { in: "09:00", out: "18:00", break: 0, isPresent: true }
+      [fakeId]: { in: "09:00", out: "18:00", break: 0, isPresent: true, salaryAdvance: 0 }
     }));
   };
 
@@ -157,7 +189,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
       employees.forEach(emp => {
         const entry = timeEntries[emp.id];
         
-        if (!entry || !entry.isPresent) return;
+        if (!entry) return;
         
         if (String(emp.id).startsWith('wf-')) {
             // It's a workforce gang worker
@@ -165,19 +197,45 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
             const workforceId = parts[1];
             const memberIdentifier = parts[2] || null;
 
-            if (entry.in || entry.out) {
+            if (entry.isPresent) {
+                if (entry.in || entry.out) {
+                    workforcePunches.push({
+                        workforce_id: Number(workforceId),
+                        project_id: Number(projectId),
+                        date: attendanceDate,
+                        member_identifier: memberIdentifier,
+                        punch_in_time: entry.in || null,
+                        punch_out_time: entry.out || null,
+                        break_hours: entry.break || 0,
+                        salary_advance: entry.salaryAdvance || 0,
+                    });
+                } else if (entry.salaryAdvance > 0) {
+                    // If they only have a salary advance but no punch
+                    workforcePunches.push({
+                        workforce_id: Number(workforceId),
+                        project_id: Number(projectId),
+                        date: attendanceDate,
+                        member_identifier: memberIdentifier,
+                        salary_advance: entry.salaryAdvance,
+                    });
+                }
+            } else {
+                // ABSENT
                 workforcePunches.push({
                     workforce_id: Number(workforceId),
                     project_id: Number(projectId),
                     date: attendanceDate,
                     member_identifier: memberIdentifier,
-                    punch_in_time: entry.in || null,
-                    punch_out_time: entry.out || null,
-                    break_hours: entry.break || 0,
+                    punch_in_time: null,
+                    punch_out_time: null,
+                    break_hours: 0,
+                    salary_advance: entry.salaryAdvance || 0,
                 });
             }
         } else {
             // It's a standard HR employee
+            if (!entry.isPresent) return; // Skip absent for HR for now
+
             if (entry.in) {
             hrPunches.push({
                 employee_id: emp.id,
@@ -191,8 +249,21 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                 employee_id: emp.id,
                 punch_at: `${attendanceDate} ${entry.out}:00`,
                 type: "O",
-                source: "Bulk"
+                source: "Bulk",
+                salary_advance: entry.salaryAdvance || 0
             });
+            } else if (!entry.in && entry.salaryAdvance > 0) {
+              // If they only have a salary advance but no punch
+              hrPunches.push({
+                employee_id: emp.id,
+                type: "ADVANCE", // Special type or handled by backend if punch_at is empty
+                source: "Bulk",
+                salary_advance: entry.salaryAdvance,
+                date: attendanceDate
+              });
+            } else if (hrPunches.length > 0 && entry.salaryAdvance > 0) {
+              // Add salary advance to the first punch we pushed for this employee
+              hrPunches[hrPunches.length - 1].salary_advance = entry.salaryAdvance;
             }
         }
       });
@@ -207,7 +278,10 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
 
       // Log HR punches
       if (hrPunches.length > 0) {
-        const hrRes = await bulkPunchAttendance({ punches: hrPunches });
+        const hrRes = await bulkPunchAttendance({ 
+          punches: hrPunches,
+          payment_account_id: paymentAccountId ? Number(paymentAccountId) : undefined
+        });
         if (!hrRes.is_success) {
             toast.error(hrRes.message || "Failed to log HR attendance");
             hasError = true;
@@ -218,9 +292,16 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
       if (workforcePunches.length > 0) {
         // use sendRequest from core-lib which is imported at the top of this file
         const { sendRequest } = require("@apptimate/core-lib");
-        const wfRes = await sendRequest({ url: "/api/construction/workforce-attendance/bulk-punch", method: "POST", data: { punches: workforcePunches } });
-        if (!(wfRes as any).is_success) {
-            toast.error((wfRes as any).message || "Failed to log Workforce attendance");
+        const wfRes = await sendRequest({ 
+            url: "/api/construction/workforce-attendance/bulk-punch", 
+            method: "POST", 
+            data: { 
+                punches: workforcePunches,
+                payment_account_id: paymentAccountId ? Number(paymentAccountId) : undefined
+            } 
+        });
+        if (!wfRes.responseData?.is_success) {
+            toast.error(wfRes.responseData?.message || "Failed to log Workforce attendance");
             hasError = true;
         }
       }
@@ -242,7 +323,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Bulk Attendance Log" size="2xl">
       <div className="space-y-4 py-2">
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Date <span className="text-danger-500">*</span></label>
             <Input
@@ -254,20 +335,28 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Project <span className="text-danger-500">*</span></label>
             <Select
+              options={projects.map((p) => ({ value: String(p.id), label: p.name }))}
               value={projectId}
               onChange={(e) => setProjectId(e.target.value)}
               disabled={isFixedProject}
-              options={[
-                { value: "", label: "Select Project..." },
-                ...projects.map((p) => ({
-                  value: String(p.id),
-                  label: p.name
-                }))
-              ]}
             />
           </div>
+          {fetchAccounts && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Payment Account <span className="text-gray-400 font-normal text-xs">(Salary Advances)</span></label>
+              <Select
+                options={[
+                  { value: "", label: "Default mapping" },
+                  ...accounts.map((a) => ({ value: String(a.id), label: `${a.code} - ${a.name}` }))
+                ]}
+                value={paymentAccountId}
+                onChange={(e) => setPaymentAccountId(e.target.value)}
+              />
+            </div>
+          )}
         </div>
 
+
         {projectId && attendanceDate && (
           <div className="mt-6 border border-gray-100 rounded-xl overflow-hidden bg-white shadow-sm">
             <Table>
@@ -277,7 +366,8 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-24">Present</TCell>
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">First In</TCell>
                   <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">Last Out</TCell>
-                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-32">Break (hrs)</TCell>
+                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-24">Break (hrs)</TCell>
+                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0 w-48">Salary Advance</TCell>
                 </TRow>
               </THeader>
               <TBody>
@@ -353,6 +443,41 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
                           title={!String(emp.id).startsWith('wf-') ? "Break hours are only applicable to Construction Workforce" : ""}
                         />
                       </TCell>
+                      <TCell label="Salary Advance">
+                        {emp.is_gang ? (
+                          <div className="flex items-center h-9">
+                            <span className="text-gray-400">-</span>
+                          </div>
+                        ) : (
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="number"
+                              step="0.01"
+                              min="0"
+                              value={timeEntries[emp.id]?.salaryAdvance || 0}
+                              onChange={(e) => handleTimeChange(emp.id, 'salaryAdvance', Number(e.target.value))}
+                              className="h-9 w-24 shrink-0"
+                              disabled={!timeEntries[emp.id]?.isPresent}
+                            />
+                            {emp.balance_due !== undefined && (
+                              <div className="text-[11px] text-gray-500 font-medium whitespace-nowrap">
+                                {timeEntries[emp.id]?.salaryAdvance > 0 ? (
+                                  <>
+                                    Owed: {Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0)} - {timeEntries[emp.id].salaryAdvance} = <strong className="text-gray-700">{Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0) - timeEntries[emp.id].salaryAdvance}</strong>
+                                  </>
+                                ) : (
+                                  <>Owed: {Number(emp.balance_due) + Number(emp.attendance?.salary_advance || 0)}</>
+                                )}
+                                {timeEntries[emp.id]?.isPresent && (
+                                  <span className="block text-[9.5px] text-blue-500/90 mt-0.5">
+                                    + Today's wage
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </TCell>
                     </TRow>
                   ))
                 )}

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

@@ -14,6 +14,7 @@ interface DailySchedulePanelProps {
 
 export default function DailySchedulePanel({ day, events, onCancelClick, onExchangeClick, onCancelExchangeRequest, onClose }: DailySchedulePanelProps) {
   const shifts = events.filter(e => e.type === 'shift' && e.segmentsInfo);
+  const projectAttendances = events.filter(e => e.type === 'project_attendance');
 
   return (
     <div className="absolute inset-0 z-30 lg:static lg:z-auto w-full lg:w-80 flex-shrink-0 bg-white rounded-[16px] border border-gray-200 overflow-hidden flex flex-col h-[calc(100vh-140px)] shadow-2xl lg:shadow-none">
@@ -34,19 +35,79 @@ export default function DailySchedulePanel({ day, events, onCancelClick, onExcha
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {projectAttendances.length > 0 && (
+          <div className="space-y-3">
+            <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider">Project Summary</h3>
+            {projectAttendances.map((pa, idx) => (
+              <div key={idx} className="bg-emerald-50 border border-emerald-100 rounded-xl overflow-hidden shadow-sm">
+                <div className="p-4 border-b border-emerald-100/50">
+                  <div className="font-bold text-emerald-900 mb-2">{pa.name}</div>
+                  <div className="flex justify-between items-center text-sm font-medium">
+                    <span className="text-emerald-700 flex items-center gap-1.5">
+                      <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
+                      {pa.present} Present
+                    </span>
+                    <span className="text-red-700 flex items-center gap-1.5">
+                      <div className="w-2 h-2 rounded-full bg-red-500"></div>
+                      {pa.absent} Absent
+                    </span>
+                  </div>
+                </div>
+                {pa.workers && pa.workers.length > 0 && (
+                  <div className="bg-white/60 p-3 space-y-2">
+                    {pa.workers.map((worker: any, wIdx: number) => (
+                      <div key={wIdx} className="flex flex-col border-b border-gray-100 last:border-0 pb-2 last:pb-0">
+                        <div className="flex justify-between items-center text-xs">
+                          <span className="font-medium text-gray-700 truncate pr-2">{worker.name}</span>
+                          <span className={`px-2 py-0.5 rounded-full font-semibold shrink-0 text-[10px] ${
+                            worker.status === 'Present' 
+                              ? 'bg-emerald-100 text-emerald-700' 
+                              : 'bg-red-100 text-red-700'
+                          }`}>
+                            {worker.status}
+                          </span>
+                        </div>
+                        {worker.status === 'Present' && (
+                          <div className="flex justify-between items-center text-[10px] text-gray-500 mt-1">
+                            <div className="flex items-center gap-1">
+                              <Clock className="w-3 h-3" />
+                              <span>
+                                {worker.punch_in_time ? worker.punch_in_time.substring(0,5) : '--:--'} - {worker.punch_out_time ? worker.punch_out_time.substring(0,5) : '--:--'}
+                              </span>
+                            </div>
+                            {worker.break_hours > 0 ? (
+                              <span className="bg-gray-100 px-1.5 py-0.5 rounded font-medium">Break: {worker.break_hours}h</span>
+                            ) : null}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
         {shifts.length === 0 ? (
-          <div className="border border-dashed border-gray-200 rounded-xl p-4 flex items-center gap-3 text-gray-400">
-            <CalendarIcon className="w-5 h-5" />
-            <div className="text-sm">
-              <div className="font-semibold text-gray-500">Available for Swap</div>
-              <div className="text-xs mt-0.5">No shifts scheduled today</div>
+          projectAttendances.length === 0 && (
+            <div className="border border-dashed border-gray-200 rounded-xl p-4 flex items-center gap-3 text-gray-400">
+              <CalendarIcon className="w-5 h-5" />
+              <div className="text-sm">
+                <div className="font-semibold text-gray-500">Available for Swap</div>
+                <div className="text-xs mt-0.5">No shifts scheduled today</div>
+              </div>
             </div>
-          </div>
+          )
         ) : (
-          shifts.map((shift, shiftIdx) => (
-            <div key={shiftIdx} className="space-y-4">
-              {shift.segmentsInfo.map((info: any, idx: number) => (
-                <div key={idx} className="border border-gray-200 rounded-xl overflow-hidden relative shadow-sm">
+          <div className="space-y-3">
+            {projectAttendances.length > 0 && (
+              <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider mt-2">Shifts</h3>
+            )}
+            {shifts.map((shift, shiftIdx) => (
+              <div key={shiftIdx} className="space-y-4">
+                {shift.segmentsInfo.map((info: any, idx: number) => (
+                  <div key={idx} className="border border-gray-200 rounded-xl overflow-hidden relative shadow-sm">
                   <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#0D6EFD]"></div>
                   <div className="p-4 pl-5">
                     <div className="flex justify-between items-start mb-1">
@@ -131,7 +192,8 @@ export default function DailySchedulePanel({ day, events, onCancelClick, onExcha
                 </div>
               ))}
             </div>
-          ))
+          ))}
+          </div>
         )}
       </div>
     </div>

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

@@ -32,7 +32,7 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
 
   const [currentDate, setCurrentDate] = useState(new Date());
   const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<{ holidays: any[], leaves: any[], rosters: any[], exchanges: any[] }>({
+  const [data, setData] = useState<{ holidays: any[], leaves: any[], rosters: any[], exchanges: any[], projectAttendance?: Record<string, any> }>({
     holidays: [], leaves: [], rosters: [], exchanges: []
   });
 
@@ -96,14 +96,18 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
       }
 
       if (attendanceRes.status === 'fulfilled' && attendanceRes.value && (attendanceRes.value as any).is_success) {
-        const days = (attendanceRes.value as any).result?.days || [];
+        const days = (attendanceRes.value as any).result?.days || (attendanceRes.value as any).result?.data || [];
         const map: Record<string, string> = {};
+        const fullMap: Record<string, any> = {};
         days.forEach((d: any) => {
-          if (d.date && d.status) {
-            map[d.date] = d.status;
+          if (d.date) {
+            if (d.status) map[d.date] = d.status;
+            fullMap[d.date] = d;
           }
         });
         setAttendanceMap(map);
+        // Also save the full day data so we can display project attendance counts
+        setData(prev => ({ ...prev, projectAttendance: fullMap }));
       }
     } catch {
       // Silently fail for summary/attendance
@@ -202,6 +206,20 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
 
     // Exchanges are now mapped directly into shift segmentsInfo.
 
+    // 4. Project Workforce Attendance (Summary)
+    if (data.projectAttendance) {
+      const pData = data.projectAttendance[format(day, 'yyyy-MM-dd')];
+      if (pData) {
+        events.push({
+          type: 'project_attendance',
+          name: 'Workforce Attendance',
+          present: parseInt(pData.present_count || '0', 10),
+          absent: parseInt(pData.absent_count || '0', 10),
+          workers: pData.workers || [],
+        });
+      }
+    }
+
     return events;
   };
 
@@ -373,15 +391,17 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
                           ? 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 === 'project_attendance'
+                              ? 'bg-emerald-50 text-emerald-700 border border-emerald-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' ? (
@@ -397,6 +417,14 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
                             </div>
                           )}
                         </>
+                      ) : evt.type === 'project_attendance' ? (
+                        <div className="flex flex-col gap-0.5">
+                          <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
+                          <div className="flex gap-2 text-[10px] opacity-80 mt-0.5">
+                            <span className="font-medium text-emerald-800">{evt.present} Present</span>
+                            <span className="font-medium text-red-800">{evt.absent} Absent</span>
+                          </div>
+                        </div>
                       ) : (
                         <div className="truncate font-semibold text-xs leading-tight">{evt.name}</div>
                       )}