From 5c20cc48abc7c0ecc89c4a8be9fd0e185dfd6ae5 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Fri, 14 Mar 2025 13:28:15 +0800
Subject: [PATCH] feat: add PlusIcon to category creation button and set
 readOnly for specific fields in form

---
 app/pages/dashboard-categories/index.tsx | 8 ++++++--
 app/pages/form-category/index.tsx        | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx
index 3525178..b44b789 100644
--- a/app/pages/dashboard-categories/index.tsx
+++ b/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/20/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -102,7 +106,7 @@ export const CategoriesPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          Buat Kategori
+          <PlusIcon className="h-8 w-8" /> Buat Kategori
         </Button>
       </div>
 
diff --git a/app/pages/form-category/index.tsx b/app/pages/form-category/index.tsx
index 0ebb783..a4bed97 100644
--- a/app/pages/form-category/index.tsx
+++ b/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 || '',
     },
   })
@@ -84,6 +84,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 +116,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"