[dev] [carhartlewis] lewis/comp-join-date-calendar-cs-68 (#2112)

* feat(context): resolve framework IDs to human-readable names in context entries

* refactor(auditor): exclude framework selection and auditor sections from context

* feat(people): enhance JoinDate component with date parsing and dropdown

* refactor(people): simplify JoinDate component by removing date parsing logic

* refactor(people): update label in JoinDate component to 'Join Date'

* fix(people): add button type to Done button in JoinDate component

---------

Co-authored-by: Lewis Carhart <lewis@trycomp.ai>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/people/[employeeId]/components/Fields/JoinDate.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import { Button } from '@comp/ui/button';
-import { Calendar } from '@comp/ui/calendar';
-import { cn } from '@comp/ui/cn';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@comp/ui/form';
 import { Popover, PopoverContent, PopoverTrigger } from '@comp/ui/popover';
+import { Calendar } from '@trycompai/design-system';
 import { format } from 'date-fns';
-import { CalendarIcon } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 import type { Control } from 'react-hook-form';
 import type { EmployeeFormValues } from '../EmployeeDetails';
 
@@ -15,45 +17,60 @@ export const JoinDate = ({
   control: Control<EmployeeFormValues>;
   disabled: boolean;
 }) => {
+  const [open, setOpen] = useState(false);
+
   return (
     <FormField
       control={control}
       name="createdAt"
-      render={({ field }) => (
-        <FormItem className="flex flex-col">
-          <FormLabel className="text-muted-foreground text-xs font-medium uppercase">
-            Join Date
-          </FormLabel>
-          <Popover>
-            <PopoverTrigger asChild disabled={disabled}>
-              <FormControl>
-                <Button
-                  variant={'outline'}
-                  className={cn(
-                    'h-10 pl-3 text-left font-normal', // Use h-10 for consistency
-                    !field.value && 'text-muted-foreground',
-                  )}
+      render={({ field }) => {
+        return (
+          <FormItem className="flex flex-col">
+            <FormControl>
+              <Popover open={disabled ? false : open} onOpenChange={disabled ? undefined : setOpen}>
+                <FormLabel
+                  htmlFor="date-picker-with-dropdowns-desktop"
+                  className="text-muted-foreground text-xs font-medium uppercase"
                 >
-                  {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
-                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={field.value}
-                onSelect={field.onChange}
-                disabled={
-                  (date: Date) => date > new Date() // Explicitly type the date argument
-                }
-                initialFocus
-              />
-            </PopoverContent>
-          </Popover>
-          <FormMessage />
-        </FormItem>
-      )}
+                  Join Date
+                </FormLabel>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    id="date-picker-with-dropdowns-desktop"
+                    className="justify-start px-2.5 font-normal"
+                    disabled={disabled}
+                  >
+                    {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
+                    <ChevronDown className="ml-auto font-light size-4 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={(date) => date && field.onChange(date)}
+                    captionLayout="dropdown"
+                    disabled={(date) => date > new Date()}
+                  />
+                  <div className="flex gap-2 border-t p-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full"
+                      type="button"
+                      onClick={() => setOpen(false)}
+                    >
+                      Done
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        );
+      }}
     />
   );
 };