diff --git a/package.json b/package.json index 96bd2a8f4..cf0de6cfb 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cookies-next": "^4.2.1", + "date-fns": "^3.6.0", "framer-motion": "^11.3.8", "input-otp": "^1.2.4", "jest-axe": "^9.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1161db10..a7b1c96ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ importers: cookies-next: specifier: ^4.2.1 version: 4.2.1 + date-fns: + specifier: ^3.6.0 + version: 3.6.0 framer-motion: specifier: ^11.3.8 version: 11.3.17(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/analytics/page.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/analytics/page.tsx new file mode 100644 index 000000000..cf132e929 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/analytics/page.tsx @@ -0,0 +1,3 @@ +export default function DashboardAnalytics() { + return
REPORTS
; +} diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx new file mode 100644 index 000000000..4815efe0c --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx @@ -0,0 +1,40 @@ +import type { PropsWithChildren } from "react"; + +import { DateSelector } from "~/app/dashboard/(user-dashboard)/_components/layout/dateselector"; +import { Tablinks } from "~/app/dashboard/(user-dashboard)/_components/layout/tablinks"; +import { Button } from "~/components/common/common-button"; + +const links = [ + { + title: "Overview", + href: "/dashboard", + }, + { + title: "Analytics", + href: "/dashboard/analytics", + }, + { + title: "Reports", + href: "/dashboard/reports", + }, +]; + +export default function UserMetricsLayout({ children }: PropsWithChildren) { + return ( +
+
+
+

Dashboard

+ +
+
+ + +
+
+
{children}
+
+ ); +} diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx new file mode 100644 index 000000000..3d5e57bbe --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx @@ -0,0 +1,13 @@ +import { OverviewChart } from "~/app/dashboard/(user-dashboard)/_components/overview-chart"; + +export default function DashboardOverview() { + return ( +
+
Revenue Cards
+
+ +
Recent Sales
+
+
+ ); +} diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/reports/page.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/reports/page.tsx new file mode 100644 index 000000000..b6815d6f8 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/reports/page.tsx @@ -0,0 +1,3 @@ +export default function DashboardReports() { + return
REPORTS
; +} diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/dateselector/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/dateselector/index.tsx new file mode 100644 index 000000000..5152363ac --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/_components/layout/dateselector/index.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { format, subMonths } from "date-fns"; +import { CalendarDaysIcon } from "lucide-react"; +import { useState } from "react"; +import { DateRange } from "react-day-picker"; + +import { Button } from "~/components/common/common-button"; +import { Calendar } from "~/components/ui/calendar"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "~/components/ui/popover"; +import { cn } from "~/lib/utils"; + +type DateSelectorProperties = { + from?: Date; + to?: Date; + className?: string; +}; +export function DateSelector({ + from = subMonths(new Date(), 1), + to = new Date(), + className, +}: DateSelectorProperties) { + const [date, setDate] = useState({ + from, + to, + }); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/tablinks/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/tablinks/index.tsx new file mode 100644 index 000000000..6caf7bfd5 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/_components/layout/tablinks/index.tsx @@ -0,0 +1,34 @@ +"use client"; + +import type { Route } from "next"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +import { cn } from "~/lib/utils"; + +type TablinksProperties = { + links: { + title: string; + href: Route; + }[]; +}; + +export function Tablinks({ links }: TablinksProperties) { + const pathname = usePathname(); + return ( + + ); +} diff --git a/src/app/dashboard/(user-dashboard)/_components/overview-chart/index.tsx b/src/app/dashboard/(user-dashboard)/_components/overview-chart/index.tsx new file mode 100644 index 000000000..fa370d191 --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/_components/overview-chart/index.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { Chart } from "~/components/userDashboard/Chart"; +import { chartConfig, chartData } from "~/components/userDashboard/chartData"; + +type OverviewChartProperties = { + className?: string; +}; +export function OverviewChart({ className }: OverviewChartProperties) { + return ( + + ); +} diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx index 3ff9e35b6..5c1ab4e0a 100644 --- a/src/app/dashboard/(user-dashboard)/layout.tsx +++ b/src/app/dashboard/(user-dashboard)/layout.tsx @@ -8,7 +8,7 @@ export default function AdminLayout({ children: React.ReactNode; }) { return ( -
+
{children} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a8a667d28..2db2ed0d3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,7 +20,7 @@ export default function RootLayout({ return ( -
+
{children} diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx new file mode 100644 index 000000000..eae2a34a0 --- /dev/null +++ b/src/components/ui/calendar.tsx @@ -0,0 +1,67 @@ +"use client"; + +import { ChevronLeft, ChevronRight } from "lucide-react"; +import * as React from "react"; +import { DayPicker } from "react-day-picker"; + +// import { buttonVariants } from "~/components/ui/button"; +import { buttonVariants } from "~/components/common/common-button"; +import { cn } from "~/lib/utils"; + +export type CalendarProperties = React.ComponentProps; + +function Calendar({ + className, + classNames, + showOutsideDays = true, + ...properties +}: CalendarProperties) { + return ( + , + IconRight: () => , + }} + {...properties} + /> + ); +} +Calendar.displayName = "Calendar"; + +export { Calendar }; diff --git a/src/components/userDashboard/Chart.tsx b/src/components/userDashboard/Chart.tsx index 900aaa765..fe552232b 100644 --- a/src/components/userDashboard/Chart.tsx +++ b/src/components/userDashboard/Chart.tsx @@ -7,66 +7,72 @@ import { ChartTooltip, ChartTooltipContent, } from "~/components/ui/chart"; +import { cn } from "~/lib/utils"; type ChartProperties = { chartData: { month: string; revenue: number }[]; chartConfig: ChartConfig; chartTitle: string; + className?: string; }; export function Chart({ chartData = [], chartConfig, chartTitle, + className, }: ChartProperties) { return ( - <> - -

- {chartTitle} -

+ +

+ {chartTitle} +

-
- - + + + - - - value.slice(0, 3)} - /> - `$${value}`} - /> - } - /> - - - - -
- - + + value.slice(0, 3)} + /> + `$${value}`} + /> + } + /> + + + + +
+ ); }