+
+
+ );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/MobileNav.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/MobileNav.tsx
new file mode 100644
index 000000000..29f91ad68
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/MobileNav.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { useMetaColor } from "@/hooks/use-meta-color";
+import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import { Link, useNavigate, type LinkProps } from "@tanstack/react-router";
+
+export function MobileNav() {
+ const [open, setOpen] = React.useState(false);
+ const { setMetaColor, metaColor } = useMetaColor();
+
+ const onOpenChange = React.useCallback(
+ (open: boolean) => {
+ setOpen(open);
+ setMetaColor(open ? "#09090b" : metaColor);
+ },
+ [setMetaColor, metaColor]
+ );
+
+ return (
+
+
+
+
+ Home
+
+
+ Forms
+
+
+ Guides
+
+
+ Notifications
+
+
+ About us
+
+
+ {citizenReportForm.name[selectedLanguage]}
+
+
+
+ Language:
+
+
+
+
+
+
+
+
+
+ ⍥
+
+ );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/TailwindIndicator.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/TailwindIndicator.tsx
new file mode 100644
index 000000000..7382fdd63
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/TailwindIndicator.tsx
@@ -0,0 +1,19 @@
+import { isProduction } from "@/lib/utils";
+
+export function TailwindIndicator() {
+ if (isProduction) return null;
+
+ return (
+
+
+ );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ThemeProvider.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ThemeProvider.tsx
new file mode 100644
index 000000000..66b874d6d
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ThemeProvider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import { Provider as JotaiProvider } from "jotai";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+export function ThemeProvider({
+ children,
+ ...props
+}: React.ComponentPropsxs
+ sm
+ md
+ lg
+ xl
+ 2xl
+ {children}
+
+
+
+
+ );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/dialog.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..981e999ff
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/dialog.tsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+ ...props
+}: React.ComponentProps
+
+ {({ getRootProps, getInputProps, isDragActive }) => (
+
+ {files?.length ? (
+
+
+ ) : null}
+
+ );
+}
+
+interface FileCardProps {
+ file: File;
+ onRemove: () => void;
+ progress?: number;
+}
+
+function FileCard({ file, progress, onRemove }: FileCardProps) {
+ return (
+
+
+ {isDragActive ? (
+
+ )}
+
+
+ ) : (
+
+
+
+ + Drop the files here +
+
+
+ )}
+
+
+
+
+
+ + Drag {`'n'`} drop files here, or click to select files +
+
+ {files?.map((file, index) => (
+ onRemove(index)}
+ progress={progresses?.[file.name]}
+ />
+ ))}
+
+
+
+ );
+}
+
+function isFileWithPreview(file: File): file is File & { preview: string } {
+ return "preview" in file && typeof file.preview === "string";
+}
+
+interface FilePreviewProps {
+ file: File & { preview: string };
+}
+
+function FilePreview({ file }: FilePreviewProps) {
+ if (file.type.startsWith("image/")) {
+ return (
+
+ {isFileWithPreview(file) ?
+
+
+
+
+ {progress ? : null}
+ + {file.name} +
++ {formatBytes(file.size)} +
+
+
+
+ + {body} +
+ ); +} + +export { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + useFormField, +}; diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/hover-card.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/hover-card.tsx new file mode 100644 index 000000000..e4204e0d6 --- /dev/null +++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/hover-card.tsx @@ -0,0 +1,42 @@ +import * as React from "react" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" + +import { cn } from "@/lib/utils" + +function HoverCard({ + ...props +}: React.ComponentProps
+ {label && (
+
+ )}
+
+ {helperText && !error && (
+
+ );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/popover.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/popover.tsx
new file mode 100644
index 000000000..6d51b6ced
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/popover.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+ ...props
+}: React.ComponentProps+ {helperText} +
+ )} + {error && ( ++ {error} +
+ )} +
+ {Array.from({ length: scale }, (_, i) => i + 1).map((value) => (
+
+ + {lowerLabel && <> 1 - {lowerLabel}} +
++ {upperLabel && ( + <> + {scale} - {upperLabel} + + )} +
+
+ {children}
+
+
+ {children}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ )
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ {typeof children === "function" ? children({ methods }) : children}
+
+ );
+ };
+
+ return {
+ ...rest,
+ useStepper,
+ StepperProvider: ({
+ variant = "horizontal",
+ labelOrientation = "horizontal",
+ tracking = false,
+ children,
+ className,
+ ...props
+ }) => {
+ return (
+
+ {title}
+ {description}
+
+
+ {title}
+ {description}
+
+
+ {!isLast && (
+
+ )}
+
+ );
+ },
+ StepperTitle,
+ StepperDescription,
+ StepperPanel: ({ children, className, asChild, ...props }) => {
+ const Comp = asChild ? Slot : "div";
+ const { tracking } = useStepperProvider();
+
+ return (
+
+
+ )}
+ {panel}
+
+
+
+ );
+};
+
+//#endregion Circle Indicator
+
+//#region Styles
+
+const listVariants = cva("stepper-navigation-list flex gap-2", {
+ variants: {
+ variant: {
+ horizontal: "flex-row items-center justify-between",
+ vertical: "flex-col",
+ circle: "flex-row items-center justify-between",
+ },
+ },
+});
+
+const classForSeparator = cva(
+ [
+ "bg-muted",
+ "data-[state=completed]:bg-primary data-[disabled]:opacity-50",
+ "transition-all duration-300 ease-in-out",
+ ],
+ {
+ variants: {
+ orientation: {
+ horizontal: "h-0.5 flex-1",
+ vertical: "h-full w-0.5",
+ },
+ labelOrientation: {
+ vertical:
+ "absolute left-[calc(50%+30px)] right-[calc(-50%+20px)] top-5 block shrink-0",
+ },
+ },
+ }
+);
+
+//#endregion Styles
+
+//#region Utils
+
+function scrollIntoStepperPanel(
+ node: HTMLDivElement | null,
+ tracking?: boolean
+) {
+ if (tracking) {
+ node?.scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+}
+
+const useStepChildren = (children: React.ReactNode) => {
+ return React.useMemo(() => extractChildren(children), [children]);
+};
+
+const extractChildren = (children: React.ReactNode) => {
+ const childrenArray = React.Children.toArray(children);
+ const map = new Map
+
+ {currentStep} of {totalSteps}
+
+
+
+
+
+ )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+ return (
+
+ )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+ return (
+
+ )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+ return (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+
+
+ );
+};
+
+const QuestionWithDisplayLogic = ({ question }: { question: BaseQuestion }) => {
+ const { control, unregister } = useFormContext();
+ const shouldDisplay = useShouldDisplayQuestion({ question, control });
+
+ useEffect(() => {
+ const fieldName = `question-${question.id}`;
+ return () => {
+ // unregister field if user changes the value of the parent and the condition stops matching
+ if (shouldDisplay) unregister(fieldName);
+ };
+ }, [shouldDisplay]);
+
+ if (!shouldDisplay) return;
+ return
+
+ {`${question.code} - ${question.text[language]}`}
+
+
+ {question?.helptext?.[language]}
+
+ {isNumberQuestion(question) && (
+