83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
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;
|