fix: handle nullable ads data and ensure safe filtering in advertisements

* commit '9c9d127dfb1a8e3633f803f527c27bbfc6346b4d':
  feat: add delete functionality for news articles with confirmation dialog

.env.example

@@ -0,0 +1,2 @@
+VITE_API_URL=YOUR_API_URL
+VITE_SALT_KEY=YOUR_SALT_KEY

.gitignore

@@ -1,5 +1,8 @@
 .DS_Store
 /node_modules/
+.vscode/cspell.json
+.vscode/.cspell/
+.env
 
 # React Router
 /.react-router/

.vscode/settings.json

@@ -25,7 +25,8 @@
     "labelClassName",
     "buttonClassName",
     "leftNodeClassName",
-    "rightNodeClassName"
-  ],
-  "cSpell.words": []
+    "rightNodeClassName",
+    "buttonVariants",
+    "cva"
+  ]
 }

Dockerfile

@@ -1,22 +1,26 @@
-FROM node:20-alpine AS development-dependencies-env
+FROM node:22.13.1-alpine AS development-dependencies-env
+RUN npm install -g pnpm@9.15.4
 COPY . /app
 WORKDIR /app
-RUN npm ci
+RUN pnpm install
 
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
+FROM node:22.13.1-alpine AS production-dependencies-env
+RUN npm install -g pnpm@9.15.4
+COPY ./package.json pnpm-lock.yaml /app/
 WORKDIR /app
-RUN npm ci --omit=dev
+RUN pnpm install --prod
 
-FROM node:20-alpine AS build-env
+FROM node:22.13.1-alpine AS build-env
+RUN npm install -g pnpm@9.15.4
 COPY . /app/
 COPY --from=development-dependencies-env /app/node_modules /app/node_modules
 WORKDIR /app
-RUN npm run build
+RUN pnpm build
 
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
+FROM node:22.13.1-alpine
+RUN npm install -g pnpm@9.15.4
+COPY ./package.json pnpm-lock.yaml /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
-CMD ["npm", "run", "start"]
+CMD ["pnpm", "start"]

README.md

@@ -1,27 +1,35 @@
-# Welcome to React Router!
-
-A modern, production-ready template for building full-stack React applications using React Router.
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
-
-## Features
-
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
-
 ## Getting Started
 
+### Prerequisite
+
+This project requires:
+
+- Node.js version 22.13.1
+- pnpm version 9.15.4
+
+To install Node.js, visit [nodejs.org](https://nodejs.org/)
+
+To install pnpm, run:
+
+```bash
+npm install -g pnpm@9.15.4
+```
+
+### Setup Environtment
+
+You'll need to set the following environment variables to connect to your backend:
+
+```bash
+VITE_API_URL: The domain or IP address of your backend server (e.g., http://localhost:3000, http://127.0.0.1:8080, or the actual backend server URL).
+VITE_SALT_KEY: The salt key that used for hashing the secret variable.
+```
+
 ### Installation
 
 Install the dependencies:
 
 ```bash
-npm install
+pnpm install
 ```
 
 ### Development
@@ -29,7 +37,7 @@ npm install
 Start the development server with HMR:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Your application will be available at `http://localhost:5173`.
@@ -39,31 +47,19 @@ Your application will be available at `http://localhost:5173`.
 Create a production build:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 ## Deployment
 
 ### Docker Deployment
 
-This template includes three Dockerfiles optimized for different package managers:
-
-- `Dockerfile` - for npm
-- `Dockerfile.pnpm` - for pnpm
-- `Dockerfile.bun` - for bun
-
 To build and run using Docker:
 
 ```bash
-# For npm
+# Build the docker
 docker build -t my-app .
 
-# For pnpm
-docker build -f Dockerfile.pnpm -t my-app .
-
-# For bun
-docker build -f Dockerfile.bun -t my-app .
-
 # Run the container
 docker run -p 3000:3000 my-app
 ```
@@ -81,7 +77,7 @@ The containerized application can be deployed to any platform that supports Dock
 
 If you're familiar with deploying Node applications, the built-in app server is production-ready.
 
-Make sure to deploy the output of `npm run build`
+Make sure to deploy the output of `pnpm build`
 
 ```
 ├── package.json

app/apis/admin/create-ads.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+import { datePayload } from '~/utils/formatter'
+
+const advertisementsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TAdsSchema
+} & THttpServer
+
+export const createAdsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const transformedPayload = {
+    ...payload,
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/ads/create',
+      transformedPayload,
+    )
+    return advertisementsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/create-category.ts

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

app/apis/admin/create-news.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TContentSchema } from '~/pages/form-contents'
+import { datePayload } from '~/utils/formatter'
+
+const newsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  payload: TContentSchema
+} & THttpServer
+
+export const createNewsRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  const { categories, tags, live_at, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    categories: categories.map((category) => category?.id),
+    tags: tags?.map((tag) => tag?.id) || [],
+    live_at: datePayload(live_at),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/news/create',
+      transformedPayload,
+    )
+    return newsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/create-staffs.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TStaffSchema } from '~/pages/form-staff'
+
+const createStaffResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  payload: TStaffSchema
+} & THttpServer
+
+export const createStaffsRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/staff/register',
+      payload,
+    )
+    return createStaffResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/create-subscribe-plan.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TSubscribePlanSchema
+} & THttpServer
+
+export const createSubscribePlanRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const transformedPayload = {
+      ...payload,
+      status: Number(payload.status),
+    }
+    const { data } = await HttpServer(restParameters).post(
+      '/api/subscribe-plan/create',
+      transformedPayload,
+    )
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/create-tags.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/form-tag'
+
+const tagsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TTagSchema
+} & THttpServer
+
+export const createTagsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/tag/create',
+      payload,
+    )
+    return tagsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-ads.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+
+const deleteAdsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TAdsSchema['id']
+} & THttpServer
+
+export const deleteAdsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/ads/${id}/delete`,
+    )
+    return deleteAdsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-categories.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TCategorySchema } from '~/pages/form-category'
+
+const deleteCategoriesResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TCategorySchema['id']
+} & THttpServer
+
+export const deleteCategoriesRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/category/${id}/delete`,
+    )
+    return deleteCategoriesResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-contents.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TContentSchema } from '~/pages/form-contents'
+
+const deleteContentsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TContentSchema['id']
+} & THttpServer
+
+export const deleteContentsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/news/${id}/delete`,
+    )
+
+    return deleteContentsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-subscribe-plan.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TSubscribePlanSchema['id']
+} & THttpServer
+
+export const deleteSubscribePlanRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/subscribe-plan/${id}/delete`,
+    )
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-tags.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/form-tag'
+
+const deleteTagsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TTagSchema['id']
+} & THttpServer
+
+export const deleteTagsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/tag/${id}/delete`,
+    )
+    return deleteTagsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/get-news-by-id.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+import { newsResponseSchema } from '~/apis/common/get-news'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const dataResponseSchema = z.object({
+  data: z.object(newsResponseSchema.shape),
+})
+
+type TParameters = {
+  id: string
+} & THttpServer
+
+export const getNewsById = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).get(
+      `/api/staff/news/${encodeURIComponent(id)}`,
+    )
+    return dataResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/get-profile.ts

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

