Initial commit - restaurant dashboard

src/components/Home/Inventory/contect/NoProdectDash.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+    Box,
+    Button,
+    Card,
+    CardContent,
+    Typography,
+    useMediaQuery
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import AddIcon from '@mui/icons-material/Add';
+
+const NoProdectDash = () => {
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+    return (
+        <>
+            {/* Header Section */}
+            <Box
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
+                    mb: 3,
+                    mt:10,
+                    pl: 1,
+                    pr: { xs: 1, sm: 3 },
+                    flexDirection: { xs: 'column', sm: 'row', md: 'row' },
+                    gap: { xs: 2, sm: 0 }
+                }}
+            >
+        
+            </Box>
+            {/* Empty State Content */}
+            <Card
+                sx={{
+                    boxShadow: 'none',
+                    p: 4,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    backgroundColor: 'transparent'
+                }}
+            >
+                <CardContent>
+                    {/* Image Placeholder */}
+                    <Box
+                        component="img"
+                        src="/images/compeoter.png"
+                        alt="No products available"
+                        sx={{
+                            width: isSmallScreen ? 150 : 200,
+                            height: 'auto',
+                            mb: 1,
+                            opacity: 0.8
+                        }}
+                    />
+
+                    {/* Title with colored "Sorry!" */}
+                    <Typography
+                        variant="h5"
+                        sx={{
+                            fontWeight: 400,
+                            fontSize: { xs: '14px', md: '18px' },
+                            mb: 2,
+                            color: '#5F6868',
+                            whiteSpace: 'pre-line' // هذا يسمح بكسر السطر عند المسافات
+                        }}
+                    >
+                        <Box component="span" sx={{ fontWeight: 600, fontSize: '18px' }}>Sorry!</Box>{' '}
+                        There is no campaign available.
+                        Please initiate the {'\n'}creation of a new campaign.
+                    </Typography>
+
+                    {/* Action Button */}
+                    <Button
+                        variant="contained"
+                        startIcon={<AddIcon />}
+                        sx={{
+                            textTransform: 'none',
+                            px: 4,
+                            py: 1.5,
+                            fontSize: '13px',
+                            fontWeight: 500,
+                            borderRadius: 2,
+                            color:'white',
+                            width:179
+                        }}
+                    >
+                        Add a Product
+                    </Button>
+                </CardContent>
+            </Card>
+        </>
+    );
+};
+
+export default NoProdectDash;