Initial commit: igny8 project

frontend/src/components/common/SectorSelector.tsx

@@ -0,0 +1,149 @@
+/**
+ * Sector Selector Component
+ * Displays a dropdown to select sectors for the active site
+ * Used in the header area of pages that need sector filtering
+ */
+import { useState, useEffect, useRef } from 'react';
+import { Dropdown } from '../ui/dropdown/Dropdown';
+import { DropdownItem } from '../ui/dropdown/DropdownItem';
+import { useSectorStore } from '../../store/sectorStore';
+import { useSiteStore } from '../../store/siteStore';
+
+export default function SectorSelector() {
+  const { activeSite } = useSiteStore();
+  const { activeSector, sectors, setActiveSector, loading } = useSectorStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Don't render if no active site
+  if (!activeSite) {
+    return null;
+  }
+
+  // Don't render if no sectors available
+  if (!loading && sectors.length === 0) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+        <span>No sectors available</span>
+      </div>
+    );
+  }
+
+  const handleSectorSelect = (sectorId: number | null) => {
+    if (sectorId === null) {
+      // "All Sectors" option
+      setActiveSector(null);
+      setIsOpen(false);
+    } else {
+      const sector = sectors.find(s => s.id === sectorId);
+      if (sector) {
+        setActiveSector(sector);
+        setIsOpen(false);
+      }
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700 dropdown-toggle"
+        aria-label="Select sector"
+        disabled={loading || sectors.length === 0}
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+            />
+          </svg>
+          <span className="max-w-[150px] truncate">
+            {loading ? 'Loading...' : activeSector?.name || 'All Sectors'}
+          </span>
+        </span>
+        <svg
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <Dropdown
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        anchorRef={buttonRef}
+        placement="bottom-right"
+        className="w-64 p-2 overflow-y-auto max-h-[300px]"
+      >
+        {/* "All Sectors" option */}
+        <DropdownItem
+          onItemClick={() => handleSectorSelect(null)}
+          className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+            !activeSector
+              ? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
+              : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+          }`}
+        >
+          <span className="flex-1">All Sectors</span>
+          {!activeSector && (
+            <svg
+              className="w-4 h-4 text-blue-600 dark:text-blue-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
+        </DropdownItem>
+        {sectors.map((sector) => (
+          <DropdownItem
+            key={sector.id}
+            onItemClick={() => handleSectorSelect(sector.id)}
+            className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+              activeSector?.id === sector.id
+                ? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
+                : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            }`}
+          >
+            <span className="flex-1">{sector.name}</span>
+            {activeSector?.id === sector.id && (
+              <svg
+                className="w-4 h-4 text-blue-600 dark:text-blue-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}
+