app/apis/admin/get-staffs.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const staffResponseSchema = z.object({
+  id: z.string(),
+  email: z.string(),
+  name: z.string(),
+  profile_picture: z.string(),
+})
+const staffsResponseSchema = z.object({
+  data: z.array(staffResponseSchema),
+})
+
+export type TStaffResponse = z.infer<typeof staffResponseSchema>
+
+export const getStaffs = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/staff/get-all`)
+    return staffsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/get-users.ts

@@ -0,0 +1,40 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscribePlanResponseSchema = z.object({
+  id: z.string(),
+  code: z.string(),
+  name: z.string(),
+})
+const subscribeResponseSchema = z.object({
+  id: z.string(),
+  subscribe_plan_id: z.string(),
+  start_date: z.string(),
+  end_date: z.string().nullable(),
+  status: z.number(),
+  auto_renew: z.boolean(),
+  subscribe_plan: subscribePlanResponseSchema,
+})
+const userResponseSchema = z.object({
+  id: z.string(),
+  email: z.string().email(),
+  phone: z.string(),
+  subscribe: subscribeResponseSchema,
+  created_at: z.string(),
+})
+const usersResponseSchema = z.object({
+  data: z.array(userResponseSchema),
+})
+
+export type TUserResponse = z.infer<typeof userResponseSchema>
+
+export const getUsers = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/staff/users`)
+    return usersResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/login-staff.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+import { HttpServer } from '~/libs/http-server'
+import type { TLoginSchema } from '~/pages/staff-login'
+
+const loginResponseSchema = z.object({
+  data: z.object({
+    token: z.string(),
+  }),
+})
+
+export const staffLoginRequest = async (payload: TLoginSchema) => {
+  try {
+    const { data } = await HttpServer().post('/api/staff/login', payload)
+    return loginResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-ads.ts

@@ -0,0 +1,35 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+import { datePayload } from '~/utils/formatter'
+
+const advertisementsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TAdsSchema
+} & THttpServer
+
+export const updateAdsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      `/api/ads/${id}/update`,
+      transformedPayload,
+    )
+    return advertisementsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-category.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TCategorySchema } from '~/pages/form-category'
+
+const categoryResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TCategorySchema
+} & THttpServer
+
+export const updateCategoryRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  try {
+    const { data } = await HttpServer(restParameters).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

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TContentSchema } from '~/pages/form-contents'
+import { datePayload } from '~/utils/formatter'
+
+const newsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  payload: TContentSchema
+} & THttpServer
+
+export const updateNewsRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  const { categories, tags, id, live_at, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    categories: categories.map((category) => category?.id),
+    tags: tags?.map((tag) => tag?.id) || [],
+    live_at: datePayload(live_at),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      `/api/news/${id}/update`,
+      transformedPayload,
+    )
+    return newsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-profile.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import type { TProfileSchema } from '~/layouts/admin/dialog-profile'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const updateProfileResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  payload: TProfileSchema
+} & THttpServer
+
+export const updateProfileRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      '/api/staff/update',
+      payload,
+    )
+    return updateProfileResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-subscribe-plan.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TSubscribePlanSchema
+} & THttpServer
+
+export const updateSubscribePlanRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  try {
+    const transformedPayload = {
+      ...restPayload,
+      status: Number(payload.status),
+    }
+    const { data } = await HttpServer(restParameters).put(
+      `/api/subscribe-plan/${id}/update`,
+      transformedPayload,
+    )
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-subscribe.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TSubscribeSchema = Pick<TSubscribePlanSchema, 'id'>
+type TParameters = {
+  payload: { subscribe_plan: TSubscribeSchema }
+} & THttpServer
+
+export const updateSubscribeRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id } = payload.subscribe_plan
+  try {
+    const transformedPayload = {
+      status: 1,
+      subscribe_plan_id: id,
+    }
+    const { data } = await HttpServer(restParameters).patch(
+      `/api/subscribe/update`,
+      transformedPayload,
+    )
+    console.log(data) // eslint-disable-line no-console
+
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-tag.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TTagSchema } from '~/pages/form-tag'
+
+const tagResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TTagSchema
+} & THttpServer
+
+export const updateTagRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  try {
+    const { data } = await HttpServer(restParameters).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/admin/upload-file.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod'
+
+import type { TUploadSchema } from '~/layouts/admin/dialog-upload'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const uploadResponseSchema = z.object({
+  data: z.object({
+    message: z.string(),
+    data: z.object({
+      file_path: z.string(),
+      file_url: z.string(),
+    }),
+  }),
+})
+
+type TParameter = {
+  payload: TUploadSchema & {
+    file: File
+  }
+} & THttpServer
+
+export const uploadFileRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  const formdata = new FormData()
+  formdata.append('file', payload.file)
+
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/file',
+      formdata,
+    )
+    return uploadResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-ads.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const adResponseSchema = z.object({
+  id: z.string(),
+  image_url: z.string(),
+  url: z.string(),
+  start_date: z.string(),
+  end_date: z.string(),
+  clicked: z.number(),
+})
+const adsResponseSchema = z.object({
+  data: z.array(adResponseSchema).nullable(),
+})
+
+export type TAdResponse = z.infer<typeof adResponseSchema>
+
+export const getAds = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/ads`)
+    return adsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-categories.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+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),
+})
+
+export type TCategoryResponse = z.infer<typeof categoryResponseSchema>
+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)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-news.ts

@@ -0,0 +1,66 @@
+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({
+  id: z.string(),
+  name: z.string(),
+  profile_picture: z.string(),
+})
+export const newsResponseSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  content: z.string(),
+  categories: z.array(categoryResponseSchema),
+  tags: z.array(tagResponseSchema),
+  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,
+})
+const dataResponseSchema = z.object({
+  data: z.array(
+    newsResponseSchema.extend({
+      views: z.number(),
+    }),
+  ),
+})
+
+export type TNewsResponse = z.infer<typeof newsResponseSchema>
+export type TNewsResponseData = z.infer<typeof dataResponseSchema>
+export type TAuthorResponse = z.infer<typeof authorSchema>
+type TParameters = {
+  categories?: string[]
+  tags?: string[]
+  active?: boolean
+  limit?: number
+  page?: number
+  query?: string
+} & THttpServer
+
+export const getNews = async (parameters?: TParameters) => {
+  const { categories, tags, active, limit, page, query, ...restParameters } =
+    parameters || {}
+  try {
+    const { data } = await HttpServer(restParameters).get(`/api/news`, {
+      params: {
+        ...(categories && { categories: categories.join('+') }),
+        ...(tags && { tags: tags.join('+') }),
+        ...(active && { active }),
+        ...(limit && { limit }),
+        ...(page && { page }),
+        ...(query && { q: query }),
+      },
+    })
+    return dataResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-subscribe-plan.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscribePlanSchema = z.object({
+  id: z.string(),
+  code: z.string(),
+  name: z.string(),
+  length: z.number(),
+  price: z.number(),
+  status: z.number(),
+})
+
+const subscribePlanResponseSchema = z.object({
+  data: z.array(subscribePlanSchema),
+})
+
+export type TSubscribePlanResponse = z.infer<typeof subscribePlanSchema>
+
+export const getSubscribePlan = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-tags.ts

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

app/apis/news/create-log-ads.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+
+const logAdsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+type TParameters = {
+  id: TAdsSchema['id']
+} & THttpServer
+
+export const createLogAdsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  const payload = {
+    ads_id: id,
+  }
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/logs/ads',
+      payload,
+    )
+    return logAdsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

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

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+import { newsResponseSchema } from '~/apis/common/get-news'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const dataResponseSchema = z.object({
+  data: z.object(newsResponseSchema.shape),
+})
+
+type TParameters = {
+  slug: string
+} & THttpServer
+
+export const getNewsBySlug = async (parameters: TParameters) => {
+  const { slug, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).get(
+      `/api/news/${encodeURIComponent(slug)}`,
+    )
+    return dataResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/get-user.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const userResponseSchema = z.object({
+  data: z.object({
+    id: z.string(),
+    email: z.string(),
+    phone: z.string(),
+    subscribe: z.object({
+      id: z.string(),
+      subscribe_plan_id: z.string(),
+      start_date: z.string(),
+      end_date: z.string().nullable(),
+      status: z.number(),
+      auto_renew: z.boolean(),
+      subscribe_plan: z.object({
+        id: z.string(),
+        name: z.string(),
+        code: z.string(),
+      }),
+    }),
+  }),
+})
+
+export type TUserResponse = z.infer<typeof userResponseSchema>
+
+export const getUser = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/user/profile`)
+    return userResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/login-user.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+import { type TLoginSchema } from '~/layouts/news/dialog-login'
+import { HttpServer } from '~/libs/http-server'
+
+export const loginResponseSchema = z.object({
+  data: z.object({
+    token: z.string(),
+  }),
+})
+
+export const userLoginRequest = async (payload: TLoginSchema) => {
+  try {
+    const { data } = await HttpServer().post('/api/user/login', payload)
+    return loginResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/register-user.ts

@@ -0,0 +1,22 @@
+import type { TRegisterSchema } from '~/layouts/news/dialog-register'
+import { HttpServer } from '~/libs/http-server'
+
+import { loginResponseSchema } from './login-user'
+
+export const userRegisterRequest = async (payload: TRegisterSchema) => {
+  const { subscribe_plan, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    subscribe_plan_id: subscribe_plan.id,
+  }
+  try {
+    const { data } = await HttpServer().post(
+      '/api/user/register',
+      transformedPayload,
+    )
+    return loginResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/app.css

@@ -1,10 +1,79 @@
+@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';
+  --font-admin: 'Poppins', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 html,
 body {
 }
+
+.ProseMirror-focused {
+  @apply outline-none;
+}
+
+.ProseMirror-trailingBreak {
+  @apply hidden;
+}
+
+table.dataTable thead > tr {
+  border-bottom: 2px solid #c2c2c2;
+}
+
+table.dataTable tbody > tr > td {
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid #ebebeb;
+}
+
+nav[aria-label='pagination'] {
+  display: flex;
+  justify-content: center;
+}
+/* Style untuk tombol aktif (current) */
+.dt-paging-button.current {
+  background-color: #2e2f7c !important;
+  color: white !important;
+}
+
+/* Style tombol aktif, kecuali jika disabled */
+div.dt-container .dt-paging .dt-paging-button.current:not(.disabled),
+div.dt-container .dt-paging .dt-paging-button.current:not(.disabled):hover {
+  color: white !important;
+  background-color: #2e2f7c !important;
+  min-width: 24px;
+  padding: 3px 6px;
+}
+
+/* Style tombol disabled */
+div.dt-container .dt-paging .dt-paging-button.disabled {
+  background-color: transparent !important;
+  color: #ccc !important;
+  cursor: not-allowed;
+  pointer-events: none; /* Agar tidak bisa diklik */
+}
+
+/* Menghindari hover effect untuk tombol yang disabled */
+div.dt-container .dt-paging .dt-paging-button:not(.disabled):hover {
+  background-color: #2e2f7c !important;
+  color: white !important;
+}
+
+/* Style default tombol */
+div.dt-container .dt-paging .dt-paging-button {
+  min-width: 24px;
+  padding: 3px 6px;
+  background-color: transparent !important;
+  color: #2e2f7c !important;
+}

app/components/dialog/delete.tsx

@@ -0,0 +1,85 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import { useEffect, type PropsWithChildren } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+
+type TProperties = PropsWithChildren & {
+  selectedId?: string
+  close: () => void
+  title: string
+  fetcherAction: string
+}
+
+export const DialogDelete = (properties: TProperties) => {
+  const { selectedId, close, children, title, fetcherAction } = properties || {}
+  const fetcher = useFetcher()
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      close()
+      toast.success(`${title} berhasil dihapus!`)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <Dialog
+      open={!!selectedId}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          close()
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          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"
+        >
+          <DialogTitle className="relative text-xl font-bold">
+            <span>Anda akan menghapus</span>{' '}
+            <span className="lowercase">{title}</span> <span>berikut?</span>
+          </DialogTitle>
+          <Description className="space-y-1 text-center text-[#565658]">
+            {children}
+          </Description>
+          <div className="flex justify-end">
+            <fetcher.Form
+              method="POST"
+              action={fetcherAction}
+              className="grid"
+            >
+              <Button
+                type="submit"
+                variant="danger"
+                className="text-md h-[42px] rounded-md"
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+              >
+                Hapus
+              </Button>
+            </fetcher.Form>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/components/dialog/news.tsx

@@ -0,0 +1,68 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import type { ReactNode } from 'react'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/configs/meta'
+
+type ModalProperties = {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+  description?: string
+}
+
+export const DialogNews = ({
+  isOpen,
+  onClose,
+  children,
+  description,
+}: ModalProperties) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          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"
+        >
+          <DialogTitle className="relative flex justify-center">
+            <button
+              onClick={onClose}
+              className="absolute top-0 left-0 items-center sm:hidden"
+            >
+              <LeftArrow
+                width={50}
+                height={50}
+              />
+            </button>
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </DialogTitle>
+          {description && (
+            <Description className="text-center text-[#565658]">
+              {description}
+            </Description>
+          )}
+          <div className="relative">{children}</div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/components/dialog/success.tsx

@@ -0,0 +1,142 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import type { ReactNode } from 'react'
+import { Link, useRouteLoaderData } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { Button } from '~/components/ui/button'
+import { APP } from '~/configs/meta'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export type ModalProperties = {
+  onClose: () => void
+  children?: ReactNode
+  isOpen?: 'error' | 'warning' | 'resetPassword' | 'register' | 'payment'
+}
+
+type DescriptionMap = {
+  [key in Exclude<ModalProperties['isOpen'], undefined>]: string
+}
+
+const DESCRIPTIONS: DescriptionMap = {
+  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.',
+}
+
+export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
+  const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { userData } = loaderData || {}
+
+  const message = isOpen
+    ? DESCRIPTIONS[isOpen]
+    : 'Terjadi kesalahan. Silakan coba lagi.'
+
+  return (
+    <Dialog
+      open={!!isOpen}
+      onClose={onClose}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <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}
+              className="absolute top-0 left-0 items-center sm:hidden"
+            >
+              <LeftArrow
+                width={50}
+                height={50}
+              />
+            </button>
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </DialogTitle>
+
+          <Description className="text-center text-[#565658]">
+            {message}
+          </Description>
+
+          <div className="relative">
+            <div className="relative flex flex-col items-center justify-center">
+              {['resetPassword', 'register', 'payment'].includes(
+                isOpen || '',
+              ) && (
+                <>
+                  <img
+                    src={'/images/back-to-home.svg'}
+                    alt={APP.title}
+                    className="h-[300px]"
+                  />
+                  <Button
+                    className="mt-5 w-full rounded-md"
+                    variant="primary"
+                    as={Link}
+                    to="/"
+                    onClick={onClose}
+                  >
+                    Back to Home
+                  </Button>
+                </>
+              )}
+              {isOpen === 'warning' && (
+                <>
+                  <img
+                    src={'/images/warning.svg'}
+                    alt={APP.title}
+                    className="h-[300px]"
+                  />
+                  {userData ? (
+                    <Button
+                      className="mt-5 w-full rounded-md"
+                      variant="outline"
+                      onClick={() => {
+                        onClose()
+                        setIsSubscribeOpen(true)
+                      }}
+                    >
+                      Pilih Paken Berlangganan
+                    </Button>
+                  ) : (
+                    <Button
+                      className="mt-5 w-full rounded-md"
+                      variant="primary"
+                      onClick={() => {
+                        onClose()
+                        setIsLoginOpen(true)
+                      }}
+                    >
+                      Login
+                    </Button>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/components/error/await.tsx

@@ -0,0 +1,10 @@
+import { useAsyncError } from 'react-router'
+
+export const ErrorAwait = () => {
+  const error = useAsyncError()
+  return (
+    <p>
+      {error instanceof Error ? error.message : 'An unexpected error occurred.'}
+    </p>
+  )
+}

app/components/icons/close.tsx

@@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const CloseIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox="0 0 40 40"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 23.537l8.838 8.838a2.5 2.5 0 003.537-3.537L23.533 20l8.84-8.838a2.498 2.498 0 000-3.536 2.5 2.5 0 00-3.536 0L20 16.466l-8.838-8.838a2.5 2.5 0 10-3.537 3.533L16.467 20l-8.84 8.84a2.5 2.5 0 103.536 3.533L20 23.537z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/eye.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const EyeIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={28}
+      height={20}
+      viewBox="0 0 28 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M14 .676C3.823.676.764 9.49.736 9.58L.595 10l.14.422c.03.09 3.088 8.903 13.265 8.903s13.236-8.814 13.264-8.903l.141-.421-.14-.42C27.236 9.49 24.177.675 14 .675zm0 14.652A5.336 5.336 0 018.667 10 5.336 5.336 0 0114 4.672 5.336 5.336 0 0119.333 10 5.336 5.336 0 0114 15.328z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/image-skeleton.tsx

@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const ImageSkeletonIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+      {...properties}
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+    </svg>
+  )
+}

app/components/icons/left-arrow.tsx

@@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const LeftArrow = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 70 70"
+      fill="currentColor"
+      {...properties}
+    >
+      <path
+        d="M1.60494 17.938C1.05815 18.4849 0.750977 19.2266 0.750977 20C0.750977 20.7734 1.05815 21.5152 1.60494 22.0621L18.1045 38.5617C18.6546 39.093 19.3914 39.387 20.1561 39.3803C20.9208 39.3737 21.6524 39.0669 22.1932 38.5262C22.7339 37.9854 23.0407 37.2539 23.0473 36.4891C23.054 35.7244 22.76 34.9876 22.2287 34.4375L10.7079 22.9167H49.3333C50.1068 22.9167 50.8487 22.6094 51.3957 22.0624C51.9426 21.5154 52.2499 20.7736 52.2499 20C52.2499 19.2265 51.9426 18.4846 51.3957 17.9376C50.8487 17.3907 50.1068 17.0834 49.3333 17.0834H10.7079L22.2287 5.56254C22.76 5.01245 23.054 4.27569 23.0473 3.51095C23.0407 2.74621 22.7339 2.01467 22.1932 1.4739C21.6524 0.933127 20.9208 0.626385 20.1561 0.619739C19.3914 0.613094 18.6546 0.907077 18.1045 1.43837L1.60494 17.938Z"
+        fill="#2E2F7C"
+      />
+    </svg>
+  )
+}

app/components/icons/menu.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const MenuIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={38}
+      height={26}
+      viewBox="0 0 38 26"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M2.333 25.5c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.59.199-1.084.6-1.484.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.895.598 1.484-.001.589-.201 1.084-.6 1.485-.399.401-.893.6-1.483.598H2.333zm0-10.417c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.589.199-1.083.6-1.483.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.589-.201 1.084-.6 1.485-.399.402-.893.601-1.483.598H2.333zm0-10.416c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.895-.6-1.484C.249 1.994.449 1.5.85 1.1c.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.59-.201 1.084-.6 1.486-.399.401-.893.6-1.483.598H2.333z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/text-editor/editor-button.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@headlessui/react'
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type TProperties = {
+  children: ReactNode
+  onClick: MouseEventHandler
+  disabled?: boolean
+  isActive?: boolean
+  className?: string
+  title: string
+  style?: CSSProperties
+}
+
+export const EditorButton = (properties: TProperties) => {
+  const { children, onClick, disabled, className, isActive, title, style } =
+    properties
+
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={twMerge(
+        'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 text-black hover:bg-[#2E2F7C] hover:text-white active:bg-[#2E2F7C]/50 disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50',
+        isActive ? 'bg-[#2E2F7C]/10' : '',
+        className,
+      )}
+      style={style}
+      title={title}
+    >
+      {children}
+    </Button>
+  )
+}

app/components/text-editor/editor-menubar.tsx

@@ -0,0 +1,424 @@
+import { Input } from '@headlessui/react'
+import {
+  ArrowUturnLeftIcon,
+  ArrowUturnRightIcon,
+  Bars3BottomLeftIcon,
+  Bars3BottomRightIcon,
+  Bars3Icon,
+  BoldIcon,
+  CloudArrowUpIcon,
+  CodeBracketIcon,
+  DocumentTextIcon,
+  H1Icon,
+  H2Icon,
+  H3Icon,
+  ItalicIcon,
+  LinkIcon,
+  LinkSlashIcon,
+  ListBulletIcon,
+  NumberedListIcon,
+  PhotoIcon,
+  StrikethroughIcon,
+  SwatchIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/solid'
+import {
+  Bars3BottomCenterIcon,
+  QuotationMarkIcon,
+} from '@sidekickicons/react/24/solid'
+import type { Editor } from '@tiptap/react'
+import {
+  type SetStateAction,
+  type Dispatch,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react'
+import { HexColorInput, HexColorPicker } from 'react-colorful'
+
+import { Button } from '~/components/ui/button'
+import { useAdminContext } from '~/contexts/admin'
+import { useClickOutside } from '~/hooks/use-click-outside'
+import { isHexCompatible, rgbToHex } from '~/utils/color'
+
+import { EditorButton } from './editor-button'
+
+type TProperties = {
+  editor: Editor | null
+  setIsPlainHTML: Dispatch<SetStateAction<boolean>>
+  category: string
+  disabled?: boolean
+}
+
+export const EditorMenuBar = (properties: TProperties) => {
+  const { editor, setIsPlainHTML, category, disabled = false } = properties
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
+  const [isOpenImage, setIsOpenImage] = useState(false)
+  const [imageUrl, setImageUrl] = useState('')
+  const [isOpenColor, setIsOpenColor] = useState(false)
+  const popover = useRef<HTMLDivElement>(null)
+  const close = useCallback(() => {
+    setIsOpenColor(false)
+    setIsOpenImage(false)
+    if (imageUrl) {
+      addImage(imageUrl)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageUrl])
+
+  useEffect(() => {
+    if (uploadedFile && isUploadOpen === category) {
+      addImage(uploadedFile)
+      setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])
+
+  useClickOutside(popover, close)
+
+  const setLink = useCallback(() => {
+    const previousUrl = editor?.getAttributes('link').href
+    const url = globalThis.prompt('URL', previousUrl)
+
+    // cancelled
+    if (url === null) {
+      return
+    }
+
+    // empty
+    if (url === '') {
+      editor?.chain().focus().extendMarkRange('link').unsetLink().run()
+
+      return
+    }
+
+    // update link
+    editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }, [editor])
+
+  if (!editor) {
+    return
+  }
+
+  const addImage = (url: string) => {
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run()
+    }
+  }
+
+  const currentColor: string = editor.getAttributes('textStyle').color
+  const rgbColor = isHexCompatible(currentColor)
+    ? currentColor
+    : rgbToHex(currentColor)
+  const handleChangeColor = (selectedColor: string) => {
+    if (selectedColor.length === 7) {
+      editor.chain().focus().setColor(selectedColor).run()
+    }
+  }
+
+  return (
+    <div className="flex items-start justify-between gap-4 px-4 py-3">
+      <div className="flex divide-x">
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleBold().run()
+            }
+            isActive={editor.isActive('bold')}
+            title="Bold"
+          >
+            <BoldIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleItalic().run()
+            }
+            isActive={editor.isActive('italic')}
+            title="Italic"
+          >
+            <ItalicIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            disabled={
+              disabled || !editor.can().chain().focus().toggleStrike().run()
+            }
+            isActive={editor.isActive('strike')}
+            title="Strike"
+          >
+            <StrikethroughIcon className="size-4" />
+          </EditorButton>
+          <div className="relative">
+            <EditorButton
+              onClick={() => setIsOpenColor(true)}
+              title="Text Color"
+              style={{
+                color: rgbColor,
+              }}
+              isActive={true}
+              disabled={disabled}
+            >
+              <SwatchIcon className="size-4" />
+            </EditorButton>
+            {isOpenColor && (
+              <div
+                className="border-md absolute top-8 left-0"
+                ref={popover}
+              >
+                <HexColorPicker
+                  className="z-10 rounded-lg shadow"
+                  color={rgbColor}
+                  onChange={handleChangeColor}
+                />
+                <div className="">
+                  <HexColorInput
+                    color={rgbColor}
+                    onChange={handleChangeColor}
+                    prefixed
+                    className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('left').run()
+            }
+            isActive={editor.isActive({ textAlign: 'left' })}
+            title="Align Left"
+          >
+            <Bars3BottomLeftIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('center').run()
+            }
+            isActive={editor.isActive({ textAlign: 'center' })}
+            title="Align Center"
+          >
+            <Bars3BottomCenterIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('right').run()
+            }
+            isActive={editor.isActive({ textAlign: 'right' })}
+            title="Align Right"
+          >
+            <Bars3BottomRightIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+            disabled={
+              disabled ||
+              !editor.can().chain().focus().setTextAlign('justify').run()
+            }
+            isActive={editor.isActive({ textAlign: 'justify' })}
+            title="Align Justify"
+          >
+            <Bars3Icon className="size-4" />
+          </EditorButton>
+        </div>
+        <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 1 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 1 })}
+            title="Heading 1"
+            disabled={disabled}
+          >
+            <H1Icon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 2 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 2 })}
+            title="Heading 2"
+            disabled={disabled}
+          >
+            <H2Icon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 3 }).run()
+            }
+            isActive={editor.isActive('heading', { level: 3 })}
+            title="Heading 3"
+            disabled={disabled}
+          >
+            <H3Icon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+            disabled={disabled}
+          >
+            <CodeBracketIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            isActive={editor.isActive('bulletList')}
+            title="Bullet List"
+            disabled={disabled}
+          >
+            <ListBulletIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            isActive={editor.isActive('orderedList')}
+            title="Ordered List"
+            disabled={disabled}
+          >
+            <NumberedListIcon className="size-4" />
+          </EditorButton>
+          {/* <EditorButton
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            isActive={editor.isActive('paragraph')}
+            title="Paragraph"
+            disabled={disabled}
+          >
+            <PilcrowIcon className="size-4" />
+          </EditorButton> */}
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            isActive={editor.isActive('blockquote')}
+            title="Blockquote"
+            disabled={disabled}
+          >
+            <QuotationMarkIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => {
+              editor.chain().focus().unsetAllMarks().run()
+              editor.chain().focus().clearNodes().run()
+            }}
+            title="Clear Format"
+            disabled={disabled}
+          >
+            <XCircleIcon className="size-4" />
+          </EditorButton>
+          {/* <EditorButton
+              onClick={() => editor.chain().focus().setHorizontalRule().run()}
+              title="Horizontal Rule"
+              disabled={disabled}
+            >
+              <RiSeparator />
+            </EditorButton> */}
+        </div>
+        {/* <div className="flex items-start gap-1 px-1">
+            <EditorButton
+              onClick={() => editor.chain().focus().setHardBreak().run()}
+              title="Hard Break"
+              disabled={disabled}
+            >
+              <RiTextWrap />
+            </EditorButton>
+          </div> */}
+        <div className="flex items-start gap-1 px-1">
+          <div className="relative">
+            <EditorButton
+              onClick={() => setIsOpenImage(true)}
+              title="Insert Image"
+              disabled={disabled}
+            >
+              <PhotoIcon className="size-4" />
+            </EditorButton>
+            {isOpenImage && (
+              <div
+                className="border-md absolute top-8 left-0 w-50"
+                ref={popover}
+              >
+                <div className="relative">
+                  <Input
+                    placeholder="Masukkan URL Gambar"
+                    color={rgbColor}
+                    onChange={(event) => {
+                      setImageUrl(event.target.value)
+                    }}
+                    className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
+                  />
+                  <Button
+                    type="button"
+                    variant="icon"
+                    size="fit"
+                    className="absolute top-0 right-3 h-[42px]"
+                    onClick={() => {
+                      setIsUploadOpen('content')
+                    }}
+                  >
+                    <CloudArrowUpIcon className="size-4 text-gray-500/50" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+          <EditorButton
+            onClick={() => setLink()}
+            disabled={
+              disabled ||
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: '' })
+                .run()
+            }
+            isActive={editor.isActive('link')}
+            title="Set Link"
+          >
+            <LinkIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            disabled={disabled || !editor.isActive('link')}
+            title="Unset Link"
+          >
+            <LinkSlashIcon className="size-4" />
+          </EditorButton>
+        </div>
+        <div className="flex items-start gap-1 px-1">
+          <EditorButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={disabled || !editor.can().chain().focus().undo().run()}
+            title="Undo"
+          >
+            <ArrowUturnLeftIcon className="size-4" />
+          </EditorButton>
+          <EditorButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={disabled || !editor.can().chain().focus().redo().run()}
+            title="Redo"
+          >
+            <ArrowUturnRightIcon className="size-4" />
+          </EditorButton>
+        </div>
+      </div>
+      <div>
+        <div className="flex gap-1 px-1">
+          <EditorButton
+            onClick={() => setIsPlainHTML(true)}
+            title="Switch to Plain Text"
+          >
+            <DocumentTextIcon className="size-4" />
+          </EditorButton>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/text-editor/editor-textarea.tsx

