@apptimate/ui 5.2.0 → 5.3.0

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

@@ -0,0 +1,321 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  ChevronDown,
+  CalendarClock,
+  FileCheck2,
+  Palmtree,
+  Clock,
+  AlertCircle,
+} from "lucide-react";
+import { format } from "date-fns";
+import { getPendingActions } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface PendingActionsPanelProps {
+  employeeId: string;
+}
+
+interface Section {
+  key: string;
+  title: string;
+  icon: React.ElementType;
+  iconBg: string;
+  iconColor: string;
+  count?: number;
+}
+
+export default function PendingActionsPanel({ employeeId }: PendingActionsPanelProps) {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    leaves: true,
+    regularisation: false,
+    holidays: true,
+    overtime: false,
+  });
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await getPendingActions(employeeId);
+      if (res.is_success && res.result) {
+        setData(res.result);
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Failed to load pending actions");
+    } finally {
+      setLoading(false);
+    }
+  }, [employeeId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const toggleSection = (key: string) => {
+    setExpandedSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const sections: Section[] = [
+    {
+      key: "leaves",
+      title: "Pending Leaves",
+      icon: CalendarClock,
+      iconBg: "bg-amber-50",
+      iconColor: "text-amber-600",
+      count: data?.pending_leaves?.length || 0,
+    },
+    {
+      key: "regularisation",
+      title: "Regularisation",
+      icon: FileCheck2,
+      iconBg: "bg-blue-50",
+      iconColor: "text-blue-600",
+      count: data?.pending_regularisation?.length || 0,
+    },
+    {
+      key: "holidays",
+      title: "Upcoming Holidays",
+      icon: Palmtree,
+      iconBg: "bg-indigo-50",
+      iconColor: "text-indigo-600",
+      count: data?.upcoming_holidays?.length || 0,
+    },
+    {
+      key: "overtime",
+      title: "OT Summary",
+      icon: Clock,
+      iconBg: "bg-purple-50",
+      iconColor: "text-purple-600",
+    },
+  ];
+
+  const getStatusBadgeClass = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case "approved":
+        return "bg-emerald-50 text-emerald-700 border-emerald-200";
+      case "pending":
+        return "bg-amber-50 text-amber-700 border-amber-200";
+      case "rejected":
+        return "bg-red-50 text-red-700 border-red-200";
+      default:
+        return "bg-gray-50 text-gray-700 border-gray-200";
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-80 flex-shrink-0 bg-white rounded-[16px] border border-gray-200 shadow-sm p-6 flex items-center justify-center">
+        <div className="w-6 h-6 border-3 border-gray-200 border-t-primary-600 rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-80 flex-shrink-0 bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden flex flex-col max-h-[calc(100vh-140px)]">
+      {/* Panel Header */}
+      <div className="p-4 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white">
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center">
+            <AlertCircle size={16} />
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-gray-900">Pending Actions</h3>
+            <p className="text-[11px] text-gray-500">Quick overview of your items</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto">
+        {sections.map((section) => {
+          const Icon = section.icon;
+          const isExpanded = expandedSections[section.key];
+
+          return (
+            <div key={section.key} className="border-b border-gray-100 last:border-b-0">
+              {/* Section Header */}
+              <button
+                onClick={() => toggleSection(section.key)}
+                className="w-full flex items-center justify-between p-3.5 hover:bg-gray-50/60 transition-colors"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className={`w-7 h-7 rounded-lg ${section.iconBg} flex items-center justify-center`}>
+                    <Icon size={14} className={section.iconColor} />
+                  </div>
+                  <span className="text-[13px] font-semibold text-gray-800">{section.title}</span>
+                  {section.count !== undefined && section.count > 0 && (
+                    <span className="text-[10px] font-bold bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full min-w-[20px] text-center">
+                      {section.count}
+                    </span>
+                  )}
+                </div>
+                <ChevronDown
+                  size={16}
+                  className={`text-gray-400 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+                />
+              </button>
+
+              {/* Section Content */}
+              <div
+                className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                  isExpanded ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+                }`}
+              >
+                <div className="px-3.5 pb-3.5 space-y-2">
+                  {/* Pending Leaves */}
+                  {section.key === "leaves" && (
+                    <>
+                      {data?.pending_leaves && data.pending_leaves.length > 0 ? (
+                        data.pending_leaves.map((leave: any, idx: number) => (
+                          <div
+                            key={idx}
+                            className="p-2.5 rounded-xl border border-gray-100 bg-gray-50/50 hover:bg-gray-50 transition-colors"
+                          >
+                            <div className="flex items-start justify-between gap-2 mb-1">
+                              <span className="text-[12.5px] font-semibold text-gray-800 truncate">
+                                {leave.leave_type?.name || "Leave"}
+                              </span>
+                              <span
+                                className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full border whitespace-nowrap ${getStatusBadgeClass(
+                                  leave.status
+                                )}`}
+                              >
+                                {leave.status}
+                              </span>
+                            </div>
+                            <p className="text-[11px] text-gray-500">
+                              {leave.from_date
+                                ? format(new Date(leave.from_date), "MMM d")
+                                : ""}{" "}
+                              –{" "}
+                              {leave.to_date
+                                ? format(new Date(leave.to_date), "MMM d, yyyy")
+                                : ""}
+                            </p>
+                            {leave.days && (
+                              <p className="text-[10.5px] text-gray-400 mt-0.5">
+                                {leave.days} day{leave.days > 1 ? "s" : ""}
+                              </p>
+                            )}
+                          </div>
+                        ))
+                      ) : (
+                        <p className="text-[11.5px] text-gray-400 text-center py-3">
+                          No pending leave applications
+                        </p>
+                      )}
+                    </>
+                  )}
+
+                  {/* Regularisation */}
+                  {section.key === "regularisation" && (
+                    <>
+                      {data?.pending_regularisation && data.pending_regularisation.length > 0 ? (
+                        data.pending_regularisation.map((req: any, idx: number) => (
+                          <div
+                            key={idx}
+                            className="p-2.5 rounded-xl border border-gray-100 bg-gray-50/50 hover:bg-gray-50 transition-colors"
+                          >
+                            <div className="flex items-start justify-between gap-2 mb-1">
+                              <span className="text-[12.5px] font-semibold text-gray-800">
+                                {req.date
+                                  ? format(new Date(req.date), "MMM d, yyyy")
+                                  : "Regularisation"}
+                              </span>
+                              <span
+                                className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full border whitespace-nowrap ${getStatusBadgeClass(
+                                  req.status
+                                )}`}
+                              >
+                                {req.status}
+                              </span>
+                            </div>
+                            {req.reason && (
+                              <p className="text-[11px] text-gray-500 line-clamp-2">{req.reason}</p>
+                            )}
+                          </div>
+                        ))
+                      ) : (
+                        <p className="text-[11.5px] text-gray-400 text-center py-3">
+                          No pending regularisation requests
+                        </p>
+                      )}
+                    </>
+                  )}
+
+                  {/* Upcoming Holidays */}
+                  {section.key === "holidays" && (
+                    <>
+                      {data?.upcoming_holidays && data.upcoming_holidays.length > 0 ? (
+                        data.upcoming_holidays.slice(0, 3).map((holiday: any, idx: number) => (
+                          <div
+                            key={idx}
+                            className="flex items-center gap-2.5 p-2.5 rounded-xl border border-gray-100 bg-gray-50/50 hover:bg-gray-50 transition-colors"
+                          >
+                            <div className="w-10 h-10 rounded-xl bg-indigo-50 flex flex-col items-center justify-center flex-shrink-0">
+                              <span className="text-[10px] font-bold text-indigo-500 uppercase leading-tight">
+                                {holiday.date
+                                  ? format(new Date(holiday.date), "MMM")
+                                  : ""}
+                              </span>
+                              <span className="text-[14px] font-bold text-indigo-700 leading-tight">
+                                {holiday.date
+                                  ? format(new Date(holiday.date), "d")
+                                  : ""}
+                              </span>
+                            </div>
+                            <div className="min-w-0 flex-1">
+                              <p className="text-[12.5px] font-semibold text-gray-800 truncate">
+                                {holiday.name}
+                              </p>
+                              <p className="text-[10.5px] text-gray-400">
+                                {holiday.date
+                                  ? format(new Date(holiday.date), "EEEE")
+                                  : ""}
+                              </p>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <p className="text-[11.5px] text-gray-400 text-center py-3">
+                          No upcoming holidays
+                        </p>
+                      )}
+                    </>
+                  )}
+
+                  {/* OT Summary */}
+                  {section.key === "overtime" && (
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="p-3 rounded-xl bg-purple-50/60 border border-purple-100 text-center">
+                        <p className="text-[18px] font-bold text-purple-700">
+                          {data?.ot_summary?.total_hours ?? 0}
+                        </p>
+                        <p className="text-[10px] font-medium text-purple-500 uppercase tracking-wider">
+                          OT Hours
+                        </p>
+                      </div>
+                      <div className="p-3 rounded-xl bg-emerald-50/60 border border-emerald-100 text-center">
+                        <p className="text-[18px] font-bold text-emerald-700">
+                          {data?.ot_summary?.total_amount
+                            ? `${data.ot_summary.total_amount.toLocaleString()}`
+                            : "0"}
+                        </p>
+                        <p className="text-[10px] font-medium text-emerald-500 uppercase tracking-wider">
+                          OT Amount
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}