update component filter

src/app/(main)/dai-dien-gioi-chu/components/event-filter/index.tsx

@@ -7,12 +7,7 @@ import { Button } from '@/components/ui/button'
 
 type Category = { id: string; title: string }
 
-const MOCK_CATEGORIES: Category[] = [
-  { id: 'topic', title: 'Chuyên đề' },
-  { id: 'training', title: 'Tập huấn NSDLĐ' },
-  { id: 'law', title: 'Xây dựng và Phổ biến pháp luật' },
-  { id: 'trade', title: 'Xúc tiến thương mại và Đầu tư' }
-]
+
 
 type FilterPayload = {
   upcoming: boolean
@@ -22,14 +17,20 @@ type FilterPayload = {
   fromDate: string
   toDate: string
 }
-
-export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void; onReset?: () => void }> = ({ onFilter, onReset }) => {
+export const EventFilter: React.FC<{
+  categories?: Category[]
+  onFilter?: (payload: FilterPayload) => void
+  onReset?: () => void
+}> = ({ categories: categoriesProp, onFilter, onReset }) => {
   const [upcoming, setUpcoming] = useState(false)
   const [past, setPast] = useState(false)
   const [query, setQuery] = useState('')
+  // Use categories passed via props if available; otherwise use an empty array
+  const categoriesList = categoriesProp ?? []
+
   const [categories, setCategories] = useState<Record<string, boolean>>(() => {
     const map: Record<string, boolean> = {}
-    MOCK_CATEGORIES.forEach((c) => (map[c.id] = false))
+    categoriesList.forEach((c) => (map[c.id] = false))
     return map
   })
   const [fromDate, setFromDate] = useState('')
@@ -85,14 +86,16 @@ export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void
         />
       </div>
 
-      <div className="mb-4">
-        {MOCK_CATEGORIES.map((c) => (
-          <label key={c.id} className="flex items-center gap-2 mb-2">
-            <Checkbox checked={!!categories[c.id]} onCheckedChange={() => toggleCategory(c.id)} />
-            <span className="text-sm">{c.title}</span>
-          </label>
-        ))}
-      </div>
+      {categoriesList && categoriesList.length > 0 && (
+        <div className="mb-4">
+          {categoriesList.map((c) => (
+            <label key={c.id} className="flex items-center gap-2 mb-2">
+              <Checkbox checked={!!categories[c.id]} onCheckedChange={() => toggleCategory(c.id)} />
+              <span className="text-sm">{c.title}</span>
+            </label>
+          ))}
+        </div>
+      )}
 
       <div className="mb-4">
   <Label className="block text-sm mb-1">Từ ngày:</Label>

src/app/(main)/hoat-dong/su-kien/page.tsx

@@ -4,7 +4,6 @@ import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
 import { EVENT_CATEGORIES } from "@constants/categories";
 import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
 import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
-// ...existing code...
 import { Pagination } from "@components/base/pagination";
 import Image from "next/image";
 import { useGetEvents } from '@api/endpoints/event'
@@ -14,8 +13,8 @@ import { GetNewsResponseType } from "@api/types/NewsPage.type";
 import { PATHS } from "@constants/paths";
 import { Spinner } from "@components/ui/spinner";
 export default function Page() {
-  const [submitSearch] = useState("");
   const [page, setPage] = useState(1);
+  const [filtersString, setFiltersString] = useState<string | undefined>('')
 
   const pageSize = 5;
   const { data: allData, isLoading } = useGetEvents<EventApiResponse>({
@@ -23,7 +22,7 @@ export default function Page() {
     currentPage: String(page),
     sortField: 'start_time',
     sortOrder: 'ASC',
-    filters: submitSearch ? `title @=${submitSearch},start_time>${new Date()}` : `start_time>${new Date()}`,
+    filters: filtersString ?? undefined,
   });
   return (
     <div className="min-h-screen container mx-auto p-4">
@@ -61,7 +60,37 @@ export default function Page() {
 
           {/* Sidebar */}
           <aside className="space-y-6">
-            <EventFilter />
+            <EventFilter
+              onFilter={(payload) => {
+                const parts: string[] = []
+                // query
+                if (payload.query) parts.push(`title @=${payload.query}`)
+
+                const nowIso = new Date().toISOString()
+                // upcoming / past
+                if (payload.upcoming && !payload.past) {
+                  parts.push(`start_time>${nowIso}`)
+                } else if (payload.past && !payload.upcoming) {
+                  parts.push(`start_time<=${nowIso}`)
+                }
+                if (payload.fromDate) {
+                  const fromIso = new Date(payload.fromDate).toISOString()
+                  parts.push(`created_at>=${fromIso}`)
+                }
+                if (payload.toDate) {
+                  const toIso = new Date(payload.toDate).toISOString()
+                  parts.push(`created_at<=${toIso}`)
+                }
+
+                const filters = parts.length > 0 ? parts.join(',') : undefined
+                setFiltersString(filters)
+                setPage(1)
+              }}
+              onReset={() => {
+                setFiltersString(undefined)
+                setPage(1)
+              }}
+            />
 
             <div className="bg-white border rounded-md overflow-hidden">
               <div className="w-full h-56 relative bg-gray-100">