@@ -0,0 +1,55 @@
+import { CodeBracketSquareIcon } from '@heroicons/react/24/solid'
+import MonacoEditor from '@monaco-editor/react'
+import type { Dispatch, SetStateAction } from 'react'
+import { Controller } from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+
+import { EditorButton } from './editor-button'
+
+type TProperties = {
+  name: string
+  disabled?: boolean
+  setIsPlainHTML: Dispatch<SetStateAction<boolean>>
+}
+
+// const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
+//   ssr: false,
+// })
+
+export const EditorTextArea = (properties: TProperties) => {
+  const { setIsPlainHTML, name, disabled = false } = properties
+
+  const { control } = useRemixFormContext()
+  return (
+    <>
+      <div className="flex justify-end rounded-[5px_5px_0_0] border-x border-t border-[#D2D2D2] px-4 py-3">
+        <div className="flex gap-1 px-1">
+          <EditorButton
+            onClick={() => setIsPlainHTML(false)}
+            title="Switch to Rich Text"
+          >
+            <CodeBracketSquareIcon />
+          </EditorButton>
+        </div>
+      </div>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field }) => (
+          <MonacoEditor
+            language="html"
+            onChange={(newValue) => {
+              field.onChange(newValue)
+            }}
+            value={field.value}
+            options={{
+              readOnly: disabled,
+              wordWrap: 'on',
+            }}
+            className="mb-1 h-96 max-w-none overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-1"
+          />
+        )}
+      />
+    </>
+  )
+}

app/components/text-editor/index.tsx

