category order

package-lock.json

@@ -24,6 +24,7 @@
         "@fullcalendar/list": "6.1.15",
         "@fullcalendar/react": "6.1.15",
         "@fullcalendar/timegrid": "6.1.15",
+        "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "3.9.1",
         "@iconify/react": "^6.0.1",
         "@mui/lab": "6.0.0-beta.19",
@@ -1228,6 +1229,23 @@
         "@fullcalendar/core": "~6.1.15"
       }
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
@@ -4974,6 +4992,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/css-functions-list": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
@@ -9958,6 +9985,12 @@
         "performance-now": "^2.1.0"
       }
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "@fullcalendar/list": "6.1.15",
     "@fullcalendar/react": "6.1.15",
     "@fullcalendar/timegrid": "6.1.15",
+    "@hello-pangea/dnd": "^18.0.1",
     "@hookform/resolvers": "3.9.1",
     "@iconify/react": "^6.0.1",
     "@mui/lab": "6.0.0-beta.19",

src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx

@@ -420,7 +420,13 @@ const DailyPOSReport = () => {
 
           <div className='space-y-12'>
             {Object.keys(groupedProducts)
-              .sort()
+              .sort((a, b) => {
+                const productsA = groupedProducts[a]
+                const productsB = groupedProducts[b]
+                const orderA = productsA[0]?.category_order ?? 999
+                const orderB = productsB[0]?.category_order ?? 999
+                return orderA - orderB
+              })
               .map(categoryName => {
                 const categoryProducts = groupedProducts[categoryName]
                 const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)

src/services/api.ts

@@ -6,8 +6,8 @@ const getToken = () => {
 }
 
 export const api = axios.create({
-  baseURL: 'https://api-pos.apskel.id/api/v1',
+  // baseURL: 'https://api-pos.apskel.id/api/v1',
-  // baseURL: 'http://127.0.0.1:4000/api/v1',
+  baseURL: 'http://127.0.0.1:4000/api/v1',
   headers: {
     'Content-Type': 'application/json'
   },

src/services/queries/categories.ts

@@ -9,7 +9,7 @@ interface CategoriesQueryParams {
 }
 
 export function useCategories(params: CategoriesQueryParams = {}) {
-  const { page = 1, limit = 10, search = '', ...filters } = params
+  const { page = 1, limit = 50, search = '', ...filters } = params
 
   return useQuery<Categories>({
     queryKey: ['categories', { page, limit, search, ...filters }],
@@ -30,7 +30,9 @@ export function useCategories(params: CategoriesQueryParams = {}) {
       })
 
       const res = await api.get(`/categories?${queryParams.toString()}`)
-      return res.data.data
+      const data = res.data.data
+
+      return data
     }
   })
 }

src/types/services/analytic.ts

@@ -33,6 +33,7 @@ export interface ProductData {
   product_name: string
   category_id: string
   category_name: string
+  category_order: number
   quantity_sold: number
   revenue: number
   average_price: number

src/types/services/category.ts

@@ -1,25 +1,26 @@
 export interface Category {
-  id: string;
+  id: string
-  organization_id: string;
+  organization_id: string
-  name: string;
+  name: string
-  description: string | null;
+  description: string | null
-  business_type: string;
+  business_type: string
-  metadata: Record<string, any>;
+  order: number
-  created_at: string;
+  metadata: Record<string, any>
-  updated_at: string;
+  created_at: string
+  updated_at: string
 }
 
 export interface Categories {
-  categories: Category[];
+  categories: Category[]
-  total_count: number;
+  total_count: number
-  page: number;
+  page: number
-  limit: number;
+  limit: number
-  total_pages: number;
+  total_pages: number
 }
 
-
 export interface CategoryRequest {
-  name: string;
+  name: string
-  description: string | null;
+  description: string | null
-  business_type: string;
+  business_type: string
+  order: number
 }

src/views/apps/ecommerce/products/category/AddCategoryDrawer.tsx

@@ -33,7 +33,8 @@ const AddCategoryDrawer = (props: Props) => {
   const [formData, setFormData] = useState<CategoryRequest>({
     name: '',
     description: '',
-    business_type: ''
+    business_type: '',
+    order: 0
   })
 
   // Handle Form Submit
@@ -54,13 +55,21 @@ const AddCategoryDrawer = (props: Props) => {
     })
   }
 
+  const handleOrderChange = (e: any) => {
+    setFormData({
+      ...formData,
+      order: parseInt(e.target.value) || 0
+    })
+  }
+
   // Handle Form Reset
   const handleReset = () => {
     handleClose()
     setFormData({
       name: '',
       description: '',
-      business_type: ''
+      business_type: '',
+      order: 0
     })
   }
 
@@ -99,6 +108,15 @@ const AddCategoryDrawer = (props: Props) => {
           >
             <MenuItem value='restaurant'>Restaurant</MenuItem>
           </CustomTextField>
+          <CustomTextField
+            fullWidth
+            label='Order'
+            name='order'
+            type='number'
+            value={formData.order}
+            onChange={handleOrderChange}
+            placeholder='0'
+          />
           <CustomTextField
             fullWidth
             label='Description'

src/views/apps/ecommerce/products/category/EditCategoryDrawer.tsx

@@ -34,7 +34,8 @@ const EditCategoryDrawer = (props: Props) => {
   const [formData, setFormData] = useState<CategoryRequest>({
     name: '',
     description: '',
-    business_type: ''
+    business_type: '',
+    order: 0
   })
 
   useEffect(() => {
@@ -42,7 +43,8 @@ const EditCategoryDrawer = (props: Props) => {
       setFormData({
         name: data.name,
         description: data.description,
-        business_type: data.business_type
+        business_type: data.business_type,
+        order: data.order
       })
     }
   }, [data])
@@ -51,11 +53,14 @@ const EditCategoryDrawer = (props: Props) => {
   const handleFormSubmit = (e: any) => {
     e.preventDefault()
 
-    updateCategory({ id: data.id, payload: formData }, {
+    updateCategory(
-      onSuccess: () => {
+      { id: data.id, payload: formData },
-        handleReset()
+      {
+        onSuccess: () => {
+          handleReset()
+        }
       }
-    })
+    )
   }
 
   const handleInputChange = (e: any) => {
@@ -65,13 +70,21 @@ const EditCategoryDrawer = (props: Props) => {
     })
   }
 
+  const handleOrderChange = (e: any) => {
+    setFormData({
+      ...formData,
+      order: parseInt(e.target.value) || 0
+    })
+  }
+
   // Handle Form Reset
   const handleReset = () => {
     handleClose()
     setFormData({
       name: '',
       description: '',
-      business_type: ''
+      business_type: '',
+      order: 0
     })
   }
 
@@ -110,6 +123,15 @@ const EditCategoryDrawer = (props: Props) => {
           >
             <MenuItem value='restaurant'>Restaurant</MenuItem>
           </CustomTextField>
+          <CustomTextField
+            fullWidth
+            label='Order'
+            name='order'
+            type='number'
+            value={formData.order}
+            onChange={handleOrderChange}
+            placeholder='0'
+          />
           <CustomTextField
             fullWidth
             label='Description'

src/views/apps/ecommerce/products/category/ProductCategoryTable.tsx

@@ -12,6 +12,7 @@ import MenuItem from '@mui/material/MenuItem'
 import TablePagination from '@mui/material/TablePagination'
 import type { TextFieldProps } from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
+import { Box, CircularProgress } from '@mui/material'
 
 // Third-party Imports
 import type { RankingInfo } from '@tanstack/match-sorter-utils'
@@ -19,24 +20,26 @@ import { rankItem } from '@tanstack/match-sorter-utils'
 import type { ColumnDef, FilterFn } from '@tanstack/react-table'
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import classnames from 'classnames'
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
 
 // Component Imports
 import TablePaginationComponent from '@components/TablePaginationComponent'
 import CustomTextField from '@core/components/mui/TextField'
 import OptionMenu from '@core/components/option-menu'
 import AddCategoryDrawer from './AddCategoryDrawer'
-
+import EditCategoryDrawer from './EditCategoryDrawer'
-// Style Imports
-import tableStyles from '@core/styles/table.module.css'
-import { Box, CircularProgress } from '@mui/material'
 import ConfirmDeleteDialog from '../../../../../components/dialogs/confirm-delete'
 import Loading from '../../../../../components/layout/shared/Loading'
+
+// Services Imports
 import { useCategoriesMutation } from '../../../../../services/mutations/categories'
 import { useCategories } from '../../../../../services/queries/categories'
 import { Category } from '../../../../../types/services/category'
-import EditCategoryDrawer from './EditCategoryDrawer'
 import { formatDate } from '../../../../../utils/transform'
 
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+
 declare module '@tanstack/table-core' {
   interface FilterFns {
     fuzzy: FilterFn<unknown>
@@ -51,15 +54,8 @@ type CategoryWithActionsType = Category & {
 }
 
 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
-  // Rank the item
   const itemRank = rankItem(row.getValue(columnId), value)
-
+  addMeta({ itemRank })
-  // Store the itemRank info
-  addMeta({
-    itemRank
-  })
-
-  // Return if the item should be filtered in/out
   return itemRank.passed
 }
 
@@ -73,7 +69,6 @@ const DebouncedInput = ({
   onChange: (value: string | number) => void
   debounce?: number
 } & Omit<TextFieldProps, 'onChange'>) => {
-  // States
   const [value, setValue] = useState(initialValue)
 
   useEffect(() => {
@@ -86,47 +81,51 @@ const DebouncedInput = ({
     }, debounce)
 
     return () => clearTimeout(timeout)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value])
 
   return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
 }
 
-// Column Definitions
 const columnHelper = createColumnHelper<CategoryWithActionsType>()
 
 const ProductCategoryTable = () => {
-  // States
   const [addCategoryOpen, setAddCategoryOpen] = useState(false)
   const [editCategoryOpen, setEditCategoryOpen] = useState(false)
   const [rowSelection, setRowSelection] = useState({})
   const [currentPage, setCurrentPage] = useState(1)
-  const [pageSize, setPageSize] = useState(10)
+  const [pageSize, setPageSize] = useState(50)
   const [categoryId, setCategoryId] = useState('')
   const [openConfirm, setOpenConfirm] = useState(false)
   const [currentCategory, setCurrentCategory] = useState<Category>()
   const [search, setSearch] = useState('')
+  const [localCategories, setLocalCategories] = useState<Category[]>([])
 
-  // Fetch products with pagination and search
   const { data, isLoading, error, isFetching } = useCategories({
     page: currentPage,
     limit: pageSize
   })
 
   const { mutate: deleteCategory, isPending: isDeleting } = useCategoriesMutation().deleteCategory
+  const { mutate: updateCategory } = useCategoriesMutation().updateCategory
 
   const categories = data?.categories ?? []
   const totalCount = data?.total_count ?? 0
 
+  // Update local categories when data changes
+  useEffect(() => {
+    if (categories.length > 0) {
+      setLocalCategories(categories)
+    }
+  }, [categories])
+
   const handlePageChange = useCallback((event: unknown, newPage: number) => {
     setCurrentPage(newPage)
   }, [])
 
-  // Handle page size change
   const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newPageSize = parseInt(event.target.value, 10)
+    const newPageSize = parseInt(event.target.value, 50)
     setPageSize(newPageSize)
-    setCurrentPage(1) // Reset to first page
+    setCurrentPage(1)
   }, [])
 
   const handleDelete = () => {
@@ -135,8 +134,56 @@ const ProductCategoryTable = () => {
     })
   }
 
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return
+
+    const items = Array.from(localCategories)
+    const [reorderedItem] = items.splice(result.source.index, 1)
+    items.splice(result.destination.index, 0, reorderedItem)
+
+    setLocalCategories(items)
+
+    // Update order for all affected items
+    items.forEach((item, index) => {
+      const newOrder = index + 1 // Order dimulai dari 1
+
+      // Only update if order changed
+      if (item.order !== newOrder) {
+        const updateData = {
+          name: item.name,
+          description: item.description,
+          business_type: item.business_type,
+          order: newOrder
+        }
+
+        updateCategory(
+          { id: item.id, payload: updateData },
+          {
+            onSuccess: () => {
+              console.log(`Category ${item.name} order updated to ${newOrder}`)
+            },
+            onError: error => {
+              console.error(`Failed to update category ${item.name}:`, error)
+            }
+          }
+        )
+      }
+    })
+  }
+
   const columns = useMemo<ColumnDef<CategoryWithActionsType, any>[]>(
     () => [
+      {
+        id: 'drag',
+        header: '',
+        cell: () => (
+          <div className='cursor-move flex items-center justify-center'>
+            <i className='tabler-grip-vertical text-textSecondary text-xl' />
+          </div>
+        ),
+        size: 50,
+        enableSorting: false
+      },
       {
         id: 'select',
         header: ({ table }) => (
@@ -163,7 +210,6 @@ const ProductCategoryTable = () => {
         header: 'Name',
         cell: ({ row }) => (
           <div className='flex items-center gap-3'>
-            {/* <img src={row.original.image} width={38} height={38} className='rounded bg-actionHover' /> */}
             <div className='flex flex-col items-start'>
               <Typography className='font-medium' color='text.primary'>
                 {row.original.name}
@@ -173,7 +219,7 @@ const ProductCategoryTable = () => {
         )
       }),
       columnHelper.accessor('description', {
-        header: 'Decription',
+        header: 'Description',
         cell: ({ row }) => <Typography>{row.original.description || '-'}</Typography>
       }),
       columnHelper.accessor('business_type', {
@@ -219,12 +265,11 @@ const ProductCategoryTable = () => {
         enableSorting: false
       })
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [data]
   )
 
   const table = useReactTable({
-    data: categories as Category[],
+    data: localCategories as Category[],
     columns,
     filterFns: {
       fuzzy: fuzzyFilter
@@ -232,14 +277,13 @@ const ProductCategoryTable = () => {
     state: {
       rowSelection,
       pagination: {
-        pageIndex: currentPage, // <= penting!
+        pageIndex: currentPage,
         pageSize
       }
     },
-    enableRowSelection: true, //enable row selection for all rows
+    enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
-    // Disable client-side pagination since we're handling it server-side
     manualPagination: true,
     pageCount: Math.ceil(totalCount / pageSize)
   })
@@ -261,9 +305,9 @@ const ProductCategoryTable = () => {
               onChange={handlePageSizeChange}
               className='flex-auto max-sm:is-full sm:is-[70px]'
             >
-              <MenuItem value='10'>10</MenuItem>
+              <MenuItem value='50'>50</MenuItem>
-              <MenuItem value='15'>15</MenuItem>
+              <MenuItem value='75'>75</MenuItem>
-              <MenuItem value='25'>25</MenuItem>
+              <MenuItem value='100'>100</MenuItem>
             </CustomTextField>
             <Button
               variant='contained'
@@ -275,18 +319,18 @@ const ProductCategoryTable = () => {
             </Button>
           </div>
         </div>
-        <div className='overflow-x-auto'>
+        <div className='overflow-x-auto relative'>
           {isLoading ? (
             <Loading />
           ) : (
-            <table className={tableStyles.table}>
+            <DragDropContext onDragEnd={handleDragEnd}>
-              <thead>
+              <table className={tableStyles.table}>
-                {table.getHeaderGroups().map(headerGroup => (
+                <thead>
-                  <tr key={headerGroup.id}>
+                  {table.getHeaderGroups().map(headerGroup => (
-                    {headerGroup.headers.map(header => (
+                    <tr key={headerGroup.id}>
-                      <th key={header.id}>
+                      {headerGroup.headers.map(header => (
-                        {header.isPlaceholder ? null : (
+                        <th key={header.id}>
-                          <>
+                          {header.isPlaceholder ? null : (
                             <div
                               className={classnames({
                                 'flex items-center': header.column.getIsSorted(),
@@ -300,38 +344,58 @@ const ProductCategoryTable = () => {
                                 desc: <i className='tabler-chevron-down text-xl' />
                               }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
                             </div>
-                          </>
+                          )}
-                        )}
+                        </th>
-                      </th>
+                      ))}
-                    ))}
+                    </tr>
-                  </tr>
+                  ))}
-                ))}
+                </thead>
-              </thead>
+                <Droppable droppableId='category-table'>
-              {table.getFilteredRowModel().rows.length === 0 ? (
+                  {provided => (
-                <tbody>
+                    <tbody {...provided.droppableProps} ref={provided.innerRef}>
-                  <tr>
+                      {table.getFilteredRowModel().rows.length === 0 ? (
-                    <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                        <tr>
-                      No data available
+                          <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
-                    </td>
+                            No data available
-                  </tr>
+                          </td>
-                </tbody>
-              ) : (
-                <tbody>
-                  {table
-                    .getRowModel()
-                    .rows.slice(0, table.getState().pagination.pageSize)
-                    .map(row => {
-                      return (
-                        <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
-                          {row.getVisibleCells().map(cell => (
-                            <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
-                          ))}
                         </tr>
-                      )
+                      ) : (
-                    })}
+                        table
-                </tbody>
+                          .getRowModel()
-              )}
+                          .rows.slice(0, table.getState().pagination.pageSize)
-            </table>
+                          .map((row, index) => {
+                            const categoryId = row.original.id
+                            return (
+                              <Draggable key={categoryId} draggableId={categoryId} index={index}>
+                                {(provided, snapshot) => (
+                                  <tr
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    className={classnames({
+                                      selected: row.getIsSelected()
+                                    })}
+                                    style={{
+                                      ...provided.draggableProps.style,
+                                      backgroundColor: snapshot.isDragging ? '#f3f4f6' : 'transparent'
+                                    }}
+                                  >
+                                    {row.getVisibleCells().map((cell, cellIndex) => (
+                                      <td key={cell.id} {...(cellIndex === 0 ? provided.dragHandleProps : {})}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                      </td>
+                                    ))}
+                                  </tr>
+                                )}
+                              </Draggable>
+                            )
+                          })
+                      )}
+                      {provided.placeholder}
+                    </tbody>
+                  )}
+                </Droppable>
+              </table>
+            </DragDropContext>
           )}
 
           {isFetching && !isLoading && (
@@ -365,7 +429,7 @@ const ProductCategoryTable = () => {
           page={currentPage}
           onPageChange={handlePageChange}
           onRowsPerPageChange={handlePageSizeChange}
-          rowsPerPageOptions={[10, 25, 50]}
+          rowsPerPageOptions={[50, 75, 100]}
           disabled={isLoading}
         />
       </Card>