Frontend v0.dev setup

frontend/.eslintrc.json

@@ -25,7 +25,8 @@
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module",
-    "project": "./frontend/tsconfig.json"
+    "project": ["./tsconfig.json", "./tsconfig.node.json"],
+    "tsconfigRootDir": "./"
   },
   "plugins": ["react", "prettier"],
   "rules": {

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/package.json

@@ -4,34 +4,79 @@
   "private": true,
   "dependencies": {
     "@date-io/date-fns": "2.16.0",
+    "@daypilot/daypilot-lite-react": "^4.2.1",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
     "@headlessui/react": "1.7.4",
     "@headlessui/tailwindcss": "^0.1.3",
     "@hello-pangea/dnd": "16.2.0",
     "@heroicons/react": "2.0.13",
+    "@hookform/resolvers": "^5.1.0",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.129",
     "@mui/material": "5.13.0",
     "@mui/system": "5.13.2",
     "@mui/x-date-pickers": "6.7.0",
-    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
     "@stitches/react": "1.2.8",
+    "@tailwindcss/vite": "^4.1.8",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "bezier-easing": "2.1.0",
-    "date-fns": "2.30.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "2.29.3",
+    "embla-carousel-react": "^8.6.0",
     "http-proxy-middleware": "2.0.6",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.513.0",
     "moment": "2.29.4",
+    "next-themes": "^0.4.6",
     "notistack": "3.0.1",
     "react": "18.2.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
+    "react-hook-form": "^7.57.0",
     "react-hot-toast": "2.4.1",
+    "react-resizable-panels": "^3.0.2",
     "react-router-dom": "6.12.1",
+    "recharts": "^2.15.3",
+    "sonner": "^2.0.5",
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss": "3.3.2",
     "typescript": "5.1.3",
-    "web-vitals": "3.3.2"
+    "vaul": "^1.1.2",
+    "web-vitals": "3.3.2",
+    "zod": "^3.25.56"
   },
   "scripts": {
     "start": "ESLINT_NO_DEV_ERRORS='true' vite",
@@ -86,8 +131,8 @@
     "husky": "8.0.2",
     "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "0.6.4",
-    "tailwindcss": "3.3.2",
     "tailwindcss-gradient": "1.0.1",
+    "tw-animate-css": "^1.3.4",
     "twin.macro": "3.3.1",
     "vite": "4.3.5",
     "vite-tsconfig-paths": "4.2.0"
@@ -107,5 +152,6 @@
       "prettier --write",
       "git add"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

frontend/src/components/QuestionComponents/Dropdown/index.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import tw from 'twin.macro';
+
+interface DropdownOption {
+  id: string | number;
+  label: string;
+}
+
+interface DropdownProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: DropdownOption[];
+  required?: boolean;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  onSubmit?: (questionId: number, value: string | number) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  width?: string;
+  height?: string;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue,
+  onChange,
+  onSubmit,
+  disabled = false,
+  width = "max-w-4xl",
+  height = "",
+  placeholder = "Select an option",
+}) => {
+  const [value, setValue] = useState<string | number | undefined>(defaultValue);
+
+  const handleSelect = (selectedValue: string) => {
+    // Convert back to number if the original option id was a number
+    const originalOption = options.find(opt => opt.id.toString() === selectedValue);
+    const optionId = originalOption ? originalOption.id : selectedValue;
+
+    setValue(optionId);
+
+    if (onChange) onChange(optionId);
+    if (onSubmit) onSubmit(id, optionId);
+  };
+
+  return (
+    <div tw="mb-6 w-full" css={width ? tw`${width}` : undefined}>
+      <div className="flex items-center mb-2">
+        <Label className="text-lg font-medium">{question}</Label>
+        {required && <span className="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p className="mb-4 text-sm text-muted-foreground">{description}</p>
+      )}
+
+      <Select
+        value={value?.toString()}
+        onValueChange={handleSelect}
+        disabled={disabled}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={option.id}
+              value={option.id.toString()}
+              style={{
+                '--hover-bg': 'rgb(239 246 255)',
+                '--hover-text': 'rgb(30 58 138)',
+              } as React.CSSProperties}
+              className="hover:bg-[var(--hover-bg)] hover:text-[var(--hover-text)] data-[highlighted]:bg-[var(--hover-bg)] data-[highlighted]:text-[var(--hover-text)]"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export default Dropdown;

frontend/src/components/QuestionComponents/MultiChoice/index.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+
+interface Option {
+  id: string | number;
+  label: string;
+}
+
+interface MultiChoiceProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  onSubmit?: (questionId: number, value: string | number) => void;
+  disabled?: boolean;
+}
+
+const MultiChoice: React.FC<MultiChoiceProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue,
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [selectedOption, setSelectedOption] = useState<string | number | undefined>(defaultValue);
+
+  const handleChange = (value: string) => {
+    const optionId = isNaN(Number(value)) ? value : Number(value);
+    setSelectedOption(optionId);
+
+    if (onChange) onChange(optionId);
+    if (onSubmit) onSubmit(id, optionId);
+  };
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center mb-2">
+        <Label className="text-lg font-medium">{question}</Label>
+        {required && <span className="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p className="mb-4 text-sm text-muted-foreground">{description}</p>
+      )}
+
+      <RadioGroup
+        value={selectedOption?.toString()}
+        onValueChange={handleChange}
+        disabled={disabled}
+      >
+        {options.map((option) => (
+          <div key={option.id} className="flex items-center space-x-2">
+            <RadioGroupItem
+              value={option.id.toString()}
+              id={`option-${id}-${option.id}`}
+            />
+            <Label
+              htmlFor={`option-${id}-${option.id}`}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default MultiChoice;

frontend/src/components/QuestionComponents/MultiSelect/index.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface Option {
+  id: string | number;
+  label: string;
+}
+
+interface MultiSelectProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: Array<string | number>;
+  onChange?: (value: Array<string | number>) => void;
+  onSubmit?: (questionId: number, value: Array<string | number>) => void;
+  disabled?: boolean;
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue = [],
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState<Array<string | number>>(defaultValue);
+
+  const handleChange = (optionId: string | number, checked: boolean) => {
+    let newSelectedOptions: Array<string | number> = [];
+
+    if (checked) {
+      newSelectedOptions = [...selectedOptions, optionId];
+    } else {
+      newSelectedOptions = selectedOptions.filter(id => id !== optionId);
+    }
+
+    setSelectedOptions(newSelectedOptions);
+
+    if (onChange) onChange(newSelectedOptions);
+    if (onSubmit) onSubmit(id, newSelectedOptions);
+  };
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center mb-2">
+        <Label className="text-lg font-medium">{question}</Label>
+        {required && <span className="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p className="mb-4 text-sm text-muted-foreground">{description}</p>
+      )}
+
+      <div className="space-y-3">
+        {options.map((option) => (
+          <div key={option.id} className="flex items-center space-x-2">
+            <Checkbox
+              id={`option-${id}-${option.id}`}
+              checked={selectedOptions.includes(option.id)}
+              onCheckedChange={(checked) => handleChange(option.id, !!checked)}
+              disabled={disabled}
+            />
+            <Label
+              htmlFor={`option-${id}-${option.id}`}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelect;