feat: implement booking feature with service and time slot selection

2025-09-03 10:04:00 +03:00
parent a587b222b9
commit f7514c698e
11 changed files with 306 additions and 14 deletions
--- a/app/home/(user)/_components/booking/time-slots.tsx
+++ b/app/home/(user)/_components/booking/time-slots.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { format } from 'date-fns';
+
+import { Button } from '@kit/ui/shadcn/button';
+import { Card } from '@kit/ui/shadcn/card';
+import { Trans } from '@kit/ui/trans';
+
+import { AvailableAppointmentsResponse } from '~/lib/types/connected-online';
+
+const dummyData: AvailableAppointmentsResponse['Data']['T_Booking'] = [
+  {
+    ServiceID: 1,
+    StartTime: new Date('2024-10-10T10:00:00Z'),
+    EndTime: new Date('2024-10-10T11:00:00Z'),
+    HKServiceID: 0,
+    ClinicID: '',
+    LocationID: 0,
+    UserID: 0,
+    SyncUserID: 0,
+    PayorCode: '',
+  },
+  {
+    ServiceID: 1,
+    StartTime: new Date('2024-10-10T11:00:00Z'),
+    EndTime: new Date('2024-10-10T12:00:00Z'),
+    HKServiceID: 0,
+    ClinicID: '',
+    LocationID: 0,
+    UserID: 0,
+    SyncUserID: 0,
+    PayorCode: '',
+  },
+  {
+    ServiceID: 2,
+    StartTime: new Date('2024-10-10T12:00:00Z'),
+    EndTime: new Date('2024-10-10T13:00:00Z'),
+    HKServiceID: 0,
+    ClinicID: '',
+    LocationID: 0,
+    UserID: 0,
+    SyncUserID: 0,
+    PayorCode: '',
+  },
+];
+
+const TimeSlots = () => {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {dummyData.map((data) => (
+        <Card
+          className="flex justify-between p-4"
+          key={data.ServiceID + '-time-slot'}
+        >
+          <div>
+            <span>{format(data.StartTime.toString(), 'HH:mm')}</span>
+            <div className="flex">
+              <h5 className="after:mx-2 after:content-['·']">
+                Dr. Jüri Mardikas
+              </h5>
+              <span className="after:mx-2 after:content-['·']">Kardioloog</span>
+              <span>Tervisekassa aeg</span>
+            </div>
+            <div className="flex text-xs">
+              <span className="after:mx-2 after:content-['·']">
+                Ülemiste Tervisemaja 2
+              </span>
+              <span className="after:mx-2 after:content-['·']">
+                Ülemiste füsioteraapiakliinik
+              </span>
+              <span className="after:mx-2 after:content-['·']">
+                Sepapaja 2/1
+              </span>
+              <span>Tallinn</span>
+            </div>
+          </div>
+          <div className="flex-end flex items-center justify-center gap-2">
+            <span className="text-sm font-semibold">
+              {formatCurrency({
+                currencyCode: 'EUR',
+                locale: 'et-EE',
+                value: 20,
+              })}
+            </span>
+            <Button>
+              <Trans i18nKey="Broneeri" />
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default TimeSlots;