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

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
-        className="cell-border"
-        data={CONTENTS}
-        columns={columns}
-        options={{
-          paging: true,
-          searching: true,
-          ordering: true,
-          info: true,
-        }}
-      ></DataTable>
+      <div className="float-right">
+        <Button
+          className="mb-5 w-[160px] rounded-md"
+          onClick={switchViee}
+        >
+          {SubscribtionOpen ? 'Subscriptions' : 'Save'}
+        </Button>
+      </div>
+
+      {SubscribtionOpen && (
+        <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>
   )
 }