fix: change user status type from string to number in userResponseSchema

app/apis/admin/delete-categories.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TCategorySchema } from '~/pages/form-category'
+
+const deleteCategoriesResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TCategorySchema['id']
+} & THttpServer
+
+export const deleteCategoriesRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/category/${id}/delete`,
+    )
+    return deleteCategoriesResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/get-user.ts

@@ -12,7 +12,7 @@ const userResponseSchema = z.object({
       subscribe_plan_id: z.string(),
       start_date: z.string(),
       end_date: z.string().nullable(),
-      status: z.string(),
+      status: z.number(),
       auto_renew: z.boolean(),
       subscribe_plan: z.object({
         id: z.string(),

app/components/ui/table-search.tsx

@@ -0,0 +1,69 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import { useState } from 'react'
+
+interface SearchFilterProperties {
+  title: string
+  columns?: string[]
+  onSearch: (value: string) => void
+  onStatusFilter?: (value: string) => Promise<void>
+}
+export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
+  onSearch,
+  onStatusFilter,
+  title,
+}: SearchFilterProperties) => {
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [statusFilter, setStatusFilter] = useState<string>('')
+
+  const handleSearch = (searchValue: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(searchValue.target.value)
+    onSearch(searchValue.target.value)
+  }
+
+  const handleStatusFilter = (
+    searchValue: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setStatusFilter(searchValue.target.value)
+    onStatusFilter?.(searchValue.target.value)
+  }
+
+  return (
+    <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+      <div className="w-[400px]">
+        <Field>
+          <Label className="mb-2 block text-sm font-medium">Cari {title}</Label>
+          <div className="relative">
+            <Input
+              type="text"
+              value={searchTerm}
+              onChange={handleSearch}
+              placeholder={`Cari Nama ${title}`}
+              className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+            />
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+              <MagnifyingGlassIcon className="h-5 w-5 text-[#363636]" />
+            </div>
+          </div>
+        </Field>
+      </div>
+      {onStatusFilter && (
+        // will handel if filter have dropdown status
+        <div className="w-[235px]">
+          <Field>
+            <Label className="mb-2 block text-sm font-medium">Status</Label>
+            <Select
+              value={statusFilter}
+              onChange={handleStatusFilter}
+              className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+            >
+              <option>Pilih Status</option>
+              <option>Aktif</option>
+              <option>Nonaktif</option>
+            </Select>
+          </Field>
+        </div>
+      )}
+    </div>
+  )
+}

app/components/ui/table.tsx

@@ -32,9 +32,9 @@ export const UiTable: React.FC<UiTableProperties> = ({
               thead.classList.add('text-left')
             },
             paging: true,
-            searching: true,
+            searching: false,
             ordering: true,
-            info: true,
+            info: false,
             language: {
               paginate: {
                 first: renderPaginationIcon(

app/pages/dashboard-categories/index.tsx

@@ -1,8 +1,11 @@
+import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -12,7 +15,7 @@ export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',
   )
-
+  const [selectedCategory, setSelectedCategory] = useState<TCategoryResponse>()
   DataTable.use(DT)
   const dataTable =
     loaderData?.categoriesData?.sort((a, b) => {
@@ -55,15 +58,30 @@ export const CategoriesPage = () => {
         <pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
       </div>
     ),
-    3: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/categories/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Kategori
-      </Button>
+    3: (value: string, _type: unknown, data: TCategoryResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/categories/update/${value}`}
+          size="icon"
+          title="Update Kategori"
+        >
+          <PencilSquareIcon className="h-4 w-4" />
+        </Button>
+        {data.code === 'spotlight' ? (
+          ''
+        ) : (
+          <Button
+            type="button"
+            size="icon"
+            variant="newsDanger"
+            onClick={() => setSelectedCategory(data)}
+            title="Hapus Kategori"
+          >
+            <TrashIcon className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
     ),
   }
   const dataOptions: Config = {
@@ -95,6 +113,15 @@ export const CategoriesPage = () => {
         slots={dataSlot}
         title="Daftar Kategori"
       />
+
+      <DialogDelete
+        selectedId={selectedCategory?.id}
+        close={() => setSelectedCategory(undefined)}
+        title="Kategori"
+        fetcherAction={`/actions/admin/categories/delete/${selectedCategory?.id}`}
+      >
+        <p>{selectedCategory?.name}</p>
+      </DialogDelete>
     </div>
   )
 }

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}

app/routes/actions.admin.categories.delete.$id.ts

@@ -0,0 +1,48 @@
+import { data } from 'react-router'
+import { XiorError } from 'xior'
+
+import { deleteCategoriesRequest } from '~/apis/admin/delete-categories'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.admin.categories.delete.$id'
+
+export const action = async ({ request, params }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { id } = params
+  try {
+    const { data: categoryData } = await deleteCategoriesRequest({
+      accessToken,
+      id,
+    })
+
+    return data(
+      {
+        success: true,
+        categoryData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}