Merge remote-tracking branch 'origin/master' into feature/slicing

app/components/ui/banner.tsx

@@ -1,10 +1,11 @@
+import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Link } from 'react-router'
 
 import { BANNER } from '~/data/contents'
 
 export const Banner = () => {
-  const [emblaReference] = useEmblaCarousel({ loop: false })
+  const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
 
   return (
     <div className="">

app/components/ui/chart.tsx

@@ -71,7 +71,7 @@ export const UiChartPie = () => {
 
   return (
     <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
-      <h2 className="text-xl font-bold">Top 5 Konten</h2>
+      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
       <Pie
         height={225}
         width={450}

app/components/ui/input-file.tsx

@@ -0,0 +1,80 @@
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
+import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+import { Button } from './button'
+
+type TInputProperties<T extends FieldValues> = Omit<
+  ComponentProps<'input'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+}
+
+export const InputFile = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    placeholder,
+    disabled,
+    className,
+    containerClassName,
+    labelClassName,
+    ...restProperties
+  } = properties
+
+  const {
+    register,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <HeadlessInput
+        className={twMerge(
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+          className,
+        )}
+        placeholder={placeholder}
+        {...register(name, rules)}
+        {...restProperties}
+      />
+      <Button
+        type="button"
+        variant="icon"
+        size="fit"
+        className="absolute right-3 h-[42px]"
+        onClick={() => {}}
+      >
+        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+      </Button>
+    </Field>
+  )
+}

app/components/ui/input.tsx

@@ -75,7 +75,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           type="button"
           variant="icon"
           size="fit"
-          className="absolute right-3 h-[42px] text-gray-500"
+          className="absolute right-3 h-[42px]"
           onClick={() =>
             setInputType(inputType === 'password' ? 'text' : 'password')
           }

app/components/ui/table.tsx

@@ -1,11 +1,11 @@
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import React from 'react'
 
 type UiTableProperties = {
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  data: any[] // eslint-disable-line @typescript-eslint/no-explicit-any
   columns: ConfigColumns[]
-  slots?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  slots?: DataTableSlots
   options?: Config
   title: string
 }

app/configs/meta.ts

@@ -1,4 +1,4 @@
-import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
+import { MENU as ADMIN_MENU, SUB_MENU } from '~/layouts/admin/menu'
 
 export const APP = {
   title: 'LegalGo',
@@ -23,4 +23,5 @@ export const META_TITLE_CONFIG: TMetaTitleConfig = [
   ...ADMIN_MENU.flatMap((menu) =>
     menu.items.map((item) => ({ path: item.url, title: item.title })),
   ),
+  ...SUB_MENU,
 ]

app/layouts/admin/menu.ts

@@ -30,7 +30,7 @@ export const MENU: TMenu[] = [
         icon: DocumentIcon,
       },
       {
-        title: 'Konten',
+        title: 'Artikel',
         url: '/lg-admin/contents',
         icon: ChatIcon,
       },
@@ -67,3 +67,30 @@ export const MENU: TMenu[] = [
     ],
   },
 ]
+
+export const SUB_MENU = [
+  {
+    title: 'Buat Artikel',
+    path: '/lg-admin/contents/create',
+  },
+  {
+    title: 'Update Artikel',
+    path: '/lg-admin/contents/update',
+  },
+  {
+    title: 'Buat Kategori',
+    path: '/lg-admin/categories/create',
+  },
+  {
+    title: 'Update Kategori',
+    path: '/lg-admin/categories/update',
+  },
+  {
+    title: 'Buat Tag',
+    path: '/lg-admin/tags/create',
+  },
+  {
+    title: 'Update Tag',
+    path: '/lg-admin/tags/update',
+  },
+]

app/pages/dashboard-advertisements/index.tsx

