From c91fe48eb960232805ed30715f5887c582f00f78 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Fri, 7 Mar 2025 14:56:00 +0700
Subject: [PATCH] feat: add tags management page and update admin menu

---
 app/layouts/admin/menu.ts                     |  7 +-
 app/pages/dashboard-tags/index.tsx            | 87 +++++++++++++++++++
 ..._admin.lg-admin._dashboard.tags._index.tsx | 15 ++++
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/dashboard-tags/index.tsx
 create mode 100644 app/routes/_admin.lg-admin._dashboard.tags._index.tsx

diff --git a/app/layouts/admin/menu.ts b/app/layouts/admin/menu.ts
index c0f5825..1d832df 100644
--- a/app/layouts/admin/menu.ts
+++ b/app/layouts/admin/menu.ts
@@ -1,4 +1,4 @@
-import { ClipboardDocumentCheckIcon } from '@heroicons/react/20/solid'
+import { ClipboardDocumentCheckIcon, TagIcon } from '@heroicons/react/20/solid'
 import type { SVGProps } from 'react'
 
 import { ChartIcon } from '~/components/icons/chart'
@@ -56,6 +56,11 @@ export const MENU: TMenu[] = [
         url: '/lg-admin/categories',
         icon: ClipboardDocumentCheckIcon,
       },
+      {
+        title: 'Tag',
+        url: '/lg-admin/tags',
+        icon: TagIcon,
+      },
       {
         title: 'Pengaturan',
         url: '/lg-admin/settings',
diff --git a/app/pages/dashboard-tags/index.tsx b/app/pages/dashboard-tags/index.tsx
new file mode 100644
index 0000000..e3825e6
--- /dev/null
+++ b/app/pages/dashboard-tags/index.tsx
@@ -0,0 +1,87 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+import { Link, useRouteLoaderData } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { UiTable } from '~/components/ui/table'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.tags._index'
+
+export const TagsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.tags._index',
+  )
+  const tagsData = loaderData?.tagsData
+  const dataTable = tagsData
+
+  DataTable.use(DT)
+  const dataColumns = [
+    {
+      title: 'No',
+      render: (
+        data: unknown,
+        type: unknown,
+        row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    {
+      title: 'Tag',
+      data: 'name',
+    },
+    {
+      title: 'Kode',
+      data: 'code',
+    },
+    {
+      title: 'Action',
+      data: 'id',
+    },
+  ]
+
+  const dataOptions = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+  }
+
+  const dataSlot = {
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/tags/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Tag
+      </Button>
+    ),
+  }
+  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>
+        <Button
+          as={Link}
+          to="/lg-admin/tags/create"
+          className="text-md h-[42px] rounded-md"
+          size="lg"
+        >
+          Buat Tags
+        </Button>
+      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        options={dataOptions}
+        slots={dataSlot}
+        title="Daftar Katgeori"
+      />
+    </div>
+  )
+}
diff --git a/app/routes/_admin.lg-admin._dashboard.tags._index.tsx b/app/routes/_admin.lg-admin._dashboard.tags._index.tsx
new file mode 100644
index 0000000..c15b8f9
--- /dev/null
+++ b/app/routes/_admin.lg-admin._dashboard.tags._index.tsx
@@ -0,0 +1,15 @@
+import { getTags } from '~/apis/common/get-tags'
+import { handleCookie } from '~/libs/cookies'
+import { TagsPage } from '~/pages/dashboard-tags'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.tags._index'
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: tagsData } = await getTags({
+    accessToken: staffToken,
+  })
+  return { tagsData }
+}
+
+const DashboardTagsIndexLayout = () => <TagsPage />
+export default DashboardTagsIndexLayout