feat(source2): lock dark mode, sans-serif typography, and all recent updates

2026-08-20 23:02:00 +07:00
1 parent dd4c8f6876
commit 9f24b56e97
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown, Activity } from "lucide-react";
+
+interface SidebarSiteSelectorProps {
+  user: { role?: string } | null;
+  selectedSite: string;
+  handleSiteSelect: (val: string) => void;
+}
+
+export default function SidebarSiteSelector({
+  user,
+  selectedSite,
+  handleSiteSelect,
+}: SidebarSiteSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  if (!user || !['SUPER_ADMIN', 'EXECUTIVE', 'SOC_ANALYST', 'ENGINEER'].includes(user.role || '')) {
+    return null;
+  }
+
+  const getSiteLabel = (uuid: string) => {
+    if (uuid === '6681452d_9cae_4ff4_8ae8_0d504774265e') return 'SIAB';
+    if (uuid === '1959bb55_045b_47c7_bbdd_f33b7db197b9') return 'Office';
+    return 'SIAB';
+  };
+
+  return (
+    <div className="relative w-full px-2" ref={ref} style={{ fontFamily: "'Times New Roman', Times, serif" }}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "flex w-full items-center justify-between gap-3 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.08] hover:border-white/[0.15] px-3.5 py-2.5 rounded-xl transition-all duration-200 text-left cursor-pointer backdrop-blur-md",
+          isOpen && "border-blue-500/30 ring-1 ring-blue-500/20"
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <Activity className="h-4 w-4 text-slate-400 shrink-0" />
+          <div className="flex flex-col">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 leading-none mb-1">
+              ACTIVE SITE
+            </span>
+            <span className="text-xs font-medium text-slate-300 leading-none">
+              {getSiteLabel(selectedSite)}
+            </span>
+          </div>
+        </div>
+        <ChevronDown className={cn("h-4 w-4 text-slate-600 transition-transform duration-300", isOpen && "rotate-180")} />
+      </button>
+
+      <div
+        className={cn(
+          "absolute top-full left-2 right-2 mt-1.5 rounded-xl border border-white/10 bg-slate-950/85 backdrop-blur-xl p-1.5 shadow-2xl z-50 origin-top transition-all duration-300 ease-out",
+          isOpen
+            ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
+            : "opacity-0 scale-95 pointer-events-none -translate-y-2"
+        )}
+      >
+        <div className="flex flex-col gap-0.5">
+          <button
+            onClick={() => {
+              handleSiteSelect('6681452d_9cae_4ff4_8ae8_0d504774265e');
+              setIsOpen(false);
+            }}
+            className={cn(
+              "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+              selectedSite === '6681452d_9cae_4ff4_8ae8_0d504774265e'
+                ? "bg-primary/20 text-white font-medium"
+                : "text-slate-400 hover:bg-white/5 hover:text-white"
+            )}
+          >
+            SIAB
+          </button>
+          <button
+            onClick={() => {
+              handleSiteSelect('1959bb55_045b_47c7_bbdd_f33b7db197b9');
+              setIsOpen(false);
+            }}
+            className={cn(
+              "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+              selectedSite === '1959bb55_045b_47c7_bbdd_f33b7db197b9'
+                ? "bg-primary/20 text-white font-medium"
+                : "text-slate-400 hover:bg-white/5 hover:text-white"
+            )}
+          >
+            Office
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}