begin working on form

src/components/billtracker/CreateBillDrawer.tsx

@@ -0,0 +1,70 @@
+"use client"
+import {
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "~/components/ui/drawer"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Input } from "~/components/ui/input"
+import { Button } from "~/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "~/components/ui/form"
+
+type CreateBillDrawerProps = {
+  date: Date;
+};
+
+const formSchema = z.object({
+  billType: z.enum(["Rent", "Power", "Internet", "Gas", "Water", "Phone Bill", "Cable",
+    "Security Deposit", "Other"]),
+  billDescription: z.string().optional(),
+  amount: z.number(),
+  recurrence: z.enum(["Monthly", "Bi-weekly", "Weekly", "Annually"]).optional(),
+  includeUserInSplit: z.boolean().optional(),
+  roommates: z.array(z.object({
+    userID: z.string(),
+    includeInSplit: z.boolean(),
+  })).optional(),
+});
+
+export default function CreateBillDrawer({date}: CreateBillDrawerProps) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      billType: "Rent",
+      recurrence: "Monthly",
+      includeUserInSplit: true,
+    },
+  });
+  return (
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle className="text-center md:text-2xl">
+          {date.toDateString()}
+        </DrawerTitle>
+      </DrawerHeader>
+      <div className="flex flex-row w-full mx-auto">
+        <div className="w-1/2 mx-auto text-center">
+          <h3>Test</h3>
+        </div>
+        <div className="w-1/2 mx-auto text-center">
+          <h3>Test</h3>
+        </div>
+      </div>
+      <DrawerFooter>
+        <DrawerClose />
+      </DrawerFooter>
+    </DrawerContent>
+  );
+}

src/components/billtracker/CreateBillForm.tsx

@@ -1,4 +1,10 @@
 import React from "react";
+import {
+  Drawer,
+  DrawerTrigger,
+} from "~/components/ui/drawer"
+import CreateBillDrawer from "~/components/billtracker/CreateBillDrawer"
+import { Button } from "~/components/ui/button"
 
 type CreateBillFormProps = {
   date: Date;
@@ -21,7 +27,14 @@ export default function CreateBillForm({date, setIsOpen}: CreateBillFormProps) {
           x
         </button>
       </div>
-      <h1>Create Bill</h1>
+      <Drawer>
+        <DrawerTrigger className="w-full">
+          <Button variant="outline" size="icon" className="border-none w-full">
+            Create new Bill
+          </Button>
+        </DrawerTrigger>
+        <CreateBillDrawer date={date} />
+      </Drawer>
     </div>
   );
 }

src/server/db/schema.ts

@@ -237,7 +237,6 @@ export const bills = pgTable(
     createdAt: timestamp("createdAt").notNull().defaultNow(),
     dueDate: timestamp("dueDate").notNull(),
     amount: numeric("amount").notNull(),
-    currency: text("currency").notNull().default("USD"),
     recurrence: billRecurrenceEnum("recurrence"),
     attachmentUrl: text("attachmentUrl"),
   }