@apptimate/ui 5.7.0 → 5.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

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')}

package/src/common-components/pickers/CurrencyPicker.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Coins } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+
+interface CurrencyPickerProps {
+  /** Currently selected currency id */
+  value?: number | string | null;
+  /** Display label for the currently selected currency (e.g. "USD — US Dollar") */
+  displayValue?: string | null;
+  /** Callback when a currency is selected */
+  onChange: (currency: { id: number; code: string; name: string; symbol: string } | null) => void;
+  /** Label shown above the trigger */
+  label?: string;
+  /** Placeholder text when no currency is selected */
+  placeholder?: string;
+  /** Whether the field is required */
+  isRequired?: boolean;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+  /** Fetch function for loading currencies. Should accept { search, page, per_page } and return IApiResponse with data array. */
+  fetchCurrencies: (params: Record<string, string | number>) => Promise<any>;
+  /** Optional custom trigger renderer */
+  customTrigger?: (onClick: () => void) => React.ReactNode;
+}
+
+export function CurrencyPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Currency",
+  placeholder = "Select currency…",
+  isRequired = false,
+  disabled = false,
+  fetchCurrencies,
+  customTrigger,
+}: CurrencyPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [currencies, setCurrencies] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const loadCurrencies = useCallback(
+    async (query: string) => {
+      setIsLoading(true);
+      try {
+        const res = await fetchCurrencies({ search: query, page: 1, per_page: 50 });
+        const data = res?.result?.data || res?.result || [];
+        setCurrencies(Array.isArray(data) ? data : []);
+      } catch (e) {
+        console.error("Failed to load currencies", e);
+        setCurrencies([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchCurrencies]
+  );
+
+  // Load currencies when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      loadCurrencies("");
+    }
+  }, [isOpen, loadCurrencies]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!isOpen) return;
+    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+    searchTimeoutRef.current = setTimeout(() => {
+      loadCurrencies(search);
+    }, 300);
+    return () => {
+      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+    };
+  }, [search, isOpen, loadCurrencies]);
+
+  const handleSelect = (currency: any) => {
+    onChange({
+      id: currency.id,
+      code: currency.code,
+      name: currency.name,
+      symbol: currency.symbol || currency.code,
+    });
+    setIsOpen(false);
+    setSearch("");
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  return (
+    <>
+      {customTrigger ? (
+        customTrigger(() => setIsOpen(true))
+      ) : (
+        <PickerTrigger
+          label={label}
+          value={displayValue || undefined}
+          placeholder={placeholder}
+          isRequired={isRequired}
+          disabled={disabled}
+          onClick={() => setIsOpen(true)}
+          onClear={value ? handleClear : undefined}
+        />
+      )}
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => { setIsOpen(false); setSearch(""); }}
+        title="Select Currency"
+        search={search}
+        onSearchChange={setSearch}
+        searchPlaceholder="Search by code or name…"
+        selectedId={value}
+        size="sm"
+        zIndex={210}
+      >
+        {isLoading ? (
+          <div className="py-8 text-center">
+            <div className="inline-block w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+            <p className="text-xs text-gray-400 mt-2">Loading currencies…</p>
+          </div>
+        ) : currencies.length === 0 ? (
+          <div className="py-8 text-center">
+            <Coins size={28} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400 font-medium">
+              {search ? "No currencies match your search" : "No currencies available"}
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-0.5">
+            {currencies.map((c) => (
+              <PickerItem
+                key={c.id}
+                label={`${c.code}${c.symbol && c.symbol !== c.code ? ` (${c.symbol})` : ''}`}
+                sublabel={c.name}
+                isSelected={String(c.id) === String(value)}
+                onClick={() => handleSelect(c)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+    </>
+  );
+}

package/src/common-components/pickers/PartyPicker.tsx

@@ -19,7 +19,7 @@ import toast from "react-hot-toast";
 interface PartyPickerProps {
   value?: number | string | null;
   displayValue?: string | null;
-  onChange: (party: { id: number; name: string; code?: string; type?: string } | null) => void;
+  onChange: (party: { id: number; name: string; code?: string; type?: string; default_currency_id?: number | null; default_currency?: { id: number; code: string; name: string; symbol: string } | null } | null) => void;
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
@@ -120,7 +120,14 @@ export function PartyPicker({
   };
 
   const handleSelect = (party: any) => {
-    onChange({ id: party.id, name: party.name, code: party.code, type: party.type });
+    onChange({
+      id: party.id,
+      name: party.name,
+      code: party.code,
+      type: party.type,
+      default_currency_id: party.default_currency_id,
+      default_currency: party.default_currency,
+    });
     setIsOpen(false);
   };
 
@@ -150,7 +157,19 @@ export function PartyPicker({
         toast.success("Party created");
         const party = res.result;
         const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
-        onChange({ id: party.id, name: partyName, code: party.code, type: party.type });
+        onChange({
+          id: party.id,
+          name: partyName,
+          code: party.code,
+          type: party.type,
+          default_currency_id: quickAddCurrencyDisplay?.id,
+          default_currency: quickAddCurrencyDisplay ? {
+            id: quickAddCurrencyDisplay.id,
+            code: quickAddCurrencyDisplay.code,
+            name: quickAddCurrencyDisplay.name,
+            symbol: quickAddCurrencyDisplay.symbol
+          } : undefined
+        });
         setIsQuickAddOpen(false);
         setQuickAddFirstName("");
         setQuickAddLastName("");
@@ -343,7 +362,10 @@ export function PartyPicker({
                   } catch { return []; }
                 }}
                 option={{ label: "displayLabel", value: "id", keysToSearch: ["name", "code"] }}
-                onChange={(val) => setQuickAddCurrencyId(val as string | number)}
+                onChange={(val, selectedObj: any) => {
+                  setQuickAddCurrencyId(val as string | number);
+                  setQuickAddCurrencyDisplay(selectedObj);
+                }}
                 key={quickAddCurrencyDisplay ? quickAddCurrencyDisplay.code : 'empty'}
                 defaultValue={quickAddCurrencyDisplay || undefined}
                 error={errors.default_currency_id?.[0]}

package/src/common-components/pickers/index.ts

@@ -1,5 +1,6 @@
 export * from './BrandPicker';
 export * from './CategoryPicker';
+export * from './CurrencyPicker';
 export * from './EntityPickerModal';
 export * from './UomGroupPicker';
 export * from './UomPicker';

package/src/finance-components/PaymentForm.tsx

@@ -13,6 +13,14 @@ interface PaymentFormProps {
   fetchPaymentModes: () => Promise<any>;
   fetchBankAccounts: () => Promise<any>;
   fetchChequeLeaves?: (query: string, page?: number) => Promise<any>;
+  /** Currency code of the invoice (e.g. 'USD'). If not provided, no multi-currency UI. */
+  currencyCode?: string;
+  /** Exchange rate used when the invoice was created */
+  invoiceExchangeRate?: number;
+  /** Whether this is a multi-currency (foreign currency) invoice */
+  isMultiCurrency?: boolean;
+  /** Base currency code (e.g. 'LKR') */
+  baseCurrencyCode?: string;
 }
 
 export function PaymentForm({
@@ -23,6 +31,10 @@ export function PaymentForm({
   fetchPaymentModes,
   fetchBankAccounts,
   fetchChequeLeaves,
+  currencyCode,
+  invoiceExchangeRate = 1,
+  isMultiCurrency = false,
+  baseCurrencyCode = 'LKR',
 }: PaymentFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const outstanding = Math.abs(Number(invoice.amount_due || 0) - Number(invoice.amount_settled || invoice.amount_received || 0));
@@ -32,6 +44,25 @@ export function PaymentForm({
   const [remarks, setRemarks] = useState("");
   const [payments, setPayments] = useState<PaymentEntry[]>([]);
 
+  // Exchange rate state (only used for multi-currency invoices)
+  const [exchangeRate, setExchangeRate] = useState<string>(String(invoiceExchangeRate));
+
+  const currentRate = Number(exchangeRate) || 0;
+  const totalPaymentAmount = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+
+  // Compute exchange difference for display
+  const exchangeDifference = isMultiCurrency && currentRate > 0
+    ? (totalPaymentAmount * currentRate) - (totalPaymentAmount * invoiceExchangeRate)
+    : 0;
+  
+  // For AP (Payables), paying less in base currency is a GAIN.
+  // For AR (Receivables), receiving less in base currency is a LOSS.
+  const isAP = invoice?.type === 'ap';
+  const isExchangeGain = isAP ? exchangeDifference < 0 : exchangeDifference > 0;
+  const absExchangeDiff = Math.abs(exchangeDifference);
+
+  const fmt = (n: number) => n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (payments.length === 0) {
@@ -45,6 +76,11 @@ export function PaymentForm({
       return;
     }
 
+    if (isMultiCurrency && (!exchangeRate || currentRate <= 0)) {
+      toast.error("Please enter a valid exchange rate");
+      return;
+    }
+
     setIsSubmitting(true);
     let successCount = 0;
 
@@ -61,6 +97,11 @@ export function PaymentForm({
           reference: reference || null,
         };
 
+        // Include exchange rate for multi-currency invoices
+        if (isMultiCurrency) {
+          payload.exchange_rate = currentRate;
+        }
+
         if (p.metadata) {
           if (p.metadata.reference) payload.reference = p.metadata.reference;
           if (p.metadata.bank_account_id) payload.bank_account_id = p.metadata.bank_account_id;
@@ -94,6 +135,49 @@ export function PaymentForm({
         />
       </div>
 
+      {/* Exchange Rate Section — only for multi-currency invoices */}
+      {isMultiCurrency && (
+        <div className="space-y-3">
+          <div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
+            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Invoice Rate</p>
+            <p className="text-sm font-medium text-gray-700">1 {currencyCode} = {invoiceExchangeRate.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} {baseCurrencyCode}</p>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Current Exchange Rate (1 {currencyCode} = ? {baseCurrencyCode}) *
+            </label>
+            <Input
+              type="number"
+              step="any"
+              placeholder="0.000000"
+              value={exchangeRate}
+              onChange={(e) => setExchangeRate(e.target.value)}
+            />
+          </div>
+          {/* Live calculation */}
+          {totalPaymentAmount > 0 && currentRate > 0 && (
+            <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 space-y-2">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Base Currency Amount</p>
+                <p className="text-sm font-bold text-gray-800">
+                  {baseCurrencyCode} {fmt(totalPaymentAmount * currentRate)}
+                </p>
+              </div>
+              {absExchangeDiff >= 0.01 && (
+                <div className={`flex items-center justify-between px-2 py-1.5 rounded-md ${isExchangeGain ? 'bg-green-50 border border-green-100' : 'bg-red-50 border border-red-100'}`}>
+                  <span className={`text-[10px] font-bold uppercase tracking-wider ${isExchangeGain ? 'text-green-600' : 'text-red-600'}`}>
+                    Exchange {isExchangeGain ? 'Gain' : 'Loss'}
+                  </span>
+                  <span className={`text-xs font-bold ${isExchangeGain ? 'text-green-700' : 'text-red-700'}`}>
+                    {baseCurrencyCode} {fmt(absExchangeDiff)}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
       <PaymentSection
         totalAmount={outstanding}
         payments={payments}

package/src/index.tsx

@@ -43,6 +43,7 @@ export * from './base-components/WizardModal';
 // Pickers
 export * from './common-components/pickers/BrandPicker';
 export * from './common-components/pickers/CategoryPicker';
+export * from './common-components/pickers/CurrencyPicker';
 export * from './common-components/pickers/EmployeePicker';
 export * from './common-components/pickers/EntityPickerModal';
 export * from './common-components/pickers/UomGroupPicker';
@@ -70,7 +71,7 @@ export * from './common-components/attendance-shifts/DailyOverview';
 export { default as PendingActionsPanel } from './common-components/attendance-shifts/PendingActionsPanel';
 export * from './common-components/attendance-shifts/PendingActionsPanel';
 export * from './common-components/attendance-shifts/ManualPunchModal';
-export * from './common-components/attendance-shifts/ImportExcelModal';
+export * from './common-components/attendance-shifts/BulkAttendanceModal';
 export { default as AttendanceTimesheets } from './common-components/attendance-shifts/AttendanceTimesheets';
 export * from './common-components/attendance-shifts/AttendanceTimesheets';