@@ -1,5 +1,7 @@
 import { Field, Input, Label, Select } from '@headlessui/react'
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import type { ConfigColumns } from 'datatables.net-dt'
+import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
@@ -36,14 +38,14 @@ export const AdvertisementsPage = ({
   }
 
   const dataBanner = BANNER
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     { title: 'No', data: 'id' },
     { title: 'Banner', data: 'urlImage' },
     { title: 'Link', data: 'link' },
     { title: 'Tgl Create', data: 'createdAt' },
     { title: 'Status', data: 'status' },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (value: string) => {
       return (
         <div>

app/pages/dashboard-categories/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
@@ -13,17 +13,18 @@ export const CategoriesPage = () => {
   )
 
   DataTable.use(DT)
-  const dataTable = loaderData?.categoriesData?.sort((a, b) => {
-    if (a.sequence === null) return 1
-    if (b.sequence === null) return -1
-    return a.sequence - b.sequence
-  })
-  const dataColumns = [
+  const dataTable =
+    loaderData?.categoriesData?.sort((a, b) => {
+      if (a.sequence === null) return 1
+      if (b.sequence === null) return -1
+      return a.sequence - b.sequence
+    }) || []
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
-        type: unknown,
+        _data: unknown,
+        _type: unknown,
         row: TCategoryResponse,
         meta: { row: number },
       ) => {
@@ -46,7 +47,7 @@ export const CategoriesPage = () => {
       data: 'id',
     },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
       <div>
         <div>{data.name}</div>
@@ -64,7 +65,7 @@ export const CategoriesPage = () => {
       </Button>
     ),
   }
-  const dataOptions = {
+  const dataOptions: Config = {
     paging: true,
     searching: true,
     ordering: true,

app/pages/dashboard-contents/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
@@ -17,16 +17,17 @@ export const ContentsPage = () => {
   )
 
   DataTable.use(DT)
-  const dataTable = loaderData?.newsData?.sort(
-    (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
-  )
-  const dataColumns = [
+  const dataTable =
+    loaderData?.newsData?.sort(
+      (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
+    ) || []
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
-        type: unknown,
-        row: unknown,
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
         meta: { row: number },
       ) => {
         return meta.row + 1
@@ -54,7 +55,7 @@ export const ContentsPage = () => {
       data: 'slug',
     },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
     2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
       <div>
@@ -62,6 +63,7 @@ export const ContentsPage = () => {
         <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
+    3: (value: string) => <span className="text-sm">{value}</span>,
     4: (value: TCategoryResponse[]) => (
       <div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
     ),
@@ -89,7 +91,7 @@ export const ContentsPage = () => {
       </Button>
     ),
   }
-  const dataOptions = {
+  const dataOptions: Config = {
     paging: true,
     searching: true,
     ordering: true,
@@ -98,7 +100,7 @@ export const ContentsPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Konten" />
+      <TitleDashboard title="Artikel" />
       <div className="mb-8 flex items-end justify-between gap-5">
         <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
@@ -116,7 +118,7 @@ export const ContentsPage = () => {
         columns={dataColumns}
         slots={dataSlot}
         options={dataOptions}
-        title="Daftar Konten"
+        title="Daftar Artikel"
       />
     </div>
   )

app/pages/dashboard-tags/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
@@ -14,13 +14,13 @@ export const TagsPage = () => {
   const { tagsData: dataTable } = loaderData || {}
 
   DataTable.use(DT)
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
-        type: unknown,
-        row: unknown,
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
         meta: { row: number },
       ) => {
         return meta.row + 1
@@ -39,15 +39,7 @@ export const TagsPage = () => {
       data: 'id',
     },
   ]
-
-  const dataOptions = {
-    paging: true,
-    searching: true,
-    ordering: true,
-    info: true,
-  }
-
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     3: (value: string) => (
       <Button
         as="a"
@@ -59,6 +51,13 @@ export const TagsPage = () => {
       </Button>
     ),
   }
+  const dataOptions: Config = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+  }
+
   return (
     <div className="relative">
       <TitleDashboard title="Tags" />
@@ -75,7 +74,7 @@ export const TagsPage = () => {
       </div>
 
       <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}

app/pages/form-contents/index.tsx

@@ -10,6 +10,7 @@ import { TextEditor } from '~/components/text-editor'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
 import { Switch } from '~/components/ui/switch'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
@@ -133,10 +134,10 @@ export const FormContentsPage = (properties: TProperties) => {
               containerClassName="flex-1"
               disabled={!!newsData}
             />
-            <Input
+            <InputFile
               id="featured_image"
               label="Gambar Unggulan"
-              placeholder="Masukkan Gambar Unggulan"
+              placeholder="Masukkan Url Gambar Unggulan"
               name="featured_image"
               className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
               labelClassName="text-sm font-medium text-[#363636]"
@@ -207,7 +208,7 @@ export const FormContentsPage = (properties: TProperties) => {
             label="Konten"
             placeholder="Masukkan Konten"
             className="shadow"
-            inputClassName="bg-white focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none border-0"
+            inputClassName="bg-white focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none border-0 min-h-[42px]"
             labelClassName="text-sm font-medium text-[#363636]"
             category="content"
           />

app/pages/news-detail/index.tsx

@@ -29,9 +29,7 @@ export const NewsDetailPage = () => {
     <div className="sm-max:mx-5 relative">
       <Card>
         <div className="py-5 sm:px-30">
-          <h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
-            {title}
-          </h2>
+          <h2 className="text-xl font-extrabold sm:text-4xl">{title}</h2>
 
           <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
             <NewsAuthor

app/pages/news/index.tsx

@@ -19,6 +19,11 @@ export const NewsPage = () => {
     description: loaderData?.beritaCategory?.description || '',
     items: loaderData?.beritaNews || [],
   }
+  const kajian: TNews = {
+    title: loaderData?.kajianCategory?.name || '',
+    description: loaderData?.kajianCategory?.description || '',
+    items: loaderData?.kajianNews || [],
+  }
 
   return (
     <div className="relative">
@@ -32,9 +37,9 @@ export const NewsPage = () => {
       <Card>
         <CarouselSection {...berita} />
       </Card>
-      {/* <Card>
-          <CarouselSection {...KAJIAN} />
-        </Card> */}
+      <Card>
+        <CarouselSection {...kajian} />
+      </Card>
     </div>
   )
 }

app/routes/_news._index.tsx

@@ -6,17 +6,33 @@ import type { Route } from './+types/_news._index'
 
 export const loader = async ({}: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
+
   const spotlightCode = 'spotlight'
   const spotlightCategory = categoriesData.find(
     (category) => category.code === spotlightCode,
   )
   const { data: spotlightNews } = await getNews({ categories: [spotlightCode] })
+
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
   const { data: beritaNews } = await getNews({ categories: [beritaCode] })
-  return { spotlightCategory, spotlightNews, beritaCategory, beritaNews }
+
+  const kajianCode = 'kajian'
+  const kajianCategory = categoriesData.find(
+    (category) => category.code === kajianCode,
+  )
+  const { data: kajianNews } = await getNews({ categories: [kajianCode] })
+
+  return {
+    spotlightCategory,
+    spotlightNews,
+    beritaCategory,
+    beritaNews,
+    kajianCategory,
+    kajianNews,
+  }
 }
 
 const NewsIndexLayout = () => <NewsPage />

package.json

@@ -33,6 +33,7 @@
     "class-variance-authority": "^0.7.1",
     "datatables.net-dt": "^2.2.2",
     "datatables.net-react": "^1.0.0",
+    "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "html-react-parser": "^5.2.2",
     "isbot": "^5.1.17",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       datatables.net-react:
         specifier: ^1.0.0
         version: 1.0.0
+      embla-carousel-autoplay:
+        specifier: ^8.5.2
+        version: 8.5.2(embla-carousel@8.5.2)
       embla-carousel-react:
         specifier: ^8.5.2
         version: 8.5.2(react@19.0.0)
@@ -2331,6 +2334,11 @@ packages:
   electron-to-chromium@1.5.90:
     resolution: {integrity: sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==}
 
+  embla-carousel-autoplay@8.5.2:
+    resolution: {integrity: sha512-27emJ0px3q/c0kCHCjwRrEbYcyYUPfGO3g5IBWF1i7714TTzE6L9P81V6PHLoSMAKJ1aHoT2e7YFOsuFKCbyag==}
+    peerDependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel-react@8.5.2:
     resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
     peerDependencies:
@@ -6990,6 +6998,10 @@ snapshots:
 
   electron-to-chromium@1.5.90: {}
 
+  embla-carousel-autoplay@8.5.2(embla-carousel@8.5.2):
+    dependencies:
+      embla-carousel: 8.5.2
+
   embla-carousel-react@8.5.2(react@19.0.0):
     dependencies:
       embla-carousel: 8.5.2