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

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>
   )
 }