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

app/app.css

@@ -18,3 +18,13 @@
 html,
 body {
 }
+
+table.dataTable thead > tr {
+  border-bottom: 2px solid #c2c2c2;
+}
+
+table.dataTable tbody > tr > td {
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid #ebebeb;
+}

app/components/icons/plus.tsx

@@ -0,0 +1,20 @@
+import type { JSX, SVGProps } from 'react'
+export const PlusIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M6 8H1a.965.965 0 01-.712-.288A.972.972 0 010 7c0-.283.095-.52.288-.712A.97.97 0 011 6h5V1c0-.283.096-.52.288-.712A.972.972 0 017 0c.283 0 .52.095.713.288A.96.96 0 018 1v5h5c.283 0 .521.096.713.288.192.192.288.43.287.712 0 .283-.097.52-.288.713A.957.957 0 0113 8H8v5a.968.968 0 01-.288.713A.964.964 0 017 14a.973.973 0 01-.712-.288A.965.965 0 016 13V8z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/ui/table.tsx

@@ -0,0 +1,22 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+
+export const TableComponent = () => {
+  DataTable.use(DT)
+  return (
+    <>
+      <h1>test</h1>
+      <DataTable
+        className="cell-border"
+        data={[]}
+        columns={[]}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+      ></DataTable>
+    </>
+  )
+}

app/pages/dashboard-advertisements/index.tsx

@@ -1,9 +1,81 @@
-import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { Field, Input, Label } from '@headlessui/react'
+import { useState } from 'react'
+
+import { PlusIcon } from '~/components/icons/plus'
+
+type BannerUploadProperties = {
+  onBannerChange?: (file: File | undefined) => void
+  onLinkChange?: (link: string) => void
+}
+
+export const AdvertisementsPage = ({
+  onBannerChange,
+  onLinkChange,
+}: BannerUploadProperties) => {
+  const [banner, setBanner] = useState<File | null>()
+  const [link, setLink] = useState<string>('')
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] || undefined
+    setBanner(file)
+    onBannerChange?.(file)
+  }
+
+  const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newLink = event.target.value
+    setLink(newLink)
+    onLinkChange?.(newLink)
+  }
 
-export const AdvertisementsPage = () => {
   return (
-    <div className="relative">
-      <TitleDashboard title="Advertisement" />
+    <div className="w-[400px] rounded-xl bg-gray-50 p-6">
+      {banner && (
+        <div className="h-[100px] w-[200px]">
+          <div className="mb-4">
+            <img
+              src={URL.createObjectURL(banner)}
+              alt="Banner Preview"
+              className="h-auto w-full rounded-lg"
+            />
+          </div>
+        </div>
+      )}
+      <Field className="mb-6">
+        <Label className="mb-2 block text-sm font-bold text-gray-700">
+          Banner Design
+        </Label>
+        <Label
+          htmlFor="banner-upload"
+          className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
+        >
+          <span className="text-gray-500">
+            {banner ? banner.name : 'Upload Banner'}
+          </span>
+          <PlusIcon className="h-4 w-4 text-gray-500" />
+        </Label>
+        <Input
+          id="banner-upload"
+          type="file"
+          accept="image/*"
+          // className="hidden"
+          onChange={handleFileChange}
+          aria-label="Upload Banner"
+        />
+      </Field>
+
+      <Field>
+        <Label className="mb-2 block text-sm font-bold text-gray-700">
+          Link Banner
+        </Label>
+        <Input
+          type="text"
+          placeholder="Link Banner"
+          className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
+          value={link}
+          onChange={handleLinkChange}
+          aria-label="Link Banner"
+        />
+      </Field>
     </div>
   )
 }

app/pages/dashboard-contents/data.ts

@@ -14,7 +14,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'John Doe',
     title: 'Introduction to TypeScript',
-    tags: 'typescript, programming',
+    tags: 'Normal',
     category: 'Education',
     status: 'Published',
   },
@@ -23,7 +23,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Jane Smith',
     title: 'Advanced React Patterns',
-    tags: 'react, javascript',
+    tags: 'Normal',
     category: 'Development',
     status: 'Draft',
   },
@@ -32,7 +32,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Alice Johnson',
     title: 'Understanding Redux',
-    tags: 'redux, state management',
+    tags: 'Normal',
     category: 'Development',
     status: 'Published',
   },
@@ -41,7 +41,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Bob Brown',
     title: 'CSS Grid Layout',
