From 352776caef5c4c26229d75b6dcffd935efd07e6c Mon Sep 17 00:00:00 2001
From: damedotblog <hi@dame.art>
Date: Mon, 3 Mar 2025 09:57:21 -0500
Subject: [PATCH] add additi9onal filters to admin panel

---
 src/components/Admin/AdminPanel.css | 40 +++++++++++++++
 src/components/Admin/AdminPanel.js  | 76 ++++++++++++++++++++++++++---
 2 files changed, 108 insertions(+), 8 deletions(-)

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 = () => {
           </div>
           <div className="sidebar-filters">
             <div className="filter-group">
-              <input
-                type="text"
-                placeholder="Search resources..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="search-input"
-              />
+              <div className="search-container">
+                <input
+                  type="text"
+                  placeholder="Search resources..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="search-input"
+                />
+                {(searchQuery || statusFilter !== 'all' || completenessFilter !== 'all' || 
+                  categoryFilter !== 'all' || tagFilter !== 'all') && (
+                  <button 
+                    onClick={resetFilters}
+                    className="reset-filters-button"
+                    title="Reset all filters"
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
             </div>
             <div className="filter-group">
               <select 
@@ -631,6 +660,37 @@ const AdminPanel = () => {
                 <option value="max-75">Less than 75%</option>
               </select>
             </div>
+            <div className="filter-group">
+              <select 
+                value={categoryFilter} 
+                onChange={(e) => setCategoryFilter(e.target.value)}
+                className="category-filter"
+              >
+                <option value="all">All Categories</option>
+                {categories.map(category => (
+                  <option key={category.id} value={category.id}>
+                    {category.emoji} {category.name}
+                  </option>
+                ))}
+              </select>
+              <select 
+                value={tagFilter} 
+                onChange={(e) => setTagFilter(e.target.value)}
+                className="tag-filter"
+              >
+                <option value="all">All Tags</option>
+                {tags.map(tag => (
+                  <option key={tag.id} value={tag.id}>
+                    #{tag.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className="resources-summary">
+            <span className="resources-count">
+              Showing {filteredResources.length} of {resources.length} resources
+            </span>
           </div>
           <div className="resources-list">
             {filteredResources.length > 0 ? (
-- 
2.51.2