Merge branch 'main' of https://github.com/MrPanda009/vihaan

Author: MrPanda009

frontend/app/admin/Workers.tsx

@@ -12,7 +12,17 @@ import {
   Plus, 
   Users, 
   CheckSquare,
-  HardHat
+  HardHat,
+  ChevronDown,
+  X,
+  Loader2,
+  Trash2,
+  ShieldCheck,
+  Zap,
+  Droplets,
+  Trash,
+  MapPin,
+  Building
 } from "lucide-react";
 import { toast, ToastContainer } from "@/components/Toast";
 import { supabase } from "@/src/lib/supabase";
@@ -57,10 +67,19 @@ export default function Workers({ onViewReports }: { onViewReports?: () => void
   const [selectedWorker, setSelectedWorker] = useState<WorkerAccount | null>(null);
   const profileCardRef = useRef<HTMLDivElement>(null);
 
-  // Assign Department popup
+  // Assign Department state
   const [assigningWorker, setAssigningWorker] = useState<WorkerAccount | null>(null);
-  const [selectedNewDept, setSelectedNewDept] = useState("");
-  const assignCardRef = useRef<HTMLDivElement>(null);
+  const [assigning, setAssigning] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const DEPARTMENTS = [
+    { name: "Roads & Infrastructure", icon: MapPin, color: "#f97316", desc: "Highway, bridges, and local road maintenance." },
+    { name: "Sanitation & Waste", icon: Trash, color: "#10b981", desc: "Waste collection and city cleaning services." },
+    { name: "Lighting", icon: Zap, color: "#fbbf24", desc: "Street light maintenance and installation." },
+    { name: "Electrical", icon: ShieldCheck, color: "#6366f1", desc: "Grid management and public power systems." },
+    { name: "Water Supply", icon: Droplets, color: "#3b82f6", desc: "Clean water distribution and pipeline repairs." },
+    { name: "Planning & Development", icon: Building, color: "#ec4899", desc: "Urban planning and building permits." },
+  ];
 
   const fetchWorkers = async () => {
     setLoading(true);
@@ -129,8 +148,23 @@ export default function Workers({ onViewReports }: { onViewReports?: () => void
       .on('postgres_changes', { event: '*', schema: 'public', table: 'profiles' }, () => {
         void fetchWorkers();
       })
+      .on('postgres_changes', { event: '*', schema: 'public', table: 'worker_profiles' }, () => {
+        void fetchWorkers();
+      })
       .subscribe();
-    return () => { void supabase.removeChannel(channel); };
+
+    // Handle click outside for dropdown
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setAssigningWorker(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => { 
+      void supabase.removeChannel(channel); 
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
   }, []);
 
   const filtered = useMemo(() => {
@@ -197,46 +231,47 @@ export default function Workers({ onViewReports }: { onViewReports?: () => void
     }
   };
 
-  // Assign Dept open animation
-  useEffect(() => {
-    if (assigningWorker && assignCardRef.current) {
-      gsap.fromTo(assignCardRef.current,
-        { opacity: 0, scale: 0.88, y: 20 },
-        { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(1.5)" }
-      );
-    }
-  }, [assigningWorker]);
 
-  const handleCloseAssignModal = () => {
-    if (assignCardRef.current) {
-      gsap.to(assignCardRef.current, {
-        opacity: 0, scale: 0.9, y: 20, duration: 0.25, ease: "power2.in",
-        onComplete: () => {
-          setAssigningWorker(null);
-          setSelectedNewDept("");
+
+  const handleAssignDept = async (workerId: string, department: string) => {
+    setAssigning(true);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        toast.error("Session expired.");
+        return;
+      }
+
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || "https://api.vihaan.perkkk.dev";
+      const response = await fetch(`${apiUrl}/api/admin/workers`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${session.access_token}`
         },
+        body: JSON.stringify({
+          worker_id: workerId,
+          department: department
+        })
       });
-    } else {
+
+      if (!response.ok) {
+        throw new Error("Failed to update department");
+      }
+
+      toast.success(`Assigned ${department} to worker`);
       setAssigningWorker(null);
+      void fetchWorkers(); // Refresh
+    } catch (e: any) {
+      console.error("Assignment failed:", e);
+      toast.error(`Error: ${e.message || "Failed to assign department"}`);
+    } finally {
+      setAssigning(false);
     }
   };
 
-  const handleAssignDept = () => {
-    if (!assigningWorker || !selectedNewDept) return;
-    
-    setWorkers(prev => prev.map(w => {
-      if (w.id === assigningWorker.id) {
-        // Prevent duplicates
-        const updatedCats = w.categories.includes(selectedNewDept) 
-          ? w.categories 
-          : [...w.categories, selectedNewDept];
-        return { ...w, categories: updatedCats };
-      }
-      return w;
-    }));
-
-    toast.success(`Assigned ${selectedNewDept} to ${assigningWorker.name}`);
-    handleCloseAssignModal();
+  const handleOpenAssign = (worker: WorkerAccount) => {
+    setAssigningWorker(prev => prev?.id === worker.id ? null : worker);
   };
 
 
@@ -434,9 +469,96 @@ export default function Workers({ onViewReports }: { onViewReports?: () => void
                   ))}
                </div>
 
-               <div className={styles.acActions}>
+               <div className={styles.acActions} style={{ position: 'relative' }}>
                   <button className={styles.acBtn} onClick={() => setSelectedWorker(auth)}>View Person</button>
-                  <button className={styles.acBtn} onClick={() => setAssigningWorker(auth)}>Assign Department</button>
+                  <button className={styles.acBtn} onClick={() => handleOpenAssign(auth)}>
+                     {assigningWorker?.id === auth.id ? 'Close' : 'Assign Department'}
+                     <ChevronDown size={14} style={{ marginLeft: 6, transform: assigningWorker?.id === auth.id ? 'rotate(180deg)' : 'none', transition: 'transform 0.3s' }}/>
+                  </button>
+
+                  {assigningWorker?.id === auth.id && (
+                     <div 
+                       ref={dropdownRef}
+                       style={{
+                         position: 'absolute',
+                         top: '100%',
+                         right: 0,
+                         zIndex: 1000,
+                         width: '320px',
+                         marginTop: '8px',
+                         background: 'rgba(15, 15, 20, 0.98)',
+                         backdropFilter: 'blur(20px)',
+                         border: '1px solid rgba(255,255,255,0.12)',
+                         borderRadius: '16px',
+                         padding: '10px',
+                         boxShadow: '0 20px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(249,115,22,0.15)',
+                         animation: 'dropdownFadeIn 0.3s cubic-bezier(0.23, 1, 0.32, 1)'
+                       }}
+                     >
+                        <style dangerouslySetInnerHTML={{ __html: `
+                           @keyframes dropdownFadeIn {
+                             from { opacity: 0; transform: translateY(-10px) scale(0.98); }
+                             to { opacity: 1; transform: translateY(0) scale(1); }
+                           }
+                        `}} />
+                        <div style={{ padding: '8px 10px', fontSize: '11px', fontWeight: 700, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                           Choose Department
+                           <button onClick={() => setAssigningWorker(null)} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.3)', cursor: 'pointer' }}>
+                              <X size={14} />
+                           </button>
+                        </div>
+                        <div style={{ maxHeight: '340px', overflowY: 'auto', padding: '4px' }} className="noScrollbar">
+                           {DEPARTMENTS.map((dept) => {
+                              const Icon = dept.icon;
+                              const isCurrent = auth.categories.includes(dept.name);
+                              return (
+                                 <button
+                                    key={dept.name}
+                                    onClick={() => !isCurrent && handleAssignDept(auth.id, dept.name)}
+                                    disabled={assigning}
+                                    style={{
+                                       width: '100%',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                       gap: '12px',
+                                       padding: '12px',
+                                       borderRadius: '12px',
+                                       background: isCurrent ? 'rgba(249,115,22,0.08)' : 'transparent',
+                                       border: isCurrent ? '1px solid rgba(249,115,22,0.15)' : '1px solid transparent',
+                                       cursor: assigning ? 'wait' : isCurrent ? 'default' : 'pointer',
+                                       transition: 'all 0.2s ease',
+                                       textAlign: 'left',
+                                       marginBottom: '4px'
+                                    }}
+                                    onMouseEnter={(e) => { if(!isCurrent) e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; }}
+                                    onMouseLeave={(e) => { if(!isCurrent) e.currentTarget.style.background = 'transparent'; }}
+                                 >
+                                    <div style={{
+                                       width: '36px', height: '36px', borderRadius: '10px',
+                                       background: `${dept.color}15`, border: `1px solid ${dept.color}30`,
+                                       display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                       color: dept.color, flexShrink: 0
+                                    }}>
+                                       <Icon size={18} />
+                                    </div>
+                                    <div style={{ flex: 1 }}>
+                                       <div style={{ fontSize: '13px', fontWeight: 600, color: isCurrent ? '#f97316' : '#fff', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                          {dept.name}
+                                          {isCurrent && <ShieldCheck size={12} />}
+                                       </div>
+                                       <div style={{ fontSize: '11px', color: 'rgba(255,255,255,0.4)', marginTop: '2px', lineHeight: 1.3 }}>{dept.desc}</div>
+                                    </div>
+                                 </button>
+                              );
+                           })}
+                        </div>
+                        {assigning && (
+                           <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10 }}>
+                              <Loader2 size={24} className="animate-spin text-orange-500" />
+                           </div>
+                        )}
+                     </div>
+                  )}
                </div>
             </div>
          ))}
@@ -662,107 +784,6 @@ export default function Workers({ onViewReports }: { onViewReports?: () => void
         document.body
       )}
 
-      {/* Assign Department Modal Portal */}
-      {assigningWorker && typeof document !== 'undefined' && createPortal(
-        <div
-          onClick={handleCloseAssignModal}
-          style={{
-            position: 'fixed', inset: 0,
-            background: 'rgba(0,0,0,0.55)',
-            backdropFilter: 'blur(4px)',
-            WebkitBackdropFilter: 'blur(4px)',
-            zIndex: 9999,
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}
-        >
-          <div
-            ref={assignCardRef}
-            onClick={e => e.stopPropagation()}
-            style={{
-              width: '420px',
-              background: 'rgba(14,14,18,0.95)',
-              backdropFilter: 'blur(40px)',
-              WebkitBackdropFilter: 'blur(40px)',
-              border: '1px solid rgba(255,255,255,0.1)',
-              borderRadius: '20px',
-              padding: '24px',
-              boxShadow: '0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(249,115,22,0.08)',
-            }}
-          >
-            <h2 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#fafafa', marginBottom: '6px' }}>Assign Department</h2>
-            <p style={{ fontSize: '0.85rem', color: 'rgba(255,255,255,0.4)', marginBottom: '20px' }}>
-              Assign a new department to <span style={{ color: '#f97316', fontWeight: 600 }}>{assigningWorker.name}</span>
-            </p>
-
-            <div style={{ marginBottom: '24px' }}>
-              <label style={{ display: 'block', fontSize: '0.7rem', color: 'rgba(255,255,255,0.4)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '8px' }}>
-                Select Department
-              </label>
-              <select 
-                value={selectedNewDept}
-                onChange={(e) => setSelectedNewDept(e.target.value)}
-                style={{
-                  width: '100%',
-                  background: 'rgba(255,255,255,0.05)',
-                  border: '1px solid rgba(255,255,255,0.1)',
-                  borderRadius: '12px',
-                  padding: '12px 16px',
-                  color: '#fafafa',
-                  fontSize: '0.9rem',
-                  outline: 'none',
-                  cursor: 'pointer',
-                  appearance: 'none',
-                }}
-              >
-                <option value="" style={{ background: '#121216' }}>Choose a department...</option>
-                <option value="Roads & Infrastructure" style={{ background: '#121216' }}>Roads & Infrastructure</option>
-                <option value="Sanitation & Waste" style={{ background: '#121216' }}>Sanitation & Waste</option>
-                <option value="Lighting" style={{ background: '#121216' }}>Lighting</option>
-                <option value="Electrical" style={{ background: '#121216' }}>Electrical</option>
-                <option value="Water Supply" style={{ background: '#121216' }}>Water Supply</option>
-              </select>
-            </div>
-
-            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
-              <button 
-                onClick={handleCloseAssignModal}
-                style={{
-                  padding: '10px 20px',
-                  background: 'rgba(255,255,255,0.06)',
-                  border: '1px solid rgba(255,255,255,0.1)',
-                  borderRadius: '10px',
-                  color: 'rgba(255,255,255,0.6)',
-                  fontSize: '0.85rem',
-                  fontWeight: 600,
-                  cursor: 'pointer',
-                }}
-              >
-                Cancel
-              </button>
-              <button 
-                onClick={handleAssignDept}
-                disabled={!selectedNewDept}
-                style={{
-                  padding: '10px 24px',
-                  background: selectedNewDept ? '#f97316' : 'rgba(249,115,22,0.3)',
-                  border: 'none',
-                  borderRadius: '10px',
-                  color: selectedNewDept ? '#fff' : 'rgba(255,255,255,0.5)',
-                  fontSize: '0.85rem',
-                  fontWeight: 600,
-                  cursor: selectedNewDept ? 'pointer' : 'not-allowed',
-                  transition: 'all 0.2s',
-                  boxShadow: selectedNewDept ? '0 8px 20px rgba(249,115,22,0.2)' : 'none',
-                }}
-              >
-                Assign Department
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
     </div>
   );
 }

frontend/app/admin/page.tsx

@@ -18,8 +18,8 @@ import Authorities from "./Authorities";
 import Workers from "./Workers";
 import Reports from "./Reports";
 import WorkerReports from "./WorkerReports";
-import { toast } from "@/components/Toast";
 import { supabase } from "@/src/lib/supabase";
+import { toast } from "@/components/Toast";
 
 type AdminStats = {
   totalComplaints: number;