feat: migrate tag creation and update functionality to new form structure

app/apis/admin/create-category.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TCategorySchema } from '~/pages/dashboard-category-create'
+import type { TCategorySchema } from '~/pages/form-category'
 
 const categoryResponseSchema = z.object({
   data: z.object({
@@ -17,14 +17,9 @@ type TParameters = {
 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,
+      payload,
     )
     return categoryResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/create-news.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TContentSchema } from '~/pages/contents-form'
+import type { TContentSchema } from '~/pages/form-contents'
 
 const newsResponseSchema = z.object({
   data: z.object({

app/apis/admin/create-tags.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TTagSchema } from '~/pages/dashboard-tags-create'
+import type { TTagSchema } from '~/pages/form-tag'
 
 const tagsResponseSchema = z.object({
   data: z.object({

app/apis/admin/update-category.ts

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

app/apis/admin/update-news.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer } from '~/libs/http-server'
-import type { TContentSchema } from '~/pages/contents-form'
+import type { TContentSchema } from '~/pages/form-contents'
 
 const newsResponseSchema = z.object({
   data: z.object({

app/apis/admin/update-tag.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+
+import { HttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/form-tag'
+
+const tagResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  accessToken: string
+  payload: TTagSchema
+}
+
+export const updateTagRequest = async (parameters: TParameters) => {
+  const { accessToken, payload } = parameters
+  try {
+    const { id, ...restPayload } = payload
+    const { data } = await HttpServer({ accessToken }).put(
+      `/api/tag/${id}/update`,
+      restPayload,
+    )
+    return tagResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-categories.ts

@@ -6,6 +6,8 @@ export const categoryResponseSchema = z.object({
   id: z.string(),
   name: z.string(),
   code: z.string(),
+  sequence: z.number().nullable(),
+  description: z.string().nullable(),
 })
 const categoriesResponseSchema = z.object({
   data: z.array(categoryResponseSchema),

app/apis/common/get-news-by-slug.ts

@@ -11,6 +11,8 @@ type TParameters = {
   slug: string
 } & THttpServer
 
+export type TNewDetailResponse = z.infer<typeof dataResponseSchema>
+
 export const getNewsBySlug = async (parameters: TParameters) => {
   const { slug, accessToken } = parameters
   try {

app/components/ui/social-share.tsx

@@ -10,6 +10,7 @@ import { XIcon } from '~/components/icons/x'
 
 type SocialMediaProperties = {
   className?: string
+  slug?: string
 }
 
 const dataSocialMedia = [

app/layouts/news/header-menu.tsx

@@ -7,7 +7,11 @@ import { HeaderSearch } from './header-search'
 
 export const HeaderMenu = () => {
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const menu = loaderData?.categoriesData
+  const menu = loaderData?.categoriesData?.sort((a, b) => {
+    if (a.sequence === null) return 1
+    if (b.sequence === null) return -1
+    return a.sequence - b.sequence
+  })
 
   return (
     <>

app/pages/dashboard-categories/index.tsx

@@ -2,6 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
+import type { TCategoryResponse } from '~/apis/common/get-categories'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -13,26 +14,33 @@ export const CategoriesPage = () => {
   const categoriesData = loaderData?.dataCategories
 
   DataTable.use(DT)
-  const dataTable = categoriesData
+  const dataTable = categoriesData?.sort((a, b) => {
+    if (a.sequence === null) return 1
+    if (b.sequence === null) return -1
+    return a.sequence - b.sequence
+  })
   const dataColumns = [
     {
       title: 'No',
       render: (
         data: unknown,
         type: unknown,
-        row: unknown,
+        row: TCategoryResponse,
         meta: { row: number },
       ) => {
-        return meta.row + 1
+        return `<div>${meta.row + 1}</div> ${
+          row.sequence === null
+            ? ''
+            : `<pre class="text-sm text-[#7C7C7C] inline">Urutan: ${row.sequence}</pre>`
+        }`
       },
     },
     {
-      title: 'Nama',
-      data: 'name',
+      title: 'Kategori',
     },
     {
-      title: 'Kode',
-      data: 'code',
+      title: 'Deskripsi',
+      data: 'description',
     },
     {
       title: 'Action',
@@ -40,6 +48,12 @@ export const CategoriesPage = () => {
     },
   ]
   const dataSlot = {
+    1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
+      <div>
+        <div>{data.name}</div>
+        <pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
+      </div>
+    ),
     3: (value: string) => (
       <Button
         as="a"

app/pages/dashboard-category-create/index.tsx

@@ -1,102 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
-import { useFetcher, useNavigate } 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'
-import { urlFriendlyCode } from '~/utils/formatter'
-
-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 navigate = useNavigate()
-  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
-    }
-    navigate('/lg-admin/categories')
-    setDisabled(true)
-    setError(undefined)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
-    const inputName = name.target.value
-    setName(inputName)
-    setCode(urlFriendlyCode(inputName))
-  }
-
-  return (
-    <div className="relative">
-      <TitleDashboard title="Buat Kategory" />
-      <div>
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            action="/actions/admin/categories/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-category-update/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const UpdateCategoryPage = () => {
-  return <div>UpdateCategoryPage</div>
-}

app/pages/form-category/index.tsx

@@ -0,0 +1,133 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { useFetcher, useNavigate } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import type { TCategoryResponse } from '~/apis/common/get-categories'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { urlFriendlyCode } from '~/utils/formatter'
+
+export const createCategorySchema = z.object({
+  id: z.string().optional(),
+  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  code: z.string(),
+  sequence: z.preprocess(Number, z.number().optional()),
+  description: z.string(),
+})
+export type TCategorySchema = z.infer<typeof createCategorySchema>
+type TProperties = {
+  categoryData?: TCategoryResponse
+}
+
+export const FormCategoryPage = (properties: TProperties) => {
+  const { categoryData } = properties || {}
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TCategorySchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(createCategorySchema),
+    values: {
+      id: categoryData?.id || undefined,
+      code: categoryData?.code || '',
+      name: categoryData?.name || '',
+      sequence: categoryData?.sequence || undefined,
+      description: categoryData?.description || '',
+    },
+  })
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+
+  const { handleSubmit, watch, setValue } = formMethods
+  const watchName = watch('name')
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+    navigate('/lg-admin/categories')
+    setDisabled(true)
+    setError(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  useEffect(() => {
+    setValue('code', urlFriendlyCode(watchName))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchName])
+
+  return (
+    <div className="relative">
+      <TitleDashboard title={`${categoryData ? 'Update' : 'Buat'} Kategori`} />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action={`/actions/admin/categories/${categoryData ? 'update' : '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="Kategori"
+                placeholder="Masukkan Nama Kategori"
+                name="name"
+                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]"
+                containerClassName="flex-1"
+              />
+              <Input
+                id="code"
+                label="Kode"
+                placeholder="Masukkan Kode Kategori"
+                readOnly
+                name="code"
+                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]"
+                containerClassName="flex-1"
+              />
+              <Button
+                disabled={disabled}
+                type="submit"
+                size="lg"
+                className="text-md h-[42px] rounded-md"
+              >
+                Save
+              </Button>
+            </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="sequence"
+                label="Urutan"
+                placeholder="Urutan Kategori"
+                name="sequence"
+                type="number"
+                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]"
+                containerClassName="w-44"
+              />
+              <Input
+                id="description"
+                label="Deskripsi"
+                placeholder="Masukkan Deskripsi Kategori"
+                name="description"
+                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]"
+                containerClassName="flex-1"
+              />
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}

app/pages/form-contents/index.tsx

@@ -60,7 +60,7 @@ type TProperties = {
   newsData?: z.infer<typeof newsResponseSchema>
 }
 
-export const ContentsFormPage = (properties: TProperties) => {
+export const FormContentsPage = (properties: TProperties) => {
   const { newsData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
@@ -75,7 +75,7 @@ export const ContentsFormPage = (properties: TProperties) => {
     fetcher,
     resolver: zodResolver(contentSchema),
     values: {
-      id: newsData?.id || '',
+      id: newsData?.id || undefined,
       categories: newsData?.categories || [],
       tags: newsData?.tags || [],
       title: newsData?.title || '',
@@ -124,16 +124,17 @@ export const ContentsFormPage = (properties: TProperties) => {
               label="Judul"
               placeholder="Masukkan Judul"
               name="title"
-              className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              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]"
               containerClassName="flex-1"
+              disabled={!!newsData}
             />
             <Input
               id="featured_image"
               label="Gambar Unggulan"
               placeholder="Masukkan Gambar Unggulan"
               name="featured_image"
-              className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              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]"
               containerClassName="flex-1"
             />

app/pages/form-tag/index.tsx

@@ -1,34 +1,44 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
-export const createTagsSchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
+export const createTagSchema = z.object({
+  id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
+  code: z.string(),
 })
-export type TTagSchema = z.infer<typeof createTagsSchema>
+export type TTagSchema = z.infer<typeof createTagSchema>
+type TProperties = {
+  tagData?: TTagResponse
+}
 
-export const CreateTagsPage = () => {
+export const FormTagPage = (properties: TProperties) => {
+  const { tagData } = properties || {}
   const fetcher = useFetcher()
   const navigate = useNavigate()
   const formMethods = useRemixForm<TTagSchema>({
     mode: 'onSubmit',
     fetcher,
-    resolver: zodResolver(createTagsSchema),
+    resolver: zodResolver(createTagSchema),
+    values: {
+      id: tagData?.id || undefined,
+      code: tagData?.code || '',
+      name: tagData?.name || '',
+    },
   })
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
-  const [code, setCode] = useState<string>('')
-  const [name, setName] = useState<string>('')
 
-  const { handleSubmit } = formMethods
+  const { handleSubmit, watch, setValue } = formMethods
+  const watchName = watch('name')
 
   useEffect(() => {
     if (!fetcher.data?.success) {
@@ -42,21 +52,20 @@ export const CreateTagsPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
-  const handelCodeAuto = (name: ChangeEvent<HTMLInputElement>) => {
-    const inputName = name.target.value
-    setName(inputName)
-    setCode(urlFriendlyCode(name.target.value))
-  }
+  useEffect(() => {
+    setValue('code', urlFriendlyCode(watchName))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchName])
 
   return (
     <div className="relative">
-      <TitleDashboard title="Buat Tag" />
+      <TitleDashboard title={`${tagData ? 'Update' : 'Buat'} Tag`} />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
             method="post"
             onSubmit={handleSubmit}
-            action="/actions/admin/tags/create"
+            action={`/actions/admin/tags/${tagData ? 'update' : 'create'}`}
             className="space-y-4"
           >
             {error && (
@@ -65,25 +74,22 @@ export const CreateTagsPage = () => {
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"
-                label="Nama Tag"
+                label="Tag"
                 placeholder="Masukkan Nama Tag"
                 name="name"
-                onChange={handelCodeAuto}
-                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                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]"
                 containerClassName="flex-1"
-                value={name}
               />
               <Input
                 id="code"
-                label="Kode Tag"
-                readOnly
+                label="Kode"
                 placeholder="Masukkan Kode Tag"
+                readOnly
                 name="code"
-                className="border-0 bg-gray-100 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                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]"
                 containerClassName="flex-1"
-                value={code}
               />
               <Button
                 disabled={disabled}

app/pages/news-categories/index.tsx

@@ -1,18 +1,17 @@
-import { useLocation, useRouteLoaderData } from 'react-router'
+import { useParams, useRouteLoaderData } from 'react-router'
 
 import { Card } from '~/components/ui/card'
 import { CategorySection } from '~/components/ui/category-section'
-import { DUMMY_DESCRIPTION } from '~/data/contents'
 import type { loader } from '~/routes/_news'
 
 import { BERITA } from './data'
 
 export const NewsCategoriesPage = () => {
-  const { pathname } = useLocation()
-  const code = pathname.split('/')[2]
+  const parameters = useParams()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { name } =
-    loaderData?.categoriesData.find((item) => item.code === code) || {}
+  const { name, description } =
+    loaderData?.categoriesData.find((item) => item.code === parameters.code) ||
+    {}
   const { items } = BERITA
 
   return (
@@ -20,7 +19,7 @@ export const NewsCategoriesPage = () => {
       <Card>
         <CategorySection
           title={name || ''}
-          description={DUMMY_DESCRIPTION}
+          description={description || ''}
           items={items}
         />
       </Card>

app/pages/news-detail/index.tsx

@@ -1,20 +1,28 @@
 import htmlParse from 'html-react-parser'
+import { useRouteLoaderData } from 'react-router'
 
-import { Breadcrumb } from '~/components/ui/breadcrumb'
+import type { TTagResponse } from '~/apis/common/get-tags'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
 import { BERITA } from '~/data/contents'
-
-import { CONTENT } from './data'
+import type { loader } from '~/routes/_news.detail.$slug'
+import { formatDate } from '~/utils/formatter'
 
 export const NewsDetailPage = () => {
-  const { title, content, featured, slug, author, date, tags } = CONTENT
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_news.detail.$slug',
+  )
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { newsDetailData }: any = loaderData
+  const { title, content, featured_image, slug, author, live_at, tags } =
+    newsDetailData
+
   return (
     <div className="sm-max:mx-5 relative">
       <Card>
         <div className="py-5 sm:px-30">
-          <Breadcrumb slug={slug} />
           <h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
             {title}
           </h2>
@@ -28,10 +36,8 @@ export const NewsDetailPage = () => {
                 className="h-12 w-12 rounded-full"
               />
               <div>
-                <h4 className="text-md">{author}</h4>
-                <p className="text-sm">
-                  {date.toJSON().slice(0, 10)} . 5 min read{' '}
-                </p>
+                <h4 className="text-md">{author.name}</h4>
+                <p className="text-sm">{formatDate(live_at)} . 5 min read </p>
               </div>
             </div>
             <IconsSocial className="flex-row" />
@@ -39,7 +45,7 @@ export const NewsDetailPage = () => {
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
             <img
-              src={featured}
+              src={featured_image}
               alt={title}
               className="w-full object-cover object-center sm:h-[600px]"
             />
@@ -53,15 +59,18 @@ export const NewsDetailPage = () => {
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">
               <p className="mb-2">Share this post</p>
-              <IconsSocial className="a" />
+              <IconsSocial
+                className="a"
+                slug={slug}
+              />
             </div>
             <div className="flex flex-wrap items-end gap-2">
-              {tags?.map((tag) => (
+              {tags?.map((tag: TTagResponse) => (
                 <span
-                  key={tag}
+                  key={tag.id}
                   className="rounded bg-gray-300 p-1"
                 >
-                  {tag}
+                  {tag.name}
                 </span>
               ))}
             </div>

app/routes/_admin.lg-admin._dashboard.categories.create.tsx

@@ -1,4 +1,4 @@
-import { CreateCategoryPage } from '~/pages/dashboard-category-create'
+import { FormCategoryPage } from '~/pages/form-category'
 
-const DashboardCategoriesCreateLayout = () => <CreateCategoryPage />
+const DashboardCategoriesCreateLayout = () => <FormCategoryPage />
 export default DashboardCategoriesCreateLayout

app/routes/_admin.lg-admin._dashboard.categories.update.$id.tsx

@@ -0,0 +1,24 @@
+import { getCategories } from '~/apis/common/get-categories'
+import { handleCookie } from '~/libs/cookies'
+import { FormCategoryPage } from '~/pages/form-category'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.categories.update.$id'
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: categoriesData } = await getCategories({
+    accessToken: staffToken,
+  })
+  const categoryData = categoriesData.find(
+    (category) => category.id === params.id,
+  )
+  return { categoryData }
+}
+
+const DashboardCategoriesUpdateLayout = ({
+  loaderData,
+}: Route.ComponentProps) => {
+  const categoryData = loaderData.categoryData
+  return <FormCategoryPage categoryData={categoryData} />
+}
+export default DashboardCategoriesUpdateLayout

app/routes/_admin.lg-admin._dashboard.categories.update.$slug.tsx

@@ -1,4 +0,0 @@
-import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
-
-const DashboardCategoriesUpdateLayout = () => <UpdateCategoryPage />
-export default DashboardCategoriesUpdateLayout

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

@@ -1,4 +1,4 @@
-import { ContentsFormPage } from '~/pages/contents-form'
+import { FormContentsPage } from '~/pages/form-contents'
 
-const DashboardContentCreateLayout = () => <ContentsFormPage />
+const DashboardContentCreateLayout = () => <FormContentsPage />
 export default DashboardContentCreateLayout

app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx

@@ -1,20 +1,20 @@
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
 import { handleCookie } from '~/libs/cookies'
-import { ContentsFormPage } from '~/pages/contents-form'
+import { FormContentsPage } from '~/pages/form-contents'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
 
-export const loader = async ({ request }: Route.LoaderArgs) => {
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { staffToken } = await handleCookie(request)
   const { data: newsData } = await getNewsBySlug({
     accessToken: staffToken,
-    slug: request.url.split('/').pop() ?? '',
+    slug: params.slug,
   })
   return { newsData }
 }
 
 const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
   const newsData = loaderData.newsData
-  return <ContentsFormPage newsData={newsData} />
+  return <FormContentsPage newsData={newsData} />
 }
 export default DashboardContentUpdateLayout

app/routes/_admin.lg-admin._dashboard.tags.create.tsx

@@ -1,4 +1,4 @@
-import { CreateTagsPage } from '~/pages/dashboard-tags-create'
+import { FormTagPage } from '~/pages/form-tag'
 
-const DashboardTagsCreateLayout = () => <CreateTagsPage />
+const DashboardTagsCreateLayout = () => <FormTagPage />
 export default DashboardTagsCreateLayout

app/routes/_admin.lg-admin._dashboard.tags.update.$id.tsx

@@ -0,0 +1,20 @@
+import { getTags } from '~/apis/common/get-tags'
+import { handleCookie } from '~/libs/cookies'
+import { FormTagPage } from '~/pages/form-tag'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.tags.update.$id'
+
+export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: tagsData } = await getTags({
+    accessToken: staffToken,
+  })
+  const tagData = tagsData.find((tag) => tag.id === params.id)
+  return { tagData }
+}
+
+const DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
+  const tagData = loaderData.tagData
+  return <FormTagPage tagData={tagData} />
+}
+export default DashboardTagUpdateLayout

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

@@ -1,5 +1,34 @@
+import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
+import { getUser } from '~/apis/news/get-user'
+import { handleCookie } from '~/libs/cookies'
 import { NewsDetailPage } from '~/pages/news-detail'
 
+import type { Route } from './+types/_news.detail.$slug'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { userToken } = await handleCookie(request)
+  let userData
+  if (userToken) {
+    const { data } = await getUser({
+      accessToken: userToken,
+    })
+    userData = data
+  }
+  // TODO need handel if user not accses non premium data
+  const { data: newsDetailData } = await getNewsBySlug({
+    slug: request.url.split('/').pop() ?? '',
+    accessToken: userToken,
+  })
+
+  // const { data: categoriesData } = await getCategories()
+
+  return {
+    newsDetailData,
+    userData,
+    // categoriesData,
+  }
+}
+
 const NewsDetailLayout = () => <NewsDetailPage />
 
 export default NewsDetailLayout

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

@@ -8,7 +8,7 @@ import { handleCookie } from '~/libs/cookies'
 import {
   createCategorySchema,
   type TCategorySchema,
-} from '~/pages/dashboard-category-create'
+} from '~/pages/form-category'
 
 import type { Route } from './+types/actions.register'
 

app/routes/actions.admin.categories.update.ts

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateCategoryRequest } from '~/apis/admin/update-category'
+import { handleCookie } from '~/libs/cookies'
+import {
+  createCategorySchema,
+  type TCategorySchema,
+} from '~/pages/form-category'
+
+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 updateCategoryRequest({
+      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/routes/actions.admin.contents.create.ts

@@ -5,7 +5,7 @@ import { XiorError } from 'xior'
 
 import { createNewsRequest } from '~/apis/admin/create-news'
 import { handleCookie } from '~/libs/cookies'
-import { contentSchema, type TContentSchema } from '~/pages/contents-form'
+import { contentSchema, type TContentSchema } from '~/pages/form-contents'
 
 import type { Route } from './+types/actions.register'
 

app/routes/actions.admin.contents.update.ts

@@ -5,7 +5,7 @@ import { XiorError } from 'xior'
 
 import { updateNewsRequest } from '~/apis/admin/update-news'
 import { handleCookie } from '~/libs/cookies'
-import { contentSchema, type TContentSchema } from '~/pages/contents-form'
+import { contentSchema, type TContentSchema } from '~/pages/form-contents'
 
 import type { Route } from './+types/actions.register'
 

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

@@ -5,10 +5,7 @@ import { XiorError } from 'xior'
 
 import { createTagsRequest } from '~/apis/admin/create-tags'
 import { handleCookie } from '~/libs/cookies'
-import {
-  createTagsSchema,
-  type TTagSchema,
-} from '~/pages/dashboard-tags-create'
+import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
 
 import type { Route } from './+types/actions.register'
 
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagsSchema),
+      zodResolver(createTagSchema),
       false,
     )
 

app/routes/actions.admin.tags.update.ts

@@ -0,0 +1,64 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateTagRequest } from '~/apis/admin/update-tag'
+import { handleCookie } from '~/libs/cookies'
+import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+
+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<TTagSchema>(
+      request,
+      zodResolver(createTagSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: tagData } = await updateTagRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        tagData,
+      },
+      {
+        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 },
+    )
+  }
+}