@apptimate/ui 5.1.0 → 5.3.0

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table, THeader, TBody, TRow, TCell } from '../../base-components/Table';
+import { EmptyState } from '../../base-components/EmptyState';
+
+export interface AttendanceTimesheetsProps {
+  projectId?: string;
+}
+
+export default function AttendanceTimesheets({ projectId }: AttendanceTimesheetsProps) {
+  // This is a placeholder for the actual HR Attendance Timesheets component.
+  // It is designed to be shared across hr-ui and construction-ui.
+
+  return (
+    <div className="flex flex-col w-full h-full">
+      <div className="mb-4">
+        <h2 className="text-lg font-bold text-gray-900">Timesheets {projectId ? `for Project: ${projectId}` : ''}</h2>
+        <p className="text-sm text-gray-500">Manage and view employee attendance records.</p>
+      </div>
+
+      <div className="border border-gray-100 rounded-lg overflow-hidden flex-1">
+        <Table>
+          <THeader>
+            <TRow>
+              <TCell isHeader>Employee Name</TCell>
+              <TCell isHeader>Date</TCell>
+              <TCell isHeader>Shift</TCell>
+              <TCell isHeader>Punch In</TCell>
+              <TCell isHeader>Punch Out</TCell>
+              <TCell isHeader>Status</TCell>
+            </TRow>
+          </THeader>
+          <TBody>
+            <TRow>
+              <TCell colSpan={6}>
+                <EmptyState message="No timesheet records found for this period." />
+              </TCell>
+            </TRow>
+          </TBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+
+const legendItems = [
+  { label: "Present", dotClass: "bg-emerald-500" },
+  { label: "Absent", dotClass: "bg-red-500" },
+  { label: "Leave Approved", dotClass: "bg-emerald-400" },
+  { label: "Leave Pending", dotClass: "bg-amber-400" },
+  { label: "Holiday", dotClass: "bg-indigo-500" },
+  { label: "Weekly Off", dotClass: "bg-gray-400" },
+  { label: "OT", dotClass: "bg-purple-500" },
+  { label: "On Duty", dotClass: "bg-teal-500" },
+];
+
+export default function CalendarLegend() {
+  return (
+    <div className="flex items-center gap-4 flex-wrap px-1 py-2">
+      {legendItems.map((item) => (
+        <div key={item.label} className="flex items-center gap-1.5">
+          <span className={`w-2.5 h-2.5 rounded-full ${item.dotClass} ring-2 ring-white shadow-sm`} />
+          <span className="text-[11px] font-medium text-gray-500">{item.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { Modal, Button } from '../../index';
+import { Clock, MapPin, AlertTriangle, AlertCircle } from 'lucide-react';
+import { format } from 'date-fns';
+
+interface CancelShiftModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  day: Date | null;
+  shift: any;
+  segmentNo: number | null;
+  onConfirm: (reason: string) => void;
+}
+
+export default function CancelShiftModal({ isOpen, onClose, day, shift, segmentNo, onConfirm }: CancelShiftModalProps) {
+  const [reason, setReason] = useState("");
+  const [details, setDetails] = useState("");
+  const [acknowledged, setAcknowledged] = useState(false);
+
+  if (!isOpen || !day || !shift || segmentNo === null) return null;
+
+  const segment = shift.segmentsInfo.find((s: any) => s.segment_no === segmentNo);
+
+  const handleConfirm = () => {
+    onConfirm(reason);
+    setReason("");
+    setDetails("");
+    setAcknowledged(false);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <div className="flex bg-gray-50 h-[500px] overflow-hidden rounded-[16px]">
+        {/* Left Panel - Shift Details */}
+        <div className="w-[350px] bg-white border-r border-gray-200 p-6 flex flex-col h-full relative">
+          <div className="absolute left-0 top-0 bottom-0 w-1.5 bg-[#DC3545]"></div>
+          
+          <div className="text-[#DC3545] text-xs font-bold uppercase tracking-wider mb-2">Cancel Confirmation</div>
+          <h2 className="text-3xl font-bold text-gray-900 mb-8">Shift Details</h2>
+
+          <div className="space-y-6 flex-1">
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0 text-[#0D6EFD]">
+                <Clock className="w-5 h-5" />
+              </div>
+              <div>
+                <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Time & Date</div>
+                <div className="text-lg font-bold text-gray-900">{segment?.str}</div>
+                <div className="text-sm text-gray-500">{format(day, 'EEEE, MMM d, yyyy')}</div>
+              </div>
+            </div>
+
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0 text-[#0D6EFD]">
+                <MapPin className="w-5 h-5" />
+              </div>
+              <div>
+                <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Location & Role</div>
+                <div className="text-lg font-bold text-gray-900">Main Logistics Hub</div>
+                <div className="text-sm text-gray-500">{shift.template?.name || 'Shift'}</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-red-50/50 border border-red-100 rounded-xl p-4 mt-auto">
+            <div className="flex items-center gap-2 text-red-600 font-bold text-xs uppercase tracking-wider mb-2">
+              <AlertTriangle className="w-4 h-4" />
+              Cancellation Policy
+            </div>
+            <p className="text-xs text-gray-600 leading-relaxed">
+              Cancellations within 24 hours of start time may result in a performance deduction. Repeated late cancellations can affect your priority status.
+            </p>
+          </div>
+        </div>
+
+        {/* Right Panel - Reason Form */}
+        <div className="flex-1 p-8 flex flex-col bg-white">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">Cancellation Reason</h2>
+          
+          <div className="flex-1 space-y-6">
+            <div>
+              <label className="block text-sm font-bold text-gray-700 mb-2">
+                Primary Reason <span className="text-red-500">*</span>
+              </label>
+              <select 
+                className="w-full h-11 border-gray-200 rounded-lg text-gray-700 focus:ring-blue-500 focus:border-blue-500"
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+              >
+                <option value="">Select a reason...</option>
+                <option value="Personal Emergency">Personal Emergency</option>
+                <option value="Sick Leave">Sick Leave</option>
+                <option value="Transportation Issue">Transportation Issue</option>
+                <option value="Family Responsibility">Family Responsibility</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-bold text-gray-700 mb-2">
+                Additional Details (Optional)
+              </label>
+              <textarea 
+                className="w-full border-gray-200 rounded-lg text-gray-700 focus:ring-blue-500 focus:border-blue-500 resize-none h-28 p-3"
+                placeholder="Briefly explain the situation to your manager..."
+                value={details}
+                onChange={(e) => setDetails(e.target.value)}
+              />
+            </div>
+
+            <label className="flex items-start gap-3 p-4 bg-gray-50 rounded-xl border border-gray-100 cursor-pointer">
+              <div className="pt-0.5">
+                <input 
+                  type="checkbox" 
+                  className="w-4 h-4 rounded border-gray-300 text-[#0D6EFD] focus:ring-[#0D6EFD]" 
+                  checked={acknowledged}
+                  onChange={(e) => setAcknowledged(e.target.checked)}
+                />
+              </div>
+              <span className="text-sm text-gray-600">
+                I acknowledge that I have read the cancellation policy and understand the potential impact on my schedule reliability score.
+              </span>
+            </label>
+          </div>
+
+          <div className="flex gap-3 pt-6 mt-auto border-t border-gray-100">
+            <Button 
+              className="flex-1 h-12 bg-red-400 hover:bg-red-500 text-white font-bold text-base"
+              isDisabled={!reason || !acknowledged}
+              onClick={handleConfirm}
+              icon={<AlertCircle className="w-5 h-5" />}
+            >
+              Confirm Cancellation
+            </Button>
+            <Button 
+              variant="flat"
+              color="secondary"
+              className="flex-1 h-12 bg-[#E2E8F0] hover:bg-gray-300 text-gray-700 font-bold text-base border-0"
+              onClick={onClose}
+            >
+              Keep Shift
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,198 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { format, addDays, subDays } from "date-fns";
+import { getDailyOverview } from "@apptimate/core-lib";
+import { ChevronLeft, ChevronRight, Briefcase, CalendarOff, Palmtree, UserX } from "lucide-react";
+import { Button, TLoader } from "../../index";
+
+interface DailyOverviewProps {
+  initialDate?: Date;
+}
+
+export default function DailyOverview({ initialDate = new Date() }: DailyOverviewProps) {
+  const [selectedDate, setSelectedDate] = useState<Date>(initialDate);
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchOverview = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await getDailyOverview(format(selectedDate, "yyyy-MM-dd"));
+      if (res.is_success && res.result) {
+        setData(res.result);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [selectedDate]);
+
+  useEffect(() => {
+    fetchOverview();
+  }, [fetchOverview]);
+
+  const handlePrevDay = () => setSelectedDate((prev) => subDays(prev, 1));
+  const handleNextDay = () => setSelectedDate((prev) => addDays(prev, 1));
+  const handleToday = () => setSelectedDate(new Date());
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between bg-white p-4 rounded-[16px] border border-gray-200 shadow-sm">
+        <div className="flex items-center gap-4">
+          <h2 className="text-xl font-bold text-gray-900 w-48">{format(selectedDate, "EEEE, MMM d, yyyy")}</h2>
+          <div className="flex items-center bg-gray-50 rounded-lg border border-gray-200 p-1">
+            <button onClick={handlePrevDay} className="p-1.5 hover:bg-white hover:shadow-sm rounded-md transition-all text-gray-600">
+              <ChevronLeft size={18} />
+            </button>
+            <button onClick={handleToday} className="px-3 py-1.5 text-sm font-medium hover:bg-white hover:shadow-sm rounded-md transition-all text-gray-700">
+              Today
+            </button>
+            <button onClick={handleNextDay} className="p-1.5 hover:bg-white hover:shadow-sm rounded-md transition-all text-gray-600">
+              <ChevronRight size={18} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="h-64 flex items-center justify-center bg-white rounded-[16px] border border-gray-200 shadow-sm">
+          <TLoader />
+        </div>
+      ) : data ? (
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">
+          
+          {/* Working */}
+          <div className="bg-white rounded-[16px] border border-gray-200 shadow-sm flex flex-col overflow-hidden">
+            <div className="p-4 border-b border-gray-100 flex items-center gap-3 bg-blue-50/50">
+              <div className="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center">
+                <Briefcase size={16} />
+              </div>
+              <div>
+                <h3 className="font-bold text-gray-900 leading-tight">Working</h3>
+                <p className="text-xs font-medium text-gray-500">{data.working?.length || 0} Employees</p>
+              </div>
+            </div>
+            <div className="p-2 flex-1 overflow-y-auto max-h-[500px]">
+              {data.working && data.working.length > 0 ? (
+                <div className="space-y-1">
+                  {data.working.map((emp: any, idx: number) => (
+                    <div key={idx} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-xl transition-colors group">
+                      <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex flex-shrink-0 items-center justify-center font-bold text-xs uppercase overflow-hidden">
+                        {emp.avatar ? <img src={emp.avatar} alt={emp.name} className="w-full h-full object-cover" /> : emp.name.charAt(0)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-semibold text-gray-900 truncate">{emp.name}</div>
+                        <div className="text-[11px] text-gray-500 truncate">{emp.shift?.name || 'Assigned Shift'}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-6 text-center text-gray-400 text-sm">No employees working.</div>
+              )}
+            </div>
+          </div>
+
+          {/* On Leave */}
+          <div className="bg-white rounded-[16px] border border-gray-200 shadow-sm flex flex-col overflow-hidden">
+            <div className="p-4 border-b border-gray-100 flex items-center gap-3 bg-amber-50/50">
+              <div className="w-8 h-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center">
+                <CalendarOff size={16} />
+              </div>
+              <div>
+                <h3 className="font-bold text-gray-900 leading-tight">On Leave</h3>
+                <p className="text-xs font-medium text-gray-500">{data.on_leave?.length || 0} Employees</p>
+              </div>
+            </div>
+            <div className="p-2 flex-1 overflow-y-auto max-h-[500px]">
+              {data.on_leave && data.on_leave.length > 0 ? (
+                <div className="space-y-1">
+                  {data.on_leave.map((emp: any, idx: number) => (
+                    <div key={idx} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-xl transition-colors group">
+                      <div className="w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex flex-shrink-0 items-center justify-center font-bold text-xs uppercase overflow-hidden">
+                        {emp.avatar ? <img src={emp.avatar} alt={emp.name} className="w-full h-full object-cover" /> : emp.name.charAt(0)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-semibold text-gray-900 truncate">{emp.name}</div>
+                        <div className="text-[11px] text-amber-600 font-medium truncate">{emp.leave?.leave_type?.name || 'Leave'}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-6 text-center text-gray-400 text-sm">No employees on leave.</div>
+              )}
+            </div>
+          </div>
+
+          {/* On Holiday */}
+          <div className="bg-white rounded-[16px] border border-gray-200 shadow-sm flex flex-col overflow-hidden">
+            <div className="p-4 border-b border-gray-100 flex items-center gap-3 bg-purple-50/50">
+              <div className="w-8 h-8 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center">
+                <Palmtree size={16} />
+              </div>
+              <div>
+                <h3 className="font-bold text-gray-900 leading-tight">On Holiday</h3>
+                <p className="text-xs font-medium text-gray-500">{data.on_holiday?.length || 0} Employees</p>
+              </div>
+            </div>
+            <div className="p-2 flex-1 overflow-y-auto max-h-[500px]">
+              {data.on_holiday && data.on_holiday.length > 0 ? (
+                <div className="space-y-1">
+                  {data.on_holiday.map((emp: any, idx: number) => (
+                    <div key={idx} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-xl transition-colors group">
+                      <div className="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex flex-shrink-0 items-center justify-center font-bold text-xs uppercase overflow-hidden">
+                        {emp.avatar ? <img src={emp.avatar} alt={emp.name} className="w-full h-full object-cover" /> : emp.name.charAt(0)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-semibold text-gray-900 truncate">{emp.name}</div>
+                        <div className="text-[11px] text-purple-600 font-medium truncate">{emp.holiday?.name || 'Holiday'}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-6 text-center text-gray-400 text-sm">No holidays today.</div>
+              )}
+            </div>
+          </div>
+
+          {/* Off Day */}
+          <div className="bg-white rounded-[16px] border border-gray-200 shadow-sm flex flex-col overflow-hidden">
+            <div className="p-4 border-b border-gray-100 flex items-center gap-3 bg-gray-50">
+              <div className="w-8 h-8 rounded-lg bg-gray-200 text-gray-600 flex items-center justify-center">
+                <UserX size={16} />
+              </div>
+              <div>
+                <h3 className="font-bold text-gray-900 leading-tight">Off Day</h3>
+                <p className="text-xs font-medium text-gray-500">{data.off_days?.length || 0} Employees</p>
+              </div>
+            </div>
+            <div className="p-2 flex-1 overflow-y-auto max-h-[500px]">
+              {data.off_days && data.off_days.length > 0 ? (
+                <div className="space-y-1">
+                  {data.off_days.map((emp: any, idx: number) => (
+                    <div key={idx} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-xl transition-colors group">
+                      <div className="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex flex-shrink-0 items-center justify-center font-bold text-xs uppercase overflow-hidden">
+                        {emp.avatar ? <img src={emp.avatar} alt={emp.name} className="w-full h-full object-cover" /> : emp.name.charAt(0)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-semibold text-gray-900 truncate">{emp.name}</div>
+                        <div className="text-[11px] text-gray-500 truncate">Rest Day</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-6 text-center text-gray-400 text-sm">No off days today.</div>
+              )}
+            </div>
+          </div>
+
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Button, PopConfirm } from '../../index';
+import { format } from 'date-fns';
+import { Clock, Calendar as CalendarIcon, X, User, MessageSquare } from 'lucide-react';
+
+interface DailySchedulePanelProps {
+  day: Date;
+  events: any[];
+  onCancelClick: (shift: any, segment_no: number) => void;
+  onExchangeClick: (shift: any, segment_no: number) => void;
+  onCancelExchangeRequest?: (exchangeId: number) => void;
+  onClose: () => void;
+}
+
+export default function DailySchedulePanel({ day, events, onCancelClick, onExchangeClick, onCancelExchangeRequest, onClose }: DailySchedulePanelProps) {
+  const shifts = events.filter(e => e.type === 'shift' && e.segmentsInfo);
+
+  return (
+    <div className="w-80 flex-shrink-0 bg-white rounded-[16px] border border-gray-200 overflow-hidden flex flex-col h-[calc(100vh-140px)]">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-100 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold text-gray-900">Daily Schedule</h2>
+          <div className="bg-gray-100 text-gray-700 text-xs font-semibold px-2 py-1 rounded-md">
+            {format(day, 'EEEE, MMM d')}
+          </div>
+        </div>
+        <button 
+          onClick={onClose}
+          className="p-1 hover:bg-gray-100 rounded-md text-gray-500 transition-colors"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {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>
+            </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="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">
+                      <h3 className="text-lg font-bold text-gray-900 leading-tight">
+                        {shift.template?.name || 'Shift'}
+                      </h3>
+                      <Clock className="w-4 h-4 text-gray-400" />
+                    </div>
+                    
+                    <div className="text-sm text-gray-500 mb-2">Main Logistics Hub</div>
+                    
+                    <div className="flex items-center gap-2 mb-4">
+                      <span className={`font-bold text-[#0D6EFD] ${info.isCancelled ? 'line-through opacity-50' : ''}`}>
+                        {info.str}
+                      </span>
+                      <span className="text-[10px] font-semibold text-[#0D6EFD] bg-blue-50 border border-blue-100 px-1.5 py-0.5 rounded-full">
+                        8h Total
+                      </span>
+                    </div>
+
+                    {info.isCancelled && (
+                      <div className="mb-4 bg-red-50 text-red-600 text-xs font-bold px-2 py-1 rounded border border-red-100 inline-block">
+                        CANCELLED
+                      </div>
+                    )}
+
+                    {info.isExchangePending && info.pendingExchange ? (
+                      <div className="mb-4 bg-amber-50 rounded-xl border border-amber-100 p-3">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-[10px] font-bold text-amber-600 uppercase tracking-wider bg-amber-100/50 px-2 py-0.5 rounded">
+                            Swap Pending
+                          </span>
+                          {onCancelExchangeRequest && (
+                            <PopConfirm
+                              title="Cancel Request?"
+                              body="Are you sure you want to withdraw this exchange request?"
+                              onConfirm={(close) => { onCancelExchangeRequest(info.pendingExchange.id); close(); }}
+                              onCancel={(close) => close()}
+                              trigger={
+                                <button className="text-xs font-semibold text-gray-500 hover:text-red-600">
+                                  Abort
+                                </button>
+                              }
+                            />
+                          )}
+                        </div>
+                        <div className="space-y-1.5">
+                          <div className="flex items-center gap-2 text-xs text-gray-700">
+                            <User className="w-3.5 h-3.5 text-gray-400" />
+                            Requested with <span className="font-semibold">{info.pendingExchange.responder?.first_name || 'a colleague'}</span>
+                          </div>
+                          {info.pendingExchange.reason && (
+                            <div className="flex items-start gap-2 text-xs text-gray-600">
+                              <MessageSquare className="w-3.5 h-3.5 text-gray-400 mt-0.5 flex-shrink-0" />
+                              <span className="italic line-clamp-2">"{info.pendingExchange.reason}"</span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <Button 
+                          size="small" 
+                          variant="bordered"
+                          className="flex-1 bg-gray-50 hover:bg-gray-100 text-gray-700 border-gray-200 text-xs py-1.5 h-auto font-semibold"
+                          isDisabled={info.isCancelled}
+                          onClick={() => onExchangeClick(shift, info.segment_no)}
+                        >
+                          Request Exchange
+                        </Button>
+                        <Button
+                          size="small"
+                          variant="bordered"
+                          className="flex-1 text-red-600 border-red-200 hover:bg-red-50 text-xs py-1.5 h-auto font-semibold"
+                          onClick={() => onCancelClick(shift, info.segment_no)}
+                        >
+                          {info.isCancelled ? "Restore Shift" : "Cancel Shift"}
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}