From a342f782c47f2eb460606e6499f5b18fc60e6e7c Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:26:11 +0200 Subject: [PATCH] Add test dashboard page --- components/dashboard/date-range-picker.tsx | 57 +++++ components/dashboard/main-nav.tsx | 30 +++ components/dashboard/overview.tsx | 72 ++++++ components/dashboard/recent-sales.tsx | 63 +++++ components/dashboard/search.tsx | 9 + components/dashboard/team-switcher.tsx | 190 ++++++++++++++ components/dashboard/user-nav.tsx | 56 ++++ pages/dashboard.tsx | 283 +++++++++++++++++++++ 8 files changed, 760 insertions(+) create mode 100644 components/dashboard/date-range-picker.tsx create mode 100644 components/dashboard/main-nav.tsx create mode 100644 components/dashboard/overview.tsx create mode 100644 components/dashboard/recent-sales.tsx create mode 100644 components/dashboard/search.tsx create mode 100644 components/dashboard/team-switcher.tsx create mode 100644 components/dashboard/user-nav.tsx create mode 100644 pages/dashboard.tsx diff --git a/components/dashboard/date-range-picker.tsx b/components/dashboard/date-range-picker.tsx new file mode 100644 index 0000000..b9d6c73 --- /dev/null +++ b/components/dashboard/date-range-picker.tsx @@ -0,0 +1,57 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { cn } from "@/lib/utils"; +import { CalendarIcon } from "@radix-ui/react-icons"; +import { addDays, format } from "date-fns"; +import * as React from "react"; +import { DateRange } from "react-day-picker"; + +export function CalendarDateRangePicker({ className }: React.HTMLAttributes) { + const [date, setDate] = React.useState({ + from: new Date(2023, 0, 20), + to: addDays(new Date(2023, 0, 20), 20), + }); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/components/dashboard/main-nav.tsx b/components/dashboard/main-nav.tsx new file mode 100644 index 0000000..09961c1 --- /dev/null +++ b/components/dashboard/main-nav.tsx @@ -0,0 +1,30 @@ +import { cn } from "@/lib/utils"; +import Link from "next/link"; + +export function MainNav({ className, ...props }: React.HTMLAttributes) { + return ( + + ); +} diff --git a/components/dashboard/overview.tsx b/components/dashboard/overview.tsx new file mode 100644 index 0000000..542d97e --- /dev/null +++ b/components/dashboard/overview.tsx @@ -0,0 +1,72 @@ +"use client"; + +import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"; + +const data = [ + { + name: "Jan", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Feb", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Mar", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Apr", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "May", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Jun", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Jul", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Aug", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Sep", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Oct", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Nov", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Dec", + total: Math.floor(Math.random() * 5000) + 1000, + }, +]; + +export function Overview() { + return ( + + + + `$${value}`} + /> + + + + ); +} diff --git a/components/dashboard/recent-sales.tsx b/components/dashboard/recent-sales.tsx new file mode 100644 index 0000000..f0b3166 --- /dev/null +++ b/components/dashboard/recent-sales.tsx @@ -0,0 +1,63 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; + +export function RecentSales() { + return ( +
+
+ + + OM + +
+

Olivia Martin

+

olivia.martin@email.com

+
+
+$1,999.00
+
+
+ + + JL + +
+

Jackson Lee

+

jackson.lee@email.com

+
+
+$39.00
+
+
+ + + IN + +
+

Isabella Nguyen

+

isabella.nguyen@email.com

+
+
+$299.00
+
+
+ + + WK + +
+

William Kim

+

will@email.com

+
+
+$99.00
+
+
+ + + SD + +
+

Sofia Davis

+

sofia.davis@email.com

+
+
+$39.00
+
+
+ ); +} diff --git a/components/dashboard/search.tsx b/components/dashboard/search.tsx new file mode 100644 index 0000000..4f20186 --- /dev/null +++ b/components/dashboard/search.tsx @@ -0,0 +1,9 @@ +import { Input } from "@/components/ui/input"; + +export function Search() { + return ( +
+ +
+ ); +} diff --git a/components/dashboard/team-switcher.tsx b/components/dashboard/team-switcher.tsx new file mode 100644 index 0000000..17687a7 --- /dev/null +++ b/components/dashboard/team-switcher.tsx @@ -0,0 +1,190 @@ +"use client"; + +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, +} from "@/components/ui/command"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { cn } from "@/lib/utils"; +import { CaretSortIcon, CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"; +import * as React from "react"; + +const groups = [ + { + label: "Personal Account", + teams: [ + { + label: "Alicia Koch", + value: "personal", + }, + ], + }, + { + label: "Teams", + teams: [ + { + label: "Acme Inc.", + value: "acme-inc", + }, + { + label: "Monsters Inc.", + value: "monsters", + }, + ], + }, +]; + +type Team = (typeof groups)[number]["teams"][number]; + +type PopoverTriggerProps = React.ComponentPropsWithoutRef; + +interface TeamSwitcherProps extends PopoverTriggerProps {} + +export default function TeamSwitcher({ className }: TeamSwitcherProps) { + const [open, setOpen] = React.useState(false); + const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false); + const [selectedTeam, setSelectedTeam] = React.useState(groups[0].teams[0]); + + return ( + + + + + + + + + + No team found. + {groups.map((group) => ( + + {group.teams.map((team) => ( + { + setSelectedTeam(team); + setOpen(false); + }} + className="text-sm" + > + + + SC + + {team.label} + + + ))} + + ))} + + + + + + { + setOpen(false); + setShowNewTeamDialog(true); + }} + > + + Create Team + + + + + + + + + + Create team + Add a new team to manage products and customers. + +
+
+
+ + +
+
+ + +
+
+
+ + + + + + + ); +} diff --git a/components/dashboard/user-nav.tsx b/components/dashboard/user-nav.tsx new file mode 100644 index 0000000..4c6bfd8 --- /dev/null +++ b/components/dashboard/user-nav.tsx @@ -0,0 +1,56 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export function UserNav() { + return ( + + + + + + +
+

shadcn

+

m@example.com

+
+ + + + + Profile + ⇧⌘P + + + Billing + ⌘B + + + Settings + ⌘S + + New Team + + + + Log out + ⇧⌘Q + + + + ); +} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx new file mode 100644 index 0000000..7f8508e --- /dev/null +++ b/pages/dashboard.tsx @@ -0,0 +1,283 @@ +import { CalendarDateRangePicker } from "@/components/dashboard/date-range-picker"; +import { MainNav } from "@/components/dashboard/main-nav"; +import { Overview } from "@/components/dashboard/overview"; +import { RecentSales } from "@/components/dashboard/recent-sales"; +import { Search } from "@/components/dashboard/search"; +import TeamSwitcher from "@/components/dashboard/team-switcher"; +import { UserNav } from "@/components/dashboard/user-nav"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "@/components/ui/command"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { ToastAction } from "@/components/ui/toast"; +import { useToast } from "@/components/ui/use-toast"; +import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react"; +import { Metadata } from "next"; +import Image from "next/image"; + +export const metadata: Metadata = { + title: "Dashboard", + description: "Example dashboard app built using the components.", +}; + +export default function DashboardPage() { + const { toast } = useToast(); + + return ( + <> +
+ Dashboard + Dashboard +
+
+
+
+ + +
+ + +
+
+
+
+
+

Dashboard

+
+ + +
+
+ + + Overview + + Analytics + + + Reports + + + Notifications + + + +
+ + + Total Revenue + + + + + +
$45,231.89
+

+20.1% from last month

+ + + + + Subscriptions + + + + + + + +
+2350
+

+180.1% from last month

+ + + + + Sales + + + + + + +
+12,234
+

+19% from last month

+ + + + + Active Now + + + + + +
+573
+

+201 since last hour

+ + +
+
+ + + Overview + + + + + + + + Recent Sales + You made 265 sales this month. + + + + + +
+ + +
+
+ + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Calculator + + + + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + + + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your account and remove + your data from our servers. + + + + Cancel + Continue + + + + + ); +}