-    tags: 'css, design',
+    tags: 'Premium',
     category: 'Design',
     status: 'Published',
   },
@@ -50,7 +50,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Charlie Davis',
     title: 'Node.js Best Practices',
-    tags: 'nodejs, backend',
+    tags: 'Premium',
     category: 'Development',
     status: 'Published',
   },
@@ -59,7 +59,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Diana Evans',
     title: 'GraphQL for Beginners',
-    tags: 'graphql, api',
+    tags: 'Premium',
     category: 'Development',
     status: 'Draft',
   },
@@ -68,7 +68,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Evan Harris',
     title: 'Building RESTful APIs',
-    tags: 'rest, api',
+    tags: 'Premium',
     category: 'Development',
     status: 'Published',
   },
@@ -77,7 +77,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Fiona Green',
     title: 'Introduction to Docker',
-    tags: 'docker, devops',
+    tags: 'Normal',
     category: 'DevOps',
     status: 'Published',
   },
@@ -86,7 +86,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'George King',
     title: 'Microservices Architecture',
-    tags: 'microservices, architecture',
+    tags: 'Normal',
     category: 'Development',
     status: 'Draft',
   },
@@ -95,7 +95,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Hannah Lee',
     title: 'Kubernetes Essentials',
-    tags: 'kubernetes, devops',
+    tags: 'Normal',
     category: 'DevOps',
     status: 'Published',
   },

app/pages/dashboard-contents/index.tsx

@@ -13,13 +13,29 @@ export const ContentsPage = () => {
     { title: 'Nama Penulis', data: 'author' },
     { title: 'Judul', data: 'title' },
     { title: 'Kategori', data: 'category' },
-    { title: 'Tags', data: 'tags' },
-    { title: 'Action', data: 'id', render: () => 'Edit' },
+    {
+      title: 'Tags',
+      data: 'tags',
+      render: (value: string) => {
+        return value === 'Normal'
+          ? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
+          : `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
+      },
+    },
+    {
+      title: 'Action',
+      data: 'id',
+      render: () => {
+        return '<button class="bg-[#2E2F7C] text-white px-2 py-1 rounded-md">Lihat Detail</button>'
+      },
+    },
   ]
 
   return (
     <div className="relative">
       <TitleDashboard title="Konten" />
+      <div className="rounded-lg bg-white p-6 shadow-md">
+        <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
         <DataTable
           className="cell-border"
           data={CONTENTS}
@@ -29,8 +45,10 @@ export const ContentsPage = () => {
             searching: true,
             ordering: true,
             info: true,
+            // scrollY: '50vh',
           }}
         ></DataTable>
       </div>
+    </div>
   )
 }

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,29 +1,105 @@
+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'
 
-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' },
     { 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' },
+    { title: 'Tanggal Pembuatan', data: 'createdAt' },
+    { title: 'Nama Subscription', data: 'subscriber' },
+    { title: 'Price', data: 'price' },
+    { title: 'Length', data: 'length' },
+    {
+      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 = () => {
+    setSubscribtionOpen(!SubscribtionOpen)
+  }
 
   return (
     <div className="relative">
       <TitleDashboard title="Subscription" />
+      <Button
+        className="float-right mt-7 h-10 w-[160px] rounded-md"
+        onClick={switchViee}
+      >
+        {SubscribtionOpen ? 'Subscriptions' : 'Save'}
+      </Button>
+
+      {SubscribtionOpen && (
+        <>
+          <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+            <div className="w-[400px]">
+              <Field>
+                <Label className="mb-2 block text-sm font-medium">
+                  Cari User
+                </Label>
+                <div className="relative">
+                  <Input
+                    type="text"
+                    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={CONTENTS}
-        columns={columns}
+              // className="cell-border"
+              data={SUBSCRIPTIONS}
+              columns={colTableSubscription}
               options={{
                 paging: true,
                 searching: true,
@@ -32,5 +108,72 @@ export const SubscriptionsPage = () => {
               }}
             ></DataTable>
           </div>
+        </>
+      )}
+
+      {!SubscribtionOpen && (
+        <>
+          <div className="mb-8 flex items-end gap-5 rounded-lg bg-gray-50 text-[#363636]">
+            <div className="w-[300px]">
+              <Field>
+                <Label className="mb-2 block text-sm font-medium">
+                  Subscription Name
+                </Label>
+                <div className="relative">
+                  <Input
+                    type="text"
+                    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>
   )
 }