cant remember

package.json

@@ -21,6 +21,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -49,6 +50,7 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -104,6 +107,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.9(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))
+      vaul:
+        specifier: ^0.9.1
+        version: 0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -3101,6 +3107,12 @@ packages:
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
+  vaul@0.9.1:
+    resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -6116,6 +6128,15 @@ snapshots:
 
   v8-compile-cache-lib@3.0.1: {}
 
+  vaul@0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4

src/components/billtracker/BillTrackerCalendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 import * as React from "react"
 import { Calendar } from "~/components/ui/BillTrackerCalendar"
-import { Button } from "~/components/ui/button"
+import CreateBillForm from "~/components/billtracker/CreateBillForm"
 
 export default function BillTrackerCalendar() {
   const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined)
@@ -39,7 +39,7 @@ export default function BillTrackerCalendar() {
   }, [])
 
   return (
-    <div className="m-auto p-2 relative" ref={calendarRef}>
+    <div className="m-auto p-2 relative mt-10" ref={calendarRef}>
       <Calendar
         mode="single"
         selected={selectedDate}
@@ -49,21 +49,12 @@ export default function BillTrackerCalendar() {
       {isOpen && selectedDate && (
         <div 
           ref={popoverRef}
-          className="absolute top-full left-1/2 transform -translate-x-1/2 border rounded-lg shadow-lg px-4 pb-4 w-80"
+          className="absolute top-full left-1/2 transform -translate-x-1/2
+            border rounded-lg shadow-lg px-4 pb-4 w-80"
         >
           <div className="grid gap-4">
             <div className="space-y-2">
-              <div className="flex flex-row w-full">
+              < CreateBillForm date={selectedDate} setIsOpen={setIsOpen} />
-                <h3 className="font-medium leading-none text-center mx-auto mt-2 py-2 md:text-xl">
-                  {selectedDate.toDateString()}
-                </h3>
-                <button className="justify-self-end ml-auto bg-none text-primary text-m md:text-xl"
-                  onClick={() => setIsOpen(false)}
-                >
-                  x
-                </button>
-              </div>
-              <p>Add your events or bills due here.</p>
             </div>
           </div>
         </div>

src/components/billtracker/CreateBillForm.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+type CreateBillFormProps = {
+  date: Date;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// Create Bill Form. Get date from calendar
+export default function CreateBillForm({date, setIsOpen}: CreateBillFormProps) {
+  return (
+    <div>
+      <div className="flex flex-row w-full">
+        <h3 className="font-medium leading-none
+          text-center mx-auto mt-2 py-2 md:text-xl">
+          {date.toDateString()}
+        </h3>
+        <button className="justify-self-end ml-auto bg-none
+          text-primary text-m md:text-xl"
+          onClick={() => setIsOpen(false)}
+        >
+          x
+        </button>
+      </div>
+      <h1>Create Bill</h1>
+    </div>
+  );
+}

src/components/home/Hero.tsx

@@ -1,5 +1,6 @@
 import { Outfit as FontSans } from "next/font/google";
 import { cn } from "~/lib/utils"
+import Link from "next/link"
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -8,6 +9,7 @@ const fontSans = FontSans({
 
 export default function Hero() {
   return (
+    <Link href="/">
       <div className="flex flex-col justify-start items-start">
         <h1 className={cn("text-4xl md:text-5xl lg:text-6xl font-bold text-center font-sans antialiased", 
           fontSans.variable)}
@@ -20,5 +22,6 @@ export default function Hero() {
           PORTAL
         </h1>
       </div>
+    </Link>
   );
 };

src/components/home/NavBar.tsx

@@ -17,11 +17,6 @@ export default function Nav_Bar() {
       "py-6 text-lg md:text-xl lg:text-2xl font-semibold font-sans antialiased", fontSans.variable)}
     >
       <Card className="md:p-4">
-        <CardContent className="py-4">
-          <Link href="/">
-            Dashboard
-          </Link>
-        </CardContent>
         <CardContent className="py-4">
           <Link href="/">
             Make Payment

src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "~/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}