Add Vehicle Scheduler

api/src/controllers/bookingController.ts

@@ -792,6 +792,7 @@ export const getBookings = async (req: Request, res: Response) => {
       car,
     } = body
     const from = (body.filter && body.filter.from && new Date(body.filter.from)) || null
+    const dateBetween = (body.filter && body.filter.dateBetween && new Date(body.filter.dateBetween)) || null
     const to = (body.filter && body.filter.to && new Date(body.filter.to)) || null
     const pickupLocation = (body.filter && body.filter.pickupLocation) || null
     const dropOffLocation = (body.filter && body.filter.dropOffLocation) || null
@@ -808,12 +809,16 @@ export const getBookings = async (req: Request, res: Response) => {
     if (car) {
       $match.$and!.push({ 'car._id': { $eq: new mongoose.Types.ObjectId(car) } })
     }
-    if (from) {
-      $match.$and!.push({ from: { $gte: from } })
-    } // $from > from
+
+    if (dateBetween) {
+      $match.$and!.push({ $and: [{ from: { $lte: dateBetween } }, { to: { $gte: dateBetween } }] })
+    } else if (from) {
+      $match.$and!.push({ from: { $gte: from } }) // $from > from
+    }
+
     if (to) {
-      $match.$and!.push({ to: { $lte: to } })
-    } // $to < to
+      $match.$and!.push({ to: { $lte: to } })// $to < to
+    }
     if (pickupLocation) {
       $match.$and!.push({ 'pickupLocation._id': { $eq: new mongoose.Types.ObjectId(pickupLocation) } })
     }

backend/package.json

