Initial commit - restaurant dashboard

src/components/Home/Dashboard/AnalyticsPageOccupancy.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { useRestaurant } from '../../../contexts/RestaurantContext';
+import OrderStatusCard from './OrderStatusCard';
+import { Box, useTheme, useMediaQuery } from '@mui/material';
+import authService from '../../../services/authService';
+import dayjs from 'dayjs';
+
+const AnalyticsPageOccupancy = () => {
+  const { restaurantId } = useRestaurant();
+  const [timeFrame, setTimeFrame] = useState('12m'); // '12m', '30d', '24h'
+  const [customDate, setCustomDate] = useState(dayjs().format('YYYY-MM-DD'));
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [occupancyRate, setOccupancyRate] = useState(0);
+
+  const fetchOccupancyRate = async () => {
+    if (!restaurantId) return;
+
+    let period = 'yearly';
+    switch (timeFrame) {
+      case '24h':
+        period = 'daily';
+        break;
+      case '30d':
+        period = 'monthly';
+        break;
+      case '12m':
+      default:
+        period = 'yearly';
+        break;
+    }
+
+    try {
+      const response = await authService.getOccupancyRate(
+        restaurantId,
+        period,
+        customDate
+      );
+
+      if (response.success) {
+        // occupancy_rate جايه كنص مثل "11.83%" → نحولها لرقم
+        const rateValue = parseFloat(response.data.replace('%', '').trim());
+        setOccupancyRate(rateValue);
+      } else {
+        setOccupancyRate(0);
+      }
+    } catch (error) {
+      console.error(error);
+      setOccupancyRate(0);
+    }
+  };
+
+  useEffect(() => {
+    fetchOccupancyRate();
+  }, [timeFrame, restaurantId, customDate]);
+
+  return (
+    <Box pr={{ xs: 1, sm: 2 }} maxWidth="100%" overflowX="hidden">
+      {/* Occupancy Card */}
+      <Box>
+        <OrderStatusCard
+          title="Occupancy Rate"
+          period={
+            timeFrame === '24h'
+              ? 'Today'
+              : timeFrame === '30d'
+              ? 'This Month'
+              : 'This Year'
+          }
+          progress={occupancyRate} // نسبة الإشغال
+          description={`Current occupancy rate is ${occupancyRate}% for selected period.`}
+          timeFrame={timeFrame}
+          setTimeFrame={setTimeFrame}
+          customDate={customDate}
+          setCustomDate={setCustomDate}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default AnalyticsPageOccupancy;