diff --git a/locales/en.json b/locales/en.json
index 17394ab..9549f0b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -77,5 +77,6 @@
"dry-wash.notFound.button.back": "Back to Home",
"dry-wash.errorBoundary.title": "Something went wrong",
"dry-wash.errorBoundary.description": "We are already working on fixing the issue",
- "dry-wash.errorBoundary.button.reload": "Reload Page"
+ "dry-wash.errorBoundary.button.reload": "Reload Page",
+ "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
}
diff --git a/src/api/arm.ts b/src/api/arm.ts
index 534440d..c406c54 100644
--- a/src/api/arm.ts
+++ b/src/api/arm.ts
@@ -8,8 +8,14 @@ enum ArmEndpoints {
const armService = () => {
const endpoint = getConfigValue('dry-wash.api');
- const fetchOrders = async () => {
- const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`);
+ const fetchOrders = async ({ date }: { date: Date }) => {
+ const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ date }),
+ });
if (!response.ok) {
throw new Error(`Failed to fetch orders: ${response.status}`);
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
new file mode 100644
index 0000000..5cd0255
--- /dev/null
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Button, Text } from '@chakra-ui/react';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+
+interface DateNavigatorProps {
+ currentDate: Date;
+ onPreviousDate: () => void;
+ onNextDate: () => void;
+}
+
+const DateNavigator = ({
+ currentDate,
+ onPreviousDate,
+ onNextDate,
+}: DateNavigatorProps) => {
+ return (
+
+
+
+ {currentDate.toLocaleDateString()}
+
+
+
+ );
+};
+
+export default DateNavigator;
diff --git a/src/components/DateNavigator/index.ts b/src/components/DateNavigator/index.ts
new file mode 100644
index 0000000..e3da34f
--- /dev/null
+++ b/src/components/DateNavigator/index.ts
@@ -0,0 +1 @@
+export { default } from './DateNavigator';
diff --git a/src/components/Orders/Orders.tsx b/src/components/Orders/Orders.tsx
index e2dd6bc..de4070c 100644
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@@ -13,10 +13,12 @@ import {
useToast,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
import OrderItem from '../OrderItem';
import { OrderProps } from '../OrderItem/OrderItem';
import { armService } from '../../api/arm';
+import DateNavigator from '../DateNavigator';
const TABLE_HEADERS = [
'carNumber' as const,
@@ -39,13 +41,14 @@ const Orders = () => {
const [orders, setOrders] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const [currentDate, setCurrentDate] = useState(new Date());
useEffect(() => {
const loadOrders = async () => {
setLoading(true);
try {
- const data = await fetchOrders();
+ const data = await fetchOrders({ date: currentDate });
setOrders(data.body);
} catch (err) {
setError(err.message);
@@ -62,13 +65,26 @@ const Orders = () => {
};
loadOrders();
- }, [toast, t]);
+ }, [toast, t, currentDate]);
return (
{t('title')}
+
+
+ setCurrentDate((prevDate) =>
+ dayjs(prevDate).subtract(1, 'day').toDate(),
+ )
+ }
+ onNextDate={() =>
+ setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate())
+ }
+ />
+
diff --git a/src/pages/notFound/notFound.tsx b/src/pages/notFound/notFound.tsx
index cebfe42..de50b69 100644
--- a/src/pages/notFound/notFound.tsx
+++ b/src/pages/notFound/notFound.tsx
@@ -2,11 +2,15 @@ import React from 'react';
import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
import { Link } from 'react-router-dom';
import { Player } from '@lottiefiles/react-lottie-player';
-import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
import animate from '../../assets/animation/notFound.json';
const NotFound = () => {
+ const { t } = useTranslation('~', {
+ keyPrefix: 'dry-wash',
+ });
+
return (
@@ -21,12 +25,8 @@ const NotFound = () => {
maxWidth: '450px',
}}
/>
-
- {i18next.t(`dry-wash.arm.notFound.title`)}
-
-
- {i18next.t(`dry-wash.arm.notFound.description`)}
-
+ {t(`notFound.title`)}
+ {t(`notFound.description`)}
diff --git a/stubs/api/index.js b/stubs/api/index.js
index 8fe4716..270e7c6 100644
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@@ -23,7 +23,7 @@ router.get('/arm/masters', (req, res) => {
);
});
-router.get('/arm/orders', (req, res) => {
+router.post('/arm/orders', (req, res) => {
res
.status(/error/.test(STUBS.orders) ? 500 : 200)
.send(