legalgo-FE-reactrouter/app/pages/dashboard-subscriptions/index.tsx

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'

export const SubscriptionsPage = () => {
  const [SubscribtionOpen, setSubscribtionOpen] = useState(true)
  // const [SubSettingOpen, setSubSettingOpen] = useState(false)
  DataTable.use(DT)
  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',
      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={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>
  )
}