-
-
Form Questions
-
-
-
+
-
- Add Question here
-
+
+
+
);
diff --git a/apps/app-portal/src/components/admin/QuestionRow.tsx b/apps/app-portal/src/components/admin/QuestionRow.tsx
new file mode 100644
index 00000000..6b4b9db2
--- /dev/null
+++ b/apps/app-portal/src/components/admin/QuestionRow.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import type { Question } from "@/lib/application/types";
+
+export default function QuestionRow({ question }: { question: Question }) {
+ const { attributes, listeners, setNodeRef, transform, transition } =
+ useSortable({ id: question.id });
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ };
+
+ return (
+
+
+ ☰
+
+
+
+
{question.label}
+
+ {question.type} {question.required ? "• required" : ""}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/app-portal/src/components/admin/QuestionsList.tsx b/apps/app-portal/src/components/admin/QuestionsList.tsx
new file mode 100644
index 00000000..9479b697
--- /dev/null
+++ b/apps/app-portal/src/components/admin/QuestionsList.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import React from "react";
+
+import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
+
+import {
+ SortableContext,
+ arrayMove,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+
+import QuestionRow from "./QuestionRow";
+
+import type { FormSection, QuestionType } from "@/lib/application/types";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select";
+
+type NewQuestion = {
+ id: string;
+ label: string;
+ type: QuestionType;
+ required: boolean;
+};
+
+export default function QuestionsList({
+ sections,
+ setSections,
+}: {
+ sections: FormSection[];
+ setSections: React.Dispatch
>;
+}) {
+ const [open, setOpen] = React.useState(false);
+ const [activeSectionId, setActiveSectionId] = React.useState(
+ null,
+ );
+
+ const [form, setForm] = React.useState({
+ id: "",
+ label: "",
+ type: "short_text",
+ required: false,
+ });
+
+ function handleDragEnd(event: DragEndEvent, sectionId: string) {
+ const { active, over } = event;
+
+ if (!over || active.id === over.id) return;
+
+ setSections((prev) =>
+ prev.map((section) => {
+ if (section.id !== sectionId) return section;
+
+ const oldIndex = section.questions.findIndex((q) => q.id === active.id);
+ const newIndex = section.questions.findIndex((q) => q.id === over.id);
+
+ return {
+ ...section,
+ questions: arrayMove(section.questions, oldIndex, newIndex),
+ };
+ }),
+ );
+ }
+
+ function openDialog(sectionId: string) {
+ setActiveSectionId(sectionId);
+ setForm({
+ id: "",
+ label: "",
+ type: "short_text",
+ required: false,
+ });
+ setOpen(true);
+ }
+
+ function handleAddQuestion() {
+ if (!activeSectionId) return;
+
+ const newQuestion = {
+ id:
+ form.id ||
+ globalThis.crypto?.randomUUID?.() ||
+ `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+ label: form.label,
+ type: form.type,
+ required: form.required,
+ };
+
+ setSections((prev) =>
+ prev.map((section) =>
+ section.id === activeSectionId
+ ? {
+ ...section,
+ questions: [...section.questions, newQuestion],
+ }
+ : section,
+ ),
+ );
+
+ setOpen(false);
+ }
+
+ return (
+
+ {sections.map((section) => (
+
+
+
{section.title}
+
+
+
+
+
handleDragEnd(event, section.id)}
+ >
+ q.id)}
+ strategy={verticalListSortingStrategy}
+ >
+
+ {section.questions.map((q) => (
+
+ ))}
+
+
+
+
+ ))}
+
+
+
-
Show Decision
-
+
+
+
+
);
}
diff --git a/apps/app-portal/src/components/ui/calendar.tsx b/apps/app-portal/src/components/ui/calendar.tsx
new file mode 100644
index 00000000..a395a4ee
--- /dev/null
+++ b/apps/app-portal/src/components/ui/calendar.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable react/prop-types */
+"use client";
+
+import * as React from "react";
+import {
+ DayPicker,
+ getDefaultClassNames,
+ type DayButton,
+ type Locale,
+} from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronDownIcon,
+} from "lucide-react";
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = "label",
+ buttonVariant = "ghost",
+ locale,
+ formatters,
+ components,
+ ...props
+}: React.ComponentProps
& {
+ buttonVariant?: React.ComponentProps["variant"];
+}) {
+ const defaultClassNames = getDefaultClassNames();
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className,
+ )}
+ captionLayout={captionLayout}
+ locale={locale}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString(locale?.code, { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn(
+ "relative flex flex-col gap-4 md:flex-row",
+ defaultClassNames.months,
+ ),
+ month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+ nav: cn(
+ "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+ defaultClassNames.nav,
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+ defaultClassNames.button_previous,
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+ defaultClassNames.button_next,
+ ),
+ month_caption: cn(
+ "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+ defaultClassNames.month_caption,
+ ),
+ dropdowns: cn(
+ "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+ defaultClassNames.dropdowns,
+ ),
+ dropdown_root: cn(
+ "relative rounded-(--cell-radius)",
+ defaultClassNames.dropdown_root,
+ ),
+ dropdown: cn(
+ "absolute inset-0 bg-popover opacity-0",
+ defaultClassNames.dropdown,
+ ),
+ caption_label: cn(
+ "font-medium select-none",
+ captionLayout === "label"
+ ? "text-sm"
+ : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+ defaultClassNames.caption_label,
+ ),
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+ defaultClassNames.weekday,
+ ),
+ week: cn("mt-2 flex w-full", defaultClassNames.week),
+ week_number_header: cn(
+ "w-(--cell-size) select-none",
+ defaultClassNames.week_number_header,
+ ),
+ week_number: cn(
+ "text-[0.8rem] text-muted-foreground select-none",
+ defaultClassNames.week_number,
+ ),
+ day: cn(
+ "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+ props.showWeekNumber
+ ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+ : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+ defaultClassNames.day,
+ ),
+ range_start: cn(
+ "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+ defaultClassNames.range_start,
+ ),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn(
+ "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+ defaultClassNames.range_end,
+ ),
+ today: cn(
+ "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+ defaultClassNames.today,
+ ),
+ outside: cn(
+ "text-muted-foreground aria-selected:text-muted-foreground",
+ defaultClassNames.outside,
+ ),
+ disabled: cn(
+ "text-muted-foreground opacity-50",
+ defaultClassNames.disabled,
+ ),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ );
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return (
+
+ );
+ }
+
+ if (orientation === "right") {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ },
+ DayButton: ({ ...props }) => (
+
+ ),
+ WeekNumber: ({ children, ...props }) => {
+ return (
+
+
+ {children}
+
+ |
+ );
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ );
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ locale,
+ ...props
+}: React.ComponentProps & { locale?: Partial }) {
+ const defaultClassNames = getDefaultClassNames();
+
+ const ref = React.useRef(null);
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus();
+ }, [modifiers.focused]);
+
+ return (
+