@@ -16,6 +16,7 @@
     "stylelint:fix": "stylelint \"src/**/*.css\" --fix"
   },
   "dependencies": {
+    "@aldabil/react-scheduler": "^2.9.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.4.0",
@@ -31,7 +32,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.7.9",
     "cross-env": "^7.0.3",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",

backend/src/App.tsx

@@ -36,6 +36,7 @@ const NoMatch = lazy(() => import('@/pages/NoMatch'))
 const Countries = lazy(() => import('@/pages/Countries'))
 const CreateCountry = lazy(() => import('@/pages/CreateCountry'))
 const UpdateCountry = lazy(() => import('@/pages/UpdateCountry'))
+const Scheduler = lazy(() => import('@/pages/Scheduler'))
 
 const App = () => (
   <BrowserRouter>
@@ -77,6 +78,7 @@ const App = () => (
             <Route path="/countries" element={<Countries />} />
             {/* <Route path="/create-country" element={<CreateCountry />} /> */}
             {/* <Route path="/update-country" element={<UpdateCountry />} /> */}
+            <Route path="/scheduler" element={<Scheduler />} />
 
             <Route path="*" element={<NoMatch />} />
           </Routes>

backend/src/assets/css/scheduler.css

@@ -0,0 +1,91 @@
+div.scheduler {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+@media only screen and (width <=960px) {
+  div.scheduler {
+    top: 56px;
+    overflow-y: auto;
+  }
+
+  div.scheduler div.col-1,
+  div.scheduler div.col-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  div.scheduler div.col-1 .cl-supplier-filter label.accordion,
+  div.scheduler div.col-1 .cl-status-filter label.accordion,
+  div.scheduler div.col-1 .cl-scheduler-filter label.accordion {
+    background: #fff;
+  }
+
+  div.scheduler div.col-1 .cl-supplier-filter,
+  div.scheduler div.col-1 .cl-status-filter,
+  div.scheduler div.col-1 .cl-scheduler-filter {
+    margin: 5px 10px;
+    background-color: #fff;
+    max-width: 480px;
+    width: calc(100% - 20px);
+  }
+
+  div.scheduler div.col-1 .cl-scheduler-filter div.panel,
+  div.scheduler div.col-1 .cl-scheduler-filter div.panel-collapse {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media only screen and (width >=960px) {
+  div.scheduler {
+    top: 64px;
+  }
+
+  div.scheduler div.col-1 {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 300px;
+    padding: 12px 0 0 12px;
+    background: #fefefe;
+    overflow: auto;
+  }
+
+  div.scheduler div.col-2 {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 300px;
+  }
+
+  div.scheduler div.col-1 .cl-supplier-filter label.accordion,
+  div.scheduler div.col-1 .cl-status-filter label.accordion,
+  div.scheduler div.col-1 .cl-scheduler-filter label.accordion {
+    background: #fafafa;
+  }
+
+  div.scheduler div.col-1 .cl-supplier-filter,
+  div.scheduler div.col-1 .cl-status-filter,
+  div.scheduler div.col-1 .cl-scheduler-filter {
+    margin: 10px 10px 10px 0;
+    background-color: #fafafa;
+  }
+
+  div.scheduler div.col-1 .cl-scheduler-filter div.panel,
+  div.scheduler div.col-1 .cl-scheduler-filter div.panel-collapse {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+
+  div.scheduler div.col-1 .cl-status-filter,
+  div.scheduler div.col-1 .cl-scheduler-filter {
+    margin-bottom: 10px;
+  }
+
+}

backend/src/assets/css/vehicle-scheduler-filter.css

@@ -0,0 +1,14 @@
+div.vehicle-scheduler-filter {
+  background: #fafafa;
+  margin: 10px 10px 0 0;
+  border: 1px solid #dadada;
+  font-size: 13px;
+}
+
+div.vehicle-scheduler-filter .bf-search {
+  margin-top: 7px;
+}
+
+div.vehicle-scheduler-filter .btn-search {
+  margin: 20px 0;
+}

backend/src/common/helper.ts

@@ -416,6 +416,68 @@ export const getBookingStatus = (status?: bookcarsTypes.BookingStatus) => {
   }
 }
 
+/**
+ * Get booking status background color.
+ *
+ * @param {string} status
+ * @returns {string}
+ */
+export const getBookingStatusBackgroundColor = (status?: bookcarsTypes.BookingStatus) => {
+  switch (status) {
+    case bookcarsTypes.BookingStatus.Void:
+      return '#D9D9D9'
+
+    case bookcarsTypes.BookingStatus.Pending:
+      return '#FBDCC2'
+
+    case bookcarsTypes.BookingStatus.Deposit:
+      return '#CDECDA'
+
+    case bookcarsTypes.BookingStatus.Paid:
+      return '#D1F9D1'
+
+    case bookcarsTypes.BookingStatus.Reserved:
+      return '#D9E7F4'
+
+    case bookcarsTypes.BookingStatus.Cancelled:
+      return '#FBDFDE'
+
+    default:
+      return ''
+  }
+}
+
+/**
+ * Get booking status text color.
+ *
+ * @param {string} status
+ * @returns {string}
+ */
+export const getBookingStatusTextColor = (status?: bookcarsTypes.BookingStatus) => {
+  switch (status) {
+    case bookcarsTypes.BookingStatus.Void:
+      return '#6E7C86'
+
+    case bookcarsTypes.BookingStatus.Pending:
+      return '#EF6C00'
+
+    case bookcarsTypes.BookingStatus.Deposit:
+      return '#3CB371'
+
+    case bookcarsTypes.BookingStatus.Paid:
+      return '#77BC23'
+
+    case bookcarsTypes.BookingStatus.Reserved:
+      return '#1E88E5'
+
+    case bookcarsTypes.BookingStatus.Cancelled:
+      return '#E53935'
+
+    default:
+      return ''
+  }
+}
+
 /**
  * Get all booking statuses.
  *

backend/src/components/DatePicker.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker'
 import { fr, enUS, es } from 'date-fns/locale'

backend/src/components/DateTimePicker.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 import { fr, enUS, es } from 'date-fns/locale'

backend/src/components/Header.tsx

@@ -31,6 +31,7 @@ import {
   DescriptionTwoTone as TosIcon,
   ExitToApp as SignoutIcon,
   Flag as CountriesIcon,
+  CalendarMonth as SchedulerIcon,
 } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
 import * as bookcarsTypes from ':bookcars-types'
@@ -292,6 +293,10 @@ const Header = ({
                   <ListItemIcon><DashboardIcon /></ListItemIcon>
                   <ListItemText primary={strings.DASHBOARD} />
                 </ListItemLink>
+                <ListItemLink href="/scheduler">
+                  <ListItemIcon><SchedulerIcon /></ListItemIcon>
+                  <ListItemText primary={strings.SCHEDULER} />
+                </ListItemLink>
                 <ListItemLink href="/suppliers">
                   <ListItemIcon><SuppliersIcon /></ListItemIcon>
                   <ListItemText primary={strings.COMPANIES} />