feat: enhance subscriptions page with status rendering and search/filter functionality

app/pages/dashboard-subscriptions/index.tsx

@@ -1,7 +1,9 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { useState } from 'react'
 
+import { SearchIcon } from '~/components/icons/search'
 import { Button } from '~/components/ui/button'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 
@@ -17,8 +19,13 @@ export const SubscriptionsPage = () => {
     { title: 'Nama User', data: 'name' },
     { title: 'Email', data: 'email' },
     { title: 'Kategori', data: 'category' },
-    { title: 'Status', data: 'status' },
+    {
-    { title: 'Action', data: 'id', render: () => 'Subscribed' },
+      title: 'Status',
+      data: 'status',
+      render: () => {
+        return `<span class="bg-[#DFE5FF] text-[#4C5CA0] px-2 py-1 rounded-md">Subscribed</span>`
+      },
+    },
   ]
   const colTableSubSetting = [
     { title: 'No', data: 'id' },
@@ -26,7 +33,15 @@ export const SubscriptionsPage = () => {
     { title: 'Nama Subscription', data: 'subscriber' },
     { title: 'Price', data: 'price' },
     { title: 'Length', data: 'length' },
-    { title: 'Status', data: 'status', render: () => 'Active' },
+    {
+      title: 'Status',
+      data: 'status',
+      render: (value: string) => {
+        return value == 'active'
+          ? `<span class="bg-[#DFE5FF] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
+          : `<span class="bg-[#FFD1D1] text-[#FF4E4E] px-2 py-1 rounded-md">${value}</span>`
+      },
+    },
   ]
 
   const switchViee = () => {
@@ -36,41 +51,128 @@ export const SubscriptionsPage = () => {
   return (
     <div className="relative">
       <TitleDashboard title="Subscription" />
-      <div className="float-right">
+      <Button
-        <Button
+        className="float-right mt-7 h-10 w-[160px] rounded-md"
-          className="mb-5 w-[160px] rounded-md"
+        onClick={switchViee}
-          onClick={switchViee}
+      >
-        >
+        {SubscribtionOpen ? 'Subscriptions' : 'Save'}
-          {SubscribtionOpen ? 'Subscriptions' : 'Save'}
+      </Button>
-        </Button>
-      </div>
 
       {SubscribtionOpen && (
-        <DataTable
+        <>
-          // className="cell-border"
+          <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-          data={SUBSCRIPTIONS}
+            <div className="w-[400px]">
-          columns={colTableSubscription}
+              <Field>
-          options={{
+                <Label className="mb-2 block text-sm font-medium">
-            paging: true,
+                  Cari User
-            searching: true,
+                </Label>
-            ordering: true,
+                <div className="relative">
-            info: true,
+                  <Input
-          }}
+                    type="text"
-        ></DataTable>
+                    placeholder="Cari Nama"
+                    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">
+                    <SearchIcon className="h-5 w-5" />
+                  </div>
+                </div>
+              </Field>
+            </div>
+
+            <div className="w-[235px]">
+              <Field>
+                <Label className="mb-2 block text-sm font-medium">Status</Label>
+                <Select 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>
+
+          <div className="rounded-lg bg-white p-6 shadow-md">
+            <h3 className="py-1 font-semibold text-[#4C5CA0]">
+              Daftar Subscription
+            </h3>
+
+            <DataTable
+              // className="cell-border"
+              data={SUBSCRIPTIONS}
+              columns={colTableSubscription}
+              options={{
+                paging: true,
+                searching: true,
+                ordering: true,
+                info: true,
+              }}
+            ></DataTable>
+          </div>
+        </>
       )}
 
       {!SubscribtionOpen && (
-        <DataTable
+        <>
-          className="cell-border"
+          <div className="mb-8 flex items-end gap-5 rounded-lg bg-gray-50 text-[#363636]">
-          data={SUBSETTINGS}
+            <div className="w-[300px]">
-          columns={colTableSubSetting}
+              <Field>
-          options={{
+                <Label className="mb-2 block text-sm font-medium">
-            paging: true,
+                  Subscription Name
-            searching: true,
+                </Label>
-            ordering: true,
+                <div className="relative">
-            info: true,
+                  <Input
-          }}
+                    type="text"
-        ></DataTable>
+                    placeholder="Subscription Name"
+                    className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                  />
+                </div>
+              </Field>
+            </div>
+            <div className="w-[300px]">
+              <Field>
+                <Label className="mb-2 block text-sm font-medium">
+                  Subscription Price
+                </Label>
+                <div className="relative">
+                  <Input
+                    type="text"
+                    placeholder="Subscription Price"
+                    className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                  />
+                </div>
+              </Field>
+            </div>
+
+            <div className="w-[300px]">
+              <Field>
+                <Label className="mb-2 block text-sm font-medium">
+                  Subscription Length (Days)
+                </Label>
+                <Input
+                  type="text"
+                  placeholder="Subscription Length (Days)"
+                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                ></Input>
+              </Field>
+            </div>
+          </div>
+          <div className="rounded-lg bg-white p-6 shadow-md">
+            <h3 className="py-1 font-semibold text-[#4C5CA0]">
+              Daftar Subscription
+            </h3>
+            <DataTable
+              className="cell-border"
+              data={SUBSETTINGS}
+              columns={colTableSubSetting}
+              options={{
+                paging: true,
+                searching: true,
+                ordering: true,
+                info: true,
+              }}
+            ></DataTable>
+          </div>
+        </>
       )}
     </div>
   )