batool/RestaurantDash
1
0
نسخ 0
نسخ من RaghadAlkhous/RestaurantDash
الشفرة طلبات السحب النشاط

Work on Create your restaurant and Inventory

تصفح المصدر
هذا الالتزام موجود في:
raghad
2025-06-16 23:18:32 +03:00
الأصل aa9a213676
التزام 4a72e96c76
23 ملفات معدلة مع 32974 إضافات و10818 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

498
src/components/Home/Inventory/TableView.js Normal file
عرض الملف

@@ -0,0 +1,498 @@
import React, { useState } from 'react';
import { useTheme } from '@mui/material/styles';
import {
useMediaQuery,
Box,
Typography,
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Chip,
Pagination,
Button,
Avatar,
TableContainer,
TextField,
IconButton,
} from '@mui/material';
import AssignmentIcon from '@mui/icons-material/Assignment';
import DriveFileRenameOutlineSharpIcon from '@mui/icons-material/DriveFileRenameOutlineSharp';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import CloseIcon from '@mui/icons-material/Close';
import { green } from '@mui/material/colors';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import TuneIcon from '@mui/icons-material/Tune';
const TableView = ({ data = [], onAddNewProduct }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const itemsPerPage = 5;
const [currentPage, setCurrentPage] = useState(1);
const [showSearch, setShowSearch] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
// فلترة البيانات بناءً على نص البحث (غير حساس لحالة الأحرف)
const filteredData = data.filter((item) =>
item.product.toLowerCase().includes(searchTerm.toLowerCase())
);
const pageCount = Math.ceil(filteredData.length / itemsPerPage);
const paginatedData = filteredData.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
const handleSearchChange = (e) => {
setSearchTerm(e.target.value);
setCurrentPage(1); // العودة للصفحة الأولى عند تغيير البحث
};
const handleExportPDF = () => {
const doc = new jsPDF();
doc.setFontSize(14);
doc.text('Top Selling Products', 14, 20);
const tableColumn = ['No.', 'Product', 'Sales', 'Amount', 'Price', 'Expiration', 'Status'];
const tableRows = data.map((row, i) => ([
i + 1,
row.product,
row.sales,
`$${row.amount}`,
`$${row.price}`,
row.expiration,
row.status
]));
autoTable(doc, {
startY: 30,
head: [tableColumn],
body: tableRows,
styles: { fontSize: 10 },
headStyles: { fillColor: [240, 240, 240] }
});
doc.save('top_selling_products.pdf');
};
const handleExportSpreadsheet = () => {
const wsData = [
['No.', 'Product', 'Sales', 'Amount', 'Price', 'Expiration', 'Status'],
...data.map((row, i) => [
i + 1,
row.product,
row.sales,
`$${row.amount}`,
`$${row.price}`,
row.expiration,
row.status
])
];
const worksheet = XLSX.utils.aoa_to_sheet(wsData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Top Selling");
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob, 'top_selling_products.xlsx');
};
return (
<Paper
sx={{
backgroundColor: '#FFFFFF',
maxWidth: { xs: '90%', md: '100%' },
borderRadius: 2,
height: { xs: 'auto', md: '100vh' },
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
boxShadow: theme.shadows[1],
}}
>
{/* Header */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
mb: 3,
pl: { xs: 1, sm: 3 },
pt:2,
pr: { xs: 1, sm: 3 },
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
gap: { xs: 2, sm: 0 }
}}
>
<Typography variant="h6" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
Table View
</Typography>
<Box
display="flex"
gap={1}
flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
width={{ xs: '100%', sm: 'auto' }}
justifyContent={{ xs: 'space-between', sm: 'flex-end' }}
>
{/* زر إضافة منتج جديد */}
<Button
variant="contained"
color="primary"
onClick={onAddNewProduct}
sx={{
textTransform: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '12px', sm: '14px' },
fontWeight: 600,
}}
>
Add New Product
</Button>
{/* زر تصدير جدول (Spreadsheet) */}
<Button
variant="contained"
sx={{
textTransform: 'none',
color: 'white',
backgroundColor: '#5F6868',
boxShadow: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '48%', sm: '140px', md: '166px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
onClick={handleExportSpreadsheet}
>
{isMobile ? 'Export' : 'Export Spreadsheet'}
</Button>
{/* زر PDF */}
<Button
variant="contained"
sx={{
textTransform: 'none',
color: 'white',
backgroundColor: theme.palette.primary.main,
boxShadow: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '48%', sm: '90px', md: '105px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
onClick={handleExportPDF}
>
Export PDF
</Button>
{/* زر الفلاتر */}
<Button
variant="outlined"
sx={{
textTransform: 'none',
color: '#667085',
borderColor: '#e0e0e0',
backgroundColor: '#fff',
borderRadius: '8px',
height: '40px',
width: { xs: '100%', sm: '120px', md: '99px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
startIcon={<TuneIcon fontSize={isMobile ? 'small' : 'medium'} />}
>
{isMobile ? '' : 'Filters'}
</Button>
</Box>
</Box>
{/* جدول البيانات */}
<TableContainer
sx={{
flexGrow: 1,
overflowX: 'auto',
maxHeight: { xs: '60vh', md: 'calc(100vh - 160px)' },
'&::-webkit-scrollbar': { height: 4 },
}}
>
<Table
size={isMobile ? 'small' : 'medium'}
sx={{
minWidth: 750,
'& .MuiTableCell-root': {
borderBottom: '1px solid #e0e0e0',
py: { xs: 0.5, sm: 1.5 },
},
'& thead .MuiTableCell-root': {
borderBottom: 'none',
fontWeight: 600,
fontSize: { xs: '11px', sm: '14px' },
px: { xs: 0.5, sm: 2 },
},
}}
>
<TableHead sx={{ backgroundColor: '#F0F1F3' }}>
<TableRow sx={{ height: { xs: '6vh', sm: '10vh' } }}>
<TableCell width="6%">No.</TableCell>
<TableCell width="20%" sx={{ position: 'relative' }}>
<Box
sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', userSelect: 'none' }}
onClick={() => setShowSearch(prev => !prev)}
>
<Typography>Product Name</Typography>
<ArrowDropDownIcon
fontSize="small"
sx={{
transform: showSearch ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.3s ease',
}}
/>
</Box>
{showSearch && (
<TextField
size="small"
variant="outlined"
placeholder="Search product..."
value={searchTerm}
onChange={handleSearchChange}
sx={{ mt: 1, width: '100%' }}
InputProps={{
endAdornment: searchTerm && (
<IconButton
size="small"
onClick={() => setSearchTerm('')}
aria-label="Clear search"
>
<CloseIcon fontSize="small" />
</IconButton>
),
}}
/>
)}
</TableCell>
{!isMobile && <TableCell width="10%">Barcode</TableCell>}
<TableCell width="10%">Branch</TableCell>
{!isMobile && <TableCell width="10%">Expiration</TableCell>}
{!isMobile && <TableCell width="15%">Stock Quantity </TableCell>}
<TableCell width="15%">Consumption Status</TableCell>
<TableCell width="10%" align="center">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody
sx={{
'& .MuiTableCell-root': {
px: { xs: 2, sm: 3 },
},
}}
>
{paginatedData.length > 0 ? (
paginatedData.map((row, i) => (
<TableRow key={i} sx={{ height: { xs: '8vh', sm: '13vh' } }}>
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{(currentPage - 1) * itemsPerPage + i + 1}
</TableCell>
<TableCell>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: { xs: 1, sm: 2 },
}}
>
<Avatar
sx={{
bgcolor: green[50],
width: { xs: 28, sm: 40 },
height: { xs: 28, sm: 40 },
}}
variant="rounded"
>
<AssignmentIcon
fontSize={isMobile ? 'small' : 'medium'}
/>
</Avatar>
<Box
sx={{
fontSize: { xs: '11px', sm: '14px' },
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: { xs: '80px', sm: '200px' },
}}
>
{row.product}
</Box>
</Box>
</TableCell>
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{row.sales}
</TableCell>
)}
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
${row.amount.toLocaleString()}
</TableCell>
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
${row.price}
</TableCell>
)}
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{row.expiration}
</TableCell>
)}
<TableCell>
<Chip
label={isMobile ? row.status.substring(0, 3) : row.status}
size={isMobile ? 'small' : 'medium'}
sx={{
fontSize: { xs: '10px', sm: '14px' },
fontWeight: 600,
backgroundColor:
row.status === 'Published'
? '#E7F4EE'
: row.status === 'Low Stock'
? '#FDF1E8'
: row.status === 'Out of Stock'
? '#FFCDD2'
: '#E0E0E0',
color:
row.status === 'Published'
? '#0D894F'
: row.status === 'Low Stock'
? '#E46A11'
: row.status === 'Out of Stock'
? '#C62828'
: '#424242',
minWidth: { xs: '50px', sm: '100px' },
}}
/>
</TableCell>
<TableCell align="center">
<Button
variant="text"
size="small"
onClick={() => console.log('Edit', row)}
sx={{ minWidth: 0, padding: 0 }}
>
<DriveFileRenameOutlineSharpIcon
fontSize={isMobile ? 'small' : 'medium'}
sx={{ color: '#5F6868' }}
/>
</Button>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={8} align="center" sx={{ py: 5 }}>
No products found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* Pagination Footer */}
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
p={{ xs: 1, sm: 2 }}
sx={{
position: 'sticky',
bottom: 0,
backgroundColor: theme.palette.background.paper,
borderTop: '1px solid #f0f0f0',
zIndex: 1,
}}
>
<Typography
variant="body2"
color="text.secondary"
sx={{
fontSize: { xs: '11px', sm: '14px' },
whiteSpace: 'nowrap',
}}
>
Showing{' '}
{(currentPage - 1) * itemsPerPage + 1} to{' '}
{Math.min(currentPage * itemsPerPage, filteredData.length)} of{' '}
{filteredData.length}
</Typography>
<Pagination
count={pageCount}
page={currentPage}
onChange={(event, value) => setCurrentPage(value)}
size={isMobile ? 'small' : 'medium'}
sx={{
'& .MuiPaginationItem-root': {
fontSize: { xs: '12px', sm: '14px' },
minWidth: { xs: 24, sm: 32 },
height: { xs: 24, sm: 32 },
backgroundColor: '#FFECE0',
color: theme.palette.primary.main,
borderRadius: '8px',
'&.Mui-selected': {
backgroundColor: theme.palette.primary.main,
color: '#fff',
},
'&:hover': {
backgroundColor: '#FFD6B5',
},
},
}}
/>
</Box>
</Paper>
);
};
export default TableView;