feat: working on new ui components

src/Den.Client.Web/src/components/views/calendar/calendar-view.tsx

···
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+export type CalendarEvent = {
+  id: string;
+  title: string;
+  date: Date;
+};
+
+export type CalendarProps = {
+  events: CalendarEvent[];
+  onEventClick: (event: CalendarEvent) => void;
+};
+
+export const CalendarView = ({ events, onEventClick }: CalendarProps) => {
+  const [currentDate, setCurrentDate] = useState(new Date())
+
+  const year = currentDate.getFullYear()
+  const month = currentDate.getMonth()
+
+  const firstDayOfMonth = new Date(year, month, 1)
+  const lastDayOfMonth = new Date(year, month + 1, 0)
+  const startingDayOfWeek = firstDayOfMonth.getDay()
+  const daysInMonth = lastDayOfMonth.getDate()
+
+  const previousMonth = () => {
+    setCurrentDate(new Date(year, month - 1, 1))
+  }
+
+  const nextMonth = () => {
+    setCurrentDate(new Date(year, month + 1, 1))
+  }
+
+  const getEventsForDay = (day: number) => {
+    return events.filter((event) => {
+      const eventDate = new Date(event.date)
+      return eventDate.getDate() === day && eventDate.getMonth() === month && eventDate.getFullYear() === year
+    })
+  }
+
+  const isToday = (day: number) => {
+    const today = new Date()
+    return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year
+  }
+
+  // Create array of day cells including empty cells for alignment
+  const calendarDays = []
+
+  // Add empty cells for days before the first day of month
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    calendarDays.push(null)
+  }
+
+  // Add cells for each day of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    calendarDays.push(day)
+  }
+
+  return (
+    <div className="grid grid-cols-7 gap-2">
+      {calendarDays.map((day, index) => {
+        if (day === null) {
+          return <div key={`empty-${index}`} className="aspect-square" />
+        }
+
+        const dayEvents = getEventsForDay(day);
+        const isTodayDate = isToday(day);
+
+        return (
+          <div
+            key={day}
+            className={cn(
+              "aspect-square border rounded-lg p-2 hover:border-primary/50 transition-colors",
+              isTodayDate && "bg-primary/5 border-primary"
+            )}
+          >
+            <div className="h-full flex flex-col">
+              <span className={cn("text-sm font-medium mb-1", isTodayDate && "text-primary font-semibold")}>{day}</span>
+
+              <div className="flex-1 flex flex-col gap-1 overflow-hidden">
+                {dayEvents.slice(0, 3).map((event) => (
+                  <button
+                    key={event.id}
+                    onClick={() => onEventClick(event)}
+                    className={cn(
+                      "text-left text-xs px-2 py-1 rounded truncate transition-all hover:scale-105",
+                    )}
+                  >
+                    {event.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+          </div>
+        );
+      })}
+    </div>
+  );
+};

src/Den.Client.Web/src/components/views/calendar/event-card.tsx

···
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { CalendarEvent } from "./calendar-view";
+
+export const EventCard = ({ event }: { event: CalendarEvent; }) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{event.title}</CardTitle>
+        <CardDescription>{event.date.toLocaleString()}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <dl className="grid grid-cols-1 gap-4">
+          <div className="flex flex-col gap-2">
+            <dt className="font-medium">Location</dt>
+            <dd>123 Flower St, Springfield</dd>
+          </div>
+
+          <dt className="font-medium">Notes</dt>
+          <dd>Don't forget to bring the flowers!</dd>
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

src/Den.Client.Web/src/routeTree.gen.ts

···
 import { Route as authAuthRouteImport } from './routes/(auth)/_auth'
 import { Route as appHomeRouteImport } from './routes/(app)/_home'
 import { Route as appHomeIndexRouteImport } from './routes/(app)/_home.index'
+import { Route as appHomeCalendarIndexRouteImport } from './routes/(app)/_home/calendar/index'
 import { Route as appHomeBudgetsIndexRouteImport } from './routes/(app)/_home/budgets/index'
 import { Route as authAuthAuthSignupRouteImport } from './routes/(auth)/_auth.auth.signup'
 import { Route as authAuthAuthLoginRouteImport } from './routes/(auth)/_auth.auth.login'
···
 const appHomeIndexRoute = appHomeIndexRouteImport.update({
   id: '/',
   path: '/',
+  getParentRoute: () => appHomeRoute,
+} as any)
+const appHomeCalendarIndexRoute = appHomeCalendarIndexRouteImport.update({
+  id: '/calendar/',
+  path: '/calendar/',
   getParentRoute: () => appHomeRoute,
 } as any)
 const appHomeBudgetsIndexRoute = appHomeBudgetsIndexRouteImport.update({
···
   '/auth/login': typeof authAuthAuthLoginRoute
   '/auth/signup': typeof authAuthAuthSignupRoute
   '/budgets': typeof appHomeBudgetsIndexRoute
+  '/calendar': typeof appHomeCalendarIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof appHomeIndexRoute
···
   '/auth/login': typeof authAuthAuthLoginRoute
   '/auth/signup': typeof authAuthAuthSignupRoute
   '/budgets': typeof appHomeBudgetsIndexRoute
+  '/calendar': typeof appHomeCalendarIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
···
   '/(auth)/_auth/auth/login': typeof authAuthAuthLoginRoute
   '/(auth)/_auth/auth/signup': typeof authAuthAuthSignupRoute
   '/(app)/_home/budgets/': typeof appHomeBudgetsIndexRoute
+  '/(app)/_home/calendar/': typeof appHomeCalendarIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
···
     | '/auth/login'
     | '/auth/signup'
     | '/budgets'
+    | '/calendar'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/budgets/create' | '/auth/login' | '/auth/signup' | '/budgets'
+  to:
+    | '/'
+    | '/budgets/create'
+    | '/auth/login'
+    | '/auth/signup'
+    | '/budgets'
+    | '/calendar'
   id:
     | '__root__'
     | '/(app)/_home'
···
     | '/(auth)/_auth/auth/login'
     | '/(auth)/_auth/auth/signup'
     | '/(app)/_home/budgets/'
+    | '/(app)/_home/calendar/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
···
       preLoaderRoute: typeof appHomeIndexRouteImport
       parentRoute: typeof appHomeRoute
     }
+    '/(app)/_home/calendar/': {
+      id: '/(app)/_home/calendar/'
+      path: '/calendar'
+      fullPath: '/calendar'
+      preLoaderRoute: typeof appHomeCalendarIndexRouteImport
+      parentRoute: typeof appHomeRoute
+    }
     '/(app)/_home/budgets/': {
       id: '/(app)/_home/budgets/'
       path: '/budgets'
···
   appHomeIndexRoute: typeof appHomeIndexRoute
   appHomeBudgetsCreateRoute: typeof appHomeBudgetsCreateRoute
   appHomeBudgetsIndexRoute: typeof appHomeBudgetsIndexRoute
+  appHomeCalendarIndexRoute: typeof appHomeCalendarIndexRoute
 }
 
 const appHomeRouteChildren: appHomeRouteChildren = {
   appHomeIndexRoute: appHomeIndexRoute,
   appHomeBudgetsCreateRoute: appHomeBudgetsCreateRoute,
   appHomeBudgetsIndexRoute: appHomeBudgetsIndexRoute,
+  appHomeCalendarIndexRoute: appHomeCalendarIndexRoute,
 }
 
 const appHomeRouteWithChildren =

src/Den.Client.Web/src/routes/(app)/_home/calendar/index.tsx

···
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@/components/ui/breadcrumb';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { Separator } from '@/components/ui/separator';
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next';
+import { CalendarView, type CalendarEvent } from '@/components/views/calendar/calendar-view';
+import { EventCard } from '@/components/views/calendar/event-card';
+import { useState } from 'react';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
+import { CalendarIcon } from 'lucide-react';
+
+export const Route = createFileRoute('/(app)/_home/calendar/')({
+  component: () => {
+    const [events, _setEvents] = useState<CalendarEvent[]>([
+      { id: 'abc123', title: 'Flower Delivery', date: new Date() },
+      { id: 'def456', title: 'Meeting with Bob', date: new Date() },
+    ]);
+    const { t } = useTranslation();
+
+    return (
+      <>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger />
+          <Separator orientation="vertical" className="data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink asChild>
+                  <Link to="/budgets">{t('menu.budgeting.title')}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>
+                  {t('menu.budgeting.allBudgets')}
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid flex-1 grid-cols-1 lg:grid-cols-3 gap-4">
+            <div className="flex flex-col gap-6">
+              {events.length === 0 && (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <CalendarIcon />
+                    </EmptyMedia>
+                    <EmptyTitle>No Events</EmptyTitle>
+                    <EmptyDescription>
+                      You have no events scheduled. Your events will appear here.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
+              {events.map((ev, idx) => <EventCard key={idx} event={ev} />)}
+            </div>
+            <div className="lg:col-span-2">
+              <CalendarView events={events} onEventClick={() => {}} />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+});