Mini ERP

+ + {t('inventory')} +

+ + +
+
- + {t('my_products')} +
- + {t('product_categories')} +
- + {t('product_collections')} +
- + {t('product_colors')} +
- + {t('product_sizes')} +
+
+

+ + Code * + + { + const upper = e.target.value.toUpperCase(); + e.target.value = upper; + // Trigger update ke form + return register('code').onChange(e); + }} + /> + {errors.code &&

{errors.code.message}

} +

+ +

+ + Name * + + + {errors.name &&

{errors.name.message}

} +

+ +

+ Description +

+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={createCategory.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={createCategory.isPending}>
+                                                {createCategory.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCategories/components/DeleteProductCategoryModal.tsx b/src/features/productCategories/components/DeleteProductCategoryModal.tsx
new file mode 100644
index 0000000..11e6c98
--- /dev/null
+++ b/src/features/productCategories/components/DeleteProductCategoryModal.tsx
@@ -0,0 +1,85 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import IconX from '../../../components/Icon/IconX';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useDeleteProductCategory } from '../api/deleteProductCategort';
+
+interface DeleteProductCategoryModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    categoryId: number;
+}
+
+export const DeleteProductCategoryModal = ({ isOpen, onClose, categoryId }: DeleteProductCategoryModalProps) => {
+    const { t } = useTranslation();
+
+    const deleteCategory = useDeleteProductCategory({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: t('Deleted!'),
+                    text: t('Product category deleted successfully'),
+                });
+                onClose();
+            },
+        },
+    });
+
+    const handleDelete = () => {
+        deleteCategory.mutate({ categoryId });
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product Category')}</div>
+
+                                <div className="p-5 text-center">
+                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
+                                        <IconTrashLines className="w-7 h-7 mx-auto" />
+                                    </div>
+
+                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product category?')}</div>
+
+                                    <div className="flex justify-center items-center mt-8">
+                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteCategory.isPending}>
+                                            {t('cancel')}
+                                        </button>
+                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteCategory.isPending}>
+                                            {deleteCategory.isPending ? <IconLoader className="animate-spin" /> : null}
+                                            {t('delete')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCategories/components/DetailProductCategoryModal.tsx b/src/features/productCategories/components/DetailProductCategoryModal.tsx
new file mode 100644
index 0000000..2405d75
--- /dev/null
+++ b/src/features/productCategories/components/DetailProductCategoryModal.tsx
@@ -0,0 +1,67 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { ProductCategory } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    category: ProductCategory | null;
+}
+
+export const DetailProductCategoryModal = ({ isOpen, onClose, category }: Props) => {
+    if (!category) return null;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" onClose={onClose} className="relative z-[60]">
+                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/50" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 text-left align-middle shadow-xl transition-all relative">
+                                <button type="button" className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" onClick={onClose}>
+                                    <IconX />
+                                </button>
+
+                                <Dialog.Title as="h3" className="text-2xl font-bold mb-6">
+                                    Product Category Details
+                                </Dialog.Title>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 text-[16px]">
+                                    <Detail label="Name" value={category.name} />
+                                    <Detail label="Code" value={category.code} />
+                                </div>
+
+                                {category.description && (
+                                    <div className="mt-8">
+                                        <h4 className="text-lg font-semibold mb-1">Description</h4>
+                                        <p className="text-base text-gray-700 dark:text-gray-300">{category.description}</p>
+                                    </div>
+                                )}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const Detail = ({ label, value }: { label: string; value: React.ReactNode }) => (
+    <div className="flex flex-col">
+        <span className="text-gray-500 dark:text-gray-400 text-base font-medium">{label}:</span>
+        <span className="text-lg font-semibold text-black dark:text-white mt-1">{value}</span>
+    </div>
+);
diff --git a/src/features/productCategories/components/EditProductCategoryModal.tsx b/src/features/productCategories/components/EditProductCategoryModal.tsx
new file mode 100644
index 0000000..cbe4a94
--- /dev/null
+++ b/src/features/productCategories/components/EditProductCategoryModal.tsx
@@ -0,0 +1,136 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useUpdateProductCategory } from '../api/updateProductCategory';
+import { UpdateProductCategoryFormValues, updateProductCategorySchema } from '../types/form';
+import { ProductCategory } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+import Swal from 'sweetalert2';
+import { useTranslation } from 'react-i18next';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    category: ProductCategory | null;
+}
+
+export const EditProductCategoryModal = ({ isOpen, onClose, category }: Props) => {
+    const { t } = useTranslation();
+
+    const updateCategory = useUpdateProductCategory({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Category updated successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<UpdateProductCategoryFormValues>({
+        resolver: zodResolver(updateProductCategorySchema),
+    });
+
+    useEffect(() => {
+        if (category) {
+            reset({
+                name: category.name,
+                code: category.code,
+                description: category.description ?? '',
+            });
+        }
+    }, [category, reset]);
+
+    const onSubmit = async (data: UpdateProductCategoryFormValues) => {
+        if (category) {
+            await updateCategory.mutateAsync({ categoryId: category.id, data });
+        }
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Edit Product Category</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea" placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={updateCategory.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={updateCategory.isPending}>
+                                                {updateCategory.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCategories/components/ProductCategoriesList.tsx b/src/features/productCategories/components/ProductCategoriesList.tsx
new file mode 100644
index 0000000..aa72933
--- /dev/null
+++ b/src/features/productCategories/components/ProductCategoriesList.tsx
@@ -0,0 +1,78 @@
+import { DataTable } from 'mantine-datatable';
+import { useProductCategories } from '../api/getProductCategories';
+import { productCategoryColumns } from './Columns';
+import { useState } from 'react';
+import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
+import { ProductCategoryListHeader } from './ProductCategoryListHeader';
+import { ProductCategory } from '../types/api';
+import { EditProductCategoryModal } from './EditProductCategoryModal';
+import { DeleteProductCategoryModal } from './DeleteProductCategoryModal';
+import { DetailProductCategoryModal } from './DetailProductCategoryModal';
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+export const ProductCategoriesList = () => {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+    const [selectedCategory, setSelectedCategory] = useState<ProductCategory | null>(null);
+
+    const categoryQuery = useProductCategories();
+    const categories = categoryQuery.data ?? [];
+
+    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(categories, {
+        columnAccessor: 'id',
+        direction: 'desc',
+    });
+
+    const [search, setSearch] = useState('');
+
+    const filteredRecords = paginatedRecords.filter((category) => category.name.toLowerCase().includes(search.toLowerCase()));
+
+    const onDelete = (category: ProductCategory) => {
+        setSelectedCategory(category);
+        setIsDeleteModalOpen(true);
+    };
+
+    const onEdit = (category: ProductCategory) => {
+        setSelectedCategory(category);
+        setIsEditModalOpen(true);
+    };
+
+    const onView = (category: ProductCategory) => {
+        setSelectedCategory(category);
+        setIsDetailModalOpen(true);
+    };
+
+    return (
+        <>
+            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
+                <ProductCategoryListHeader search={search} setSearch={setSearch} />
+
+                <div className="datatables pagination-padding px-5">
+                    <DataTable
+                        className="whitespace-nowrap table-hover"
+                        records={filteredRecords}
+                        columns={productCategoryColumns({ onEdit, onView, onDelete })}
+                        highlightOnHover
+                        minHeight={200}
+                        fetching={categoryQuery.isLoading}
+                        totalRecords={totalRecords}
+                        recordsPerPage={pageSize}
+                        page={page}
+                        onPageChange={setPage}
+                        recordsPerPageOptions={PAGE_SIZES}
+                        onRecordsPerPageChange={setPageSize}
+                        sortStatus={sortStatus}
+                        onSortStatusChange={setSortStatus}
+                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
+                    />
+                </div>
+            </div>
+
+            <DeleteProductCategoryModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} categoryId={selectedCategory?.id || 0} />
+            <EditProductCategoryModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} category={selectedCategory} />
+            <DetailProductCategoryModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} category={selectedCategory} />
+        </>
+    );
+};
diff --git a/src/features/productCategories/components/ProductCategoryListHeader.tsx b/src/features/productCategories/components/ProductCategoryListHeader.tsx
new file mode 100644
index 0000000..a6e403c
--- /dev/null
+++ b/src/features/productCategories/components/ProductCategoryListHeader.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import IconPlus from '../../../components/Icon/IconPlus';
+import { useState } from 'react';
+import { CreateProductCategoryModal } from './CreateProductCategoryModal';
+
+export const ProductCategoryListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
+    const { t } = useTranslation();
+    const [isOpenModalCreateCategory, setIsOpenModalCreateCategory] = useState(false);
+
+    return (
+        <>
+            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
+                <div className="ltr:mr-auto rtl:ml-auto">
+                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateCategory(true)}>
+                        <IconPlus />
+                        {t('add_product_category')}
+                    </button>
+                </div>
+            </div>
+            <CreateProductCategoryModal isOpen={isOpenModalCreateCategory} onClose={() => setIsOpenModalCreateCategory(false)} />
+        </>
+    );
+};
diff --git a/src/features/productCategories/types/api.ts b/src/features/productCategories/types/api.ts
new file mode 100644
index 0000000..fefd7eb
--- /dev/null
+++ b/src/features/productCategories/types/api.ts
@@ -0,0 +1,9 @@
+import { Entity } from '../../../types/api';
+
+export type ProductCategory = Entity<{
+    code: string;
+    name: string;
+    description: string;
+}>;
+
+export type ProductCategoryResponse = ProductCategory[];
diff --git a/src/features/productCategories/types/form.ts b/src/features/productCategories/types/form.ts
new file mode 100644
index 0000000..99fd541
--- /dev/null
+++ b/src/features/productCategories/types/form.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const createProductCategorySchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type CreateProductCategoryFormValues = z.infer<typeof createProductCategorySchema>;
+
+export const updateProductCategorySchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type UpdateProductCategoryFormValues = z.infer<typeof updateProductCategorySchema>;
diff --git a/src/features/productCollections/api/createProductCollection.ts b/src/features/productCollections/api/createProductCollection.ts
new file mode 100644
index 0000000..a2dfacc
--- /dev/null
+++ b/src/features/productCollections/api/createProductCollection.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { ProductCollection } from '../types/api';
+import { getProductCollectionsQueryOptions } from './getProductCollections';
+import { CreateProductCollectionFormValues } from '../types/form';
+
+export const createProductCollection = ({ data }: { data: CreateProductCollectionFormValues }): Promise<ProductCollection> => {
+    return api.post('/inventory/collections', data);
+};
+
+type UseCreateProductCollectionOptions = {
+    mutationConfig?: MutationConfig<typeof createProductCollection>;
+};
+
+export const useCreateProductCollection = ({ mutationConfig }: UseCreateProductCollectionOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: createProductCollection,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductCollectionsQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productCollections/api/deleteProductCollection.ts b/src/features/productCollections/api/deleteProductCollection.ts
new file mode 100644
index 0000000..a6e7c9c
--- /dev/null
+++ b/src/features/productCollections/api/deleteProductCollection.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { getProductCollectionsQueryOptions } from './getProductCollections';
+
+export const deleteProductCollection = ({ collectionId }: { collectionId: string | number }) => {
+    return api.delete(`/inventory/collections/${collectionId}`);
+};
+
+type UseDeleteProductCollectionOptions = {
+    mutationConfig?: MutationConfig<typeof deleteProductCollection>;
+};
+
+export const useDeleteProductCollection = ({ mutationConfig }: UseDeleteProductCollectionOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: deleteProductCollection,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductCollectionsQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productCollections/api/getProductCollections.ts b/src/features/productCollections/api/getProductCollections.ts
new file mode 100644
index 0000000..7ae2921
--- /dev/null
+++ b/src/features/productCollections/api/getProductCollections.ts
@@ -0,0 +1,34 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { QueryConfig } from '../../../lib/reactQuery';
+import { api } from '../../../lib/apiClient';
+import { ProductCollectionResponse } from '../types/api';
+
+type ProductCollectionsQueryParams = {
+    q?: string;
+    page?: number;
+    limit?: number;
+};
+
+export const getProductCollections = ({ q, page, limit }: ProductCollectionsQueryParams = {}): Promise<ProductCollectionResponse> => {
+    return api.get('/inventory/collections', {
+        params: { q, page, limit },
+    });
+};
+
+export const getProductCollectionsQueryOptions = ({ q, page, limit }: ProductCollectionsQueryParams = {}) => {
+    return queryOptions({
+        queryKey: ['productCollections', { q, page, limit }],
+        queryFn: () => getProductCollections({ q, page, limit }),
+    });
+};
+
+type UseProductCollectionsOptions = {
+    queryConfig?: QueryConfig<typeof getProductCollectionsQueryOptions>;
+} & ProductCollectionsQueryParams;
+
+export const useProductCollections = ({ q, page, limit, queryConfig }: UseProductCollectionsOptions = {}) => {
+    return useQuery({
+        ...getProductCollectionsQueryOptions({ q, page, limit }),
+        ...queryConfig,
+    });
+};
diff --git a/src/features/productCollections/api/updateProductCollection.ts b/src/features/productCollections/api/updateProductCollection.ts
new file mode 100644
index 0000000..8241d4a
--- /dev/null
+++ b/src/features/productCollections/api/updateProductCollection.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { UpdateProductCollectionFormValues } from '../types/form';
+import { ProductCollection } from '../types/api';
+import { getProductCollectionsQueryOptions } from './getProductCollections';
+
+export const updateProductCollection = ({ data, collectionId }: { data: UpdateProductCollectionFormValues; collectionId: number }): Promise<ProductCollection> => {
+    return api.put(`/inventory/collections/${collectionId}`, data);
+};
+
+type UseUpdateProductCollectionOptions = {
+    mutationConfig?: MutationConfig<typeof updateProductCollection>;
+};
+
+export const useUpdateProductCollection = ({ mutationConfig }: UseUpdateProductCollectionOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: updateProductCollection,
+        onSuccess: (data, ...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductCollectionsQueryOptions().queryKey,
+            });
+            onSuccess?.(data, ...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productCollections/components/Columns.tsx b/src/features/productCollections/components/Columns.tsx
new file mode 100644
index 0000000..4c89c36
--- /dev/null
+++ b/src/features/productCollections/components/Columns.tsx
@@ -0,0 +1,43 @@
+import { DataTableColumn } from 'mantine-datatable';
+import IconEdit from '../../../components/Icon/IconEdit';
+import IconEye from '../../../components/Icon/IconEye';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import { ProductCollection } from '../types/api';
+
+type ProductCollectionTableProps = {
+    onEdit: (collection: ProductCollection) => void;
+    onView: (collection: ProductCollection) => void;
+    onDelete: (collection: ProductCollection) => void;
+};
+
+export const productCollectionColumns = ({ onEdit, onView, onDelete }: ProductCollectionTableProps): DataTableColumn<ProductCollection>[] => [
+    {
+        accessor: 'code',
+        title: 'Code',
+        sortable: true,
+    },
+    {
+        accessor: 'name',
+        title: 'Name',
+        sortable: true,
+    },
+    {
+        accessor: 'action',
+        title: 'Actions',
+        sortable: false,
+        textAlignment: 'center',
+        render: (data) => (
+            <div className="flex gap-4 items-center w-max mx-auto">
+                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
+                    <IconEdit className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
+                    <IconEye className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
+                    <IconTrashLines className="w-4.5 h-4.5" />
+                </button>
+            </div>
+        ),
+    },
+];
diff --git a/src/features/productCollections/components/CreateProductCollectionModal.tsx b/src/features/productCollections/components/CreateProductCollectionModal.tsx
new file mode 100644
index 0000000..3f3431d
--- /dev/null
+++ b/src/features/productCollections/components/CreateProductCollectionModal.tsx
@@ -0,0 +1,125 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import IconX from '../../../components/Icon/IconX';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import { useCreateProductCollection } from '../api/createProductCollection';
+import { createProductCollectionSchema, CreateProductCollectionFormValues } from '../types/form';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const CreateProductCollectionModal = ({ isOpen, onClose }: Props) => {
+    const { t } = useTranslation();
+
+    const createCollection = useCreateProductCollection({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product collection created successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<CreateProductCollectionFormValues>({
+        resolver: zodResolver(createProductCollectionSchema),
+    });
+
+    const submit = async (data: CreateProductCollectionFormValues) => {
+        await createCollection.mutateAsync({ data });
+        reset();
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Create Product Collection</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea w-full" rows={4} placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={createCollection.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={createCollection.isPending}>
+                                                {createCollection.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCollections/components/DeleteProductCollectionModal.tsx b/src/features/productCollections/components/DeleteProductCollectionModal.tsx
new file mode 100644
index 0000000..c5c97da
--- /dev/null
+++ b/src/features/productCollections/components/DeleteProductCollectionModal.tsx
@@ -0,0 +1,85 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import IconX from '../../../components/Icon/IconX';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useDeleteProductCollection } from '../api/deleteProductCollection';
+
+interface DeleteProductCollectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    collectionId: number;
+}
+
+export const DeleteProductCollectionModal = ({ isOpen, onClose, collectionId }: DeleteProductCollectionModalProps) => {
+    const { t } = useTranslation();
+
+    const deleteCollection = useDeleteProductCollection({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: t('Deleted!'),
+                    text: t('Product collection deleted successfully'),
+                });
+                onClose();
+            },
+        },
+    });
+
+    const handleDelete = () => {
+        deleteCollection.mutate({ collectionId });
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product Collection')}</div>
+
+                                <div className="p-5 text-center">
+                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
+                                        <IconTrashLines className="w-7 h-7 mx-auto" />
+                                    </div>
+
+                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product collection?')}</div>
+
+                                    <div className="flex justify-center items-center mt-8">
+                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteCollection.isPending}>
+                                            {t('cancel')}
+                                        </button>
+                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteCollection.isPending}>
+                                            {deleteCollection.isPending ? <IconLoader className="animate-spin" /> : null}
+                                            {t('delete')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCollections/components/DetailProductCollectionModal.tsx b/src/features/productCollections/components/DetailProductCollectionModal.tsx
new file mode 100644
index 0000000..3b5d439
--- /dev/null
+++ b/src/features/productCollections/components/DetailProductCollectionModal.tsx
@@ -0,0 +1,67 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { ProductCollection } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    collection: ProductCollection | null;
+}
+
+export const DetailProductCollectionModal = ({ isOpen, onClose, collection }: Props) => {
+    if (!collection) return null;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" onClose={onClose} className="relative z-[60]">
+                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/50" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 text-left align-middle shadow-xl transition-all relative">
+                                <button type="button" className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" onClick={onClose}>
+                                    <IconX />
+                                </button>
+
+                                <Dialog.Title as="h3" className="text-2xl font-bold mb-6">
+                                    Product Collection Details
+                                </Dialog.Title>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 text-[16px]">
+                                    <Detail label="Name" value={collection.name} />
+                                    <Detail label="Code" value={collection.code} />
+                                </div>
+
+                                {collection.description && (
+                                    <div className="mt-8">
+                                        <h4 className="text-lg font-semibold mb-1">Description</h4>
+                                        <p className="text-base text-gray-700 dark:text-gray-300">{collection.description}</p>
+                                    </div>
+                                )}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const Detail = ({ label, value }: { label: string; value: React.ReactNode }) => (
+    <div className="flex flex-col">
+        <span className="text-gray-500 dark:text-gray-400 text-base font-medium">{label}:</span>
+        <span className="text-lg font-semibold text-black dark:text-white mt-1">{value}</span>
+    </div>
+);
diff --git a/src/features/productCollections/components/EditProductCollectionModal.tsx b/src/features/productCollections/components/EditProductCollectionModal.tsx
new file mode 100644
index 0000000..cbffa2e
--- /dev/null
+++ b/src/features/productCollections/components/EditProductCollectionModal.tsx
@@ -0,0 +1,136 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useUpdateProductCollection } from '../api/updateProductCollection';
+import { UpdateProductCollectionFormValues, updateProductCollectionSchema } from '../types/form';
+import { ProductCollection } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+import Swal from 'sweetalert2';
+import { useTranslation } from 'react-i18next';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    collection: ProductCollection | null;
+}
+
+export const EditProductCollectionModal = ({ isOpen, onClose, collection }: Props) => {
+    const { t } = useTranslation();
+
+    const updateCollection = useUpdateProductCollection({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product collection updated successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<UpdateProductCollectionFormValues>({
+        resolver: zodResolver(updateProductCollectionSchema),
+    });
+
+    useEffect(() => {
+        if (collection) {
+            reset({
+                name: collection.name,
+                code: collection.code,
+                description: collection.description ?? '',
+            });
+        }
+    }, [collection, reset]);
+
+    const onSubmit = async (data: UpdateProductCollectionFormValues) => {
+        if (collection) {
+            await updateCollection.mutateAsync({ collectionId: collection.id, data });
+        }
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Edit Product Collection</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea" placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={updateCollection.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={updateCollection.isPending}>
+                                                {updateCollection.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productCollections/components/ProductCollectionListHeader.tsx b/src/features/productCollections/components/ProductCollectionListHeader.tsx
new file mode 100644
index 0000000..548e420
--- /dev/null
+++ b/src/features/productCollections/components/ProductCollectionListHeader.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import IconPlus from '../../../components/Icon/IconPlus';
+import { useState } from 'react';
+import { CreateProductCollectionModal } from './CreateProductCollectionModal';
+
+export const ProductCollectionListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
+    const { t } = useTranslation();
+    const [isOpenModalCreateCollection, setIsOpenModalCreateCollection] = useState(false);
+
+    return (
+        <>
+            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
+                <div className="ltr:mr-auto rtl:ml-auto">
+                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateCollection(true)}>
+                        <IconPlus />
+                        {t('add_product_collection')}
+                    </button>
+                </div>
+            </div>
+            <CreateProductCollectionModal isOpen={isOpenModalCreateCollection} onClose={() => setIsOpenModalCreateCollection(false)} />
+        </>
+    );
+};
diff --git a/src/features/productCollections/components/ProductCollectionsList.tsx b/src/features/productCollections/components/ProductCollectionsList.tsx
new file mode 100644
index 0000000..af6e774
--- /dev/null
+++ b/src/features/productCollections/components/ProductCollectionsList.tsx
@@ -0,0 +1,78 @@
+import { DataTable } from 'mantine-datatable';
+import { useProductCollections } from '../api/getProductCollections';
+import { productCollectionColumns } from './Columns';
+import { useState } from 'react';
+import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
+import { ProductCollectionListHeader } from './ProductCollectionListHeader';
+import { ProductCollection } from '../types/api';
+import { DeleteProductCollectionModal } from './DeleteProductCollectionModal';
+import { EditProductCollectionModal } from './EditProductCollectionModal';
+import { DetailProductCollectionModal } from './DetailProductCollectionModal';
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+export const ProductCollectionsList = () => {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+    const [selectedCollection, setSelectedCollection] = useState<ProductCollection | null>(null);
+
+    const collectionQuery = useProductCollections();
+    const collections = collectionQuery.data ?? [];
+
+    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(collections, {
+        columnAccessor: 'id',
+        direction: 'desc',
+    });
+
+    const [search, setSearch] = useState('');
+
+    const filteredRecords = paginatedRecords.filter((collection) => collection.name.toLowerCase().includes(search.toLowerCase()));
+
+    const onDelete = (collection: ProductCollection) => {
+        setSelectedCollection(collection);
+        setIsDeleteModalOpen(true);
+    };
+
+    const onEdit = (collection: ProductCollection) => {
+        setSelectedCollection(collection);
+        setIsEditModalOpen(true);
+    };
+
+    const onView = (collection: ProductCollection) => {
+        setSelectedCollection(collection);
+        setIsDetailModalOpen(true);
+    };
+
+    return (
+        <>
+            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
+                <ProductCollectionListHeader search={search} setSearch={setSearch} />
+
+                <div className="datatables pagination-padding px-5">
+                    <DataTable
+                        className="whitespace-nowrap table-hover"
+                        records={filteredRecords}
+                        columns={productCollectionColumns({ onEdit, onView, onDelete })}
+                        highlightOnHover
+                        minHeight={200}
+                        fetching={collectionQuery.isLoading}
+                        totalRecords={totalRecords}
+                        recordsPerPage={pageSize}
+                        page={page}
+                        onPageChange={setPage}
+                        recordsPerPageOptions={PAGE_SIZES}
+                        onRecordsPerPageChange={setPageSize}
+                        sortStatus={sortStatus}
+                        onSortStatusChange={setSortStatus}
+                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
+                    />
+                </div>
+            </div>
+
+            <DeleteProductCollectionModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} collectionId={selectedCollection?.id || 0} />
+            <EditProductCollectionModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} collection={selectedCollection} />
+            <DetailProductCollectionModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} collection={selectedCollection} />
+        </>
+    );
+};
diff --git a/src/features/productCollections/types/api.ts b/src/features/productCollections/types/api.ts
new file mode 100644
index 0000000..6efaf76
--- /dev/null
+++ b/src/features/productCollections/types/api.ts
@@ -0,0 +1,9 @@
+import { Entity } from '../../../types/api';
+
+export type ProductCollection = Entity<{
+    code: string;
+    name: string;
+    description: string;
+}>;
+
+export type ProductCollectionResponse = ProductCollection[];
diff --git a/src/features/productCollections/types/form.ts b/src/features/productCollections/types/form.ts
new file mode 100644
index 0000000..d61cebc
--- /dev/null
+++ b/src/features/productCollections/types/form.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const createProductCollectionSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type CreateProductCollectionFormValues = z.infer<typeof createProductCollectionSchema>;
+
+export const updateProductCollectionSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type UpdateProductCollectionFormValues = z.infer<typeof updateProductCollectionSchema>;
diff --git a/src/features/productColours/api/createProductColour.ts b/src/features/productColours/api/createProductColour.ts
new file mode 100644
index 0000000..1002427
--- /dev/null
+++ b/src/features/productColours/api/createProductColour.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { ProductColour } from '../types/api';
+import { getProductColoursQueryOptions } from './getProductColours';
+import { CreateProductColourFormValues } from '../types/form';
+
+export const createProductColour = ({ data }: { data: CreateProductColourFormValues }): Promise<ProductColour> => {
+    return api.post('/inventory/colours', data);
+};
+
+type UseCreateProductColourOptions = {
+    mutationConfig?: MutationConfig<typeof createProductColour>;
+};
+
+export const useCreateProductColour = ({ mutationConfig }: UseCreateProductColourOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: createProductColour,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductColoursQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productColours/api/deleteProductColour.ts b/src/features/productColours/api/deleteProductColour.ts
new file mode 100644
index 0000000..5f689e4
--- /dev/null
+++ b/src/features/productColours/api/deleteProductColour.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { getProductColoursQueryOptions } from './getProductColours';
+
+export const deleteProductColour = ({ colourId }: { colourId: string | number }) => {
+    return api.delete(`/inventory/colours/${colourId}`);
+};
+
+type UseDeleteProductColourOptions = {
+    mutationConfig?: MutationConfig<typeof deleteProductColour>;
+};
+
+export const useDeleteProductColour = ({ mutationConfig }: UseDeleteProductColourOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: deleteProductColour,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductColoursQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productColours/api/getProductColours.ts b/src/features/productColours/api/getProductColours.ts
new file mode 100644
index 0000000..1856e8b
--- /dev/null
+++ b/src/features/productColours/api/getProductColours.ts
@@ -0,0 +1,34 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { QueryConfig } from '../../../lib/reactQuery';
+import { api } from '../../../lib/apiClient';
+import { ProductColourResponse } from '../types/api';
+
+type ProductColoursQueryParams = {
+    q?: string;
+    page?: number;
+    limit?: number;
+};
+
+export const getProductColours = ({ q, page, limit }: ProductColoursQueryParams = {}): Promise<ProductColourResponse> => {
+    return api.get('/inventory/colours', {
+        params: { q, page, limit },
+    });
+};
+
+export const getProductColoursQueryOptions = ({ q, page, limit }: ProductColoursQueryParams = {}) => {
+    return queryOptions({
+        queryKey: ['productColours', { q, page, limit }],
+        queryFn: () => getProductColours({ q, page, limit }),
+    });
+};
+
+type UseProductColoursOptions = {
+    queryConfig?: QueryConfig<typeof getProductColoursQueryOptions>;
+} & ProductColoursQueryParams;
+
+export const useProductColours = ({ q, page, limit, queryConfig }: UseProductColoursOptions = {}) => {
+    return useQuery({
+        ...getProductColoursQueryOptions({ q, page, limit }),
+        ...queryConfig,
+    });
+};
diff --git a/src/features/productColours/api/updateProductColour.ts b/src/features/productColours/api/updateProductColour.ts
new file mode 100644
index 0000000..af3e8e2
--- /dev/null
+++ b/src/features/productColours/api/updateProductColour.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { ProductColour } from '../types/api';
+import { getProductColoursQueryOptions } from './getProductColours';
+import { UpdateProductColourFormValues } from '../types/form';
+
+export const updateProductColour = ({ data, colourId }: { data: UpdateProductColourFormValues; colourId: number }): Promise<ProductColour> => {
+    return api.put(`/inventory/colours/${colourId}`, data);
+};
+
+type UseUpdateProductColourOptions = {
+    mutationConfig?: MutationConfig<typeof updateProductColour>;
+};
+
+export const useUpdateProductColour = ({ mutationConfig }: UseUpdateProductColourOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: updateProductColour,
+        onSuccess: (data, ...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductColoursQueryOptions().queryKey,
+            });
+            onSuccess?.(data, ...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productColours/components/Columns.tsx b/src/features/productColours/components/Columns.tsx
new file mode 100644
index 0000000..fe62950
--- /dev/null
+++ b/src/features/productColours/components/Columns.tsx
@@ -0,0 +1,55 @@
+import { DataTableColumn } from 'mantine-datatable';
+import IconEdit from '../../../components/Icon/IconEdit';
+import IconEye from '../../../components/Icon/IconEye';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import { ProductColour } from '../types/api';
+
+type ProductColourTableProps = {
+    onEdit: (colour: ProductColour) => void;
+    onView: (colour: ProductColour) => void;
+    onDelete: (colour: ProductColour) => void;
+};
+
+export const productColourColumns = ({ onEdit, onView, onDelete }: ProductColourTableProps): DataTableColumn<ProductColour>[] => [
+    {
+        accessor: 'code',
+        title: 'Code',
+        sortable: true,
+    },
+    {
+        accessor: 'name',
+        title: 'Name',
+        sortable: true,
+    },
+    {
+        accessor: 'hex',
+        title: 'Hex',
+        sortable: true,
+        // rounded circle and hex
+        render: (data) => (
+            <div className="flex items-center gap-2">
+                <div className="w-4 h-4 rounded-full" style={{ backgroundColor: data.hex }}></div>
+                {data.hex}
+            </div>
+        ),
+    },
+    {
+        accessor: 'action',
+        title: 'Actions',
+        sortable: false,
+        textAlignment: 'center',
+        render: (data) => (
+            <div className="flex gap-4 items-center w-max mx-auto">
+                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
+                    <IconEdit className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
+                    <IconEye className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
+                    <IconTrashLines className="w-4.5 h-4.5" />
+                </button>
+            </div>
+        ),
+    },
+];
diff --git a/src/features/productColours/components/CreateProductColourModal.tsx b/src/features/productColours/components/CreateProductColourModal.tsx
new file mode 100644
index 0000000..a653170
--- /dev/null
+++ b/src/features/productColours/components/CreateProductColourModal.tsx
@@ -0,0 +1,156 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useRef } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import IconX from '../../../components/Icon/IconX';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import { useCreateProductColour } from '../api/createProductColour';
+import { createProductColourSchema, CreateProductColourFormValues } from '../types/form';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const CreateProductColourModal = ({ isOpen, onClose }: Props) => {
+    const { t } = useTranslation();
+
+    const createColour = useCreateProductColour({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product colour created successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        control,
+        formState: { errors },
+        reset,
+    } = useForm<CreateProductColourFormValues>({
+        resolver: zodResolver(createProductColourSchema),
+    });
+
+    const submit = async (data: CreateProductColourFormValues) => {
+        await createColour.mutateAsync({ data });
+        reset();
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Create Product Colour</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+                                        <Controller
+                                            name="hex"
+                                            control={control}
+                                            render={({ field }) => {
+                                                const colorRef = useRef<HTMLInputElement>(null);
+
+                                                return (
+                                                    <div>
+                                                        <label className="block mb-1 font-medium text-gray-700 dark:text-white">
+                                                            Hex <span className="text-red-500">*</span>
+                                                        </label>
+                                                        <div className="flex items-center gap-3">
+                                                            {/* Custom Color Picker Circle */}
+                                                            <button
+                                                                type="button"
+                                                                className="w-10 h-10 rounded-full border border-gray-300 shadow"
+                                                                style={{ backgroundColor: field.value }}
+                                                                onClick={() => colorRef.current?.click()}
+                                                            />
+
+                                                            {/* Hidden input[type=color] */}
+                                                            <input type="color" ref={colorRef} value={field.value} onChange={(e) => field.onChange(e.target.value)} className="sr-only" />
+
+                                                            {/* Input Text */}
+                                                            <input
+                                                                type="text"
+                                                                value={field.value}
+                                                                onChange={(e) => field.onChange(e.target.value)}
+                                                                className="form-input flex-1"
+                                                                placeholder="#FFFFFF"
+                                                            />
+                                                        </div>
+
+                                                        {errors.hex && <p className="text-red-500 text-sm mt-1">{errors.hex.message}</p>}
+                                                    </div>
+                                                );
+                                            }}
+                                        />
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={createColour.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={createColour.isPending}>
+                                                {createColour.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productColours/components/DeleteProductColourModal.tsx b/src/features/productColours/components/DeleteProductColourModal.tsx
new file mode 100644
index 0000000..8a77343
--- /dev/null
+++ b/src/features/productColours/components/DeleteProductColourModal.tsx
@@ -0,0 +1,85 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import IconX from '../../../components/Icon/IconX';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useDeleteProductColour } from '../api/deleteProductColour';
+
+interface DeleteProductColourModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    colourId: number;
+}
+
+export const DeleteProductColourModal = ({ isOpen, onClose, colourId }: DeleteProductColourModalProps) => {
+    const { t } = useTranslation();
+
+    const deleteColour = useDeleteProductColour({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: t('Deleted!'),
+                    text: t('Product colour deleted successfully'),
+                });
+                onClose();
+            },
+        },
+    });
+
+    const handleDelete = () => {
+        deleteColour.mutate({ colourId });
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product Colour')}</div>
+
+                                <div className="p-5 text-center">
+                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
+                                        <IconTrashLines className="w-7 h-7 mx-auto" />
+                                    </div>
+
+                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product colour?')}</div>
+
+                                    <div className="flex justify-center items-center mt-8">
+                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteColour.isPending}>
+                                            {t('cancel')}
+                                        </button>
+                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteColour.isPending}>
+                                            {deleteColour.isPending ? <IconLoader className="animate-spin" /> : null}
+                                            {t('delete')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productColours/components/DetailProductColourModal.tsx b/src/features/productColours/components/DetailProductColourModal.tsx
new file mode 100644
index 0000000..d70174f
--- /dev/null
+++ b/src/features/productColours/components/DetailProductColourModal.tsx
@@ -0,0 +1,71 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { ProductColour } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    colour: ProductColour | null;
+}
+
+export const DetailProductColourModal = ({ isOpen, onClose, colour }: Props) => {
+    if (!colour) return null;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" onClose={onClose} className="relative z-[60]">
+                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/50" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 text-left align-middle shadow-xl transition-all relative">
+                                <button type="button" className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" onClick={onClose}>
+                                    <IconX />
+                                </button>
+
+                                <Dialog.Title as="h3" className="text-2xl font-bold mb-6">
+                                    Product Colour Details
+                                </Dialog.Title>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 text-[16px]">
+                                    <Detail label="Name" value={colour.name} />
+                                    <Detail label="Code" value={colour.code} />
+                                </div>
+
+                                {colour.hex && (
+                                    <div className="mt-8">
+                                        <h4 className="text-lg font-semibold mb-1">Hex</h4>
+                                        {/* rounded circle and hex */}
+                                        <div className="flex items-center gap-2">
+                                            <div className="w-4 h-4 rounded-full" style={{ backgroundColor: colour.hex }}></div>
+                                            {colour.hex}
+                                        </div>
+                                    </div>
+                                )}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const Detail = ({ label, value }: { label: string; value: React.ReactNode }) => (
+    <div className="flex flex-col">
+        <span className="text-gray-500 dark:text-gray-400 text-base font-medium">{label}:</span>
+        <span className="text-lg font-semibold text-black dark:text-white mt-1">{value}</span>
+    </div>
+);
diff --git a/src/features/productColours/components/EditProductColourModal.tsx b/src/features/productColours/components/EditProductColourModal.tsx
new file mode 100644
index 0000000..3ba2f8a
--- /dev/null
+++ b/src/features/productColours/components/EditProductColourModal.tsx
@@ -0,0 +1,170 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect, useRef } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useUpdateProductColour } from '../api/updateProductColour';
+import { UpdateProductColourFormValues, updateProductColourSchema } from '../types/form';
+import { ProductColour } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+import Swal from 'sweetalert2';
+import { useTranslation } from 'react-i18next';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    colour: ProductColour | null;
+}
+
+export const EditProductColourModal = ({ isOpen, onClose, colour }: Props) => {
+    const { t } = useTranslation();
+
+    const updateColour = useUpdateProductColour({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product collection updated successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        control,
+        formState: { errors },
+        reset,
+    } = useForm<UpdateProductColourFormValues>({
+        resolver: zodResolver(updateProductColourSchema),
+    });
+
+    useEffect(() => {
+        if (colour) {
+            reset({
+                name: colour.name,
+                code: colour.code,
+                hex: colour.hex,
+            });
+        }
+    }, [colour, reset]);
+
+    const onSubmit = async (data: UpdateProductColourFormValues) => {
+        if (colour) {
+            await updateColour.mutateAsync({ colourId: colour.id, data });
+        }
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Edit Product Collection</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+                                        <Controller
+                                            name="hex"
+                                            control={control}
+                                            render={({ field }) => {
+                                                const colorRef = useRef<HTMLInputElement>(null);
+
+                                                return (
+                                                    <div>
+                                                        <label className="block mb-1 font-medium text-gray-700 dark:text-white">
+                                                            Hex <span className="text-red-500">*</span>
+                                                        </label>
+                                                        <div className="flex items-center gap-3">
+                                                            {/* Custom Color Picker Circle */}
+                                                            <button
+                                                                type="button"
+                                                                className="w-10 h-10 rounded-full border border-gray-300 shadow"
+                                                                style={{ backgroundColor: field.value }}
+                                                                onClick={() => colorRef.current?.click()}
+                                                            />
+
+                                                            {/* Hidden input[type=color] */}
+                                                            <input type="color" ref={colorRef} value={field.value} onChange={(e) => field.onChange(e.target.value)} className="sr-only" />
+
+                                                            {/* Input Text */}
+                                                            <input
+                                                                type="text"
+                                                                value={field.value}
+                                                                onChange={(e) => field.onChange(e.target.value)}
+                                                                className="form-input flex-1"
+                                                                placeholder="#FFFFFF"
+                                                            />
+                                                        </div>
+
+                                                        {errors.hex && <p className="text-red-500 text-sm mt-1">{errors.hex.message}</p>}
+                                                    </div>
+                                                );
+                                            }}
+                                        />
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={updateColour.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={updateColour.isPending}>
+                                                {updateColour.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productColours/components/ProductColourListHeader.tsx b/src/features/productColours/components/ProductColourListHeader.tsx
new file mode 100644
index 0000000..905a2b4
--- /dev/null
+++ b/src/features/productColours/components/ProductColourListHeader.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import IconPlus from '../../../components/Icon/IconPlus';
+import { useState } from 'react';
+import { CreateProductColourModal } from './CreateProductColourModal';
+
+export const ProductColourListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
+    const { t } = useTranslation();
+    const [isOpenModalCreateColour, setIsOpenModalCreateColour] = useState(false);
+
+    return (
+        <>
+            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
+                <div className="ltr:mr-auto rtl:ml-auto">
+                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateColour(true)}>
+                        <IconPlus />
+                        {t('add_product_colour')}
+                    </button>
+                </div>
+            </div>
+            <CreateProductColourModal isOpen={isOpenModalCreateColour} onClose={() => setIsOpenModalCreateColour(false)} />
+        </>
+    );
+};
diff --git a/src/features/productColours/components/ProductColoursList.tsx b/src/features/productColours/components/ProductColoursList.tsx
new file mode 100644
index 0000000..a4d78bc
--- /dev/null
+++ b/src/features/productColours/components/ProductColoursList.tsx
@@ -0,0 +1,78 @@
+import { DataTable } from 'mantine-datatable';
+import { useProductColours } from '../api/getProductColours';
+import { productColourColumns } from './Columns';
+import { useState } from 'react';
+import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
+import { ProductColourListHeader } from './ProductColourListHeader';
+import { ProductColour } from '../types/api';
+import { DeleteProductColourModal } from './DeleteProductColourModal';
+import { EditProductColourModal } from './EditProductColourModal';
+import { DetailProductColourModal } from './DetailProductColourModal';
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+export const ProductColoursList = () => {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+    const [selectedColour, setSelectedColour] = useState<ProductColour | null>(null);
+
+    const colourQuery = useProductColours();
+    const colours = colourQuery.data ?? [];
+
+    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(colours, {
+        columnAccessor: 'id',
+        direction: 'desc',
+    });
+
+    const [search, setSearch] = useState('');
+
+    const filteredRecords = paginatedRecords.filter((colour) => colour.name.toLowerCase().includes(search.toLowerCase()));
+
+    const onDelete = (colour: ProductColour) => {
+        setSelectedColour(colour);
+        setIsDeleteModalOpen(true);
+    };
+
+    const onEdit = (colour: ProductColour) => {
+        setSelectedColour(colour);
+        setIsEditModalOpen(true);
+    };
+
+    const onView = (colour: ProductColour) => {
+        setSelectedColour(colour);
+        setIsDetailModalOpen(true);
+    };
+
+    return (
+        <>
+            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
+                <ProductColourListHeader search={search} setSearch={setSearch} />
+
+                <div className="datatables pagination-padding px-5">
+                    <DataTable
+                        className="whitespace-nowrap table-hover"
+                        records={filteredRecords}
+                        columns={productColourColumns({ onEdit, onView, onDelete })}
+                        highlightOnHover
+                        minHeight={200}
+                        fetching={colourQuery.isLoading}
+                        totalRecords={totalRecords}
+                        recordsPerPage={pageSize}
+                        page={page}
+                        onPageChange={setPage}
+                        recordsPerPageOptions={PAGE_SIZES}
+                        onRecordsPerPageChange={setPageSize}
+                        sortStatus={sortStatus}
+                        onSortStatusChange={setSortStatus}
+                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
+                    />
+                </div>
+            </div>
+
+            <DeleteProductColourModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} colourId={selectedColour?.id || 0} />
+            <EditProductColourModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} colour={selectedColour} />
+            <DetailProductColourModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} colour={selectedColour} />
+        </>
+    );
+};
diff --git a/src/features/productColours/types/api.ts b/src/features/productColours/types/api.ts
new file mode 100644
index 0000000..142f9a5
--- /dev/null
+++ b/src/features/productColours/types/api.ts
@@ -0,0 +1,9 @@
+import { Entity } from '../../../types/api';
+
+export type ProductColour = Entity<{
+    code: string;
+    name: string;
+    hex: string;
+}>;
+
+export type ProductColourResponse = ProductColour[];
diff --git a/src/features/productColours/types/form.ts b/src/features/productColours/types/form.ts
new file mode 100644
index 0000000..60a1400
--- /dev/null
+++ b/src/features/productColours/types/form.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const createProductColourSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    hex: z.string().regex(/^#([0-9A-Fa-f]{6})$/, 'Hex must be a valid 6-digit HEX color (e.g., #FFFFFF)'),
+});
+
+export type CreateProductColourFormValues = z.infer<typeof createProductColourSchema>;
+
+export const updateProductColourSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    hex: z.string().regex(/^#([0-9A-Fa-f]{6})$/, 'Hex must be a valid 6-digit HEX color (e.g., #FFFFFF)'),
+});
+
+export type UpdateProductColourFormValues = z.infer<typeof updateProductColourSchema>;
diff --git a/src/features/productSizes/api/createProductSize.ts b/src/features/productSizes/api/createProductSize.ts
new file mode 100644
index 0000000..279bea7
--- /dev/null
+++ b/src/features/productSizes/api/createProductSize.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { ProductSize } from '../types/api';
+import { getProductSizesQueryOptions } from './getProductSizes';
+import { CreateProductSizeFormValues } from '../types/form';
+
+export const createProductSize = ({ data }: { data: CreateProductSizeFormValues }): Promise<ProductSize> => {
+    return api.post('/inventory/sizes', data);
+};
+
+type UseCreateProductSizeOptions = {
+    mutationConfig?: MutationConfig<typeof createProductSize>;
+};
+
+export const useCreateProductSize = ({ mutationConfig }: UseCreateProductSizeOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: createProductSize,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductSizesQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productSizes/api/deleteProductSize.ts b/src/features/productSizes/api/deleteProductSize.ts
new file mode 100644
index 0000000..c0d64eb
--- /dev/null
+++ b/src/features/productSizes/api/deleteProductSize.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { getProductSizesQueryOptions } from './getProductSizes';
+
+export const deleteProductSize = ({ sizeId }: { sizeId: string | number }) => {
+    return api.delete(`/inventory/sizes/${sizeId}`);
+};
+
+type UseDeleteProductSizeOptions = {
+    mutationConfig?: MutationConfig<typeof deleteProductSize>;
+};
+
+export const useDeleteProductSize = ({ mutationConfig }: UseDeleteProductSizeOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: deleteProductSize,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductSizesQueryOptions().queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productSizes/api/getProductSizes.ts b/src/features/productSizes/api/getProductSizes.ts
new file mode 100644
index 0000000..5bf951e
--- /dev/null
+++ b/src/features/productSizes/api/getProductSizes.ts
@@ -0,0 +1,34 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { QueryConfig } from '../../../lib/reactQuery';
+import { api } from '../../../lib/apiClient';
+import { ProductSizeResponse } from '../types/api';
+
+type ProductSizesQueryParams = {
+    q?: string;
+    page?: number;
+    limit?: number;
+};
+
+export const getProductSizes = ({ q, page, limit }: ProductSizesQueryParams = {}): Promise<ProductSizeResponse> => {
+    return api.get('/inventory/sizes', {
+        params: { q, page, limit },
+    });
+};
+
+export const getProductSizesQueryOptions = ({ q, page, limit }: ProductSizesQueryParams = {}) => {
+    return queryOptions({
+        queryKey: ['productSizes', { q, page, limit }],
+        queryFn: () => getProductSizes({ q, page, limit }),
+    });
+};
+
+type UseProductSizesOptions = {
+    queryConfig?: QueryConfig<typeof getProductSizesQueryOptions>;
+} & ProductSizesQueryParams;
+
+export const useProductSizes = ({ q, page, limit, queryConfig }: UseProductSizesOptions = {}) => {
+    return useQuery({
+        ...getProductSizesQueryOptions({ q, page, limit }),
+        ...queryConfig,
+    });
+};
diff --git a/src/features/productSizes/api/updateProductSize.ts b/src/features/productSizes/api/updateProductSize.ts
new file mode 100644
index 0000000..8606668
--- /dev/null
+++ b/src/features/productSizes/api/updateProductSize.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { UpdateProductSizeFormValues } from '../types/form';
+import { ProductSize } from '../types/api';
+import { getProductSizesQueryOptions } from './getProductSizes';
+
+export const updateProductSize = ({ data, sizeId }: { data: UpdateProductSizeFormValues; sizeId: number }): Promise<ProductSize> => {
+    return api.put(`/inventory/sizes/${sizeId}`, data);
+};
+
+type UseUpdateProductSizeOptions = {
+    mutationConfig?: MutationConfig<typeof updateProductSize>;
+};
+
+export const useUpdateProductSize = ({ mutationConfig }: UseUpdateProductSizeOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: updateProductSize,
+        onSuccess: (data, ...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductSizesQueryOptions().queryKey,
+            });
+            onSuccess?.(data, ...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/productSizes/components/Columns.tsx b/src/features/productSizes/components/Columns.tsx
new file mode 100644
index 0000000..5817e6d
--- /dev/null
+++ b/src/features/productSizes/components/Columns.tsx
@@ -0,0 +1,43 @@
+import { DataTableColumn } from 'mantine-datatable';
+import IconEdit from '../../../components/Icon/IconEdit';
+import IconEye from '../../../components/Icon/IconEye';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import { ProductSize } from '../types/api';
+
+type ProductSizeTableProps = {
+    onEdit: (size: ProductSize) => void;
+    onView: (size: ProductSize) => void;
+    onDelete: (size: ProductSize) => void;
+};
+
+export const productSizeColumns = ({ onEdit, onView, onDelete }: ProductSizeTableProps): DataTableColumn<ProductSize>[] => [
+    {
+        accessor: 'code',
+        title: 'Code',
+        sortable: true,
+    },
+    {
+        accessor: 'name',
+        title: 'Name',
+        sortable: true,
+    },
+    {
+        accessor: 'action',
+        title: 'Actions',
+        sortable: false,
+        textAlignment: 'center',
+        render: (data) => (
+            <div className="flex gap-4 items-center w-max mx-auto">
+                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
+                    <IconEdit className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
+                    <IconEye className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
+                    <IconTrashLines className="w-4.5 h-4.5" />
+                </button>
+            </div>
+        ),
+    },
+];
diff --git a/src/features/productSizes/components/CreateProductSizeModal.tsx b/src/features/productSizes/components/CreateProductSizeModal.tsx
new file mode 100644
index 0000000..3c336f9
--- /dev/null
+++ b/src/features/productSizes/components/CreateProductSizeModal.tsx
@@ -0,0 +1,125 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import IconX from '../../../components/Icon/IconX';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import { useCreateProductSize } from '../api/createProductSize';
+import { createProductSizeSchema, CreateProductSizeFormValues } from '../types/form';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const CreateProductSizeModal = ({ isOpen, onClose }: Props) => {
+    const { t } = useTranslation();
+
+    const createSize = useCreateProductSize({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product size created successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<CreateProductSizeFormValues>({
+        resolver: zodResolver(createProductSizeSchema),
+    });
+
+    const submit = async (data: CreateProductSizeFormValues) => {
+        await createSize.mutateAsync({ data });
+        reset();
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Create Product Size</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea w-full" rows={4} placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={createSize.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={createSize.isPending}>
+                                                {createSize.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productSizes/components/DeleteProductSizeModal.tsx b/src/features/productSizes/components/DeleteProductSizeModal.tsx
new file mode 100644
index 0000000..2bd6369
--- /dev/null
+++ b/src/features/productSizes/components/DeleteProductSizeModal.tsx
@@ -0,0 +1,85 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import IconX from '../../../components/Icon/IconX';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { useDeleteProductSize } from '../api/deleteProductSize';
+
+interface DeleteProductSizeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    sizeId: number;
+}
+
+export const DeleteProductSizeModal = ({ isOpen, onClose, sizeId }: DeleteProductSizeModalProps) => {
+    const { t } = useTranslation();
+
+    const deleteSize = useDeleteProductSize({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: t('Deleted!'),
+                    text: t('Product size deleted successfully'),
+                });
+                onClose();
+            },
+        },
+    });
+
+    const handleDelete = () => {
+        deleteSize.mutate({ sizeId });
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product Size')}</div>
+
+                                <div className="p-5 text-center">
+                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
+                                        <IconTrashLines className="w-7 h-7 mx-auto" />
+                                    </div>
+
+                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product size?')}</div>
+
+                                    <div className="flex justify-center items-center mt-8">
+                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteSize.isPending}>
+                                            {t('cancel')}
+                                        </button>
+                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteSize.isPending}>
+                                            {deleteSize.isPending ? <IconLoader className="animate-spin" /> : null}
+                                            {t('delete')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productSizes/components/DetailProductSizeModal.tsx b/src/features/productSizes/components/DetailProductSizeModal.tsx
new file mode 100644
index 0000000..66e8937
--- /dev/null
+++ b/src/features/productSizes/components/DetailProductSizeModal.tsx
@@ -0,0 +1,67 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { ProductSize } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    size: ProductSize | null;
+}
+
+export const DetailProductSizeModal = ({ isOpen, onClose, size }: Props) => {
+    if (!size) return null;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" onClose={onClose} className="relative z-[60]">
+                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/50" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 text-left align-middle shadow-xl transition-all relative">
+                                <button type="button" className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" onClick={onClose}>
+                                    <IconX />
+                                </button>
+
+                                <Dialog.Title as="h3" className="text-2xl font-bold mb-6">
+                                    Product Size Details
+                                </Dialog.Title>
+
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 text-[16px]">
+                                    <Detail label="Name" value={size.name} />
+                                    <Detail label="Code" value={size.code} />
+                                </div>
+
+                                {size.description && (
+                                    <div className="mt-8">
+                                        <h4 className="text-lg font-semibold mb-1">Description</h4>
+                                        <p className="text-base text-gray-700 dark:text-gray-300">{size.description}</p>
+                                    </div>
+                                )}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const Detail = ({ label, value }: { label: string; value: React.ReactNode }) => (
+    <div className="flex flex-col">
+        <span className="text-gray-500 dark:text-gray-400 text-base font-medium">{label}:</span>
+        <span className="text-lg font-semibold text-black dark:text-white mt-1">{value}</span>
+    </div>
+);
diff --git a/src/features/productSizes/components/EditProductSizeModal.tsx b/src/features/productSizes/components/EditProductSizeModal.tsx
new file mode 100644
index 0000000..b8a2c3d
--- /dev/null
+++ b/src/features/productSizes/components/EditProductSizeModal.tsx
@@ -0,0 +1,136 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useUpdateProductSize } from '../api/updateProductSize';
+import { UpdateProductSizeFormValues, updateProductSizeSchema } from '../types/form';
+import { ProductSize } from '../types/api';
+import IconX from '../../../components/Icon/IconX';
+import Swal from 'sweetalert2';
+import { useTranslation } from 'react-i18next';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    size: ProductSize | null;
+}
+
+export const EditProductSizeModal = ({ isOpen, onClose, size }: Props) => {
+    const { t } = useTranslation();
+
+    const updateSize = useUpdateProductSize({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product collection updated successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<UpdateProductSizeFormValues>({
+        resolver: zodResolver(updateProductSizeSchema),
+    });
+
+    useEffect(() => {
+        if (size) {
+            reset({
+                name: size.name,
+                code: size.code,
+                description: size.description ?? '',
+            });
+        }
+    }, [size, reset]);
+
+    const onSubmit = async (data: UpdateProductSizeFormValues) => {
+        if (size) {
+            await updateSize.mutateAsync({ sizeId: size.id, data });
+        }
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Edit Product Collection</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                                        <div>
+                                            <label>
+                                                Code <span className="text-red-500">*</span>
+                                            </label>
+                                            <input
+                                                {...register('code')}
+                                                className="form-input"
+                                                placeholder="Enter Code"
+                                                onChange={(e) => {
+                                                    const upper = e.target.value.toUpperCase();
+                                                    e.target.value = upper;
+                                                    // Trigger update ke form
+                                                    return register('code').onChange(e);
+                                                }}
+                                            />
+                                            {errors.code && <div className="text-red-500 text-sm mt-1">{errors.code.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>
+                                                Name <span className="text-red-500">*</span>
+                                            </label>
+                                            <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                            {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                        </div>
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea" placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={updateSize.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={updateSize.isPending}>
+                                                {updateSize.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/productSizes/components/ProductSizeListHeader.tsx b/src/features/productSizes/components/ProductSizeListHeader.tsx
new file mode 100644
index 0000000..9a122e4
--- /dev/null
+++ b/src/features/productSizes/components/ProductSizeListHeader.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import IconPlus from '../../../components/Icon/IconPlus';
+import { useState } from 'react';
+import { CreateProductSizeModal } from './CreateProductSizeModal';
+
+export const ProductSizeListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
+    const { t } = useTranslation();
+    const [isOpenModalCreateSize, setIsOpenModalCreateSize] = useState(false);
+
+    return (
+        <>
+            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
+                <div className="ltr:mr-auto rtl:ml-auto">
+                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateSize(true)}>
+                        <IconPlus />
+                        {t('add_product_size')}
+                    </button>
+                </div>
+            </div>
+            <CreateProductSizeModal isOpen={isOpenModalCreateSize} onClose={() => setIsOpenModalCreateSize(false)} />
+        </>
+    );
+};
diff --git a/src/features/productSizes/components/ProductSizesList.tsx b/src/features/productSizes/components/ProductSizesList.tsx
new file mode 100644
index 0000000..0288e99
--- /dev/null
+++ b/src/features/productSizes/components/ProductSizesList.tsx
@@ -0,0 +1,78 @@
+import { DataTable } from 'mantine-datatable';
+import { useProductSizes } from '../api/getProductSizes';
+import { productSizeColumns } from './Columns';
+import { useState } from 'react';
+import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
+import { ProductSizeListHeader } from './ProductSizeListHeader';
+import { ProductSize } from '../types/api';
+import { DeleteProductSizeModal } from './DeleteProductSizeModal';
+import { EditProductSizeModal } from './EditProductSizeModal';
+import { DetailProductSizeModal } from './DetailProductSizeModal';
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+export const ProductSizesList = () => {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+    const [selectedSize, setSelectedSize] = useState<ProductSize | null>(null);
+
+    const sizeQuery = useProductSizes();
+    const sizes = sizeQuery.data ?? [];
+
+    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(sizes, {
+        columnAccessor: 'id',
+        direction: 'desc',
+    });
+
+    const [search, setSearch] = useState('');
+
+    const filteredRecords = paginatedRecords.filter((size) => size.name.toLowerCase().includes(search.toLowerCase()));
+
+    const onDelete = (size: ProductSize) => {
+        setSelectedSize(size);
+        setIsDeleteModalOpen(true);
+    };
+
+    const onEdit = (size: ProductSize) => {
+        setSelectedSize(size);
+        setIsEditModalOpen(true);
+    };
+
+    const onView = (size: ProductSize) => {
+        setSelectedSize(size);
+        setIsDetailModalOpen(true);
+    };
+
+    return (
+        <>
+            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
+                <ProductSizeListHeader search={search} setSearch={setSearch} />
+
+                <div className="datatables pagination-padding px-5">
+                    <DataTable
+                        className="whitespace-nowrap table-hover"
+                        records={filteredRecords}
+                        columns={productSizeColumns({ onEdit, onView, onDelete })}
+                        highlightOnHover
+                        minHeight={200}
+                        fetching={sizeQuery.isLoading}
+                        totalRecords={totalRecords}
+                        recordsPerPage={pageSize}
+                        page={page}
+                        onPageChange={setPage}
+                        recordsPerPageOptions={PAGE_SIZES}
+                        onRecordsPerPageChange={setPageSize}
+                        sortStatus={sortStatus}
+                        onSortStatusChange={setSortStatus}
+                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
+                    />
+                </div>
+            </div>
+
+            <DeleteProductSizeModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} sizeId={selectedSize?.id || 0} />
+            <EditProductSizeModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} size={selectedSize} />
+            <DetailProductSizeModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} size={selectedSize} />
+        </>
+    );
+};
diff --git a/src/features/productSizes/types/api.ts b/src/features/productSizes/types/api.ts
new file mode 100644
index 0000000..22eed72
--- /dev/null
+++ b/src/features/productSizes/types/api.ts
@@ -0,0 +1,9 @@
+import { Entity } from '../../../types/api';
+
+export type ProductSize = Entity<{
+    code: string;
+    name: string;
+    description: string;
+}>;
+
+export type ProductSizeResponse = ProductSize[];
diff --git a/src/features/productSizes/types/form.ts b/src/features/productSizes/types/form.ts
new file mode 100644
index 0000000..e4b03ac
--- /dev/null
+++ b/src/features/productSizes/types/form.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const createProductSizeSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type CreateProductSizeFormValues = z.infer<typeof createProductSizeSchema>;
+
+export const updateProductSizeSchema = z.object({
+    code: z.string().min(1, 'Code is required').max(50, 'Code must be less than 50 characters'),
+    name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+    description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+});
+
+export type UpdateProductSizeFormValues = z.infer<typeof updateProductSizeSchema>;
diff --git a/src/features/products/api/createProduct.ts b/src/features/products/api/createProduct.ts
new file mode 100644
index 0000000..47e8cd8
--- /dev/null
+++ b/src/features/products/api/createProduct.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { CreateProductFormValues } from '../types/form';
+import { getProductsQueryOptions } from './getProducts';
+import { Product } from '../types/api';
+
+export const createProduct = ({ data }: { data: CreateProductFormValues }): Promise<Product> => {
+    return api.post('/inventory/products', data);
+};
+
+type UseCreateProductOptions = {
+    mutationConfig?: MutationConfig<typeof createProduct>;
+};
+
+export const useCreateProduct = ({ mutationConfig }: UseCreateProductOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: createProduct,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductsQueryOptions({}).queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/products/api/deleteProduct.ts b/src/features/products/api/deleteProduct.ts
new file mode 100644
index 0000000..0938b21
--- /dev/null
+++ b/src/features/products/api/deleteProduct.ts
@@ -0,0 +1,30 @@
+import { useMutation } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { getProductsQueryOptions } from './getProducts';
+
+export const deleteProduct = ({ productId }: { productId: string | number }) => {
+    return api.delete(`/inventory/products/${productId}`);
+};
+
+type UseDeleteProductOptions = {
+    mutationConfig?: MutationConfig<typeof deleteProduct>;
+};
+
+export const useDeleteProduct = ({ mutationConfig }: UseDeleteProductOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: deleteProduct,
+        onSuccess: (...args) => {
+            queryClient.invalidateQueries({
+                queryKey: getProductsQueryOptions({}).queryKey,
+            });
+            onSuccess?.(...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/products/api/getProducts.ts b/src/features/products/api/getProducts.ts
new file mode 100644
index 0000000..af9e93c
--- /dev/null
+++ b/src/features/products/api/getProducts.ts
@@ -0,0 +1,39 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+
+import { QueryConfig } from '../../../lib/reactQuery';
+import { api } from '../../../lib/apiClient';
+import { ProductResponse } from '../types/api';
+
+type ProductsQueryParams = {
+    q?: string;
+    page?: number;
+    limit?: number;
+};
+
+export const getProducts = ({ q, page, limit }: ProductsQueryParams): Promise<ProductResponse> => {
+    return api.get('/inventory/products', {
+        params: {
+            q,
+            page,
+            limit,
+        },
+    });
+};
+
+export const getProductsQueryOptions = ({ q, page, limit }: ProductsQueryParams) => {
+    return queryOptions({
+        queryKey: ['products', { q, page, limit }],
+        queryFn: () => getProducts({ q, page, limit }),
+    });
+};
+
+type UseProductsOptions = {
+    queryConfig?: QueryConfig<typeof getProductsQueryOptions>;
+} & ProductsQueryParams;
+
+export const useProducts = ({ q, page, limit, queryConfig }: UseProductsOptions = {}) => {
+    return useQuery({
+        ...getProductsQueryOptions({ q, page, limit }),
+        ...queryConfig,
+    });
+};
diff --git a/src/features/products/api/updateProduct.ts b/src/features/products/api/updateProduct.ts
new file mode 100644
index 0000000..9532aae
--- /dev/null
+++ b/src/features/products/api/updateProduct.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Product } from '../types/api';
+import { UpdateProductFormValues } from '../types/form';
+import { api } from '../../../lib/apiClient';
+import { MutationConfig } from '../../../lib/reactQuery';
+import { getProductsQueryOptions } from './getProducts';
+
+export const updateProduct = ({ data, productId }: { data: UpdateProductFormValues; productId: number }): Promise<Product> => {
+    return api.put(`/inventory/products/${productId}`, data);
+};
+
+type UseUpdateProductOptions = {
+    mutationConfig?: MutationConfig<typeof updateProduct>;
+};
+
+export const useUpdateProduct = ({ mutationConfig }: UseUpdateProductOptions = {}) => {
+    const queryClient = useQueryClient();
+
+    const { onSuccess, ...restConfig } = mutationConfig || {};
+
+    return useMutation({
+        mutationFn: updateProduct,
+        onSuccess: (data, ...args) => {
+            queryClient.refetchQueries({
+                queryKey: getProductsQueryOptions({}).queryKey,
+            });
+            onSuccess?.(data, ...args);
+        },
+        ...restConfig,
+    });
+};
diff --git a/src/features/products/components/Columns.tsx b/src/features/products/components/Columns.tsx
new file mode 100644
index 0000000..7164d7c
--- /dev/null
+++ b/src/features/products/components/Columns.tsx
@@ -0,0 +1,105 @@
+import { DataTableColumn } from 'mantine-datatable';
+import IconEdit from '../../../components/Icon/IconEdit';
+import IconEye from '../../../components/Icon/IconEye';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import { Product } from '../types/api';
+import { formatPrice } from '../../../utils/format-price';
+
+type ProductTableProps = {
+    onEdit: (product: Product) => void;
+    onView: (product: Product) => void;
+    onDelete: (product: Product) => void;
+};
+
+export const productColumns = ({ onEdit, onView, onDelete }: ProductTableProps): DataTableColumn<Product>[] => [
+    {
+        accessor: 'sku',
+        title: 'SKU',
+        sortable: true,
+        render: ({ sku }) => sku,
+    },
+    {
+        accessor: 'name',
+        title: 'Name',
+        sortable: true,
+    },
+    {
+        accessor: 'category.name',
+        title: 'Category',
+        sortable: true,
+        render: ({ category }) => category.name,
+    },
+    {
+        accessor: 'collection.name',
+        title: 'Collection',
+        sortable: true,
+        render: ({ collection }) => collection.name,
+    },
+    {
+        accessor: 'colour.name',
+        title: 'Colour',
+        sortable: true,
+        render: ({ colour }) => (
+            <div className="flex items-center gap-2">
+                <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: colour.hex }} />
+                <span>{colour.name}</span>
+            </div>
+        ),
+    },
+    {
+        accessor: 'size.name',
+        title: 'Size',
+        sortable: true,
+        render: ({ size }) => size.name,
+    },
+    {
+        accessor: 'price',
+        title: 'Price',
+        sortable: true,
+        textAlignment: 'right',
+        render: ({ price }) => <div className="text-right font-semibold">{formatPrice(price)}</div>,
+    },
+    {
+        accessor: 'hpp',
+        title: 'HPP',
+        sortable: true,
+        render: ({ hpp }) => <div className="text-right font-semibold">{formatPrice(hpp)}</div>,
+    },
+    {
+        accessor: 'unit_of_measure',
+        title: 'Unit of Measure',
+        sortable: true,
+        render: ({ unit_of_measure }) => unit_of_measure,
+    },
+    {
+        accessor: 'is_raw_material',
+        title: 'Raw Material',
+        sortable: true,
+        render: ({ is_raw_material }) => <span className={`badge ${is_raw_material ? 'bg-success' : 'bg-danger'}`}>{is_raw_material ? 'Yes' : 'No'}</span>,
+    },
+    {
+        accessor: 'is_finished_good',
+        title: 'Finished Good',
+        sortable: true,
+        render: ({ is_finished_good }) => <span className={`badge ${is_finished_good ? 'bg-success' : 'bg-danger'}`}>{is_finished_good ? 'Yes' : 'No'}</span>,
+    },
+    {
+        accessor: 'action',
+        title: 'Actions',
+        sortable: false,
+        textAlignment: 'center',
+        render: (data) => (
+            <div className="flex gap-4 items-center w-max mx-auto">
+                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
+                    <IconEdit className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
+                    <IconEye className="w-4.5 h-4.5" />
+                </button>
+                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
+                    <IconTrashLines className="w-4.5 h-4.5" />
+                </button>
+            </div>
+        ),
+    },
+];
diff --git a/src/features/products/components/CreateProductModal.tsx b/src/features/products/components/CreateProductModal.tsx
new file mode 100644
index 0000000..a9dd5c5
--- /dev/null
+++ b/src/features/products/components/CreateProductModal.tsx
@@ -0,0 +1,232 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CreateProductFormValues, createProductSchema } from '../types/form';
+import IconX from '../../../components/Icon/IconX';
+import { useTranslation } from 'react-i18next';
+import { useCreateProduct } from '../api/createProduct';
+import Swal from 'sweetalert2';
+import { useProductCategories } from '../../productCategories/api/getProductCategories';
+import { useProductCollections } from '../../productCollections/api/getProductCollections';
+import { useProductColours } from '../../productColours/api/getProductColours';
+import { useProductSizes } from '../../productSizes/api/getProductSizes';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const CreateProductModal = ({ isOpen, onClose }: Props) => {
+    const { t } = useTranslation();
+
+    const categoriesQuery = useProductCategories();
+    const categoryOptions =
+        categoriesQuery.data?.map((category) => ({
+            value: category.id,
+            label: category.name,
+        })) || [];
+
+    const collectionsQuery = useProductCollections();
+    const collectionOptions =
+        collectionsQuery.data?.map((collection) => ({
+            value: collection.id,
+            label: collection.name,
+        })) || [];
+
+    const coloursQuery = useProductColours();
+    const colourOptions =
+        coloursQuery.data?.map((colour) => ({
+            value: colour.id,
+            label: colour.name,
+        })) || [];
+
+    const sizesQuery = useProductSizes();
+    const sizeOptions =
+        sizesQuery.data?.map((size) => ({
+            value: size.id,
+            label: size.name,
+        })) || [];
+
+    const createProduct = useCreateProduct({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product created successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<CreateProductFormValues>({
+        resolver: zodResolver(createProductSchema),
+    });
+
+    const submit = async (data: CreateProductFormValues) => {
+        await createProduct.mutateAsync({ data });
+        reset();
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-3xl text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Create Product</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <div>
+                                                <label>
+                                                    Name <span className="text-red-500">*</span>
+                                                </label>
+                                                <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                                {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Category <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('category_id')} className="form-select">
+                                                    <option value="">Select Category</option>
+                                                    {categoryOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.category_id && <div className="text-red-500 text-sm mt-1">{errors.category_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Collection <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('collection_id')} className="form-select">
+                                                    <option value="">Select Collection</option>
+                                                    {collectionOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.collection_id && <div className="text-red-500 text-sm mt-1">{errors.collection_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Colour <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('colour_id')} className="form-select">
+                                                    <option value="">Select Colour</option>
+                                                    {colourOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.colour_id && <div className="text-red-500 text-sm mt-1">{errors.colour_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Size <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('size_id')} className="form-select">
+                                                    <option value="">Select Size</option>
+                                                    {sizeOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.size_id && <div className="text-red-500 text-sm mt-1">{errors.size_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Price <span className="text-red-500">*</span>
+                                                </label>
+                                                <input type="number" {...register('price')} className="form-input" placeholder="Enter Price" />
+                                                {errors.price && <div className="text-red-500 text-sm mt-1">{errors.price.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    HPP <span className="text-red-500">*</span>
+                                                </label>
+                                                <input type="number" {...register('hpp')} className="form-input" placeholder="Enter HPP" />
+                                                {errors.hpp && <div className="text-red-500 text-sm mt-1">{errors.hpp.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Unit <span className="text-red-500">*</span>
+                                                </label>
+                                                <input {...register('unit_of_measure')} className="form-input" placeholder="Enter Unit" />
+                                                {errors.unit_of_measure && <div className="text-red-500 text-sm mt-1">{errors.unit_of_measure.message}</div>}
+                                            </div>
+                                        </div>
+
+                                        {/* Description - Optional (no asterisk) */}
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea w-full" rows={4} placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        {/* Checkbox */}
+                                        <div className="flex gap-4 items-center">
+                                            <label className="flex items-center gap-2">
+                                                <input type="checkbox" {...register('is_raw_material')} />
+                                                Raw Material
+                                            </label>
+                                            <label className="flex items-center gap-2">
+                                                <input type="checkbox" {...register('is_finished_good')} />
+                                                Finished Good
+                                            </label>
+                                        </div>
+
+                                        {/* Buttons */}
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={createProduct.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={createProduct.isPending}>
+                                                {createProduct.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/products/components/DeleteproductModal.tsx b/src/features/products/components/DeleteproductModal.tsx
new file mode 100644
index 0000000..d57ad76
--- /dev/null
+++ b/src/features/products/components/DeleteproductModal.tsx
@@ -0,0 +1,85 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useDeleteProduct } from '../api/deleteProduct';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import IconX from '../../../components/Icon/IconX';
+import IconTrashLines from '../../../components/Icon/IconTrashLines';
+import IconLoader from '../../../components/Icon/IconLoader';
+
+interface DeleteProductModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    productId: number;
+}
+
+export const DeleteProductModal = ({ isOpen, onClose, productId }: DeleteProductModalProps) => {
+    const { t } = useTranslation();
+
+    const deleteProduct = useDeleteProduct({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: t('Deleted!'),
+                    text: t('Product deleted successfully'),
+                });
+                onClose();
+            },
+        },
+    });
+
+    const handleDelete = () => {
+        deleteProduct.mutate({ productId });
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product')}</div>
+
+                                <div className="p-5 text-center">
+                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
+                                        <IconTrashLines className="w-7 h-7 mx-auto" />
+                                    </div>
+
+                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product?')}</div>
+
+                                    <div className="flex justify-center items-center mt-8">
+                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteProduct.isPending}>
+                                            {t('cancel')}
+                                        </button>
+                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteProduct.isPending}>
+                                            {deleteProduct.isPending ? <IconLoader className="animate-spin" /> : null}
+                                            {t('delete')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/products/components/DetailProductModal.tsx b/src/features/products/components/DetailProductModal.tsx
new file mode 100644
index 0000000..6b069ab
--- /dev/null
+++ b/src/features/products/components/DetailProductModal.tsx
@@ -0,0 +1,101 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { Product } from '../types/api';
+import { formatPrice } from '../../../utils/format-price';
+import IconX from '../../../components/Icon/IconX';
+import { formatDate } from '../../../utils/format-date';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    product: Product | null;
+}
+
+export const DetailProductModal = ({ isOpen, onClose, product }: Props) => {
+    if (!product) return null;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" onClose={onClose} className="relative z-[60]">
+                <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/50" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-4xl transform overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-6 text-left align-middle shadow-xl transition-all relative">
+                                <button type="button" className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" onClick={onClose}>
+                                    <IconX />
+                                </button>
+
+                                <Dialog.Title as="h3" className="text-2xl font-bold mb-6">
+                                    Product Details
+                                </Dialog.Title>
+
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-[16px]">
+                                    <Detail label="SKU" value={product.sku} />
+                                    <Detail label="Name" value={product.name} />
+                                    <Detail label="Category" value={product.category?.name} />
+                                    <Detail label="Collection" value={product.collection?.name} />
+                                    <Detail
+                                        label="Colour"
+                                        value={
+                                            <div className="flex items-center gap-2">
+                                                <span className="inline-block w-4 h-4 rounded-full border" style={{ backgroundColor: product.colour?.hex }} />
+                                                {product.colour?.name}
+                                            </div>
+                                        }
+                                    />
+                                    <Detail label="Size" value={product.size?.name} />
+                                    <Detail label="Price" value={formatPrice(product.price)} />
+                                    <Detail label="HPP" value={formatPrice(product.hpp)} />
+                                    <Detail label="Unit" value={product.unit_of_measure} />
+                                    <Detail
+                                        label="Raw Material"
+                                        value={
+                                            <span className={`px-2 py-1 rounded text-sm font-medium text-white ${product.is_raw_material ? 'bg-green-500' : 'bg-red-500'}`}>
+                                                {product.is_raw_material ? 'Yes' : 'No'}
+                                            </span>
+                                        }
+                                    />
+                                    <Detail
+                                        label="Finished Good"
+                                        value={
+                                            <span className={`px-2 py-1 rounded text-sm font-medium text-white ${product.is_finished_good ? 'bg-green-500' : 'bg-red-500'}`}>
+                                                {product.is_finished_good ? 'Yes' : 'No'}
+                                            </span>
+                                        }
+                                    />
+                                    <Detail label="Created At" value={formatDate(product.CreatedAt)} />
+                                </div>
+
+                                {product.description && (
+                                    <div className="mt-8">
+                                        <h4 className="text-lg font-semibold mb-1">Description</h4>
+                                        <p className="text-base text-gray-700 dark:text-gray-300">{product.description}</p>
+                                    </div>
+                                )}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
+
+const Detail = ({ label, value }: { label: string; value: React.ReactNode }) => (
+    <div className="flex flex-col">
+        <span className="text-gray-500 dark:text-gray-400 text-base font-medium">{label}:</span>
+        <span className="text-lg font-semibold text-black dark:text-white mt-1">{value}</span>
+    </div>
+);
diff --git a/src/features/products/components/EditProductModal.tsx b/src/features/products/components/EditProductModal.tsx
new file mode 100644
index 0000000..2f94cfa
--- /dev/null
+++ b/src/features/products/components/EditProductModal.tsx
@@ -0,0 +1,244 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, useEffect } from 'react';
+import { DialogPanel, TransitionChild } from '@headlessui/react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { UpdateProductFormValues, updateProductSchema } from '../types/form';
+import IconX from '../../../components/Icon/IconX';
+import { useTranslation } from 'react-i18next';
+import Swal from 'sweetalert2';
+import { useProductCategories } from '../../productCategories/api/getProductCategories';
+import { useProductCollections } from '../../productCollections/api/getProductCollections';
+import { useProductColours } from '../../productColours/api/getProductColours';
+import { useProductSizes } from '../../productSizes/api/getProductSizes';
+import IconLoader from '../../../components/Icon/IconLoader';
+import { Product } from '../types/api';
+import { useUpdateProduct } from '../api/updateProduct';
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    product: Product | null;
+}
+
+export const EditProductModal = ({ isOpen, onClose, product }: Props) => {
+    const { t } = useTranslation();
+
+    const categoriesQuery = useProductCategories();
+    const categoryOptions =
+        categoriesQuery.data?.map((category) => ({
+            value: category.id,
+            label: category.name,
+        })) || [];
+
+    const collectionsQuery = useProductCollections();
+    const collectionOptions =
+        collectionsQuery.data?.map((collection) => ({
+            value: collection.id,
+            label: collection.name,
+        })) || [];
+
+    const coloursQuery = useProductColours();
+    const colourOptions =
+        coloursQuery.data?.map((colour) => ({
+            value: colour.id,
+            label: colour.name,
+        })) || [];
+
+    const sizesQuery = useProductSizes();
+    const sizeOptions =
+        sizesQuery.data?.map((size) => ({
+            value: size.id,
+            label: size.name,
+        })) || [];
+
+    const updateProduct = useUpdateProduct({
+        mutationConfig: {
+            onSuccess: () => {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Product updated successfully',
+                });
+                onClose();
+            },
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<UpdateProductFormValues>({
+        resolver: zodResolver(updateProductSchema),
+    });
+
+    useEffect(() => {
+        if (product) {
+            reset({
+                ...product,
+                category_id: product.category.id,
+                collection_id: product.collection.id,
+                colour_id: product.colour.id,
+                size_id: product.size.id,
+            });
+        }
+    }, [product, reset]);
+
+    const submit = async (data: UpdateProductFormValues) => {
+        if (product) {
+            await updateProduct.mutateAsync({ productId: product.id, data });
+        }
+    };
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
+                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-[black]/60" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center px-4 py-8">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-3xl text-black dark:text-white-dark">
+                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800">
+                                    <IconX />
+                                </button>
+
+                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">Edit Product</div>
+
+                                <div className="p-5">
+                                    <form onSubmit={handleSubmit(submit)} className="space-y-6">
+                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <div>
+                                                <label>
+                                                    Name <span className="text-red-500">*</span>
+                                                </label>
+                                                <input {...register('name')} className="form-input" placeholder="Enter Name" />
+                                                {errors.name && <div className="text-red-500 text-sm mt-1">{errors.name.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Category <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('category_id')} className="form-select">
+                                                    <option value="">Select Category</option>
+                                                    {categoryOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.category_id && <div className="text-red-500 text-sm mt-1">{errors.category_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Collection <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('collection_id')} className="form-select">
+                                                    <option value="">Select Collection</option>
+                                                    {collectionOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.collection_id && <div className="text-red-500 text-sm mt-1">{errors.collection_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Colour <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('colour_id')} className="form-select">
+                                                    <option value="">Select Colour</option>
+                                                    {colourOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.colour_id && <div className="text-red-500 text-sm mt-1">{errors.colour_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Size <span className="text-red-500">*</span>
+                                                </label>
+                                                <select {...register('size_id')} className="form-select">
+                                                    <option value="">Select Size</option>
+                                                    {sizeOptions.map((opt) => (
+                                                        <option key={opt.value} value={String(opt.value)}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                                {errors.size_id && <div className="text-red-500 text-sm mt-1">{errors.size_id.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Price <span className="text-red-500">*</span>
+                                                </label>
+                                                <input type="number" {...register('price')} className="form-input" placeholder="Enter Price" />
+                                                {errors.price && <div className="text-red-500 text-sm mt-1">{errors.price.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    HPP <span className="text-red-500">*</span>
+                                                </label>
+                                                <input type="number" {...register('hpp')} className="form-input" placeholder="Enter HPP" />
+                                                {errors.hpp && <div className="text-red-500 text-sm mt-1">{errors.hpp.message}</div>}
+                                            </div>
+                                            <div>
+                                                <label>
+                                                    Unit <span className="text-red-500">*</span>
+                                                </label>
+                                                <input {...register('unit_of_measure')} className="form-input" placeholder="Enter Unit" />
+                                                {errors.unit_of_measure && <div className="text-red-500 text-sm mt-1">{errors.unit_of_measure.message}</div>}
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <label>Description</label>
+                                            <textarea {...register('description')} className="form-textarea w-full" rows={4} placeholder="Enter Description" />
+                                            {errors.description && <div className="text-red-500 text-sm mt-1">{errors.description.message}</div>}
+                                        </div>
+
+                                        <div className="flex gap-4 items-center">
+                                            <label className="flex items-center gap-2">
+                                                <input type="checkbox" {...register('is_raw_material')} />
+                                                Raw Material
+                                            </label>
+                                            <label className="flex items-center gap-2">
+                                                <input type="checkbox" {...register('is_finished_good')} />
+                                                Finished Good
+                                            </label>
+                                        </div>
+
+                                        <div className="flex justify-end gap-3 mt-6">
+                                            <button type="button" onClick={onClose} className="btn btn-outline-danger disabled:opacity-50" disabled={updateProduct.isPending}>
+                                                {t('cancel')}
+                                            </button>
+                                            <button type="submit" className="btn btn-primary disabled:opacity-50" disabled={updateProduct.isPending}>
+                                                {updateProduct.isPending ? <IconLoader className="animate-spin" /> : null}
+                                                {t('save')}
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};
diff --git a/src/features/products/components/ProductListHeader.tsx b/src/features/products/components/ProductListHeader.tsx
new file mode 100644
index 0000000..73b9c26
--- /dev/null
+++ b/src/features/products/components/ProductListHeader.tsx
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next';
+import IconPlus from '../../../components/Icon/IconPlus';
+import { CreateProductModal } from './CreateProductModal';
+import { useState } from 'react';
+
+export const ProductListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
+    const { t } = useTranslation();
+    const [isOpenModalCreateProduct, setIsOpenModalCreateProduct] = useState(false);
+    return (
+        <>
+            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
+                <div className="ltr:mr-auto rtl:ml-auto">
+                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
+                </div>
+                <div className="flex items-center gap-2">
+                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateProduct(true)}>
+                        <IconPlus />
+                        {t('add_product')}
+                    </button>
+                </div>
+            </div>
+            <CreateProductModal isOpen={isOpenModalCreateProduct} onClose={() => setIsOpenModalCreateProduct(false)} />
+        </>
+    );
+};
diff --git a/src/features/products/components/ProductsList.tsx b/src/features/products/components/ProductsList.tsx
new file mode 100644
index 0000000..3420f47
--- /dev/null
+++ b/src/features/products/components/ProductsList.tsx
@@ -0,0 +1,77 @@
+import { DataTable } from 'mantine-datatable';
+import { useProducts } from '../api/getProducts';
+import { productColumns } from './Columns';
+import { useState } from 'react';
+import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
+import { ProductListHeader } from './ProductListHeader';
+import { DeleteProductModal } from './DeleteproductModal';
+import { Product } from '../types/api';
+import { EditProductModal } from './EditProductModal';
+import { DetailProductModal } from './DetailProductModal';
+
+const PAGE_SIZES = [10, 20, 30, 50];
+
+export const ProductsList = () => {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+
+    const productsQuery = useProducts();
+    const products = productsQuery.data ?? [];
+
+    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(products, {
+        columnAccessor: 'id',
+        direction: 'desc',
+    });
+
+    const [search, setSearch] = useState('');
+
+    const filteredRecords = paginatedRecords.filter((product) => product.name.toLowerCase().includes(search.toLowerCase()));
+
+    const onDelete = (product: Product) => {
+        setSelectedProduct(product);
+        setIsDeleteModalOpen(true);
+    };
+
+    const onEdit = (product: Product) => {
+        setSelectedProduct(product);
+        setIsEditModalOpen(true);
+    };
+
+    const onView = (product: Product) => {
+        setSelectedProduct(product);
+        setIsDetailModalOpen(true);
+    };
+
+    return (
+        <>
+            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
+                <ProductListHeader search={search} setSearch={setSearch} />
+
+                <div className="datatables pagination-padding px-5">
+                    <DataTable
+                        className="whitespace-nowrap table-hover"
+                        records={filteredRecords}
+                        columns={productColumns({ onEdit, onView, onDelete })}
+                        highlightOnHover
+                        minHeight={200}
+                        fetching={productsQuery.isLoading}
+                        totalRecords={totalRecords}
+                        recordsPerPage={pageSize}
+                        page={page}
+                        onPageChange={setPage}
+                        recordsPerPageOptions={PAGE_SIZES}
+                        onRecordsPerPageChange={setPageSize}
+                        sortStatus={sortStatus}
+                        onSortStatusChange={setSortStatus}
+                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
+                    />
+                </div>
+            </div>
+            <DeleteProductModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} productId={selectedProduct?.id || 0} />
+            <EditProductModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} product={selectedProduct} />
+            <DetailProductModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} product={selectedProduct} />
+        </>
+    );
+};
diff --git a/src/features/products/types/api.ts b/src/features/products/types/api.ts
new file mode 100644
index 0000000..6e6600b
--- /dev/null
+++ b/src/features/products/types/api.ts
@@ -0,0 +1,26 @@
+import { Entity } from '../../../types/api';
+import { ProductCategory } from '../../productCategories/types/api';
+import { ProductCollection } from '../../productCollections/types/api';
+import { ProductColour } from '../../productColours/types/api';
+import { ProductSize } from '../../productSizes/types/api';
+
+export type Product = Entity<{
+    category_id: number;
+    category: ProductCategory;
+    collection_id: number;
+    collection: ProductCollection;
+    colour_id: number;
+    colour: ProductColour;
+    size_id: number;
+    size: ProductSize;
+    sku: string;
+    name: string;
+    description: string;
+    price: number;
+    hpp: number;
+    unit_of_measure: string;
+    is_raw_material: boolean;
+    is_finished_good: boolean;
+}>;
+
+export type ProductResponse = Product[];
diff --git a/src/features/products/types/form.ts b/src/features/products/types/form.ts
new file mode 100644
index 0000000..202b41c
--- /dev/null
+++ b/src/features/products/types/form.ts
@@ -0,0 +1,33 @@
+import { z } from 'zod';
+
+export const createProductSchema = z.object({
+    name: z.string().min(1, 'Name is required').max(255, 'Name must be less than 255 characters'),
+    description: z.string().max(1000, 'Description must be less than 1000 characters').optional(),
+    category_id: z.coerce.number().min(1, 'Category is required'),
+    collection_id: z.coerce.number().min(1, 'Collection is required'),
+    colour_id: z.coerce.number().min(1, 'Colour is required'),
+    size_id: z.coerce.number().min(1, 'Size is required'),
+    price: z.coerce.number().min(100, 'Price must be greater than 100'),
+    hpp: z.coerce.number().min(100, 'HPP must be greater than 100'),
+    unit_of_measure: z.string().min(1, 'Unit of measure is required').max(20, 'Unit of measure must be less than 20 characters'),
+    is_raw_material: z.boolean().optional(),
+    is_finished_good: z.boolean().optional(),
+});
+
+export type CreateProductFormValues = z.infer<typeof createProductSchema>;
+
+export const updateProductSchema = z.object({
+    name: z.string().min(1, 'Name is required').max(255, 'Name must be less than 255 characters'),
+    description: z.string().max(1000, 'Description must be less than 1000 characters').optional(),
+    category_id: z.coerce.number().min(1, 'Category is required'),
+    collection_id: z.coerce.number().min(1, 'Collection is required'),
+    colour_id: z.coerce.number().min(1, 'Colour is required'),
+    size_id: z.coerce.number().min(1, 'Size is required'),
+    price: z.coerce.number().min(100, 'Price must be greater than 100'),
+    hpp: z.coerce.number().min(100, 'HPP must be greater than 100'),
+    unit_of_measure: z.string().min(1, 'Unit of measure is required').max(20, 'Unit of measure must be less than 20 characters'),
+    is_raw_material: z.boolean().optional(),
+    is_finished_good: z.boolean().optional(),
+});
+
+export type UpdateProductFormValues = z.infer<typeof updateProductSchema>;
diff --git a/src/hooks/useSortedPaginatedRecords.ts b/src/hooks/useSortedPaginatedRecords.ts
new file mode 100644
index 0000000..a5762df
--- /dev/null
+++ b/src/hooks/useSortedPaginatedRecords.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { DataTableSortStatus } from 'mantine-datatable';
+import { sortBy } from 'lodash';
+
+export function useSortedPaginatedRecords<T>(data: T[] = [], defaultSort: DataTableSortStatus) {
+    const [sortStatus, setSortStatus] = useState<DataTableSortStatus>(defaultSort);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [records, setRecords] = useState<T[]>([]);
+
+    useEffect(() => {
+        const sorted = sortBy(data, sortStatus.columnAccessor);
+        setRecords(sortStatus.direction === 'desc' ? sorted.reverse() : sorted);
+        setPage(1);
+    }, [data, sortStatus]);
+
+    const paginatedRecords = records.slice((page - 1) * pageSize, page * pageSize);
+
+    return {
+        sortStatus,
+        setSortStatus,
+        page,
+        setPage,
+        pageSize,
+        setPageSize,
+        paginatedRecords,
+        totalRecords: data.length,
+    };
+}
diff --git a/src/i18n.tsx b/src/i18n.tsx
new file mode 100644
index 0000000..1fbf8a1
--- /dev/null
+++ b/src/i18n.tsx
@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import themeConfig from './theme.config';
+i18n
+    // load translation using http -> see /public/locales
+    // learn more: https://github.com/i18next/i18next-http-backend
+    .use(Backend)
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // pass the i18n instance to react-i18next.
+    .use(initReactI18next)
+    // init i18next
+    // for all options read: https://www.i18next.com/overview/configuration-options
+    .init({
+        fallbackLng: themeConfig.locale || 'en',
+        debug: false,
+        load: 'languageOnly'
+    });
+export default i18n;
diff --git a/src/lib/ReactQueryAuth.tsx b/src/lib/ReactQueryAuth.tsx
new file mode 100644
index 0000000..5673602
--- /dev/null
+++ b/src/lib/ReactQueryAuth.tsx
@@ -0,0 +1,105 @@
+import { useQuery, useMutation, useQueryClient, QueryKey, UseQueryOptions, QueryFunction, MutationFunction, UseMutationOptions } from '@tanstack/react-query';
+import React from 'react';
+
+export interface ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials> {
+    userFn: QueryFunction<User, QueryKey>;
+    loginFn: MutationFunction<User, LoginCredentials>;
+    registerFn?: MutationFunction<User, RegisterCredentials>;
+    logoutFn: MutationFunction<unknown, unknown>;
+    userKey?: QueryKey;
+}
+
+export interface AuthProviderProps {
+    children: React.ReactNode;
+}
+
+export function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(config: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>) {
+    const { userFn, userKey = ['authenticated-user'], loginFn, registerFn, logoutFn } = config;
+
+    const useUser = (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, 'queryKey' | 'queryFn'>) => useQuery({ queryKey: userKey, queryFn: userFn, ...options });
+
+    const useLogin = (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, 'mutationFn'>) => {
+        const queryClient = useQueryClient();
+
+        const setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient]);
+
+        return useMutation({
+            mutationFn: loginFn,
+            ...options,
+            onSuccess: (user, ...rest) => {
+                setUser(user);
+                options?.onSuccess?.(user, ...rest);
+            },
+        });
+    };
+
+    const useRegister = (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, 'mutationFn'>) => {
+        const queryClient = useQueryClient();
+
+        const setUser = React.useCallback((data: User) => queryClient.setQueryData(userKey, data), [queryClient]);
+
+        return useMutation({
+            mutationFn: registerFn,
+            ...options,
+            onSuccess: (user, ...rest) => {
+                setUser(user);
+                options?.onSuccess?.(user, ...rest);
+            },
+        });
+    };
+
+    const useLogout = (options?: UseMutationOptions<unknown, Error, unknown>) => {
+        const queryClient = useQueryClient();
+
+        const setUser = React.useCallback((data: User | null) => queryClient.setQueryData(userKey, data), [queryClient]);
+
+        return useMutation({
+            mutationFn: logoutFn,
+            ...options,
+            onSuccess: (...args) => {
+                setUser(null);
+                queryClient.clear();
+                options?.onSuccess?.(...args);
+            },
+        });
+    };
+
+    function AuthLoader({
+        children,
+        renderLoading,
+        renderUnauthenticated,
+        renderError = (error: Error) => <>{JSON.stringify(error)}</>,
+    }: {
+        children: React.ReactNode;
+        renderLoading: () => JSX.Element;
+        renderUnauthenticated?: () => JSX.Element;
+        renderError?: (error: Error) => JSX.Element;
+    }) {
+        const { isSuccess, isFetched, status, data, error } = useUser();
+
+        if (isSuccess) {
+            if (renderUnauthenticated && !data) {
+                return renderUnauthenticated();
+            }
+            return <>{children}</>;
+        }
+
+        if (!isFetched) {
+            return renderLoading();
+        }
+
+        if (status === 'error') {
+            return renderError(error);
+        }
+
+        return null;
+    }
+
+    return {
+        useUser,
+        useLogin,
+        useRegister,
+        useLogout,
+        AuthLoader,
+    };
+}
diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
new file mode 100644
index 0000000..2229fb2
--- /dev/null
+++ b/src/lib/apiClient.ts
@@ -0,0 +1,70 @@
+import Axios, { InternalAxiosRequestConfig } from 'axios';
+
+import { env } from '../config/env';
+import { Cookie } from './cookieClient';
+import Swal from 'sweetalert2';
+import { refreshToken } from '../features/auth/api/refreshToken';
+import { queryClient } from './reactQuery';
+
+function authRequestInterceptor(config: InternalAxiosRequestConfig) {
+    if (config.headers) {
+        config.headers.Accept = 'application/json';
+    }
+
+    const token = Cookie.getAccessToken();
+    if (token) {
+        config.headers.authorization = `Bearer ${token}`;
+    }
+
+    return config;
+}
+
+export const api = Axios.create({
+    baseURL: env.API_URL,
+});
+
+api.interceptors.request.use(authRequestInterceptor);
+api.interceptors.response.use(
+    (response) => {
+        return response.data;
+    },
+    async (error) => {
+        const message = error.response?.data?.error || error.response?.data?.message || error.message;
+        Swal.fire({
+            icon: 'error',
+            title: 'Error',
+            text: message,
+        });
+
+        // refresh token
+        const originalRequest = error.config;
+        if (error.response?.status == 403 && !originalRequest._retry) {
+            originalRequest._retry = true;
+
+            try {
+                const refreshTokenPromise = refreshToken({
+                    refresh_token: Cookie.getRefreshToken() || '',
+                });
+
+                const { token, refresh_token } = await refreshTokenPromise;
+
+                Cookie.setAccessToken(token);
+                Cookie.setRefreshToken(refresh_token);
+
+                originalRequest.headers.authorization = `Bearer ${token}`;
+
+                return api(originalRequest);
+            } catch (error) {
+                Cookie.clearTokens();
+                queryClient.clear();
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Session expired. Please login again.',
+                });
+            }
+        }
+
+        return Promise.reject(error);
+    }
+);
diff --git a/src/lib/auth.tsx b/src/lib/auth.tsx
new file mode 100644
index 0000000..de1c980
--- /dev/null
+++ b/src/lib/auth.tsx
@@ -0,0 +1,58 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { Cookie } from './cookieClient';
+import Swal from 'sweetalert2';
+import { configureAuth } from './ReactQueryAuth';
+import { loginWithUsernameAndPassword } from '../features/auth/api/login';
+import { LoginFormValues } from '../features/auth/types/form';
+import { getAuthUser } from '../features/auth/api/getAuthUser';
+import { AuthUserResponse, UsersMeResponse } from '../features/auth/types/api';
+import { paths } from '../config/paths';
+
+async function handleUserResponse(data: AuthUserResponse): Promise<UsersMeResponse> {
+    const { token, refresh_token, username, role } = data;
+    Cookie.setAccessToken(token);
+    Cookie.setRefreshToken(refresh_token);
+    return { username, role };
+}
+
+async function userFn() {
+    if (Cookie.getAccessToken() || Cookie.getRefreshToken()) {
+        try {
+            const data = await getAuthUser();
+            return data;
+        } catch (error) {
+            Cookie.clearTokens();
+        }
+    }
+    return null;
+}
+
+async function loginFn(dataForm: LoginFormValues): Promise<UsersMeResponse> {
+    const response = await loginWithUsernameAndPassword(dataForm);
+    const user = await handleUserResponse(response);
+    return user;
+}
+
+async function logoutFn() {
+    Cookie.clearTokens();
+    return null;
+}
+
+const authConfig = {
+    userFn,
+    loginFn,
+    logoutFn,
+};
+
+export const { useUser, useLogin, useLogout, AuthLoader } = configureAuth(authConfig);
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+    const user = useUser();
+    const location = useLocation();
+
+    if (!user.data) {
+        return <Navigate to={paths.auth.login.getHref(location.pathname)} replace />;
+    }
+
+    return children;
+};
diff --git a/src/lib/cookieClient.ts b/src/lib/cookieClient.ts
new file mode 100644
index 0000000..a10b0b0
--- /dev/null
+++ b/src/lib/cookieClient.ts
@@ -0,0 +1,37 @@
+import Cookies from 'js-cookie';
+
+export const Cookie = {
+    setAccessToken(token: string) {
+        const inOneDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
+        Cookies.set('token', token, {
+            secure: true,
+            sameSite: 'lax',
+            expires: inOneDay,
+        });
+    },
+    getAccessToken() {
+        return Cookies.get('token');
+    },
+    setRefreshToken(token: string) {
+        const inOneMonth = new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000);
+        Cookies.set('refresh_token', token, {
+            secure: true,
+            sameSite: 'lax',
+            expires: inOneMonth,
+        });
+    },
+    getRefreshToken() {
+        return Cookies.get('refresh_token');
+    },
+    clearTokens() {
+        Cookies.remove('token', {
+            secure: true,
+            sameSite: 'lax',
+        });
+
+        Cookies.remove('refresh_token', {
+            secure: true,
+            sameSite: 'lax',
+        });
+    },
+};
diff --git a/src/lib/reactQuery.ts b/src/lib/reactQuery.ts
new file mode 100644
index 0000000..5315044
--- /dev/null
+++ b/src/lib/reactQuery.ts
@@ -0,0 +1,20 @@
+import { DefaultOptions, QueryClient, UseMutationOptions } from '@tanstack/react-query';
+
+export const queryConfig = {
+    queries: {
+        // throwOnError: true,
+        refetchOnWindowFocus: false,
+        retry: false,
+        staleTime: 1000 * 60,
+    },
+} satisfies DefaultOptions;
+
+export const queryClient = new QueryClient({
+    defaultOptions: queryConfig,
+});
+
+export type ApiFnReturnType<FnType extends (...args: any) => Promise<any>> = Awaited<ReturnType<FnType>>;
+
+export type QueryConfig<T extends (...args: any[]) => any> = Omit<ReturnType<T>, 'queryKey' | 'queryFn'>;
+
+export type MutationConfig<MutationFnType extends (...args: any) => Promise<any>> = UseMutationOptions<ApiFnReturnType<MutationFnType>, Error, Parameters<MutationFnType>[0]>;
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..e570b03
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,49 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+
+// Perfect Scrollbar
+import 'react-perfect-scrollbar/dist/css/styles.css';
+
+// Tailwind css
+import './tailwind.css';
+
+// i18n (needs to be bundled)
+import './i18n';
+
+// Router
+import { RouterProvider } from 'react-router-dom';
+import router from './router/index';
+
+// Redux
+import { Provider } from 'react-redux';
+import store from './store/index';
+
+// React Query
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { queryClient } from './lib/reactQuery';
+
+// React Query Auth
+import { AuthLoader } from './lib/auth';
+import IconLoader from './components/Icon/IconLoader';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <Suspense>
+            <Provider store={store}>
+                <QueryClientProvider client={queryClient}>
+                    <ReactQueryDevtools />
+                    <AuthLoader
+                        renderLoading={() => (
+                            <div className="flex h-screen w-screen items-center justify-center">
+                                <IconLoader className="animate-spin" />
+                            </div>
+                        )}
+                    >
+                        <RouterProvider router={router} />
+                    </AuthLoader>
+                </QueryClientProvider>
+            </Provider>
+        </Suspense>
+    </React.StrictMode>
+);
diff --git a/src/pages/Auth/Login.tsx b/src/pages/Auth/Login.tsx
new file mode 100644
index 0000000..31019a5
--- /dev/null
+++ b/src/pages/Auth/Login.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { LoginForm } from '../../features/auth/components/LoginForm';
+import { useUser } from '../../lib/auth';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { paths } from '../../config/paths';
+
+const Login = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Login'));
+    });
+
+    const user = useUser();
+    const [searchParams] = useSearchParams();
+    const redirectTo = searchParams.get('redirectTo');
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (user.data) {
+            navigate(redirectTo ? redirectTo : paths.dashboard.getHref(), {
+                replace: true,
+            });
+        }
+    }, [user.data, navigate, redirectTo]);
+
+    return <LoginForm />;
+};
+
+export default Login;
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..987844d
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../store/themeConfigSlice';
+import Maintenence from '../components/Maintenence';
+
+const Index = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Dashboard'));
+    });
+
+    return <Maintenence page="Dashboard" />;
+};
+
+export default Index;
diff --git a/src/pages/Inventory/MyProducts.tsx b/src/pages/Inventory/MyProducts.tsx
new file mode 100644
index 0000000..bfaf1de
--- /dev/null
+++ b/src/pages/Inventory/MyProducts.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { useTranslation } from 'react-i18next';
+import { ProductsList } from '../../features/products/components/ProductsList';
+import { Breadcrumb } from '../../components/Breadcrumb';
+
+const MyProducts = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle(t('my_products')));
+    });
+
+    const { t } = useTranslation();
+
+    const breadcrumbItems = [{ label: 'Dashboard', href: '/' }, { label: 'My Products' }];
+
+    return (
+        <>
+            <Breadcrumb items={breadcrumbItems} />
+            <h5 className="mt-5 mb-5 font-bold text-2xl">{t('my_products')}</h5>
+            <ProductsList />
+        </>
+    );
+};
+
+export default MyProducts;
diff --git a/src/pages/Inventory/ProductCategories.tsx b/src/pages/Inventory/ProductCategories.tsx
new file mode 100644
index 0000000..2c9bf37
--- /dev/null
+++ b/src/pages/Inventory/ProductCategories.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { Breadcrumb } from '../../components/Breadcrumb';
+import { useTranslation } from 'react-i18next';
+import { ProductCategoriesList } from '../../features/productCategories/components/ProductCategoriesList';
+
+const ProductCategories = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Product Categories'));
+    });
+
+    const { t } = useTranslation();
+
+    const breadcrumbItems = [{ label: 'Dashboard', href: '/' }, { label: 'Product Categories' }];
+
+    return (
+        <>
+            <Breadcrumb items={breadcrumbItems} />
+            <h5 className="mt-5 mb-5 font-bold text-2xl">{t('product_categories')}</h5>
+            <ProductCategoriesList />
+        </>
+    );
+};
+
+export default ProductCategories;
diff --git a/src/pages/Inventory/ProductCollections.tsx b/src/pages/Inventory/ProductCollections.tsx
new file mode 100644
index 0000000..790db7e
--- /dev/null
+++ b/src/pages/Inventory/ProductCollections.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { useTranslation } from 'react-i18next';
+import { Breadcrumb } from '../../components/Breadcrumb';
+import { ProductCollectionsList } from '../../features/productCollections/components/ProductCollectionsList';
+
+const ProductCollections = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Product Collections'));
+    });
+
+    const { t } = useTranslation();
+
+    const breadcrumbItems = [{ label: 'Dashboard', href: '/' }, { label: 'Product Collections' }];
+
+    return (
+        <>
+            <Breadcrumb items={breadcrumbItems} />
+            <h5 className="mt-5 mb-5 font-bold text-2xl">{t('product_collections')}</h5>
+            <ProductCollectionsList />
+        </>
+    );
+};
+
+export default ProductCollections;
diff --git a/src/pages/Inventory/ProductColors.tsx b/src/pages/Inventory/ProductColors.tsx
new file mode 100644
index 0000000..4168af2
--- /dev/null
+++ b/src/pages/Inventory/ProductColors.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { useTranslation } from 'react-i18next';
+import { Breadcrumb } from '../../components/Breadcrumb';
+import { ProductColoursList } from '../../features/productColours/components/ProductColoursList';
+
+const ProductColors = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Product Colors'));
+    });
+
+    const { t } = useTranslation();
+
+    const breadcrumbItems = [{ label: 'Dashboard', href: '/' }, { label: 'Product Colors' }];
+
+    return (
+        <>
+            <Breadcrumb items={breadcrumbItems} />
+            <h5 className="mt-5 mb-5 font-bold text-2xl">{t('product_colors')}</h5>
+            <ProductColoursList />
+        </>
+    );
+};
+
+export default ProductColors;
diff --git a/src/pages/Inventory/ProductSizes.tsx b/src/pages/Inventory/ProductSizes.tsx
new file mode 100644
index 0000000..c336381
--- /dev/null
+++ b/src/pages/Inventory/ProductSizes.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPageTitle } from '../../store/themeConfigSlice';
+import { useTranslation } from 'react-i18next';
+import { Breadcrumb } from '../../components/Breadcrumb';
+import { ProductSizesList } from '../../features/productSizes/components/ProductSizesList';
+
+const ProductSizes = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Product Sizes'));
+    });
+
+    const { t } = useTranslation();
+
+    const breadcrumbItems = [{ label: 'Dashboard', href: '/' }, { label: 'Product Sizes' }];
+
+    return (
+        <>
+            <Breadcrumb items={breadcrumbItems} />
+            <h5 className="mt-5 mb-5 font-bold text-2xl">{t('product_sizes')}</h5>
+            <ProductSizesList />
+        </>
+    );
+};
+
+export default ProductSizes;
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 0000000..f272fc6
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { setPageTitle } from '../store/themeConfigSlice';
+import { IRootState } from '../store';
+import { useTranslation } from 'react-i18next';
+
+const NotFound = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(setPageTitle('Error 404'));
+    });
+    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);
+    const { t } = useTranslation();
+
+    return (
+        <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
+            <div className="px-6 py-16 text-center font-semibold before:container before:absolute before:left-1/2 before:-translate-x-1/2 before:rounded-full before:bg-[linear-gradient(180deg,#4361EE_0%,rgba(67,97,238,0)_50.73%)] before:aspect-square before:opacity-10 md:py-20">
+                <div className="relative">
+                    <img
+                        src={isDark ? '/assets/images/error/404-dark.svg' : '/assets/images/error/404-light.svg'}
+                        alt="404"
+                        className="mx-auto -mt-10 w-full max-w-xs object-cover md:-mt-14 md:max-w-xl"
+                    />
+                    <p className="mt-5 text-base dark:text-white">{t('the_page_you_requested_was_not_found')}</p>
+                    <Link to="/" className="btn btn-primary mx-auto !mt-7 w-max border-0 uppercase shadow-none">
+                        {t('home')}
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotFound;
diff --git a/src/router/index.tsx b/src/router/index.tsx
new file mode 100644
index 0000000..e9c123a
--- /dev/null
+++ b/src/router/index.tsx
@@ -0,0 +1,15 @@
+import { createBrowserRouter } from 'react-router-dom';
+import BlankLayout from '../components/Layouts/BlankLayout';
+import DefaultLayout from '../components/Layouts/DefaultLayout';
+import { routes } from './routes';
+
+const finalRoutes = routes.map((route) => {
+    return {
+        ...route,
+        element: route.layout === 'blank' ? <BlankLayout>{route.element}</BlankLayout> : <DefaultLayout>{route.element}</DefaultLayout>,
+    };
+});
+
+const router = createBrowserRouter(finalRoutes);
+
+export default router;
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
new file mode 100644
index 0000000..d6168f3
--- /dev/null
+++ b/src/router/routes.tsx
@@ -0,0 +1,84 @@
+import { lazy } from 'react';
+const LogIn = lazy(() => import('../pages/Auth/Login'));
+const MyProducts = lazy(() => import('../pages/Inventory/MyProducts'));
+const ProductCategories = lazy(() => import('../pages/Inventory/ProductCategories'));
+const ProductCollections = lazy(() => import('../pages/Inventory/ProductCollections'));
+const ProductColors = lazy(() => import('../pages/Inventory/ProductColors'));
+const ProductSizes = lazy(() => import('../pages/Inventory/ProductSizes'));
+import { paths } from '../config/paths';
+import { ProtectedRoute } from '../lib/auth';
+const Index = lazy(() => import('../pages/Index'));
+const NotFound = lazy(() => import('../pages/NotFound'));
+
+const routes = [
+    // auth
+    {
+        path: paths.auth.login.path,
+        element: <LogIn />,
+        layout: 'blank',
+    },
+    // dashboard
+    {
+        path: paths.dashboard.path,
+        element: (
+            <ProtectedRoute>
+                <Index />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    // inventory
+    {
+        path: paths.inventory.myProducts.path,
+        element: (
+            <ProtectedRoute>
+                <MyProducts />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    {
+        path: paths.inventory.productCategories.path,
+        element: (
+            <ProtectedRoute>
+                <ProductCategories />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    {
+        path: paths.inventory.productCollections.path,
+        element: (
+            <ProtectedRoute>
+                <ProductCollections />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    {
+        path: paths.inventory.productColors.path,
+        element: (
+            <ProtectedRoute>
+                <ProductColors />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    {
+        path: paths.inventory.productSizes.path,
+        element: (
+            <ProtectedRoute>
+                <ProductSizes />
+            </ProtectedRoute>
+        ),
+        layout: 'default',
+    },
+    // not found
+    {
+        path: '*',
+        element: <NotFound />,
+        layout: 'blank',
+    },
+];
+
+export { routes };
diff --git a/src/store/index.tsx b/src/store/index.tsx
new file mode 100644
index 0000000..c9c214c
--- /dev/null
+++ b/src/store/index.tsx
@@ -0,0 +1,12 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import themeConfigSlice from './themeConfigSlice';
+
+const rootReducer = combineReducers({
+    themeConfig: themeConfigSlice,
+});
+
+export default configureStore({
+    reducer: rootReducer,
+});
+
+export type IRootState = ReturnType<typeof rootReducer>;
diff --git a/src/store/themeConfigSlice.tsx b/src/store/themeConfigSlice.tsx
new file mode 100644
index 0000000..447f50d
--- /dev/null
+++ b/src/store/themeConfigSlice.tsx
@@ -0,0 +1,144 @@
+import { createSlice } from '@reduxjs/toolkit';
+import i18next from 'i18next';
+import themeConfig from '../theme.config';
+
+const defaultState = {
+    isDarkMode: false,
+    mainLayout: 'app',
+    theme: 'light',
+    menu: 'vertical',
+    layout: 'full',
+    rtlClass: 'ltr',
+    animation: '',
+    navbar: 'navbar-sticky',
+    locale: 'en',
+    sidebar: false,
+    pageTitle: '',
+    languageList: [
+        { code: 'zh', name: 'Chinese' },
+        { code: 'da', name: 'Danish' },
+        { code: 'en', name: 'English' },
+        { code: 'fr', name: 'French' },
+        { code: 'de', name: 'German' },
+        { code: 'el', name: 'Greek' },
+        { code: 'hu', name: 'Hungarian' },
+        { code: 'it', name: 'Italian' },
+        { code: 'ja', name: 'Japanese' },
+        { code: 'pl', name: 'Polish' },
+        { code: 'pt', name: 'Portuguese' },
+        { code: 'ru', name: 'Russian' },
+        { code: 'es', name: 'Spanish' },
+        { code: 'sv', name: 'Swedish' },
+        { code: 'tr', name: 'Turkish' },
+    ],
+    semidark: false,
+};
+
+const initialState = {
+    theme: localStorage.getItem('theme') || themeConfig.theme,
+    menu: localStorage.getItem('menu') || themeConfig.menu,
+    layout: localStorage.getItem('layout') || themeConfig.layout,
+    rtlClass: localStorage.getItem('rtlClass') || themeConfig.rtlClass,
+    animation: localStorage.getItem('animation') || themeConfig.animation,
+    navbar: localStorage.getItem('navbar') || themeConfig.navbar,
+    locale: localStorage.getItem('i18nextLng') || themeConfig.locale,
+    isDarkMode: false,
+    sidebar: localStorage.getItem('sidebar') || defaultState.sidebar,
+    semidark: localStorage.getItem('semidark') || themeConfig.semidark,
+    languageList: [
+        { code: 'zh', name: 'Chinese' },
+        { code: 'da', name: 'Danish' },
+        { code: 'en', name: 'English' },
+        { code: 'fr', name: 'French' },
+        { code: 'de', name: 'German' },
+        { code: 'el', name: 'Greek' },
+        { code: 'hu', name: 'Hungarian' },
+        { code: 'it', name: 'Italian' },
+        { code: 'ja', name: 'Japanese' },
+        { code: 'pl', name: 'Polish' },
+        { code: 'pt', name: 'Portuguese' },
+        { code: 'ru', name: 'Russian' },
+        { code: 'es', name: 'Spanish' },
+        { code: 'sv', name: 'Swedish' },
+        { code: 'tr', name: 'Turkish' },
+        { code: 'ae', name: 'Arabic' },
+    ],
+};
+
+const themeConfigSlice = createSlice({
+    name: 'auth',
+    initialState: initialState,
+    reducers: {
+        toggleTheme(state, { payload }) {
+            payload = payload || state.theme; // light | dark | system
+            localStorage.setItem('theme', payload);
+            state.theme = payload;
+            if (payload === 'light') {
+                state.isDarkMode = false;
+            } else if (payload === 'dark') {
+                state.isDarkMode = true;
+            } else if (payload === 'system') {
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    state.isDarkMode = true;
+                } else {
+                    state.isDarkMode = false;
+                }
+            }
+
+            if (state.isDarkMode) {
+                document.querySelector('body')?.classList.add('dark');
+            } else {
+                document.querySelector('body')?.classList.remove('dark');
+            }
+        },
+        toggleMenu(state, { payload }) {
+            payload = payload || state.menu; // vertical, collapsible-vertical, horizontal
+            state.sidebar = false; // reset sidebar state
+            localStorage.setItem('menu', payload);
+            state.menu = payload;
+        },
+        toggleLayout(state, { payload }) {
+            payload = payload || state.layout; // full, boxed-layout
+            localStorage.setItem('layout', payload);
+            state.layout = payload;
+        },
+        toggleRTL(state, { payload }) {
+            payload = payload || state.rtlClass; // rtl, ltr
+            localStorage.setItem('rtlClass', payload);
+            state.rtlClass = payload;
+            document.querySelector('html')?.setAttribute('dir', state.rtlClass || 'ltr');
+        },
+        toggleAnimation(state, { payload }) {
+            payload = payload || state.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
+            payload = payload?.trim();
+            localStorage.setItem('animation', payload);
+            state.animation = payload;
+        },
+        toggleNavbar(state, { payload }) {
+            payload = payload || state.navbar; // navbar-sticky, navbar-floating, navbar-static
+            localStorage.setItem('navbar', payload);
+            state.navbar = payload;
+        },
+        toggleSemidark(state, { payload }) {
+            payload = payload === true || payload === 'true' ? true : false;
+            localStorage.setItem('semidark', payload);
+            state.semidark = payload;
+        },
+        toggleLocale(state, { payload }) {
+            payload = payload || state.locale;
+            i18next.changeLanguage(payload);
+            state.locale = payload;
+        },
+        toggleSidebar(state) {
+            state.sidebar = !state.sidebar;
+        },
+
+        setPageTitle(state, { payload }) {
+            document.title = `${payload} | Mini ERP`;
+        },
+    },
+});
+
+export const { toggleTheme, toggleMenu, toggleLayout, toggleRTL, toggleAnimation, toggleNavbar, toggleSemidark, toggleLocale, toggleSidebar, setPageTitle } = themeConfigSlice.actions;
+
+export default themeConfigSlice.reducer;
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..81e2015
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,670 @@
+/* Animate css */
+@import './assets/css/animate.css';
+
+/* Data tables css */
+@import './assets/css/datatables.css';
+
+/* quill-editor css */
+@import './assets/css/quill-editor.css';
+
+/* sweetalert css */
+@import './assets/css/sweetalert.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    html {
+        @apply scroll-smooth;
+    }
+
+    body {
+        @apply bg-[#fafafa] font-nunito;
+    }
+
+    body.dark {
+        @apply bg-[#060818];
+    }
+
+    /* Panel */
+    .panel {
+        @apply relative rounded-md bg-white p-5 shadow dark:bg-black;
+    }
+    /* Navbar */
+    .navbar-sticky header,
+    .navbar-floating header {
+        @apply sticky top-0 z-20;
+    }
+    .navbar-floating header {
+        @apply bg-[#fafafa]/90 px-6 pt-4 dark:bg-[#060818]/90;
+    }
+    .navbar-floating header > div .horizontal-menu {
+        @apply rounded-b-md shadow;
+    }
+
+    /* Sidebar */
+    .sidebar:hover .nav-item > a {
+        @apply w-auto;
+    }
+
+    .sidebar .nav-item > button,
+    .sidebar .nav-item > a {
+        @apply mb-1 flex items-center justify-between overflow-hidden whitespace-nowrap rounded-md p-2.5 text-[#506690] hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-white-dark w-full;
+    }
+    .sidebar .nav-item > button.active,
+    .sidebar .nav-item > a.active {
+        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white-dark;
+    }
+
+    .sidebar .nav-item > button.active > div > span,
+    .sidebar .nav-item > a.active > div > span {
+        @apply dark:!text-white-dark;
+    }
+
+    .sidebar ul.sub-menu li button,
+    .sidebar ul.sub-menu li a {
+        @apply flex items-center px-9 py-2.5 before:h-0.5 before:w-2 before:rounded before:bg-gray-300 hover:bg-gray-100
+      hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark:before:bg-gray-500 dark:hover:bg-gray-900 dark:hover:text-primary;
+    }
+    .sidebar ul.sub-menu li button.active,
+    .sidebar ul.sub-menu li a.active {
+        @apply text-primary before:bg-primary;
+    }
+
+    .sidebar .nav-item a div:first-child svg,
+    .sidebar .nav-item button div:first-child svg {
+        @apply w-5 h-5 text-black/50 dark:text-white/50;
+    }
+
+    .main-container .main-content {
+        @apply transition-all duration-300 lg:ltr:ml-[260px] lg:rtl:mr-[260px];
+    }
+
+    /* Horizontal layouts */
+    .horizontal .horizontal-menu {
+        @apply hidden shadow-md lg:flex;
+    }
+    .horizontal .horizontal-logo {
+        @apply flex;
+    }
+    .horizontal .main-container .main-content {
+        @apply ltr:ml-0 rtl:mr-0;
+    }
+    .horizontal .sidebar {
+        @apply ltr:-left-[260px] rtl:-right-[260px];
+    }
+    .horizontal.toggle-sidebar .sidebar {
+        @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px];
+    }
+
+    .horizontal .nav-item a div:first-child svg,
+    .horizontal .nav-item button div:first-child svg {
+        @apply w-5 h-5 text-black/50 dark:text-white/50;
+    }
+
+    .horizontal .dark .nav-item button div:first-child svg,
+    .dark.horizontal .nav-item button div:first-child svg {
+        @apply text-white/50;
+    }
+
+    .horizontal-menu .nav-link {
+        @apply flex items-center py-2.5 px-2 rounded-lg hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-white-dark xl:px-4;
+    }
+
+    .horizontal-menu .nav-link.active {
+        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white-dark;
+    }
+
+    .horizontal-menu ul.sub-menu {
+        @apply absolute top-full z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow dark:bg-[#1b2e4b] dark:text-white-dark;
+    }
+
+    .horizontal-menu ul.sub-menu a,
+    .horizontal-menu ul.sub-menu button {
+        @apply flex items-center justify-between px-4 py-2 hover:bg-gray-100 hover:text-primary dark:hover:bg-primary/10 w-full;
+    }
+
+    .horizontal-menu ul.sub-menu a.active,
+    .horizontal-menu ul.sub-menu button.active {
+        @apply bg-gray-100 text-primary dark:bg-primary/10;
+    }
+
+    .horizontal-menu > li.nav-item:hover > ul.sub-menu,
+    .horizontal-menu > li.nav-item > ul.sub-menu > li:hover > ul {
+        @apply block;
+    }
+
+    /* Vertical layouts */
+    .vertical.toggle-sidebar .horizontal-logo,
+    .vertical.toggle-sidebar .collapse-icon {
+        @apply flex;
+    }
+    .vertical.toggle-sidebar .main-container .main-content {
+        @apply ltr:ml-0 rtl:mr-0;
+    }
+    .vertical .sidebar {
+        @apply ltr:-left-[260px] rtl:-right-[260px] lg:ltr:left-0 lg:rtl:right-0;
+    }
+    .vertical.toggle-sidebar .sidebar {
+        @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[260px] lg:rtl:-right-[260px];
+    }
+
+    /* Collapsible vertical layouts */
+    .collapsible-vertical .sidebar {
+        @apply hover:w-[260px] ltr:-left-[260px] rtl:-right-[260px] lg:w-[70px] lg:ltr:left-0 lg:rtl:right-0;
+    }
+    .collapsible-vertical.toggle-sidebar .sidebar {
+        @apply ltr:left-0 rtl:right-0;
+    }
+    .collapsible-vertical.toggle-sidebar .sidebar {
+        @apply lg:w-[260px];
+    }
+    .collapsible-vertical.toggle-sidebar .sidebar .nav-item > a {
+        @apply w-auto;
+    }
+    .collapsible-vertical.toggle-sidebar .main-content {
+        @apply lg:w-[calc(100%-260px)] lg:ltr:ml-[260px] lg:rtl:mr-[260px];
+    }
+
+    .collapsible-vertical .sidebar .sub-menu {
+        @apply lg:hidden;
+    }
+    .collapsible-vertical .sidebar:hover .sub-menu,
+    .collapsible-vertical .sidebar:hover .sub-menu.recent-submenu,
+    .collapsible-vertical.toggle-sidebar .sidebar .sub-menu {
+        @apply block;
+    }
+    .collapsible-vertical .main-content {
+        @apply lg:w-[calc(100%-70px)] lg:ltr:ml-[70px] lg:rtl:mr-[70px];
+    }
+    .collapsible-vertical .sidebar .collapse-icon,
+    .collapsible-vertical .main-logo > span {
+        @apply transition-opacity duration-300 lg:opacity-0;
+    }
+    .collapsible-vertical .sidebar:hover .collapse-icon,
+    .collapsible-vertical.toggle-sidebar .collapse-icon,
+    .collapsible-vertical .sidebar:hover .main-logo > span,
+    .collapsible-vertical.toggle-sidebar .main-logo > span {
+        @apply duration-500 lg:opacity-100;
+    }
+    .collapsible-vertical.toggle-sidebar .sidebar .collapse-icon {
+        @apply flex rotate-0;
+    }
+    .collapsible-vertical .sidebar:hover .collapse-icon {
+        @apply flex rotate-180;
+    }
+    .collapsible-vertical .sidebar ul > h2 span {
+        @apply hidden whitespace-nowrap;
+    }
+    .collapsible-vertical .sidebar ul > h2 svg {
+        @apply block;
+    }
+    .collapsible-vertical .sidebar:hover ul > h2 span,
+    .collapsible-vertical.toggle-sidebar .sidebar ul > h2 span {
+        @apply inline;
+    }
+    .collapsible-vertical .sidebar:hover ul > h2 svg,
+    .collapsible-vertical.toggle-sidebar .sidebar ul > h2 svg {
+        @apply hidden;
+    }
+
+    /* boxed-layout */
+    .boxed-layout {
+        @apply mx-auto max-w-[1400px];
+    }
+
+    .boxed-layout.vertical .sidebar,
+    .boxed-layout.collapsible-vertical .sidebar {
+        @apply overflow-hidden lg:ltr:left-auto lg:rtl:right-auto;
+    }
+
+    .boxed-layout.vertical.toggle-sidebar .sidebar {
+        @apply lg:w-0;
+    }
+
+    /* Buttons */
+    .btn {
+        @apply relative flex items-center justify-center rounded-md border px-5 py-2 text-sm font-semibold shadow-[0_10px_20px_-10px] outline-none transition duration-300 hover:shadow-none;
+    }
+    .btn-lg {
+        @apply px-7 py-2.5 text-base;
+    }
+    .btn-sm {
+        @apply px-2.5 py-1.5 text-xs;
+    }
+    .btn[disabled] {
+        @apply cursor-not-allowed opacity-60;
+    }
+
+    .btn-primary {
+        @apply border-primary bg-primary text-white shadow-primary/60;
+    }
+    .btn-outline-primary {
+        @apply border-primary text-primary shadow-none hover:bg-primary hover:text-white;
+    }
+
+    .btn-secondary {
+        @apply border-secondary bg-secondary text-white shadow-secondary/60;
+    }
+    .btn-outline-secondary {
+        @apply border-secondary text-secondary shadow-none hover:bg-secondary hover:text-white;
+    }
+
+    .btn-success {
+        @apply border-success bg-success text-white shadow-success/60;
+    }
+    .btn-outline-success {
+        @apply border-success text-success shadow-none hover:bg-success hover:text-white;
+    }
+
+    .btn-danger {
+        @apply border-danger bg-danger text-white shadow-danger/60;
+    }
+    .btn-outline-danger {
+        @apply border-danger text-danger shadow-none hover:bg-danger hover:text-white;
+    }
+
+    .btn-warning {
+        @apply border-warning bg-warning text-white shadow-warning/60;
+    }
+    .btn-outline-warning {
+        @apply border-warning text-warning shadow-none hover:bg-warning hover:text-white;
+    }
+
+    .btn-info {
+        @apply border-info bg-info text-white shadow-info/60;
+    }
+    .btn-outline-info {
+        @apply border-info text-info shadow-none hover:bg-info hover:text-white;
+    }
+
+    .btn-dark {
+        @apply border-dark bg-dark text-white shadow-dark/60;
+    }
+
+    .btn-outline-dark {
+        @apply border-dark text-dark shadow-none hover:bg-dark hover:text-white;
+    }
+
+    .btn-gradient {
+        @apply bg-gradient-to-r from-[#EF1262] to-[#4361EE] hover:to-[#EF1262] hover:from-[#4361EE] text-white;
+    }
+
+    /* Badge */
+    .badge {
+        @apply relative my-1 rounded border border-transparent px-2 py-0.5 text-xs font-semibold text-white;
+    }
+    .badge-outline-primary {
+        @apply border-primary text-primary hover:bg-primary-light dark:hover:bg-primary dark:hover:text-white-light;
+    }
+    .badge-outline-secondary {
+        @apply border-secondary text-secondary hover:bg-secondary-light dark:hover:bg-secondary dark:hover:text-white-light;
+    }
+    .badge-outline-success {
+        @apply border-success text-success hover:bg-success-light dark:hover:bg-success dark:hover:text-white-light;
+    }
+    .badge-outline-danger {
+        @apply border-danger text-danger hover:bg-danger-light dark:hover:bg-danger dark:hover:text-white-light;
+    }
+    .badge-outline-warning {
+        @apply border-warning text-warning hover:bg-warning-light dark:hover:bg-warning dark:hover:text-white-light;
+    }
+    .badge-outline-info {
+        @apply border-info text-info hover:bg-info-light dark:hover:bg-info dark:hover:text-white-light;
+    }
+    .badge-outline-dark {
+        @apply border-dark text-dark hover:bg-dark-light dark:hover:bg-dark dark:hover:text-white-light;
+    }
+
+    /* Form */
+    .form-input,
+    .form-textarea,
+    .form-select,
+    .form-multiselect {
+        @apply w-full rounded-md border border-white-light bg-white px-4 py-2 text-sm font-semibold text-black !outline-none focus:border-primary focus:ring-transparent dark:border-[#17263c] dark:bg-[#121e32] dark:text-white-dark dark:focus:border-primary;
+    }
+
+    .form-input-lg,
+    .form-textarea-lg,
+    .form-select-lg,
+    .form-multiselect-lg {
+        @apply py-2.5 text-base;
+    }
+    .form-input-sm,
+    .form-textarea-sm,
+    .form-select-sm,
+    .form-multiselect-sm {
+        @apply py-1.5 text-xs;
+    }
+    label {
+        @apply mb-1.5 block font-semibold;
+    }
+    [dir='rtl'] select {
+        background-position: left 0.5rem center;
+    }
+
+    .has-error .form-input,
+    .has-error .form-textarea,
+    .has-error .form-select,
+    .has-error .form-multiselect,
+    .has-error .multiselect__tags {
+        @apply border-danger text-danger bg-danger/[0.08] placeholder-danger/70 focus:border-danger;
+    }
+    .has-error .form-label,
+    .has-error .form-help,
+    .has-error .form-icon,
+    .has-error .multiselect__placeholder {
+        @apply text-danger;
+    }
+    .has-error .multiselect__input {
+        @apply bg-[#F7ECF0] !placeholder-danger/70;
+    }
+    .has-error .multiselect__tags:hover,
+    .has-error .form-checkbox {
+        @apply border-danger;
+    }
+
+    .has-success .form-input,
+    .has-success .form-textarea,
+    .has-success .form-select,
+    .has-success .form-multiselect,
+    .has-success .multiselect__tags {
+        @apply border-success text-success bg-success/[0.08] placeholder-success/70 focus:border-success;
+    }
+    .has-success .form-label,
+    .has-success .form-help,
+    .has-success .form-icon,
+    .has-success .multiselect__placeholder {
+        @apply text-success;
+    }
+    .has-success .multiselect__input {
+        @apply bg-[#F7ECF0] !placeholder-success/70;
+    }
+    .has-success .multiselect__tags:hover {
+        @apply border-success;
+    }
+
+    /* checkbox & radio */
+    .form-radio,
+    .form-checkbox {
+        @apply h-5 w-5 cursor-pointer rounded border-2 border-white-light bg-transparent text-primary !shadow-none !outline-none !ring-0 !ring-offset-0 checked:bg-[length:90%_90%] disabled:cursor-not-allowed disabled:bg-[#eee] ltr:mr-1.5 rtl:ml-1.5
+      dark:border-[#253b5c] dark:checked:border-transparent dark:disabled:bg-[#1b2e4b];
+    }
+
+    .form-checkbox.outline-primary:checked {
+        @apply border-primary bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%234361ee' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-secondary:checked {
+        @apply border-secondary bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23805dca' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-success:checked {
+        @apply border-success bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%2300ab55' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-danger:checked {
+        @apply border-danger bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e7515a' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-warning:checked {
+        @apply border-warning bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e2a03f' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-info:checked {
+        @apply border-info bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%232196f3' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+    .form-checkbox.outline-dark:checked {
+        @apply border-dark bg-transparent;
+        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%233b3f5c' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
+    }
+
+    .form-radio {
+        @apply rounded-full;
+    }
+
+    .form-radio.outline-primary:checked {
+        @apply border-primary bg-transparent bg-none;
+    }
+    .form-radio.outline-secondary:checked {
+        @apply border-secondary bg-transparent bg-none;
+    }
+    .form-radio.outline-success:checked {
+        @apply border-success bg-transparent bg-none;
+    }
+    .form-radio.outline-danger:checked {
+        @apply border-danger bg-transparent bg-none;
+    }
+    .form-radio.outline-warning:checked {
+        @apply border-warning bg-transparent bg-none;
+    }
+    .form-radio.outline-info:checked {
+        @apply border-info bg-transparent bg-none;
+    }
+    .form-radio.outline-dark:checked {
+        @apply border-dark bg-transparent bg-none;
+    }
+
+    /* dropdown */
+    .dropdown {
+        @apply relative;
+    }
+    .dropdown > button {
+        @apply flex;
+    }
+    .dropdown ul {
+        @apply my-1 min-w-[120px] rounded bg-white p-0 py-2 shadow dark:bg-[#1b2e4b] text-black dark:text-white-dark;
+    }
+    .dropdown ul li > a,
+    .dropdown ul li > button {
+        @apply flex items-center px-4 py-2 hover:bg-primary/10 hover:text-primary;
+    }
+    .dropdown ul li > button {
+        @apply w-full;
+    }
+
+    /* tables */
+    .table-responsive {
+        @apply overflow-auto;
+    }
+    table {
+        @apply w-full !border-collapse;
+    }
+    table thead tr,
+    table tfoot tr {
+        @apply border-b-0 !bg-[#f6f8fa]  dark:!bg-[#1a2941];
+    }
+    table thead tr th,
+    table tfoot tr th,
+    table tbody tr td {
+        @apply py-3 px-4 ltr:text-left rtl:text-right;
+    }
+    table thead tr th,
+    table tfoot tr th {
+        @apply font-semibold;
+    }
+    table tbody tr {
+        @apply border-b !border-white-light/40 dark:!border-[#191e3a];
+    }
+    table.table-hover tbody tr {
+        @apply hover:!bg-white-light/20 dark:hover:!bg-[#1a2941]/40;
+    }
+    table.table-striped tbody tr:nth-child(odd) {
+        @apply !bg-white-light/20 dark:!bg-[#1a2941]/40;
+    }
+
+    table.dataTable-table tbody tr th,
+    table.dataTable-table tbody tr td {
+        @apply border-b border-white-light/40 py-3 px-4 ltr:text-left rtl:text-right dark:border-[#191e3a];
+    }
+    table.dataTable-table tbody tr:last-child td {
+        @apply border-b-0;
+    }
+
+    /* code hightlight */
+    pre {
+        direction: ltr;
+    }
+}
+
+/* perfect scrollbar */
+.ps__rail-y > .ps__thumb-y,
+.ps__rail-y > .ps__thumb-y {
+    @apply !w-1.5 !bg-[#DDDDDD] dark:!bg-[#2d334c];
+}
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+    @apply !opacity-60;
+}
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+    @apply !bg-transparent;
+}
+
+/* swal2 */
+.swal2-container .swal2-close {
+    @apply text-white hover:text-dark-light focus:shadow-none;
+}
+
+.swal2-container .swal2-popup.swal2-toast {
+    @apply bg-dark py-2.5 px-5;
+}
+
+.swal2-popup.swal2-toast .swal2-title,
+.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
+    @apply text-white;
+}
+.swal2-container .swal2-popup.swal2-toast.color-primary {
+    @apply bg-primary;
+}
+
+.swal2-container .swal2-popup.swal2-toast.color-secondary {
+    @apply bg-secondary;
+}
+
+.swal2-container .swal2-popup.swal2-toast.color-warning {
+    @apply bg-warning;
+}
+.swal2-container .swal2-popup.swal2-toast.color-info {
+    @apply bg-info;
+}
+.swal2-container .swal2-popup.swal2-toast.color-danger {
+    @apply bg-danger;
+}
+.swal2-container .swal2-popup.swal2-toast.color-success {
+    @apply bg-success;
+}
+
+/* apex chart */
+.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light,
+.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-theme-light {
+    box-shadow: none;
+    @apply border-[#050717cc] bg-[#050717cc] text-white;
+}
+
+.apexcharts-canvas .apexcharts-xaxistooltip-bottom:before,
+.apexcharts-canvas .apexcharts-xaxistooltip-bottom:after {
+    @apply border-b-[#050717cc];
+}
+
+.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
+    @apply text-white;
+}
+
+.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+    @apply border-dark bg-[#060818];
+}
+
+.apexcharts-legend-series {
+    @apply ltr:!mr-2 rtl:!ml-2;
+}
+
+.dark .apexcharts-title-text {
+    fill: #e0e6ed;
+}
+
+.dark .apexcharts-canvas .apexcharts-text.apexcharts-xaxis-label,
+.dark .apexcharts-canvas .apexcharts-text.apexcharts-yaxis-label {
+    fill: #e0e6ed;
+}
+
+.dark .apexcharts-canvas .apexcharts-text,
+.dark .apexcharts-canvas .apexcharts-text {
+    fill: #e0e6ed;
+}
+
+.dark .apexcharts-canvas .apexcharts-legend-text {
+    color: #e0e6ed !important;
+}
+
+.dark .apexcharts-canvas .apexcharts-radialbar-track.apexcharts-track .apexcharts-radialbar-area {
+    stroke: #191e3a;
+}
+.dark .apexcharts-canvas .apexcharts-series-markers.apexcharts-series-bubble .apexcharts-marker {
+    stroke: #191e3a;
+}
+
+.dark .apexcharts-canvas .apexcharts-pie-label,
+.dark .apexcharts-canvas .apexcharts-datalabel,
+.dark .apexcharts-canvas .apexcharts-datalabel-label,
+.dark .apexcharts-canvas .apexcharts-datalabel-value {
+    fill: #bfc9d4;
+}
+
+.dark .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
+    box-shadow: none;
+}
+
+.apexcharts-canvas .apexcharts-legend-marker {
+    @apply ltr:!mr-1.5 rtl:ml-1.5 rtl:!mr-0;
+}
+
+[dir='rtl'] .apexcharts-tooltip-marker {
+    @apply mr-0 ml-2.5;
+}
+
+/* Animations */
+.slide-down-enter-active {
+    @apply transition duration-100 ease-out;
+}
+.slide-down-leave-active {
+    @apply transition duration-75 ease-in;
+}
+.slide-down-enter-from,
+.slide-down-leave-to {
+    @apply transform scale-95 opacity-0;
+}
+.slide-down-enter-to,
+.slide-down-leave-from {
+    @apply transform scale-100 opacity-100;
+}
+
+.modal-fade-enter-active {
+    @apply transition duration-300 ease-out;
+}
+.modal-fade-leave-active {
+    @apply transition duration-200 ease-in;
+}
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+    @apply transform opacity-0 scale-95;
+}
+.modal-fade-enter-to,
+.modal-fade-leave-from {
+    @apply transform opacity-100 scale-100;
+}
+
+/* Hightlight JS */
+pre.hljs {
+    @apply p-6 rounded-md overflow-x-auto !bg-[#191e3a];
+}
diff --git a/src/theme.config.tsx b/src/theme.config.tsx
new file mode 100644
index 0000000..323a9c9
--- /dev/null
+++ b/src/theme.config.tsx
@@ -0,0 +1,12 @@
+const themeConfig = {
+    locale: 'en', // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
+    theme: 'light', // light, dark, system
+    menu: 'vertical', // vertical, collapsible-vertical, horizontal
+    layout: 'full', // full, boxed-layout
+    rtlClass: 'ltr', // rtl, ltr
+    animation: '', // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
+    navbar: 'navbar-sticky', // navbar-sticky, navbar-floating, navbar-static
+    semidark: false
+};
+
+export default themeConfig;
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..7072b22
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,27 @@
+export type ApiResponse<T> = {
+    [K in keyof T]: T[K];
+};
+
+export type BaseEntity = {
+    id: number;
+    CreatedAt: string;
+    UpdatedAt: string;
+};
+
+export type Entity<T> = {
+    [K in keyof T]: T[K];
+} & BaseEntity;
+
+export type BaseAuthResponse = {
+    token: string;
+    refresh_token: string;
+};
+
+export type AuthResponse<T> = {
+    [K in keyof T]: T[K];
+} & BaseAuthResponse;
+
+export type SelectOption = {
+    label: string;
+    value: string;
+};
diff --git a/src/utils/format-date.ts b/src/utils/format-date.ts
new file mode 100644
index 0000000..2dc0069
--- /dev/null
+++ b/src/utils/format-date.ts
@@ -0,0 +1,2 @@
+import { format } from 'date-fns';
+export const formatDate = (date: string, formatString: string = 'dd MMM yyyy') => format(new Date(date), formatString);
diff --git a/src/utils/format-number.ts b/src/utils/format-number.ts
new file mode 100644
index 0000000..eb756b7
--- /dev/null
+++ b/src/utils/format-number.ts
@@ -0,0 +1,10 @@
+export const formatNumber = (value: number | string) => {
+    const num = typeof value === 'string' ? parseInt(value.replace(/\D/g, '')) : value;
+    if (isNaN(num)) return '';
+    return num.toLocaleString('en-US');
+};
+
+export const parseNumber = (formatted: string) => {
+    const onlyNums = formatted.replace(/\D/g, '');
+    return parseInt(onlyNums || '0');
+};
diff --git a/src/utils/format-price.ts b/src/utils/format-price.ts
new file mode 100644
index 0000000..ccd015c
--- /dev/null
+++ b/src/utils/format-price.ts
@@ -0,0 +1,8 @@
+export const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('id-ID', {
+        style: 'currency',
+        currency: 'IDR',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+    }).format(price);
+};
diff --git a/src/utils/format-string.ts b/src/utils/format-string.ts
new file mode 100644
index 0000000..35a51d2
--- /dev/null
+++ b/src/utils/format-string.ts
@@ -0,0 +1 @@
+export const toUpperCase = (str: string) => str.toUpperCase();
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..2cb4b90
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,91 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+    darkMode: 'class',
+    theme: {
+        container: {
+            center: true,
+        },
+        extend: {
+            colors: {
+                primary: {
+                    DEFAULT: '#4361ee',
+                    light: '#eaf1ff',
+                    'dark-light': 'rgba(67,97,238,.15)',
+                },
+                secondary: {
+                    DEFAULT: '#805dca',
+                    light: '#ebe4f7',
+                    'dark-light': 'rgb(128 93 202 / 15%)',
+                },
+                success: {
+                    DEFAULT: '#00ab55',
+                    light: '#ddf5f0',
+                    'dark-light': 'rgba(0,171,85,.15)',
+                },
+                danger: {
+                    DEFAULT: '#e7515a',
+                    light: '#fff5f5',
+                    'dark-light': 'rgba(231,81,90,.15)',
+                },
+                warning: {
+                    DEFAULT: '#e2a03f',
+                    light: '#fff9ed',
+                    'dark-light': 'rgba(226,160,63,.15)',
+                },
+                info: {
+                    DEFAULT: '#2196f3',
+                    light: '#e7f7ff',
+                    'dark-light': 'rgba(33,150,243,.15)',
+                },
+                dark: {
+                    DEFAULT: '#3b3f5c',
+                    light: '#eaeaec',
+                    'dark-light': 'rgba(59,63,92,.15)',
+                },
+                black: {
+                    DEFAULT: '#0e1726',
+                    light: '#e3e4eb',
+                    'dark-light': 'rgba(14,23,38,.15)',
+                },
+                white: {
+                    DEFAULT: '#ffffff',
+                    light: '#e0e6ed',
+                    dark: '#888ea8',
+                },
+            },
+            fontFamily: {
+                nunito: ['Nunito', 'sans-serif'],
+            },
+            spacing: {
+                4.5: '18px',
+            },
+            boxShadow: {
+                '3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
+            },
+            typography: ({ theme }) => ({
+                DEFAULT: {
+                    css: {
+                        '--tw-prose-invert-headings': theme('colors.white.dark'),
+                        '--tw-prose-invert-links': theme('colors.white.dark'),
+                        h1: { fontSize: '40px', marginBottom: '0.5rem', marginTop: 0 },
+                        h2: { fontSize: '32px', marginBottom: '0.5rem', marginTop: 0 },
+                        h3: { fontSize: '28px', marginBottom: '0.5rem', marginTop: 0 },
+                        h4: { fontSize: '24px', marginBottom: '0.5rem', marginTop: 0 },
+                        h5: { fontSize: '20px', marginBottom: '0.5rem', marginTop: 0 },
+                        h6: { fontSize: '16px', marginBottom: '0.5rem', marginTop: 0 },
+                        p: { marginBottom: '0.5rem' },
+                        li: { margin: 0 },
+                        img: { margin: 0 },
+                    },
+                },
+            }),
+        },
+    },
+    plugins: [
+        require('@tailwindcss/forms')({
+            strategy: 'class',
+        }),
+        require('@tailwindcss/typography'),
+    ],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3038fcb
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["src"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..408821b
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/"
+    }
+  ]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..2022b18
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+});

Error

Notification

{user?.data?.username}

+ {t('under_maintenance')} {page} +

{t('thank_you')}

Sign in