app/apis/admin/create-category.ts

@@ -1,34 +0,0 @@
-import { z } from 'zod'
-
-import { HttpServer } from '~/libs/http-server'
-import type { TCategorySchema } from '~/pages/category-create'
-
-const categoryResponseSchema = z.object({
-  data: z.object({
-    Message: z.string(),
-  }),
-})
-
-type TParameters = {
-  accessToken: string
-  payload: TCategorySchema
-}
-
-export const createCategoryRequest = async (parameters: TParameters) => {
-  const { accessToken, payload } = parameters
-  try {
-    const { ...restPayload } = payload
-    const transformedPayload = {
-      ...restPayload,
-    }
-
-    const { data } = await HttpServer({ accessToken }).post(
-      '/api/category/create',
-      transformedPayload,
-    )
-    return categoryResponseSchema.parse(data)
-  } catch (error) {
-    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
-    return Promise.reject(error)
-  }
-}

app/apis/admin/get-news.ts

@@ -1,7 +1,5 @@
 import { z } from 'zod'
 
-import { categoryResponseSchema } from '~/apis/common/get-categories'
-import { tagResponseSchema } from '~/apis/common/get-tags'
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
 const authorSchema = z.object({
@@ -9,31 +7,47 @@ const authorSchema = z.object({
   name: z.string(),
   profile_picture: z.string(),
 })
-const newsResponseSchema = z.object({
+
-  id: z.string(),
+const categoriesCodeSchema = z.array(
-  title: z.string(),
+  z.object({
-  content: z.string(),
+    id: z.string(),
-  categories: z.array(categoryResponseSchema),
+    name: z.string(),
-  tags: z.array(tagResponseSchema),
+    code: z.string(),
-  is_premium: z.boolean(),
+  }),
-  slug: z.string(),
+)
-  featured_image: z.string(),
+const newsSchema = z.object({
-  author_id: z.string(),
+  data: z.array(
-  live_at: z.string(),
+    z.object({
-  created_at: z.string(),
+      id: z.string(),
-  updated_at: z.string(),
+      title: z.string(),
-  author: authorSchema,
+      content: z.string(),
-})
+      categories: categoriesCodeSchema,
-const dataResponseSchema = z.object({
+      tags: z.array(
-  data: z.array(newsResponseSchema),
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          code: z.string(),
+        }),
+      ),
+      is_premium: z.boolean(),
+      slug: z.string(),
+      featured_image: z.string(),
+      author_id: z.string(),
+      live_at: z.string(),
+      created_at: z.string(),
+      updated_at: z.string(),
+      author: authorSchema,
+    }),
+  ),
 })
 
-export type TNewsResponse = z.infer<typeof newsResponseSchema>
+export type TAuthor = z.infer<typeof authorSchema>
+export type TCategories = z.infer<typeof categoriesCodeSchema>
 
 export const getNews = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/news`)
-    return dataResponseSchema.parse(data)
+    return newsSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/admin/get-staff.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const staffResponseSchema = z.object({
+const staffSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
@@ -14,7 +14,7 @@ const staffResponseSchema = z.object({
 export const getStaff = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/staff/profile`)
-    return staffResponseSchema.parse(data)
+    return staffSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-categories.ts

@@ -2,22 +2,22 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-export const categoryResponseSchema = z.object({
+const categorySchema = z.object({
-  id: z.string(),
+  data: z.array(
-  name: z.string(),
+    z.object({
-  code: z.string(),
+      id: z.string(),
-})
+      code: z.string(),
-const categoriesResponseSchema = z.object({
+      name: z.string(),
-  data: z.array(categoryResponseSchema),
+    }),
+  ),
 })
 
-export type TCategoryResponse = z.infer<typeof categoryResponseSchema>
+export type TCategorySchema = z.infer<typeof categorySchema>
-export type TCategoriesResponse = z.infer<typeof categoriesResponseSchema>
 
 export const getCategories = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/category`)
-    return categoriesResponseSchema.parse(data)
+    return categorySchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-subscriptions.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const subscriptionResponseSchema = z.object({
+const subscriptionSchema = z.object({
   data: z.array(
     z.object({
       id: z.string(),
@@ -15,7 +15,7 @@ const subscriptionResponseSchema = z.object({
 export const getSubscriptions = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
-    return subscriptionResponseSchema.parse(data)
+    return subscriptionSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/common/get-tags.ts

@@ -2,21 +2,22 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-export const tagResponseSchema = z.object({
+const tagSchema = z.object({
-  id: z.string(),
+  data: z.array(
-  code: z.string(),
+    z.object({
-  name: z.string(),
+      id: z.string(),
-})
+      code: z.string(),
-const tagsResponseSchema = z.object({
+      name: z.string(),
-  data: z.array(tagResponseSchema),
+    }),
+  ),
 })
 
-export type TTagResponse = z.infer<typeof tagResponseSchema>
+export type TTagSchema = z.infer<typeof tagSchema>
 
 export const getTags = async (parameters?: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/tag`)
-    return tagsResponseSchema.parse(data)
+    return tagSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/news/get-user.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const userResponseSchema = z.object({
+const userSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
@@ -23,12 +23,12 @@ const userResponseSchema = z.object({
   }),
 })
 
-export type TUserResponse = z.infer<typeof userResponseSchema>
+export type TUser = z.infer<typeof userSchema>
 
 export const getUser = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/user/profile`)
-    return userResponseSchema.parse(data)
+    return userSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/apis/news/login-user.ts

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

app/apis/news/register-user.ts

@@ -1,7 +1,13 @@
+import { z } from 'zod'
+
 import type { TRegisterSchema } from '~/layouts/news/form-register'
 import { HttpServer } from '~/libs/http-server'
 
-import { loginResponseSchema } from './login-user'
+const loginResponseSchema = z.object({
+  data: z.object({
+    token: z.string(),
+  }),
+})
 
 export const userRegisterRequest = async (payload: TRegisterSchema) => {
   try {

app/layouts/news/header-menu-mobile.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
-import type { TCategoriesResponse } from '~/apis/common/get-categories'
+import type { TCategorySchema } from '~/apis/common/get-categories'
 import { CloseIcon } from '~/components/icons/close'
 import { MenuIcon } from '~/components/icons/menu'
 import { Button } from '~/components/ui/button'
@@ -10,7 +10,7 @@ import { HeaderSearch } from '~/layouts/news/header-search'
 import type { loader } from '~/routes/_layout'
 
 type THeaderMenuMobile = {
-  menu?: TCategoriesResponse['data']
+  menu?: TCategorySchema['data']
 }
 
 export default function HeaderMenuMobile(properties: THeaderMenuMobile) {

app/pages/category-create/index.tsx

@@ -1,101 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
-import { 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 { TitleDashboard } from '~/components/ui/title-dashboard'
-
-export const createCategorySchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
-})
-export type TCategorySchema = z.infer<typeof createCategorySchema>
-
-export const CreateCategoryPage = () => {
-  const fetcher = useFetcher()
-  const formMethods = useRemixForm<TCategorySchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(createCategorySchema),
-  })
-  const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
-  const [code, setCode] = useState<string>('')
-  const [name, setName] = useState<string>('')
-
-  const { handleSubmit } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      setDisabled(false)
-      return
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
-    const inputName = name.target.value
-    setName(inputName)
-    const urlFriendlyCode = inputName
-      .toLowerCase()
-      .replaceAll(/\s+/g, '-')
-      .replaceAll(/[^\w-]+/g, '')
-    setCode(urlFriendlyCode)
-  }
-
-  return (
-    <div className="relative">
-      <TitleDashboard title="Buat Kategory" />
-      <div>
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            action="/actions/admin/category/create"
-            className="space-y-4"
-          >
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-            <div className="flex items-end justify-between gap-4">
-              <Input
-                id="name"
-                label="Nama Kategory"
-                placeholder="Masukkan Nama Kategory"
-                name="name"
-                onChange={handelCodeAuto}
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                labelClassName="text-sm font-medium text-[#363636]"
-                containerClassName="flex-1"
-                value={name}
-              />
-              <Input
-                id="code"
-                label="Kode Kategory"
-                readOnly
-                placeholder="Masukkan Kode Kategory"
-                name="code"
-                className="border-0 bg-gray-100 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                labelClassName="text-sm font-medium text-[#363636]"
-                containerClassName="flex-1"
-                value={code}
-              />
-              <Button
-                disabled={disabled}
-                type="submit"
-                size="lg"
-                className="text-md h-[42px] rounded-md"
-              >
-                Save
-              </Button>
-            </div>
-          </fetcher.Form>
-        </RemixFormProvider>
-      </div>
-    </div>
-  )
-}

app/pages/dashboard-contents/data.ts

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

app/pages/dashboard-contents/index.tsx

@@ -2,9 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
-import type { TNewsResponse } from '~/apis/admin/get-news'
+import type { TCategories } from '~/apis/admin/get-news'
-import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -22,31 +20,28 @@ export const ContentsPage = () => {
   const dataColumns = [
     {
       title: 'No',
-      render: (
+      data: undefined,
-        data: unknown,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        type: unknown,
+      render: function (data: any, type: any, row: any, meta: any) {
-        row: unknown,
-        meta: { row: number },
-      ) => {
         return meta.row + 1
       },
     },
-    {
+    { title: 'Tanggal Konten', data: 'live_at' },
-      title: 'Tanggal Konten',
-      data: 'live_at',
-    },
     {
       title: 'Nama Penulis',
+
+      data: 'author',
     },
     { title: 'Judul', data: 'title' },
+    { title: 'Kategori', data: 'categories' },
     {
-      title: 'Kategori',
+      title: 'Tags',
-      data: 'categories',
-    },
-    { title: 'Tag', data: 'tags' },
-    {
-      title: 'Premium',
       data: 'is_premium',
+      render: (value: string) => {
+        return value
+          ? `<span class="bg-[#FFFCAF] text-[#DBCA6E] px-4 py-2 rounded-full">Premium</span>`
+          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-4 py-2 rounded-full">Normal</span>`
+      },
     },
     {
       title: 'Action',
@@ -54,36 +49,28 @@ export const ContentsPage = () => {
     },
   ]
   const dataSlot = {
-    1: (value: string) => formatDate(value),
+    1: (value: string) => {
-    2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
+      return formatDate(value)
-      <div>
+    },
-        <div>{data.author.name}</div>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+    2: (value: any, type: any, data: any) =>
-      </div>
+      `<span>${value.name}</span> <br> <span class="text-sm text-[#7C7C7C]">ID: ${data.id.slice(0, 12)}</span>`,
-    ),
+    4: (value: TCategories) => {
-    4: (value: TCategoryResponse[]) =>
+      const categories = value.map((item) => item.name).join(', ')
-      value.map((item) => item.name).join(', '),
+      return `${categories}`
-    5: (value: TTagResponse[]) => value.map((item) => item.name).join(', '),
+    },
-    6: (value: string) =>
+    6: (value: string | number) => {
-      value ? (
+      return (
-        <div className="rounded-full bg-[#FFFCAF] px-2 text-center text-[#DBCA6E]">
+        <Button
-          Premium
+          as="a"
-        </div>
+          href={`/lg-admin/contents/update/${value}`}
-      ) : (
+          className="text-md rounded-md"
-        <div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
+          size="sm"
-          Normal
+        >
-        </div>
+          Lihat Detail
-      ),
+        </Button>
-    7: (value: string) => (
+      )
-      <Button
+    },
-        as="a"
-        href={`/lg-admin/contents/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Lihat Detail
-      </Button>
-    ),
   }
   const dataOptions = {
     paging: true,

app/routes/_admin.lg-admin.category.create.tsx

@@ -1,11 +0,0 @@
-import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
-import { CreateCategoryPage } from '~/pages/category-create'
-
-const DashboardContentsLayout = () => {
-  return (
-    <AdminDashboardLayout>
-      <CreateCategoryPage />
-    </AdminDashboardLayout>
-  )
-}
-export default DashboardContentsLayout

app/routes/actions.admin.category.create.ts

@@ -1,67 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { data } from 'react-router'
-import { getValidatedFormData } from 'remix-hook-form'
-import { XiorError } from 'xior'
-
-import { createCategoryRequest } from '~/apis/admin/create-category'
-import { handleCookie } from '~/libs/cookies'
-import {
-  createCategorySchema,
-  type TCategorySchema,
-} from '~/pages/category-create'
-
-import type { Route } from './+types/actions.register'
-
-export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
-  try {
-    const {
-      errors,
-      data: payload,
-      receivedValues: defaultValues,
-    } = await getValidatedFormData<TCategorySchema>(
-      request,
-      zodResolver(createCategorySchema),
-      false,
-    )
-
-    if (errors) {
-      return data({ success: false, errors, defaultValues }, { status: 400 })
-    }
-
-    const { data: categoryData } = await createCategoryRequest({
-      accessToken: staffToken,
-      payload,
-    })
-
-    return data(
-      {
-        success: true,
-        categoryData,
-      },
-      {
-        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/utils/formatter.ts

@@ -3,9 +3,9 @@ export const formatNumberWithPeriods = (number: number) => {
 }
 export const formatDate = (isoDate: string): string => {
   const date = new Date(isoDate)
-  return new Intl.DateTimeFormat('id-ID', {
+  const day = date.getDate().toString().padStart(2, '0')
-    day: '2-digit',
+  const month = (date.getMonth() + 1).toString().padStart(2, '0') // Month is zero-based
-    month: '2-digit',
+  const year = date.getFullYear()
-    year: 'numeric',
+
-  }).format(date)
+  return `${day}/${month}/${year}`
 }

app/utils/render.tsx

@@ -1,13 +1,13 @@
 import type { MouseEventHandler } from 'react'
 import { Link } from 'react-router'
 
-import type { TUserResponse } from '~/apis/news/get-user'
+import type { TUser } from '~/apis/news/get-user'
 
 type TGetPremiumAttribute = {
   isPremium?: boolean
   slug: string
   onClick: MouseEventHandler<HTMLElement>
-  userData?: TUserResponse['data']
+  userData?: TUser['data']
 }
 
 export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {