import React, { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import { BsThreeDotsVertical } from 'react-icons/bs';
import { fetchCustomerData } from '../../services/api/Viewcustomerapis';
import './Viewcustomer.css';
import DropdownMenu from './DropdownMenu';
import { tokens } from "../../nct_frontend_common_components/src/theme/Theme";
import { useTheme } from '@mui/material';
const columns = [
{ id: 'name', label: 'Name', minWidth: 100 },
{ id: 'company_name', label: 'Company Name', minWidth: 170 },
{ id: 'Email', label: 'Email', minWidth: 100 },
{ id: 'Phone', label: 'Work Phone', minWidth: 170, align: 'left' },
{ id: 'gst', label: 'GST Treatment', minWidth: 170, align: 'left' },
{ id: 'receivable', label: 'Receivable', minWidth: 100, align: 'left' },
];
export default function Viewcustomer() {
const theme = useTheme();
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(true);
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] = useState('name');
const [selectedRows, setSelectedRows] = useState([]);
const [isMenuVisible, setMenuVisible] = useState(false);
const [filteredRows, setFilteredRows] = useState([]);
const [searchName, setSearchName] = useState('');
const [searchCompanyName, setSearchCompanyName] = useState('');
const [searchEmail, setSearchEmail] = useState('');
useEffect(() => {
const loadData = async () => {
try {
const data = await fetchCustomerData();
setRows(data);
setFilteredRows(data);
} catch (error) {
console.error('Error loading data:', error);
} finally {
setLoading(false);
}
};
loadData();
}, []);
useEffect(() => {
const filteredData = rows.filter((row) =>
(searchName === '' ||
row.name.toLowerCase().includes(searchName.toLowerCase())) &&
(searchCompanyName === '' ||
row.company_name.toLowerCase().includes(searchCompanyName.toLowerCase())) &&
(searchEmail === '' ||
row.Email.toLowerCase().includes(searchEmail.toLowerCase()))
);
setFilteredRows(filteredData);
}, [searchName, searchCompanyName, searchEmail, rows]);
const colors = tokens(theme.palette.mode);
const toggleMenu = () => {
setMenuVisible((prev) => !prev);
};
const handleSort = (column) => {
const isAsc = orderBy === column && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(column);
};
const sortRows = (rows) => {
return rows.sort((a, b) => {
if (order === 'asc') {
return a[orderBy] > b[orderBy] ? 1 : -1;
} else {
return a[orderBy] < b[orderBy] ? 1 : -1;
}
});
};
const sortedRows = sortRows([...rows]);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelected = rows.map((row) => row.name);
setSelectedRows(newSelected);
return;
}
setSelectedRows([]);
};
const handleClick = (event, name) => {
const selectedIndex = selectedRows.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selectedRows, name);
} else if (selectedIndex > -1) {
newSelected = newSelected.concat(selectedRows.slice(0, selectedIndex),
selectedRows.slice(selectedIndex + 1));
}
setSelectedRows(newSelected);
};
return (
<>
<div className="conheader" style={{ display: 'flex', justifyContent: 'space-
between', alignItems: 'center' }}>
{/* Left Side: Search Fields */}
<div className="search-fields" style={{ display: 'flex', gap: '1rem', alignItems:
'center' }}>
<input
type="text"
placeholder="Search Name"
value={searchName}
onChange={(e) => setSearchName(e.target.value)}
style={{ padding: '0.5rem', borderRadius: '4px', border: '1px
solid',backgroundColor:colors.primary[400] }}
/>
<input
type="text"
placeholder="Search Company Name"
value={searchCompanyName}
onChange={(e) => setSearchCompanyName(e.target.value)}
style={{ padding: '0.5rem', borderRadius: '4px', border: '1px
solid' ,backgroundColor:colors.primary[400]}}
/>
<input
type="text"
placeholder="Search Email"
value={searchEmail}
onChange={(e) => setSearchEmail(e.target.value)}
style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid
' ,backgroundColor:colors.primary[400],marginLeft:"8px"}}
/>
</div>
{/* Right Side: Buttons */}
<div className="header-actions" style={{ display: 'flex', alignItems: 'center' }}>
<Button
className="header-button"
variant="contained"
href="/"
style={{ marginRight: '1rem', backgroundColor: '#483285' }}
>
NEW
</Button>
<button className="icon-button" onClick={toggleMenu} style={{ fontSize:
'20px' }}>
<BsThreeDotsVertical style={{ marginRight: '10px' }} />
</button>
<div>
<DropdownMenu isVisible={isMenuVisible} handleSort={handleSort} style={{ color:
'#483285' }} />
</div>
</div>
</div>
<Paper sx={{ width: '100%', overflow: 'hidden', marginBottom: '4rem' }}>
<TableContainer sx={{ maxHeight: 440 }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell padding="checkbox" sx={{ borderTop: '2px solid ',
borderBottom: '2px solid ', borderLeft: '1px solid', borderRight: '1px solid',
padding: '6px 8px' }}>
<Checkbox
indeterminate={selectedRows.length > 0 && selectedRows.length <
rows.length}
checked={rows.length > 0 && selectedRows.length ===
rows.length}
onChange={handleSelectAllClick}
sx={{
backgroundColor: colors.primary[400],
'&.Mui-checked': {
color: '#483285',
},
width: '100%',
height: '100%',
padding: '0px',
margin: '-4px',
minWidth: '42px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
'& .MuiSvgIcon-root': {
fontSize: '1.5rem',
},
}}
/>
</TableCell>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
sx={{
fontWeight: 'bold',
fontSize: '14px',
borderBottom: '2px solid ',
borderRight: '1px solid ',
borderTop: '2px solid ',
backgroundColor: colors.primary[400],
padding: '6px 8px',
}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRow>
<TableCell colSpan={columns.length}>Loading...</TableCell>
</TableRow>
) : (
// First filter the rows, then sort the filtered rows
filteredRows
.sort((a, b) => {
// Assuming you have a sorting function that returns a number based on the
sort order
// Modify this based on your actual sort logic
return a[columnToSort] < b[columnToSort] ? -1 : 1; // For ascending order
})
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = selectedRows.indexOf(row.name) !== -1;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
tabIndex={-1}
key={index}
selected={isItemSelected}
sx={{
height: '24px',
}}
>
<TableCell
padding="checkbox"
sx={{
padding: '4px 8px',
borderRight: '1px solid',
borderLeft: '1px solid',
borderBottom: '1px solid',
}}
>
<Checkbox
color="primary"
checked={isItemSelected}
sx={{
backgroundColor: colors.primary[400],
height: '24px',
'&.Mui-checked': { color: '#483285' },
}}
/>
</TableCell>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell
key={column.id}
align={column.align}
sx={{
padding: '4px 8px',
backgroundColor: colors.primary[400],
borderRight: '1px solid',
borderBottom: '1px solid',
}}
>
{value}
</TableCell>
);
})}
</TableRow>
);
})
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
sx={{ backgroundColor: colors.primary[400], borderTop: '1px solid' }}
/>
</Paper>
</>
);
}