@@ -0,0 +1,144 @@
+import { Field, Label } from '@headlessui/react'
+import { Color } from '@tiptap/extension-color'
+import Highlight from '@tiptap/extension-highlight'
+import Image from '@tiptap/extension-image'
+import Link from '@tiptap/extension-link'
+import TextAlign from '@tiptap/extension-text-align'
+import TextStyle from '@tiptap/extension-text-style'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { useEffect, useId, useState } from 'react'
+import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+import { EditorMenuBar } from './editor-menubar'
+import { EditorTextArea } from './editor-textarea'
+
+type TProperties = {
+  id?: string
+  name: string
+  label?: string
+  placeholder?: string
+  labelClassName?: string
+  className?: string
+  inputClassName?: string
+  containerClassName?: string
+  rules?: RegisterOptions
+  disabled?: boolean
+  isRequired?: boolean
+  category: string
+}
+
+export const TextEditor = (properties: TProperties) => {
+  const {
+    id,
+    label,
+    name,
+    labelClassName,
+    className,
+    inputClassName,
+    category,
+    disabled = false,
+    containerClassName,
+  } = properties
+
+  const [isPlainHTML, setIsPlainHTML] = useState(false)
+  const [init, setInit] = useState(true)
+  const generatedId = useId()
+
+  const {
+    setValue,
+    watch,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const watchContent = watch(name)
+  const error: FieldError = get(errors, name)
+
+  const editor = useEditor({
+    editable: !disabled,
+    extensions: [
+      StarterKit.configure({
+        paragraph: {
+          HTMLAttributes: {
+            class: 'min-h-1',
+          },
+        },
+      }),
+      Highlight,
+      Image.configure({
+        inline: true,
+      }),
+      TextStyle,
+      Color.configure({
+        types: ['textStyle'],
+      }),
+      Link.configure({
+        openOnClick: false,
+      }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+    ],
+    immediatelyRender: false,
+    content: watchContent,
+    onUpdate: ({ editor }) => {
+      setValue(name, editor.getHTML() as string)
+    },
+  })
+  useEffect(() => {
+    if (
+      watchContent &&
+      watchContent.length > 0 &&
+      editor &&
+      (isPlainHTML || init)
+    ) {
+      editor.commands.setContent(watchContent)
+      setInit(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchContent])
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      {label && (
+        <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+          {label}{' '}
+          {error && <span className="text-red-500">{error.message}</span>}
+        </Label>
+      )}
+
+      {isPlainHTML ? (
+        <EditorTextArea
+          setIsPlainHTML={setIsPlainHTML}
+          name={name}
+          disabled={disabled}
+        />
+      ) : (
+        <div className={twMerge('rounded-md', className)}>
+          <EditorMenuBar
+            disabled={disabled}
+            category={category}
+            editor={editor}
+            setIsPlainHTML={setIsPlainHTML}
+          />
+          <EditorContent
+            readOnly={disabled}
+            editor={editor}
+            id={id ?? generatedId}
+            className={twMerge(
+              'prose prose-headings:my-0.5 prose-p:my-0.5 max-w-none cursor-text overflow-y-auto rounded-b-md p-2',
+              inputClassName,
+            )}
+            onClick={() => editor?.commands.focus()}
+          />
+        </div>
+      )}
+    </Field>
+  )
+}

app/components/ui/banner.tsx

@@ -1,25 +0,0 @@
-import { Link } from 'react-router'
-
-import { APP } from '~/data/meta'
-
-export default function Banner() {
-  return (
-    <div className="min-h-[65px] bg-amber-400 sm:mx-10">
-      <div className="relative">
-        <Link
-          to="/#"
-          className="mt-2 h-full py-2"
-        >
-          <img
-            src={'https://placehold.co/1200x70.png'}
-            alt={APP.title}
-            className="h-[70px] w-auto sm:h-full"
-          />
-        </Link>
-        <p className="absolute top-2 mx-10">
-          Lorem ipsum dolor sit, amet consectetur
-        </p>
-      </div>
-    </div>
-  )
-}

app/components/ui/button-slide.tsx

@@ -0,0 +1,24 @@
+import { CarouselNextIcon } from '~/components/icons/carousel-next'
+import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+
+type TCarouselButton = {
+  direction: 'prev' | 'next'
+  isEnabled: boolean
+  onClick: () => void
+}
+export const CarouselButton = ({
+  direction,
+  isEnabled,
+  onClick,
+}: TCarouselButton) => {
+  const Icon = direction === 'prev' ? CarouselPreviousIcon : CarouselNextIcon
+  return (
+    <Icon
+      color={isEnabled ? '#2E2F7C' : '#DCDCDC'}
+      className={isEnabled ? 'cursor-pointer' : 'cursor-not-allowed'}
+      width={45}
+      height={45}
+      onClick={onClick}
+    />
+  )
+}

app/components/ui/button.tsx

@@ -1,10 +1,7 @@
+import { Button as HeadlessButton } from '@headlessui/react'
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
-import type {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-} from 'react'
+import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 const buttonVariants = cva(
@@ -12,62 +9,75 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
-        newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
-        newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
+        primary:
+          'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
+        danger:
+          'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
+        primaryOutline:
+          'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
+        outline:
+          'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
-        // destructive:
-        //   'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        // outline:
-        //   'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        // secondary:
-        //   'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        // ghost: 'hover:bg-accent hover:text-accent-foreground',
-        // link: 'text-primary underline-offset-4 hover:underline',
+        link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
+        secondary:
+          'hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20 hover:text-[#707FDD] text-[#273240]',
       },
       size: {
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
-        icon: 'h-9 w-9',
+        icon: 'size-9 rounded-full',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
+        fit: 'w-fit',
       },
     },
     defaultVariants: {
-      variant: 'newsPrimary',
+      variant: 'primary',
       size: 'default',
     },
   },
 )
 
