feat: add table search filter component and integrate with tags page

app/pages/dashboard-tags/index.tsx

@@ -12,6 +12,7 @@ import type { TTagResponse } from '~/apis/common/get-tags'
 import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
+import { TableSearchFilter } from '~/components/ui/table-search'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
 
@@ -19,6 +20,7 @@ export const TagsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',
   )
+  const [searchTerm, setSearchTerm] = useState<string>('')
   const [selectedTag, setSelectedTag] = useState<TTagResponse>()
   const { tagsData: dataTable } = loaderData || {}
 
@@ -73,16 +75,27 @@ export const TagsPage = () => {
   }
   const dataOptions: Config = {
     paging: true,
-    searching: true,
-    ordering: true,
     info: true,
   }
-
+  const filteredData = dataTable?.filter((item) => {
+    const matchesSearch = Object.keys(item).some((key) =>
+      item[key as keyof TTagResponse]
+        ?.toString()
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase()),
+    )
+    return matchesSearch
+  })
   return (
     <div className="relative">
       <TitleDashboard title="Tags" />
       <div className="mb-8 flex items-end justify-between gap-5">
-        <div className="flex-1">{/* TODO: Filter */}</div>
+        <div className="flex-1">
+          <TableSearchFilter
+            onSearch={setSearchTerm}
+            title="Tag"
+          />
+        </div>
         <Button
           as={Link}
           to="/lg-admin/tags/create"
@@ -94,7 +107,7 @@ export const TagsPage = () => {
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={filteredData || []}
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}