app/apis/admin/get-staff.ts

@@ -6,8 +6,7 @@ const staffSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
-    name: z.string(),
+    username: 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,7 +5,6 @@ import { formatNumberWithPeriods } from '~/utils/formatter'
 type CardReportProperty = {
   title: string
   amount: number
-  currency?: string
   icon: (
     properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
   ) => JSX.Element
@@ -14,7 +13,7 @@ type CardReportProperty = {
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount, icon: Icon, counter, currency } = properties
+  const { title, amount, icon: Icon, counter } = properties
   return (
     <div className="rounded bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
@@ -23,17 +22,15 @@ export const CardReport = (properties: CardReportProperty) => {
           height={48}
           width={48}
         />
-        <div className="ml-7">
+        <div className="ml-10">
           <h2 className="text-lg font-semibold">{title}</h2>
           <p className="text-2xl font-bold text-[#2E2F7C]">
-            {currency
+            Rp. {formatNumberWithPeriods(amount)}
-              ? `${currency} ${formatNumberWithPeriods(amount)}`
-              : formatNumberWithPeriods(amount)}
           </p>
         </div>
       </div>
       {counter?.length && (
-        <div className="flex items-center pt-2">
+        <div className="flex items-center">
           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: 'auto', width: '100%' }}>
+        <div style={{ height: '200px', width: '100%' }}>
           <Doughnut
             data={data}
             options={options}

app/components/ui/table.tsx

@@ -1,42 +0,0 @@
-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 STAFF_COOKIES = {
+export const ADMIN_COOKIES = {
-  token: '__lg-stf-tkn',
+  token: '__lg-adm-tkn',
 }

app/configs/meta.ts

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

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

app/data/contents.ts

@@ -1,11 +1,8 @@
 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'
@@ -158,43 +155,18 @@ 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,15 +1,12 @@
-import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Link } from 'react-router'
-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 type { loader } from '~/routes/_admin.lg-admin'
+import { useAdminContext } from '~/contexts/admin'
 
 export const Navbar = () => {
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const { adminProfile } = useAdminContext()
-  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">
@@ -24,37 +21,13 @@ export const Navbar = () => {
         />
       </Link>
       <div className="flex items-center gap-x-8">
-        <Popover className="relative">
+        <div className="flex w-3xs items-center justify-between">
-          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
+          <div className="flex items-center">
-            <div className="flex items-center">
+            <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
-              <img
+            <span className="text-xs">{adminProfile.name}</span>
-                src={staffData?.profile_picture}
+          </div>
-                alt={staffData?.name}
+          <ChevronIcon className="opacity-50" />
-                className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+        </div>
-              />
-              <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 { Link, useLocation } from 'react-router'
+import { NavLink, 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 }) => (
-            <Link
+            <NavLink
               to={url}
               key={`${group}-${title}`}
               className={twMerge(
@@ -37,7 +37,7 @@ export const Sidebar = () => {
               >
                 {title}
               </span>
-            </Link>
+            </NavLink>
           ))}
         </div>
       ))}

app/libs/cookie.server.ts

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

app/libs/cookies.ts

@@ -1,16 +1,16 @@
-import { staffTokenCookieConfig, userTokenCookieConfig } from './cookie.server'
+import { adminTokenCookieConfig, 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 staffToken = (await staffTokenCookieConfig.parse(
+  const adminToken = (await adminTokenCookieConfig.parse(
     headers.get('Cookie'),
   )) as string
 
   return {
     userToken,
-    staffToken,
+    adminToken,
   }
 }

app/libs/logout-header.server.ts

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

app/pages/admin-login/index.tsx

@@ -1,117 +0,0 @@
-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="Buat Artikel" />
+      <TitleDashboard title="Konten" />
       <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,45 +1,3 @@
-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 (
+  return <div>detail</div>
-    <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,17 +1,12 @@
 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,
@@ -32,106 +27,55 @@ export const AdvertisementsPage = ({
     onLinkChange?.(newLink)
   }
 
-  const dataBanner = BANNER
-  const dataColumns = [
-    { title: 'No', data: 'id' },
-    { title: 'Banner', data: 'urlImage' },
-    { title: 'Link', data: 'link' },
-    { title: 'Tgl Create', data: 'createdAt' },
-    { title: 'Status', data: 'status' },
-  ]
-  const dataSlot = {
-    1: (value: string) => {
-      return (
-        <div>
-          <img
-            src={value}
-            alt={`banner - ${value}`}
-            className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
-          />
-        </div>
-      )
-    },
-    4: (value: string) => {
-      const statusColors = {
-        draft: 'bg-gray-300',
-        active: 'bg-[#04D182]',
-        inactive: 'bg-[#F96D19]',
-      }
-      const status = value as TStatusColors
-      return (
-        <span
-          className={twMerge(
-            'rounded-md px-2 py-1 text-sm',
-            status ? statusColors[status] : '',
-          )}
-        >
-          {status}
-        </span>
-      )
-    },
-  }
-
   return (
-    <div className="relative">
+    <div className="w-[400px] rounded-xl bg-gray-50 p-6">
-      <TitleDashboard title="Advertisement" />
+      {banner && (
-      <div className="flex gap-5">
+        <div className="h-[100px] w-[200px]">
-        <div className="w-[400px] rounded-xl bg-gray-50 py-6">
+          <div className="mb-4">
-          <Field className="mb-6">
+            <img
-            <Label className="mb-2 block text-sm font-bold text-gray-700">
+              src={URL.createObjectURL(banner)}
-              Banner Design
+              alt="Banner Preview"
-            </Label>
+              className="h-auto w-full rounded-lg"
-            <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>
-        {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>
-      </div>
+      )}
-      <UiTable
+      <Field className="mb-6">
-        data={dataBanner}
+        <Label className="mb-2 block text-sm font-bold text-gray-700">
-        columns={dataColumns}
+          Banner Design
-        slots={dataSlot}
+        </Label>
-        title="Daftar Banner"
+        <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/index.tsx

@@ -4,15 +4,13 @@ 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 dataTable = CONTENTS
+  const columns = [
-  const dataColumns = [
     { title: 'No', data: 'id' },
     { title: 'Tanggal Kontent', data: 'createdAt' },
     { title: 'Nama Penulis', data: 'author' },
@@ -32,27 +30,6 @@ 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">
@@ -85,14 +62,33 @@ export const ContentsPage = () => {
           </Field>
         </div>
       </div>
-
+      <div className="rounded-lg bg-white p-6 shadow-md">
-      <UiTable
+        <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
-        data={dataTable}
+        <DataTable
-        columns={dataColumns}
+          className="cell-border"
-        slots={dataSlot}
+          data={CONTENTS}
-        options={dataOptions}
+          columns={columns}
-        title="Daftar Konten"
+          slots={{
-      />
+            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,7 +5,6 @@ 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'
@@ -92,17 +91,23 @@ export const SubscriptionsPage = () => {
             </div>
           </div>
 
-          <UiTable
+          <div className="rounded-lg bg-white p-6 shadow-md">
-            data={SUBSCRIPTIONS}
+            <h3 className="py-1 font-semibold text-[#4C5CA0]">
-            columns={colTableSubscription}
+              Daftar Subscription
-            options={{
+            </h3>
-              paging: true,
+
-              searching: true,
+            <DataTable
-              ordering: true,
+              // className="cell-border"
-              info: true,
+              data={SUBSCRIPTIONS}
-            }}
+              columns={colTableSubscription}
-            title="Daftar Subscription"
+              options={{
-          />
+                paging: true,
+                searching: true,
+                ordering: true,
+                info: true,
+              }}
+            ></DataTable>
+          </div>
         </>
       )}
 
@@ -151,18 +156,22 @@ export const SubscriptionsPage = () => {
               </Field>
             </div>
           </div>
-
+          <div className="rounded-lg bg-white p-6 shadow-md">
-          <UiTable
+            <h3 className="py-1 font-semibold text-[#4C5CA0]">
-            data={SUBSETTINGS}
+              Daftar Subscription
-            columns={colTableSubSetting}
+            </h3>
-            options={{
+            <DataTable
-              paging: true,
+              className="cell-border"
-              searching: true,
+              data={SUBSETTINGS}
-              ordering: true,
+              columns={colTableSubSetting}
-              info: true,
+              options={{
-            }}
+                paging: true,
-            title=" Daftar Subscription"
+                searching: true,
-          />
+                ordering: true,
+                info: true,
+              }}
+            ></DataTable>
+          </div>
         </>
       )}
     </div>

app/pages/dashboard/data.ts

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

app/pages/dashboard/index.tsx

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

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

@@ -1,4 +1,108 @@
-import { AdminLoginPage } from '~/pages/admin-login'
+import { useState } from 'react'
+import { Link } from 'react-router'
 
-const AuthLayout = () => <AdminLoginPage />
+import { EyeIcon } from '~/components/icons/eye'
+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,4 +1,6 @@
 import { DashboardPage } from '~/pages/dashboard'
 
-const DashboardIndexLayout = () => <DashboardPage />
+const DashboardIndexLayout = () => {
+  return <DashboardPage />
+}
 export default DashboardIndexLayout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/routes/_admin.lg-admin.tsx

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

app/routes/_layout._index.tsx

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

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

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

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

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

app/routes/actions.admin.login.ts

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

@@ -1,22 +0,0 @@
-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 { generateUserTokenCookie } from '~/utils/token'
+import { generateTokenCookie } 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 = generateUserTokenCookie({
+    const tokenCookie = generateTokenCookie({
       token,
     })
 

app/routes/actions.register.ts

@@ -9,7 +9,7 @@ import {
   registerSchema,
   type TRegisterSchema,
 } from '~/layouts/news/form-register'
-import { generateUserTokenCookie } from '~/utils/token'
+import { generateTokenCookie } 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 = generateUserTokenCookie({
+    const tokenCookie = generateTokenCookie({
       token,
     })
 

app/utils/token.ts

@@ -1,15 +1,12 @@
 import { decodeJwt } from 'jose'
 
-import {
+import { userTokenCookieConfig } from '~/libs/cookie.server'
-  staffTokenCookieConfig,
-  userTokenCookieConfig,
-} from '~/libs/cookie.server'
 
 type TTokenCookie = {
   token: string
 }
 
-export const generateUserTokenCookie = (parameters: TTokenCookie) => {
+export const generateTokenCookie = (parameters: TTokenCookie) => {
   const { token } = parameters
 
   const decodedToken = decodeJwt(token)
@@ -22,17 +19,3 @@ export const generateUserTokenCookie = (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,
-  })
-}