From 66fafd0d2e7876750e5cbf98f0647eae77a05822 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 6 Dec 2024 12:20:11 +0000
Subject: [PATCH] add time picker

---
 .../app/booking/actions/onSubmitAction.ts     |   2 +
 .../components/BookingCard/BookingEntry.tsx   |   2 +
 .../components/BookingForm/BookingForm.tsx    |   4 +
 .../components/TimeSelect/TimeSelect.tsx      |  44 +++++
 .../booking/components/TimeSelect/times.ts    |  18 +++
 .../app/booking/schemas/newBookingForm.ts     |   1 +
 suncityla/components/ui/select.tsx            | 152 ++++++++++++++++++
 suncityla/package-lock.json                   |  62 +++++++
 suncityla/package.json                        |   1 +
 .../20241206115210_booking_time/migration.sql |   2 +
 suncityla/prisma/schema.prisma                |  59 +++----
 11 files changed, 318 insertions(+), 29 deletions(-)
 create mode 100644 suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
 create mode 100644 suncityla/app/booking/components/TimeSelect/times.ts
 create mode 100644 suncityla/components/ui/select.tsx
 create mode 100644 suncityla/prisma/migrations/20241206115210_booking_time/migration.sql

diff --git a/suncityla/app/booking/actions/onSubmitAction.ts b/suncityla/app/booking/actions/onSubmitAction.ts
index 5f16fc2..517747b 100644
--- a/suncityla/app/booking/actions/onSubmitAction.ts
+++ b/suncityla/app/booking/actions/onSubmitAction.ts
@@ -39,6 +39,7 @@ const onSubmitAction = async (prvState: FormState, data: FormData): Promise<Form
         state: parsed.data.state,
         postalCode: parsed.data['postal-code'],
         bookingDate: parsed.data.bookingDate,
+        bookingTime: parsed.data.bookingTime,
       },
     });
   } else {
@@ -50,6 +51,7 @@ const onSubmitAction = async (prvState: FormState, data: FormData): Promise<Form
         state: parsed.data.state,
         postalCode: parsed.data['postal-code'],
         bookingDate: parsed.data.bookingDate,
+        bookingTime: parsed.data.bookingTime,
       },
     });
   }
diff --git a/suncityla/app/booking/components/BookingCard/BookingEntry.tsx b/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
index 77daa72..ad8168a 100644
--- a/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
+++ b/suncityla/app/booking/components/BookingCard/BookingEntry.tsx
@@ -28,6 +28,7 @@ const BookingEntry = ({ booking }: { booking: Booking }) => {
             <TableHead>Firstname</TableHead>
             <TableHead>Lastname</TableHead>
             <TableHead>Booking date</TableHead>
+            <TableHead>Booking time</TableHead>
             <TableHead>Address line 1</TableHead>
             <TableHead>Address line 2</TableHead>
             <TableHead>State</TableHead>
@@ -40,6 +41,7 @@ const BookingEntry = ({ booking }: { booking: Booking }) => {
             <TableCell>{booking.firstname}</TableCell>
             <TableCell>{booking.lastname}</TableCell>
             <TableCell>{format(new Date(booking.bookingDate), 'yyyy-MM-dd')}</TableCell>
+            <TableCell>{booking.bookingTime}</TableCell>
             <TableCell>{booking.streetAddress}</TableCell>
             <TableCell>{booking.postalCode}</TableCell>
             <TableCell>{booking.state}</TableCell>
diff --git a/suncityla/app/booking/components/BookingForm/BookingForm.tsx b/suncityla/app/booking/components/BookingForm/BookingForm.tsx
index 06a1343..c154264 100644
--- a/suncityla/app/booking/components/BookingForm/BookingForm.tsx
+++ b/suncityla/app/booking/components/BookingForm/BookingForm.tsx
@@ -13,6 +13,8 @@ import LoadingModal from '@/components/modals/Loading';
 import onSubmitAction from '@/app/booking/actions/onSubmitAction';
 import { bookingFormSchema } from '../../schemas/newBookingForm';
 import { Booking } from '@prisma/client';
+import TimeSelect from '../TimeSelect/TimeSelect';
+import availableTimes from '../TimeSelect/times';
 
 export type BookingFormData = z.infer<typeof bookingFormSchema>;
 
@@ -33,6 +35,7 @@ export default function BookingForm({ booking }: { booking?: Booking | null }) {
       'postal-code': booking?.postalCode ?? '',
       state: 'LA',
       bookingDate: booking?.bookingDate.toISOString() ?? new Date().toISOString(),
+      bookingTime: booking?.bookingTime || availableTimes[0].time,
       ...(state.fields ?? {}),
     },
   });
