feat: implement UiTable component and refactor dashboard pages to use it

app/apis/admin/get-staff.ts

@@ -6,7 +6,8 @@ const staffSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
-    username: z.string(),
+    name: z.string(),
+    profile_picture: z.string(),
   }),
 })
 

app/apis/admin/login-staff.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
-import { type TLoginSchema } from '~/layouts/news/form-login'
 import { HttpServer } from '~/libs/http-server'
+import type { TLoginSchema } from '~/pages/admin-login'
 
 const loginResponseSchema = z.object({
   data: z.object({

app/components/ui/card-report.tsx

@@ -5,6 +5,7 @@ import { formatNumberWithPeriods } from '~/utils/formatter'
 type CardReportProperty = {
   title: string
   amount: number
+  currency?: string
   icon: (
     properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
   ) => JSX.Element
@@ -13,7 +14,7 @@ type CardReportProperty = {
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount, icon: Icon, counter } = properties
+  const { title, amount, icon: Icon, counter, currency } = properties
   return (
     <div className="rounded bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
@@ -22,15 +23,17 @@ export const CardReport = (properties: CardReportProperty) => {
           height={48}
           width={48}
         />
-        <div className="ml-10">
+        <div className="ml-7">
           <h2 className="text-lg font-semibold">{title}</h2>
           <p className="text-2xl font-bold text-[#2E2F7C]">
-            Rp. {formatNumberWithPeriods(amount)}
+            {currency
+              ? `${currency} ${formatNumberWithPeriods(amount)}`
+              : formatNumberWithPeriods(amount)}
           </p>
         </div>
       </div>
       {counter?.length && (
-        <div className="flex items-center">
+        <div className="flex items-center pt-2">
           Pribadi: {counter[0]} | Perusahaan: {counter[1]}
         </div>
       )}

app/components/ui/chart.tsx

@@ -215,7 +215,7 @@ export const ChartSubscription = () => {
     <div className="rounded-xl bg-white p-6 shadow-lg">
       <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
       <div className="flex items-center justify-between">
-        <div style={{ height: '200px', width: '100%' }}>
+        <div style={{ height: 'auto', width: '100%' }}>
           <Doughnut
             data={data}
             options={options}

app/components/ui/table.tsx

@@ -0,0 +1,42 @@
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+import React from 'react'
+
+export type UiTableProperties = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any[]
+  columns: ConfigColumns[]
+  slots?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  options?: Config
+  title: string
+}
+
+export const UiTable: React.FC<UiTableProperties> = ({
+  data,
+  columns,
+  slots,
+  options,
+  title,
+}) => {
+  DataTable.use(DT)
+  return (
+    <div className="rounded-lg bg-white p-5 shadow-md">
+      <h3 className="py-1 font-semibold text-[#4C5CA0]">{title}</h3>
+      <div className="rounded-lg">
+        <DataTable
+          className="cell-border"
+          data={data}
+          columns={columns}
+          slots={slots}
+          options={{
+            paging: true,
+            searching: true,
+            ordering: true,
+            info: true,
+            ...options,
+          }}
+        />
+      </div>
+    </div>
+  )
+}

app/configs/cookies.ts

@@ -2,6 +2,6 @@ export const USER_COOKIES = {
   token: '__lg-usr-tkn',
 }
 
-export const ADMIN_COOKIES = {
+export const STAFF_COOKIES = {
-  token: '__lg-adm-tkn',
+  token: '__lg-stf-tkn',
 }

app/configs/meta.ts

@@ -2,8 +2,7 @@ import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
 
 export const APP = {
   title: 'LegalGo',
-  description:
+  description: 'Legalgo Platform Berita Dunia dan Indonesia.',
-    'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
   logo: '/images/logo.png',
 }
 
@@ -18,13 +17,9 @@ export const META_TITLE_CONFIG: TMetaTitleConfig = [
     title: 'Home',
   },
   {
-    path: '/lg-admin/auth/login',
+    path: '/lg-admin/login',
     title: 'Login',
   },
-  {
-    path: '/lg-admin/auth/register',
-    title: 'Register',
-  },
   ...ADMIN_MENU.flatMap((menu) =>
     menu.items.map((item) => ({ path: item.url, title: item.title })),
   ),

app/configs/pages.ts

@@ -0,0 +1,6 @@
+export const AUTH_PAGES = [
+  '/lg-admin/login',
+  '/lg-admin/forgot-password',
+  '/lg-admin/reset-password',
+  '/lg-admin/register',
+]

app/data/contents.ts

@@ -1,8 +1,11 @@
 import type { TNews } from '~/types/news'
 type TBanner = {
+  id: number
   urlImage: string
   alt: string
   link: string
+  status: 'active' | 'draft' | 'inactive'
+  createdAt?: string
 }
 
 export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'
@@ -155,18 +158,43 @@ export const KAJIAN: TNews = {
 
 export const BANNER: TBanner[] = [
   {
+    id: 1,
     urlImage: '/images/banner.png',
     alt: 'banner',
     link: '/category/spotlight',
+    status: 'active',
+    createdAt: '2021-08-01',
   },
   {
+    id: 2,
     urlImage: 'https://placehold.co/1000x65.png',
     alt: 'banner',
+    status: 'draft',
     link: '/#',
+    createdAt: '2021-08-01',
   },
   {
+    id: 3,
+    urlImage: 'https://placehold.co/1000x65.png',
+    alt: 'banner',
+    status: 'draft',
+    link: '/#',
+    createdAt: '2021-08-01',
+  },
+  {
+    id: 4,
     urlImage: '/images/banner.png',
     alt: 'banner',
     link: '/#',
+    status: 'active',
+    createdAt: '2021-08-01',
+  },
+  {
+    id: 5,
+    urlImage: '/images/banner.png',
+    alt: 'banner',
+    link: '/#',
+    status: 'inactive',
+    createdAt: '2021-08-01',
   },
 ]

app/layouts/admin/navbar.tsx

@@ -1,12 +1,15 @@
-import { Link } from 'react-router'
+import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { NotificationIcon } from '~/components/icons/notification'
 import { APP } from '~/configs/meta'
-import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
 
 export const Navbar = () => {
-  const { adminProfile } = useAdminContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const staffData = loaderData?.staffData
+  const fetcher = useFetcher()
 
   return (
     <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
@@ -21,13 +24,37 @@ export const Navbar = () => {
         />
       </Link>
       <div className="flex items-center gap-x-8">
-        <div className="flex w-3xs items-center justify-between">
+        <Popover className="relative">
-          <div className="flex items-center">
+          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
-            <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
+            <div className="flex items-center">
-            <span className="text-xs">{adminProfile.name}</span>
+              <img
-          </div>
+                src={staffData?.profile_picture}
-          <ChevronIcon className="opacity-50" />
+                alt={staffData?.name}
-        </div>
+                className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+              />
+              <span className="text-xs">{staffData?.name}</span>
+            </div>
+            <ChevronIcon className="opacity-50" />
+          </PopoverButton>
+          <PopoverPanel
+            anchor={{ to: 'bottom', gap: '8px' }}
+            transition
+            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+          >
+            <fetcher.Form
+              method="POST"
+              action="/actions/admin/logout"
+              className="grid"
+            >
+              <Button
+                type="submit"
+                className="cursor-pointer rounded p-1 hover:bg-[#707FDD]/10 hover:text-[#5363AB]"
+              >
+                Logout
+              </Button>
+            </fetcher.Form>
+          </PopoverPanel>
+        </Popover>
         <NotificationIcon
           className="text-[#B0C3CC]"
           showBadge={true}

app/layouts/admin/sidebar.tsx

@@ -1,4 +1,4 @@
-import { NavLink, useLocation } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { MENU } from './menu'
@@ -15,7 +15,7 @@ export const Sidebar = () => {
         >
           <div className="px-5 pb-4 text-[#4C5CA0]/50 uppercase">{group}</div>
           {items.map(({ title, url, icon: Icon }) => (
-            <NavLink
+            <Link
               to={url}
               key={`${group}-${title}`}
               className={twMerge(
@@ -37,7 +37,7 @@ export const Sidebar = () => {
               >
                 {title}
               </span>
-            </NavLink>
+            </Link>
           ))}
         </div>
       ))}

app/libs/cookie.server.ts

@@ -1,6 +1,6 @@
 import { createCookie } from 'react-router'
 
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { STAFF_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
 export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
   httpOnly: false,
@@ -10,10 +10,10 @@ export const userTokenCookieConfig = createCookie(USER_COOKIES.token, {
   path: '/',
 })
 
-export const adminTokenCookieConfig = createCookie(ADMIN_COOKIES.token, {
+export const staffTokenCookieConfig = createCookie(STAFF_COOKIES.token, {
   httpOnly: false,
   sameSite: 'lax',
   secure: process.env.NODE_ENV === 'production',
   secrets: [process.env.VITE_SALT_KEY || 'default-secret'],
-  path: '/lg-admin',
+  path: '/',
 })

app/libs/cookies.ts

@@ -1,16 +1,16 @@
-import { adminTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
+import { staffTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
 
 export const handleCookie = async (request: Request) => {
   const headers = request.headers
   const userToken = (await userTokenCookieConfig.parse(
     headers.get('Cookie'),
   )) as string
-  const adminToken = (await adminTokenCookieConfig.parse(
+  const staffToken = (await staffTokenCookieConfig.parse(
     headers.get('Cookie'),
   )) as string
 
   return {
     userToken,
-    adminToken,
+    staffToken,
   }
 }

app/libs/logout-header.server.ts

@@ -1,4 +1,4 @@
-import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/cookies'
+import { STAFF_COOKIES, USER_COOKIES } from '~/configs/cookies'
 
 export const setUserLogoutHeaders = () => {
   const responseHeaders = new Headers()
@@ -10,11 +10,11 @@ export const setUserLogoutHeaders = () => {
   return responseHeaders
 }
 
-export const setAdminLogoutHeaders = () => {
+export const setStaffLogoutHeaders = () => {
   const responseHeaders = new Headers()
   responseHeaders.append(
     'Set-Cookie',
-    `${ADMIN_COOKIES.token}=; Path=/lg-admin; HttpOnly; SameSite=Strict; Max-Age=0`,
+    `${STAFF_COOKIES.token}=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0`,
   )
 
   return responseHeaders

app/pages/admin-login/index.tsx

@@ -0,0 +1,117 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { Link, useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { APP } from '~/configs/meta'
+
+export const loginSchema = z.object({
+  email: z.string().email('Email tidak valid'),
+  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+})
+
+export type TLoginSchema = z.infer<typeof loginSchema>
+
+export const AdminLoginPage = () => {
+  const fetcher = useFetcher()
+  const formMethods = useRemixForm<TLoginSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(loginSchema),
+  })
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  return (
+    <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
+      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
+        <div className="flex flex-col items-center">
+          <Link to="/lg-admin">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+        <p className="text-center">
+          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
+        </p>
+        <div>
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/admin/login"
+            >
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              {error && (
+                <div className="text-sm text-red-500 capitalize">{error}</div>
+              )}
+
+              {/* Lupa Kata Sandi */}
+              <div className="mb-4 flex justify-between">
+                <span className="text-gray-600">Lupa Kata Sandi?</span>
+                <Link
+                  to="/lg-admin/auth/reset-password"
+                  className="font-semibold text-[#2E2F7C]"
+                >
+                  Reset Kata Sandi
+                </Link>
+              </div>
+
+              <Button
+                disabled={disabled}
+                type="submit"
+                className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              >
+                Masuk
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+        </div>
+      </div>
+      {/* Link Daftar */}
+      <div className="mt-4 text-center text-sm">
+        Belum punya akun?{' '}
+        <Button
+          onClick={() => {}}
+          className="font-semibold text-[#2E2F7C]"
+          variant="link"
+          size="fit"
+        >
+          Daftar Disini
+        </Button>
+      </div>
+    </div>
+  )
+}

app/pages/contents-create/index.tsx

@@ -7,7 +7,7 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 export const CreateContentsPage = () => {
   return (
     <div className="relative">
-      <TitleDashboard title="Konten" />
+      <TitleDashboard title="Buat Artikel" />
       <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
         <div className="w-[400px]">
           <Field>

app/pages/contents-update/index.tsx

@@ -1,3 +1,45 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
+
+import { SearchIcon } from '~/components/icons/search'
+import DefaultTextEditor from '~/components/ui/text-editor'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
 export const UpdateContentsPage = () => {
-  return <div>detail</div>
+  return (
+    <div className="relative">
+      <TitleDashboard title="Update Artikel" />
+      <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">Pilih Tags</Label>
+            <div className="relative">
+              <Input
+                type="text"
+                placeholder="Cari Tags"
+                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>
+
+      <section>
+        <DefaultTextEditor />
+      </section>
+    </div>
+  )
 }

app/pages/dashboard-advertisements/index.tsx

@@ -1,12 +1,17 @@
 import { Field, Input, Label } from '@headlessui/react'
 import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import { PlusIcon } from '~/components/icons/plus'
+import { UiTable } from '~/components/ui/table'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { BANNER } from '~/data/contents'
 
 type BannerUploadProperties = {
   onBannerChange?: (file: File | undefined) => void
   onLinkChange?: (link: string) => void
 }
+type TStatusColors = 'draft' | 'active' | 'inactive'
 
 export const AdvertisementsPage = ({
   onBannerChange,
@@ -27,55 +32,106 @@ export const AdvertisementsPage = ({
     onLinkChange?.(newLink)
   }
 
-  return (
+  const dataBanner = BANNER
-    <div className="w-[400px] rounded-xl bg-gray-50 p-6">
+  const dataColumns = [
-      {banner && (
+    { title: 'No', data: 'id' },
-        <div className="h-[100px] w-[200px]">
+    { title: 'Banner', data: 'urlImage' },
-          <div className="mb-4">
+    { title: 'Link', data: 'link' },
-            <img
+    { title: 'Tgl Create', data: 'createdAt' },
-              src={URL.createObjectURL(banner)}
+    { title: 'Status', data: 'status' },
-              alt="Banner Preview"
+  ]
-              className="h-auto w-full rounded-lg"
+  const dataSlot = {
-            />
+    1: (value: string) => {
-          </div>
+      return (
+        <div>
+          <img
+            src={value}
+            alt={`banner - ${value}`}
+            className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
+          />
         </div>
-      )}
+      )
-      <Field className="mb-6">
+    },
-        <Label className="mb-2 block text-sm font-bold text-gray-700">
+    4: (value: string) => {
-          Banner Design
+      const statusColors = {
-        </Label>
+        draft: 'bg-gray-300',
-        <Label
+        active: 'bg-[#04D182]',
-          htmlFor="banner-upload"
+        inactive: 'bg-[#F96D19]',
-          className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
+      }
+      const status = value as TStatusColors
+      return (
+        <span
+          className={twMerge(
+            'rounded-md px-2 py-1 text-sm',
+            status ? statusColors[status] : '',
+          )}
         >
-          <span className="text-gray-500">
+          {status}
-            {banner ? banner.name : 'Upload Banner'}
+        </span>
-          </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>
+  return (
-        <Label className="mb-2 block text-sm font-bold text-gray-700">
+    <div className="relative">
-          Link Banner
+      <TitleDashboard title="Advertisement" />
-        </Label>
+      <div className="flex gap-5">
-        <Input
+        <div className="w-[400px] rounded-xl bg-gray-50 py-6">
-          type="text"
+          <Field className="mb-6">
-          placeholder="Link Banner"
+            <Label className="mb-2 block text-sm font-bold text-gray-700">
-          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"
+              Banner Design
-          value={link}
+            </Label>
-          onChange={handleLinkChange}
+            <Label
-          aria-label="Link Banner"
+              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]"
-      </Field>
+            >
+              <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>
+        {banner && (
+          <div className="h-[100px] w-[200px] shadow-2xl">
+            <div className="mb-4">
+              <img
+                src={URL.createObjectURL(banner)}
+                alt="Banner Preview"
+                className="h-max-[350px] rasio-15-1 w-full rounded-lg"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <UiTable
+        data={dataBanner}
+        columns={dataColumns}
+        slots={dataSlot}
+        title="Daftar Banner"
+      />
     </div>
   )
 }

app/pages/dashboard-contents/index.tsx

@@ -4,13 +4,15 @@ import DataTable from 'datatables.net-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 { CONTENTS } from './data'
 
 export const ContentsPage = () => {
   DataTable.use(DT)
-  const columns = [
+  const dataTable = CONTENTS
+  const dataColumns = [
     { title: 'No', data: 'id' },
     { title: 'Tanggal Kontent', data: 'createdAt' },
     { title: 'Nama Penulis', data: 'author' },
@@ -30,6 +32,27 @@ export const ContentsPage = () => {
       data: 'id',
     },
   ]
+  const dataSlot = {
+    6: (value: string | number) => {
+      return (
+        <Button
+          as="a"
+          href={`/lg-admin/contents/update/${value}`}
+          className="text-md rounded-md"
+          size="sm"
+        >
+          Lihat Detail
+        </Button>
+      )
+    },
+  }
+  const dataOptions = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+    // scrollY: '50vh',
+  }
 
   return (
     <div className="relative">
@@ -62,33 +85,14 @@ export const ContentsPage = () => {
           </Field>
         </div>
       </div>
-      <div className="rounded-lg bg-white p-6 shadow-md">
+
-        <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
+      <UiTable
-        <DataTable
+        data={dataTable}
-          className="cell-border"
+        columns={dataColumns}
-          data={CONTENTS}
+        slots={dataSlot}
-          columns={columns}
+        options={dataOptions}
-          slots={{
+        title="Daftar Konten"
-            6: (value: string | number) => {
+      />
-              return (
-                <Button
-                  as="a"
-                  href={`${value}`}
-                >
-                  Lihat Detail
-                </Button>
-              )
-            },
-          }}
-          options={{
-            paging: true,
-            searching: true,
-            ordering: true,
-            info: true,
-            // scrollY: '50vh',
-          }}
-        ></DataTable>
-      </div>
     </div>
   )
 }

app/pages/dashboard-subscriptions/index.tsx

@@ -5,6 +5,7 @@ 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'
@@ -91,23 +92,17 @@ export const SubscriptionsPage = () => {
             </div>
           </div>
 
-          <div className="rounded-lg bg-white p-6 shadow-md">
+          <UiTable
-            <h3 className="py-1 font-semibold text-[#4C5CA0]">
+            data={SUBSCRIPTIONS}
-              Daftar Subscription
+            columns={colTableSubscription}
-            </h3>
+            options={{
-
+              paging: true,
-            <DataTable
+              searching: true,
-              // className="cell-border"
+              ordering: true,
-              data={SUBSCRIPTIONS}
+              info: true,
-              columns={colTableSubscription}
+            }}
-              options={{
+            title="Daftar Subscription"
-                paging: true,
+          />
-                searching: true,
-                ordering: true,
-                info: true,
-              }}
-            ></DataTable>
-          </div>
         </>
       )}
 
@@ -156,22 +151,18 @@ export const SubscriptionsPage = () => {
               </Field>
             </div>
           </div>
-          <div className="rounded-lg bg-white p-6 shadow-md">
+
-            <h3 className="py-1 font-semibold text-[#4C5CA0]">
+          <UiTable
-              Daftar Subscription
+            data={SUBSETTINGS}
-            </h3>
+            columns={colTableSubSetting}
-            <DataTable
+            options={{
-              className="cell-border"
+              paging: true,
-              data={SUBSETTINGS}
+              searching: true,
-              columns={colTableSubSetting}
+              ordering: true,
-              options={{
+              info: true,
-                paging: true,
+            }}
-                searching: true,
+            title=" Daftar Subscription"
-                ordering: true,
+          />
-                info: true,
-              }}
-            ></DataTable>
-          </div>
         </>
       )}
     </div>

app/pages/dashboard/data.ts

@@ -2,20 +2,25 @@ import { DoctorIcon } from '~/components/icons/doctor'
 import { GraphIcon } from '~/components/icons/graph'
 
 export const REPORT = [
-  { title: 'Total Transaksi', amount: 10_800_000_000, icon: GraphIcon },
+  { title: 'Total User', amount: 10_800, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
+  { title: '⁠Total User Subscribe', amount: 5000, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
+  {
+    title: 'Total Nilai Subscribe',
+    amount: 250_000_000,
+    icon: GraphIcon,
+    currency: 'Rp. ',
+  },
 ]
 
 export const HISTORY = [
   {
-    title: 'Total Kunjungan',
+    title: 'Total Content Biasa',
     amount: 2890,
     icon: GraphIcon,
     counter: [2190, 700],
   },
   {
-    title: 'Total User Memesan',
+    title: 'Total Content Premium',
     amount: 274,
     icon: DoctorIcon,
     counter: [211, 54],

app/pages/dashboard/index.tsx

@@ -24,12 +24,13 @@ export const DashboardPage = () => {
         </div>
       </section>
       <div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
-        {REPORT.map(({ title, amount, icon }, index) => (
+        {REPORT.map(({ title, amount, icon, currency }, index) => (
           <CardReport
             key={index}
             title={title}
             amount={amount}
             icon={icon}
+            currency={currency}
           />
         ))}
       </div>
@@ -49,19 +50,15 @@ export const DashboardPage = () => {
         </div>
       </div>
 
-      <div className="mt-5 grid max-h-[280px] grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
+      <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
-        <div className="sm:col-span-3">
+        <div className="h-full w-full sm:w-[60%]">
-          <div className="h-30 w-full">
+          <div className="shadow-sm">
-            <div className="shadow-sm">
+            <UiChartBar />
-              <UiChartBar />
-            </div>
           </div>
         </div>
-        <div className="sm:col-span-2 sm:col-start-4">
+        <div className="w-ful h-full sm:w-[40%]">
-          <div className="h-30 w-full">
+          <div className="shadow-sm">
-            <div className="shadow-sm">
+            <ChartSubscription />
-              <ChartSubscription />
-            </div>
           </div>
         </div>
       </div>

app/routes/_admin.lg-admin._auth.login.tsx

@@ -1,108 +1,4 @@
-import { useState } from 'react'
+import { AdminLoginPage } from '~/pages/admin-login'
-import { Link } from 'react-router'
 
-import { EyeIcon } from '~/components/icons/eye'
+const AuthLayout = () => <AdminLoginPage />
-import { Button } from '~/components/ui/button'
-import { APP } from '~/configs/meta'
-
-const AuthLayout = () => {
-  const [showPassword, setShowPassword] = useState(false)
-
-  return (
-    <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
-      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
-        <div className="flex flex-col items-center">
-          <Link to="/lg-admin">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-        <p className="text-center">
-          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
-        </p>
-        <div>
-          <form>
-            {/* Input Email / No Telepon */}
-            <div className="mb-4">
-              <label
-                htmlFor="email"
-                className="mb-1 block text-gray-700"
-              >
-                Email/No. Telepon
-              </label>
-              <input
-                type="text"
-                placeholder="Contoh: legal@legalgo.id"
-                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              />
-            </div>
-
-            {/* Input Password */}
-            <div className="relative mb-4">
-              <label
-                htmlFor="password"
-                className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
-              >
-                Kata Sandi
-              </label>
-              <input
-                type={showPassword ? 'text' : 'password'}
-                placeholder="Masukkan Kata Sandi"
-                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
-              />
-              <button
-                type="button"
-                className="absolute top-9 right-3 text-gray-500"
-                onClick={() => setShowPassword(!showPassword)}
-              >
-                {showPassword ? (
-                  <EyeIcon
-                    width={15}
-                    height={15}
-                  />
-                ) : (
-                  <EyeIcon
-                    width={15}
-                    height={15}
-                  />
-                )}
-              </button>
-            </div>
-
-            {/* Lupa Kata Sandi */}
-            <div className="mb-4 flex justify-between">
-              <span className="text-gray-600">Lupa Kata Sandi?</span>
-              <Link
-                to="/lg-admin/auth/reset-password"
-                className="font-semibold text-[#2E2F7C]"
-              >
-                Reset Kata Sandi
-              </Link>
-            </div>
-
-            {/* Tombol Masuk */}
-            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-              Masuk
-            </Button>
-          </form>
-        </div>
-      </div>
-      {/* Link Daftar */}
-      <div className="mt-4 text-center text-sm">
-        Belum punya akun?{' '}
-        <Button
-          onClick={() => {}}
-          className="font-semibold text-[#2E2F7C]"
-          variant="link"
-          size="fit"
-        >
-          Daftar Disini
-        </Button>
-      </div>
-    </div>
-  )
-}
 export default AuthLayout

app/routes/_admin.lg-admin._dashboard._index.tsx

@@ -1,6 +1,4 @@
 import { DashboardPage } from '~/pages/dashboard'
 
-const DashboardIndexLayout = () => {
+const DashboardIndexLayout = () => <DashboardPage />
-  return <DashboardPage />
-}
 export default DashboardIndexLayout

app/routes/_admin.lg-admin._dashboard.admins.tsx

@@ -1,4 +1,2 @@
-const DashboardAdminsLayout = () => {
+const DashboardAdminsLayout = () => <div>Admins Page</div>
-  return <div>Admins Page</div>
-}
 export default DashboardAdminsLayout

app/routes/_admin.lg-admin._dashboard.advertisements.tsx

@@ -1,6 +1,4 @@
 import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
 
-const DashboardAdvertisementsLayout = () => {
+const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
-  return <AdvertisementsPage />
-}
 export default DashboardAdvertisementsLayout

app/routes/_admin.lg-admin._dashboard.contents.tsx

@@ -1,6 +1,4 @@
 import { ContentsPage } from '~/pages/dashboard-contents'
 
-const DashboardContentsLayout = () => {
+const DashboardContentsLayout = () => <ContentsPage />
-  return <ContentsPage />
-}
 export default DashboardContentsLayout

app/routes/_admin.lg-admin._dashboard.settings.tsx

@@ -1,4 +1,2 @@
-const DashboardSettingsLayout = () => {
+const DashboardSettingsLayout = () => <div>Settings Page</div>
-  return <div>Settings Page</div>
-}
 export default DashboardSettingsLayout

app/routes/_admin.lg-admin._dashboard.site-data.tsx

@@ -1,4 +1,2 @@
-const DashboardSiteDataLayout = () => {
+const DashboardSiteDataLayout = () => <div>Site Data Page</div>
-  return <div>Site Data Page</div>
-}
 export default DashboardSiteDataLayout

app/routes/_admin.lg-admin._dashboard.subscriptions.tsx

@@ -1,6 +1,4 @@
 import { SubscriptionsPage } from '~/pages/dashboard-subscriptions'
 
-const DashboardSubscriptionsLayout = () => {
+const DashboardSubscriptionsLayout = () => <SubscriptionsPage />
-  return <SubscriptionsPage />
-}
 export default DashboardSubscriptionsLayout

app/routes/_admin.lg-admin._dashboard.users.tsx

@@ -1,6 +1,4 @@
 import { UsersPage } from '~/pages/dashboard-users'
 
-const DashboardUsersLayout = () => {
+const DashboardUsersLayout = () => <UsersPage />
-  return <UsersPage />
-}
 export default DashboardUsersLayout

app/routes/_admin.lg-admin.tsx

@@ -1,6 +1,7 @@
-import { Outlet } from 'react-router'
+import { Outlet, redirect } from 'react-router'
 
 import { getStaff } from '~/apis/admin/get-staff'
+import { AUTH_PAGES } from '~/configs/pages'
 import { AdminProvider } from '~/contexts/admin'
 import { AdminDefaultLayout } from '~/layouts/admin/default'
 import { handleCookie } from '~/libs/cookies'
@@ -8,17 +9,28 @@ import { handleCookie } from '~/libs/cookies'
 import type { Route } from './+types/_admin.lg-admin'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { adminToken } = await handleCookie(request)
+  const { staffToken } = await handleCookie(request)
-  let adminData
+  const { pathname } = new URL(request.url)
-  if (adminToken) {
+  const isAuthPage = AUTH_PAGES.includes(pathname)
+  let staffData
+
+  if (!isAuthPage && !staffToken) {
+    throw redirect('/lg-admin/login')
+  }
+
+  if (isAuthPage && staffToken) {
+    throw redirect('/lg-admin')
+  }
+
+  if (staffToken) {
     const { data } = await getStaff({
-      accessToken: adminToken,
+      accessToken: staffToken,
     })
-    adminData = data
+    staffData = data
   }
 
   return {
-    adminData,
+    staffData,
   }
 }
 

app/routes/_layout._index.tsx

@@ -1,7 +1,5 @@
 import { NewsPage } from '~/pages/news'
 
-const NewsIndexLayout = () => {
+const NewsIndexLayout = () => <NewsPage />
-  return <NewsPage />
-}
 
 export default NewsIndexLayout

app/routes/_layout.category.$name.tsx

@@ -1,7 +1,5 @@
 import { NewsCategoriesPage } from '~/pages/news-categories'
 
-const NewsCategoriesLayout = () => {
+const NewsCategoriesLayout = () => <NewsCategoriesPage />
-  return <NewsCategoriesPage />
-}
 
 export default NewsCategoriesLayout

app/routes/_layout.detail.$slug.tsx

@@ -1,7 +1,5 @@
 import { NewsDetailPage } from '~/pages/news-detail'
 
-const NewsDetailLayout = () => {
+const NewsDetailLayout = () => <NewsDetailPage />
-  return <NewsDetailPage />
-}
 
 export default NewsDetailLayout

app/routes/actions.admin.login.ts

@@ -0,0 +1,72 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { getStaff } from '~/apis/admin/get-staff'
+import { staffLoginRequest } from '~/apis/admin/login-staff'
+import { loginSchema, type TLoginSchema } from '~/pages/admin-login'
+import { generateStaffTokenCookie } from '~/utils/token'
+
+import type { Route } from './+types/actions.login'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TLoginSchema>(
+      request,
+      zodResolver(loginSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: loginData } = await staffLoginRequest(payload)
+    const { token } = loginData
+    const { data: staffData } = await getStaff({
+      accessToken: token,
+    })
+    const tokenCookie = generateStaffTokenCookie({
+      token,
+    })
+
+    const headers = new Headers()
+    headers.append('Set-Cookie', await tokenCookie)
+
+    return data(
+      {
+        success: true,
+        staff: staffData,
+      },
+      {
+        headers,
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/routes/actions.admin.logout.ts

@@ -0,0 +1,22 @@
+import { data } from 'react-router'
+
+import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
+
+export const action = async () => {
+  try {
+    const responseHeaders = setStaffLogoutHeaders()
+
+    return data(
+      { success: true },
+      { headers: responseHeaders, status: 200, statusText: 'OK' },
+    )
+  } catch {
+    return data(
+      {
+        message: 'Something went wrong',
+        success: false,
+      },
+      { status: 500 },
+    )
+  }
+}

app/routes/actions.login.ts

@@ -6,7 +6,7 @@ import { XiorError } from 'xior'
 import { getUser } from '~/apis/news/get-user'
 import { userLoginRequest } from '~/apis/news/login-user'
 import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
-import { generateTokenCookie } from '~/utils/token'
+import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.login'
 
@@ -31,7 +31,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     const { data: userData } = await getUser({
       accessToken: token,
     })
-    const tokenCookie = generateTokenCookie({
+    const tokenCookie = generateUserTokenCookie({
       token,
     })
 

app/routes/actions.register.ts

@@ -9,7 +9,7 @@ import {
   registerSchema,
   type TRegisterSchema,
 } from '~/layouts/news/form-register'
-import { generateTokenCookie } from '~/utils/token'
+import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.register'
 
@@ -34,7 +34,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     const { data: userData } = await getUser({
       accessToken: token,
     })
-    const tokenCookie = generateTokenCookie({
+    const tokenCookie = generateUserTokenCookie({
       token,
     })
 

app/utils/token.ts

@@ -1,12 +1,15 @@
 import { decodeJwt } from 'jose'
 
-import { userTokenCookieConfig } from '~/libs/cookie.server'
+import {
+  staffTokenCookieConfig,
+  userTokenCookieConfig,
+} from '~/libs/cookie.server'
 
 type TTokenCookie = {
   token: string
 }
 
-export const generateTokenCookie = (parameters: TTokenCookie) => {
+export const generateUserTokenCookie = (parameters: TTokenCookie) => {
   const { token } = parameters
 
   const decodedToken = decodeJwt(token)
@@ -19,3 +22,17 @@ export const generateTokenCookie = (parameters: TTokenCookie) => {
     expires: expirationDate,
   })
 }
+
+export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
+  const { token } = parameters
+
+  const decodedToken = decodeJwt(token)
+  const decodedTokenExp = decodedToken.exp
+  const expirationDate = decodedTokenExp
+    ? new Date(decodedTokenExp * 1000)
+    : undefined
+
+  return staffTokenCookieConfig.serialize(token, {
+    expires: expirationDate,
+  })
+}