final polish phase 1
This commit is contained in:
IGNY8 VPS (Salman)
@@ -23,6 +23,8 @@ interface PageHeaderProps {
|
||||
icon: ReactNode;
|
||||
color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo' | 'yellow' | 'pink' | 'emerald' | 'cyan' | 'amber' | 'teal';
|
||||
};
|
||||
/** Completely hide site/sector selectors in app header */
|
||||
hideSelectors?: boolean;
|
||||
hideSiteSector?: boolean;
|
||||
navigation?: ReactNode; // Kept for backwards compat but not rendered
|
||||
workflowInsights?: any[]; // Kept for backwards compat but not rendered
|
||||
@@ -40,6 +42,7 @@ export default function PageHeader({
|
||||
onRefresh,
|
||||
className = "",
|
||||
badge,
|
||||
hideSelectors = false,
|
||||
hideSiteSector = false,
|
||||
actions,
|
||||
}: PageHeaderProps) {
|
||||
@@ -54,11 +57,11 @@ export default function PageHeader({
|
||||
const parentModule = parent || breadcrumb;
|
||||
|
||||
// Update page context with title and badge info for AppHeader
|
||||
const pageInfoKey = useMemo(() => `${title}|${parentModule}`, [title, parentModule]);
|
||||
const pageInfoKey = useMemo(() => `${title}|${parentModule}|${hideSiteSector}|${hideSelectors}`, [title, parentModule, hideSiteSector, hideSelectors]);
|
||||
useEffect(() => {
|
||||
setPageInfo({ title, parent: parentModule, badge });
|
||||
setPageInfo({ title, parent: parentModule, badge, hideSelectors, hideSectorSelector: hideSiteSector });
|
||||
return () => setPageInfo(null);
|
||||
}, [pageInfoKey, badge?.color]);
|
||||
}, [pageInfoKey, badge?.color, hideSiteSector, hideSelectors]);
|
||||
|
||||
// Load sectors when active site changes
|
||||
useEffect(() => {
|
||||
|
||||
183
frontend/src/components/common/SingleSiteSelector.tsx
Normal file
183
frontend/src/components/common/SingleSiteSelector.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* Single Site Selector
|
||||
* Site-only selector without "All Sites" option
|
||||
* For pages that require a specific site selection (Automation, Content Settings)
|
||||
*/
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Dropdown } from '../ui/dropdown/Dropdown';
|
||||
import { DropdownItem } from '../ui/dropdown/DropdownItem';
|
||||
import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
|
||||
import { useToast } from '../ui/toast/ToastContainer';
|
||||
import { useSiteStore } from '../../store/siteStore';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import Button from '../ui/button/Button';
|
||||
|
||||
export default function SingleSiteSelector() {
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
|
||||
const { user, refreshUser, isAuthenticated } = useAuthStore();
|
||||
|
||||
// Site switcher state
|
||||
const [sitesOpen, setSitesOpen] = useState(false);
|
||||
const [sites, setSites] = useState<Site[]>([]);
|
||||
const [sitesLoading, setSitesLoading] = useState(true);
|
||||
const siteButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const noSitesAvailable = !sitesLoading && sites.length === 0;
|
||||
|
||||
// Load sites
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
refreshUser().catch((error) => {
|
||||
console.debug('SingleSiteSelector: Failed to refresh user (non-critical):', error);
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSites();
|
||||
if (!activeSite) {
|
||||
loadActiveSite();
|
||||
}
|
||||
}, [user?.account?.id]);
|
||||
|
||||
const loadSites = async () => {
|
||||
try {
|
||||
setSitesLoading(true);
|
||||
const response = await fetchSites();
|
||||
const activeSites = (response.results || []).filter(site => site.is_active);
|
||||
setSites(activeSites);
|
||||
} catch (error: any) {
|
||||
console.error('Failed to load sites:', error);
|
||||
toast.error(`Failed to load sites: ${error.message}`);
|
||||
} finally {
|
||||
setSitesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSiteSelect = async (siteId: number) => {
|
||||
try {
|
||||
await apiSetActiveSite(siteId);
|
||||
const selectedSite = sites.find(s => s.id === siteId);
|
||||
if (selectedSite) {
|
||||
setActiveSite(selectedSite);
|
||||
toast.success(`Switched to "${selectedSite.name}"`);
|
||||
}
|
||||
setSitesOpen(false);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to switch site: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Get display text
|
||||
const getSiteDisplayText = () => {
|
||||
if (sitesLoading) return 'Loading...';
|
||||
return activeSite?.name || 'Select Site';
|
||||
};
|
||||
|
||||
// Check if a site is selected
|
||||
const isSiteSelected = (siteId: number) => {
|
||||
return activeSite?.id === siteId;
|
||||
};
|
||||
|
||||
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.</span>
|
||||
<Button size="sm" variant="primary" onClick={handleCreateSite}>
|
||||
Create Site
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative inline-block">
|
||||
<button
|
||||
ref={siteButtonRef}
|
||||
onClick={() => setSitesOpen(!sitesOpen)}
|
||||
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="Switch site"
|
||||
disabled={sitesLoading || sites.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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="max-w-[150px] truncate">
|
||||
{getSiteDisplayText()}
|
||||
</span>
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? '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={sitesOpen}
|
||||
onClose={() => setSitesOpen(false)}
|
||||
anchorRef={siteButtonRef}
|
||||
placement="bottom-left"
|
||||
className="w-64 p-2"
|
||||
>
|
||||
{sites.map((site) => (
|
||||
<DropdownItem
|
||||
key={site.id}
|
||||
onItemClick={() => handleSiteSelect(site.id)}
|
||||
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
||||
isSiteSelected(site.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">{site.name}</span>
|
||||
{isSiteSelected(site.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>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
/**
|
||||
* Combined Site and Sector Selector Component
|
||||
* Displays both site switcher and sector selector side by side with accent colors
|
||||
*
|
||||
* Dashboard Mode: Shows "All Sites" option, uses callback for filtering
|
||||
* Module Mode: Standard site/sector selection
|
||||
*/
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@@ -15,10 +18,19 @@ import Button from '../ui/button/Button';
|
||||
|
||||
interface SiteAndSectorSelectorProps {
|
||||
hideSectorSelector?: boolean;
|
||||
/** Dashboard mode: show "All Sites" option */
|
||||
showAllSitesOption?: boolean;
|
||||
/** Current site filter for dashboard mode ('all' or site id) */
|
||||
siteFilter?: 'all' | number;
|
||||
/** Callback when site filter changes in dashboard mode */
|
||||
onSiteFilterChange?: (value: 'all' | number) => void;
|
||||
}
|
||||
|
||||
export default function SiteAndSectorSelector({
|
||||
hideSectorSelector = false,
|
||||
showAllSitesOption = false,
|
||||
siteFilter,
|
||||
onSiteFilterChange,
|
||||
}: SiteAndSectorSelectorProps) {
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
@@ -67,7 +79,22 @@ export default function SiteAndSectorSelector({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSiteSelect = async (siteId: number) => {
|
||||
const handleSiteSelect = async (siteId: number | 'all') => {
|
||||
// Dashboard mode: use callback
|
||||
if (showAllSitesOption && onSiteFilterChange) {
|
||||
onSiteFilterChange(siteId);
|
||||
setSitesOpen(false);
|
||||
if (siteId !== 'all') {
|
||||
const selectedSite = sites.find(s => s.id === siteId);
|
||||
if (selectedSite) {
|
||||
setActiveSite(selectedSite);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Module mode: standard site switching
|
||||
if (siteId === 'all') return; // Should not happen in module mode
|
||||
try {
|
||||
await apiSetActiveSite(siteId);
|
||||
const selectedSite = sites.find(s => s.id === siteId);
|
||||
@@ -81,6 +108,24 @@ export default function SiteAndSectorSelector({
|
||||
}
|
||||
};
|
||||
|
||||
// Get display text based on mode
|
||||
const getSiteDisplayText = () => {
|
||||
if (sitesLoading) return 'Loading...';
|
||||
if (showAllSitesOption && siteFilter === 'all') return 'All Sites';
|
||||
if (showAllSitesOption && typeof siteFilter === 'number') {
|
||||
return sites.find(s => s.id === siteFilter)?.name || activeSite?.name || 'Select Site';
|
||||
}
|
||||
return activeSite?.name || 'Select Site';
|
||||
};
|
||||
|
||||
// Check if a site is selected
|
||||
const isSiteSelected = (siteId: number | 'all') => {
|
||||
if (showAllSitesOption) {
|
||||
return siteFilter === siteId;
|
||||
}
|
||||
return siteId !== 'all' && activeSite?.id === siteId;
|
||||
};
|
||||
|
||||
const handleSectorSelect = (sectorId: number | null) => {
|
||||
if (sectorId === null) {
|
||||
setActiveSector(null);
|
||||
@@ -141,7 +186,7 @@ export default function SiteAndSectorSelector({
|
||||
/>
|
||||
</svg>
|
||||
<span className="max-w-[150px] truncate">
|
||||
{sitesLoading ? 'Loading...' : activeSite?.name || 'Select Site'}
|
||||
{getSiteDisplayText()}
|
||||
</span>
|
||||
</span>
|
||||
<svg
|
||||
@@ -166,18 +211,44 @@ export default function SiteAndSectorSelector({
|
||||
placement="bottom-left"
|
||||
className="w-64 p-2"
|
||||
>
|
||||
{/* All Sites option - only in dashboard mode */}
|
||||
{showAllSitesOption && (
|
||||
<DropdownItem
|
||||
onItemClick={() => handleSiteSelect('all')}
|
||||
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
||||
isSiteSelected('all')
|
||||
? "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 Sites</span>
|
||||
{isSiteSelected('all') && (
|
||||
<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>
|
||||
)}
|
||||
{sites.map((site) => (
|
||||
<DropdownItem
|
||||
key={site.id}
|
||||
onItemClick={() => handleSiteSelect(site.id)}
|
||||
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
||||
activeSite?.id === site.id
|
||||
isSiteSelected(site.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">{site.name}</span>
|
||||
{activeSite?.id === site.id && (
|
||||
{isSiteSelected(site.id) && (
|
||||
<svg
|
||||
className="w-4 h-4 text-brand-600 dark:text-brand-400"
|
||||
fill="currentColor"
|
||||
|
||||
238
frontend/src/components/common/SiteWithAllSitesSelector.tsx
Normal file
238
frontend/src/components/common/SiteWithAllSitesSelector.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
/**
|
||||
* Site Selector with "All Sites" Option
|
||||
* Site-only selector for dashboard/overview pages
|
||||
* No sector selection - just sites with "All Sites" as first option
|
||||
*/
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Dropdown } from '../ui/dropdown/Dropdown';
|
||||
import { DropdownItem } from '../ui/dropdown/DropdownItem';
|
||||
import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
|
||||
import { useToast } from '../ui/toast/ToastContainer';
|
||||
import { useSiteStore } from '../../store/siteStore';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import Button from '../ui/button/Button';
|
||||
|
||||
interface SiteWithAllSitesSelectorProps {
|
||||
/** Current site filter ('all' or site id) */
|
||||
siteFilter?: 'all' | number;
|
||||
/** Callback when site filter changes */
|
||||
onSiteFilterChange?: (value: 'all' | number) => void;
|
||||
}
|
||||
|
||||
export default function SiteWithAllSitesSelector({
|
||||
siteFilter = 'all',
|
||||
onSiteFilterChange,
|
||||
}: SiteWithAllSitesSelectorProps) {
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
|
||||
const { user, refreshUser, isAuthenticated } = useAuthStore();
|
||||
|
||||
// Site switcher state
|
||||
const [sitesOpen, setSitesOpen] = useState(false);
|
||||
const [sites, setSites] = useState<Site[]>([]);
|
||||
const [sitesLoading, setSitesLoading] = useState(true);
|
||||
const siteButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const noSitesAvailable = !sitesLoading && sites.length === 0;
|
||||
|
||||
// Load sites
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
refreshUser().catch((error) => {
|
||||
console.debug('SiteWithAllSitesSelector: Failed to refresh user (non-critical):', error);
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSites();
|
||||
if (!activeSite) {
|
||||
loadActiveSite();
|
||||
}
|
||||
}, [user?.account?.id]);
|
||||
|
||||
const loadSites = async () => {
|
||||
try {
|
||||
setSitesLoading(true);
|
||||
const response = await fetchSites();
|
||||
const activeSites = (response.results || []).filter(site => site.is_active);
|
||||
setSites(activeSites);
|
||||
} catch (error: any) {
|
||||
console.error('Failed to load sites:', error);
|
||||
toast.error(`Failed to load sites: ${error.message}`);
|
||||
} finally {
|
||||
setSitesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSiteSelect = async (siteId: number | 'all') => {
|
||||
if (onSiteFilterChange) {
|
||||
onSiteFilterChange(siteId);
|
||||
setSitesOpen(false);
|
||||
if (siteId !== 'all') {
|
||||
const selectedSite = sites.find(s => s.id === siteId);
|
||||
if (selectedSite) {
|
||||
setActiveSite(selectedSite);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback: standard site switching
|
||||
if (siteId === 'all') {
|
||||
setSitesOpen(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await apiSetActiveSite(siteId);
|
||||
const selectedSite = sites.find(s => s.id === siteId);
|
||||
if (selectedSite) {
|
||||
setActiveSite(selectedSite);
|
||||
toast.success(`Switched to "${selectedSite.name}"`);
|
||||
}
|
||||
setSitesOpen(false);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to switch site: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Get display text
|
||||
const getSiteDisplayText = () => {
|
||||
if (sitesLoading) return 'Loading...';
|
||||
if (siteFilter === 'all') return 'All Sites';
|
||||
if (typeof siteFilter === 'number') {
|
||||
return sites.find(s => s.id === siteFilter)?.name || activeSite?.name || 'Select Site';
|
||||
}
|
||||
return activeSite?.name || 'All Sites';
|
||||
};
|
||||
|
||||
// Check if a site is selected
|
||||
const isSiteSelected = (siteId: number | 'all') => {
|
||||
return siteFilter === siteId;
|
||||
};
|
||||
|
||||
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.</span>
|
||||
<Button size="sm" variant="primary" onClick={handleCreateSite}>
|
||||
Create Site
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative inline-block">
|
||||
<button
|
||||
ref={siteButtonRef}
|
||||
onClick={() => setSitesOpen(!sitesOpen)}
|
||||
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="Switch site"
|
||||
disabled={sitesLoading || sites.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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="max-w-[150px] truncate">
|
||||
{getSiteDisplayText()}
|
||||
</span>
|
||||
</span>
|
||||
<svg
|
||||
className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? '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={sitesOpen}
|
||||
onClose={() => setSitesOpen(false)}
|
||||
anchorRef={siteButtonRef}
|
||||
placement="bottom-left"
|
||||
className="w-64 p-2"
|
||||
>
|
||||
{/* All Sites option */}
|
||||
<DropdownItem
|
||||
onItemClick={() => handleSiteSelect('all')}
|
||||
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
||||
isSiteSelected('all')
|
||||
? "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 Sites</span>
|
||||
{isSiteSelected('all') && (
|
||||
<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>
|
||||
{sites.map((site) => (
|
||||
<DropdownItem
|
||||
key={site.id}
|
||||
onItemClick={() => handleSiteSelect(site.id)}
|
||||
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
||||
isSiteSelected(site.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">{site.name}</span>
|
||||
{isSiteSelected(site.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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user