-type TProperties = {
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  className?: HTMLAttributes<HTMLButtonElement>['className']
-  disabled?: boolean
+type ButtonBaseProperties = {
   children: ReactNode
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
+  className?: string
+  isLoading?: boolean
+  icon?: ReactNode
 }
 
-export const Button = (properties: TProperties) => {
+type PolymorphicReference<C extends ElementType> =
+  ComponentPropsWithoutRef<C>['ref']
+
+type ButtonProperties<C extends ElementType> = ButtonBaseProperties & {
+  as?: C
+  ref?: PolymorphicReference<C>
+} & Omit<ComponentPropsWithoutRef<C>, keyof ButtonBaseProperties>
+
+export const Button = <C extends ElementType = 'button'>(
+  properties: ButtonProperties<C>,
+) => {
   const {
-    type = 'button',
-    onClick,
-    className,
-    disabled,
+    as,
     children,
     variant,
     size,
+    className,
+    isLoading = false,
+    icon,
+    ...restProperties
   } = properties
+  const Component = as || HeadlessButton
+  const classes = twMerge(buttonVariants({ variant, size, className }))
+
   return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={twMerge(buttonVariants({ variant, size, className }))}
-      disabled={disabled}
+    <Component
+      className={classes}
+      {...restProperties}
     >
+      {isLoading ? <ArrowPathIcon className="size-5 animate-spin" /> : icon}
       {children}
-    </button>
+    </Component>
   )
 }

app/components/ui/card-report.tsx

@@ -0,0 +1,34 @@
+import type { ComponentType, SVGProps } from 'react'
+
+import { formatNumberWithPeriods } from '~/utils/formatter'
+
+type CardReportProperty = {
+  title: string
+  amount: number
+  currency?: string
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+  url?: string
+}
+
+export const CardReport = (properties: CardReportProperty) => {
+  const { title, amount, icon: Icon, currency } = properties
+  return (
+    <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
+      <div className="flex items-center">
+        <Icon
+          className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
+          height={48}
+          width={48}
+        />
+        <div className="ml-7">
+          <h2 className="text-lg font-semibold">{title}</h2>
+          <p className="text-2xl font-bold text-[#2E2F7C]">
+            {currency
+              ? `${currency} ${formatNumberWithPeriods(amount)}`
+              : formatNumberWithPeriods(amount)}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/card.tsx

@@ -3,11 +3,11 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react'
 type TProperties = PropsWithChildren<ComponentProps<'div'>>
 
 export const Card: FC<TProperties> = (properties) => {
-  const { children, ...rest } = properties
+  const { children, ...restProperties } = properties
   return (
     <div
       className="border-[.2px] border-black/20 bg-white p-[30px]"
-      {...rest}
+      {...restProperties}
     >
       {children}
     </div>

app/components/ui/carousel-hero.tsx

@@ -0,0 +1,157 @@
+import useEmblaCarousel from 'embla-carousel-react'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
+import { stripHtml } from 'string-strip-html'
+
+import { ErrorAwait } from '~/components/error/await'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
+import { CarouselButton } from '~/components/ui/button-slide'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
+
+import { Button } from './button'
+
+export const CarouselHero = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { userData } = loaderData || {}
+  const { title, description, items } = properties
+  const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
+
+  const [canScrollNext, setCanScrollNext] = useState(false)
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false)
+
+  const updateButtons = useCallback(() => {
+    if (emblaApi) {
+      setCanScrollPrevious(emblaApi.canScrollPrev())
+      setCanScrollNext(emblaApi.canScrollNext())
+    }
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (emblaApi) {
+      updateButtons()
+      emblaApi.on('select', updateButtons)
+    }
+  }, [emblaApi, updateButtons])
+
+  const previousSlide = useCallback(() => {
+    if (canScrollPrevious && emblaApi) emblaApi.scrollPrev()
+  }, [emblaApi, canScrollPrevious])
+
+  const nextSlide = useCallback(() => {
+    if (canScrollNext && emblaApi) emblaApi.scrollNext()
+  }, [emblaApi, canScrollNext])
+
+  return (
+    <div className="">
+      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <div className="grid">
+          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+            {title}
+          </h2>
+          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+            {description}
+          </p>
+        </div>
+        <div className="flex gap-2.5">
+          <CarouselButton
+            direction="prev"
+            isEnabled={canScrollPrevious}
+            onClick={previousSlide}
+          />
+          <CarouselButton
+            direction="next"
+            isEnabled={canScrollNext}
+            onClick={nextSlide}
+          />
+        </div>
+      </div>
+
+      <div
+        className="embla hero overflow-hidden"
+        ref={emblaReference}
+      >
+        <div className="embla__container hero flex sm:gap-x-8">
+          <Suspense
+            fallback={
+              <div className="embla__slide hero flex w-full min-w-0 flex-none animate-pulse justify-between gap-3 max-sm:mt-2 sm:flex">
+                <div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
+                </div>
+                <div className="flex w-full flex-col gap-7">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                </div>
+                <span className="sr-only">Loading...</span>
+              </div>
+            }
+          >
+            <Await
+              resolve={items}
+              errorElement={<ErrorAwait />}
+            >
+              {(value) =>
+                value.data.map(
+                  (
+                    { featured_image, title, content, slug, is_premium },
+                    index,
+                  ) => (
+                    <div
+                      className="embla__slide hero w-full min-w-0 flex-none max-sm:mt-2 sm:flex"
+                      key={index}
+                    >
+                      <img
+                        className="aspect-[174/100] h-full rounded-md object-cover"
+                        src={featured_image}
+                        alt={title}
+                      />
+                      <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
+                        <div>
+                          <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
+                            {title}
+                          </h3>
+                          <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
+                            {stripHtml(content).result}
+                          </p>
+                        </div>
+                        <Button
+                          size="block"
+                          {...getPremiumAttribute({
+                            isPremium: is_premium,
+                            slug,
+                            onClick: () => setIsSuccessOpen('warning'),
+                            userData,
+                          })}
+                        >
+                          View More
+                        </Button>
+                      </div>
+                    </div>
+                  ),
+                )
+              }
+            </Await>
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/carousel-section.tsx

@@ -0,0 +1,163 @@
+import useEmblaCarousel from 'embla-carousel-react'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
+import { stripHtml } from 'string-strip-html'
+
+import { ErrorAwait } from '~/components/error/await'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
+import { CarouselButton } from '~/components/ui/button-slide'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
+
+import { Button } from './button'
+import { Tags } from './tags'
+
+export const CarouselSection = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { userData } = loaderData || {}
+  const { title, description, items } = properties
+  const [emblaReference, emblaApi] = useEmblaCarousel({
+    loop: false,
+    slidesToScroll: 1,
+    align: 'start',
+  })
+
+  const [canScrollNext, setCanScrollNext] = useState(false)
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false)
+
+  const updateButtons = useCallback(() => {
+    if (emblaApi) {
+      setCanScrollPrevious(emblaApi.canScrollPrev())
+      setCanScrollNext(emblaApi.canScrollNext())
+    }
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (emblaApi) {
+      updateButtons()
+      emblaApi.on('select', updateButtons)
+    }
+  }, [emblaApi, updateButtons])
+
+  const previousSlide = useCallback(() => {
+    if (canScrollPrevious && emblaApi) emblaApi.scrollPrev()
+  }, [emblaApi, canScrollPrevious])
+
+  const nextSlide = useCallback(() => {
+    if (canScrollNext && emblaApi) emblaApi.scrollNext()
+  }, [emblaApi, canScrollNext])
+
+  return (
+    <div className="">
+      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <div className="grid">
+          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+            {title}
+          </h2>
+          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex gap-2.5">
+          <CarouselButton
+            direction="prev"
+            isEnabled={canScrollPrevious}
+            onClick={previousSlide}
+          />
+          <CarouselButton
+            direction="next"
+            isEnabled={canScrollNext}
+            onClick={nextSlide}
+          />
+        </div>
+      </div>
+
+      <div
+        className="embla overflow-hidden"
+        ref={emblaReference}
+      >
+        <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
+          <Suspense
+            fallback={Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={index}
+                className="embla__slide flex w-full min-w-0 flex-none animate-pulse flex-col justify-between gap-3 sm:w-1/3"
+              >
+                <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
+                </div>
+                <div className="flex w-full flex-col gap-4">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                </div>
+                <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                <span className="sr-only">Loading...</span>
+              </div>
+            ))}
+          >
+            <Await
+              resolve={items}
+              errorElement={<ErrorAwait />}
+            >
+              {(value) =>
+                value.data.map(
+                  (
+                    { featured_image, title, content, tags, slug, is_premium },
+                    index,
+                  ) => (
+                    <div
+                      className="embla__slide flex w-full min-w-0 flex-none flex-col justify-between gap-3 sm:w-1/3"
+                      key={index}
+                    >
+                      <img
+                        className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
+                        src={featured_image}
+                        alt={title}
+                      />
+                      <div className={'flex flex-col justify-between gap-4'}>
+                        <div className="flex h-28 flex-col items-start justify-center gap-4">
+                          <Tags
+                            tags={tags || []}
+                            is_premium={is_premium}
+                          />
+                          <h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
+                            {title}
+                          </h3>
+                        </div>
+                        <p className="line-clamp-3 text-base text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                        <Button
+                          size="block"
+                          {...getPremiumAttribute({
+                            isPremium: is_premium,
+                            slug,
+                            onClick: () => setIsSuccessOpen('warning'),
+                            userData,
+                          })}
+                        >
+                          View More
+                        </Button>
+                      </div>
+                    </div>
+                  ),
+                )
+              }
+            </Await>
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/carousel.tsx

@@ -1,167 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-
-import { CarouselNextIcon } from '~/components/icons/carousel-next'
-import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
-import type { TNews } from '~/types/news'
-
-import { Button } from './button'
-
-export const Carousel = (properties: TNews) => {
-  const { title, description, items, type } = properties
-  return (
-    <>
-      {/* <div >
-        <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
-          <div className="grid">
-            <h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
-            <p className="text-2xl font-light text-[#777777] italic">
-              {description}
-            </p>
-          </div>
-          <div className="flex gap-2.5">
-            <CarouselPreviousIcon
-              color="#DCDCDC"
-              className="cursor-pointer"
-            />
-            <CarouselNextIcon
-              color="#2E2F7C"
-              className="cursor-pointer"
-            />
-          </div>
-        </div>
-        <div
-          className={twMerge(
-            'grid gap-x-8',
-            type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
-          )}
-        >
-          {items.map(({ image, title, content }, index) => (
-            <div
-              key={index}
-              className={twMerge(
-                'grid gap-x-8',
-                type === 'hero' ? 'grid-cols-3' : '',
-              )}
-            >
-              <img
-                className={twMerge(
-                  'w-full object-cover',
-                  type === 'hero'
-                    ? 'col-span-2 aspect-[174/100]'
-                    : 'aspect-[5/4]',
-                )}
-                src={image}
-                alt={title}
-              />
-              <div
-                className={twMerge(
-                  'flex flex-col justify-between',
-                  type === 'hero' ? 'gap-7' : 'gap-4',
-                )}
-              >
-                <div>
-                  <h3
-                    className={twMerge(
-                      'font-bold',
-                      type === 'hero' ? 'text-4xl' : 'text-2xl',
-                    )}
-                  >
-                    {title}
-                  </h3>
-                  <p className="text-xl text-[#777777]">{content}</p>
-                </div>
-                <Button size="block">View More</Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div> */}
-
-      <div className="">
-        <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
-          <div className="grid">
-            <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
-              {title}
-            </h2>
-            <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
-              {description}
-            </p>
-          </div>
-
-          <div className="flex gap-2.5">
-            <CarouselPreviousIcon
-              color="#DCDCDC"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-            />
-            <CarouselNextIcon
-              color="#2E2F7C"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-            />
-          </div>
-        </div>
-        <div
-          className={twMerge(
-            'grid sm:grid sm:gap-x-8',
-            type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
-          )}
-        >
-          {items.map(({ image, title, content, tag }, index) => (
-            <div
-              key={index}
-              className={twMerge(
-                'grid sm:gap-x-8',
-                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
-              )}
-            >
-              <img
-                className={twMerge(
-                  'w-full object-cover',
-                  type === 'hero'
-                    ? 'col-span-2 aspect-[174/100]'
-                    : 'aspect-[5/4] rounded-md',
-                )}
-                src={image}
-                alt={title}
-              />
-              <div
-                className={twMerge(
-                  'flex flex-col justify-between',
-                  type === 'hero' ? 'gap-7' : 'gap-4',
-                )}
-              >
-                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                  {tag?.map((item) => (
-                    <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
-                      {item}
-                    </span>
-                  ))}
-                </div>
-
-                <div>
-                  <h3
-                    className={twMerge(
-                      'mt-2 w-full font-bold lg:mt-0',
-                      type === 'hero'
-                        ? 'text-2xl sm:text-4xl'
-                        : 'text-xl sm:text-2xl',
-                    )}
-                  >
-                    {title}
-                  </h3>
-                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
-                    {content}
-                  </p>
-                </div>
-                <Button size="block">View More</Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  )
-}

app/components/ui/category-section.tsx

@@ -0,0 +1,150 @@
+import { Suspense } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
+import { stripHtml } from 'string-strip-html'
+import { twMerge } from 'tailwind-merge'
+
+import { ErrorAwait } from '~/components/error/await'
+import { CarouselNextIcon } from '~/components/icons/carousel-next'
+import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
+import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
+
+import { Tags } from './tags'
+
+export const CategorySection = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { userData } = loaderData || {}
+
+  const { title, description, items } = properties
+
+  const nextSlide = () => {
+    // patch data next page
+  }
+
+  const previousSlide = () => {
+    // patch previous page
+  }
+
+  return (
+    <div className="">
+      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <div className="grid">
+          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+            {title}
+          </h2>
+          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+            {description}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid sm:grid-cols-3 sm:gap-x-8">
+        <Suspense
+          fallback={Array.from({ length: 3 }).map((_, index) => (
+            <div
+              key={index}
+              className="grid gap-3 sm:gap-x-8"
+            >
+              <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                <ImageSkeletonIcon />
+              </div>
+              <div className="flex w-full flex-col gap-4">
+                <div className="flex flex-col gap-4">
+                  <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+                <div className="flex flex-col gap-2.5">
+                  <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+              </div>
+              <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+              <span className="sr-only">Loading...</span>
+            </div>
+          ))}
+        >
+          <Await
+            resolve={items}
+            errorElement={<ErrorAwait />}
+          >
+            {(value) =>
+              value.data.map(
+                (
+                  { featured_image, title, content, tags, slug, is_premium },
+                  index,
+                ) => (
+                  <div
+                    key={index}
+                    className="grid gap-3 sm:gap-x-8"
+                  >
+                    <img
+                      className="aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]"
+                      src={featured_image}
+                      alt={title}
+                    />
+                    <div className="flex flex-col justify-between gap-4">
+                      <Tags
+                        tags={tags}
+                        is_premium={is_premium}
+                      />
+
+                      <div>
+                        <h3
+                          className={twMerge(
+                            'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                          )}
+                        >
+                          {title}
+                        </h3>
+                        <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                      </div>
+                      <Button
+                        size="block"
+                        {...getPremiumAttribute({
+                          isPremium: is_premium,
+                          slug,
+                          onClick: () => setIsSuccessOpen('warning'),
+                          userData,
+                        })}
+                        className="mb-5"
+                      >
+                        View More
+                      </Button>
+                    </div>
+                  </div>
+                ),
+              )
+            }
+          </Await>
+        </Suspense>
+      </div>
+
+      <div className="my-5 mt-5 flex flex-row-reverse">
+        <div className="flex gap-2.5">
+          <CarouselPreviousIcon
+            color="#DCDCDC"
+            className="cursor-pointer"
+            width={45}
+            height={45}
+            onClick={previousSlide}
+          />
+          <CarouselNextIcon
+            color="#2E2F7C"
+            className="cursor-pointer"
+            width={45}
+            height={45}
+            onClick={nextSlide}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/color-badge.tsx

@@ -0,0 +1,23 @@
+export type TColorBadge =
+  | 'baru'
+  | 'premium'
+  | 'pembayaran'
+  | 'active'
+  | 'inactive'
+  | 'expired'
+  | 1
+  | 0
+
+export const getStatusBadge = (status: TColorBadge) => {
+  const statusColors = {
+    baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
+    pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    active: 'bg-[#D1FAE5] text-[#10B981]',
+    inactive: 'bg-[#FEE2E2] text-[#EF4444]',
+    expired: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    1: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    0: 'bg-[#FEE2E2] text-[#EF4444]',
+  }
+  return statusColors[status] || 'bg-gray-200 text-gray-700'
+}

app/components/ui/combobox.tsx

@@ -0,0 +1,131 @@
+import {
+  Field,
+  Label,
+  Combobox as HeadlessCombobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TComboboxOption = {
+  code: string
+  name: string
+  id: string
+}
+
+type TComboboxProperties<T extends FieldValues> = ComponentProps<
+  typeof HeadlessCombobox
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  placeholder?: string
+  options?: TComboboxOption[]
+  labelClassName?: string
+  containerClassName?: string
+}
+
+export const Combobox = <TFormValues extends Record<string, unknown>>(
+  properties: TComboboxProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...restProperties
+  } = properties
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+  const [query, setQuery] = useState('')
+  const filteredOptions =
+    query === ''
+      ? options
+      : options?.filter((option) =>
+          option.name.toLowerCase().includes(query.toLowerCase()),
+        )
+
+  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>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessCombobox
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            immediate
+            {...restProperties}
+          >
+            <div className="relative">
+              <ComboboxInput
+                placeholder={placeholder}
+                displayValue={(option: TComboboxOption) => option?.name}
+                onChange={(event) => setQuery(event.target.value)}
+                className={twMerge(
+                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 placeholder:text-inherit',
+                  className,
+                )}
+              />
+              <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
+                <ChevronDownIcon className="size-4 fill-gray-500" />
+              </ComboboxButton>
+            </div>
+            <ComboboxOptions
+              anchor={{ to: 'bottom', gap: '8px' }}
+              transition
+              className={twMerge(
+                'w-[var(--input-width)] rounded-md border border-[#DFDFDF] p-1 empty:invisible',
+                'bg-white transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0',
+              )}
+            >
+              {filteredOptions?.map((option) => (
+                <ComboboxOption
+                  key={option.id}
+                  value={option}
+                  className="group flex cursor-default items-center gap-2 rounded-lg px-3 py-1.5 select-none data-[focus]:bg-white/10"
+                >
+                  <CheckIcon className="invisible size-4 group-data-[selected]:visible" />
+                  <div className="text-sm/6">{option.name}</div>
+                </ComboboxOption>
+              ))}
+            </ComboboxOptions>
+          </HeadlessCombobox>
+        )}
+      />
+    </Field>
+  )
+}

app/components/ui/input-file.tsx

@@ -0,0 +1,87 @@
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
+import { CloudArrowUpIcon } from '@heroicons/react/24/solid'
+import { useEffect, type ComponentProps, type ReactNode } from 'react'
+import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+import { useAdminContext, type TUpload } from '~/contexts/admin'
+
+import { Button } from './button'
+
+type TInputProperties = Omit<ComponentProps<'input'>, 'size'> & {
+  id: string
+  label?: ReactNode
+  name: string
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  category: TUpload
+}
+
+export const InputFile = (properties: TInputProperties) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    placeholder,
+    disabled,
+    className,
+    containerClassName,
+    labelClassName,
+    category,
+    ...restProperties
+  } = properties
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
+
+  const {
+    register,
+    formState: { errors },
+    setValue,
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  useEffect(() => {
+    if (uploadedFile && isUploadOpen === (category || name)) {
+      setValue(name, uploadedFile)
+      setUploadedFile(undefined)
+      setIsUploadOpen(undefined)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])
+
+  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 pr-8',
+          className,
+        )}
+        placeholder={placeholder}
+        {...register(name, rules)}
+        {...restProperties}
+      />
+      <Button
+        type="button"
+        variant="icon"
+        size="fit"
+        className="absolute right-3 h-[42px]"
+        onClick={() => {
+          setIsUploadOpen(category)
+        }}
+      >
+        <CloudArrowUpIcon className="size-4 text-gray-500/50" />
+      </Button>
+    </Field>
+  )
+}

app/components/ui/input.tsx

@@ -0,0 +1,94 @@
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
+import { useState, 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 { EyeIcon } from '~/components/icons/eye'
+
+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 Input = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    type = 'text',
+    placeholder,
+    disabled,
+    className,
+    containerClassName,
+    labelClassName,
+    ...restProperties
+  } = properties
+  const [inputType, setInputType] = useState(type)
+
+  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
+        type={inputType}
+        className={twMerge(
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+          className,
+          type === 'password' ? 'pr-8' : '',
+        )}
+        placeholder={inputType === 'password' ? '******' : placeholder}
+        {...register(name, rules)}
+        {...restProperties}
+      />
+      {type === 'password' && (
+        <Button
+          type="button"
+          variant="icon"
+          size="fit"
+          className="absolute right-3 h-[42px]"
+          onClick={() =>
+            setInputType(inputType === 'password' ? 'text' : 'password')
+          }
+        >
+          <EyeIcon
+            className={twMerge(
+              'size-4',
+              inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
+            )}
+          />
+        </Button>
+      )}
+    </Field>
+  )
+}

app/components/ui/news-author.tsx

@@ -0,0 +1,32 @@
+import type { TAuthorResponse } from '~/apis/common/get-news'
+import { formatDate } from '~/utils/formatter'
+
+type TDetailNewsAuthor = {
+  author?: TAuthorResponse
+  live_at?: string
+  text?: string
+}
+
+export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
+  return (
+    <div className="mb-2 flex items-center gap-2 align-middle">
+      <img
+        src={author?.profile_picture || '/images/profile-placeholder.svg'}
+        onError={(event) => {
+          event.currentTarget.src = '/images/profile-placeholder.svg'
+        }}
+        alt={author?.name}
+        className="size-12 rounded-full bg-[#C4C4C4] object-cover"
+      />
+
+      <div>
+        <h4 className="text-md">{author?.name}</h4>
+        <p className="flex gap-1 text-sm">
+          <span>{live_at && `${formatDate(live_at)}`}</span>
+          <span>·</span>
+          <span>{text}</span>
+        </p>
+      </div>
+    </div>
+  )
+}

