refactor phase 6

2025-11-20 21:47:03 +05:00
parent b0409d965b
commit 45dc0d1fa2
5 changed files with 305 additions and 121 deletions
--- a/frontend/src/components/common/SiteAndSectorSelector.tsx
+++ b/frontend/src/components/common/SiteAndSectorSelector.tsx
@@ -3,6 +3,7 @@
 * Displays both site switcher and sector selector side by side with accent colors
 */
 import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router';
 import { Dropdown } from '../ui/dropdown/Dropdown';
 import { DropdownItem } from '../ui/dropdown/DropdownItem';
 import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
@@ -10,6 +11,7 @@ import { useToast } from '../ui/toast/ToastContainer';
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { useAuthStore } from '../../store/authStore';
+import Button from '../ui/button/Button';

 interface SiteAndSectorSelectorProps {
  hideSectorSelector?: boolean;
@@ -19,6 +21,7 @@ export default function SiteAndSectorSelector({
  hideSectorSelector = false,
 }: SiteAndSectorSelectorProps) {
  const toast = useToast();
+  const navigate = useNavigate();
  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
  const { activeSector, sectors, setActiveSector, loading: sectorsLoading } = useSectorStore();
  const { user, refreshUser, isAuthenticated } = useAuthStore();
@@ -32,6 +35,7 @@ export default function SiteAndSectorSelector({
  // Sector selector state
  const [sectorsOpen, setSectorsOpen] = useState(false);
  const sectorButtonRef = useRef<HTMLButtonElement>(null);
+  const noSitesAvailable = !sitesLoading && sites.length === 0;

  // Load sites
  useEffect(() => {
@@ -90,9 +94,25 @@ export default function SiteAndSectorSelector({
    }
  };

-  // Don't render if no active site
-  if (!activeSite) {
-    return null;
+  const handleCreateSite = () => navigate('/sites');
+
+  if (sitesLoading && sites.length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>No active sites yet. Create a site to unlock planner and writer modules.</span>
+        <Button size="sm" variant="primary" onClick={handleCreateSite}>
+          Create Site
+        </Button>
+      </div>
+    );
  }

  return (
@@ -176,106 +196,122 @@ export default function SiteAndSectorSelector({
      </div>

      {/* Sector Selector */}
-      {!hideSectorSelector && !sectorsLoading && sectors.length > 0 && (
+      {!hideSectorSelector && (
        <div className="relative inline-block">
-          <button
-            ref={sectorButtonRef}
-            onClick={() => setSectorsOpen(!sectorsOpen)}
-            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
-            aria-label="Select sector"
-            disabled={sectorsLoading || sectors.length === 0}
-          >
-            <span className="flex items-center gap-2">
-              <svg
-                className="w-4 h-4 text-brand-500 dark:text-brand-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
+          {!activeSite ? (
+            <div className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 rounded-lg">
+              Select a site to choose sectors
+            </div>
+          ) : sectorsLoading ? (
+            <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 border border-brand-200 rounded-lg">
+              Loading sectors...
+            </div>
+          ) : sectors.length === 0 ? (
+            <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 rounded-lg">
+              This site has no sectors yet.
+            </div>
+          ) : (
+            <>
+              <button
+                ref={sectorButtonRef}
+                onClick={() => setSectorsOpen(!sectorsOpen)}
+                className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+                aria-label="Select sector"
+                disabled={sectorsLoading || sectors.length === 0}
              >
-                <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">
-                {sectorsLoading ? 'Loading...' : activeSector?.name || 'All Sectors'}
-              </span>
-            </span>
-            <svg
-              className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sectorsOpen ? '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={sectorsOpen}
-            onClose={() => setSectorsOpen(false)}
-            anchorRef={sectorButtonRef}
-            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-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-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-brand-600 dark:text-brand-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-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-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 && (
+                <span className="flex items-center gap-2">
                  <svg
-                    className="w-4 h-4 text-brand-600 dark:text-brand-400"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
+                    className="w-4 h-4 text-brand-500 dark:text-brand-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
                  >
                    <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"
+                      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>
-                )}
-              </DropdownItem>
-            ))}
-          </Dropdown>
+                  <span className="max-w-[150px] truncate">
+                    {activeSector?.name || 'All Sectors'}
+                  </span>
+                </span>
+                <svg
+                  className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sectorsOpen ? '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={sectorsOpen}
+                onClose={() => setSectorsOpen(false)}
+                anchorRef={sectorButtonRef}
+                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-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-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-brand-600 dark:text-brand-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-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-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-brand-600 dark:text-brand-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>
      )}
    </div>