@apptimate/ui 5.1.0 → 5.3.0

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

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Modal, Button } from '../../index';
+import { Clock, MapPin, Send } from 'lucide-react';
+import { format } from 'date-fns';
+import { EmployeePicker } from '../pickers/EmployeePicker';
+
+interface ExchangeShiftModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  day: Date | null;
+  shift: any;
+  segmentNo: number | null;
+  onConfirm: (responderId: number, note: string) => void;
+}
+
+export default function ExchangeShiftModal({ isOpen, onClose, day, shift, segmentNo, onConfirm }: ExchangeShiftModalProps) {
+  const [selectedEmployee, setSelectedEmployee] = useState<{ id: number; name: string } | null>(null);
+  const [note, setNote] = useState("");
+
+  if (!isOpen || !day || !shift || segmentNo === null) return null;
+
+  const segment = shift.segmentsInfo.find((s: any) => s.segment_no === segmentNo);
+
+  const handleConfirm = () => {
+    if (selectedEmployee) {
+      onConfirm(selectedEmployee.id, note);
+      setSelectedEmployee(null);
+      setNote("");
+    }
+  };
+
+  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-[#0D6EFD]"></div>
+          
+          <div className="bg-[#0D6EFD] text-white text-[10px] font-bold uppercase tracking-wider mb-4 py-1 px-3 rounded-full inline-flex self-start">
+            Your Shift
+          </div>
+          <h2 className="text-3xl font-bold text-gray-900 mb-8">{shift.template?.name || 'Shift'}</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-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-lg font-bold text-gray-900">Main Wing, Level 2</div>
+                <div className="text-sm text-gray-500">Senior Registered Nurse</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Panel - Employee Selection */}
+        <div className="flex-1 p-8 flex flex-col bg-white">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-2xl font-bold text-gray-900">Exchange Shift</h2>
+            <button onClick={onClose} className="text-sm font-semibold text-[#0D6EFD] hover:underline">
+              ← Back to Schedule
+            </button>
+          </div>
+          
+          <p className="text-sm text-gray-500 mb-6">Find a teammate to swap your upcoming shift.</p>
+          
+          <div className="flex-1 space-y-6">
+            <div>
+              <EmployeePicker 
+                label="Select Colleague"
+                placeholder="Search employee by name or ID..."
+                value={selectedEmployee?.id}
+                displayValue={selectedEmployee?.name}
+                onChange={(emp) => setSelectedEmployee(emp as any)}
+                isRequired
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-bold text-gray-700 mb-2">
+                Exchange Note / Reason (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-24 p-3"
+                placeholder="E.g., I have a family event to attend, could you cover my shift?"
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="pt-6 mt-auto border-t border-gray-100">
+            <div className="bg-blue-50 border border-blue-100 rounded-xl p-4 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-white border border-blue-200 flex items-center justify-center text-blue-600 font-bold">
+                  {selectedEmployee ? selectedEmployee.name.charAt(0) : '?'}
+                </div>
+                <div>
+                  <div className="text-sm font-bold text-gray-900">
+                    {selectedEmployee ? selectedEmployee.name : 'Select a colleague'}
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    {selectedEmployee ? 'to propose exchange' : 'from the list above'}
+                  </div>
+                </div>
+              </div>
+              <Button 
+                className="h-10 bg-[#0D6EFD] hover:bg-blue-700 text-white font-bold"
+                isDisabled={!selectedEmployee}
+                onClick={handleConfirm}
+                icon={<Send className="w-4 h-4" />}
+              >
+                Propose Exchange
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,183 @@
+import React, { useState, useRef, ChangeEvent } from "react";
+import { Modal, ModalFooter, Button } from "../../index";
+import { bulkPunchAttendance, getEmployeeLookup } from "@apptimate/core-lib";
+import { UploadCloud } from "lucide-react";
+import toast from "react-hot-toast";
+import * as XLSX from "xlsx";
+
+interface ImportExcelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  fetchEmployees?: () => Promise<any>;
+}
+
+export function ImportExcelModal({ isOpen, onClose, onSuccess, fetchEmployees }: ImportExcelModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const parseExcelAndSubmit = async () => {
+    if (!file) {
+      toast.error("Please select a file to import");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      
+      // Fetch employees to map employee number to employee ID if needed
+      const fetcher = fetchEmployees || getEmployeeLookup;
+      const empRes = await fetcher();
+      const employees = empRes.result || [];
+      const empMap = new Map();
+      employees.forEach((emp: any) => {
+        empMap.set(String(emp.employee_code), emp.id);
+        empMap.set(String(emp.id), emp.id); // Also map ID directly just in case
+      });
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        try {
+          const data = e.target?.result;
+          const workbook = XLSX.read(data, { type: "array" });
+          const sheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[sheetName];
+          const json: any[] = XLSX.utils.sheet_to_json(worksheet);
+
+          const punchesToInsert: any[] = [];
+          
+          json.forEach((row, index) => {
+            const empRef = String(row["Employee ID"] || row["Employee Code"] || row["EmployeeId"]);
+            const empId = empMap.get(empRef);
+            
+            if (!empId) {
+              console.warn(`Row ${index + 1}: Employee not found for ref ${empRef}`);
+              return; // Skip row if employee not found
+            }
+
+            const dateStr = row["Date"];
+            const punchTimeStr = row["Punch Time"] || row["Time"];
+            const typeStr = String(row["Type"] || "I").toUpperCase();
+            
+            if (dateStr && punchTimeStr) {
+              // Convert excel date if it's a number
+              let formattedDate = dateStr;
+              if (typeof dateStr === 'number') {
+                const dateObj = new Date(Math.round((dateStr - 25569) * 86400 * 1000));
+                formattedDate = dateObj.toISOString().split("T")[0];
+              }
+
+              // Combine Date and Time
+              const punchAt = `${formattedDate} ${punchTimeStr}`;
+              
+              punchesToInsert.push({
+                employee_id: empId,
+                punch_at: punchAt,
+                type: typeStr === "O" || typeStr === "OUT" ? "O" : "I",
+                source: "Excel Import",
+              });
+            }
+          });
+
+          if (punchesToInsert.length === 0) {
+            toast.error("No valid punches found in the file.");
+            setIsSubmitting(false);
+            return;
+          }
+
+          const res = await bulkPunchAttendance({ punches: punchesToInsert });
+          
+          if (res.is_success) {
+            toast.success(`Successfully imported ${punchesToInsert.length} punches.`);
+            onSuccess();
+            onClose();
+          } else {
+            toast.error(res.message || "Failed to import attendance.");
+          }
+        } catch (err: any) {
+          toast.error("Error parsing Excel file: " + err.message);
+        } finally {
+          setIsSubmitting(false);
+        }
+      };
+      reader.readAsArrayBuffer(file);
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Import Attendance (Excel/CSV)" size="md">
+      <div className="space-y-4 py-4">
+        
+        <div 
+          className="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col items-center justify-center bg-gray-50 text-center cursor-pointer hover:bg-gray-100 transition-colors"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <input 
+            type="file" 
+            ref={fileInputRef} 
+            className="hidden" 
+            accept=".xlsx, .xls, .csv" 
+            onChange={handleFileChange} 
+          />
+          <UploadCloud className="w-10 h-10 text-gray-400 mb-3" />
+          {file ? (
+            <div>
+              <p className="text-sm font-semibold text-gray-800">{file.name}</p>
+              <p className="text-xs text-gray-500 mt-1">{(file.size / 1024).toFixed(2)} KB</p>
+            </div>
+          ) : (
+            <div>
+              <p className="text-sm font-semibold text-gray-800">Click to upload or drag and drop</p>
+              <p className="text-xs text-gray-500 mt-1">XLSX, XLS, or CSV</p>
+            </div>
+          )}
+        </div>
+
+        {file && (
+          <div className="flex justify-end">
+            <button type="button" onClick={handleRemoveFile} className="text-xs text-danger-500 hover:underline">
+              Remove file
+            </button>
+          </div>
+        )}
+
+        <div className="bg-primary-50 p-4 rounded-xl border border-primary-100">
+          <h4 className="text-sm font-bold text-primary-800 mb-2">Required Columns</h4>
+          <ul className="text-xs text-primary-700 space-y-1 list-disc list-inside">
+            <li><span className="font-semibold">Employee ID</span> (or Employee Code)</li>
+            <li><span className="font-semibold">Date</span> (YYYY-MM-DD)</li>
+            <li><span className="font-semibold">Punch Time</span> (HH:MM:SS)</li>
+            <li><span className="font-semibold">Type</span> (I for In, O for Out)</li>
+          </ul>
+        </div>
+
+      </div>
+      
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose} isDisabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button color="primary" onClick={parseExcelAndSubmit} isLoading={isSubmitting}>
+          Upload & Import
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,139 @@
+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 { punchAttendance, getEmployeeLookup } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface ManualPunchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  fetchEmployees?: () => Promise<any>;
+}
+
+export function ManualPunchModal({ isOpen, onClose, onSuccess, fetchEmployees }: ManualPunchModalProps) {
+  const [employees, setEmployees] = useState<any[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    employee_id: "",
+    punch_date: new Date().toISOString().split("T")[0],
+    punch_time: new Date().toTimeString().substring(0, 5),
+    type: "I",
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      loadEmployees();
+      // Reset form
+      setFormData({
+        employee_id: "",
+        punch_date: new Date().toISOString().split("T")[0],
+        punch_time: new Date().toTimeString().substring(0, 5),
+        type: "I",
+      });
+    }
+  }, [isOpen]);
+
+  const loadEmployees = async () => {
+    try {
+      const fetcher = fetchEmployees || getEmployeeLookup;
+      const res = await fetcher();
+      if (res.is_success && res.result) {
+        setEmployees(res.result);
+      }
+    } catch (e: any) {
+      console.error(e);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.employee_id || !formData.punch_date || !formData.punch_time) {
+      toast.error("Please fill all required fields");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const punchAt = `${formData.punch_date} ${formData.punch_time}:00`;
+      
+      const res = await punchAttendance({
+        employee_id: formData.employee_id,
+        punch_at: punchAt,
+        type: formData.type,
+        source: "Manual",
+      });
+
+      if (res.is_success) {
+        toast.success("Punch logged successfully");
+        onSuccess();
+        onClose();
+      } else {
+        toast.error(res.message || "Failed to log punch");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Manual Attendance Log" size="md">
+      <div className="space-y-4 py-2">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Employee <span className="text-danger-500">*</span></label>
+          <Select
+            value={formData.employee_id}
+            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 || ''})`
+            }))}
+          />
+        </div>
+        
+        <div className="grid 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={formData.punch_date}
+              onChange={(e) => setFormData({ ...formData, punch_date: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Time <span className="text-danger-500">*</span></label>
+            <Input
+              type="time"
+              value={formData.punch_time}
+              onChange={(e) => setFormData({ ...formData, punch_time: e.target.value })}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Punch Type <span className="text-danger-500">*</span></label>
+          <Select
+            value={formData.type}
+            onChange={(e) => setFormData({ ...formData, type: e.target.value })}
+            options={[
+              { value: "I", label: "In (Check-In)" },
+              { value: "O", label: "Out (Check-Out)" }
+            ]}
+          />
+        </div>
+      </div>
+      
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose} isDisabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button color="primary" onClick={handleSubmit} isLoading={isSubmitting}>
+          Save Log
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}