+ <>
{(getalltenantsIsLoading || summaryDataIsLoading || isloader) &&
}
- {/* ========================================================== || Titlecard || ========================================================== */}
-
-
-
- {/* ========================================================== || MainCard (searchword) || ========================================================== */}
-
+
+
+
+
+
+
+
+ Tenants
+
+
+
+
+ Live · {locaName || 'All Zones'}
+
+
+
+
+ }
+ placeholder="Select Zone"
+ paperComponent={SoftPaper}
+ sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
+ />
+
+
+
+ {/* ============================================= || KPI Cards | ============================================= */}
+
+ {KPI_META.map((item) => {
+ const Icon = item.icon;
+ const value = summaryData?.[item.countKey] ?? 0;
+ return (
+
+ {
+ const idx = STATUS_TABS.findIndex((t) => t.countKey === item.countKey);
+ if (idx >= 0) handleChange(null, idx);
+ }}
+ >
+
+
+
+
+ {item.label}
+
+ {summaryDataIsLoading ? (
+
+ ) : (
+
+ {value}
+
+ )}
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ {/* ============================================= || Status Tabs + Search || ============================================= */}
+
+
- {/* ============================================= || Tabs || ================================================= */}
-
-
- {
- setstatus('active');
- }}
- icon={
- : summaryData?.active || 0}
- color="primary"
- variant="light"
- sx={{ minWidth: 32, justifyContent: 'center' }}
- size="small"
- />
- }
- iconPosition="end"
- />
- {
- setstatus('pending');
- }}
- icon={
- : summaryData?.pending || 0}
- color="primary"
- variant="light"
- sx={{ minWidth: 32, justifyContent: 'center' }}
- size="small"
- />
- }
- iconPosition="end"
- />
- {
- setstatus('inactive');
- }}
- icon={
- : summaryData?.inactive || 0}
- color="primary"
- variant="light"
- sx={{ minWidth: 32, justifyContent: 'center' }}
- size="small"
- />
- }
- iconPosition="end"
- />
-
-
- {/* ============================================= || SearchOutlined || ================================================= */}
+ {STATUS_TABS.map((t, idx) => {
+ const meta = STATUS_META[t.status];
+ const Icon = meta.icon;
+ const active = value0 === idx;
+ const count = summaryData?.[t.countKey] ?? 0;
+ return (
+ {
+ setstatus(t.status);
+ handleChange(null, idx);
+ }}
+ sx={{
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: { xs: 0.625, md: 0.875 },
+ pl: 0.5,
+ pr: { xs: 1, md: 1.25 },
+ py: 0.5,
+ flexShrink: 0,
+ cursor: 'pointer',
+ borderRadius: 999,
+ border: `1.5px solid ${active ? meta.color : edge(meta.color)}`,
+ bgcolor: active ? meta.color : tint(meta.color),
+ color: active ? '#fff' : meta.color,
+ fontWeight: 700,
+ boxShadow: active ? `0 6px 18px ${ring(meta.color)}` : 'none',
+ transition: 'all 0.18s',
+ '&:hover': {
+ borderColor: meta.color,
+ boxShadow: active ? `0 6px 18px ${ring(meta.color)}` : `0 0 0 3px ${ring(meta.color)}`
+ }
+ }}
+ >
+
+
+
+
+ {meta.label}
+
+
+ {summaryDataIsLoading ? : count}
+
+
+ );
+ })}
+
+ {/* Search */}
+
-
- }
+
+
+
+
+ {/* ============================================= || Table || ============================================= */}
+
- {/* ============================================= || TableContainer| ============================================= */}
-
-
+
+
-
- S.No
- Client
- Contact
- Address
-
- Actions
-
+
+ #
+ Status
+ Client
+ Contact
+ Address
+ Actions
@@ -589,111 +927,220 @@ const Clients1 = () => {
{tenantList?.length == 0 && !isloader ? (
-
-
-
+
+
+
+
+
+
+ No tenants to show
+
+
+ {`No ${activeTabMeta.label.toLowerCase()} tenants for this filter.`}
+
) : (
- tenantList?.map((row, index) => (
- <>
+ tenantList?.map((row, index) => {
+ const rowStatusKey = (value0 === 0 ? 'active' : value0 === 1 ? 'pending' : 'inactive');
+ const rowStatusMeta = STATUS_META[rowStatusKey];
+ const RowStatusIcon = rowStatusMeta.icon;
+ return (
+
{/* ============================================ || tablerow 1 || ============================================ */}
-
- {index + 1 + page * rowsPerPage}
+
-
-
- {row.tenantname}
+
+ {String(index + 1 + page * rowsPerPage).padStart(2, '0')}
+
+
+
+
+
+
+
+
+ {rowStatusMeta.label}
- Id : {row.tenantid}
- {row.primarycontact}
- {row.primaryemail}
+
+
+
+
+
+
+ {row.tenantname}
+
+
+ ID #{row.tenantid}
+
+
+
- {row.address}
-
-
-
+
+
+ {row.primarycontact || '—'}
+
+
+ {row.primaryemail || '—'}
+
+
+
+
+
+
-
- {value0 == 0 ? (
- {
- setSelectedCustomer(row);
- setSelectedtenid(row.tenantid);
- setAppId(row.applocationid);
- setClientstatus(row.approved);
- setTimeout(() => {
- tenantupdate(row.tenantid);
- }, 100);
- }}
- />
- ) : value0 == 1 ? (
- {
- setSelectedCustomer(row);
- setDialogopen(true);
- setSelectedtenid(row.tenantid);
- setAppId(row.applocationid);
- getAppPricing(row.applolcationid);
- }}
- />
- ) : (
- {
- setSelectedCustomer(row);
- setSelectedtenid(row.tenantid);
- setAppId(row.applocationid);
- setTimeout(() => {
- tenantupdate(row.tenantid);
- }, 100);
- }}
- />
- )}
+ {row.address || '—'}
+
+
+
+
+
+ {value0 == 0 && (
+
+ {
+ setSelectedCustomer(row);
+ setSelectedtenid(row.tenantid);
+ setAppId(row.applocationid);
+ setTimeout(() => {
+ tenantupdate(row.tenantid);
+ }, 100);
+ }}
+ >
+
+
-
- {
- setSelectedCustomer(row);
- handleCollapseToggle1(index); // makes 1st collpase open
- setOpenRowIndex2(-1); //makes 2nd collapse close , if open
- setSelectedtenid(row.tenantid);
- // setAppId(row.applocationid);
- }}
- sx={{
- color: openRowIndex1 === index ? theme.palette.error.main : theme.palette.primary.main
- }}
- >
- {openRowIndex1 === index ? : }
-
- {value0 !== 1 && (
+ )}
+ {value0 == 1 && (
+
+ {
+ setSelectedCustomer(row);
+ setDialogopen(true);
+ setSelectedtenid(row.tenantid);
+ setAppId(row.applocationid);
+ getAppPricing(row.applolcationid);
+ }}
+ >
+
+
+
+ )}
+ {value0 == 2 && (
+
+ {
+ setSelectedCustomer(row);
+ setSelectedtenid(row.tenantid);
+ setAppId(row.applocationid);
+ setTimeout(() => {
+ tenantupdate(row.tenantid);
+ }, 100);
+ }}
+ >
+
+
+
+ )}
+
{
setSelectedCustomer(row);
- handleCollapseToggle2(index); // makse 2nd collpase open
- setOpenRowIndex1(-1); // makse 1st collpse close if open
+ handleCollapseToggle1(index);
+ setOpenRowIndex2(-1);
setSelectedtenid(row.tenantid);
- setAppId(row.applocationid);
- }}
- sx={{
- color: openRowIndex2 === index ? theme.palette.error.main : theme.palette.primary.main
}}
>
-
- {openRowIndex2 === index ? : }
-
+ {openRowIndex1 === index ? : }
+
+ {value0 !== 1 && (
+
+ {
+ setSelectedCustomer(row);
+ handleCollapseToggle2(index);
+ setOpenRowIndex1(-1);
+ setSelectedtenid(row.tenantid);
+ setAppId(row.applocationid);
+ }}
+ >
+ {openRowIndex2 === index ? : }
+
+
)}
@@ -1532,21 +1979,20 @@ const Clients1 = () => {
)}
-
- ))
+
+ );
+ })
)}
-
{/* ============================================= || Pagination| ============================================= */}
{!searchword && tenantList?.length > 0 && (
<>
-
+
{
/>
)}
-
+
{/* // ==============================||( Client Pricing ) dialog (dialogopen) ||============================== // */}
-
+
);
};
diff --git a/src/pages/nearle/customers/customers.js b/src/pages/nearle/customers/customers.js
index 631b954..54bb707 100644
--- a/src/pages/nearle/customers/customers.js
+++ b/src/pages/nearle/customers/customers.js
@@ -1,15 +1,11 @@
import { React, useState, useEffect, useRef, useMemo } from 'react';
-import { Empty } from 'antd';
import axios from 'axios';
import { FaRegEdit } from 'react-icons/fa';
-import { RiEdit2Fill } from 'react-icons/ri';
-import { useTheme } from '@mui/material/styles';
import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
// material-ui
import {
Box,
- Divider,
Table,
TableBody,
TableCell,
@@ -27,14 +23,26 @@ import {
DialogContent,
Button,
TextField,
- Autocomplete
+ Autocomplete,
+ Avatar,
+ Paper
} from '@mui/material';
+import {
+ MdPeopleAlt,
+ MdMyLocation,
+ MdPersonPin,
+ MdPhone,
+ MdLocationOn,
+ MdEdit,
+ MdGroups,
+ MdHowToReg,
+ MdPlace
+} from 'react-icons/md';
import Geocode from 'react-geocode';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import parse from 'autosuggest-highlight/parse';
import { debounce } from '@mui/material/utils';
// project imports
-import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
@@ -43,6 +51,59 @@ import { getallcustomers, getcustomersummary } from 'pages/api/api';
import { OpenToast } from 'components/third-party/OpenToast';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
+// ============================================================================
+// Design tokens — shared with the deliveries / tenants / pricing pages so every
+// surface (header, KPI tiles, table, badges, dialog) speaks the same visual
+// language. Keep this block in sync with deliveries.js:109–162.
+// ============================================================================
+const DT = {
+ radiusPill: 999,
+ radiusCard: 16,
+ shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
+ shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
+ shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
+ textPrimary: '#0f172a',
+ textSecondary: '#64748b',
+ textMuted: '#94a3b8',
+ borderSubtle: '#e2e8f0',
+ divider: '#f1f5f9',
+ surface: '#ffffff',
+ surfaceAlt: '#f8fafc'
+};
+const a = (c, suffix) => `${c}${suffix}`;
+const tint = (c) => a(c, '08');
+const soft = (c) => a(c, '18');
+const ring = (c) => a(c, '26');
+const edge = (c) => a(c, '55');
+
+const SoftPaper = (props) => (
+
+);
+
+const AccentAvatar = ({ color, selected, size = 24, children }) => (
+
+ {children}
+
+);
+
// ==============================|| google address ||============================== //
const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
@@ -67,7 +128,6 @@ export default function Customers() {
const loadMoreRef = useRef();
const [rowsPerPage] = useState(50);
const [page] = useState(0);
- const theme = useTheme();
const [appId, setAppId] = useState(0);
const [locaName, setLocoName] = useState('All');
const [selectedCustomer, setSelectedCustomer] = useState({}); // to edit
@@ -326,131 +386,433 @@ export default function Customers() {
}
}
};
+ const KPI_META = [
+ { key: 'total', label: 'Total Customers', color: '#662582', icon: MdGroups, value: pageCount?.Total ?? 0 },
+ { key: 'loaded', label: 'Loaded in View', color: '#0ea5e9', icon: MdHowToReg, value: rows.length },
+ { key: 'zone', label: 'Active Zone', color: '#10b981', icon: MdPlace, value: locaName || 'All Zones' }
+ ];
+
return (
<>
- {(customerSummaryIsLoading || customersIsLoading) && (
- <>
- {/* */}
-
-
- )}
- {/* */}
-
-
- {/* Left: Title */}
- Customers
- {/* Right: Controls */}
-
-
+ {(customerSummaryIsLoading || customersIsLoading) && }
-
+
+
+
+
+
+
+
+ Customers
+
+
+
+
+ Live · {locaName || 'All Zones'}
+
- }
+ }
+ placeholder="Select Zone"
+ paperComponent={SoftPaper}
+ sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
+ />
+
+
+
+ {/* ============================================= || KPI Cards | ============================================= */}
+
+ {KPI_META.map((item) => {
+ const Icon = item.icon;
+ return (
+
+
+
+
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ {/* ============================================= || Search header | ============================================= */}
+
-
-
+
+
+
+
+
+
+
+ Directory
+
+
+ {pageCount?.Total ?? 0} total · {rows.length} loaded
+
+
+
+
+
+
+
+
+
+ {/* ============================================= || Table || ============================================= */}
+
+
+
-
- #
- Name
- Contact
- Address
- Location
- Action
+
+ #
+ Customer
+ Contact
+ Address
+ Location
+ Action
{customersIsLoading && }
- {rows?.length == 0 && !customersIsLoading ? (
+ {rows?.length === 0 && !customersIsLoading ? (
-
-
-
+
+
+
+
+
+
+ No customers to show
+
+
+ {searchword ? 'Try a different keyword.' : 'Pick a zone above to load the directory.'}
+
) : (
- rows?.map((row, index) => {
- return (
-
- {index + 1 + page * rowsPerPage}
-
-
- {row.firstname}
-
-
- Id : {row.customerid}
-
-
-
-
- {row.contactno}
-
-
- {row.email}
-
-
- {row.address}
- {row.suburb}
-
-
- {
- console.log('row', row);
- setSelectedCustomer(row);
- setTimeout(() => {
- setOpen(true);
- }, 0);
- }}
+ rows?.map((row, index) => (
+
+
+
+ {String(index + 1 + page * rowsPerPage).padStart(2, '0')}
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- );
- })
+ {row.firstname || '—'}
+
+
+ ID #{row.customerid}
+
+
+
+
+
+
+
+
+
+ {row.contactno || '—'}
+
+
+ {row.email && (
+
+ {row.email}
+
+ )}
+
+
+
+
+
+ {row.address || '—'}
+
+
+
+
+ {row.suburb ? (
+
+ {row.suburb}
+
+ ) : (
+ —
+ )}
+
+
+
+ {
+ setSelectedCustomer(row);
+ setTimeout(() => setOpen(true), 0);
+ }}
+ sx={{
+ bgcolor: soft('#8b5cf6'),
+ color: '#8b5cf6',
+ border: `1px solid ${edge('#8b5cf6')}`,
+ '&:hover': { bgcolor: '#8b5cf6', color: '#fff' }
+ }}
+ >
+
+
+
+
+
+ ))
)}
- {rows?.length != 0 && (
+ {rows?.length !== 0 && (
-
+
- {isFetchingNextPage ? : hasNextPage ? : 'No More Orders'}
+ {isFetchingNextPage || hasNextPage ? (
+
+ ) : (
+
+ No more customers
+
+ )}
@@ -458,8 +820,7 @@ export default function Customers() {
-
-
+
{/* ======================================== || Edit Dialog || ======================================== */}