@apptimate/ui 5.2.0 → 5.3.0

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

@@ -0,0 +1,249 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Modal, Input, Button } from "../../index";
+import toast from "react-hot-toast";
+import { Plus, Trash2 } from "lucide-react";
+import { getShiftTemplate, createShiftTemplate, updateShiftTemplate } from "@apptimate/core-lib";
+
+interface ShiftTemplateFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  templateId: number | null;
+}
+
+export default function ShiftTemplateForm({ isOpen, onClose, onSuccess, templateId }: ShiftTemplateFormProps) {
+  const isNew = !templateId;
+
+  const [loading, setLoading] = useState(!isNew);
+  const [saving, setSaving] = useState(false);
+
+  const [formData, setFormData] = useState<any>({
+    name: "",
+    code: "",
+    break_minutes: 0,
+    grace_late_min: 10,
+    grace_early_min: 10,
+    is_active: true,
+    segments: [{ start_time: "", end_time: "" }],
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      if (!isNew && templateId) {
+        loadTemplate(templateId);
+      } else {
+        setLoading(false);
+      }
+    } else {
+      setFormData({
+        name: "",
+        code: "",
+        break_minutes: 0,
+        grace_late_min: 10,
+        grace_early_min: 10,
+        is_active: true,
+        segments: [{ start_time: "", end_time: "" }],
+      });
+    }
+  }, [isOpen, templateId]);
+
+  const loadTemplate = async (id: number) => {
+    try {
+      setLoading(true);
+      const res = await getShiftTemplate(id);
+      if (res.is_success && res.result) {
+        // Time format might be HH:mm:ss, truncate to HH:mm for input type="time"
+        const formattedSegments = (res.result.segments || []).map((seg: any) => ({
+          start_time: seg.start_time ? seg.start_time.substring(0, 5) : "",
+          end_time: seg.end_time ? seg.end_time.substring(0, 5) : "",
+        }));
+
+        setFormData({
+          name: res.result.name || "",
+          code: res.result.code || "",
+          break_minutes: res.result.break_minutes || 0,
+          grace_late_min: res.result.grace_late_min || 10,
+          grace_early_min: res.result.grace_early_min || 10,
+          is_active: res.result.is_active ?? true,
+          segments: formattedSegments.length > 0 ? formattedSegments : [{ start_time: "", end_time: "" }],
+        });
+      } else {
+        toast.error("Failed to load template");
+        onClose();
+      }
+    } catch {
+      toast.error("Error loading template");
+      onClose();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSegmentChange = (index: number, field: string, value: string) => {
+    const updated = [...formData.segments];
+    updated[index][field] = value;
+    setFormData({ ...formData, segments: updated });
+  };
+
+  const addSegment = () => {
+    setFormData({ ...formData, segments: [...formData.segments, { start_time: "", end_time: "" }] });
+  };
+
+  const removeSegment = (index: number) => {
+    if (formData.segments.length === 1) return;
+    const updated = formData.segments.filter((_: any, i: number) => i !== index);
+    setFormData({ ...formData, segments: updated });
+  };
+
+  const saveTemplate = async () => {
+    if (!formData.name) {
+      toast.error("Template name is required");
+      return;
+    }
+    if (!formData.code) {
+      toast.error("Template code is required");
+      return;
+    }
+
+    // append :00 for seconds if missing
+    const payload = {
+      ...formData,
+      segments: formData.segments.map((seg: any) => ({
+        start_time: seg.start_time.length === 5 ? `${seg.start_time}:00` : seg.start_time,
+        end_time: seg.end_time.length === 5 ? `${seg.end_time}:00` : seg.end_time,
+      }))
+    };
+
+    try {
+      setSaving(true);
+      const res = isNew
+        ? await createShiftTemplate(payload)
+        : await updateShiftTemplate(templateId as number, payload);
+
+      if (res.is_success) {
+        toast.success(`Template ${isNew ? "created" : "updated"}`);
+        onSuccess();
+      } else {
+        toast.error(res.message || "Failed to save template");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error saving template");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isNew ? "Add Shift Template" : "Edit Shift Template"}
+      size="2xl"
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="flat" color="secondary" onClick={onClose}>Cancel</Button>
+          <Button color="primary" onClick={saveTemplate} isLoading={saving}>Save Template</Button>
+        </div>
+      }
+    >
+      {loading ? (
+        <div className="py-20 flex justify-center">
+          <div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              label="Template Name *"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="e.g. Day Shift"
+            />
+            <Input
+              label="Code *"
+              value={formData.code}
+              onChange={(e) => setFormData({ ...formData, code: e.target.value })}
+              placeholder="e.g. DAY"
+            />
+            <Input
+              label="Break Minutes"
+              type="number"
+              min="0"
+              value={formData.break_minutes}
+              onChange={(e) => setFormData({ ...formData, break_minutes: parseInt(e.target.value) || 0 })}
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <Input
+                label="Grace Late (Min)"
+                type="number"
+                min="0"
+                value={formData.grace_late_min}
+                onChange={(e) => setFormData({ ...formData, grace_late_min: parseInt(e.target.value) || 0 })}
+              />
+              <Input
+                label="Grace Early (Min)"
+                type="number"
+                min="0"
+                value={formData.grace_early_min}
+                onChange={(e) => setFormData({ ...formData, grace_early_min: parseInt(e.target.value) || 0 })}
+              />
+            </div>
+          </div>
+
+          <div className="border-t border-gray-100 pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-bold text-gray-900">Time Segments</h3>
+              <Button 
+                size="small" 
+                variant="solid"
+                className="!bg-black !text-white hover:!bg-gray-800 !border-none"
+                onClick={addSegment} 
+                icon={<Plus size={14} strokeWidth={2.5} />}
+                iconPosition="left"
+              >
+                Add Segment
+              </Button>
+            </div>
+            
+            <div className="space-y-3">
+              {formData.segments.map((segment: any, index: number) => (
+                <div key={index} className="flex items-end gap-3 p-3 bg-gray-50 border border-gray-200 rounded-lg">
+                  <div className="flex-1">
+                    <Input
+                      label="Start Time *"
+                      type="time"
+                      value={segment.start_time}
+                      onChange={(e) => handleSegmentChange(index, "start_time", e.target.value)}
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <Input
+                      label="End Time *"
+                      type="time"
+                      value={segment.end_time}
+                      onChange={(e) => handleSegmentChange(index, "end_time", e.target.value)}
+                    />
+                  </div>
+                  {formData.segments.length > 1 && (
+                    <button 
+                      onClick={() => removeSegment(index)}
+                      className="flex items-center justify-center h-[38px] w-[38px] text-gray-400 hover:text-danger-500 transition-colors bg-white border border-gray-200 rounded-[10px] hover:border-danger-200 hover:bg-danger-50"
+                      title="Remove Segment"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-gray-500 mt-3">
+              Add multiple segments to create a split shift (e.g., 08:00 - 12:00 and 13:00 - 18:00).
+            </p>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import {
+  Briefcase,
+  CheckCircle2,
+  XCircle,
+  CalendarOff,
+  AlertTriangle,
+  Palmtree,
+  CalendarDays,
+  Clock,
+  Hourglass,
+  Timer,
+} from "lucide-react";
+
+export interface SummaryData {
+  workingDays: number;
+  present: number;
+  absent: number;
+  leave: number;
+  lop: number;
+  holidays: number;
+  weeklyOffs: number;
+  otDays: number;
+  otHours: number;
+  lates: number;
+}
+
+interface SummaryStripProps {
+  data: SummaryData;
+}
+
+const statConfig = [
+  { key: "workingDays", label: "Working Days", icon: Briefcase, color: "text-blue-600", bg: "bg-blue-50", ring: "ring-blue-100" },
+  { key: "present", label: "Present", icon: CheckCircle2, color: "text-emerald-600", bg: "bg-emerald-50", ring: "ring-emerald-100" },
+  { key: "absent", label: "Absent", icon: XCircle, color: "text-red-500", bg: "bg-red-50", ring: "ring-red-100" },
+  { key: "leave", label: "Leave", icon: CalendarOff, color: "text-amber-600", bg: "bg-amber-50", ring: "ring-amber-100" },
+  { key: "lop", label: "LOP", icon: AlertTriangle, color: "text-orange-600", bg: "bg-orange-50", ring: "ring-orange-100" },
+  { key: "holidays", label: "Holidays", icon: Palmtree, color: "text-indigo-600", bg: "bg-indigo-50", ring: "ring-indigo-100" },
+  { key: "weeklyOffs", label: "Weekly Offs", icon: CalendarDays, color: "text-gray-500", bg: "bg-gray-50", ring: "ring-gray-200" },
+  { key: "otDays", label: "OT Days", icon: Clock, color: "text-purple-600", bg: "bg-purple-50", ring: "ring-purple-100" },
+  { key: "otHours", label: "OT Hours", icon: Hourglass, color: "text-violet-600", bg: "bg-violet-50", ring: "ring-violet-100" },
+  { key: "lates", label: "Lates", icon: Timer, color: "text-rose-500", bg: "bg-rose-50", ring: "ring-rose-100" },
+] as const;
+
+export default function SummaryStrip({ data }: SummaryStripProps) {
+  return (
+    <div className="relative overflow-hidden rounded-[16px] border border-gray-200/60 shadow-sm bg-white/80 backdrop-blur-sm">
+      {/* Subtle gradient background */}
+      <div className="absolute inset-0 bg-gradient-to-r from-slate-50/80 via-white/60 to-blue-50/40 pointer-events-none" />
+      
+      <div className="relative flex items-stretch gap-0 overflow-x-auto scrollbar-hide">
+        {statConfig.map((stat, idx) => {
+          const Icon = stat.icon;
+          const value = data[stat.key as keyof SummaryData];
+          return (
+            <div
+              key={stat.key}
+              className={`flex items-center gap-2.5 px-4 py-3.5 min-w-[130px] flex-1 transition-all duration-200 hover:bg-gray-50/80 group cursor-default ${
+                idx < statConfig.length - 1 ? "border-r border-gray-100" : ""
+              }`}
+            >
+              <div className={`w-8 h-8 rounded-lg ${stat.bg} ring-1 ${stat.ring} flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-110`}>
+                <Icon size={15} className={stat.color} />
+              </div>
+              <div className="flex flex-col min-w-0">
+                <span className="text-[18px] font-bold text-gray-900 leading-tight tracking-tight">
+                  {value ?? 0}
+                </span>
+                <span className="text-[10.5px] font-medium text-gray-400 uppercase tracking-wider truncate leading-tight">
+                  {stat.label}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { Users } from "lucide-react";
+import { EntityPickerModal, PickerItem, PickerTrigger } from "./EntityPickerModal";
+import { getEmployeeLookup } from "@apptimate/core-lib";
+
+interface EmployeePickerProps {
+  value?: number | string | null;
+  displayValue?: string | null;
+  onChange: (emp: { id: number; name: string; code?: string } | null) => void;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  excludeId?: number | string;
+}
+
+export function EmployeePicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Employee",
+  placeholder = "Select employee...",
+  isRequired = false,
+  excludeId,
+}: EmployeePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [employees, setEmployees] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await getEmployeeLookup();
+      if (res.is_success && res.result) {
+        setEmployees(res.result);
+      }
+    } catch {}
+    setIsLoading(false);
+  }, []);
+
+  const handleOpen = () => {
+    setSearch("");
+    setIsOpen(true);
+    fetchData();
+  };
+
+  const handleSelect = (emp: any) => {
+    const fullName = `${emp.first_name} ${emp.last_name || ""}`.trim();
+    onChange({ id: emp.id, name: fullName, code: emp.employee_code });
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  const searchLower = (search || "").toLowerCase();
+  
+  const filtered = employees.filter((e) => {
+    if (excludeId && String(e.id) === String(excludeId)) return false;
+    
+    const fullName = `${e.first_name} ${e.last_name || ""}`.trim().toLowerCase();
+    const code = (e.employee_code || "").toLowerCase();
+    return fullName.includes(searchLower) || code.includes(searchLower);
+  });
+
+  return (
+    <>
+      <PickerTrigger
+        label={label}
+        value={displayValue || null}
+        placeholder={placeholder}
+        isRequired={isRequired}
+        onClick={handleOpen}
+        onClear={value ? handleClear : undefined}
+      />
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onSelect={handleSelect}
+        title={`Select ${label}`}
+        searchPlaceholder="Search employees..."
+        selectedId={value}
+        search={search}
+        onSearchChange={setSearch}
+        size="sm"
+      >
+        {isLoading ? (
+          <div className="py-12 text-center">
+            <div className="inline-block h-6 w-6 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+            <p className="mt-3 text-sm text-gray-400">Loading employees...</p>
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-12 text-center">
+            <Users size={32} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400">No employees found</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 py-1">
+            {filtered.map((emp) => {
+              const fullName = `${emp.first_name} ${emp.last_name || ""}`.trim();
+              return (
+                <PickerItem
+                  key={emp.id}
+                  label={fullName}
+                  sublabel={emp.employee_code ? `ID: ${emp.employee_code}` : undefined}
+                  isSelected={String(value) === String(emp.id)}
+                  onClick={() => handleSelect(emp)}
+                />
+              );
+            })}
+          </div>
+        )}
+      </EntityPickerModal>
+    </>
+  );
+}

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

@@ -192,10 +192,12 @@ export function PickerTrigger({
 }: PickerTriggerProps) {
   return (
     <div className="flex flex-col gap-1.5 w-full">
-      <label className="text-[11px] font-bold text-foreground-subtle uppercase tracking-wider">
-        {label}
-        {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
-      </label>
+      {label && (
+        <label className="text-[11px] font-bold text-foreground-subtle uppercase tracking-wider">
+          {label}
+          {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+        </label>
+      )}
       <button
         type="button"
         disabled={disabled}

package/src/index.tsx

@@ -19,6 +19,8 @@ export * from './base-components/TableMobileOptions';
 export * from './base-components/DesktopSearchPopover';
 export * from './base-components/DesktopFilterPopover';
 export * from './base-components/Input';
+export * from './base-components/RichEmailEditor';
+export * from './base-components/ColorPicker';
 export * from './base-components/Textarea';
 export * from './base-components/Label';
 export * from './base-components/Modal';
@@ -41,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/EmployeePicker';
 export * from './common-components/pickers/EntityPickerModal';
 export * from './common-components/pickers/UomGroupPicker';
 export * from './common-components/pickers/UomPicker';
@@ -56,3 +59,19 @@ export * from './common-components/item-wizard/SkuConfigModal';
 // Transaction
 export * from './common-components/transaction';
 export * from './finance-components/PaymentForm';
+
+// Attendance & Shifts
+export { default as ShiftCalendar } from './common-components/attendance-shifts/ShiftCalendar';
+export * from './common-components/attendance-shifts/ShiftCalendar';
+export { default as ShiftTemplateForm } from './common-components/attendance-shifts/ShiftTemplateForm';
+export * from './common-components/attendance-shifts/ShiftTemplateForm';
+export { default as DailyOverview } from './common-components/attendance-shifts/DailyOverview';
+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 { default as AttendanceTimesheets } from './common-components/attendance-shifts/AttendanceTimesheets';
+export * from './common-components/attendance-shifts/AttendanceTimesheets';
+
+export * from "./base-components/ChartOfAccountPicker";