feat: Add date range event dashboard charts 🤖

backend/app/Http/Actions/Events/Stats/GetEventStatsAction.php

@@ -2,12 +2,12 @@
 
 namespace HiEvents\Http\Actions\Events\Stats;
 
-use Carbon\Carbon;
 use HiEvents\DomainObjects\EventDomainObject;
 use HiEvents\Http\Actions\BaseAction;
 use HiEvents\Services\Application\Handlers\Event\DTO\EventStatsRequestDTO;
 use HiEvents\Services\Application\Handlers\Event\GetEventStatsHandler;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
 
 class GetEventStatsAction extends BaseAction
@@ -18,14 +18,15 @@ public function __construct(
     {
     }
 
-    public function __invoke(int $eventId): JsonResponse
+    public function __invoke(int $eventId, Request $request): JsonResponse
     {
         $this->isActionAuthorized($eventId, EventDomainObject::class);
 
+        $dateRangePreset = $request->query('date_range', 'month');
+
         $stats = $this->eventStatsHandler->handle(EventStatsRequestDTO::fromArray([
             'event_id' => $eventId,
-            'start_date' => Carbon::now()->subDays(7)->format('Y-m-d H:i:s'),
-            'end_date' => Carbon::now()->format('Y-m-d H:i:s')
+            'date_range_preset' => $dateRangePreset,
         ]));
 
         return $this->resourceResponse(JsonResource::class, $stats);

backend/app/Services/Application/Handlers/Event/DTO/EventStatsRequestDTO.php

@@ -7,9 +7,10 @@
 class EventStatsRequestDTO extends BaseDTO
 {
     public function __construct(
-        public int    $event_id,
-        public string $start_date,
-        public string $end_date,
+        public int     $event_id,
+        public ?string $start_date = null,
+        public ?string $end_date = null,
+        public string  $date_range_preset = 'month',
     )
     {
     }

backend/app/Services/Domain/Event/EventStatsFetchService.php

@@ -3,6 +3,7 @@
 namespace HiEvents\Services\Domain\Event;
 
 use Carbon\Carbon;
+use HiEvents\Repository\Interfaces\EventRepositoryInterface;
 use HiEvents\Services\Application\Handlers\Event\DTO\EventStatsRequestDTO;
 use HiEvents\Services\Application\Handlers\Event\DTO\EventStatsResponseDTO;
 use HiEvents\Services\Domain\Event\DTO\EventCheckInStatsResponseDTO;
@@ -14,12 +15,22 @@
 {
     public function __construct(
         private DatabaseManager $db,
+        private EventRepositoryInterface $eventRepository,
     )
     {
     }
 
     public function getEventStats(EventStatsRequestDTO $requestData): EventStatsResponseDTO
     {
+        if ($requestData->start_date === null || $requestData->end_date === null) {
+            [$startDate, $endDate] = $this->resolveStatsDateRange(
+                $requestData->event_id,
+                $requestData->date_range_preset
+            );
+            $requestData->start_date = $startDate;
+            $requestData->end_date = $endDate;
+        }
+
         $eventId = $requestData->event_id;
 
         // Aggregate total statistics for the event for all time
@@ -113,6 +124,49 @@ public function getDailyEventStats(EventStatsRequestDTO $requestData): Collectio
         });
     }
 
+    private function resolveStatsDateRange(int $eventId, string $preset): array
+    {
+        $event = $this->eventRepository->findById($eventId);
+
+        $bounds = $this->db->selectOne(
+            'SELECT MIN(date) as min_date, MAX(date) as max_date
+             FROM event_daily_statistics
+             WHERE event_id = :eventId AND deleted_at IS NULL',
+            ['eventId' => $eventId]
+        );
+
+        $candidates = array_filter([
+            $event->getStartDate() ? Carbon::parse($event->getStartDate()) : null,
+            $bounds?->min_date ? Carbon::parse($bounds->min_date) : null,
+        ]);
+        $adjustedStart = $candidates ? min($candidates) : Carbon::now()->subDays(7);
+
+        switch ($preset) {
+            case 'week':
+                $endDate = (clone $adjustedStart)->addDays(7);
+                break;
+            case 'quarter':
+                $endDate = (clone $adjustedStart)->addDays(90);
+                break;
+            case 'event':
+                $eventEnd = $event->getEndDate() ? Carbon::parse($event->getEndDate()) : null;
+                $endCandidates = array_filter([
+                    $eventEnd,
+                    $bounds?->max_date ? Carbon::parse($bounds->max_date) : null,
+                    (!$eventEnd || $eventEnd->isFuture()) ? Carbon::now() : null,
+                ]);
+                $endDate = $endCandidates ? max($endCandidates) : Carbon::now();
+                break;
+            default: // 'month'
+                $endDate = (clone $adjustedStart)->addDays(30);
+        }
+
+        return [
+            $adjustedStart->format('Y-m-d H:i:s'),
+            $endDate->format('Y-m-d H:i:s'),
+        ];
+    }
+
     public function getCheckedInStats(int $eventId): EventCheckInStatsResponseDTO
     {
         $query = <<<SQL

frontend/src/api/event.client.ts

@@ -37,8 +37,9 @@ export const eventsClient = {
         return response.data;
     },
 
-    getEventStats: async (eventId: IdParam) => {
-        const response = await api.get<GenericDataResponse<EventStats>>('events/' + eventId + '/stats');
+    getEventStats: async (eventId: IdParam, dateRange?: string) => {
+        const params = dateRange ? `?date_range=${dateRange}` : '';
+        const response = await api.get<GenericDataResponse<EventStats>>('events/' + eventId + '/stats' + params);
         return response.data;
     },
 

frontend/src/components/routes/event/EventDashboard/EventDashboard.module.scss

@@ -21,6 +21,12 @@
   }
 }
 
+.dateRangeSelector {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
 .setupCard {
   margin-bottom: 28px;
   margin-top: 24px;

frontend/src/components/routes/event/EventDashboard/index.tsx

@@ -11,15 +11,15 @@ import classes from "./EventDashboard.module.scss";
 import {useGetEventStats} from "../../../../queries/useGetEventStats.ts";
 import {formatCurrency} from "../../../../utilites/currency.ts";
 import {formatDateWithLocale} from "../../../../utilites/dates.ts";
-import {Button, Skeleton} from "@mantine/core";
+import {Button, SegmentedControl, Skeleton} from "@mantine/core";
 import {useMediaQuery} from "@mantine/hooks";
 import {IconAlertCircle, IconX} from "@tabler/icons-react";
 import {useGetAccount} from "../../../../queries/useGetAccount.ts";
 import {useUpdateEventStatus} from "../../../../mutations/useUpdateEventStatus.ts";
 import {confirmationDialog} from "../../../../utilites/confirmationDialog.tsx";
 import {showError, showSuccess} from "../../../../utilites/notifications.tsx";
 import {useEffect, useState} from 'react';
-import {StripePlatform} from "../../../../types.ts";
+import {EventLifecycleStatus, EventStatus, StripePlatform} from "../../../../types.ts";
 import {isHiEvents} from "../../../../utilites/helpers.ts";
 import {StripeConnectButton} from "../../../common/StripeConnectButton";
 import {trackEvent, AnalyticsEvents} from "../../../../utilites/analytics.ts";
@@ -39,7 +39,14 @@ export const EventDashboard = () => {
     const eventQuery = useGetEvent(eventId);
     const {data: me} = useGetMe();
     const event = eventQuery?.data;
-    const eventStatsQuery = useGetEventStats(eventId);
+    const [dateRange, setDateRange] = useState<string>('month');
+    const [hasUserSelected, setHasUserSelected] = useState(false);
+
+    const defaultDateRange = (event?.lifecycle_status === EventLifecycleStatus.ENDED
+        || event?.status === EventStatus.ARCHIVED) ? 'event' : 'month';
+    const effectiveDateRange = hasUserSelected ? dateRange : defaultDateRange;
+
+    const eventStatsQuery = useGetEventStats(eventId, effectiveDateRange);
     const {data: eventStats} = eventStatsQuery;
     const isMobile = useMediaQuery('(max-width: 768px)');
     const {data: account, isFetched: accountIsFetched} = useGetAccount();
@@ -91,7 +98,7 @@ export const EventDashboard = () => {
         })
     }
 
-    const dateRange = (eventStats && event)
+    const dateRangeLabel = (eventStats && event)
         ? `${formatDateWithLocale(eventStats.start_date, 'chartDate', event?.timezone)} - ${formatDateWithLocale(eventStats.end_date, 'chartDate', event?.timezone)}`
         : '';
 
@@ -248,12 +255,29 @@ export const EventDashboard = () => {
                     </Card>
                 )}
 
+                <div className={classes.dateRangeSelector}>
+                    <SegmentedControl
+                        value={effectiveDateRange}
+                        onChange={(value) => {
+                            setDateRange(value);
+                            setHasUserSelected(true);
+                        }}
+                        data={[
+                            {label: t`Week`, value: 'week'},
+                            {label: t`Month`, value: 'month'},
+                            {label: t`Quarter`, value: 'quarter'},
+                            {label: t`Event`, value: 'event'},
+                        ]}
+                        size="sm"
+                    />
+                </div>
+
                 <Card className={classes.chartCard}>
                     <div className={classes.chartCardTitle}>
                         <h2>{t`Product Sales`}</h2>
                         <div className={classes.dateRange}>
                         <span>
-                            {dateRange}
+                            {dateRangeLabel}
                         </span>
                         </div>
                     </div>
@@ -285,7 +309,7 @@ export const EventDashboard = () => {
                         <h2>{t`Revenue`}</h2>
                         <div className={classes.dateRange}>
                         <span>
-                            {dateRange}
+                            {dateRangeLabel}
                         </span>
                         </div>
                     </div>

frontend/src/locales/de.po

@@ -10291,3 +10291,15 @@ msgstr "Postleitzahl"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Postleitzahl"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Woche"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Monat"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Quartal"

frontend/src/locales/en.po

@@ -10295,3 +10295,15 @@ msgstr "Zip or Postal Code"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "ZIP or Postal Code"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Week"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Month"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Quarter"

frontend/src/locales/es.po

@@ -10291,3 +10291,15 @@ msgstr "CP o Código Postal"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Código postal"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Semana"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Mes"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Trimestre"

frontend/src/locales/fr.po

@@ -10291,3 +10291,15 @@ msgstr "Code Postal"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Code postal"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Semaine"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Mois"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Trimestre"

frontend/src/locales/hu.po

@@ -10291,3 +10291,15 @@ msgstr "Irányítószám vagy postai irányítószám"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Irányítószám vagy postai irányítószám"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Hét"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Hónap"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Negyedév"

frontend/src/locales/it.po

@@ -10295,3 +10295,15 @@ msgstr "CAP o Codice Postale"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "CAP o Codice Postale"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Settimana"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Mese"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Trimestre"

frontend/src/locales/nl.po

@@ -10292,3 +10292,15 @@ msgstr "Postcode"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Postcode"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Week"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Maand"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Kwartaal"

frontend/src/locales/pl.po

@@ -10291,3 +10291,15 @@ msgstr "Kod pocztowy"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "Kod pocztowy"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Tydzień"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Miesiąc"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Kwartał"

frontend/src/locales/pt-br.po

@@ -10291,3 +10291,15 @@ msgstr "CEP ou código postal"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "CEP ou Código Postal"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Semana"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Mês"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Trimestre"

frontend/src/locales/pt.po

@@ -10291,3 +10291,15 @@ msgstr "CEP ou Código postal"
 #: src/components/routes/product-widget/CollectInformation/index.tsx:549
 msgid "ZIP or Postal Code"
 msgstr "CEP ou Código Postal"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Week"
+msgstr "Semana"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Month"
+msgstr "Mês"
+
+#: src/components/routes/event/EventDashboard/index.tsx
+msgid "Quarter"
+msgstr "Trimestre"