@@ -76,6 +79,7 @@ export default function BookingForm({ booking }: { booking?: Booking | null }) {
           <BookingFormField placeholder="Postcode" name="postal-code" />
           <BookingFormField placeholder="State" name="state" disabled />
           <DateTimePickerForm />
+          <TimeSelect />
           <div className="flex gap-1 justify-end mt-4">
             <Button onClick={handleClearForm} variant="outline">
               Clear
diff --git a/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx b/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
new file mode 100644
index 0000000..0a66f23
--- /dev/null
+++ b/suncityla/app/booking/components/TimeSelect/TimeSelect.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import availableTimes from './times';
+import { FormField, FormItem } from '@/components/ui/form';
+
+export function TimeSelect() {
+  return (
+    <FormField
+      name="bookingTime"
+      render={({ field }) => (
+        <FormItem>
+          <Select {...field} onValueChange={field.onChange}>
+            <SelectTrigger className="w-[180px] bg-white">
+              <SelectValue placeholder="Select a time" />
+            </SelectTrigger>
+            <div className="bg-white">
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Times</SelectLabel>
+                  {availableTimes.map(({ time }) => (
+                    <SelectItem key={time} value={time}>
+                      {time}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </div>
+          </Select>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export default TimeSelect;
diff --git a/suncityla/app/booking/components/TimeSelect/times.ts b/suncityla/app/booking/components/TimeSelect/times.ts
new file mode 100644
index 0000000..213e835
--- /dev/null
+++ b/suncityla/app/booking/components/TimeSelect/times.ts
@@ -0,0 +1,18 @@
+const availableTimes = [
+  { time: '8:00 - 9:00 AM' },
+  { time: '9:00 - 10:00 AM' },
+  { time: '10:00 - 11:00 AM' },
+  { time: '11:00 - 12:00 PM' },
+  { time: '12:00 - 1:00 PM' },
+  { time: '1:00 - 2:00 PM' },
+  { time: '2:00 - 3:00 PM' },
+  { time: '3:00 - 4:00 PM' },
+  { time: '4:00 - 5:00 PM' },
+  { time: '5:00 - 6:00 PM' },
+  { time: '6:00 - 7:00 PM' },
+  { time: '7:00 - 8:00 PM' },
+  { time: '8:00 - 9:00 PM' },
+  { time: '9:00 - 10:00 PM' },
+];
+
+export default availableTimes;
diff --git a/suncityla/app/booking/schemas/newBookingForm.ts b/suncityla/app/booking/schemas/newBookingForm.ts
index e8610a8..2d33740 100644
--- a/suncityla/app/booking/schemas/newBookingForm.ts
+++ b/suncityla/app/booking/schemas/newBookingForm.ts
@@ -31,5 +31,6 @@ export const bookingFormSchema = z.object({
       message: 'Booking date must be in the future.',
     },
   ),
+  bookingTime: z.string(),
   bookingId: z.string().optional(),
 });
diff --git a/suncityla/components/ui/select.tsx b/suncityla/components/ui/select.tsx
new file mode 100644
index 0000000..98d83d2
--- /dev/null
+++ b/suncityla/components/ui/select.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-zinc-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-zinc-800 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/suncityla/package-lock.json b/suncityla/package-lock.json
index b01e9b2..3cd088a 100644
--- a/suncityla/package-lock.json
+++ b/suncityla/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.2",
         "@tanstack/react-table": "^8.20.5",
@@ -2465,6 +2466,11 @@
         "@prisma/debug": "5.22.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -3021,6 +3027,48 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz",
+      "integrity": "sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -3138,6 +3186,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
diff --git a/suncityla/package.json b/suncityla/package.json
index 2333ff4..5d4e01f 100644
--- a/suncityla/package.json
+++ b/suncityla/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@tanstack/react-table": "^8.20.5",
diff --git a/suncityla/prisma/migrations/20241206115210_booking_time/migration.sql b/suncityla/prisma/migrations/20241206115210_booking_time/migration.sql
new file mode 100644
index 0000000..ddd0f41
--- /dev/null
+++ b/suncityla/prisma/migrations/20241206115210_booking_time/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Booking" ADD COLUMN     "bookingTime" TEXT;
diff --git a/suncityla/prisma/schema.prisma b/suncityla/prisma/schema.prisma
index 8b00fc2..0d2f795 100644
--- a/suncityla/prisma/schema.prisma
+++ b/suncityla/prisma/schema.prisma
@@ -1,10 +1,10 @@
 datasource db {
-    provider = "postgresql"
-    url      = env("DATABASE_URL")
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
 }
 
 generator client {
-    provider = "prisma-client-js"
+  provider = "prisma-client-js"
 }
 
 // This is an example schema. You can use it as a starting point to create your own schema.
@@ -17,21 +17,21 @@ generator client {
 // added this to ensure authentication with next-auth and github
 model User {
   id            String          @id @default(cuid())
-  username      String? @unique
+  username      String?         @unique
   password      String?
   name          String?
-  email         String?          @unique
+  email         String?         @unique
   emailVerified DateTime?
   image         String?
   accounts      Account[]
   sessions      Session[]
   // Optional for WebAuthn support
   Authenticator Authenticator[]
- 
+
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
- 
+
 model Account {
   userId            String
   type              String
@@ -44,33 +44,33 @@ model Account {
   scope             String?
   id_token          String?
   session_state     String?
- 
+
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
- 
+
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
- 
+
   @@id([provider, providerAccountId])
 }
- 
+
 model Session {
   sessionToken String   @unique
   userId       String
   expires      DateTime
   user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
- 
+
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
- 
+
 model VerificationToken {
   identifier String
   token      String
   expires    DateTime
- 
+
   @@id([identifier, token])
 }
- 
+
 // Optional for WebAuthn support
 model Authenticator {
   credentialID         String  @unique
@@ -81,26 +81,27 @@ model Authenticator {
   credentialDeviceType String
   credentialBackedUp   Boolean
   transports           String?
- 
+
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
- 
+
   @@id([userId, credentialID])
 }
 
 model Booking {
-    id            String        @id @unique @default(uuid())
-    firstname     String
-    lastname      String
-    streetAddress String
-    postalCode    String
-    state         String
-    bookingDate   DateTime
-    status        BookingStatus @default(PENDING)
+  id            String        @id @unique @default(uuid())
+  firstname     String
+  lastname      String
+  streetAddress String
+  postalCode    String
+  state         String
+  bookingDate   DateTime
+  bookingTime   String?
+  status        BookingStatus @default(PENDING)
 }
 
 enum BookingStatus {
-    PENDING
-    CONFIRMED
-    CANCELLED
-    VISITED
+  PENDING
+  CONFIRMED
+  CANCELLED
+  VISITED
 }