app/components/ui/newsletter.tsx

@@ -1,37 +1,51 @@
+import { twMerge } from 'tailwind-merge'
+
 import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'
+
+type NewsletterProperties = {
+  className?: string
+  title?: string
+  description?: string
+  textButton?: string
+  onClick?: () => void
+}
+export const Newsletter = (property: NewsletterProperties) => {
+  const { className, title, description } = property
 
-export const UiNewsLetter = () => {
   return (
-    <>
-      <div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
-        <div className="grid-1">
+    <div className="relative">
+      <div
+        className={`absolute flex h-[400px] w-screen flex-col sm:h-[300px] md:flex-row ${twMerge('', className)}`}
+      >
+        <div className="flex h-1/2 w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:h-full sm:w-[50%] sm:px-30">
           <h2 className="text-2xl font-bold sm:text-4xl">
-            Join Our Newsletter
+            {title ? `${title}` : 'Join Our Newsletter'}
           </h2>
           <p className="text:md sm:text-lg">
-            Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
-            informasi kajian dan networking terbaru? ikuti Newsletter kami and
-            Stay up to Speed!
+            {description
+              ? `${description}`
+              : `Tidak ingin ketinggalan Berita Hukum terhangat? 
+              Ingin mendapat informasi kajian dan networking terbaru?  
+              Ikuti Newsletter kami dan Stay up to Speed!`}
           </p>
         </div>
-        <div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
-          <img
-            src={'https://placehold.co/800x200.png'}
-            alt={APP.title}
-            className="h-full w-auto"
-          />
-        </div>
-        <div className="z-10">
-          <form className="grid gap-5">
+        <div
+          style={{
+            backgroundImage: "url('/images/bg-newsletter.png')",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+          className="flex h-1/2 w-full flex-col items-center justify-center text-center sm:h-full sm:w-[50%]"
+        >
+          <form className="grid w-[50%] gap-5">
             <input
+              type="email"
               placeholder="Daftarkan Email Disini"
-              className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
-              size={1}
+              className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
             />
             <Button
               type="submit"
-              variant="newsPrimary"
+              variant="primary"
               size="block"
             >
               Subscribe
@@ -39,6 +53,6 @@ export const UiNewsLetter = () => {
           </form>
         </div>
       </div>
-    </>
+    </div>
   )
 }

app/components/ui/select.tsx

@@ -0,0 +1,98 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSelectProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  placeholder?: string
+  options?: {
+    name: string
+    value: string | number
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TSelectProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...restProperties
+  } = properties
+  const {
+    control,
+    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>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessSelect
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            className={twMerge(
+              'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+              className,
+            )}
+            {...restProperties}
+          >
+            <option
+              value=""
+              disabled
+              selected={!field.value}
+            >
+              {placeholder}
+            </option>
+            {options?.map(({ value, name }) => (
+              <option
+                key={value}
+                value={value}
+              >
+                {name}
+              </option>
+            ))}
+          </HeadlessSelect>
+        )}
+      />
+    </Field>
+  )
+}

app/components/ui/social-share.tsx

@@ -0,0 +1,79 @@
+import { LinkIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+import {
+  FacebookShareButton,
+  LinkedinShareButton,
+  TwitterShareButton,
+} from 'react-share'
+
+import { FacebookIcon } from '~/components/icons/facebook'
+import { InstagramIcon } from '~/components/icons/instagram'
+import { LinkedinIcon } from '~/components/icons/linkedin'
+import { XIcon } from '~/components/icons/x'
+
+type SocialShareButtonsProperties = {
+  url: string
+  title: string
+}
+
+export const SocialShareButtons = ({
+  url,
+  title,
+}: SocialShareButtonsProperties) => {
+  const [showPopup, setShowPopup] = useState(false)
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(url)
+    setShowPopup(true)
+    setTimeout(() => setShowPopup(false), 2000)
+  }
+
+  const handleInstagramShare = () => {
+    const instagramUrl = `https://www.instagram.com/direct/new/?text=${encodeURIComponent(title + ' ' + url)}`
+    window.open(instagramUrl, '_blank')
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <button
+        onClick={handleCopyLink}
+        className="relative cursor-pointer"
+      >
+        <LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
+        {showPopup && (
+          <div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
+            Link berhasil disalin!
+          </div>
+        )}
+      </button>
+
+      <FacebookShareButton
+        url={url}
+        title={title}
+      >
+        <FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
+      </FacebookShareButton>
+
+      <LinkedinShareButton
+        url={url}
+        title={title}
+      >
+        <LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
+      </LinkedinShareButton>
+
+      <TwitterShareButton
+        url={url}
+        title={title}
+      >
+        <XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
+      </TwitterShareButton>
+
+      <button
+        onClick={handleInstagramShare}
+        className="cursor-pointer"
+      >
+        <InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
+      </button>
+    </div>
+  )
+}

app/components/ui/switch.tsx

@@ -0,0 +1,94 @@
+import { Field, Label, Switch as HeadlessSwitch } from '@headlessui/react'
+import { type ReactNode } from 'react'
+import {
+  Controller,
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSwitchProperties<T extends FieldValues> = {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  className?: string
+  inputClassName?: string
+  options?: {
+    true: string
+    false: string
+  }
+}
+
+export const Switch = <TFormValues extends Record<string, unknown>>(
+  properties: TSwitchProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    containerClassName,
+    labelClassName,
+    className,
+    inputClassName,
+    options,
+  } = properties
+
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <div className={twMerge('flex items-center', className)}>
+            <HeadlessSwitch
+              checked={field.value}
+              onChange={(checked) => {
+                field.onChange(checked)
+              }}
+              className={twMerge(
+                'group flex h-7 cursor-pointer items-center rounded-full bg-[#2E2F7C]/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-[#2E2F7C]/90 data-[focus]:outline-1 data-[focus]:outline-white',
+                inputClassName,
+              )}
+            >
+              <div
+                className={twMerge(
+                  'order-2 text-xs transition duration-200 group-data-[checked]:order-1',
+                  options?.true ? 'w-18' : 'w-8',
+                  field.value ? 'text-white' : 'text-black/80',
+                )}
+              >
+                {field.value ? options?.true : options?.false}
+              </div>
+              <div
+                aria-hidden="true"
+                className="pointer-events-none order-1 size-5 rounded-full bg-white ring-0 shadow-lg transition duration-200 group-data-[checked]:order-2"
+              />
+            </HeadlessSwitch>
+          </div>
+        )}
+      />
+    </Field>
+  )
+}

app/components/ui/table-search.tsx

@@ -0,0 +1,69 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+
+interface SearchFilterProperties {
+  title: string
+  columns?: string[]
+  onSearch: (value: string) => void
+  onStatusFilter?: (value: string) => Promise<void>
+}
+export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
+  onSearch,
+  onStatusFilter,
+  title,
+}: SearchFilterProperties) => {
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [statusFilter, setStatusFilter] = useState<string>('')
+
+  const handleSearch = (searchValue: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(searchValue.target.value)
+    onSearch(searchValue.target.value)
+  }
+
+  const handleStatusFilter = (
+    searchValue: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setStatusFilter(searchValue.target.value)
+    onStatusFilter?.(searchValue.target.value)
+  }
+
+  return (
+    <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+      <div className="w-[400px]">
+        <Field>
+          <Label className="mb-2 block text-sm font-medium">Cari {title}</Label>
+          <div className="relative">
+            <Input
+              type="text"
+              value={searchTerm}
+              onChange={handleSearch}
+              placeholder={`Cari Nama ${title}`}
+              className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+            />
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+              <MagnifyingGlassIcon className="size-5 text-[#363636]" />
+            </div>
+          </div>
+        </Field>
+      </div>
+      {onStatusFilter && (
+        // will handel if filter have dropdown status
+        <div className="w-[235px]">
+          <Field>
+            <Label className="mb-2 block text-sm font-medium">Status</Label>
+            <Select
+              value={statusFilter}
+              onChange={handleStatusFilter}
+              className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+            >
+              <option>Pilih Status</option>
+              <option>Aktif</option>
+              <option>Nonaktif</option>
+            </Select>
+          </Field>
+        </div>
+      )}
+    </div>
+  )
+}

app/components/ui/table.tsx

