diff --git a/package.json b/package.json index 99b8031..5ddbd8d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@types/jsonwebtoken": "^9.0.6", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "dotenv": "^16.4.5", "drizzle-orm": "^0.30.10", "geist": "^1.3.1", @@ -41,6 +42,7 @@ "next-themes": "^0.3.0", "postgres": "^3.4.4", "react": "^18.3.1", + "react-day-picker": "8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.52.2", "server-only": "^0.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6dcb0de..553ab0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + date-fns: + specifier: ^3.6.0 + version: 3.6.0 dotenv: specifier: ^16.4.5 version: 16.4.5 @@ -80,6 +83,9 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 + react-day-picker: + specifier: 8.10.1 + version: 8.10.1(date-fns@3.6.0)(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -1521,6 +1527,9 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} peerDependencies: @@ -2703,6 +2712,12 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + react-day-picker@8.10.1: + resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} + peerDependencies: + date-fns: ^2.28.0 || ^3.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -4333,6 +4348,8 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@3.6.0: {} + debug@3.2.7: dependencies: ms: 2.1.3 @@ -5659,6 +5676,11 @@ snapshots: queue-microtask@1.2.3: {} + react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1): + dependencies: + date-fns: 3.6.0 + react: 18.3.1 + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 diff --git a/src/app/billtracker/page.tsx b/src/app/billtracker/page.tsx new file mode 100644 index 0000000..9de7a79 --- /dev/null +++ b/src/app/billtracker/page.tsx @@ -0,0 +1,19 @@ +"use server" +import { auth } from "~/auth" +import BreadCrumbBillTracker from "~/components/home/breadcrumb/BreadCrumbBillTracker" +import BillTrackerCalendar from "~/components/billtracker/BillTrackerCalendar" + +export default async function HomePage() { + const session = await auth() + if (!session?.user) return <> + return ( +
+
+
+ +
+
+ < BillTrackerCalendar /> +
+ ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 86348d3..ede535b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -79,7 +79,7 @@ export default async function RootLayout({ < First_Sign_In_Form users_name={users_name} users_email={users_email} />
-
+
diff --git a/src/components/billtracker/BillTrackerCalendar.tsx b/src/components/billtracker/BillTrackerCalendar.tsx new file mode 100644 index 0000000..49ab7bc --- /dev/null +++ b/src/components/billtracker/BillTrackerCalendar.tsx @@ -0,0 +1,18 @@ +"use client" +import * as React from "react" +import { Calendar } from "~/components/ui/BillTrackerCalendar" + +export default function BillTrackerCalendar() { + const [date, setDate] = React.useState(new Date()) + + return ( +
+ +
+ ) +} diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index 2612a5d..45a42ee 100644 --- a/src/components/home/Hero.tsx +++ b/src/components/home/Hero.tsx @@ -9,12 +9,12 @@ const fontSans = FontSans({ export default function Hero() { return (
-

TENANT

-

PORTAL diff --git a/src/components/home/NavBar.tsx b/src/components/home/NavBar.tsx index be648c3..910e236 100644 --- a/src/components/home/NavBar.tsx +++ b/src/components/home/NavBar.tsx @@ -14,9 +14,9 @@ const fontSans = FontSans({ export default function Nav_Bar() { return (
- + Dashboard @@ -58,7 +58,7 @@ export default function Nav_Bar() { - + Bill Tracker diff --git a/src/components/home/breadcrumb/BreadCrumbBillTracker.tsx b/src/components/home/breadcrumb/BreadCrumbBillTracker.tsx new file mode 100644 index 0000000..d9f5b7c --- /dev/null +++ b/src/components/home/breadcrumb/BreadCrumbBillTracker.tsx @@ -0,0 +1,31 @@ +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbSeparator, +} from "~/components/ui/breadcrumb" +import Link from "next/link" + +export default function Breadcrumb_Home() { + return ( + + + + +

+ Dashboard +

+ + + + + +

+ Bill Tracker +

+ + + + + ); +}; diff --git a/src/components/ui/BillTrackerCalendar.tsx b/src/components/ui/BillTrackerCalendar.tsx new file mode 100644 index 0000000..ca14991 --- /dev/null +++ b/src/components/ui/BillTrackerCalendar.tsx @@ -0,0 +1,66 @@ +"use client" + +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 + +function Calendar({ + className, + classNames, + showOutsideDays = true, + ...props +}: CalendarProps) { + return ( + , + IconRight: ({ ...props }) => , + }} + {...props} + /> + ) +} +Calendar.displayName = "Calendar" + +export { Calendar }