feat: enhance subscriptions page with new data structure and toggle view for settings

app/pages/dashboard-subscriptions/data.ts

@@ -8,7 +8,16 @@ type TSubscriptions = {
   status: string
 }
 
-export const CONTENTS: TSubscriptions[] = [
+type TSubSettings = {
+  id: number
+  createdAt: string
+  subscriber: 'Monthly' | 'Yearly' | 'Weekly' | 'Special'
+  price: string
+  length: '30' | '365' | '7' | '1'
+  status: string
+}
+
+export const SUBSCRIPTIONS: TSubscriptions[] = [
   {
     id: 1,
     createdAt: '24/10/2024',
@@ -18,4 +27,258 @@ export const CONTENTS: TSubscriptions[] = [
     category: 'Education',
     status: 'Published',
   },
+  {
+    id: 2,
+    createdAt: '25/10/2024',
+    date: '25/10/2024',
+    name: 'Jane Smith',
+    email: 'jane@test.com',
+    category: 'Health',
+    status: 'Draft',
+  },
+  {
+    id: 3,
+    createdAt: '26/10/2024',
+    date: '26/10/2024',
+    name: 'Alice Johnson',
+    email: 'alice@test.com',
+    category: 'Technology',
+    status: 'Published',
+  },
+  {
+    id: 4,
+    createdAt: '27/10/2024',
+    date: '27/10/2024',
+    name: 'Bob Brown',
+    email: 'bob@test.com',
+    category: 'Business',
+    status: 'Draft',
+  },
+  {
+    id: 5,
+    createdAt: '28/10/2024',
+    date: '28/10/2024',
+    name: 'Charlie Davis',
+    email: 'charlie@test.com',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 6,
+    createdAt: '29/10/2024',
+    date: '29/10/2024',
+    name: 'Diana Evans',
+    email: 'diana@test.com',
+    category: 'Health',
+    status: 'Draft',
+  },
+  {
+    id: 7,
+    createdAt: '30/10/2024',
+    date: '30/10/2024',
+    name: 'Eve Foster',
+    email: 'eve@test.com',
+    category: 'Technology',
+    status: 'Published',
+  },
+  {
+    id: 8,
+    createdAt: '31/10/2024',
+    date: '31/10/2024',
+    name: 'Frank Green',
+    email: 'frank@test.com',
+    category: 'Business',
+    status: 'Draft',
+  },
+  {
+    id: 9,
+    createdAt: '01/11/2024',
+    date: '01/11/2024',
+    name: 'Grace Harris',
+    email: 'grace@test.com',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 10,
+    createdAt: '02/11/2024',
+    date: '02/11/2024',
+    name: 'Henry Jackson',
+    email: 'henry@test.com',
+    category: 'Health',
+    status: 'Draft',
+  },
+  {
+    id: 11,
+    createdAt: '03/11/2024',
+    date: '03/11/2024',
+    name: 'Ivy King',
+    email: 'ivy@test.com',
+    category: 'Technology',
+    status: 'Published',
+  },
+  {
+    id: 12,
+    createdAt: '04/11/2024',
+    date: '04/11/2024',
+    name: 'Jack Lee',
+    email: 'jack@test.com',
+    category: 'Business',
+    status: 'Draft',
+  },
+  {
+    id: 13,
+    createdAt: '05/11/2024',
+    date: '05/11/2024',
+    name: 'Kathy Miller',
+    email: 'kathy@test.com',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 14,
+    createdAt: '06/11/2024',
+    date: '06/11/2024',
+    name: 'Leo Nelson',
+    email: 'leo@test.com',
+    category: 'Health',
+    status: 'Draft',
+  },
+  {
+    id: 15,
+    createdAt: '07/11/2024',
+    date: '07/11/2024',
+    name: 'Mia Owens',
+    email: 'mia@test.com',
+    category: 'Technology',
+    status: 'Published',
+  },
+  {
+    id: 16,
+    createdAt: '08/11/2024',
+    date: '08/11/2024',
+    name: 'Noah Parker',
+    email: 'noah@test.com',
+    category: 'Business',
+    status: 'Draft',
+  },
+  {
+    id: 17,
+    createdAt: '09/11/2024',
+    date: '09/11/2024',
+    name: 'Olivia Quinn',
+    email: 'olivia@test.com',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 18,
+    createdAt: '10/11/2024',
+    date: '10/11/2024',
+    name: 'Paul Roberts',
+    email: 'paul@test.com',
+    category: 'Health',
+    status: 'Draft',
+  },
+  {
+    id: 19,
+    createdAt: '11/11/2024',
+    date: '11/11/2024',
+    name: 'Quinn Scott',
+    email: 'quinn@test.com',
+    category: 'Technology',
+    status: 'Published',
+  },
+  {
+    id: 20,
+    createdAt: '12/11/2024',
+    date: '12/11/2024',
+    name: 'Rachel Turner',
+    email: 'rachel@test.com',
+    category: 'Business',
+    status: 'Draft',
+  },
+]
+
+export const SUBSETTINGS: TSubSettings[] = [
+  {
+    id: 1,
+    createdAt: '24/10/2024',
+    subscriber: 'Monthly',
+    price: '100',
+    length: '30',
+    status: 'active',
+  },
+  {
+    id: 2,
+    createdAt: '25/10/2024',
+    subscriber: 'Yearly',
+    price: '1000',
+    length: '365',
+    status: 'active',
+  },
+  {
+    id: 3,
+    createdAt: '26/10/2024',
+    subscriber: 'Weekly',
+    price: '25',
+    length: '7',
+    status: 'inactive',
+  },
+  {
+    id: 4,
+    createdAt: '27/10/2024',
+    subscriber: 'Monthly',
+    price: '100',
+    length: '30',
+    status: 'active',
+  },
+  {
+    id: 5,
+    createdAt: '28/10/2024',
+    subscriber: 'Yearly',
+    price: '1000',
+    length: '365',
+    status: 'inactive',
+  },
+  {
+    id: 6,
+    createdAt: '29/10/2024',
+    subscriber: 'Weekly',
+    price: '25',
+    length: '7',
+    status: 'active',
+  },
+  {
+    id: 7,
+    createdAt: '30/10/2024',
+    subscriber: 'Monthly',
+    price: '100',
+    length: '30',
+    status: 'inactive',
+  },
+  {
+    id: 8,
+    createdAt: '31/10/2024',
+    subscriber: 'Yearly',
+    price: '1000',
+    length: '365',
+    status: 'active',
+  },
+  {
+    id: 9,
+    createdAt: '01/11/2024',
+    subscriber: 'Weekly',
+    price: '25',
+    length: '7',
+    status: 'inactive',
+  },
+  {
+    id: 10,
+    createdAt: '02/11/2024',
+    subscriber: 'Monthly',
+    price: '100',
+    length: '30',
+    status: 'active',
+  },
 ]

app/pages/dashboard-subscriptions/index.tsx

@@ -1,13 +1,17 @@
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
+import { useState } from 'react'
 
+import { Button } from '~/components/ui/button'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
-import { CONTENTS } from './data'
+import { SUBSCRIPTIONS, SUBSETTINGS } from './data'
 
 export const SubscriptionsPage = () => {
+  const [SubscribtionOpen, setSubscribtionOpen] = useState(true)
+  // const [SubSettingOpen, setSubSettingOpen] = useState(false)
   DataTable.use(DT)
-  const columns = [
+  const colTableSubscription = [
     { title: 'No', data: 'id' },
     { title: 'Tanggal Subscribe', data: 'date' },
     { title: 'Nama User', data: 'name' },
@@ -16,21 +20,58 @@ export const SubscriptionsPage = () => {
     { title: 'Status', data: 'status' },
     { title: 'Action', data: 'id', render: () => 'Subscribed' },
   ]
+  const colTableSubSetting = [
+    { title: 'No', data: 'id' },
+    { title: 'Tanggal Pembuatan', data: 'createdAt' },
+    { title: 'Nama Subscription', data: 'subscriber' },
+    { title: 'Price', data: 'price' },
+    { title: 'Length', data: 'length' },
+    { title: 'Status', data: 'status', render: () => 'Active' },
+  ]
+
+  const switchViee = () => {
+    setSubscribtionOpen(!SubscribtionOpen)
+  }
 
   return (
     <div className="relative">
       <TitleDashboard title="Subscription" />
-      <DataTable
+      <div className="float-right">
-        className="cell-border"
+        <Button
-        data={CONTENTS}
+          className="mb-5 w-[160px] rounded-md"
-        columns={columns}
+          onClick={switchViee}
-        options={{
+        >
-          paging: true,
+          {SubscribtionOpen ? 'Subscriptions' : 'Save'}
-          searching: true,
+        </Button>
-          ordering: true,
+      </div>
-          info: true,
+
-        }}
+      {SubscribtionOpen && (
-      ></DataTable>
+        <DataTable
+          className="cell-border"
+          data={SUBSCRIPTIONS}
+          columns={colTableSubscription}
+          options={{
+            paging: true,
+            searching: true,
+            ordering: true,
+            info: true,
+          }}
+        ></DataTable>
+      )}
+
+      {!SubscribtionOpen && (
+        <DataTable
+          className="cell-border"
+          data={SUBSETTINGS}
+          columns={colTableSubSetting}
+          options={{
+            paging: true,
+            searching: true,
+            ordering: true,
+            info: true,
+          }}
+        ></DataTable>
+      )}
     </div>
   )
 }