feat: 1.add sort functionality on listing pages

provide link to relevant invoice PDF on order screen
BUN-1308, BUN-1278

apps/storefront/src/App.tsx

@@ -103,7 +103,6 @@ export default function App() {
     background: ${backgroundColor};
     font-family: Roboto;
   };`
-  // const [openApp, setOpenApp] = useState<boolean>(false)
 
   useDomHooks({ setOpenPage })
 

apps/storefront/src/components/table/B3PaginationTable.tsx

@@ -60,7 +60,7 @@ interface B3PaginationTableProps {
   onClickRow?: (item: any, index?: number) => void
   showRowsPerPageOptions?: boolean
   sortDirection?: 'asc' | 'desc'
-  sortByFn?: (node: CustomFieldItems) => void
+  sortByFn?: (e: { key: string }) => void
   orderBy?: string
 }
 

apps/storefront/src/components/table/B3Table.tsx

@@ -90,7 +90,7 @@ interface TableProps<T> {
   isSelectOtherPageCheckbox?: boolean
   isAllSelect?: boolean
   sortDirection?: 'asc' | 'desc'
-  sortByFn?: (node: any) => void
+  sortByFn?: (e: { key: string }) => void
   orderBy?: string
 }
 

apps/storefront/src/hooks/index.ts

@@ -10,4 +10,5 @@ export { default as useMobile } from './useMobile'
 export { default as useRole } from './useRole'
 export { default as useScrollBar } from './useScrollBar'
 export { default as useSetOpen } from './useSetOpen'
+export { default as useSort } from './useSort'
 export { default as useTableRef } from './useTableRef'

apps/storefront/src/hooks/useSort.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+
+const useSort = <T>(
+  sortKeys: { [key: string]: string },
+  initKey: string,
+  filterData: T,
+  setFilterData: React.Dispatch<React.SetStateAction<T>>
+): [(e: { key: string }) => void, 'asc' | 'desc', string] => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
+  const [orderBy, setOrderBy] = useState<string>(initKey)
+
+  const handleSetOrderBy = (e: { key: string }) => {
+    const sortDirection = order === 'asc' ? 'desc' : 'asc'
+    setOrder(sortDirection)
+    setOrderBy(e.key)
+    setFilterData({
+      ...filterData,
+      orderBy: order === 'asc' ? sortKeys[e.key] : `-${sortKeys[e.key]}`,
+    })
+  }
+
+  return [handleSetOrderBy, order, orderBy]
+}
+
+export default useSort

apps/storefront/src/pages/dashboard/Dashboard.tsx

@@ -15,6 +15,7 @@ import { styled } from '@mui/material/styles'
 import { B3Sping, showPageMask } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
+import { useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import { superAdminCompanies } from '@/shared/service/b2b'
 import { endMasquerade, startMasquerade } from '@/utils'
@@ -38,6 +39,14 @@ interface DashboardProps {
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>
 }
 
+export const defaultSortKey = 'companyName'
+
+export const sortKeys = {
+  companyName: 'companyName',
+  companyAdminName: 'companyAdminName',
+  companyEmail: 'companyEmail',
+}
+
 const StyledMenu = styled(Menu)(() => ({
   '& .MuiPaper-elevation': {
     boxShadow:
@@ -124,8 +133,16 @@ function Dashboard(props: DashboardProps) {
 
   const [filterData, setFilterData] = useState<ListItem>({
     q: '',
+    orderBy: `-${sortKeys[defaultSortKey]}`,
   })
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   const location = useLocation()
 
   const getSuperAdminCompaniesList = async (params: ListItem) => {
@@ -222,14 +239,17 @@ function Dashboard(props: DashboardProps) {
           )}
         </Box>
       ),
+      isSortable: true,
     },
     {
       key: 'companyAdminName',
       title: 'Admin',
+      isSortable: true,
     },
     {
       key: 'companyEmail',
       title: 'Email',
+      isSortable: true,
     },
     {
       key: 'companyName',
@@ -276,6 +296,9 @@ function Dashboard(props: DashboardProps) {
           isCustomRender={false}
           requestLoading={setIsRequestLoading}
           tableKey="id"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           renderItem={(row: ListItem) => (
             <DashboardCard
               row={row}

apps/storefront/src/pages/invoice/Invoice.tsx

@@ -12,7 +12,7 @@ import { cloneDeep } from 'lodash'
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
-import { useMobile } from '@/hooks'
+import { useMobile, useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   exportInvoicesAsCSV,
@@ -37,7 +37,11 @@ import InvoiceStatus from './components/InvoiceStatus'
 import PaymentsHistory from './components/PaymentsHistory'
 import PaymentSuccess from './components/PaymentSuccess'
 import PrintTempalte from './components/PrintTempalte'
-import InvoiceListType, { filterFormConfig, sortIdArr } from './utils/config'
+import InvoiceListType, {
+  defaultSortKey,
+  filterFormConfig,
+  sortIdArr,
+} from './utils/config'
 import { handlePrintPDF } from './utils/pdf'
 import { InvoiceItemCard } from './InvoiceItemCard'
 
@@ -58,6 +62,7 @@ const initFilter = {
   q: '',
   first: 10,
   offset: 0,
+  orderBy: sortIdArr[defaultSortKey],
 }
 
 function Invoice() {
@@ -87,12 +92,17 @@ function Invoice() {
     CustomFieldItems | InvoiceListNode[]
   >([])
   const [list, setList] = useState<InvoiceListNode[]>([])
-  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
-  const [orderBy, setOrderBy] = useState<string>('id')
 
   const [filterData, setFilterData] =
     useState<Partial<FilterSearchProps> | null>()
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortIdArr,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   const location = useLocation()
 
   const handleGetCorrespondingCurrency = (code: string) => {
@@ -372,20 +382,6 @@ function Invoice() {
     }
   }
 
-  const handleSetOrderBy = (e: CustomFieldItems) => {
-    const sortDirection = order === 'asc' ? 'desc' : 'asc'
-    setOrder(sortDirection)
-    setOrderBy(e.key)
-
-    setFilterData({
-      ...filterData,
-      orderBy:
-        sortDirection === 'asc'
-          ? `${sortIdArr[e.key]}`
-          : `-${sortIdArr[e.key]}`,
-    })
-  }
-
   const handleSetSelectedInvoiceAccountNumber = (val: string, id: string) => {
     let result = val
     if (val.includes('.')) {
@@ -582,6 +578,7 @@ function Invoice() {
     {
       key: 'status',
       title: 'Status',
+      isSortable: true,
       render: (item: InvoiceList) => {
         const { status, dueDate } = item
         let code = item.status

apps/storefront/src/pages/invoice/utils/config.ts

@@ -52,12 +52,15 @@ export const filterFormConfig = [
   },
 ]
 
+export const defaultSortKey = 'id'
+
 export const sortIdArr: { [key: string]: string } = {
   id: 'invoiceNumber',
   orderNumber: 'orderNumber',
   createdAt: 'createdAt',
   updatedAt: 'dueDate',
   originalBalance: 'originalBalanceAmount',
   openBalance: 'openBalanceAmount',
+  status: 'status',
 }
 export default InvoiceListType

apps/storefront/src/pages/order/Order.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material'
 import { B3Sping } from '@/components'
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
+import { useSort } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import {
   getB2BAllOrders,
@@ -19,10 +20,12 @@ import B3Filter from '../../components/filter/B3Filter'
 
 import OrderStatus from './components/OrderStatus'
 import {
+  defaultSortKey,
   FilterSearchProps,
   getFilterMoreData,
   getInitFilter,
   getOrderStatusText,
+  sortKeys,
 } from './config'
 import { OrderItemCard } from './OrderItemCard'
 
@@ -42,39 +45,6 @@ interface SearchChangeProps {
   orderStatus?: string | number
   company?: string
 }
-interface SortByListProps {
-  [key: string]: number | string
-}
-
-const sortByList: Array<SortByListProps> = [
-  {
-    name: 'Created on',
-    id: '-createdAt',
-  },
-  {
-    name: 'Lowest total',
-    id: 'totalIncTax',
-  },
-  {
-    name: 'Highest total',
-    id: '-totalIncTax',
-  },
-]
-
-const sortByItemName = {
-  labelName: 'name',
-  valueName: 'id',
-}
-
-const sortByConfigData = {
-  isEnabled: true,
-  sortByList,
-  sortByItemName,
-  sortByLabel: 'Sort by',
-  defaultValue: '-createdAt',
-  isFirstSelect: false,
-  w: 150,
-}
 
 interface OrderProps {
   isCompanyOrder?: boolean
@@ -102,6 +72,13 @@ function Order({ isCompanyOrder = false }: OrderProps) {
 
   const [getOrderStatuses, setOrderStatuses] = useState<Array<any>>([])
 
+  const [handleSetOrderBy, order, orderBy] = useSort(
+    sortKeys,
+    defaultSortKey,
+    filterData,
+    setFilterData
+  )
+
   useEffect(() => {
     const search = getInitFilter(isCompanyOrder, isB2BUser)
     setFilterData(search)
@@ -167,6 +144,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
       key: 'orderId',
       title: 'Order',
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'poNumber',
@@ -175,6 +153,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         <Box>{item.poNumber ? item.poNumber : '–'}</Box>
       ),
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'totalIncTax',
@@ -184,6 +163,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
       style: {
         textAlign: 'right',
       },
+      isSortable: true,
     },
     {
       key: 'status',
@@ -195,18 +175,21 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         />
       ),
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'placedby',
       title: 'Placed by',
       render: (item: ListItem) => `${item.firstName} ${item.lastName}`,
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'createdAt',
       title: 'Created on',
       render: (item: ListItem) => `${displayFormat(+item.createdAt)}`,
       width: '10%',
+      isSortable: true,
     },
     {
       key: 'companyId',
@@ -242,11 +225,6 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         ...filterData,
         q: value,
       })
-    } else if (key === 'sortBy') {
-      setFilterData({
-        ...filterData,
-        orderBy: value,
-      })
     }
   }
 
@@ -276,7 +254,7 @@ function Order({ isCompanyOrder = false }: OrderProps) {
         }}
       >
         <B3Filter
-          sortByConfig={sortByConfigData}
+          // sortByConfig={sortByConfigData}
           startPicker={{
             isEnabled: true,
             label: 'From',
@@ -301,6 +279,9 @@ function Order({ isCompanyOrder = false }: OrderProps) {
           isCustomRender={false}
           requestLoading={setIsRequestLoading}
           tableKey="orderId"
+          sortDirection={order}
+          orderBy={orderBy}
+          sortByFn={handleSetOrderBy}
           renderItem={(row: ListItem, index?: number) => (
             <OrderItemCard
               key={row.orderId}