Back office loan list items:Amount/Filter

src/app/modules/process/user-pending/components/header/UserListToolbar.tsx

@@ -1,6 +1,6 @@
-import { KTIcon } from "../../../../../../_digifi/helpers";
+import { KTIcon } from '../../../../../../_digifi/helpers';
-import { useListView } from "../../core/ListViewProvider";
+import { useListView } from '../../core/ListViewProvider';
-import { UsersListFilter } from "./UsersListFilter";
+import { UsersListFilter } from './UsersListFilter';
 
 const UsersListToolbar = () => {
   const { setItemIdForUpdate } = useListView();
@@ -13,7 +13,7 @@ const UsersListToolbar = () => {
       className="d-flex justify-content-end"
       data-kt-user-table-toolbar="base"
     >
-      <UsersListFilter />
+      {/* <UsersListFilter /> */}
 
       {/* begin::Export */}
       {/* <button type='button' className='btn btn-light-primary me-3'>

src/app/modules/process/user-pending/table/columns/_columns.tsx

@@ -1,57 +1,103 @@
-import {Column} from 'react-table'
+import { Column } from 'react-table';
-import {UserInfoCell} from './UserInfoCell'
+import { UserInfoCell } from './UserInfoCell';
-import { PaymentMonthCell } from './UserLastLoginCell'
+import { PaymentMonthCell } from './UserLastLoginCell';
-import {AgentCell} from './AgentCell'
+import { AgentCell } from './AgentCell';
-import {UserActionsCell} from './UserActionsCell'
+import { UserActionsCell } from './UserActionsCell';
-import {UserSelectionCell} from './UserSelectionCell'
+import { UserSelectionCell } from './UserSelectionCell';
-import {UserCustomHeader} from './UserCustomHeader'
+import { UserCustomHeader } from './UserCustomHeader';
-import {UserSelectionHeader} from './UserSelectionHeader'
+import { UserSelectionHeader } from './UserSelectionHeader';
-import {User} from '../../../core/_models'
+import { User } from '../../../core/_models';
-import { AddedCell } from './AddedCell'
+import { AddedCell } from './AddedCell';
+
+const formatNumberWithCommas = (number: string): string => {
+  return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
 
 const usersColumns: ReadonlyArray<Column<User>> = [
   {
     Header: (props) => <UserSelectionHeader tableProps={props} />,
     id: 'selection',
-    Cell: ({...props}) => <UserSelectionCell id={props.data[props.row.index].uid} />,
+    Cell: ({ ...props }) => (
-  },
+      <UserSelectionCell id={props.data[props.row.index].uid} />
-  {
+    ),
-    Header: (props) => <UserCustomHeader tableProps={props} title='Name' className='min-w-125px' />,
-    id: 'firstname',
-    Cell: ({...props}) => <UserInfoCell user={props.data[props.row.index]} />,
-  },
-  {
-    Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
-    accessor: 'loan_amount',
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Payment Terms' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Name"
+        className="min-w-125px"
+      />
+    ),
+    id: 'firstname',
+    Cell: ({ ...props }) => <UserInfoCell user={props.data[props.row.index]} />,
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Amount"
+        className="min-w-125px"
+      />
+    ),
+    accessor: 'loan_amount',
+    Cell: ({ row, data }) =>
+      formatNumberWithCommas(data[row.index].loan_amount || '0'),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Payment Terms"
+        className="min-w-125px"
+      />
     ),
     id: 'payment_month',
-    Cell: ({...props}) => <PaymentMonthCell payment_month={props.data[props.row.index].payment_month} />,
+    Cell: ({ ...props }) => (
+      <PaymentMonthCell
+        payment_month={props.data[props.row.index].payment_month}
+      />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Agent' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Agent"
+        className="min-w-125px"
+      />
     ),
     id: 'sales_agent',
-    Cell: ({...props}) => <AgentCell agent={props.data[props.row.index].sales_agent} />,
+    Cell: ({ ...props }) => (
+      <AgentCell agent={props.data[props.row.index].sales_agent} />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Added' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Added"
+        className="min-w-125px"
+      />
     ),
     id: 'added',
-    Cell: ({...props}) => <AddedCell added={props.data[props.row.index].added} />,
+    Cell: ({ ...props }) => (
+      <AddedCell added={props.data[props.row.index].added} />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Actions' className='text-end min-w-100px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Actions"
+        className="text-end min-w-100px"
+      />
     ),
     id: 'actions',
-    Cell: ({...props}) => <UserActionsCell id={props.data[props.row.index].uid} />,
+    Cell: ({ ...props }) => (
+      <UserActionsCell id={props.data[props.row.index].uid} />
+    ),
   },
-]
+];
 
-export {usersColumns}
+export { usersColumns };

src/app/modules/process/user-started/components/header/UserListToolbar.tsx

@@ -1,6 +1,6 @@
-import { KTIcon } from "../../../../../../_digifi/helpers";
+import { KTIcon } from '../../../../../../_digifi/helpers';
-import { useListView } from "../../core/ListViewProvider";
+import { useListView } from '../../core/ListViewProvider';
-import { UsersListFilter } from "./UsersListFilter";
+import { UsersListFilter } from './UsersListFilter';
 
 const UsersListToolbar = () => {
   const { setItemIdForUpdate } = useListView();
@@ -13,7 +13,7 @@ const UsersListToolbar = () => {
       className="d-flex justify-content-end"
       data-kt-user-table-toolbar="base"
     >
-      <UsersListFilter />
+      {/* <UsersListFilter /> */}
 
       {/* begin::Export */}
       {/* <button type='button' className='btn btn-light-primary me-3'>

src/app/modules/process/user-started/table/columns/_columns.tsx

@@ -1,57 +1,103 @@
-import {Column} from 'react-table'
+import { Column } from 'react-table';
-import {UserInfoCell} from './UserInfoCell'
+import { UserInfoCell } from './UserInfoCell';
-import { PaymentMonthCell } from './UserLastLoginCell'
+import { PaymentMonthCell } from './UserLastLoginCell';
-import {AgentCell} from './AgentCell'
+import { AgentCell } from './AgentCell';
-import {UserActionsCell} from './UserActionsCell'
+import { UserActionsCell } from './UserActionsCell';
-import {UserSelectionCell} from './UserSelectionCell'
+import { UserSelectionCell } from './UserSelectionCell';
-import {UserCustomHeader} from './UserCustomHeader'
+import { UserCustomHeader } from './UserCustomHeader';
-import {UserSelectionHeader} from './UserSelectionHeader'
+import { UserSelectionHeader } from './UserSelectionHeader';
-import {User} from '../../../core/_models'
+import { User } from '../../../core/_models';
-import { AddedCell } from './AddedCell'
+import { AddedCell } from './AddedCell';
+
+const formatNumberWithCommas = (number: string): string => {
+  return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
 
 const usersColumns: ReadonlyArray<Column<User>> = [
   {
     Header: (props) => <UserSelectionHeader tableProps={props} />,
     id: 'selection',
-    Cell: ({...props}) => <UserSelectionCell id={props.data[props.row.index].uid} />,
+    Cell: ({ ...props }) => (
-  },
+      <UserSelectionCell id={props.data[props.row.index].uid} />
-  {
+    ),
-    Header: (props) => <UserCustomHeader tableProps={props} title='Name' className='min-w-125px' />,
-    id: 'firstname',
-    Cell: ({...props}) => <UserInfoCell user={props.data[props.row.index]} />,
-  },
-  {
-    Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
-    accessor: 'loan_amount',
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Payment Terms' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Name"
+        className="min-w-125px"
+      />
+    ),
+    id: 'firstname',
+    Cell: ({ ...props }) => <UserInfoCell user={props.data[props.row.index]} />,
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Amount"
+        className="min-w-125px"
+      />
+    ),
+    accessor: 'loan_amount',
+    Cell: ({ row, data }) =>
+      formatNumberWithCommas(data[row.index].loan_amount || '0'),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Payment Terms"
+        className="min-w-125px"
+      />
     ),
     id: 'payment_month',
-    Cell: ({...props}) => <PaymentMonthCell payment_month={props.data[props.row.index].payment_month} />,
+    Cell: ({ ...props }) => (
+      <PaymentMonthCell
+        payment_month={props.data[props.row.index].payment_month}
+      />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Agent' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Agent"
+        className="min-w-125px"
+      />
     ),
     id: 'sales_agent',
-    Cell: ({...props}) => <AgentCell agent={props.data[props.row.index].sales_agent} />,
+    Cell: ({ ...props }) => (
+      <AgentCell agent={props.data[props.row.index].sales_agent} />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Added' className='min-w-125px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Added"
+        className="min-w-125px"
+      />
     ),
     id: 'added',
-    Cell: ({...props}) => <AddedCell added={props.data[props.row.index].added} />,
+    Cell: ({ ...props }) => (
+      <AddedCell added={props.data[props.row.index].added} />
+    ),
   },
   {
     Header: (props) => (
-      <UserCustomHeader tableProps={props} title='Actions' className='text-end min-w-100px' />
+      <UserCustomHeader
+        tableProps={props}
+        title="Actions"
+        className="text-end min-w-100px"
+      />
     ),
     id: 'actions',
-    Cell: ({...props}) => <UserActionsCell id={props.data[props.row.index].uid} />,
+    Cell: ({ ...props }) => (
+      <UserActionsCell id={props.data[props.row.index].uid} />
+    ),
   },
-]
+];
 
-export {usersColumns}
+export { usersColumns };