From b7e029546fe1b58bc067238d1ca54beea07861e7 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Tue, 25 Feb 2025 15:55:41 +0700
Subject: [PATCH] feat: add subscriptions page with data table and sample data

---
 app/pages/dashboard-subscriptions/data.ts     | 21 +++++++++++
 app/pages/dashboard-subscriptions/index.tsx   | 36 +++++++++++++++++++
 .../_layout.admin.dashboard.subscriptions.tsx |  4 ++-
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/dashboard-subscriptions/data.ts
 create mode 100644 app/pages/dashboard-subscriptions/index.tsx

diff --git a/app/pages/dashboard-subscriptions/data.ts b/app/pages/dashboard-subscriptions/data.ts
new file mode 100644
index 0000000..90b5ea2
--- /dev/null
+++ b/app/pages/dashboard-subscriptions/data.ts
@@ -0,0 +1,21 @@
+type TSubscriptions = {
+  id: number
+  createdAt: string
+  date: string
+  name: string
+  email: string
+  category: string
+  status: string
+}
+
+export const CONTENTS: TSubscriptions[] = [
+  {
+    id: 1,
+    createdAt: '24/10/2024',
+    date: '24/10/2024',
+    name: 'John Doe',
+    email: 'test@test.com',
+    category: 'Education',
+    status: 'Published',
+  },
+]
diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
new file mode 100644
index 0000000..2c2cefd
--- /dev/null
+++ b/app/pages/dashboard-subscriptions/index.tsx
@@ -0,0 +1,36 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+import { CONTENTS } from './data'
+
+export const SubscriptionsPage = () => {
+  DataTable.use(DT)
+  const columns = [
+    { title: 'No', data: 'id' },
+    { title: 'Tanggal Subscribe', data: 'date' },
+    { title: 'Nama User', data: 'name' },
+    { title: 'Email', data: 'email' },
+    { title: 'Kategori', data: 'category' },
+    { title: 'Status', data: 'status' },
+    { title: 'Action', data: 'id', render: () => 'Subscribed' },
+  ]
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Subscription" />
+      <DataTable
+        className="cell-border"
+        data={CONTENTS}
+        columns={columns}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+      ></DataTable>
+    </div>
+  )
+}
diff --git a/app/routes/_layout.admin.dashboard.subscriptions.tsx b/app/routes/_layout.admin.dashboard.subscriptions.tsx
index bb2f896..fdff80d 100644
--- a/app/routes/_layout.admin.dashboard.subscriptions.tsx
+++ b/app/routes/_layout.admin.dashboard.subscriptions.tsx
@@ -1,4 +1,6 @@
+import { SubscriptionsPage } from '~/pages/dashboard-subscriptions'
+
 const DashboardSubscriptionsLayout = () => {
-  return <div>Subscriptions Page</div>
+  return <SubscriptionsPage />
 }
 export default DashboardSubscriptionsLayout