@apptimate/ui 5.8.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "5.8.0",
+  "version": "6.0.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
@@ -10,9 +10,12 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "framer-motion": "^12.38.0",
+    "html2pdf.js": "^0.14.0",
     "lucide-react": "^1.14.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.5",
     "react-apexcharts": "^2.1.1",
+    "react-barcode": "^1.6.1",
     "recharts": "^2.15.4",
     "tailwind-merge": "^3.5.0",
     "use-debounce": "^10.1.1",

package/src/base-components/SearchableSelect.tsx

@@ -208,7 +208,11 @@ function SelectCore<T extends Record<string, unknown>>({
     // ── Default value ────────────────────────────────────────────────────────
     const defaultValString = JSON.stringify(defaultValue || '');
     useEffect(() => {
-        if (!defaultValue) return;
+        if (!defaultValue) {
+            setSelectedValue(multiple ? [] : ({} as T));
+            setValue(multiple ? [] : '');
+            return;
+        }
         if (multiple && Array.isArray(defaultValue) && defaultValue.length > 0) {
             const vals = (defaultValue as T[]).map((v) => v[opt.value] as string | number);
             setSelectedValue(defaultValue as T[]);

package/src/base-components/Select.tsx

@@ -25,7 +25,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                     <select
                         ref={ref}
                         className={cn(
-                            "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 appearance-none cursor-pointer",
+                            "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 appearance-none cursor-pointer disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed",
                             error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt"
                         )}
                         {...props}

package/src/base-components/Table.tsx

@@ -60,8 +60,8 @@ export const TCell = ({ children, className, isHeader = false, colSpan, rowSpan,
                 !isHeader && "flex justify-between items-center lg:table-cell border-b border-gray-100 last:border-b-0 lg:last:border-b", // Adds separator line across rows on desktop
                 className
             )}>
-            {label && <span className="lg:hidden text-[11px] font-bold text-gray-400 uppercase tracking-wider">{label}</span>}
-            <div className="flex justify-end lg:block w-full lg:w-auto">{children}</div>
+            {label && <span className="lg:hidden text-[11px] font-bold text-gray-400 uppercase tracking-wider shrink-0 mr-4">{label}</span>}
+            <div className="flex justify-end lg:block flex-1 min-w-0 lg:w-auto">{children}</div>
         </Tag>
     );
 };

package/src/common-components/DashboardLayout.tsx

@@ -36,6 +36,7 @@ export type OrganizationConfig = {
   name: string;
   code?: string;
   organization_type?: string;
+  parent_organization_id?: number;
 };
 
 export function DashboardLayout({
@@ -71,11 +72,40 @@ export function DashboardLayout({
   const pathname = usePathname() || "";
   const router = useRouter();
 
+  // Helper to build hierarchy
+  const flattenedOrganizations = React.useMemo(() => {
+    if (!organizations || organizations.length === 0) return [];
+    
+    const orgMap = new Map<number, any>();
+    const roots: any[] = [];
+
+    organizations.forEach(org => {
+      orgMap.set(org.id, { ...org, children: [] });
+    });
+
+    organizations.forEach(org => {
+      const node = orgMap.get(org.id)!;
+      if (org.parent_organization_id && orgMap.has(org.parent_organization_id)) {
+        orgMap.get(org.parent_organization_id)!.children.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+
+    const flattened: (OrganizationConfig & { _level: number })[] = [];
+    const traverse = (nodes: any[], level: number) => {
+      nodes.forEach(node => {
+        flattened.push({ ...node, _level: level });
+        traverse(node.children, level + 1);
+      });
+    };
+    traverse(roots, 0);
+    return flattened;
+  }, [organizations]);
+
   // Find which main menu should be active based on current path.
   // When basePath is set, prefer the menu whose items are mostly within basePath.
-  const fullPath = (basePath && pathname.startsWith(basePath))
-    ? pathname
-    : basePath + (pathname === "/" && basePath ? "" : pathname);
+  const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
   const currentMainMenu = (() => {
     let bestMenu = menus[0];
     let bestScore = -1;
@@ -213,18 +243,15 @@ export function DashboardLayout({
                     setIsSubSidebarOpen(true);
                   }
                 }}
-                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-all duration-200 w-full px-1 py-1 relative ${isActive ? "text-indigo-600" : "text-gray-400 hover:text-[#2D3142]"
+                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >
-                {isActive && (
-                  <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-600 rounded-r-full" />
-                )}
                 {/* Clone the icon to dynamically apply styling based on active state */}
                 {React.cloneElement(menu.icon as React.ReactElement<any>, {
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold text-indigo-700" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}
@@ -291,9 +318,9 @@ export function DashboardLayout({
                       : !externalPaths.some(ext => item.path.startsWith(ext));
                     const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
 
-                    const className = `pl-3 pr-4 py-2 rounded-r-lg rounded-l-none text-sm transition-all duration-200 flex items-center justify-between border-l-4 ${isItemActive
-                      ? "bg-indigo-50/70 border-indigo-600 text-indigo-950 font-bold"
-                      : "border-transparent text-gray-500 font-medium hover:bg-gray-50/50"
+                    const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
+                      ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                      : "text-gray-500 font-medium hover:bg-gray-50"
                       }`;
 
                     const content = (
@@ -329,7 +356,12 @@ export function DashboardLayout({
                 onClick={() => setIsOrgModalOpen(true)}
                 className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl bg-[#F4F5F7] hover:bg-gray-200/70 transition-all duration-200 group cursor-pointer"
               >
-                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shrink-0 shadow-sm">
+                <div className={cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center shrink-0 shadow-sm",
+                  selectedOrganization?.organization_type === 'project'
+                    ? "bg-gradient-to-br from-teal-400 to-teal-600"
+                    : "bg-gradient-to-br from-indigo-500 to-purple-600"
+                )}>
                   <Building2 size={14} className="text-white" />
                 </div>
                 <div className="flex-1 min-w-0 text-left">
@@ -361,7 +393,12 @@ export function DashboardLayout({
                 onClick={() => setIsOrgModalOpen(true)}
                 className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-[#F4F5F7] hover:bg-gray-200/70 transition-all cursor-pointer"
               >
-                <div className="w-5 h-5 rounded-md bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shrink-0">
+                <div className={cn(
+                  "w-5 h-5 rounded-md flex items-center justify-center shrink-0",
+                  selectedOrganization?.organization_type === 'project'
+                    ? "bg-gradient-to-br from-teal-400 to-teal-600"
+                    : "bg-gradient-to-br from-indigo-500 to-purple-600"
+                )}>
                   <Building2 size={10} className="text-white" />
                 </div>
                 <span className="text-[12px] font-semibold text-[#2D3142] max-w-[100px] truncate">
@@ -526,32 +563,37 @@ export function DashboardLayout({
             {/* Organization List */}
             <div className="px-4 py-3 max-h-[360px] overflow-y-auto">
               <div className="flex flex-col gap-1">
-                {organizations.map((org) => {
+                {flattenedOrganizations.map((org) => {
                   const isSelected = selectedOrganization?.id === org.id;
+                  const pl = org._level > 0 ? org._level * 24 : 0;
+                  const isProject = org.organization_type === 'project';
+                  
                   return (
                     <button
                       key={org.id}
                       id={`org-option-${org.id}`}
                       onClick={() => handleSelectOrg(org)}
+                      style={{ paddingLeft: pl ? (pl + 16) + 'px' : undefined }}
                       className={cn(
                         "w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all duration-150 cursor-pointer",
                         isSelected
-                          ? "bg-indigo-50 border border-indigo-200 shadow-sm"
-                          : "hover:bg-gray-50 border border-transparent"
+                          ? (isProject ? "bg-teal-50 border border-teal-200 shadow-sm" : "bg-indigo-50 border border-indigo-200 shadow-sm")
+                          : (isProject ? "hover:bg-teal-50 border border-transparent" : "hover:bg-gray-50 border border-transparent"),
+                        org._level > 0 ? "relative before:content-[''] before:absolute before:left-[-12px] before:top-1/2 before:w-3 before:h-px before:bg-gray-200" : ""
                       )}
                     >
                       <div className={cn(
                         "w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-colors",
                         isSelected
-                          ? "bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm"
-                          : "bg-gray-100"
+                          ? (isProject ? "bg-gradient-to-br from-teal-400 to-teal-600 shadow-sm" : "bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm")
+                          : (isProject ? "bg-teal-100/50" : "bg-gray-100")
                       )}>
-                        <Building2 size={14} className={isSelected ? "text-white" : "text-gray-500"} />
+                        <Building2 size={14} className={isSelected ? "text-white" : (isProject ? "text-teal-600" : "text-gray-500")} />
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className={cn(
                           "text-[14px] font-semibold truncate leading-tight",
-                          isSelected ? "text-indigo-700" : "text-[#2D3142]"
+                          isSelected ? (isProject ? "text-teal-700" : "text-indigo-700") : (isProject ? "text-teal-700" : "text-[#2D3142]")
                         )}>
                           {org.name}
                         </p>
@@ -563,7 +605,7 @@ export function DashboardLayout({
                         </p>
                       </div>
                       {isSelected && (
-                        <div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center shrink-0">
+                        <div className={cn("w-6 h-6 rounded-full flex items-center justify-center shrink-0", isProject ? "bg-teal-500" : "bg-indigo-500")}>
                           <Check size={12} className="text-white stroke-[3]" />
                         </div>
                       )}

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

@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from "react";
+import { Modal, ModalFooter } from "../../base-components/Modal";
+import { Button } from "../../base-components/Button";
+import { Input } from "../../base-components/Input";
+import { Select } from "../../base-components/Select";
+import { Checkbox } from "../../base-components/Checkbox";
+import { Table, THeader, TRow, TCell, TBody } from "../../base-components/Table";
+import { bulkPunchAttendance, getWorkforceAttendanceLookup, getEmployeeLookup } from "@apptimate/core-lib";
+import { Plus } from "lucide-react";
+import toast from "react-hot-toast";
+
+interface BulkAttendanceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  fetchProjects?: () => Promise<any>;
+  initialProjectId?: string;
+  isFixedProject?: boolean;
+}
+
+export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects, 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]);
+  const [employees, setEmployees] = useState<any[]>([]);
+  const [globalEmployees, setGlobalEmployees] = useState<any[]>([]);
+  const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // 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 }>>({});
+
+  useEffect(() => {
+    if (isOpen) {
+      loadProjects();
+      loadGlobalEmployees();
+      setAttendanceDate(new Date().toISOString().split("T")[0]);
+      setProjectId(initialProjectId || "");
+      setEmployees([]);
+      setTimeEntries({});
+    }
+  }, [isOpen, initialProjectId]);
+
+  useEffect(() => {
+    if (projectId && attendanceDate) {
+      loadEmployees();
+    } else {
+      setEmployees([]);
+    }
+  }, [projectId, attendanceDate]);
+
+  const loadGlobalEmployees = async () => {
+    try {
+      const res = await getEmployeeLookup();
+      if (res.is_success && res.result) {
+        setGlobalEmployees(res.result);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const loadProjects = async () => {
+    try {
+      if (fetchProjects) {
+        const res = await fetchProjects();
+        if (res.is_success && res.result?.data) {
+          setProjects(res.result.data);
+        } else if (res.is_success && Array.isArray(res.result)) {
+          setProjects(res.result);
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const loadEmployees = async () => {
+    try {
+      setIsLoadingEmployees(true);
+      const res = await getWorkforceAttendanceLookup({ project_id: Number(projectId), date: attendanceDate });
+      if (res.is_success && res.result) {
+        setEmployees(res.result);
+        
+        // Initialize time entries for these employees
+        const newEntries: Record<string, { in: string, out: string, break: number, isPresent: boolean }> = {};
+        res.result.forEach((emp: any) => {
+          newEntries[emp.id] = { in: "09:00", out: "18:00", break: 0, isPresent: true };
+        });
+        setTimeEntries(newEntries);
+      }
+    } catch (e: any) {
+      toast.error("Failed to load allocated employees");
+    } finally {
+      setIsLoadingEmployees(false);
+    }
+  };
+
+  const handleTimeChange = (empId: string, type: 'in' | 'out' | 'break' | 'isPresent', value: string | number | boolean) => {
+    setTimeEntries(prev => ({
+      ...prev,
+      [empId]: {
+        ...prev[empId],
+        [type]: value
+      }
+    }));
+  };
+
+  const handleAddEmployeeRow = () => {
+    const fakeId = `manual-${Date.now()}`;
+    setEmployees(prev => [...prev, { id: fakeId, is_manual: true }]);
+    setTimeEntries(prev => ({
+      ...prev,
+      [fakeId]: { in: "09:00", out: "18:00", break: 0, isPresent: true }
+    }));
+  };
+
+  const handleEmployeeSelectChange = (fakeId: string, newEmpId: string) => {
+    const selectedEmp = globalEmployees.find((e) => String(e.id) === newEmpId);
+    if (!selectedEmp) return;
+
+    setEmployees(prev => prev.map(emp => 
+      emp.id === fakeId 
+        ? { ...emp, id: newEmpId, first_name: selectedEmp.first_name, last_name: selectedEmp.last_name, employee_code: selectedEmp.employee_code, is_manual: true } 
+        : emp
+    ));
+
+    setTimeEntries(prev => {
+      const newEntries = { ...prev };
+      newEntries[newEmpId] = newEntries[fakeId];
+      delete newEntries[fakeId];
+      return newEntries;
+    });
+  };
+
+  const handleRemoveEmployeeRow = (empId: string) => {
+    setEmployees(prev => prev.filter(emp => emp.id !== empId));
+    setTimeEntries(prev => {
+      const newEntries = { ...prev };
+      delete newEntries[empId];
+      return newEntries;
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (employees.length === 0) {
+      toast.error("No employees to log attendance for");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      
+      const hrPunches: any[] = [];
+      const workforcePunches: any[] = [];
+
+      employees.forEach(emp => {
+        const entry = timeEntries[emp.id];
+        
+        if (!entry || !entry.isPresent) return;
+        
+        if (String(emp.id).startsWith('wf-')) {
+            // It's a workforce gang worker
+            const parts = String(emp.id).split('-'); // e.g. wf-12-1
+            const workforceId = parts[1];
+            const memberIdentifier = parts[2] || null;
+
+            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,
+                });
+            }
+        } else {
+            // It's a standard HR employee
+            if (entry.in) {
+            hrPunches.push({
+                employee_id: emp.id,
+                punch_at: `${attendanceDate} ${entry.in}:00`,
+                type: "I",
+                source: "Bulk"
+            });
+            }
+            if (entry.out) {
+            hrPunches.push({
+                employee_id: emp.id,
+                punch_at: `${attendanceDate} ${entry.out}:00`,
+                type: "O",
+                source: "Bulk"
+            });
+            }
+        }
+      });
+
+      if (hrPunches.length === 0 && workforcePunches.length === 0) {
+        toast.error("Please fill in at least one time entry");
+        setIsSubmitting(false);
+        return;
+      }
+
+      let hasError = false;
+
+      // Log HR punches
+      if (hrPunches.length > 0) {
+        const hrRes = await bulkPunchAttendance({ punches: hrPunches });
+        if (!hrRes.is_success) {
+            toast.error(hrRes.message || "Failed to log HR attendance");
+            hasError = true;
+        }
+      }
+
+      // Log Workforce punches
+      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");
+            hasError = true;
+        }
+      }
+
+      if (!hasError) {
+        toast.success("Bulk attendance logged successfully");
+        onSuccess();
+        onClose();
+      } else {
+        toast.error("Failed to log some attendance records");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Date <span className="text-danger-500">*</span></label>
+            <Input
+              type="date"
+              value={attendanceDate}
+              onChange={(e) => setAttendanceDate(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Project <span className="text-danger-500">*</span></label>
+            <Select
+              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>
+        </div>
+
+        {projectId && attendanceDate && (
+          <div className="mt-6 border border-gray-100 rounded-xl overflow-hidden bg-white shadow-sm">
+            <Table>
+              <THeader>
+                <TRow>
+                  <TCell isHeader className="bg-gray-50 text-gray-600 font-semibold tracking-wide border-t-0 border-r-0 border-l-0">Employee</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">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>
+                </TRow>
+              </THeader>
+              <TBody>
+                {isLoadingEmployees ? (
+                  <TRow>
+                    <TCell colSpan={4} className="text-center py-8 text-gray-400">Loading employees...</TCell>
+                  </TRow>
+                ) : employees.length === 0 ? (
+                  <TRow>
+                    <TCell colSpan={4} className="text-center py-8 text-gray-500">No employees allocated to this project on this date.</TCell>
+                  </TRow>
+                ) : (
+                  employees.map(emp => (
+                    <TRow key={emp.id} className="hover:bg-gray-50/50 transition-colors">
+                      <TCell label="Employee">
+                        {emp.is_manual ? (
+                          <div className="flex items-center gap-2">
+                            <Select
+                              value={String(emp.id).startsWith('manual') ? "" : String(emp.id)}
+                              onChange={(e) => handleEmployeeSelectChange(emp.id, e.target.value)}
+                              options={[
+                                { value: "", label: "Select Employee..." },
+                                ...globalEmployees.map(ge => ({
+                                  value: String(ge.id),
+                                  label: `${ge.first_name} ${ge.last_name}${ge.employee_code ? ` (${ge.employee_code})` : ''}`
+                                }))
+                              ]}
+                            />
+                            <button onClick={() => handleRemoveEmployeeRow(emp.id)} className="text-red-500 p-1 hover:bg-red-50 rounded">
+                              &times;
+                            </button>
+                          </div>
+                        ) : (
+                          <>
+                            <div className="font-semibold text-[#2D3142]">{emp.first_name} {emp.last_name}</div>
+                            {emp.employee_code && <div className="text-xs text-gray-500">{emp.employee_code}</div>}
+                          </>
+                        )}
+                      </TCell>
+                      <TCell label="Present">
+                        <Checkbox
+                          checked={timeEntries[emp.id]?.isPresent || false}
+                          onChange={(e) => handleTimeChange(emp.id, 'isPresent', e.target.checked)}
+                        />
+                      </TCell>
+                      <TCell label="First In">
+                        <Input
+                          type="time"
+                          value={timeEntries[emp.id]?.in || ""}
+                          onChange={(e) => handleTimeChange(emp.id, 'in', e.target.value)}
+                          className="h-9 w-32"
+                          disabled={!timeEntries[emp.id]?.isPresent}
+                        />
+                      </TCell>
+                      <TCell label="Last Out">
+                        <Input
+                          type="time"
+                          value={timeEntries[emp.id]?.out || ""}
+                          onChange={(e) => handleTimeChange(emp.id, 'out', e.target.value)}
+                          className="h-9 w-32"
+                          disabled={!timeEntries[emp.id]?.isPresent}
+                        />
+                      </TCell>
+                      <TCell label="Break (hrs)">
+                        <Input
+                          type="number"
+                          step="0.5"
+                          min="0"
+                          value={timeEntries[emp.id]?.break || 0}
+                          onChange={(e) => handleTimeChange(emp.id, 'break', Number(e.target.value))}
+                          className="h-9 w-32"
+                          disabled={!timeEntries[emp.id]?.isPresent || !String(emp.id).startsWith('wf-')}
+                          title={!String(emp.id).startsWith('wf-') ? "Break hours are only applicable to Construction Workforce" : ""}
+                        />
+                      </TCell>
+                    </TRow>
+                  ))
+                )}
+              </TBody>
+            </Table>
+            <div className="p-3 border-t border-gray-100 bg-gray-50">
+              <Button variant="flat" color="secondary" onClick={handleAddEmployeeRow} icon={<Plus size={16} />} iconPosition="left">
+                Add Row
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose} isDisabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button color="primary" onClick={handleSubmit} isLoading={isSubmitting} isDisabled={employees.length === 0}>
+          Save All
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

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

@@ -16,7 +16,7 @@ export default function DailySchedulePanel({ day, events, onCancelClick, onExcha
   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)]">
+    <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">
       {/* Header */}
       <div className="p-4 border-b border-gray-100 flex items-center justify-between">
         <div className="flex items-center gap-3">

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

@@ -89,7 +89,7 @@ export function ManualPunchModal({ isOpen, onClose, onSuccess, fetchEmployees }:
             onChange={(e) => setFormData({ ...formData, employee_id: e.target.value })}
             options={employees.map((emp) => ({
               value: String(emp.id),
-              label: `${emp.first_name} ${emp.last_name} (${emp.employee_code || ''})`
+              label: `${emp.first_name} ${emp.last_name}${emp.employee_code ? ` (${emp.employee_code})` : ''}`
             }))}
           />
         </div>

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

@@ -287,17 +287,17 @@ export default function ShiftCalendar({ employeeId, projectId, workforceId, show
   };
 
   return (
-    <div className="flex gap-4 items-start w-full">
+    <div className="flex flex-col lg:flex-row gap-4 items-start w-full relative">
       {/* 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)]">
+      <div className="flex-1 w-full 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">
+      <div className="p-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <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 flex-wrap items-center gap-3 sm:gap-4">
           <div className="flex p-0.5 bg-gray-100 rounded-lg">
             <button
               onClick={() => setViewMode('month')}