diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx index 3fb8d2f..99afcb2 100644 --- a/app/components/ui/table.tsx +++ b/app/components/ui/table.tsx @@ -1,14 +1,10 @@ -import DT, { type Config, type ConfigColumns } from 'datatables.net-dt' -import DataTable, { type DataTableSlots } from 'datatables.net-react' +import DT from 'datatables.net-dt' +import DataTable, { type DataTableProps } from 'datatables.net-react' import React from 'react' type UiTableProperties = { - data: any[] // eslint-disable-line @typescript-eslint/no-explicit-any - columns: ConfigColumns[] - slots?: DataTableSlots - options?: Config title: string -} +} & DataTableProps const renderPaginationIcon = (icon: string) => { return `
${icon}
` diff --git a/app/layouts/admin/menu.ts b/app/layouts/admin/menu.ts index b4c9315..e898d93 100644 --- a/app/layouts/admin/menu.ts +++ b/app/layouts/admin/menu.ts @@ -59,6 +59,11 @@ export const MENU: TMenu[] = [ url: '/lg-admin/tags', icon: TagIcon, }, + { + title: 'Subscribe Plan', + url: '/lg-admin/subscribe-plan', + icon: TagIcon, + }, ], }, ] diff --git a/app/pages/dashboard-plan-subscribe/index.tsx b/app/pages/dashboard-plan-subscribe/index.tsx new file mode 100644 index 0000000..8a9d5a0 --- /dev/null +++ b/app/pages/dashboard-plan-subscribe/index.tsx @@ -0,0 +1,86 @@ +import DT from 'datatables.net-dt' +import DataTable from 'datatables.net-react' +import { Link, useRouteLoaderData } from 'react-router' + +import { Button } from '~/components/ui/button' +import { UiTable } from '~/components/ui/table' +import { TitleDashboard } from '~/components/ui/title-dashboard' +import type { loader } from '~/routes/_admin.lg-admin._dashboard' + +export const SubscribePlanPage = () => { + const loaderData = useRouteLoaderData( + 'routes/_admin.lg-admin._dashboard', + ) + + DataTable.use(DT) + + const { subscriptionsData: dataTable } = loaderData || {} + + const dataColumns = [ + { + title: 'No', + render: ( + data: unknown, + type: unknown, + row: unknown, + meta: { row: number }, + ) => { + return meta.row + 1 + }, + }, + { + title: 'Nama', + data: 'name', + }, + { + title: 'Kode', + data: 'code', + }, + { + title: 'Action', + data: 'id', + }, + ] + + const dataSlot = { + 3: (value: string) => ( + + ), + } + return ( +
+ +
+
{/* TODO: Filter */}
+ +
+ + +
+ ) +} diff --git a/app/pages/dashboard-subscriptions/data.ts b/app/pages/dashboard-subscriptions/data.ts index de4f1f2..93de337 100644 --- a/app/pages/dashboard-subscriptions/data.ts +++ b/app/pages/dashboard-subscriptions/data.ts @@ -8,15 +8,6 @@ type TSubscriptions = { status: string } -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, @@ -199,86 +190,3 @@ export const SUBSCRIPTIONS: TSubscriptions[] = [ 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', - }, -] diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx index c1163b5..7afdbfc 100644 --- a/app/pages/dashboard-subscriptions/index.tsx +++ b/app/pages/dashboard-subscriptions/index.tsx @@ -1,18 +1,15 @@ 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 { UiTable } from '~/components/ui/table' import { TitleDashboard } from '~/components/ui/title-dashboard' -import { SUBSCRIPTIONS, SUBSETTINGS } from './data' +import { SUBSCRIPTIONS } from './data' export const SubscriptionsPage = () => { - const [SubscribtionOpen, setSubscribtionOpen] = useState(true) - // const [SubSettingOpen, setSubSettingOpen] = useState(false) DataTable.use(DT) const colTableSubscription = [ { title: 'No', data: 'id' }, @@ -28,158 +25,64 @@ export const SubscriptionsPage = () => { }, }, ] - 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' - ? `${value}` - : `${value}` - }, - }, - ] - - const switchView = () => { - setSubscribtionOpen(!SubscribtionOpen) - } return (
- {SubscribtionOpen && ( - <> -
-
-
- - -
- -
- -
-
- +
+
+
+ + +
+ +
+ +
- -
- - - - -
-
- - +
- - - )} - - {!SubscribtionOpen && ( - <> -
-
-
- - -
- -
- -
-
- - -
- -
- -
- -
- - - - -
-
- +
+ + + +
+
- - - )} + +
+ +
) } diff --git a/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx b/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx new file mode 100644 index 0000000..eb574ba --- /dev/null +++ b/app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx @@ -0,0 +1,4 @@ +import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe' + +const DashboardSubscriptionsSettingsLayout = () => +export default DashboardSubscriptionsSettingsLayout diff --git a/app/routes/_admin.lg-admin._dashboard.subscriptions.tsx b/app/routes/_admin.lg-admin._dashboard.subscriptions._index.tsx similarity index 100% rename from app/routes/_admin.lg-admin._dashboard.subscriptions.tsx rename to app/routes/_admin.lg-admin._dashboard.subscriptions._index.tsx diff --git a/app/routes/_admin.lg-admin._dashboard.tsx b/app/routes/_admin.lg-admin._dashboard.tsx index 61edd57..a41f562 100644 --- a/app/routes/_admin.lg-admin._dashboard.tsx +++ b/app/routes/_admin.lg-admin._dashboard.tsx @@ -1,6 +1,7 @@ import { Outlet } from 'react-router' import { getCategories } from '~/apis/common/get-categories' +import { getSubscriptions } from '~/apis/common/get-subscriptions' import { getTags } from '~/apis/common/get-tags' import { AdminProvider } from '~/contexts/admin' import { AdminDashboardLayout } from '~/layouts/admin/dashboard' @@ -10,10 +11,12 @@ import type { Route } from './+types/_admin.lg-admin._dashboard' export const loader = async ({}: Route.LoaderArgs) => { const { data: categoriesData } = await getCategories() const { data: tagsData } = await getTags() + const { data: subscriptionsData } = await getSubscriptions() return { categoriesData, tagsData, + subscriptionsData, } }