feat: time picking

src/api/groupByService.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { BASE_PATH } from './apiConfig'
 import agencyList from 'open-bus-stride-client/agencies/agencyList'
+import { Moment } from 'moment'
 
 type groupByField = 'gtfs_route_date' | 'operator_ref' | 'day_of_week'
 type groupByFields =
@@ -42,8 +43,8 @@ async function groupbyAsync({
   dateFrom,
   groupBy,
 }: {
-  dateTo: Date
-  dateFrom: Date
+  dateTo: Moment
+  dateFrom: Moment
   groupBy: groupByFields
 }): Promise<GroupByResponse> {
   // example: https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2023-01-27&date_to=2023-01-29&group_by=operator_ref
@@ -61,8 +62,8 @@ export function useGroupBy({
   dateFrom,
   groupBy,
 }: {
-  dateTo: Date
-  dateFrom: Date
+  dateTo: Moment
+  dateFrom: Moment
   groupBy: groupByFields
 }) {
   const [data, setData] = useState<

src/pages/dashboard/DashboardPage.scss

@@ -4,3 +4,12 @@
     line-height: 35px;
     color: #3E3D67;
 }
+
+.date-picker-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    margin-top: 20px;
+    gap: 10px;
+}

src/pages/dashboard/DashboardPage.tsx

@@ -1,17 +1,32 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useGroupBy } from 'src/api/groupByService'
 import { PageContainer } from '../components/PageContainer'
 import OperatorHbarChart from './OperatorHbarChart/OperatorHbarChart'
 import './DashboardPage.scss'
 import { TEXTS } from 'src/resources/texts'
 import ArrivalByTimeChart from './ArrivalByTimeChart/ArrivalByTimeChart'
+import { DatePicker } from 'antd'
+import moment, { Moment } from 'moment'
 
-const now = new Date()
+const now = moment()
+
+function useDate(initialValue: Moment) {
+  const [date, setDate] = React.useState<Moment>(initialValue)
+  const onChange = useCallback((date: Moment | null) => {
+    if (date) {
+      setDate(date)
+    }
+  }, [])
+  return [date, onChange] as const
+}
 
 const DashboardPage = () => {
+  const [startDate, setStartDate] = useDate(now.clone().subtract(7, 'days'))
+  const [endDate, setEndDate] = useDate(now.clone())
+
   const hbarData = useGroupBy({
-    dateTo: now,
-    dateFrom: new Date(Number(now) - 1000 * 60 * 60 * 24 * 7), // 7 days ago
+    dateTo: endDate,
+    dateFrom: startDate,
     groupBy: 'operator_ref',
   }).map((item) => ({
     id: item.operator_ref?.agency_id || 'Unknown',
@@ -21,8 +36,8 @@ const DashboardPage = () => {
   }))
 
   const graphData = useGroupBy({
-    dateTo: now,
-    dateFrom: new Date(Number(now) - 1000 * 60 * 60 * 24 * 20), // 20 days ago
+    dateTo: endDate,
+    dateFrom: startDate,
     groupBy: 'gtfs_route_date,operator_ref',
   }).map((item) => ({
     id: item.operator_ref?.agency_id || 'Unknown',
@@ -34,6 +49,19 @@ const DashboardPage = () => {
   return (
     <PageContainer>
       <h2 className="title">{TEXTS.dashboard_page_title}</h2>
+      <div className="date-picker-container">
+        <DatePicker
+          defaultValue={startDate}
+          onChange={(data) => setStartDate(data)}
+          format="DD/MM/YYYY"
+        />
+        -
+        <DatePicker
+          defaultValue={endDate}
+          onChange={(data) => setEndDate(data)}
+          format="DD/MM/YYYY"
+        />
+      </div>
       <OperatorHbarChart operators={hbarData} />
       <h2 className="title">{TEXTS.dashboard_page_negative_title}</h2>
       <OperatorHbarChart operators={hbarData} complement />

src/resources/texts.ts

@@ -30,7 +30,7 @@ export const TEXTS = {
   ride_extra: 'נסיעה שלא תוכננה 🧐',
   ride_duped: 'נסיעה כפולה ❇️',
   checkbox_only_gaps: 'רק פערים',
-  dashboard_page_title: 'מפעילי תח"צ לפי  קיום נסיעות מתוכננות',
+  dashboard_page_title: 'מפעילי תח"צ לפי קיום נסיעות מתוכננות',
   dashboard_page_negative_title: 'מפעילי תח"צ לפי אחוזי אי יציאה מסך הנסיעות  ',
   rides_planned: 'נסיעות שתוכננו',
   rides_actual: 'נסיעות שיצאו',