update category page

.env.example

@@ -1 +1 @@
-API_URL = 'https://localhost:8000/api'
+API_URL = 

next.config.mjs

@@ -2,6 +2,7 @@
 const nextConfig = {
   images: {
     domains: ['res.cloudinary.com'],
+    formats: ['image/webp', 'image/avif'],
     remotePatterns: [
       {
         protocol: 'https',

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.7",
+    "daisyui": "^4.12.13",
     "flatpickr": "^4.6.13",
     "jsvectormap": "^1.6.0",
     "next": "14.2.11",
@@ -20,9 +22,12 @@
     "react": "^18",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.0",
     "react-redux": "^9.1.2",
+    "react-toastify": "^10.0.6",
     "sass": "^1.79.1",
-    "sharp": "^0.33.5"
+    "sharp": "^0.33.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/constant/regex.constant.ts

@@ -0,0 +1,8 @@
+export const PASSWORD_REGEX = {
+  upperCase: new RegExp('.*[A-Z].*'),
+  lowerCase: new RegExp('.*[a-z].*'),
+  number: new RegExp('.*\\d.*'),
+  specialCharacter: new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*')
+}
+
+export const PHONE_REGEX = new RegExp('^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$')

src/app/redux/apis/category.api.ts

@@ -1,10 +1,13 @@
+// 'use client'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
-//type
-import { CreateCategoryPayload } from '@shared/interfaces/category/payload'
+// //type
+// import { CreateCategoryPayload } from '@shared/interfaces/category/payload'
 
 //interface
 import { ICategory } from '@shared/interfaces/category/model'
+import { IListData } from '@shared/interfaces/common'
+import { IGetParam } from '@shared/interfaces/common/index'
 
 export const apiCategory = createApi({
   reducerPath: 'apiCategory',
@@ -24,7 +27,7 @@ export const apiCategory = createApi({
   keepUnusedDataFor: 20,
   tagTypes: ['Category'],
   endpoints: (builder) => ({
-    createCategory: builder.mutation<ICategory, CreateCategoryPayload>({
+    createCategory: builder.mutation<ICategory, FormData>({
       query: (data) => ({
         url: '/categories',
         method: 'POST',
@@ -33,38 +36,42 @@ export const apiCategory = createApi({
       invalidatesTags: ['Category']
     }),
 
-    getCategories: builder.query<ICategory[], void>({
-      query: () => ({
+    getCategories: builder.query<IListData<ICategory[]>, IGetParam>({
+      query: (params) => ({
         url: '/categories',
-        method: 'GET'
+        method: 'GET',
+        params
       }),
       providesTags: ['Category'],
-      transformResponse: (response: any) => response.data.items
+      transformResponse: (response: any) => response.data
     }),
 
     getCategoryById: builder.query<ICategory, string>({
       query: (categoryId) => ({
         url: `/categories/${categoryId}`,
         method: 'GET'
       }),
-      providesTags: ['Category']
+      providesTags: ['Category'],
+      transformResponse: (response: any) => response.data
     }),
 
-    updateCategory: builder.mutation<ICategory, Partial<ICategory>>({
-      query: (data) => ({
-        url: `/categories/${data.id}`,
+    updateCategory: builder.mutation<ICategory, { id: string; data: FormData }>({
+      query: ({ id, data }) => ({
+        url: `/categories/${id}`,
         method: 'PUT',
         body: data
       }),
-      invalidatesTags: ['Category']
+      invalidatesTags: ['Category'],
+      transformResponse: (response: any) => response.data
     }),
 
     deleteCategory: builder.mutation<any, string>({
       query: (categoryId) => ({
         url: `/categories/${categoryId}`,
         method: 'DELETE'
       }),
-      invalidatesTags: ['Category']
+      invalidatesTags: ['Category'],
+      transformResponse: (response: any) => response.data
     })
   })
 })

src/app/redux/slices/category.slice.ts

@@ -0,0 +1,43 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+
+//interface
+import { ICategory } from '@shared/interfaces/category/model'
+
+export const CategorySliceKey = 'category'
+
+type InitialType = {
+  categories: ICategory[]
+}
+
+const initialState = {
+  categories: []
+} as InitialType
+
+const categorySlice = createSlice({
+  name: CategorySliceKey,
+  initialState,
+  reducers: {
+    setCategories: (state, action: PayloadAction<ICategory[]>) => {
+      state.categories = action.payload
+    },
+
+    addCategories: (state, action: PayloadAction<ICategory>) => {
+      state.categories.push(action.payload)
+    },
+
+    updateCategories: (state, action: PayloadAction<ICategory>) => {
+      state.categories = state.categories.filter((category) =>
+        category.id === action.payload.id ? action.payload : category
+      )
+    },
+
+    removeCategories: (state, action: PayloadAction<ICategory>) => {
+      state.categories = state.categories.filter((category) => category.id !== action.payload.id)
+    }
+  }
+})
+
+export const { setCategories } = categorySlice.actions
+
+const categoryReducer = categorySlice.reducer
+export default categoryReducer