first commit

src/components/EmptyState.jsx

@@ -0,0 +1,33 @@
+import { Box, Typography } from '@mui/material';
+import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';
+
+// ==============================|| EMPTY STATE ||============================== //
+
+export default function EmptyState({ icon: Icon = InboxOutlinedIcon, title = 'No records found', caption, sx }) {
+  return (
+    <Box sx={{ textAlign: 'center', py: 6, px: 2, ...sx }}>
+      <Box
+        sx={{
+          width: 72,
+          height: 72,
+          borderRadius: '50%',
+          bgcolor: 'grey.100',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mb: 2
+        }}
+      >
+        <Icon sx={{ fontSize: 34, color: 'grey.400' }} />
+      </Box>
+      <Typography variant="h5" color="text.secondary">
+        {title}
+      </Typography>
+      {caption && (
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+          {caption}
+        </Typography>
+      )}
+    </Box>
+  );
+}