feat: implement dashboard contents page with data table and styling

app/app.css

@@ -1,8 +1,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import 'tailwindcss';
+
 @plugin "@tailwindcss/typography";
 
+@import 'datatables.net-dt';
+/* @import 'datatables.net-responsive-dt';
+@import 'datatables.net-select-dt'; */
+
 @theme {
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

app/components/popup/modal.tsx

@@ -8,7 +8,7 @@ import {
 import type { ReactNode } from 'react'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
 type ModalProperties = {
   isOpen: boolean

app/components/popup/success-modal.tsx

@@ -9,47 +9,35 @@ import type { ReactNode } from 'react'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
 import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
-type ModalProperties = {
-  isOpen: boolean
+export type ModalProperties = {
   onClose: () => void
   children?: ReactNode
-  type:
-    | 'success'
-    | 'error'
-    | 'warning'
-    | 'success-reset-password'
-    | 'success-register'
-    | 'success-payment'
+  isOpen?: 'error' | 'warning' | 'resetPassword' | 'register' | 'payment'
 }
+
 type DescriptionMap = {
-  [key in ModalProperties['type']]: string
+  [key in Exclude<ModalProperties['isOpen'], undefined>]: string
 }
 
 const DESCRIPTIONS: DescriptionMap = {
-  'success-reset-password':
-    'Link Reset Password telah dikirimkan ke email anda',
-  'success-register': 'Selamat! pendaftaran anda berhasil!',
-  'success-payment': 'Selamat! Pembayaran anda berhasil!',
+  resetPassword: 'Link Reset Password telah dikirimkan ke email anda',
+  register: 'Selamat! Pendaftaran anda berhasil!',
+  payment: 'Selamat! Pembayaran anda berhasil!',
   warning:
     'Mohon maaf fitur berikut hanya untuk anggota yang sudah tersubscribe',
   error: 'Terjadi kesalahan. Silakan coba lagi.',
-  success: '',
 }
 
-export const SuccessModal = ({
-  isOpen,
-  onClose,
-  type = 'success-register',
-}: ModalProperties) => {
-  if (!isOpen) return
-
-  const message = DESCRIPTIONS[type] || 'Terjadi kesalahan. Silakan coba lagi.'
+export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
+  const message = isOpen
+    ? DESCRIPTIONS[isOpen]
+    : 'Terjadi kesalahan. Silakan coba lagi.'
 
   return (
     <Dialog
-      open={isOpen}
+      open={!!isOpen}
       onClose={onClose}
       className="relative z-50"
       transition
@@ -59,7 +47,10 @@ export const SuccessModal = ({
         transition
       />
       <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+        <DialogPanel
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+          transition
+        >
           <DialogTitle className="relative flex justify-center">
             <button
               onClick={onClose}
@@ -84,27 +75,24 @@ export const SuccessModal = ({
           <div className="relative">
             <div className="relative flex flex-col items-center justify-center">
               <div className="mb-4 p-4 text-center">
-                {[
-                  'success-reset-password',
-                  'success-register',
-                  'success-payment',
-                ].includes(type) && (
-                  <div className="justify-center">
-                    <img
-                      src={'/images/back-to-home.svg'}
-                      alt={APP.title}
-                      className="h-[300px]"
-                    />
-                    <Button
-                      className="mt-5 w-full rounded-md"
-                      variant={'newsPrimary'}
-                      onClick={onClose}
-                    >
-                      Back to Home
-                    </Button>
-                  </div>
-                )}
-                {type === 'warning' && (
+                {isOpen &&
+                  ['resetPassword', 'register', 'payment'].includes(isOpen) && (
+                    <div className="justify-center">
+                      <img
+                        src={'/images/back-to-home.svg'}
+                        alt={APP.title}
+                        className="h-[300px]"
+                      />
+                      <Button
+                        className="mt-5 w-full rounded-md"
+                        variant={'newsPrimary'}
+                        onClick={onClose}
+                      >
+                        Back to Home
+                      </Button>
+                    </div>
+                  )}
+                {isOpen === 'warning' && (
                   <div className="justify-center">
                     <img
                       src={'/images/warning.svg'}

app/components/ui/banner.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router'
 
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
 export const Banner = () => {
   return (

app/components/ui/carousel.tsx

@@ -4,14 +4,16 @@ import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { useNewsContext } from '~/contexts/news'
 import type { TNews } from '~/types/news'
 
 import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
   const [currentIndex, setCurrentIndex] = useState(0)
-  const location = useLocation()
-  const hasCategory = location.pathname.includes('/category/')
+  const { pathname } = useLocation()
+  const hasCategory = pathname.includes('/category/')
 
   const { title, description, items, type } = properties
   const itemsPerPage = type === 'hero' ? 1 : 3
@@ -65,7 +67,7 @@ export const Carousel = (properties: TNews) => {
       >
         {items
           .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
-          .map(({ featured, title, content, tags, slug }, index) => (
+          .map(({ featured, title, content, tags, slug, isPremium }, index) => (
             <div
               key={index}
               className={twMerge(
@@ -89,15 +91,25 @@ export const Carousel = (properties: TNews) => {
                   type === 'hero' ? 'gap-7' : 'gap-4',
                 )}
               >
-                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                  {tags?.map((item, index) => (
+                <div
+                  className={twMerge(
+                    'uppercase',
+                    type === 'hero' ? 'hidden' : '',
+                  )}
+                >
+                  {tags?.map((item) => (
                     <span
-                      key={index}
-                      className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                      key={`${index}-${item}`}
+                      className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                     >
                       {item}
                     </span>
                   ))}
+                  {isPremium && (
+                    <span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+                      Premium Content
+                    </span>
+                  )}
                 </div>
 
                 <div>
@@ -117,8 +129,14 @@ export const Carousel = (properties: TNews) => {
                 </div>
                 <Button
                   size="block"
-                  as={Link}
-                  to={`detail/${slug}`}
+                  {...(isPremium
+                    ? {
+                        onClick: () => {
+                          setIsSuccessOpen('warning')
+                        },
+                        to: '',
+                      }
+                    : { as: Link, to: `/news/detail/${slug}` })}
                   className={twMerge('', type === 'hero' ? '' : 'mb-5')}
                 >
                   View More

app/configs/meta.ts

@@ -0,0 +1,31 @@
+import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
+
+export const APP = {
+  title: 'LegalGo',
+  description:
+    'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
+  logo: '/images/logo.png',
+}
+
+type TMetaTitleConfig = {
+  path: string
+  title: string
+}[]
+
+export const META_TITLE_CONFIG: TMetaTitleConfig = [
+  {
+    path: '/news',
+    title: 'Home',
+  },
+  {
+    path: '/admin/auth/login',
+    title: 'Login',
+  },
+  {
+    path: '/admin/auth/register',
+    title: 'Register',
+  },
+  ...ADMIN_MENU.flatMap((menu) =>
+    menu.items.map((item) => ({ path: item.url, title: item.title })),
+  ),
+]

app/configs/storages.ts

@@ -0,0 +1,7 @@
+export const USER_COOKIES = {
+  token: '__lg-usr-tkn',
+}
+
+export const ADMIN_COOKIES = {
+  token: '__lg-adm-tkn',
+}

app/contexts/news.tsx

@@ -7,15 +7,21 @@ import {
   type SetStateAction,
 } from 'react'
 
-type NewsContextProperties = {
+import type { ModalProperties } from '~/components/popup/success-modal'
+
+export type NewsContextProperties = {
   isLoginOpen: boolean
   setIsLoginOpen: Dispatch<SetStateAction<boolean>>
   isRegisterOpen: boolean
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   isForgetOpen: boolean
   setForgetOpen: Dispatch<SetStateAction<boolean>>
-  isSuccessModalOpen: boolean
-  setIsSuccessModalOpen: Dispatch<SetStateAction<boolean>>
+  isSuccessOpen: ModalProperties['isOpen']
+  setIsSuccessOpen: Dispatch<
+    SetStateAction<ModalProperties['isOpen'] | undefined>
+  >
+  isInitSubscribeOpen: boolean
+  setIsInitSubscribeOpen: Dispatch<SetStateAction<boolean>>
 }
 
 const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
@@ -24,7 +30,9 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
   const [isForgetOpen, setForgetOpen] = useState(false)
-  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false)
+  const [isSuccessOpen, setIsSuccessOpen] =
+    useState<ModalProperties['isOpen']>()
+  const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false)
 
   return (
     <NewsContext.Provider
@@ -35,8 +43,10 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
         setIsRegisterOpen,
         isForgetOpen,
         setForgetOpen,
-        isSuccessModalOpen,
-        setIsSuccessModalOpen,
+        isSuccessOpen,
+        setIsSuccessOpen,
+        isInitSubscribeOpen,
+        setIsInitSubscribeOpen,
       }}
     >
       {children}

app/data/meta.ts

@@ -1,21 +0,0 @@
-export const APP = {
-  title: 'LegalGo',
-  description:
-    'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
-  logo: '/images/logo.png',
-}
-
-export const META_TITLE_CONFIG = [
-  {
-    path: '/news',
-    title: 'Home',
-  },
-  {
-    path: '/auth/login',
-    title: 'Login',
-  },
-  {
-    path: '/auth/register',
-    title: 'Register',
-  },
-]

app/layouts/admin/navbar.tsx

@@ -2,8 +2,8 @@ import { Link } 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 { APP } from '~/data/meta'
 
 export const Navbar = () => {
   const { adminProfile } = useAdminContext()

app/layouts/news/default.tsx

@@ -10,6 +10,7 @@ import { FormRegister } from '~/layouts/news/form-register'
 
 import { FooterLinks } from './footer-links'
 import { FooterNewsletter } from './footer-newsletter'
+import FormSubscription from './form-subscription'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
@@ -22,8 +23,10 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     setIsRegisterOpen,
     isForgetOpen,
     setForgetOpen,
-    isSuccessModalOpen,
-    setIsSuccessModalOpen,
+    isSuccessOpen,
+    setIsSuccessOpen,
+    isInitSubscribeOpen,
+    setIsInitSubscribeOpen,
   } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
@@ -50,7 +53,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
           setIsRegisterOpen={setIsRegisterOpen}
           setIsLoginOpen={setIsLoginOpen}
           setIsForgetOpen={setForgetOpen}
-          setIsSuccessModalOpen={setIsSuccessModalOpen}
+          setIsInitSubscribeOpen={setIsInitSubscribeOpen}
         />
       </PopupModal>
 
@@ -70,12 +73,19 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FormForgotPassword />
       </PopupModal>
 
+      <PopupModal
+        isOpen={isInitSubscribeOpen}
+        onClose={() => setIsInitSubscribeOpen(false)}
+        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
+      >
+        <FormSubscription />
+      </PopupModal>
+
       <SuccessModal
-        isOpen={isSuccessModalOpen}
+        isOpen={isSuccessOpen}
         onClose={() => {
-          setIsSuccessModalOpen(false)
+          setIsSuccessOpen(undefined)
         }}
-        type="warning"
       />
     </main>
   )

app/layouts/news/footer-links.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router'
 
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
 import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
 

app/layouts/news/footer-newsletter.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
 export const FooterNewsletter = () => {
   return (

app/layouts/news/form-login.tsx

@@ -1,11 +1,11 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { type Dispatch, type SetStateAction } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import type { NewsContextProperties } from '~/contexts/news'
 
 const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
@@ -15,10 +15,10 @@ const loginSchema = z.object({
 type TLoginSchema = z.infer<typeof loginSchema>
 
 type TProperties = {
-  setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
-  setIsLoginOpen: Dispatch<SetStateAction<boolean>>
-  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
-  setIsSuccessModalOpen: Dispatch<SetStateAction<boolean>>
+  setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
+  setIsLoginOpen: NewsContextProperties['setIsLoginOpen']
+  setIsForgetOpen: NewsContextProperties['setForgetOpen']
+  setIsInitSubscribeOpen: NewsContextProperties['setIsInitSubscribeOpen']
 }
 
 export const FormLogin = (properties: TProperties) => {
@@ -26,7 +26,7 @@ export const FormLogin = (properties: TProperties) => {
     setIsRegisterOpen,
     setIsLoginOpen,
     setIsForgetOpen,
-    setIsSuccessModalOpen,
+    setIsInitSubscribeOpen,
   } = properties
 
   const formMethods = useForm<TLoginSchema>({
@@ -37,7 +37,7 @@ export const FormLogin = (properties: TProperties) => {
 
   const onSubmit = handleSubmit((data) => {
     console.log('data', data) // eslint-disable-line no-console
-    setIsSuccessModalOpen(true)
+    setIsInitSubscribeOpen(true)
     setIsLoginOpen(false)
   })
 

app/layouts/news/header-search.tsx

@@ -6,7 +6,7 @@ export const HeaderSearch = () => {
     <form className="flex flex-1 justify-between gap-[15px] px-[35px]">
       <input
         placeholder="Cari..."
-        className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none sm:text-2xl"
+        className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none"
         size={1}
       />
       <Button

app/layouts/news/header-top.tsx

@@ -1,8 +1,8 @@
 import { Link } from 'react-router'
 
 import { Button } from '~/components/ui/button'
+import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
-import { APP } from '~/data/meta'
 
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()

app/libs/cookie.server.ts

@@ -0,0 +1,13 @@
+import { createCookie } from 'react-router'
+
+import { ADMIN_COOKIES, USER_COOKIES } from '~/configs/storages'
+
+export const userTokenCookie = createCookie(USER_COOKIES.token, {
+  secure: process.env.NODE_ENV === 'production',
+  path: '/news',
+})
+
+export const adminTokenCookie = createCookie(ADMIN_COOKIES.token, {
+  secure: process.env.NODE_ENV === 'production',
+  path: '/admin',
+})

app/libs/http-client.ts

@@ -0,0 +1,31 @@
+import xior, { merge } from 'xior'
+
+const baseURL = import.meta.env.VITE_API_URL
+const HttpClient = (token?: string) => {
+  const instance = xior.create({
+    baseURL,
+  })
+  instance.interceptors.request.use((config) => {
+    // eslint-disable-next-line no-console
+    console.info(`🚀requesting ${config.url}`)
+
+    return merge(config, {
+      headers: {
+        ...(token && { Authorization: `Bearer ${token}` }),
+      },
+    })
+  })
+
+  instance.interceptors.response.use(
+    (response) => {
+      return response
+    },
+    (error) => {
+      return Promise.reject(error)
+    },
+  )
+
+  return instance
+}
+
+export default HttpClient

app/libs/logout-header.server.ts

@@ -0,0 +1,11 @@
+import { USER_COOKIES } from '~/configs/storages'
+
+export const setUserLogoutHeaders = () => {
+  const responseHeaders = new Headers()
+  responseHeaders.append(
+    'Set-Cookie',
+    `${USER_COOKIES.token}=; Path=/news; Max-Age=0`,
+  )
+
+  return responseHeaders
+}

app/pages/dashboard-contents/data.ts

@@ -0,0 +1,102 @@
+type TContens = {
+  id: number
+  createdAt: string
+  author: string
+  title: string
+  tags: string
+  category: string
+  status: string
+}
+
+export const CONTENTS: TContens[] = [
+  {
+    id: 1,
+    createdAt: '24/10/2024',
+    author: 'John Doe',
+    title: 'Introduction to TypeScript',
+    tags: 'typescript, programming',
+    category: 'Education',
+    status: 'Published',
+  },
+  {
+    id: 2,
+    createdAt: '24/10/2024',
+    author: 'Jane Smith',
+    title: 'Advanced React Patterns',
+    tags: 'react, javascript',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 3,
+    createdAt: '24/10/2024',
+    author: 'Alice Johnson',
+    title: 'Understanding Redux',
+    tags: 'redux, state management',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 4,
+    createdAt: '24/10/2024',
+    author: 'Bob Brown',
+    title: 'CSS Grid Layout',
+    tags: 'css, design',
+    category: 'Design',
+    status: 'Published',
+  },
+  {
+    id: 5,
+    createdAt: '24/10/2024',
+    author: 'Charlie Davis',
+    title: 'Node.js Best Practices',
+    tags: 'nodejs, backend',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 6,
+    createdAt: '24/10/2024',
+    author: 'Diana Evans',
+    title: 'GraphQL for Beginners',
+    tags: 'graphql, api',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 7,
+    createdAt: '24/10/2024',
+    author: 'Evan Harris',
+    title: 'Building RESTful APIs',
+    tags: 'rest, api',
+    category: 'Development',
+    status: 'Published',
+  },
+  {
+    id: 8,
+    createdAt: '24/10/2024',
+    author: 'Fiona Green',
+    title: 'Introduction to Docker',
+    tags: 'docker, devops',
+    category: 'DevOps',
+    status: 'Published',
+  },
+  {
+    id: 9,
+    createdAt: '24/10/2024',
+    author: 'George King',
+    title: 'Microservices Architecture',
+    tags: 'microservices, architecture',
+    category: 'Development',
+    status: 'Draft',
+  },
+  {
+    id: 10,
+    createdAt: '24/10/2024',
+    author: 'Hannah Lee',
+    title: 'Kubernetes Essentials',
+    tags: 'kubernetes, devops',
+    category: 'DevOps',
+    status: 'Published',
+  },
+]

app/pages/dashboard-contents/index.tsx

@@ -0,0 +1,36 @@
+import DT from 'datatables.net-dt'
+import DataTable from 'datatables.net-react'
+
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+import { CONTENTS } from './data'
+
+export const ContentsPage = () => {
+  DataTable.use(DT)
+  const columns = [
+    { title: 'No', data: 'id' },
+    { title: 'Tanggal Kontent', data: 'createdAt' },
+    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Judul', data: 'title' },
+    { title: 'Kategori', data: 'category' },
+    { title: 'Tags', data: 'tags' },
+    { title: 'Action', data: 'id', render: () => 'Edit' },
+  ]
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Konten" />
+      <DataTable
+        className="cell-border"
+        data={CONTENTS}
+        columns={columns}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+      ></DataTable>
+    </div>
+  )
+}

app/pages/news-categories/data.ts

@@ -1,20 +1,5 @@
 import type { TNews } from '~/types/news'
 
-export const SPOTLIGHT: TNews = {
-  title: 'SPOTLIGHT',
-  description: 'Berita Terhangat hari ini',
-  type: 'hero',
-  items: [
-    {
-      title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-      content:
-        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
-      featured: '/images/news-1.jpg',
-      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
-    },
-  ],
-}
-
 export const BERITA: TNews = {
   title: 'BERITA',
   description: 'Berita Terhangat hari ini',
@@ -137,39 +122,8 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
-      slug: 'helping-a-local-business-reinvent-itself',
-    },
-  ],
-}
-
-export const KAJIAN: TNews = {
-  title: 'KAJIAN',
-  description: 'Berita Terhangat hari ini',
-  type: 'grid',
-  items: [
-    {
-      title: 'Travelling as a way of self-discovery and progress',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-2.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
-    },
-    {
-      title: 'How does writing influence your personal brand?',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-3.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
-      slug: 'how-does-writing-influence-your-personal-brand',
-    },
-    {
-      title: 'Helping a local business reinvent itself',
-      content:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
-      featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

app/pages/news-detail/data.ts

@@ -64,7 +64,8 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

app/pages/news/data.ts

@@ -55,7 +55,7 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
       isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
@@ -80,7 +80,7 @@ export const BERITA: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
       isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
@@ -97,7 +97,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-2.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
@@ -105,7 +106,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: 'https://placehold.co/600x400.png',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
     {
@@ -113,7 +115,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-3.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'how-does-writing-influence-your-personal-brand',
     },
     {
@@ -121,7 +124,8 @@ export const KAJIAN: TNews = {
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
-      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property'],
+      isPremium: true,
       slug: 'helping-a-local-business-reinvent-itself',
     },
   ],

app/root.tsx

@@ -11,7 +11,7 @@ import {
 
 import type { Route } from './+types/root'
 import './app.css'
-import { APP, META_TITLE_CONFIG } from './data/meta'
+import { APP, META_TITLE_CONFIG } from './configs/meta'
 
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },

app/routes/_layout.admin.auth.login.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
 import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'
+import { APP } from '~/configs/meta'
 
 const AuthLayout = () => {
   const [showPassword, setShowPassword] = useState(false)

app/routes/_layout.admin.dashboard.contents.tsx

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

eslint.config.mjs

@@ -8,6 +8,8 @@ import tsEslintParser from '@typescript-eslint/parser'
 import eslintPluginUnicorn from 'eslint-plugin-unicorn'
 import reactPlugin from 'eslint-plugin-react'
 import pluginQuery from '@tanstack/eslint-plugin-query'
+import unusedImports from 'eslint-plugin-unused-imports'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
 export default tseslint.config(
   { ignores: ['dist', 'node_modules', '.react-router'] },
@@ -18,7 +20,7 @@ export default tseslint.config(
       jsxA11y.flatConfigs.recommended,
       importPlugin.flatConfigs.recommended,
       eslintPluginUnicorn.configs['flat/recommended'],
-      ...pluginQuery.configs['flat/recommended'],
+      eslintConfigPrettier,
     ],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
@@ -28,6 +30,8 @@ export default tseslint.config(
     plugins: {
       'react-hooks': reactHooks,
       react: reactPlugin,
+      'unused-imports': unusedImports,
+      '@tanstack/query': pluginQuery,
     },
     languageOptions: {
       parser: tsEslintParser,
@@ -42,23 +46,16 @@ export default tseslint.config(
           extensions: ['.js', '.jsx', '.ts', '.tsx'],
         },
       },
+      react: {
+        version: 'detect',
+      },
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       ...tseslint.configs.recommended.rules,
       ...reactPlugin.configs.recommended.rules,
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        {
-          args: 'all',
-          argsIgnorePattern: '^_',
-          caughtErrors: 'all',
-          caughtErrorsIgnorePattern: '^_',
-          destructuredArrayIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          ignoreRestSiblings: true,
-        },
-      ],
+      '@tanstack/query/exhaustive-deps': 'error',
+      '@typescript-eslint/no-unused-vars': 'off',
       'unicorn/filename-case': [
         'error',
         {
@@ -90,7 +87,8 @@ export default tseslint.config(
                 '~/layouts/*/*/*/*',
                 '~/schemas/*/*/*',
                 '~/types/*/*',
-                '~/utils/*/**',
+                '~/utils/*/*',
+                '~/libs/*/*',
               ],
             },
           ],
@@ -125,6 +123,16 @@ export default tseslint.config(
           ],
         },
       ],
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
       'react/react-in-jsx-scope': 'off',
       'react/jsx-key': [
         'error',

package.json

@@ -24,6 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "datatables.net-dt": "^2.2.2",
     "datatables.net-react": "^1.0.0",
+    "embla-carousel-react": "^8.5.2",
     "html-react-parser": "^5.2.2",
     "isbot": "^5.1.17",
     "react": "^19.0.0",
@@ -32,6 +33,7 @@
     "react-hook-form": "^7.54.2",
     "react-router": "^7.1.3",
     "tailwind-merge": "^3.0.1",
+    "xior": "^0.6.3",
     "zod": "^3.24.2"
   },
   "devDependencies": {
@@ -49,12 +51,14 @@
     "@types/react-dom": "^19.0.1",
     "@typescript-eslint/parser": "^8.22.0",
     "eslint": "^8.0.1",
-    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "^3.8.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
     "knip": "^5.43.6",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       datatables.net-react:
         specifier: ^1.0.0
         version: 1.0.0
+      embla-carousel-react:
+        specifier: ^8.5.2
+        version: 8.5.2(react@19.0.0)
       html-react-parser:
         specifier: ^5.2.2
         version: 5.2.2(@types/react@19.0.8)(react@19.0.0)
@@ -62,6 +65,9 @@ importers:
       tailwind-merge:
         specifier: ^3.0.1
         version: 3.0.1
+      xior:
+        specifier: ^0.6.3
+        version: 0.6.3
       zod:
         specifier: ^3.24.2
         version: 3.24.2
@@ -108,12 +114,15 @@ importers:
       eslint:
         specifier: ^8.0.1
         version: 8.57.1
+      eslint-config-prettier:
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@8.57.1)
       eslint-import-resolver-typescript:
-        specifier: ^3.7.0
-        version: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+        specifier: ^3.8.3
+        version: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.31.0
-        version: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+        version: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.2
         version: 6.10.2(eslint@8.57.1)
@@ -126,6 +135,9 @@ importers:
       eslint-plugin-unicorn:
         specifier: ^56.0.1
         version: 56.0.1(eslint@8.57.1)
+      eslint-plugin-unused-imports:
+        specifier: ^4.1.4
+        version: 4.1.4(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)
       globals:
         specifier: ^15.14.0
         version: 15.14.0
@@ -2042,6 +2054,19 @@ packages:
   electron-to-chromium@1.5.90:
     resolution: {integrity: sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==}
 
+  embla-carousel-react@8.5.2:
+    resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.2:
+    resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2:
+    resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
+
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
@@ -2142,11 +2167,17 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  eslint-config-prettier@10.0.1:
+    resolution: {integrity: sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
   eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
-  eslint-import-resolver-typescript@3.7.0:
-    resolution: {integrity: sha512-Vrwyi8HHxY97K5ebydMtffsWAn1SCR9eol49eCd5fJS4O1WV7PaAjbcjmbfJJSMz/t4Mal212Uz/fQZrOB8mow==}
+  eslint-import-resolver-typescript@3.8.3:
+    resolution: {integrity: sha512-A0bu4Ks2QqDWNpeEgTQMPTngaMhuDu4yv6xpftBMAf+1ziXnpx+eSR1WRfoPTe2BAiAjHFZ7kSNx1fvr5g5pmQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -2213,6 +2244,15 @@ packages:
     peerDependencies:
       eslint: '>=8.56.0'
 
+  eslint-plugin-unused-imports@4.1.4:
+    resolution: {integrity: sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+      eslint: ^9.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+
   eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2289,6 +2329,14 @@ packages:
   fastq@1.18.0:
     resolution: {integrity: sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==}
 
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3911,9 +3959,17 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  tiny-lru@11.2.11:
+    resolution: {integrity: sha512-27BIW0dIWTYYoWNnqSmoNMKe5WIbkXsc0xaCQHd3/3xT2XMuMJrzHdrO9QBFR14emBz1Bu0dOAs2sCBBrvgPQA==}
+    engines: {node: '>=12'}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyglobby@0.2.12:
+    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
+    engines: {node: '>=12.0.0'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -3928,6 +3984,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-deepmerge@7.0.2:
+    resolution: {integrity: sha512-akcpDTPuez4xzULo5NwuoKwYRtjQJ9eoNfBACiBMaXwNAx7B1PKfe5wqUFJuW5uKzQ68YjDFwPaWHDG1KnFGsA==}
+    engines: {node: '>=14.13.1'}
+
   tsconfck@3.1.4:
     resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
@@ -4175,6 +4235,9 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  xior@0.6.3:
+    resolution: {integrity: sha512-WxDMGk7W2duFoCS0M59Pll/BIGfWiadZp4MMEY0/56K+3Vz400DUTiEZLpuaVcSnv+pCSz05MJz8kohn8wivhg==}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -6190,6 +6253,18 @@ snapshots:
 
   electron-to-chromium@1.5.90: {}
 
+  embla-carousel-react@8.5.2(react@19.0.0):
+    dependencies:
+      embla-carousel: 8.5.2
+      embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
+      react: 19.0.0
+
+  embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
+  embla-carousel@8.5.2: {}
+
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
@@ -6357,6 +6432,10 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  eslint-config-prettier@10.0.1(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
@@ -6365,34 +6444,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
       enhanced-resolve: 5.18.0
       eslint: 8.57.1
-      fast-glob: 3.3.3
       get-tsconfig: 4.10.0
       is-bun-module: 1.3.0
-      is-glob: 4.0.3
       stable-hash: 0.0.4
+      tinyglobby: 0.2.12
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.22.0(eslint@8.57.1)(typescript@5.7.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -6403,7 +6481,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -6486,6 +6564,12 @@ snapshots:
       semver: 7.7.0
       strip-indent: 3.0.0
 
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.22.0(@typescript-eslint/parser@8.22.0(eslint@8.57.1)(typescript@5.7.3))(eslint@8.57.1)(typescript@5.7.3)
+
   eslint-scope@7.2.2:
     dependencies:
       esrecurse: 4.3.0
@@ -6630,6 +6714,10 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fdir@6.4.3(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -8232,8 +8320,15 @@ snapshots:
 
   through@2.3.8: {}
 
+  tiny-lru@11.2.11: {}
+
   tinyexec@0.3.2: {}
 
+  tinyglobby@0.2.12:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -8244,6 +8339,8 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
+  ts-deepmerge@7.0.2: {}
+
   tsconfck@3.1.4(typescript@5.7.3):
     optionalDependencies:
       typescript: 5.7.3
@@ -8500,6 +8597,11 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  xior@0.6.3:
+    dependencies:
+      tiny-lru: 11.2.11
+      ts-deepmerge: 7.0.2
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}