نسخ من RaghadAlkhous/RestaurantDash
107 أسطر
4.7 KiB
JavaScript
107 أسطر
4.7 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
Button,
|
|
Chip
|
|
} from '@mui/material';
|
|
// import LocalShippingIcon from '@mui/icons-material/LocalShipping';
|
|
// import InventoryIcon from '@mui/icons-material/Inventory';
|
|
// import AssignmentIcon from '@mui/icons-material/Assignment';
|
|
|
|
const RecentActivity = () => {
|
|
// Sample data
|
|
const activities = [
|
|
{
|
|
id: 1,
|
|
order: 'Order #1234 completed',
|
|
delivery: 'Delivery en route',
|
|
inventory: 'Low stock on item #567'
|
|
},
|
|
{
|
|
id: 2,
|
|
order: 'Order #1235 completed',
|
|
delivery: 'Delivery delayed',
|
|
inventory: 'Low stock on item #890'
|
|
},
|
|
{
|
|
id: 3,
|
|
order: 'Order #1236 completed',
|
|
delivery: 'Delivery arrived',
|
|
inventory: 'Out of stock on item #123'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Box sx={{ width: '93.5%', p: 3, backgroundColor: "white", borderRadius: 2, }}>
|
|
<Typography variant="h5" gutterBottom sx={{ fontWeight: 600, fontSize: '20px', mb: 2 }}>
|
|
Recent Activity
|
|
</Typography>
|
|
|
|
<TableContainer component={Paper} sx={{ boxShadow: 'none', border: '1px solid #e0e0e0', borderRadius: 2 }}>
|
|
<Table sx={{ minWidth: 650 }} aria-label="recent activity table">
|
|
<TableHead sx={{ backgroundColor: '#f5f5f5', color: '#61677F' }}>
|
|
|
|
<TableRow sx={{ '& th': { borderBottom: 'none' } }}>
|
|
<TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>New Orders</TableCell>
|
|
<TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Delivery Updates</TableCell>
|
|
<TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Inventory Alerts</TableCell>
|
|
<TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{activities.map((activity) => (
|
|
<TableRow key={activity.id}>
|
|
<TableCell>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
|
|
{activity.order}
|
|
</Box>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
|
|
{activity.delivery}
|
|
</Box>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
|
|
{activity.inventory}
|
|
</Box>
|
|
</TableCell>
|
|
|
|
<TableCell sx={{ width: '28%' }} >
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<Button
|
|
sx={{ color: 'white', borderRadius: '8px', fontWeight: 600, fontSize: '14px', height: '40px', width: '135px', textTransform: 'none' }}
|
|
variant="contained"
|
|
size="small"
|
|
>
|
|
Record Inventory
|
|
</Button>
|
|
<Button
|
|
sx={{ fontWeight: 600, fontSize: '14px', borderRadius: '8px', height: '40px', textTransform: 'none' }}
|
|
variant="outlined"
|
|
size="small"
|
|
>
|
|
Assign Task
|
|
</Button>
|
|
</Box>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RecentActivity; |