minor changes

drizzle/0002_smooth_lorna_dane.sql

@@ -0,0 +1 @@
+ALTER TABLE "expenses" ADD COLUMN "date" date NOT NULL;

drizzle/meta/0002_snapshot.json

@@ -0,0 +1,85 @@
+{
+  "id": "7cee59cc-c4be-42c9-9c6f-4e6697f49794",
+  "prevId": "fcfb6571-fb90-404c-9e3b-259fc5781c22",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.expenses": {
+      "name": "expenses",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "amount": {
+          "name": "amount",
+          "type": "numeric(12, 2)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "date": {
+          "name": "date",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "name_idx": {
+          "name": "name_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

drizzle/meta/_journal.json

@@ -15,6 +15,13 @@
       "when": 1734443913822,
       "tag": "0001_bitter_boomerang",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1734469972730,
+      "tag": "0002_smooth_lorna_dane",
+      "breakpoints": true
     }
   ]
 }

frontend/package.json

@@ -11,16 +11,19 @@
   },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@tanstack/react-form": "^0.39.0",
     "@tanstack/react-query": "^5.62.1",
     "@tanstack/react-router": "^1.85.0",
     "@tanstack/zod-form-adapter": "^0.39.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "i": "^0.3.7",
     "lucide-react": "^0.461.0",
     "react": "^18.3.1",
+    "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

frontend/src/lib/api.ts

@@ -7,16 +7,25 @@ const client = hc<ApiRoutes>("/")
 export const api = client.api
 
 async function getCurrentUser() {
-    const result = await api.me.$get()
-    if (!result.ok) {
-      throw new Error('error')
-    }
-    const data = await result.json()
-    return data
+  const result = await api.me.$get()
+  if (!result.ok) {
+    throw new Error("error")
   }
+  const data = await result.json()
+  return data
+}
 
 export const userQueryOptions = queryOptions({
-    queryKey: ['getCurrentUser'],
-    queryFn: getCurrentUser,
-    staleTime: Infinity
-  })
+  queryKey: ["getCurrentUser"],
+  queryFn: getCurrentUser,
+  staleTime: Infinity,
+})
+
+export async function getTotalSpent() {
+  const result = await api.expenses["getTotalSpent"].$get()
+  if (!result.ok) {
+    throw new Error("error")
+  }
+  const data = await result.json()
+  return data
+}

frontend/src/routes/__root.tsx

@@ -4,6 +4,8 @@ import {
   Outlet,
   createRootRouteWithContext,
 } from "@tanstack/react-router"
+import { Switch } from "@/components/ui/switch"
+import { useState } from "react"
 
 interface MyRouterContext {
   queryClient: QueryClient
@@ -14,23 +16,36 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 })
 
 function NavBar() {
+  const [isLight, setIsLight] = useState(false)
+  const toggleTheme = () => {
+    document.documentElement.classList.toggle("dark")
+    setIsLight(!isLight)
+  }
+
   return (
-    <div className="flex py-2 gap-2  max-w-xl m-auto">
-      <Link to="/" className="[&.active]:font-bold">
-        Home
-      </Link>
-      <Link to="/about" className="[&.active]:font-bold">
-        About
-      </Link>
-      <Link to="/expenses" className="[&.active]:font-bold">
-        Expenses
-      </Link>
-      <Link to="/create-expense" className="[&.active]:font-bold">
-        Create
-      </Link>
-      <Link to="/profile" className="[&.active]:font-bold">
-        Profile
+    <div className="flex items-center justify-between px-6 py-3 mt-2 border rounded-xl backdrop-blur-sm max-w-xl m-auto ">
+      <Link to="/" className="text-xl font-bold">
+        <h1>Expenses App</h1>
       </Link>
+      <div className="flex gap-2">
+        {/* <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link> */}
+        <Link to="/expenses" className="[&.active]:font-bold">
+          Expenses
+        </Link>
+        <Link to="/create-expense" className="[&.active]:font-bold">
+          Create
+        </Link>
+        <Link to="/profile" className="[&.active]:font-bold">
+          Profile
+        </Link>
+        <Switch
+          className="mt-0.5"
+          checked={isLight}
+          onCheckedChange={toggleTheme}
+        />
+      </div>
     </div>
   )
 }
@@ -39,7 +54,6 @@ function Root() {
   return (
     <>
       <NavBar />
-      <hr />
       <Outlet />
     </>
   )

frontend/src/routes/_authenticated.tsx

@@ -4,7 +4,7 @@ import { createFileRoute, Outlet } from "@tanstack/react-router"
 
 const Login = () => {
   return (
-    <div className="flex flex-col items-start gap-4 max-w-xl m-auto py-6">
+    <div className="flex flex-col items-center gap-4 max-w-xl m-auto py-6">
       <h2 className="text-2xl">You have to login</h2>
       <Button className="min-w-6">
         <a href="/api/login">Login</a>