app/app.css

@@ -18,13 +18,3 @@
 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

@@ -1,20 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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,81 +1,9 @@
-import { Field, Input, Label } from '@headlessui/react'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
-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="w-[400px] rounded-xl bg-gray-50 p-6">
+    <div className="relative">
-      {banner && (
+      <TitleDashboard title="Advertisement" />
-        <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: 'Normal',
+    tags: 'typescript, programming',
     category: 'Education',
     status: 'Published',
   },
@@ -23,7 +23,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Jane Smith',
     title: 'Advanced React Patterns',
-    tags: 'Normal',
+    tags: 'react, javascript',
     category: 'Development',
     status: 'Draft',
   },
@@ -32,7 +32,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Alice Johnson',
     title: 'Understanding Redux',
-    tags: 'Normal',
+    tags: 'redux, state management',
     category: 'Development',
     status: 'Published',
   },
@@ -41,7 +41,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Bob Brown',
     title: 'CSS Grid Layout',
-    tags: 'Premium',
+    tags: 'css, design',
     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: 'Premium',
+    tags: 'nodejs, backend',
     category: 'Development',
     status: 'Published',
   },
@@ -59,7 +59,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Diana Evans',
     title: 'GraphQL for Beginners',
-    tags: 'Premium',
+    tags: 'graphql, api',
     category: 'Development',
     status: 'Draft',
   },
@@ -68,7 +68,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Evan Harris',
     title: 'Building RESTful APIs',
-    tags: 'Premium',
+    tags: 'rest, api',
     category: 'Development',
     status: 'Published',
   },
@@ -77,7 +77,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Fiona Green',
     title: 'Introduction to Docker',
-    tags: 'Normal',
+    tags: 'docker, devops',
     category: 'DevOps',
     status: 'Published',
   },
@@ -86,7 +86,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'George King',
     title: 'Microservices Architecture',
-    tags: 'Normal',
+    tags: 'microservices, architecture',
     category: 'Development',
     status: 'Draft',
   },
@@ -95,7 +95,7 @@ export const CONTENTS: TContens[] = [
     createdAt: '24/10/2024',
     author: 'Hannah Lee',
     title: 'Kubernetes Essentials',
-    tags: 'Normal',
+    tags: 'kubernetes, devops',
     category: 'DevOps',
     status: 'Published',
   },

app/pages/dashboard-contents/index.tsx

@@ -13,42 +13,24 @@ export const ContentsPage = () => {
     { title: 'Nama Penulis', data: 'author' },
     { title: 'Judul', data: 'title' },
     { title: 'Kategori', data: 'category' },
-    {
+    { title: 'Tags', data: 'tags' },
-      title: 'Tags',
+    { title: 'Action', data: 'id', render: () => 'Edit' },
-      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">
+      <DataTable
-        <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
+        className="cell-border"
-        <DataTable
+        data={CONTENTS}
-          className="cell-border"
+        columns={columns}
-          data={CONTENTS}
+        options={{
-          columns={columns}
+          paging: true,
-          options={{
+          searching: true,
-            paging: true,
+          ordering: true,
-            searching: true,
+          info: true,
-            ordering: true,
+        }}
-            info: true,
+      ></DataTable>
-            // scrollY: '50vh',
-          }}
-        ></DataTable>
-      </div>
     </div>
   )
 }

app/pages/dashboard-subscriptions/data.ts

@@ -8,16 +8,7 @@ type TSubscriptions = {
   status: string
 }
 
-type TSubSettings = {
+export const CONTENTS: TSubscriptions[] = [
-  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',
@@ -27,258 +18,4 @@ export const SUBSCRIPTIONS: 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,179 +1,36 @@
-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 { SUBSCRIPTIONS, SUBSETTINGS } from './data'
+import { CONTENTS } from './data'
 
 export const SubscriptionsPage = () => {
-  const [SubscribtionOpen, setSubscribtionOpen] = useState(true)
-  // const [SubSettingOpen, setSubSettingOpen] = useState(false)
   DataTable.use(DT)
-  const colTableSubscription = [
+  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: 'Status',
+    { title: 'Action', data: 'id', render: () => 'Subscribed' },
-      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
+      <DataTable
-        className="float-right mt-7 h-10 w-[160px] rounded-md"
+        className="cell-border"
-        onClick={switchViee}
+        data={CONTENTS}
-      >
+        columns={columns}
-        {SubscribtionOpen ? 'Subscriptions' : 'Save'}
+        options={{
-      </Button>
+          paging: true,
-
+          searching: true,
-      {SubscribtionOpen && (
+          ordering: true,
-        <>
+          info: true,
-          <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+        }}
-            <div className="w-[400px]">
+      ></DataTable>
-              <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={SUBSCRIPTIONS}
-              columns={colTableSubscription}
-              options={{
-                paging: true,
-                searching: true,
-                ordering: true,
-                info: true,
-              }}
-            ></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>
   )
 }