UI overhaul

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@smile-cdr/fhirts": "^2.0.7",
     "@tanstack/react-query": "^4.33.0",
     "@types/node": "20.5.7",
@@ -52,6 +53,7 @@
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2",
+    "vaul": "^0.9.1",
     "zod": "^3.22.2"
   },
   "devDependencies": {

src/app/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 import Navbar from "@/components/navbar";
-import NextTopLoader from 'nextjs-toploader';
+import { TooltipProvider } from "@/components/ui/tooltip";
+import NextTopLoader from "nextjs-toploader";
 
 export default function DashboardLayout({
   children,
@@ -10,7 +11,7 @@ export default function DashboardLayout({
     <main>
       <Navbar />
       <NextTopLoader />
-      {children}
+      <TooltipProvider>{children}</TooltipProvider>
     </main>
   );
 }

src/app/(dashboard)/patients/page.tsx

@@ -10,15 +10,13 @@ export default async function Page({
 }) {
   const data = await fetchRequiredData();
   return (
-    <main className="container mt-6">
-      <FilterToolbar
-        action={fetchData}
-        filters={patientFilters}
-        defaultItem={[]}
-        prefillData={data}
-      >
-        <Content locationMap={data.locationMap} />
-      </FilterToolbar>
-    </main>
+    <FilterToolbar
+      action={fetchData}
+      filters={patientFilters}
+      defaultItem={[]}
+      prefillData={data}
+    >
+      <Content locationMap={data.locationMap} />
+    </FilterToolbar>
   );
 }

src/components/filters/toolbar.tsx

@@ -5,14 +5,63 @@ import { DataFacetedFilter } from "./input-filter";
 import { Filter, FilterFormData, patientFilters } from "@/model/filters";
 import { Separator } from "@/components/ui/separator";
 import FilterCard from "./filter-card";
-import { useForm, FormProvider, Control, useFieldArray } from "react-hook-form";
-import { Button } from "@/components/ui/button";
+import {
+  useForm,
+  FormProvider,
+  Control,
+  useFieldArray,
+  UseFormReturn,
+} from "react-hook-form";
 import { GenericContextProvider, useGenericContext } from "./context";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "../ui/collapsible";
+import {
+  Bird,
+  Book,
+  Bot,
+  Code2,
+  CornerDownLeft,
+  LifeBuoy,
+  Mic,
+  Paperclip,
+  Rabbit,
+  Settings,
+  Settings2,
+  Share,
+  Square as SquareTerminal,
+  User as SquareUser,
+  Triangle,
+  Turtle,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import { cn } from "@/lib/utils";
 
@@ -24,19 +73,25 @@ type Props<T> = {
   children?: React.ReactElement;
 };
 
+type FilterToolbarContainerProps<T> = {
+  methods: UseFormReturn<FilterFormData, any, undefined>;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  filters: Filter[];
+  prefillData?: any;
+  onSubmit: (data: FilterFormData) => void;
+};
+
 const FilterToolbar = <T extends unknown>(props: Props<T>) => {
   return (
     <GenericContextProvider initialData={props.defaultItem}>
-      <FilterToolbarContainer {...props} />
+      <FilterToolbarWRapper {...props} />
     </GenericContextProvider>
   );
 };
-
-const FilterToolbarContainer = <T extends unknown>({
-  action,
-  filters,
+const FilterToolbarWRapper = <T extends unknown>({
   children,
-  prefillData,
+  ...props
 }: Props<T>) => {
   const methods = useForm<FilterFormData>({
     defaultValues: {
@@ -52,48 +107,112 @@ const FilterToolbarContainer = <T extends unknown>({
     setLoading(true);
     const form = new FormData();
     form.append("data", JSON.stringify(data));
-    const responses = await action(form);
+    const responses = await props.action(form);
     setData(responses);
     setIsOpen(false);
     setLoading(false);
   };
-
   return (
-    <div>
-      <FormProvider {...methods}>
-        <div className={cn("w-full space-y-2 collapse", isOpen ? "collapse-open" : "collapse-close")}>
-          <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">Search filters</h4>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setIsOpen(!isOpen);
-              }}
-            >
-              <CaretSortIcon className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </div>
-          <div className="collapse-content">
-            <form onSubmit={methods.handleSubmit(onSubmit)}>
-              <FormContainer
-                control={methods.control}
-                filters={filters}
-                prefillData={prefillData}
-              />
-            </form>
-          </div>
+    <div className="grid h-screen w-full md:pl-[20%]">
+      <aside className="inset-y fixed  left-0 z-20 hidden md:flex h-full w-1/5 flex-col border-r">
+        <div className="border-b p-2">
+          <Button variant="outline" size="icon" aria-label="Home">
+            <Triangle className="size-5 fill-foreground" />
+          </Button>
         </div>
-      </FormProvider>
-      <div className="flex flex-col gap-2 my-2">
-        {loading && (
-          <div className="flex flex-col gap-4 w-full p-8">
-            <p>Fetching...</p>
-            <progress className="progress w-full"></progress>
+        <nav className="grid gap-1 p-2">
+          <div className="grid w-full items-start gap-6">
+            <FormProvider {...methods}>
+              <FilterToolbarContainer
+                methods={methods}
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+                filters={props.filters}
+                prefillData={props.prefillData}
+                onSubmit={onSubmit}
+              />{" "}
+            </FormProvider>
+          </div>
+        </nav>
+      </aside>
+      <div className="flex flex-col">
+        <header className="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
+          <h1 className="text-xl font-semibold">Playground</h1>
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button variant="ghost" size="icon" className="md:hidden">
+                <Settings className="size-4" />
+                <span className="sr-only">Settings</span>
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent className="max-h-[80vh]">
+              <DrawerHeader>
+                <DrawerTitle>Configuration</DrawerTitle>
+                <DrawerDescription>
+                  Configure the settings for the model and messages.
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
+                <FormProvider {...methods}>
+                  <FilterToolbarContainer
+                    methods={methods}
+                    isOpen={isOpen}
+                    setIsOpen={setIsOpen}
+                    filters={props.filters}
+                    prefillData={props.prefillData}
+                    onSubmit={onSubmit}
+                  />
+                </FormProvider>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </header>
+        <main className="container">
+          <div className="relative flex h-full w-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+            {children}
           </div>
-        )}
-        {children}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+const FilterToolbarContainer = <T extends unknown>({
+  methods,
+  isOpen,
+  setIsOpen,
+  filters,
+  prefillData,
+  onSubmit,
+}: FilterToolbarContainerProps<T>) => {
+  return (
+    <div
+      className={cn(
+        "w-full space-y-2 collapse",
+        isOpen ? "collapse-open" : "collapse-close"
+      )}
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">Search filters</h4>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+        >
+          <CaretSortIcon className="h-4 w-4" />
+          <span className="sr-only">Toggle</span>
+        </Button>
+      </div>
+      <div className="collapse-content">
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <FormContainer
+            control={methods.control}
+            filters={filters}
+            prefillData={prefillData}
+          />
+        </form>
       </div>
     </div>
   );
@@ -130,7 +249,7 @@ const FormContainer = ({
       <Separator />
       {fields.map((filter, index) => {
         const data = filters.find((f) => f.id == filter.filterId);
-        console.log(JSON.stringify(filter));
+        console.log(JSON.stringify(filter), JSON.stringify(data ?? {}));
 
         return (
           <FilterCard