diff --git a/src/components/Admin/AdminPanel.css b/src/components/Admin/AdminPanel.css index 5e749dd..e103ec1 100644 --- a/src/components/Admin/AdminPanel.css +++ b/src/components/Admin/AdminPanel.css @@ -641,6 +641,46 @@ border-radius: 3px; margin-left: 5px; } + + .filter-group { + margin-bottom: 10px; + } + + .search-container { + position: relative; + display: flex; + align-items: center; + } + + .reset-filters-button { + position: absolute; + right: 10px; + background: none; + border: none; + cursor: pointer; + font-size: 16px; + color: #666; + } + + .reset-filters-button:hover { + color: #ff3333; + } + + .resources-summary { + margin: 5px 0; + font-size: 0.9rem; + color: #666; + padding: 0 10px; + } + + .category-filter, + .tag-filter { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + margin-bottom: 5px; + } /* Accessibility */ .sr-only { diff --git a/src/components/Admin/AdminPanel.js b/src/components/Admin/AdminPanel.js index b2df316..2b3ca21 100644 --- a/src/components/Admin/AdminPanel.js +++ b/src/components/Admin/AdminPanel.js @@ -15,6 +15,8 @@ const AdminPanel = () => { const [statusFilter, setStatusFilter] = useState('all'); const [searchQuery, setSearchQuery] = useState(''); const [completenessFilter, setCompletenessFilter] = useState('all'); + const [categoryFilter, setCategoryFilter] = useState('all'); + const [tagFilter, setTagFilter] = useState('all'); // Login state const [email, setEmail] = useState(''); @@ -176,6 +178,15 @@ const AdminPanel = () => { document.removeEventListener('keydown', handleKeyNavigation); }; }, [handleKeyNavigation]); + + // Reset filters + const resetFilters = () => { + setStatusFilter('all'); + setCompletenessFilter('all'); + setCategoryFilter('all'); + setTagFilter('all'); + setSearchQuery(''); + }; // Calculate resource completeness percentage const calculateCompleteness = (resource) => { @@ -243,7 +254,7 @@ const AdminPanel = () => { }); }; - // Filter resources based on status, search query, and completeness + // Filter resources based on status, search query, completeness, category, and tag const filteredResources = resources.filter(resource => { // Status filter if (statusFilter !== 'all' && resource.status !== statusFilter) return false; @@ -257,6 +268,12 @@ const AdminPanel = () => { if (completenessFilter.startsWith('min-') && resource.completeness < parseInt(completenessFilter.substring(4))) return false; if (completenessFilter.startsWith('max-') && resource.completeness > parseInt(completenessFilter.substring(4))) return false; + // Category filter + if (categoryFilter !== 'all' && (!resource.categoryIds || !resource.categoryIds.includes(parseInt(categoryFilter)))) return false; + + // Tag filter + if (tagFilter !== 'all' && (!resource.tagIds || !resource.tagIds.includes(parseInt(tagFilter)))) return false; + return true; }); @@ -596,13 +613,25 @@ const AdminPanel = () => {