feat: add profile update functionality with form validation and API integration

app/apis/admin/create-ads.ts

@@ -2,6 +2,7 @@ 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({
@@ -17,8 +18,8 @@ export const createAdsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const transformedPayload = {
     ...payload,
-    start_date: new Date(payload.start_date).toISOString(),
-    end_date: new Date(payload.end_date).toISOString(),
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
   }
   try {
     const { data } = await HttpServer(restParameters).post(

app/apis/admin/create-news.ts

@@ -2,6 +2,7 @@ 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({
@@ -20,7 +21,7 @@ export const createNewsRequest = async (parameters: TParameter) => {
     ...restPayload,
     categories: categories.map((category) => category?.id),
     tags: tags?.map((tag) => tag?.id) || [],
-    live_at: new Date(live_at).toISOString(),
+    live_at: datePayload(live_at),
   }
   try {
     const { data } = await HttpServer(restParameters).post(

app/apis/admin/update-ads.ts

@@ -2,6 +2,7 @@ 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({
@@ -18,8 +19,8 @@ export const updateAdsRequest = async (parameters: TParameters) => {
   const { id, ...restPayload } = payload
   const transformedPayload = {
     ...restPayload,
-    start_date: new Date(payload.start_date).toISOString(),
-    end_date: new Date(payload.end_date).toISOString(),
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
   }
   try {
     const { data } = await HttpServer(restParameters).put(

app/apis/admin/update-news.ts

@@ -2,6 +2,7 @@ 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({
@@ -20,7 +21,7 @@ export const updateNewsRequest = async (parameters: TParameter) => {
     ...restPayload,
     categories: categories.map((category) => category?.id),
     tags: tags?.map((tag) => tag?.id) || [],
-    live_at: new Date(live_at).toISOString(),
+    live_at: datePayload(live_at),
   }
   try {
     const { data } = await HttpServer(restParameters).put(

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.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/news/login-user.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { type TLoginSchema } from '~/layouts/news/form-login'
+import { type TLoginSchema } from '~/layouts/news/dialog-login'
 import { HttpServer } from '~/libs/http-server'
 
 export const loginResponseSchema = z.object({

app/apis/news/register-user.ts

@@ -1,4 +1,4 @@
-import type { TRegisterSchema } from '~/layouts/news/form-register'
+import type { TRegisterSchema } from '~/layouts/news/dialog-register'
 import { HttpServer } from '~/libs/http-server'
 
 import { loginResponseSchema } from './login-user'

app/components/dialog/delete.tsx

@@ -23,15 +23,13 @@ export const DialogDelete = (properties: TProperties) => {
   const fetcher = useFetcher()
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       close()
       toast.success(`${title} berhasil dihapus!`)
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -71,7 +69,7 @@ export const DialogDelete = (properties: TProperties) => {
             >
               <Button
                 type="submit"
-                variant="newsDanger"
+                variant="danger"
                 className="text-md h-[42px] rounded-md"
                 disabled={fetcher.state !== 'idle'}
                 isLoading={fetcher.state !== 'idle'}

app/components/dialog/success.tsx

@@ -92,7 +92,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   />
                   <Button
                     className="mt-5 w-full rounded-md"
-                    variant="newsPrimary"
+                    variant="primary"
                     as={Link}
                     to="/"
                     onClick={onClose}
@@ -111,7 +111,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   {userData ? (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsSecondary"
+                      variant="outline"
                       onClick={() => {
                         onClose()
                         setIsSubscribeOpen(true)
@@ -122,7 +122,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   ) : (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsPrimary"
+                      variant="primary"
                       onClick={() => {
                         onClose()
                         setIsLoginOpen(true)

app/components/icons/chevron.tsx

@@ -1,25 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-/**
- * Note: `ChevronIcon` default mengarah ke bawah.
- * Gunakan class `rotate-xx` untuk mengubah arah ikon.
- */
-export const ChevronIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={21}
-      height={21}
-      viewBox="0 0 21 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={properties.className}
-      {...properties}
-    >
-      <path
-        d="M10.197 13.623l5.008-5.008-1.177-1.18-3.83 3.834-3.831-3.833-1.178 1.178 5.008 5.009z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

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

@@ -5,7 +5,6 @@ import {
   Bars3BottomLeftIcon,
   Bars3BottomRightIcon,
   Bars3Icon,
-  Bars4Icon,
   BoldIcon,
   CloudArrowUpIcon,
   CodeBracketIcon,
@@ -21,7 +20,12 @@ import {
   PhotoIcon,
   StrikethroughIcon,
   SwatchIcon,
-} from '@heroicons/react/20/solid'
+  XCircleIcon,
+} from '@heroicons/react/24/solid'
+import {
+  Bars3BottomCenterIcon,
+  QuotationMarkIcon,
+} from '@sidekickicons/react/24/solid'
 import type { Editor } from '@tiptap/react'
 import {
   type SetStateAction,
@@ -202,7 +206,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'center' })}
             title="Align Center"
           >
-            <Bars3Icon className="size-4" />
+            <Bars3BottomCenterIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('right').run()}
@@ -224,7 +228,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'justify' })}
             title="Align Justify"
           >
-            <Bars4Icon className="size-4" />
+            <Bars3Icon className="size-4" />
           </EditorButton>
         </div>
         <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -258,14 +262,14 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <H3Icon className="size-4" />
           </EditorButton>
-          {/* <EditorButton
-              onClick={() => editor.chain().focus().setParagraph().run()}
-              isActive={editor.isActive('paragraph')}
-              title="Paragraph"
-              disabled={disabled}
-            >
-              <RiParagraph />
-            </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')}
@@ -282,32 +286,40 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <NumberedListIcon className="size-4" />
           </EditorButton>
-          <EditorButton
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            isActive={editor.isActive('codeBlock')}
-            title="Code Block"
+          {/* <EditorButton
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            isActive={editor.isActive('paragraph')}
+            title="Paragraph"
             disabled={disabled}
           >
-            <CodeBracketIcon className="size-4" />
+            <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>
-        </div>
-        {/* <div className="flex items-start gap-1 px-1">
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleBlockquote().run()}
-              isActive={editor.isActive('blockquote')}
-              title="Blockquote"
-              disabled={disabled}
-            >
-              <RiDoubleQuotesL />
-            </EditorButton>
-            <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> */}
+            </EditorButton> */}
+        </div>
         {/* <div className="flex items-start gap-1 px-1">
             <EditorButton
               onClick={() => editor.chain().focus().setHardBreak().run()}
@@ -316,16 +328,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <RiTextWrap />
             </EditorButton>
-            <EditorButton
-              onClick={() => {
-                editor.chain().focus().unsetAllMarks().run()
-                editor.chain().focus().clearNodes().run()
-              }}
-              title="Clear Format"
-              disabled={disabled}
-            >
-              <RiFormatClear />
-            </EditorButton>
           </div> */}
         <div className="flex items-start gap-1 px-1">
           <div className="relative">
@@ -359,7 +361,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                       setIsUploadOpen('content')
                     }}
                   >
-                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+                    <CloudArrowUpIcon className="size-4 text-gray-500/50" />
                   </Button>
                 </div>
               </div>

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

@@ -1,4 +1,4 @@
-import { CodeBracketSquareIcon } from '@heroicons/react/20/solid'
+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'

app/components/ui/button.tsx

@@ -1,5 +1,5 @@
 import { Button as HeadlessButton } from '@headlessui/react'
-import { ArrowPathIcon } from '@heroicons/react/20/solid'
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -9,28 +9,30 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary:
+        primary:
           'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
-        newsDanger:
+        danger:
           'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
-        newsPrimaryOutline:
+        primaryOutline:
           'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
-        newsSecondary:
+        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: '',
         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 rounded-full',
+        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',
     },
   },
@@ -42,6 +44,7 @@ type ButtonBaseProperties = {
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
   isLoading?: boolean
+  icon?: ReactNode
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -62,6 +65,7 @@ export const Button = <C extends ElementType = 'button'>(
     size,
     className,
     isLoading = false,
+    icon,
     ...restProperties
   } = properties
   const Component = as || HeadlessButton
@@ -72,7 +76,7 @@ export const Button = <C extends ElementType = 'button'>(
       className={classes}
       {...restProperties}
     >
-      {isLoading && <ArrowPathIcon className="animate-spin" />}
+      {isLoading ? <ArrowPathIcon className="size-5 animate-spin" /> : icon}
       {children}
     </Component>
   )

app/components/ui/combobox.tsx

@@ -7,7 +7,7 @@ import {
   ComboboxOptions,
   ComboboxOption,
 } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -96,7 +96,7 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
                 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',
+                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 placeholder:text-inherit',
                   className,
                 )}
               />

app/components/ui/input-file.tsx

@@ -1,5 +1,5 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
-import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
+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'
@@ -80,7 +80,7 @@ export const InputFile = (properties: TInputProperties) => {
           setIsUploadOpen(category)
         }}
       >
-        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+        <CloudArrowUpIcon className="size-4 text-gray-500/50" />
       </Button>
     </Field>
   )

app/components/ui/input.tsx

@@ -83,7 +83,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
         >
           <EyeIcon
             className={twMerge(
-              'h-4 w-4',
+              'size-4',
               inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
             )}
           />

app/components/ui/news-author.tsx

@@ -15,10 +15,10 @@ export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
         <img
           src={author?.profile_picture}
           alt={author?.name}
-          className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
+          className="size-12 rounded-full bg-[#C4C4C4] object-cover"
         />
       ) : (
-        <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
+        <ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
       )}
 
       <div>

app/components/ui/newsletter.tsx

@@ -45,7 +45,7 @@ export const Newsletter = (property: NewsletterProperties) => {
             />
             <Button
               type="submit"
-              variant="newsPrimary"
+              variant="primary"
               size="block"
             >
               Subscribe

app/components/ui/social-share.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon } from '@heroicons/react/20/solid'
+import { LinkIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 import {
   FacebookShareButton,
@@ -39,7 +39,7 @@ export const SocialShareButtons = ({
         onClick={handleCopyLink}
         className="relative cursor-pointer"
       >
-        <LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 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!
@@ -51,28 +51,28 @@ export const SocialShareButtons = ({
         url={url}
         title={title}
       >
-        <FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </FacebookShareButton>
 
       <LinkedinShareButton
         url={url}
         title={title}
       >
-        <LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </LinkedinShareButton>
 
       <TwitterShareButton
         url={url}
         title={title}
       >
-        <XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </TwitterShareButton>
 
       <button
         onClick={handleInstagramShare}
         className="cursor-pointer"
       >
-        <InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </button>
     </div>
   )

app/components/ui/table-search.tsx

@@ -1,5 +1,5 @@
 import { Field, Input, Label, Select } from '@headlessui/react'
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 
 interface SearchFilterProperties {
@@ -42,7 +42,7 @@ export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
               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="h-5 w-5 text-[#363636]" />
+              <MagnifyingGlassIcon className="size-5 text-[#363636]" />
             </div>
           </div>
         </Field>

app/contexts/admin.tsx

@@ -19,6 +19,8 @@ type AdminContextProperties = {
   setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
   uploadedFile?: string
   setUploadedFile: Dispatch<SetStateAction<string | undefined>>
+  editProfile: boolean
+  setEditProfile: Dispatch<SetStateAction<boolean>>
 }
 
 const AdminContext = createContext<AdminContextProperties | undefined>(
@@ -28,6 +30,7 @@ const AdminContext = createContext<AdminContextProperties | 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
@@ -36,6 +39,8 @@ export const AdminProvider = ({ children }: PropsWithChildren) => {
         setIsUploadOpen,
         uploadedFile,
         setUploadedFile,
+        editProfile,
+        setEditProfile,
       }}
     >
       {children}

app/layouts/admin/dashboard.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
+import { DialogProfile } from './dialog-profile'
 import { DialogUpload } from './dialog-upload'
 import { Navbar } from './navbar'
 import { Sidebar } from './sidebar'
@@ -15,6 +16,7 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
       </div>
 
       <DialogUpload />
+      <DialogProfile />
     </div>
   )
 }

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, 'Name is required'),
+  email: z.string().email('Email is invalid'),
+  profile_picture: z.string().url({
+    message: 'URL must be 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="Name"
+                placeholder="Enter your name"
+              />
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+              <InputFile
+                name="profile_picture"
+                id="profile_picture"
+                label="Profile Picture"
+                placeholder="Upload your profile picture"
+                category="profile_picture"
+              />
+              <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Save
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/layouts/admin/dialog-upload.tsx

@@ -1,6 +1,7 @@
 import { Dialog, DialogBackdrop, DialogPanel, Input } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+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'
@@ -18,7 +19,6 @@ export type TUploadSchema = z.infer<typeof uploadSchema>
 export const DialogUpload = () => {
   const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
   const maxFileSize = 10 * 1024 // 10MB
 
   const formMethods = useRemixForm<TUploadSchema>({
@@ -30,16 +30,15 @@ export const DialogUpload = () => {
   const { handleSubmit, register, setValue } = formMethods
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    setUploadedFile(fetcher.data.uploadData.data.file_url)
-
-    setError(undefined)
+    if (fetcher.data?.success) {
+      setUploadedFile(fetcher.data.uploadData.data.file_url)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   const handleChange = async function (event: ChangeEvent<HTMLInputElement>) {
     event.preventDefault()
@@ -58,12 +57,12 @@ export const DialogUpload = () => {
     const img = new Image()
 
     if (!file.type.startsWith('image/')) {
-      setError('Please upload an image file.')
+      toast.error('Please upload an image file.')
       return
     }
 
     if (file.size > maxFileSize * 1024) {
-      setError(`File size is too big!`)
+      toast.error(`File size is too big!`)
       return
     }
 
@@ -100,7 +99,7 @@ export const DialogUpload = () => {
       <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"
+          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
@@ -110,9 +109,6 @@ export const DialogUpload = () => {
               action="/actions/admin/upload"
               encType="multipart/form-data"
             >
-              {error && (
-                <div className="text-sm text-red-500 capitalize">{error}</div>
-              )}
               <Input
                 type="file"
                 id="input-file-upload"

app/layouts/admin/menu.ts

@@ -7,7 +7,7 @@ import {
   PresentationChartLineIcon,
   TagIcon,
   UsersIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import type { SVGProps } from 'react'
 
 type TMenu = {

app/layouts/admin/navbar.tsx

@@ -1,16 +1,22 @@
 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 { ChevronIcon } from '~/components/icons/chevron'
 import { ProfileIcon } from '~/components/icons/profile'
 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">
@@ -32,35 +38,51 @@ export const Navbar = () => {
                 <img
                   src={staffData?.profile_picture}
                   alt={staffData?.name}
-                  className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+                  className="size-8 rounded-full bg-[#C4C4C4] object-cover"
                 />
               ) : (
-                <ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
+                <ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
               )}
 
               <span className="text-sm">{staffData?.name}</span>
             </div>
-            <ChevronIcon className="opacity-50" />
+            <ChevronDownIcon className="size-4 opacity-50" />
           </PopoverButton>
           <PopoverPanel
             anchor={{ to: 'bottom', gap: '8px' }}
             transition
-            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+            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"
           >
-            <fetcher.Form
-              method="POST"
-              action="/actions/admin/logout"
-              className="grid"
-            >
+            <div className="p-2">
               <Button
-                disabled={fetcher.state !== 'idle'}
-                isLoading={fetcher.state !== 'idle'}
-                type="submit"
-                className="w-full rounded p-1"
+                variant="secondary"
+                className="w-full justify-start rounded p-1 px-3 text-lg font-semibold"
+                onClick={() => {
+                  setEditProfile(true)
+                }}
               >
-                Logout
+                <UserIcon className="size-5" />
+                <span>Profile</span>
               </Button>
-            </fetcher.Form>
+            </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-lg font-semibold"
+                  variant="secondary"
+                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
+                >
+                  <span>Logout</span>
+                </Button>
+              </fetcher.Form>
+            </div>
           </PopoverPanel>
         </Popover>
       </div>

app/layouts/news/default.tsx

@@ -1,34 +1,22 @@
 import { type PropsWithChildren } from 'react'
 import { Toaster } from 'react-hot-toast'
 
-import { DialogNews } from '~/components/dialog/news'
 import { DialogSuccess } from '~/components/dialog/success'
 import { useNewsContext } from '~/contexts/news'
 import { Banner } from '~/layouts/news/banner'
-import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
-import { FormLogin } from '~/layouts/news/form-login'
-import { FormRegister } from '~/layouts/news/form-register'
+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 { FormSubscribePlan } from './form-subscribe-plan'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
 export const NewsDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
-  const {
-    isLoginOpen,
-    setIsLoginOpen,
-    isRegisterOpen,
-    setIsRegisterOpen,
-    isForgetOpen,
-    setIsForgetOpen,
-    isSuccessOpen,
-    setIsSuccessOpen,
-    isSubscribeOpen,
-    setIsSubscribeOpen,
-  } = useNewsContext()
+  const { isSuccessOpen, setIsSuccessOpen } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
       <header>
@@ -46,39 +34,10 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       </footer>
 
       <Toaster />
-
-      <DialogNews
-        isOpen={isLoginOpen}
-        onClose={() => setIsLoginOpen(false)}
-        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
-      >
-        <FormLogin />
-      </DialogNews>
-
-      <DialogNews
-        isOpen={isRegisterOpen}
-        onClose={() => setIsRegisterOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
-      >
-        <FormRegister />
-      </DialogNews>
-
-      <DialogNews
-        isOpen={isForgetOpen}
-        onClose={() => setIsForgetOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
-      >
-        <FormForgotPassword />
-      </DialogNews>
-
-      <DialogNews
-        isOpen={isSubscribeOpen}
-        onClose={() => setIsSubscribeOpen(false)}
-        description="Selamat Datang, silakan Pilih Subscribe Plan Anda untuk melanjutkan!"
-      >
-        <FormSubscribePlan />
-      </DialogNews>
-
+      <DialogLogin />
+      <DialogRegister />
+      <DialogForgotPassword />
+      <DialogSubscribePlan />
       <DialogSuccess
         isOpen={isSuccessOpen}
         onClose={() => {

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, 'Kata sandi 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, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Kata sandi 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: 'Please select a Subscribe Plan',
+      }),
+  })
+  .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="Subscribe Plan"
+                placeholder="Pilih Subscribe Plan"
+                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: 'Please select a subscription',
+    }),
+})
+
+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 Subscribe Plan 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="Subscribe Plan"
+              placeholder="Pilih Subscribe Plan"
+              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-newsletter.tsx

@@ -34,7 +34,7 @@ export const FooterNewsletter = () => {
           />
           <Button
             type="submit"
-            variant="newsPrimaryOutline"
+            variant="primaryOutline"
             size="block"
           >
             Subscribe

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

@@ -1,32 +0,0 @@
-import { Button } from '~/components/ui/button'
-
-export const FormForgotPassword = () => {
-  return (
-    <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>
-  )
-}

app/layouts/news/form-login.tsx

@@ -1,122 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { useNewsContext } from '~/contexts/news'
-
-export const loginSchema = z.object({
-  email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
-})
-
-export type TLoginSchema = z.infer<typeof loginSchema>
-
-export const FormLogin = () => {
-  const {
-    setIsRegisterOpen,
-    setIsLoginOpen,
-    setIsForgetOpen,
-    setIsSubscribeOpen,
-  } = useNewsContext()
-  const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
-
-  const formMethods = useRemixForm<TLoginSchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(loginSchema),
-  })
-
-  const { handleSubmit } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsLoginOpen(false)
-
-    if (fetcher.data?.user.subscribe_plan_code === 'basic') {
-      setIsSubscribeOpen(true)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <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"
-            />
-
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
-            <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>
-  )
-}

app/layouts/news/form-register.tsx

@@ -1,148 +0,0 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useRouteLoaderData } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-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, 'Kata sandi minimal 6 karakter'),
-    rePassword: z.string().min(6, 'Kata sandi 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: 'Please select a Subscribe Plan',
-      }),
-  })
-  .refine((field) => field.password === field.rePassword, {
-    message: 'Kata sandi tidak sama',
-    path: ['rePassword'],
-  })
-
-export type TRegisterSchema = z.infer<typeof registerSchema>
-
-export const FormRegister = () => {
-  const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
-    useNewsContext()
-  const [error, setError] = useState<string>()
-  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) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsRegisterOpen(false)
-    setIsSuccessOpen('register')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <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="Subscribe Plan"
-              placeholder="Pilih Subscribe Plan"
-              options={subscribePlan}
-            />
-
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
-            <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>
-  )
-}

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

@@ -1,88 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useRouteLoaderData } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-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: 'Please select a subscription',
-    }),
-})
-
-export type TSubscribeSchema = z.infer<typeof subscribeSchema>
-
-export const FormSubscribePlan = () => {
-  const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
-  const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
-  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) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsSubscribeOpen(false)
-    setIsSuccessOpen('payment')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <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="Subscribe Plan"
-            placeholder="Pilih Subscribe Plan"
-            options={subscribePlan}
-          />
-
-          {error && (
-            <div className="text-sm text-red-500 capitalize">{error}</div>
-          )}
-
-          <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>
-  )
-}

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

@@ -37,7 +37,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
             {/* Tombol Close */}
             <button
               onClick={handleToggleMenu}
-              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
+              className="fixed top-5 right-5 z-20 flex size-9 items-center justify-center lg:hidden"
             >
               <CloseIcon
                 width={50}
@@ -70,7 +70,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
                   action="/actions/logout"
                 >
                   <Button
-                    variant="newsSecondary"
+                    variant="outline"
                     className="w-full px-[35px] py-3 text-center sm:hidden"
                     type="submit"
                   >
@@ -79,7 +79,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
                 </fetcher.Form>
               ) : (
                 <Button
-                  variant="newsSecondary"
+                  variant="outline"
                   className="w-full px-[35px] py-3 text-center sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)

app/layouts/news/header-top.tsx

@@ -33,7 +33,7 @@ export const HeaderTop = () => {
             action="/actions/logout"
           >
             <Button
-              variant="newsSecondary"
+              variant="outline"
               className="hidden sm:flex"
               type="submit"
               disabled={fetcher.state !== 'idle'}
@@ -44,7 +44,7 @@ export const HeaderTop = () => {
           </fetcher.Form>
         ) : (
           <Button
-            variant="newsSecondary"
+            variant="outline"
             className="hidden sm:block"
             onClick={() => setIsLoginOpen(true)}
           >

app/pages/dashboard-advertisements/index.tsx

@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -74,16 +74,16 @@ export const AdvertisementsPage = () => {
           size="icon"
           title="Update Banner Iklan"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         <Button
           type="button"
           size="icon"
-          variant="newsDanger"
+          variant="danger"
           onClick={() => setSelectedAds(data)}
           title="Hapus Banner Iklan"
         >
-          <TrashIcon className="h-4 w-4" />
+          <TrashIcon className="size-4" />
         </Button>
       </div>
     ),
@@ -101,7 +101,7 @@ export const AdvertisementsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
+          <PlusIcon className="size-8" /> Buat Banner Iklan
         </Button>
       </div>
 

app/pages/dashboard-categories/index.tsx

@@ -1,4 +1,8 @@
-import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid'
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -66,7 +70,7 @@ export const CategoriesPage = () => {
           size="icon"
           title="Update Kategori"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         {data.code === 'spotlight' ? (
           ''
@@ -74,11 +78,11 @@ export const CategoriesPage = () => {
           <Button
             type="button"
             size="icon"
-            variant="newsDanger"
+            variant="danger"
             onClick={() => setSelectedCategory(data)}
             title="Hapus Kategori"
           >
-            <TrashIcon className="h-4 w-4" />
+            <TrashIcon className="size-4" />
           </Button>
         )}
       </div>
@@ -102,7 +106,7 @@ export const CategoriesPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          Buat Kategori
+          <PlusIcon className="size-8" /> Buat Kategori
         </Button>
       </div>
 

app/pages/dashboard-subscribe-plan/index.tsx

@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { useState } from 'react'
@@ -86,16 +86,16 @@ export const SubscribePlanPage = () => {
             size="icon"
             title="Update Subscribe Plan"
           >
-            <PencilSquareIcon className="h-4 w-4" />
+            <PencilSquareIcon className="size-4" />
           </Button>
           <Button
             type="button"
             size="icon"
-            variant="newsDanger"
+            variant="danger"
             onClick={() => setSelectedSubscribePlan(data)}
             title="Hapus Subscribe Plan"
           >
-            <TrashIcon className="h-4 w-4" />
+            <TrashIcon className="size-4" />
           </Button>
         </div>
       ),
@@ -111,7 +111,7 @@ export const SubscribePlanPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
+          <PlusIcon className="size-8" /> Buat Subscribe Plan
         </Button>
       </div>
 

app/pages/dashboard-subscriptions/index.tsx

@@ -43,7 +43,7 @@ export const SubscriptionsPage = () => {
                   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">
-                  <SearchIcon className="h-5 w-5" />
+                  <SearchIcon className="size-5" />
                 </div>
               </div>
             </Field>

app/pages/dashboard-tags/index.tsx

@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -59,16 +59,16 @@ export const TagsPage = () => {
           size="icon"
           title="Update Tag"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         <Button
           type="button"
           size="icon"
-          variant="newsDanger"
+          variant="danger"
           onClick={() => setSelectedTag(data)}
           title="Hapus Tag"
         >
-          <TrashIcon className="h-4 w-4" />
+          <TrashIcon className="size-4" />
         </Button>
       </div>
     ),
@@ -102,7 +102,7 @@ export const TagsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Tag
+          <PlusIcon className="size-8" /> Buat Tag
         </Button>
       </div>
 

app/pages/form-advertisements/index.tsx

@@ -10,6 +10,7 @@ import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { InputFile } from '~/components/ui/input-file'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { dateInput } from '~/utils/formatter'
 
 export const adsSchema = z.object({
   id: z.string().optional(),
@@ -43,27 +44,21 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
       id: adData?.id || undefined,
       image: adData?.image_url || '',
       url: adData?.url || '',
-      start_date: adData?.start_date
-        ? new Date(adData.start_date).toISOString().split('T')[0]
-        : '',
-      end_date: adData?.end_date
-        ? new Date(adData.end_date).toISOString().split('T')[0]
-        : '',
+      start_date: adData?.start_date ? dateInput(adData.start_date) : '',
+      end_date: adData?.end_date ? dateInput(adData.end_date) : '',
     },
   })
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/advertisements')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])

app/pages/form-category/index.tsx

@@ -35,7 +35,7 @@ export const FormCategoryPage = (properties: TProperties) => {
       id: categoryData?.id || undefined,
       code: categoryData?.code || '',
       name: categoryData?.name || '',
-      sequence: categoryData?.sequence || undefined,
+      sequence: categoryData?.sequence ?? undefined,
       description: categoryData?.description || '',
     },
   })
@@ -44,17 +44,15 @@ export const FormCategoryPage = (properties: TProperties) => {
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(
         `Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
       )
       navigate('/lg-admin/categories')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -84,6 +82,7 @@ export const FormCategoryPage = (properties: TProperties) => {
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
+                readOnly={categoryData?.code === 'spotlight'}
               />
               <Input
                 id="code"
@@ -115,6 +114,7 @@ export const FormCategoryPage = (properties: TProperties) => {
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="w-44"
+                readOnly={categoryData?.code === 'spotlight'}
               />
               <Input
                 id="description"

app/pages/form-contents/index.tsx

@@ -15,6 +15,7 @@ import { InputFile } from '~/components/ui/input-file'
 import { Switch } from '~/components/ui/switch'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
+import { dateInput } from '~/utils/formatter'
 
 export const contentSchema = z.object({
   id: z.string().optional(),
@@ -86,9 +87,7 @@ export const FormContentsPage = (properties: TProperties) => {
       content: newsData?.content || '',
       featured_image: newsData?.featured_image || '',
       is_premium: newsData?.is_premium || false,
-      live_at: newsData?.live_at
-        ? new Date(newsData.live_at).toISOString().split('T')[0]
-        : '',
+      live_at: newsData?.live_at ? dateInput(newsData.live_at) : '',
     },
   })
 
@@ -97,15 +96,13 @@ export const FormContentsPage = (properties: TProperties) => {
   const watchTags = watch('tags')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/contents')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])

app/pages/form-subscribe-plan/index.tsx

@@ -48,17 +48,15 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(
         `Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
       )
       navigate('/lg-admin/subscribe-plan')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])

app/pages/form-tag/index.tsx

@@ -40,15 +40,13 @@ export const FormTagPage = (properties: TProperties) => {
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(`Tag berhasil ${tagData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/tags')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])

app/pages/news-detail/index.tsx

@@ -1,16 +1,20 @@
 import htmlParse from 'html-react-parser'
 import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
+import { Button } from '~/components/ui/button'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
 import { Tags } from '~/components/ui/tags'
+import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news.detail.$slug'
 import type { TNews } from '~/types/news'
 
 export const NewsDetailPage = () => {
+  const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.detail.$slug',
   )
@@ -22,6 +26,7 @@ export const NewsDetailPage = () => {
   const currentUrl = globalThis.location
   const { title, content, featured_image, author, live_at, tags } =
     loaderData?.newsDetailData || {}
+  const { shouldSubscribe } = loaderData || {}
 
   const { text } = useReadingTime(content || '')
 
@@ -51,10 +56,23 @@ export const NewsDetailPage = () => {
             />
           </div>
 
-          <div className="mt-8 flex items-center justify-center">
-            <article className="prose prose-headings:my-0.5 prose-p:my-0.5">
+          <div className="mt-8 flex flex-col items-center justify-center gap-y-4">
+            <article
+              className={twMerge(
+                'prose prose-headings:my-0.5 prose-p:my-0.5',
+                shouldSubscribe ? 'line-clamp-5' : '',
+              )}
+            >
               {content && htmlParse(content)}
             </article>
+            {shouldSubscribe && (
+              <Button
+                onClick={() => setIsSuccessOpen('warning')}
+                className="w-full"
+              >
+                Read More
+              </Button>
+            )}
           </div>
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">

app/pages/staff-login/index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { Link, useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -22,17 +23,15 @@ export const AdminLoginPage = () => {
     fetcher,
     resolver: zodResolver(loginSchema),
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   return (
     <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
@@ -72,10 +71,6 @@ export const AdminLoginPage = () => {
                 type="password"
               />
 
-              {error && (
-                <div className="text-sm text-red-500 capitalize">{error}</div>
-              )}
-
               {/* Lupa Kata Sandi */}
               <div className="mb-4 flex justify-between">
                 <span className="text-gray-600">Lupa Kata Sandi?</span>

app/root.tsx

@@ -23,9 +23,9 @@ export const links: Route.LinksFunction = () => [
 
 export const meta = ({ location }: Route.MetaArgs) => {
   const { pathname } = location
-  const pageTitle = META_TITLE_CONFIG.find(
-    (meta) => meta.path === pathname,
-  )?.title
+  const segments = pathname.split('/')
+  const path = segments.length > 4 ? segments.slice(0, 4).join('/') : pathname
+  const pageTitle = META_TITLE_CONFIG.find((meta) => meta.path === path)?.title
   const metaTitle = APP.title
   const title = `${pageTitle ? `${pageTitle} - ` : ''}${metaTitle}`
 

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

@@ -1,8 +1,10 @@
 import { isRouteErrorResponse } from 'react-router'
+import { stripHtml } from 'string-strip-html'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
+import { getUser } from '~/apis/news/get-user'
 import { APP } from '~/configs/meta'
 import { handleCookie } from '~/libs/cookies'
 import { NewsDetailPage } from '~/pages/news-detail'
@@ -11,8 +13,22 @@ import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { userToken: accessToken } = await handleCookie(request)
+  let userData
+  if (accessToken) {
+    const { data } = await getUser({ accessToken })
+    userData = data
+  }
   const { slug } = params
-  const { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
+  let { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
+  const shouldSubscribe =
+    (!accessToken || userData?.subscribe?.subscribe_plan?.code === 'basic') &&
+    newsDetailData?.is_premium
+  newsDetailData = {
+    ...newsDetailData,
+    content: shouldSubscribe
+      ? stripHtml(newsDetailData.content).result.slice(0, 600)
+      : newsDetailData.content,
+  }
   const { data: categoriesData } = await getCategories()
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
@@ -25,13 +41,14 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     newsDetailData,
     beritaCategory,
     beritaNews,
+    shouldSubscribe,
   }
 }
 
 export const meta = ({ data }: Route.MetaArgs) => {
-  const { newsDetailData } = data
+  const { newsDetailData } = data || {}
   const metaTitle = APP.title
-  const title = `${newsDetailData.title} - ${metaTitle}`
+  const title = `${newsDetailData?.title} - ${metaTitle}`
 
   return [
     {

app/routes/actions.admin.advertisements.delete.$id.ts

@@ -4,7 +4,7 @@ import { XiorError } from 'xior'
 import { deleteAdsRequest } from '~/apis/admin/delete-ads'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/actions.admin.advertisements.create'
+import type { Route } from './+types/actions.admin.advertisements.delete.$id'
 
 export const action = async ({ request, params }: Route.ActionArgs) => {
   const { staffToken: accessToken } = await handleCookie(request)

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

@@ -7,7 +7,7 @@ import { updateAdsRequest } from '~/apis/admin/update-ads'
 import { handleCookie } from '~/libs/cookies'
 import { adsSchema, type TAdsSchema } from '~/pages/form-advertisements'
 
-import type { Route } from './+types/actions.admin.advertisements.create'
+import type { Route } from './+types/actions.admin.advertisements.update'
 
 export const action = async ({ request }: Route.ActionArgs) => {
   const { staffToken: accessToken } = await handleCookie(request)

app/routes/actions.admin.profile.ts

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { updateProfileRequest } from '~/apis/admin/update-profile'
+import {
+  profileSchema,
+  type TProfileSchema,
+} from '~/layouts/admin/dialog-profile'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.admin.profile'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TProfileSchema>(
+      request,
+      zodResolver(profileSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: profileData } = await updateProfileRequest({
+      accessToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        profileData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/routes/actions.admin.subscribe-plan.delete.$id.ts

@@ -4,7 +4,7 @@ import { XiorError } from 'xior'
 import { deleteSubscribePlanRequest } from '~/apis/admin/delete-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/actions.admin.advertisements.create'
+import type { Route } from './+types/actions.admin.subscribe-plan.delete.$id'
 
 export const action = async ({ request, params }: Route.ActionArgs) => {
   const { staffToken: accessToken } = await handleCookie(request)

app/routes/actions.admin.tags.delete.$id.ts

@@ -4,7 +4,7 @@ import { XiorError } from 'xior'
 import { deleteTagsRequest } from '~/apis/admin/delete-tags'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/actions.admin.advertisements.create'
+import type { Route } from './+types/actions.admin.tags.delete.$id'
 
 export const action = async ({ request, params }: Route.ActionArgs) => {
   const { staffToken: accessToken } = await handleCookie(request)

app/routes/actions.login.ts

@@ -5,7 +5,7 @@ import { XiorError } from 'xior'
 
 import { getUser } from '~/apis/news/get-user'
 import { userLoginRequest } from '~/apis/news/login-user'
-import { loginSchema, type TLoginSchema } from '~/layouts/news/form-login'
+import { loginSchema, type TLoginSchema } from '~/layouts/news/dialog-login'
 import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.login'

app/routes/actions.register.ts

@@ -8,7 +8,7 @@ import { userRegisterRequest } from '~/apis/news/register-user'
 import {
   registerSchema,
   type TRegisterSchema,
-} from '~/layouts/news/form-register'
+} from '~/layouts/news/dialog-register'
 import { generateUserTokenCookie } from '~/utils/token'
 
 import type { Route } from './+types/actions.register'

app/routes/actions.subscribe.ts

@@ -3,11 +3,12 @@ import { data } from 'react-router'
 import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
+import { updateSubscribeRequest } from '~/apis/admin/update-subscribe'
 import { getUser } from '~/apis/news/get-user'
 import {
   subscribeSchema,
   type TSubscribeSchema,
-} from '~/layouts/news/form-subscribe-plan'
+} from '~/layouts/news/dialog-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 
 import type { Route } from './+types/actions.subscribe'
@@ -32,6 +33,13 @@ export const action = async ({ request }: Route.ActionArgs) => {
     // TODO: implement subscribe
     console.log('payload', payload) // eslint-disable-line no-console
 
+    //  TODO: will run after payment success
+    const { data: updateSubscribeData } = await updateSubscribeRequest({
+      payload,
+      accessToken,
+    })
+    console.log(updateSubscribeData) // eslint-disable-line no-console
+
     const { data: userData } = await getUser({ accessToken })
 
     return data(

app/utils/formatter.ts

@@ -11,6 +11,12 @@ export const formatDate = (isoDate: string): string => {
   }).format(date)
 }
 
+export const dateInput = (isoDate: string): string =>
+  new Date(isoDate).toISOString().split('T')[0]
+
+export const datePayload = (date: string): string =>
+  new Date(date).toISOString()
+
 export const urlFriendlyCode = (input: string) => {
   return input
     .trim()

package.json

@@ -21,6 +21,7 @@
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",
     "@react-router/serve": "^7.1.3",
+    "@sidekickicons/react": "^0.12.0",
     "@tiptap/extension-color": "^2.11.5",
     "@tiptap/extension-highlight": "^2.11.5",
     "@tiptap/extension-image": "^2.11.5",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.1.3
         version: 7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
+      '@sidekickicons/react':
+        specifier: ^0.12.0
+        version: 0.12.0(react@19.0.0)
       '@tiptap/extension-color':
         specifier: ^2.11.5
         version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5)))
@@ -1381,6 +1384,11 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sidekickicons/react@0.12.0':
+    resolution: {integrity: sha512-cwl76tv4cSXoqGuPb5WpOCSLhS6Wsm90YeFqlVzR0Gwna+q6BbD414UalLfX/1fhsz+jDIPDs3E94BpZNAiMvA==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
   '@snyk/github-codeowners@1.1.0':
     resolution: {integrity: sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==}
     engines: {node: '>=8.10'}
@@ -6004,6 +6012,10 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sidekickicons/react@0.12.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@snyk/github-codeowners@1.1.0':
     dependencies:
       commander: 4.1.1