@@ -0,0 +1,60 @@
+import DT from 'datatables.net-dt'
+import DataTable, { type DataTableProps } from 'datatables.net-react'
+import React from 'react'
+
+type UiTableProperties = {
+  title: string
+} & DataTableProps
+
+const renderPaginationIcon = (icon: string) => {
+  return `<div class="pagination-icon">${icon}</div>`
+}
+
+export const UiTable: React.FC<UiTableProperties> = ({
+  data,
+  columns,
+  slots,
+  options,
+  title,
+}) => {
+  DataTable.use(DT)
+  return (
+    <div className="rounded-lg bg-white p-5 shadow-md">
+      <h3 className="py-1 font-semibold text-[#4C5CA0]">{title}</h3>
+      <div className="rounded-lg">
+        <DataTable
+          className="cell-border text-sm"
+          data={data}
+          columns={columns}
+          slots={slots}
+          options={{
+            headerCallback: (thead) => {
+              thead.classList.add('text-left')
+            },
+            paging: true,
+            searching: false,
+            ordering: true,
+            info: false,
+            language: {
+              paginate: {
+                first: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 "><path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /></svg>`,
+                ),
+                previous: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>`,
+                ),
+                next: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>`,
+                ),
+                last: renderPaginationIcon(
+                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"> <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" /> </svg>`,
+                ),
+              },
+            },
+            ...options,
+          }}
+        />
+      </div>
+    </div>
+  )
+}

app/components/ui/tags.tsx

@@ -0,0 +1,30 @@
+import { twMerge } from 'tailwind-merge'
+
+import type { TTagResponse } from '~/apis/common/get-tags'
+
+type TProperties = {
+  tags: TTagResponse[]
+  is_premium?: boolean
+  className?: string
+}
+
+export const Tags = (properties: TProperties) => {
+  const { tags, is_premium, className } = properties
+  return (
+    <div className={twMerge('flex gap-2 uppercase max-sm:text-sm', className)}>
+      {tags?.map((tag) => (
+        <span
+          key={tag.id}
+          className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
+        >
+          {tag.name}
+        </span>
+      ))}
+      {is_premium && (
+        <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+          Premium Content
+        </span>
+      )}
+    </div>
+  )
+}

app/components/ui/title-dashboard.tsx

@@ -0,0 +1,13 @@
+type TitleDashboardProperties = {
+  title: string
+}
+export const TitleDashboard = (properties: TitleDashboardProperties) => {
+  const { title } = properties
+  return (
+    <div className="container">
+      <div className="mb-5 flex items-center justify-between">
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+    </div>
+  )
+}

app/configs/cookies.ts

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

app/configs/meta.ts

@@ -0,0 +1,27 @@
+import { MENU as ADMIN_MENU, SUB_MENU } from '~/layouts/admin/menu'
+
+export const APP = {
+  title: 'LegalGo',
+  description: 'LegalGo Platform Berita Dunia dan Indonesia.',
+  logo: '/images/logo.png',
+}
+
+type TMetaTitleConfig = {
+  path: string
+  title: string
+}[]
+
+export const META_TITLE_CONFIG: TMetaTitleConfig = [
+  {
+    path: '/',
+    title: 'Home',
+  },
+  {
+    path: '/lg-admin/login',
+    title: 'Login',
+  },
+  ...ADMIN_MENU.flatMap((menu) =>
+    menu.items.map((item) => ({ path: item.url, title: item.title })),
+  ),
+  ...SUB_MENU,
+]

app/configs/pages.ts

@@ -0,0 +1,6 @@
+export const AUTH_PAGES = [
+  '/lg-admin/login',
+  '/lg-admin/forgot-password',
+  '/lg-admin/reset-password',
+  '/lg-admin/register',
+]

app/contexts/admin.tsx

@@ -0,0 +1,57 @@
+import {
+  createContext,
+  useState,
+  useContext,
+  type PropsWithChildren,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
+import { z } from 'zod'
+
+export const uploadCategorySchema = z
+  .enum(['featured_image', 'ads', 'content', 'profile_picture'])
+  .optional()
+
+export type TUpload = z.infer<typeof uploadCategorySchema>
+
+type AdminContextProperties = {
+  isUploadOpen: TUpload
+  setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
+  uploadedFile?: string
+  setUploadedFile: Dispatch<SetStateAction<string | undefined>>
+  editProfile: boolean
+  setEditProfile: Dispatch<SetStateAction<boolean>>
+}
+
+const AdminContext = createContext<AdminContextProperties | undefined>(
+  undefined,
+)
+
+export const AdminProvider = ({ children }: PropsWithChildren) => {
+  const [isUploadOpen, setIsUploadOpen] = useState<TUpload>()
+  const [uploadedFile, setUploadedFile] = useState<string | undefined>()
+  const [editProfile, setEditProfile] = useState(false)
+
+  return (
+    <AdminContext.Provider
+      value={{
+        isUploadOpen,
+        setIsUploadOpen,
+        uploadedFile,
+        setUploadedFile,
+        editProfile,
+        setEditProfile,
+      }}
+    >
+      {children}
+    </AdminContext.Provider>
+  )
+}
+
+export const useAdminContext = (): AdminContextProperties => {
+  const context = useContext(AdminContext)
+  if (!context) {
+    throw new Error('useAdminContext must be used within a AdminProvider')
+  }
+  return context
+}

app/contexts/news.tsx

@@ -0,0 +1,63 @@
+import {
+  createContext,
+  useState,
+  useContext,
+  type PropsWithChildren,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
+
+import type { ModalProperties } from '~/components/dialog/success'
+
+type NewsContextProperties = {
+  isLoginOpen: boolean
+  setIsLoginOpen: Dispatch<SetStateAction<boolean>>
+  isRegisterOpen: boolean
+  setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
+  isForgetOpen: boolean
+  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
+  isSuccessOpen: ModalProperties['isOpen']
+  setIsSuccessOpen: Dispatch<
+    SetStateAction<ModalProperties['isOpen'] | undefined>
+  >
+  isSubscribeOpen: boolean
+  setIsSubscribeOpen: Dispatch<SetStateAction<boolean>>
+}
+
+const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
+
+export const NewsProvider = ({ children }: PropsWithChildren) => {
+  const [isLoginOpen, setIsLoginOpen] = useState(false)
+  const [isRegisterOpen, setIsRegisterOpen] = useState(false)
+  const [isForgetOpen, setIsForgetOpen] = useState(false)
+  const [isSuccessOpen, setIsSuccessOpen] =
+    useState<ModalProperties['isOpen']>()
+  const [isSubscribeOpen, setIsSubscribeOpen] = useState(false)
+
+  return (
+    <NewsContext.Provider
+      value={{
+        isLoginOpen,
+        setIsLoginOpen,
+        isRegisterOpen,
+        setIsRegisterOpen,
+        isForgetOpen,
+        setIsForgetOpen,
+        isSuccessOpen,
+        setIsSuccessOpen,
+        isSubscribeOpen,
+        setIsSubscribeOpen,
+      }}
+    >
+      {children}
+    </NewsContext.Provider>
+  )
+}
+
+export const useNewsContext = (): NewsContextProperties => {
+  const context = useContext(NewsContext)
+  if (!context) {
+    throw new Error('useNewsContext must be used within a NewsProvider')
+  }
+  return context
+}

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/hooks/use-click-outside.ts

@@ -0,0 +1,27 @@
+import { useEffect, type RefObject } from 'react'
+
+type Event = MouseEvent | TouchEvent
+
+export const useClickOutside = <T extends HTMLElement = HTMLElement>(
+  reference: RefObject<T | null>,
+  handler: (event: Event) => void,
+) => {
+  useEffect(() => {
+    const listener = (event: Event) => {
+      const element = reference?.current
+      if (!element || element.contains((event?.target as Node) || undefined)) {
+        return
+      }
+
+      handler(event)
+    }
+
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [reference, handler])
+}

app/layouts/admin/dashboard.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react'
+
+import { DialogProfile } from './dialog-profile'
+import { DialogUpload } from './dialog-upload'
+import { Navbar } from './navbar'
+import { Sidebar } from './sidebar'
+
+export const AdminDashboardLayout = (properties: PropsWithChildren) => {
+  const { children } = properties
+  return (
+    <div className="flex flex-col">
+      <Navbar />
+      <div className="flex">
+        <Sidebar />
+        <div className="min-h-[calc(100dvh-80px)] flex-1 p-8">{children}</div>
+      </div>
+
+      <DialogUpload />
+      <DialogProfile />
+    </div>
+  )
+}

app/layouts/admin/default.tsx

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
+
+export const AdminDefaultLayout = (properties: PropsWithChildren) => {
+  const { children } = properties
+  return (
+    <main className="font-admin relative min-h-dvh bg-[#F7F8FC]">
+      {children}
+      <Toaster />
+    </main>
+  )
+}

app/layouts/admin/dialog-profile.tsx

@@ -0,0 +1,126 @@
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } 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 { InputFile } from '~/components/ui/input-file'
+import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
+
+export const profileSchema = z.object({
+  name: z.string().min(1, 'Wajib diisi'),
+  email: z.string().email('Email tidak valid'),
+  profile_picture: z.string().url({
+    message: 'URL tidak valid',
+  }),
+})
+
+export type TProfileSchema = z.infer<typeof profileSchema>
+
+export const DialogProfile = () => {
+  const { editProfile, setEditProfile } = useAdminContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const { staffData } = loaderData || {}
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TProfileSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(profileSchema),
+    values: {
+      name: staffData?.name || '',
+      email: staffData?.email || '',
+      profile_picture: staffData?.profile_picture || '',
+    },
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setEditProfile(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <Dialog
+      open={editProfile}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setEditProfile(false)
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="w-full 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"
+        >
+          <DialogTitle
+            as="h3"
+            className="text-xl font-bold"
+          >
+            Update Profile
+          </DialogTitle>
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/admin/profile"
+            >
+              <Input
+                name="name"
+                id="name"
+                label="Nama"
+                placeholder="Enter your name"
+              />
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+              <InputFile
+                name="profile_picture"
+                id="profile_picture"
+                label="Gambar Profil"
+                placeholder="Unggah gambar profil Anda"
+                category="profile_picture"
+              />
+              <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Simpan
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/layouts/admin/dialog-upload.tsx

@@ -0,0 +1,139 @@
+import { Dialog, DialogBackdrop, DialogPanel, Input } from '@headlessui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, type ChangeEvent } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { Button } from '~/components/ui/button'
+import { uploadCategorySchema, useAdminContext } from '~/contexts/admin'
+
+export const uploadSchema = z.object({
+  file: z.instanceof(File),
+  category: uploadCategorySchema,
+})
+
+export type TUploadSchema = z.infer<typeof uploadSchema>
+
+export const DialogUpload = () => {
+  const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
+  const fetcher = useFetcher()
+  const maxFileSize = 10 * 1024 // 10MB
+
+  const formMethods = useRemixForm<TUploadSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(uploadSchema),
+  })
+
+  const { handleSubmit, register, setValue } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setUploadedFile(fetcher.data.uploadData.data.file_url)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  const handleChange = async function (event: ChangeEvent<HTMLInputElement>) {
+    event.preventDefault()
+    if (event.target.files && event.target.files[0]) {
+      const files: File[] = [...event.target.files]
+
+      onChange(files, event)
+    }
+  }
+
+  const onChange = async function (
+    files: File[],
+    event: ChangeEvent<HTMLInputElement>,
+  ) {
+    const file = files[0]
+    const img = new Image()
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please upload an image file.')
+      return
+    }
+
+    if (file.size > maxFileSize * 1024) {
+      toast.error(`File size is too big!`)
+      return
+    }
+
+    img.addEventListener('load', () => {
+      handleFiles(event)
+    })
+
+    img.src = URL.createObjectURL(file)
+  }
+
+  const handleFiles = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files
+    if (files && files.length > 0) {
+      const file = files[0]
+      setValue('file', file)
+    }
+  }
+
+  return (
+    <Dialog
+      open={!!isUploadOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsUploadOpen(undefined)
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="w-full 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"
+        >
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/admin/upload"
+              encType="multipart/form-data"
+            >
+              <Input
+                type="file"
+                id="input-file-upload"
+                accept="image/*"
+                className="h-[42px] w-full cursor-pointer rounded-md border border-[#DFDFDF] p-2"
+                onChange={handleChange}
+              />
+              <input
+                type="hidden"
+                id="input-file-upload-type"
+                value={isUploadOpen}
+                {...register('category')}
+              />
+              <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Upload
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/layouts/admin/menu.ts

@@ -0,0 +1,106 @@
+import {
+  BriefcaseIcon,
+  ChartBarSquareIcon,
+  ClipboardDocumentCheckIcon,
+  DocumentCurrencyDollarIcon,
+  MegaphoneIcon,
+  NewspaperIcon,
+  PresentationChartLineIcon,
+  TagIcon,
+  UsersIcon,
+} from '@heroicons/react/24/solid'
+import type { ComponentType, SVGProps } from 'react'
+
+type TMenu = {
+  group: string
+  items: {
+    title: string
+    url: string
+    icon: ComponentType<SVGProps<SVGSVGElement>>
+  }[]
+}
+
+export const MENU: TMenu[] = [
+  {
+    group: 'Menu',
+    items: [
+      {
+        title: 'Dasbor',
+        url: '/lg-admin',
+        icon: ChartBarSquareIcon,
+      },
+      {
+        title: 'Pengguna',
+        url: '/lg-admin/users',
+        icon: UsersIcon,
+      },
+      {
+        title: 'Artikel',
+        url: '/lg-admin/contents',
+        icon: NewspaperIcon,
+      },
+      {
+        title: 'Spanduk Iklan',
+        url: '/lg-admin/advertisements',
+        icon: MegaphoneIcon,
+      },
+      {
+        title: 'Pelanggan',
+        url: '/lg-admin/subscriptions',
+        icon: PresentationChartLineIcon,
+      },
+    ],
+  },
+  {
+    group: 'Others',
+    items: [
+      {
+        title: 'Kategori',
+        url: '/lg-admin/categories',
+        icon: ClipboardDocumentCheckIcon,
+      },
+      {
+        title: 'Tag',
+        url: '/lg-admin/tags',
+        icon: TagIcon,
+      },
+      {
+        title: 'Paket Berlangganan',
+        url: '/lg-admin/subscribe-plan',
+        icon: DocumentCurrencyDollarIcon,
+      },
+      {
+        title: 'Staf',
+        url: '/lg-admin/staffs',
+        icon: BriefcaseIcon,
+      },
+    ],
+  },
+]
+
+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/layouts/admin/navbar.tsx

@@ -0,0 +1,92 @@
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import {
+  ArrowRightStartOnRectangleIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { APP } from '~/configs/meta'
+import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
+
+export const Navbar = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const { staffData } = loaderData || {}
+  const fetcher = useFetcher()
+  const { setEditProfile } = useAdminContext()
+
+  return (
+    <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
+      <Link
+        to="/"
+        className="h-full"
+      >
+        <img
+          src={APP.logo}
+          alt={APP.title}
+          className="h-3/4 w-auto sm:h-full"
+        />
+      </Link>
+      <div className="flex items-center gap-x-8">
+        <Popover className="relative">
+          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
+            <div className="flex items-center space-x-3">
+              <img
+                src={
+                  staffData?.profile_picture ||
+                  '/images/profile-placeholder.svg'
+                }
+                onError={(event) => {
+                  event.currentTarget.src = '/images/profile-placeholder.svg'
+                }}
+                alt={staffData?.name}
+                className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+              />
+
+              <span className="text-sm">{staffData?.name}</span>
+            </div>
+            <ChevronDownIcon className="size-4 opacity-50" />
+          </PopoverButton>
+          <PopoverPanel
+            anchor={{ to: 'bottom', gap: '8px' }}
+            transition
+            className="flex w-3xs flex-col divide-y divide-black/5 rounded-xl border border-[#ECECEC] bg-white transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+          >
+            <div className="p-2">
+              <Button
+                variant="secondary"
+                className="w-full justify-start rounded p-1 px-3 text-base font-bold"
+                onClick={() => {
+                  setEditProfile(true)
+                }}
+              >
+                <UserIcon className="size-5" />
+                <span>Profile</span>
+              </Button>
+            </div>
+            <div className="p-2">
+              <fetcher.Form
+                method="POST"
+                action="/actions/admin/logout"
+                className="grid"
+              >
+                <Button
+                  disabled={fetcher.state !== 'idle'}
+                  isLoading={fetcher.state !== 'idle'}
+                  type="submit"
+                  className="w-full justify-start rounded p-1 px-3 text-base font-bold"
+                  variant="secondary"
+                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
+                >
+                  <span>Logout</span>
+                </Button>
+              </fetcher.Form>
+            </div>
+          </PopoverPanel>
+        </Popover>
+      </div>
+    </div>
+  )
+}

app/layouts/admin/sidebar.tsx

@@ -0,0 +1,48 @@
+import { Link, useLocation } from 'react-router'
+import { twMerge } from 'tailwind-merge'
+
+import { MENU } from './menu'
+
+export const Sidebar = () => {
+  const { pathname } = useLocation()
+  const segments = pathname.split('/')
+  const path = segments.length > 3 ? segments.slice(0, 3).join('/') : pathname
+
+  return (
+    <div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
+      {MENU.map(({ group, items }) => (
+        <div
+          className="flex flex-col"
+          key={group}
+        >
+          <div className="px-5 pb-4 text-[#4C5CA0]/50 uppercase">{group}</div>
+          {items.map(({ title, url, icon: Icon }) => (
+            <Link
+              to={url}
+              key={`${group}-${title}`}
+              className={twMerge(
+                path === url ? 'bg-[#707FDD]/10 font-bold' : '',
+                'group/menu flex h-[42px] w-[240px] items-center gap-x-3 rounded-md px-5 transition hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20',
+              )}
+            >
+              <Icon
+                className={twMerge(
+                  path === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
+                  'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
+                )}
+              />
+              <span
+                className={twMerge(
+                  path === url ? 'text-[#5363AB]' : 'text-[#273240]',
+                  'text-base transition-all group-hover/menu:text-[#5363AB]',
+                )}
+              >
+                {title}
+              </span>
+            </Link>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

app/layouts/header-menu-mobile.tsx

@@ -1,88 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'react-router'
-
-import { HeaderSearch } from '~/layouts/header-search'
-
-import { MENU } from './menu'
-
-export default function HeaderMenuMobile() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-
-  const handleToggleMenu = (): void => {
-    setIsMenuOpen(!isMenuOpen)
-  }
-  return (
-    <>
-      <div className="relative z-50 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
-        <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
-          {/* Menu */}
-          <div
-            className={`z-50 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
-              isMenuOpen ? 'translate-x-0' : '-translate-x-full'
-            }`}
-          >
-            {/* Tombol Close */}
-            <button
-              onClick={handleToggleMenu}
-              className="fixed top-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-3.5 w-3.5 fill-white"
-                viewBox="0 0 320.591 320.591"
-              >
-                <path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
-                <path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
-              </svg>
-            </button>
-
-            {/* List Menu */}
-            <ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
-              {MENU.map((item) => (
-                <li className="px-3 max-lg:border-b max-lg:py-3">
-                  <Link
-                    key={item.title}
-                    to={item.url}
-                    className={
-                      'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
-                    }
-                  >
-                    {item.title}
-                  </Link>
-                </li>
-              ))}
-
-              <button className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden">
-                Akun
-              </button>
-            </ul>
-          </div>
-
-          {/* Search dan Toggle Button */}
-          <div className="align-center flex w-full justify-center">
-            <button
-              onClick={handleToggleMenu}
-              className="h-[63px] border border-white px-4 lg:hidden"
-            >
-              <svg
-                className="h-7 w-7"
-                fill="#fff"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <div className="w-full py-3">
-              <HeaderSearch></HeaderSearch>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

app/layouts/header-menu.tsx

@@ -1,28 +0,0 @@
-import { Link } from 'react-router'
-
-import HeaderMenuMobile from '~/layouts/header-menu-mobile'
-
-import { HeaderSearch } from './header-search'
-import { MENU } from './menu'
-
-export const HeaderMenu = () => {
-  return (
-    <>
-      <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
-        {MENU.map((item) => (
-          <Link
-            key={item.title}
-            to={item.url}
-            className={
-              'flex h-full items-center justify-center border-r border-white px-[35px]'
-            }
-          >
-            {item.title}
-          </Link>
-        ))}
-        <HeaderSearch />
-      </div>
-      <HeaderMenuMobile />
-    </>
-  )
-}

app/layouts/header-top.tsx

@@ -1,42 +0,0 @@
-import { Link } from 'react-router'
-
-import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'
-
-export const HeaderTop = () => {
-  return (
-    <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
-      <Link
-        to="/news"
-        className="mt-2 h-full py-2"
-      >
-        <img
-          src={APP.logo}
-          alt={APP.title}
-          className="h-3/4 w-auto sm:h-full"
-        />
-      </Link>
-      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
-        {APP.description}
-      </div>
-      <div className="flex items-center gap-[15px]">
-        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
-          About Us
-        </Button>
-        <Button
-          variant="newsSecondary"
-          className="hidden sm:block"
-        >
-          Akun
-        </Button>
-        <div className="w-[50px] sm:w-[60px]">
-          <img
-            alt="language"
-            src="/flags/id.svg"
-            className="shadow-sm"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

app/layouts/news/banner.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@headlessui/react'
+import Autoplay from 'embla-carousel-autoplay'
+import useEmblaCarousel from 'embla-carousel-react'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+
+import type { loader } from '~/routes/_news'
+
+export const Banner = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { adsData } = loaderData || {}
+  const [emblaReference] = useEmblaCarousel({ loop: true }, [
+    Autoplay({
+      stopOnInteraction: false,
+      stopOnMouseEnter: true,
+    }),
+  ])
+  const fetcher = useFetcher()
+
+  return (
+    <div className="">
+      <div className="relative">
+        <div
+          className="embla overflow-hidden"
+          ref={emblaReference}
+        >
+          <div className="embla__container flex">
+            {adsData?.map(({ image_url: urlImage, url, id }, index) => (
+              <fetcher.Form
+                method="POST"
+                action={`/actions/log/ads/${id}`}
+                key={index}
+                className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
+              >
+                <Button
+                  className="h-full w-full cursor-pointer py-2"
+                  type="submit"
+                  onClick={() => window.open(url, '_blank')}
+                >
+                  <img
+                    src={urlImage}
+                    alt={id}
+                    className="h-[70px] w-[100%] object-contain object-center sm:h-full"
+                  />
+                </Button>
+              </fetcher.Form>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/layouts/news/default.tsx

@@ -0,0 +1,49 @@
+import { type PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
+
+import { DialogSuccess } from '~/components/dialog/success'
+import { useNewsContext } from '~/contexts/news'
+import { Banner } from '~/layouts/news/banner'
+import { DialogForgotPassword } from '~/layouts/news/dialog-forgot-password'
+import { DialogLogin } from '~/layouts/news/dialog-login'
+
+import { DialogRegister } from './dialog-register'
+import { DialogSubscribePlan } from './dialog-subscribe-plan'
+import { FooterLinks } from './footer-links'
+import { FooterNewsletter } from './footer-newsletter'
+import { HeaderMenu } from './header-menu'
+import { HeaderTop } from './header-top'
+
+export const NewsDefaultLayout = (properties: PropsWithChildren) => {
+  const { children } = properties
+  const { isSuccessOpen, setIsSuccessOpen } = useNewsContext()
+  return (
+    <main className="relative min-h-dvh bg-[#ECECEC]">
+      <header>
+        <HeaderTop />
+        <HeaderMenu />
+      </header>
+      <div className="sm:mx-[50px] sm:my-[25px] sm:grid sm:gap-y-[25px]">
+        <Banner />
+        {children}
+      </div>
+
+      <footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
+        <FooterNewsletter />
+        <FooterLinks />
+      </footer>
+
+      <Toaster />
+      <DialogLogin />
+      <DialogRegister />
+      <DialogForgotPassword />
+      <DialogSubscribePlan />
+      <DialogSuccess
+        isOpen={isSuccessOpen}
+        onClose={() => {
+          setIsSuccessOpen(undefined)
+        }}
+      />
+    </main>
+  )
+}

app/layouts/news/dialog-forgot-password.tsx

@@ -0,0 +1,49 @@
+import { useFetcher } from 'react-router'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
+
+export const DialogForgotPassword = () => {
+  const { isForgetOpen, setIsForgetOpen } = useNewsContext()
+  const fetcher = useFetcher()
+
+  return (
+    <DialogNews
+      isOpen={isForgetOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsForgetOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-full max-w-md">
+          <form>
+            {/* Input Email / No Telepon */}
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="mb-1 block text-gray-700"
+              >
+                Email/No. Telepon
+              </label>
+              <input
+                type="text"
+                placeholder="Contoh: legal@legalgo.id"
+                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+                required
+              />
+            </div>
+
+            {/* Tombol Masuk */}
+            <Button className="mt-5 w-full rounded-md py-2">
+              Reset Password
+            </Button>
+          </form>
+        </div>
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-login.tsx

@@ -0,0 +1,131 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { useNewsContext } from '~/contexts/news'
+
+export const loginSchema = z.object({
+  email: z.string().email('Email tidak valid'),
+  password: z.string().min(6, 'Minimal 6 karakter'),
+})
+
+export type TLoginSchema = z.infer<typeof loginSchema>
+
+export const DialogLogin = () => {
+  const {
+    setIsRegisterOpen,
+    setIsLoginOpen,
+    setIsForgetOpen,
+    setIsSubscribeOpen,
+    isLoginOpen,
+  } = useNewsContext()
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TLoginSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(loginSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+      return
+    }
+
+    if (fetcher.data?.success) {
+      setIsLoginOpen(false)
+    }
+
+    if (fetcher.data?.user.subscribe?.subscribe_plan?.code === 'basic') {
+      setIsSubscribeOpen(true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isLoginOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsLoginOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex items-center justify-center">
+        <div className="w-full max-w-md">
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/login"
+            >
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-600">Lupa Kata Sandi?</span>
+                <Button
+                  onClick={() => {
+                    setIsLoginOpen(false)
+                    setIsForgetOpen(true)
+                  }}
+                  variant="link"
+                  size="fit"
+                >
+                  Reset Kata Sandi
+                </Button>
+              </div>
+
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Masuk
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+
+          {/* Link Daftar */}
+          <div className="mt-4 text-center text-sm">
+            Belum punya akun?{' '}
+            <Button
+              onClick={() => {
+                setIsLoginOpen(false)
+                setIsRegisterOpen(true)
+              }}
+              variant="link"
+              size="fit"
+            >
+              Daftar Disini
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-register.tsx

@@ -0,0 +1,159 @@
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { Input } from '~/components/ui/input'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export const registerSchema = z
+  .object({
+    email: z.string().email('Email tidak valid'),
+    password: z.string().min(6, 'Minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
+    phone: z.string().min(10, 'No telepon tidak valid'),
+    subscribe_plan: z
+      .object({
+        id: z.string(),
+        code: z.string(),
+        name: z.string(),
+      })
+      .optional()
+      .nullable()
+      .refine((data) => !!data, {
+        message: 'Pilih paket berlangganan',
+      }),
+  })
+  .refine((field) => field.password === field.rePassword, {
+    message: 'Kata sandi tidak sama',
+    path: ['rePassword'],
+  })
+
+export type TRegisterSchema = z.infer<typeof registerSchema>
+
+export const DialogRegister = () => {
+  const {
+    setIsLoginOpen,
+    setIsRegisterOpen,
+    setIsSuccessOpen,
+    isRegisterOpen,
+  } = useNewsContext()
+  const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { subscribePlanData: subscribePlan } = loaderData || {}
+
+  const formMethods = useRemixForm<TRegisterSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(registerSchema),
+  })
+
+  const { handleSubmit, control } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setIsRegisterOpen(false)
+      setIsSuccessOpen('register')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isRegisterOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsRegisterOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-full max-w-md">
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/register"
+            >
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              <Input
+                id="re-password"
+                label="Ulangi Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="rePassword"
+                type="password"
+              />
+
+              <Input
+                id="phone"
+                label="No. Telepon"
+                placeholder="Masukkan No. Telepon"
+                name="phone"
+              />
+
+              <Combobox
+                id="subscribe_plan"
+                name="subscribe_plan"
+                label="Paket Berlangganan"
+                placeholder="Pilih Paket Berlangganan"
+                options={subscribePlan}
+              />
+
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Daftar
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+
+          {/* Link Login */}
+          <div className="mt-4 text-center text-sm">
+            Sudah punya akun?{' '}
+            <Button
+              onClick={() => {
+                setIsLoginOpen(true)
+                setIsRegisterOpen(false)
+              }}
+              variant="link"
+              size="fit"
+            >
+              Masuk Disini
+            </Button>
+          </div>
+        </div>
+        <DevTool control={control} />
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-subscribe-plan.tsx

@@ -0,0 +1,96 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export const subscribeSchema = z.object({
+  subscribe_plan: z
+    .object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    })
+    .optional()
+    .nullable()
+    .refine((data) => !!data, {
+      message: 'Silakan pilih paket berlangganan',
+    }),
+})
+
+export type TSubscribeSchema = z.infer<typeof subscribeSchema>
+
+export const DialogSubscribePlan = () => {
+  const { setIsSubscribeOpen, setIsSuccessOpen, isSubscribeOpen } =
+    useNewsContext()
+  const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { subscribePlanData: subscribePlan } = loaderData || {}
+
+  const formMethods = useRemixForm<TSubscribeSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(subscribeSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setIsSubscribeOpen(false)
+      setIsSuccessOpen('payment')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isSubscribeOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsSubscribeOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan Pilih Paket Berlangganan Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            className="w-full max-w-md"
+            action="/actions/subscribe"
+          >
+            <Combobox
+              id="subscribe_plan"
+              name="subscribe_plan"
+              label="Paket Berlangganan"
+              placeholder="Pilih Paket Berlangganan"
+              options={subscribePlan}
+            />
+
+            <Button
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
+              type="submit"
+              className="mt-5 w-full rounded-md py-2"
+            >
+              Lanjutkan
+            </Button>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </DialogNews>
+  )
+}

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 (
@@ -9,7 +9,7 @@ export const FooterNewsletter = () => {
       <div className="col-span-2 hidden gap-y-6 sm:grid">
         <div className="h-[75px] bg-white p-3">
           <Link
-            to="/news"
+            to="/"
             className="h-full"
           >
             <img
@@ -34,7 +34,7 @@ export const FooterNewsletter = () => {
           />
           <Button
             type="submit"
-            variant="newsPrimaryOutline"
+            variant="primaryOutline"
             size="block"
           >
             Subscribe
@@ -44,7 +44,7 @@ export const FooterNewsletter = () => {
       <div className="block sm:hidden">
         <div className="h-[60px] bg-white p-3">
           <Link
-            to="/news"
+            to="/"
             className="h-full"
           >
             <img