├── .eslintrc
├── .gitignore
├── .prettierrc
├── README.md
├── app
    ├── (guest)
    │   ├── layout.tsx
    │   ├── login
    │   │   └── page.tsx
    │   ├── pages
    │   │   └── error
    │   │   │   ├── 404
    │   │   │       └── page.tsx
    │   │   │   └── 500
    │   │   │       └── page.tsx
    │   └── register
    │   │   └── page.tsx
    ├── dashboard
    │   ├── default
    │   │   ├── cards
    │   │   │   ├── chat.tsx
    │   │   │   ├── metric.tsx
    │   │   │   ├── payment-method.tsx
    │   │   │   ├── payment.tsx
    │   │   │   ├── subscriptions.tsx
    │   │   │   ├── theme-members.tsx
    │   │   │   └── total-revenue.tsx
    │   │   └── page.tsx
    │   ├── error.tsx
    │   ├── layout.tsx
    │   └── pages
    │   │   ├── settings
    │   │       ├── layout.tsx
    │   │       ├── page.tsx
    │   │       ├── profile-form.tsx
    │   │       └── sidebar-nav.tsx
    │   │   └── users
    │   │       ├── data-table.tsx
    │   │       ├── data.json
    │   │       └── page.tsx
    ├── favicon.ico
    ├── globals.scss
    └── layout.tsx
├── components.json
├── components
    ├── anchor.tsx
    ├── card-action-menus.tsx
    ├── date-range-picker.tsx
    ├── icon.tsx
    ├── icons.tsx
    ├── layout
    │   ├── header.tsx
    │   ├── logo.tsx
    │   ├── search.tsx
    │   └── sidebar.tsx
    ├── main-layout.tsx
    ├── providers.tsx
    ├── theme-provider.tsx
    ├── ui
    │   ├── accordion.tsx
    │   ├── avatar.tsx
    │   ├── badge.tsx
    │   ├── breadcrumb.tsx
    │   ├── button.tsx
    │   ├── calendar.tsx
    │   ├── card.tsx
    │   ├── chart.tsx
    │   ├── checkbox.tsx
    │   ├── collapsible.tsx
    │   ├── command.tsx
    │   ├── dialog.tsx
    │   ├── dropdown-menu.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── pagination.tsx
    │   ├── popover.tsx
    │   ├── progress.tsx
    │   ├── radio-group.tsx
    │   ├── scroll-area.tsx
    │   ├── select.tsx
    │   ├── separator.tsx
    │   ├── sheet.tsx
    │   ├── switch.tsx
    │   ├── table.tsx
    │   ├── tabs.tsx
    │   ├── textarea.tsx
    │   └── tooltip.tsx
    └── user-avatar.tsx
├── lib
    ├── routes-config.tsx
    └── utils.ts
├── middleware.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── github.png
    ├── images
    │   ├── 404.svg
    │   ├── 500.svg
    │   ├── avatars
    │   │   ├── 1.png
    │   │   ├── 10.png
    │   │   ├── 11.png
    │   │   ├── 12.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   ├── 6.png
    │   │   ├── 7.png
    │   │   ├── 8.png
    │   │   └── 9.png
    │   └── cover.png
    ├── logo.png
    ├── preview.png
    └── seo.jpg
├── tailwind.config.ts
└── tsconfig.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "semi": true,
 3 |   "tabWidth": 2,
 4 |   "printWidth": 100,
 5 |   "singleQuote": false,
 6 |   "trailingComma": "none",
 7 |   "jsxBracketSameLine": true,
 8 |   "plugins": ["prettier-plugin-tailwindcss"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a id="readme-top"></a>
 2 | 
 3 | <br />
 4 | <div align="center">
 5 |   <a href="https://github.com/othneildrew/Best-README-Template">
 6 |     <img src="public/github.png" alt="Logo" width="80" height="80">
 7 |   </a>
 8 | 
 9 |   <h3 align="center">Shadcn UI Kit</h3>
10 | 
11 |   <p align="center">
12 |     Shadcn UI Kit is a comprehensive collection of ready-to-use admin dashboards, website templates, and customizable components.
13 |     <br />
14 |     <br />
15 |     <a href="https://shadcnuikit.com/">Home Page</a>
16 |     &nbsp;&bull;&nbsp;
17 |     <a href="https://shadcnuikit.com/dashboard/default">Dashboards</a>
18 |     &nbsp;&bull;&nbsp;
19 |     <a href="https://shadcnuikit.com/templates">Templates</a>
20 |     &nbsp;&bull;&nbsp;
21 |     <a href="https://free.shadcnuikit.com/">Free</a>
22 |   </p>
23 |     <br />
24 | </div>
25 | 
26 | ## 💎 About Shadcn UI Kit
27 | 
28 | **Shadcn UI Kit** is a comprehensive and versatile collection of ready-to-use admin dashboards, website templates, and fully customizable components designed for modern web applications. It goes beyond standard UI libraries by offering enhanced functionality, greater design flexibility, and a seamless user experience. Whether you're building complex admin panels or sleek landing pages, Shadcn UI Kit provides the tools you need to create visually appealing and highly functional interfaces with ease.
29 | 
30 | <img src="public/preview.png" alt="Logo" width="100%">
31 | 
32 | ## 🪄 Get Lifetime Access (PRO)
33 | 
34 | Get lifetime use of the premium version of Shadcn UI Kit with hundreds of UI components, dashboards, website templates and pre-built pages. Free updates, newly added components and templates are also included.
35 | 
36 | | Free Version   | [Shadcn UI Kit PRO](https://shadcnuikit.com/pricing) |
37 | | -------------- | ---------------------------------------------------- |
38 | | 1 Dashboard    | ✔ 10 Dashboards                                     |
39 | | 5+ Pages       | ✔ 50+ Pages                                         |
40 | | 1 Color Scheme | ✔ 10+ Web Apps                                      |
41 | |                | ✔ 100+ Premium Components                           |
42 | |                | ✔ Premium Templates                                 |
43 | |                | ✔ 5+ Color Schemes                                  |
44 | |                | ✔ Theme Customization                               |
45 | |                | ✔ Dark/Light Mode 🌙                                |
46 | |                | ✔ LTR/RTL Support                                   |
47 | |                | ✔ New Sidebar                                       |
48 | |                | ✔ Multiple Layouts                                  |
49 | |                | ✔ and more..                                        |
50 | 
51 | ✅ [Click here](https://shadcnuikit.com/pricing) to get the Shadcn UI Kit and review it in detail
52 | 
53 | ## ✉️ Contact
54 | 
55 | Toby Belhome - [@TobyBelhome](https://x.com/TobyBelhome)
56 | 
57 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
58 | 


--------------------------------------------------------------------------------
/app/(guest)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Providers from "@/components/providers";
 2 | 
 3 | export default function GuestLayout({
 4 |   children
 5 | }: Readonly<{
 6 |   children: React.ReactNode;
 7 | }>) {
 8 |   return <Providers>{children}</Providers>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/(guest)/login/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button";
  2 | import { Input } from "@/components/ui/input";
  3 | import { Label } from "@/components/ui/label";
  4 | import { generateMeta } from "@/lib/utils";
  5 | import { GithubIcon } from "lucide-react";
  6 | import Link from "next/link";
  7 | 
  8 | export async function generateMetadata() {
  9 |   return generateMeta({
 10 |     title: "Login Page - Shadcn UI Kit Free",
 11 |     description:
 12 |       "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account.",
 13 |     canonical: "/login"
 14 |   });
 15 | }
 16 | 
 17 | export default function LoginPageV1() {
 18 |   return (
 19 |     <div className="flex pb-8 lg:h-screen lg:pb-0">
 20 |       <div className="hidden w-1/2 bg-gray-100 lg:block">
 21 |         <img src={`/images/cover.png`} alt="Login visual" className="h-full w-full object-cover" />
 22 |       </div>
 23 | 
 24 |       <div className="flex w-full items-center justify-center lg:w-1/2">
 25 |         <div className="w-full max-w-md space-y-8 px-4">
 26 |           <div className="text-center">
 27 |             <h2 className="mt-6 text-3xl font-bold text-gray-900">Welcome back</h2>
 28 |             <p className="mt-2 text-sm text-gray-600">Please sign in to your account</p>
 29 |           </div>
 30 | 
 31 |           <form className="mt-8 space-y-6">
 32 |             <div className="space-y-4">
 33 |               <div>
 34 |                 <Label htmlFor="email" className="sr-only">
 35 |                   Email address
 36 |                 </Label>
 37 |                 <Input
 38 |                   id="email"
 39 |                   name="email"
 40 |                   type="email"
 41 |                   autoComplete="email"
 42 |                   required
 43 |                   className="w-full"
 44 |                   placeholder="Email address"
 45 |                 />
 46 |               </div>
 47 |               <div>
 48 |                 <Label htmlFor="password" className="sr-only">
 49 |                   Password
 50 |                 </Label>
 51 |                 <Input
 52 |                   id="password"
 53 |                   name="password"
 54 |                   type="password"
 55 |                   autoComplete="current-password"
 56 |                   required
 57 |                   className="w-full"
 58 |                   placeholder="Password"
 59 |                 />
 60 |               </div>
 61 |               <div className="text-end">
 62 |                 <Link href="#" className="ml-auto inline-block text-sm underline">
 63 |                   Forgot your password?
 64 |                 </Link>
 65 |               </div>
 66 |             </div>
 67 | 
 68 |             <div>
 69 |               <Button type="submit" className="w-full">
 70 |                 Sign in
 71 |               </Button>
 72 |             </div>
 73 |           </form>
 74 | 
 75 |           <div className="mt-6">
 76 |             <div className="relative">
 77 |               <div className="absolute inset-0 flex items-center">
 78 |                 <div className="w-full border-t border-gray-300" />
 79 |               </div>
 80 |               <div className="relative flex justify-center text-sm">
 81 |                 <span className="bg-muted px-2 text-gray-500">or continue with</span>
 82 |               </div>
 83 |             </div>
 84 | 
 85 |             <div className="mt-6 grid grid-cols-2 gap-3">
 86 |               <Button variant="outline" className="w-full">
 87 |                 <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
 88 |                   <path
 89 |                     fill="currentColor"
 90 |                     d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
 91 |                   />
 92 |                   <path
 93 |                     fill="currentColor"
 94 |                     d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
 95 |                   />
 96 |                   <path
 97 |                     fill="currentColor"
 98 |                     d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
 99 |                   />
100 |                   <path
101 |                     fill="currentColor"
102 |                     d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
103 |                   />
104 |                 </svg>
105 |                 Google
106 |               </Button>
107 |               <Button variant="outline" className="w-full">
108 |                 <GithubIcon className="mr-2 h-4 w-4" />
109 |                 GitHub
110 |               </Button>
111 |             </div>
112 | 
113 |             <div className="mt-6 text-center text-sm">
114 |               Don&apos;t have an account?{" "}
115 |               <Link href="/register" className="underline">
116 |                 Sign up
117 |               </Link>
118 |             </div>
119 |           </div>
120 |         </div>
121 |       </div>
122 |     </div>
123 |   );
124 | }
125 | 


--------------------------------------------------------------------------------
/app/(guest)/pages/error/404/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import { generateMeta } from "@/lib/utils";
 3 | import { ArrowRight } from "lucide-react";
 4 | 
 5 | export async function generateMetadata() {
 6 |   return generateMeta({
 7 |     title: "404 Page - Shadcn UI Kit Free",
 8 |     description:
 9 |       "This is an example of a template for 404 error pages. Built with technologies like Tailwind CSS, Next.js, React and Shadcn.",
10 |     canonical: "/pages/error/404"
11 |   });
12 | }
13 | 
14 | export default function Error404() {
15 |   return (
16 |     <div className="grid h-screen items-center bg-background pb-8 lg:grid-cols-2 lg:pb-0">
17 |       <div className="text-center">
18 |         <p className="text-base font-semibold text-muted-foreground">404</p>
19 |         <h1 className="mt-4 text-3xl font-bold tracking-tight md:text-5xl lg:text-7xl">
20 |           Page not found
21 |         </h1>
22 |         <p className="mt-6 text-base leading-7 text-muted-foreground">
23 |           Sorry, we couldn’t find the page you’re looking for.
24 |         </p>
25 |         <div className="mt-10 flex items-center justify-center gap-x-2">
26 |           <Button size="lg">Go back home</Button>
27 |           <Button size="lg" variant="ghost">
28 |             Contact support <ArrowRight className="ms-2 h-4 w-4" />
29 |           </Button>
30 |         </div>
31 |       </div>
32 | 
33 |       <div className="hidden lg:block">
34 |         <img
35 |           src={`${process.env.DASHBOARD_BASE_URL}/images/404.svg`}
36 |           alt="Login visual"
37 |           className="object-contain"
38 |         />
39 |       </div>
40 |     </div>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/app/(guest)/pages/error/500/page.tsx:
--------------------------------------------------------------------------------
 1 | import { generateMeta } from "@/lib/utils";
 2 | 
 3 | export async function generateMetadata() {
 4 |   return generateMeta({
 5 |     title: "500 Page - Shadcn UI Kit Free",
 6 |     description:
 7 |       "This is an example of a template for 500 error pages. Built with technologies like Tailwind CSS, Next.js, React and Shadcn.",
 8 |     canonical: "/pages/error/404"
 9 |   });
10 | }
11 | 
12 | export default function Error404() {
13 |   return (
14 |     <div className="grid h-screen items-center bg-background pb-8 lg:grid-cols-2 lg:pb-0">
15 |       <div className="text-center">
16 |         <p className="text-base font-semibold text-muted-foreground">500</p>
17 |         <h1 className="mt-4 text-3xl font-bold tracking-tight md:text-5xl lg:text-7xl">
18 |           Server Error
19 |         </h1>
20 |         <p className="mt-6 text-base leading-7 text-muted-foreground">
21 |           There seems to be a connection problem between the server and the website.
22 |         </p>
23 |       </div>
24 | 
25 |       <div className="col-span-1 hidden lg:block">
26 |         <img
27 |           src={`${process.env.DASHBOARD_BASE_URL}/images/500.svg`}
28 |           alt="Login visual"
29 |           className="object-contain"
30 |         />
31 |       </div>
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/app/(guest)/register/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button";
  2 | import { Input } from "@/components/ui/input";
  3 | import { Label } from "@/components/ui/label";
  4 | import { generateMeta } from "@/lib/utils";
  5 | import { GithubIcon } from "lucide-react";
  6 | 
  7 | export async function generateMetadata() {
  8 |   return generateMeta({
  9 |     title: "Register Page - Shadcn UI Kit Free",
 10 |     description:
 11 |       "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account.",
 12 |     canonical: "/register"
 13 |   });
 14 | }
 15 | 
 16 | export default function LoginPageV1() {
 17 |   return (
 18 |     <div className="flex pb-8 lg:h-screen lg:pb-0">
 19 |       <div className="hidden w-1/2 bg-gray-100 lg:block">
 20 |         <img src={`/images/cover.png`} alt="Login visual" className="h-full w-full object-cover" />
 21 |       </div>
 22 | 
 23 |       <div className="flex w-full items-center justify-center lg:w-1/2">
 24 |         <div className="w-full max-w-md space-y-8 px-4">
 25 |           <div className="text-center">
 26 |             <h2 className="mt-6 text-3xl font-bold text-gray-900">Register</h2>
 27 |             <p className="mt-2 text-sm text-gray-600">
 28 |               Create a new account to access the dashboard.
 29 |             </p>
 30 |           </div>
 31 | 
 32 |           <form className="mt-8 space-y-6">
 33 |             <div className="space-y-4">
 34 |               <div>
 35 |                 <Label htmlFor="name" className="sr-only">
 36 |                   Name
 37 |                 </Label>
 38 |                 <Input
 39 |                   id="name"
 40 |                   name="name"
 41 |                   type="text"
 42 |                   required
 43 |                   className="w-full"
 44 |                   placeholder="Name"
 45 |                 />
 46 |               </div>
 47 |               <div>
 48 |                 <Label htmlFor="email" className="sr-only">
 49 |                   Email address
 50 |                 </Label>
 51 |                 <Input
 52 |                   id="email"
 53 |                   name="email"
 54 |                   type="email"
 55 |                   autoComplete="email"
 56 |                   required
 57 |                   className="w-full"
 58 |                   placeholder="Email address"
 59 |                 />
 60 |               </div>
 61 |               <div>
 62 |                 <Label htmlFor="password" className="sr-only">
 63 |                   Password
 64 |                 </Label>
 65 |                 <Input
 66 |                   id="password"
 67 |                   name="password"
 68 |                   type="password"
 69 |                   autoComplete="current-password"
 70 |                   required
 71 |                   className="w-full"
 72 |                   placeholder="Password"
 73 |                 />
 74 |               </div>
 75 |             </div>
 76 | 
 77 |             <div>
 78 |               <Button type="submit" className="w-full">
 79 |                 Sign in
 80 |               </Button>
 81 |             </div>
 82 |           </form>
 83 | 
 84 |           <div className="mt-6">
 85 |             <div className="relative">
 86 |               <div className="absolute inset-0 flex items-center">
 87 |                 <div className="w-full border-t border-gray-300" />
 88 |               </div>
 89 |               <div className="relative flex justify-center text-sm">
 90 |                 <span className="bg-muted px-2 text-gray-500">or continue with</span>
 91 |               </div>
 92 |             </div>
 93 | 
 94 |             <div className="mt-6 grid grid-cols-2 gap-3">
 95 |               <Button variant="outline" className="w-full">
 96 |                 <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
 97 |                   <path
 98 |                     fill="currentColor"
 99 |                     d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
100 |                   />
101 |                   <path
102 |                     fill="currentColor"
103 |                     d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
104 |                   />
105 |                   <path
106 |                     fill="currentColor"
107 |                     d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
108 |                   />
109 |                   <path
110 |                     fill="currentColor"
111 |                     d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
112 |                   />
113 |                 </svg>
114 |                 Google
115 |               </Button>
116 |               <Button variant="outline" className="w-full">
117 |                 <GithubIcon className="mr-2 h-4 w-4" />
118 |                 GitHub
119 |               </Button>
120 |             </div>
121 | 
122 |             <p className="mt-6 text-center text-sm text-gray-600">
123 |               Already have an account?{" "}
124 |               <a href="/login" className="text-primary hover:underline">
125 |                 Log in
126 |               </a>
127 |             </p>
128 |           </div>
129 |         </div>
130 |       </div>
131 |     </div>
132 |   );
133 | }
134 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/chat.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import { Check, Plus, Send } from "lucide-react";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
  8 | import { Button } from "@/components/ui/button";
  9 | import {
 10 |   Card,
 11 |   CardContent,
 12 |   CardFooter,
 13 |   CardHeader,
 14 | } from "@/components/ui/card";
 15 | import {
 16 |   Command,
 17 |   CommandEmpty,
 18 |   CommandGroup,
 19 |   CommandInput,
 20 |   CommandItem,
 21 |   CommandList,
 22 | } from "@/components/ui/command";
 23 | import {
 24 |   Dialog,
 25 |   DialogContent,
 26 |   DialogDescription,
 27 |   DialogFooter,
 28 |   DialogHeader,
 29 |   DialogTitle,
 30 | } from "@/components/ui/dialog";
 31 | import { Input } from "@/components/ui/input";
 32 | import {
 33 |   Tooltip,
 34 |   TooltipContent,
 35 |   TooltipProvider,
 36 |   TooltipTrigger,
 37 | } from "@/components/ui/tooltip";
 38 | 
 39 | const users = [
 40 |   {
 41 |     name: "Olivia Martin",
 42 |     email: "m@example.com",
 43 |     avatar: "/avatars/01.png",
 44 |   },
 45 |   {
 46 |     name: "Isabella Nguyen",
 47 |     email: "isabella.nguyen@email.com",
 48 |     avatar: "/avatars/03.png",
 49 |   },
 50 |   {
 51 |     name: "Emma Wilson",
 52 |     email: "emma@example.com",
 53 |     avatar: "/avatars/05.png",
 54 |   },
 55 |   {
 56 |     name: "Jackson Lee",
 57 |     email: "lee@example.com",
 58 |     avatar: "/avatars/02.png",
 59 |   },
 60 |   {
 61 |     name: "William Kim",
 62 |     email: "will@email.com",
 63 |     avatar: "/avatars/04.png",
 64 |   },
 65 | ] as const;
 66 | 
 67 | type User = (typeof users)[number];
 68 | 
 69 | export function ChatCard() {
 70 |   const [open, setOpen] = React.useState(false);
 71 |   const [selectedUsers, setSelectedUsers] = React.useState<User[]>([]);
 72 | 
 73 |   const [messages, setMessages] = React.useState([
 74 |     {
 75 |       role: "agent",
 76 |       content: "Hi, how can I help you today?",
 77 |     },
 78 |     {
 79 |       role: "user",
 80 |       content: "Hey, I'm having trouble with my account.",
 81 |     },
 82 |     {
 83 |       role: "agent",
 84 |       content: "What seems to be the problem?",
 85 |     },
 86 |     {
 87 |       role: "user",
 88 |       content: "I can't log in.",
 89 |     },
 90 |   ]);
 91 |   const [input, setInput] = React.useState("");
 92 |   const inputLength = input.trim().length;
 93 | 
 94 |   return (
 95 |     <>
 96 |       <Card>
 97 |         <CardHeader className="flex flex-row items-center">
 98 |           <div className="flex items-center space-x-4">
 99 |             <Avatar>
100 |               <AvatarImage src="/avatars/01.png" alt="Image" />
101 |               <AvatarFallback>OM</AvatarFallback>
102 |             </Avatar>
103 |             <div>
104 |               <p className="text-sm font-medium leading-none">Sofia Davis</p>
105 |               <p className="text-sm text-muted-foreground">m@example.com</p>
106 |             </div>
107 |           </div>
108 |           <TooltipProvider delayDuration={0}>
109 |             <Tooltip>
110 |               <TooltipTrigger asChild>
111 |                 <Button
112 |                   size="icon"
113 |                   variant="outline"
114 |                   className="ml-auto rounded-full"
115 |                   onClick={() => setOpen(true)}
116 |                 >
117 |                   <Plus className="h-4 w-4" />
118 |                   <span className="sr-only">New message</span>
119 |                 </Button>
120 |               </TooltipTrigger>
121 |               <TooltipContent sideOffset={10}>New message</TooltipContent>
122 |             </Tooltip>
123 |           </TooltipProvider>
124 |         </CardHeader>
125 |         <CardContent>
126 |           <div className="space-y-4">
127 |             {messages.map((message, index) => (
128 |               <div
129 |                 key={index}
130 |                 className={cn(
131 |                   "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
132 |                   message.role === "user"
133 |                     ? "ml-auto bg-primary text-primary-foreground"
134 |                     : "bg-muted",
135 |                 )}
136 |               >
137 |                 {message.content}
138 |               </div>
139 |             ))}
140 |           </div>
141 |         </CardContent>
142 |         <CardFooter>
143 |           <form
144 |             onSubmit={(event) => {
145 |               event.preventDefault();
146 |               if (inputLength === 0) return;
147 |               setMessages([
148 |                 ...messages,
149 |                 {
150 |                   role: "user",
151 |                   content: input,
152 |                 },
153 |               ]);
154 |               setInput("");
155 |             }}
156 |             className="flex w-full items-center space-x-2"
157 |           >
158 |             <Input
159 |               id="message"
160 |               placeholder="Type your message..."
161 |               className="flex-1"
162 |               autoComplete="off"
163 |               value={input}
164 |               onChange={(event) => setInput(event.target.value)}
165 |             />
166 |             <Button type="submit" size="icon" disabled={inputLength === 0}>
167 |               <Send className="h-4 w-4" />
168 |               <span className="sr-only">Send</span>
169 |             </Button>
170 |           </form>
171 |         </CardFooter>
172 |       </Card>
173 |       <Dialog open={open} onOpenChange={setOpen}>
174 |         <DialogContent className="gap-0 p-0 outline-none">
175 |           <DialogHeader className="px-4 pb-4 pt-5">
176 |             <DialogTitle>New message</DialogTitle>
177 |             <DialogDescription>
178 |               Invite a user to this thread. This will create a new group
179 |               message.
180 |             </DialogDescription>
181 |           </DialogHeader>
182 |           <Command className="overflow-hidden rounded-t-none border-t">
183 |             <CommandInput placeholder="Search user..." />
184 |             <CommandList>
185 |               <CommandEmpty>No users found.</CommandEmpty>
186 |               <CommandGroup className="p-2">
187 |                 {users.map((user) => (
188 |                   <CommandItem
189 |                     key={user.email}
190 |                     className="flex items-center px-2"
191 |                     onSelect={() => {
192 |                       if (selectedUsers.includes(user)) {
193 |                         return setSelectedUsers(
194 |                           selectedUsers.filter(
195 |                             (selectedUser) => selectedUser !== user,
196 |                           ),
197 |                         );
198 |                       }
199 | 
200 |                       return setSelectedUsers(
201 |                         [...users].filter((u) =>
202 |                           [...selectedUsers, user].includes(u),
203 |                         ),
204 |                       );
205 |                     }}
206 |                   >
207 |                     <Avatar>
208 |                       <AvatarImage src={user.avatar} alt="Image" />
209 |                       <AvatarFallback>{user.name[0]}</AvatarFallback>
210 |                     </Avatar>
211 |                     <div className="ml-2">
212 |                       <p className="text-sm font-medium leading-none">
213 |                         {user.name}
214 |                       </p>
215 |                       <p className="text-sm text-muted-foreground">
216 |                         {user.email}
217 |                       </p>
218 |                     </div>
219 |                     {selectedUsers.includes(user) ? (
220 |                       <Check className="ml-auto flex h-5 w-5 text-primary" />
221 |                     ) : null}
222 |                   </CommandItem>
223 |                 ))}
224 |               </CommandGroup>
225 |             </CommandList>
226 |           </Command>
227 |           <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
228 |             {selectedUsers.length > 0 ? (
229 |               <div className="flex -space-x-2 overflow-hidden">
230 |                 {selectedUsers.map((user) => (
231 |                   <Avatar
232 |                     key={user.email}
233 |                     className="inline-block border-2 border-background"
234 |                   >
235 |                     <AvatarImage src={user.avatar} />
236 |                     <AvatarFallback>{user.name[0]}</AvatarFallback>
237 |                   </Avatar>
238 |                 ))}
239 |               </div>
240 |             ) : (
241 |               <p className="text-sm text-muted-foreground">
242 |                 Select users to add to this thread.
243 |               </p>
244 |             )}
245 |             <Button
246 |               disabled={selectedUsers.length < 2}
247 |               onClick={() => {
248 |                 setOpen(false);
249 |               }}
250 |             >
251 |               Continue
252 |             </Button>
253 |           </DialogFooter>
254 |         </DialogContent>
255 |       </Dialog>
256 |     </>
257 |   );
258 | }
259 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/metric.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts";
  4 | 
  5 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
  6 | import { ExportButton } from "@/components/card-action-menus";
  7 | 
  8 | const data = [
  9 |   {
 10 |     average: 400,
 11 |     today: 240
 12 |   },
 13 |   {
 14 |     average: 300,
 15 |     today: 139
 16 |   },
 17 |   {
 18 |     average: 200,
 19 |     today: 980
 20 |   },
 21 |   {
 22 |     average: 278,
 23 |     today: 390
 24 |   },
 25 |   {
 26 |     average: 189,
 27 |     today: 480
 28 |   },
 29 |   {
 30 |     average: 239,
 31 |     today: 380
 32 |   },
 33 |   {
 34 |     average: 349,
 35 |     today: 430
 36 |   }
 37 | ];
 38 | 
 39 | export default function MetricCard({ className }: { className?: string }) {
 40 |   return (
 41 |     <Card className={className}>
 42 |       <CardHeader>
 43 |         <div className="flex justify-between">
 44 |           <div>
 45 |             <CardTitle className="text-base">Exercise Minutes</CardTitle>
 46 |             <CardDescription>
 47 |               Your exercise minutes are ahead of where you normally are.
 48 |             </CardDescription>
 49 |           </div>
 50 |           <ExportButton />
 51 |         </div>
 52 |       </CardHeader>
 53 |       <CardContent className="pb-4">
 54 |         <div className="h-[250px]">
 55 |           <ResponsiveContainer width="100%" height="100%">
 56 |             <LineChart
 57 |               data={data}
 58 |               margin={{
 59 |                 top: 5,
 60 |                 right: 10,
 61 |                 left: 10,
 62 |                 bottom: 0
 63 |               }}>
 64 |               <Tooltip
 65 |                 content={({ active, payload }) => {
 66 |                   if (active && payload && payload.length) {
 67 |                     return (
 68 |                       <div className="rounded-lg border bg-background p-2 shadow-sm">
 69 |                         <div className="grid grid-cols-2 gap-2">
 70 |                           <div className="flex flex-col">
 71 |                             <span className="text-[0.70rem] uppercase text-muted-foreground">
 72 |                               Average
 73 |                             </span>
 74 |                             <span className="font-bold text-muted-foreground">
 75 |                               {payload[0].value}
 76 |                             </span>
 77 |                           </div>
 78 |                           <div className="flex flex-col">
 79 |                             <span className="text-[0.70rem] uppercase text-muted-foreground">
 80 |                               Today
 81 |                             </span>
 82 |                             <span className="font-bold">{payload[1].value}</span>
 83 |                           </div>
 84 |                         </div>
 85 |                       </div>
 86 |                     );
 87 |                   }
 88 | 
 89 |                   return null;
 90 |                 }}
 91 |               />
 92 |               <Line
 93 |                 type="monotone"
 94 |                 strokeWidth={2}
 95 |                 dataKey="average"
 96 |                 activeDot={{
 97 |                   r: 6,
 98 |                   style: { fill: "var(--theme-primary)", opacity: 0.25 }
 99 |                 }}
100 |                 style={
101 |                   {
102 |                     stroke: "var(--theme-primary)",
103 |                     opacity: 0.25,
104 |                     "--theme-primary": `hsl(var(--primary))`
105 |                   } as React.CSSProperties
106 |                 }
107 |               />
108 |               <Line
109 |                 type="monotone"
110 |                 dataKey="today"
111 |                 strokeWidth={2}
112 |                 activeDot={{
113 |                   r: 8,
114 |                   style: { fill: "var(--theme-primary)" }
115 |                 }}
116 |                 style={
117 |                   {
118 |                     stroke: "var(--theme-primary)",
119 |                     "--theme-primary": `hsl(var(--primary))`
120 |                   } as React.CSSProperties
121 |                 }
122 |               />
123 |             </LineChart>
124 |           </ResponsiveContainer>
125 |         </div>
126 |       </CardContent>
127 |     </Card>
128 |   );
129 | }
130 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/payment-method.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Icons } from "@/components/icons";
  4 | import { Button } from "@/components/ui/button";
  5 | import {
  6 |   Card,
  7 |   CardContent,
  8 |   CardDescription,
  9 |   CardFooter,
 10 |   CardHeader,
 11 |   CardTitle,
 12 | } from "@/components/ui/card";
 13 | import { Input } from "@/components/ui/input";
 14 | import { Label } from "@/components/ui/label";
 15 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 16 | import {
 17 |   Select,
 18 |   SelectContent,
 19 |   SelectItem,
 20 |   SelectTrigger,
 21 |   SelectValue,
 22 | } from "@/components/ui/select";
 23 | 
 24 | export function PaymentMethodCard() {
 25 |   return (
 26 |     <Card>
 27 |       <CardHeader>
 28 |         <CardTitle className="text-base">Payment Method</CardTitle>
 29 |         <CardDescription>
 30 |           Add a new payment method to your account.
 31 |         </CardDescription>
 32 |       </CardHeader>
 33 |       <CardContent className="grid gap-6">
 34 |         <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
 35 |           <div>
 36 |             <RadioGroupItem
 37 |               value="card"
 38 |               id="card"
 39 |               className="peer sr-only"
 40 |               aria-label="Card"
 41 |             />
 42 |             <Label
 43 |               htmlFor="card"
 44 |               className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
 45 |             >
 46 |               <svg
 47 |                 xmlns="http://www.w3.org/2000/svg"
 48 |                 viewBox="0 0 24 24"
 49 |                 fill="none"
 50 |                 stroke="currentColor"
 51 |                 strokeLinecap="round"
 52 |                 strokeLinejoin="round"
 53 |                 strokeWidth="2"
 54 |                 className="mb-3 h-6 w-6"
 55 |               >
 56 |                 <rect width="20" height="14" x="2" y="5" rx="2" />
 57 |                 <path d="M2 10h20" />
 58 |               </svg>
 59 |               Card
 60 |             </Label>
 61 |           </div>
 62 | 
 63 |           <div>
 64 |             <RadioGroupItem
 65 |               value="paypal"
 66 |               id="paypal"
 67 |               className="peer sr-only"
 68 |               aria-label="Paypal"
 69 |             />
 70 |             <Label
 71 |               htmlFor="paypal"
 72 |               className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
 73 |             >
 74 |               <Icons.paypal className="mb-3 h-6 w-6" />
 75 |               Paypal
 76 |             </Label>
 77 |           </div>
 78 | 
 79 |           <div>
 80 |             <RadioGroupItem
 81 |               value="apple"
 82 |               id="apple"
 83 |               className="peer sr-only"
 84 |               aria-label="Apple"
 85 |             />
 86 |             <Label
 87 |               htmlFor="apple"
 88 |               className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
 89 |             >
 90 |               <Icons.apple className="mb-3 h-6 w-6" />
 91 |               Apple
 92 |             </Label>
 93 |           </div>
 94 |         </RadioGroup>
 95 |         <div className="grid gap-2">
 96 |           <Label htmlFor="name">Name</Label>
 97 |           <Input id="name" placeholder="First Last" />
 98 |         </div>
 99 |         <div className="grid gap-2">
100 |           <Label htmlFor="city">City</Label>
101 |           <Input id="city" placeholder="" />
102 |         </div>
103 |         <div className="grid gap-2">
104 |           <Label htmlFor="number">Card number</Label>
105 |           <Input id="number" placeholder="" />
106 |         </div>
107 |         <div className="grid grid-cols-3 gap-4">
108 |           <div className="grid gap-2">
109 |             <Label htmlFor="month">Expires</Label>
110 |             <Select>
111 |               <SelectTrigger id="month" aria-label="Month">
112 |                 <SelectValue placeholder="Month" />
113 |               </SelectTrigger>
114 |               <SelectContent>
115 |                 <SelectItem value="1">January</SelectItem>
116 |                 <SelectItem value="2">February</SelectItem>
117 |                 <SelectItem value="3">March</SelectItem>
118 |                 <SelectItem value="4">April</SelectItem>
119 |                 <SelectItem value="5">May</SelectItem>
120 |                 <SelectItem value="6">June</SelectItem>
121 |                 <SelectItem value="7">July</SelectItem>
122 |                 <SelectItem value="8">August</SelectItem>
123 |                 <SelectItem value="9">September</SelectItem>
124 |                 <SelectItem value="10">October</SelectItem>
125 |                 <SelectItem value="11">November</SelectItem>
126 |                 <SelectItem value="12">December</SelectItem>
127 |               </SelectContent>
128 |             </Select>
129 |           </div>
130 |           <div className="grid gap-2">
131 |             <Label htmlFor="year">Year</Label>
132 |             <Select>
133 |               <SelectTrigger id="year" aria-label="Year">
134 |                 <SelectValue placeholder="Year" />
135 |               </SelectTrigger>
136 |               <SelectContent>
137 |                 {Array.from({ length: 10 }, (_, i) => (
138 |                   <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
139 |                     {new Date().getFullYear() + i}
140 |                   </SelectItem>
141 |                 ))}
142 |               </SelectContent>
143 |             </Select>
144 |           </div>
145 |           <div className="grid gap-2">
146 |             <Label htmlFor="cvc">CVC</Label>
147 |             <Input id="cvc" placeholder="CVC" />
148 |           </div>
149 |         </div>
150 |       </CardContent>
151 |       <CardFooter>
152 |         <Button className="w-full">Continue</Button>
153 |       </CardFooter>
154 |     </Card>
155 |   );
156 | }
157 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/payment.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | 
  5 | import {
  6 |   ColumnDef,
  7 |   ColumnFiltersState,
  8 |   SortingState,
  9 |   VisibilityState,
 10 |   flexRender,
 11 |   getCoreRowModel,
 12 |   getFilteredRowModel,
 13 |   getPaginationRowModel,
 14 |   getSortedRowModel,
 15 |   useReactTable
 16 | } from "@tanstack/react-table";
 17 | 
 18 | import { Button } from "@/components/ui/button";
 19 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 20 | import { Checkbox } from "@/components/ui/checkbox";
 21 | import {
 22 |   DropdownMenu,
 23 |   DropdownMenuCheckboxItem,
 24 |   DropdownMenuContent,
 25 |   DropdownMenuItem,
 26 |   DropdownMenuLabel,
 27 |   DropdownMenuSeparator,
 28 |   DropdownMenuTrigger
 29 | } from "@/components/ui/dropdown-menu";
 30 | import { Input } from "@/components/ui/input";
 31 | import {
 32 |   Table,
 33 |   TableBody,
 34 |   TableCell,
 35 |   TableHead,
 36 |   TableHeader,
 37 |   TableRow
 38 | } from "@/components/ui/table";
 39 | import { ChevronDownIcon, ChevronsUpDown, Ellipsis } from "lucide-react";
 40 | import { CardOptionsMenu } from "@/components/card-action-menus";
 41 | 
 42 | const data: Payment[] = [
 43 |   {
 44 |     id: "m5gr84i9",
 45 |     amount: 316,
 46 |     status: "success",
 47 |     email: "ken99@yahoo.com"
 48 |   },
 49 |   {
 50 |     id: "3u1reuv4",
 51 |     amount: 242,
 52 |     status: "success",
 53 |     email: "Abe45@gmail.com"
 54 |   },
 55 |   {
 56 |     id: "derv1ws0",
 57 |     amount: 837,
 58 |     status: "processing",
 59 |     email: "Monserrat44@gmail.com"
 60 |   },
 61 |   {
 62 |     id: "5kma53ae",
 63 |     amount: 874,
 64 |     status: "success",
 65 |     email: "Silas22@gmail.com"
 66 |   },
 67 |   {
 68 |     id: "bhqecj4p",
 69 |     amount: 721,
 70 |     status: "failed",
 71 |     email: "carmella@hotmail.com"
 72 |   }
 73 | ];
 74 | 
 75 | export type Payment = {
 76 |   id: string;
 77 |   amount: number;
 78 |   status: "pending" | "processing" | "success" | "failed";
 79 |   email: string;
 80 | };
 81 | 
 82 | export const columns: ColumnDef<Payment>[] = [
 83 |   {
 84 |     id: "select",
 85 |     header: ({ table }) => (
 86 |       <Checkbox
 87 |         checked={
 88 |           table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
 89 |         }
 90 |         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
 91 |         aria-label="Select all"
 92 |       />
 93 |     ),
 94 |     cell: ({ row }) => (
 95 |       <Checkbox
 96 |         checked={row.getIsSelected()}
 97 |         onCheckedChange={(value) => row.toggleSelected(!!value)}
 98 |         aria-label="Select row"
 99 |       />
100 |     ),
101 |     enableSorting: false,
102 |     enableHiding: false
103 |   },
104 |   {
105 |     accessorKey: "status",
106 |     header: "Status",
107 |     cell: ({ row }) => <div className="capitalize">{row.getValue("status")}</div>
108 |   },
109 |   {
110 |     accessorKey: "email",
111 |     header: ({ column }) => {
112 |       return (
113 |         <Button
114 |           variant="ghost"
115 |           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
116 |           Email
117 |           <ChevronsUpDown className="ml-2 h-4 w-4" />
118 |         </Button>
119 |       );
120 |     },
121 |     cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>
122 |   },
123 |   {
124 |     accessorKey: "amount",
125 |     header: () => <div className="text-right">Amount</div>,
126 |     cell: ({ row }) => {
127 |       const amount = parseFloat(row.getValue("amount"));
128 | 
129 |       // Format the amount as a dollar amount
130 |       const formatted = new Intl.NumberFormat("en-US", {
131 |         style: "currency",
132 |         currency: "USD"
133 |       }).format(amount);
134 | 
135 |       return <div className="text-right font-medium">{formatted}</div>;
136 |     }
137 |   },
138 |   {
139 |     id: "actions",
140 |     enableHiding: false,
141 |     cell: ({ row }) => {
142 |       const payment = row.original;
143 | 
144 |       return (
145 |         <DropdownMenu>
146 |           <DropdownMenuTrigger asChild>
147 |             <Button variant="ghost" className="h-8 w-8 p-0">
148 |               <span className="sr-only">Open menu</span>
149 |               <Ellipsis className="h-4 w-4" />
150 |             </Button>
151 |           </DropdownMenuTrigger>
152 |           <DropdownMenuContent align="end">
153 |             <DropdownMenuLabel>Actions</DropdownMenuLabel>
154 |             <DropdownMenuItem onClick={() => navigator.clipboard.writeText(payment.id)}>
155 |               Copy payment ID
156 |             </DropdownMenuItem>
157 |             <DropdownMenuSeparator />
158 |             <DropdownMenuItem>View customer</DropdownMenuItem>
159 |             <DropdownMenuItem>View payment details</DropdownMenuItem>
160 |           </DropdownMenuContent>
161 |         </DropdownMenu>
162 |       );
163 |     }
164 |   }
165 | ];
166 | 
167 | export function PaymentsCard({ className }: { className?: string }) {
168 |   const [sorting, setSorting] = React.useState<SortingState>([]);
169 |   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
170 |   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
171 |   const [rowSelection, setRowSelection] = React.useState({});
172 | 
173 |   const table = useReactTable({
174 |     data,
175 |     columns,
176 |     onSortingChange: setSorting,
177 |     onColumnFiltersChange: setColumnFilters,
178 |     getCoreRowModel: getCoreRowModel(),
179 |     getPaginationRowModel: getPaginationRowModel(),
180 |     getSortedRowModel: getSortedRowModel(),
181 |     getFilteredRowModel: getFilteredRowModel(),
182 |     onColumnVisibilityChange: setColumnVisibility,
183 |     onRowSelectionChange: setRowSelection,
184 |     state: {
185 |       sorting,
186 |       columnFilters,
187 |       columnVisibility,
188 |       rowSelection
189 |     }
190 |   });
191 | 
192 |   return (
193 |     <Card className={className}>
194 |       <CardHeader className="flex flex-row justify-between">
195 |         <div>
196 |           <CardTitle className="text-base">Payments</CardTitle>
197 |           <CardDescription>Manage your payments.</CardDescription>
198 |         </div>
199 |         <CardOptionsMenu />
200 |       </CardHeader>
201 |       <CardContent>
202 |         <div className="mb-4 flex items-center gap-4">
203 |           <Input
204 |             placeholder="Filter emails..."
205 |             value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
206 |             onChange={(event) => table.getColumn("email")?.setFilterValue(event.target.value)}
207 |             className="max-w-sm"
208 |           />
209 |           <DropdownMenu>
210 |             <DropdownMenuTrigger asChild>
211 |               <Button variant="outline" className="ml-auto">
212 |                 Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
213 |               </Button>
214 |             </DropdownMenuTrigger>
215 |             <DropdownMenuContent align="end">
216 |               {table
217 |                 .getAllColumns()
218 |                 .filter((column) => column.getCanHide())
219 |                 .map((column) => {
220 |                   return (
221 |                     <DropdownMenuCheckboxItem
222 |                       key={column.id}
223 |                       className="capitalize"
224 |                       checked={column.getIsVisible()}
225 |                       onCheckedChange={(value) => column.toggleVisibility(!!value)}>
226 |                       {column.id}
227 |                     </DropdownMenuCheckboxItem>
228 |                   );
229 |                 })}
230 |             </DropdownMenuContent>
231 |           </DropdownMenu>
232 |         </div>
233 |         <div className="rounded-md border">
234 |           <Table>
235 |             <TableHeader>
236 |               {table.getHeaderGroups().map((headerGroup) => (
237 |                 <TableRow key={headerGroup.id}>
238 |                   {headerGroup.headers.map((header) => {
239 |                     return (
240 |                       <TableHead key={header.id} className="[&:has([role=checkbox])]:pl-3">
241 |                         {header.isPlaceholder
242 |                           ? null
243 |                           : flexRender(header.column.columnDef.header, header.getContext())}
244 |                       </TableHead>
245 |                     );
246 |                   })}
247 |                 </TableRow>
248 |               ))}
249 |             </TableHeader>
250 |             <TableBody>
251 |               {table.getRowModel().rows?.length ? (
252 |                 table.getRowModel().rows.map((row) => (
253 |                   <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
254 |                     {row.getVisibleCells().map((cell) => (
255 |                       <TableCell key={cell.id} className="[&:has([role=checkbox])]:pl-3">
256 |                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
257 |                       </TableCell>
258 |                     ))}
259 |                   </TableRow>
260 |                 ))
261 |               ) : (
262 |                 <TableRow>
263 |                   <TableCell colSpan={columns.length} className="h-24 text-center">
264 |                     No results.
265 |                   </TableCell>
266 |                 </TableRow>
267 |               )}
268 |             </TableBody>
269 |           </Table>
270 |         </div>
271 |         <div className="flex items-center justify-end space-x-2 pt-4">
272 |           <div className="flex-1 text-sm text-muted-foreground">
273 |             {table.getFilteredSelectedRowModel().rows.length} of{" "}
274 |             {table.getFilteredRowModel().rows.length} row(s) selected.
275 |           </div>
276 |           <div className="space-x-2">
277 |             <Button
278 |               variant="outline"
279 |               size="sm"
280 |               onClick={() => table.previousPage()}
281 |               disabled={!table.getCanPreviousPage()}>
282 |               Previous
283 |             </Button>
284 |             <Button
285 |               variant="outline"
286 |               size="sm"
287 |               onClick={() => table.nextPage()}
288 |               disabled={!table.getCanNextPage()}>
289 |               Next
290 |             </Button>
291 |           </div>
292 |         </div>
293 |       </CardContent>
294 |     </Card>
295 |   );
296 | }
297 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/subscriptions.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts";
 4 | 
 5 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 6 | 
 7 | const data = [
 8 |   {
 9 |     revenue: 10400,
10 |     subscription: 240,
11 |   },
12 |   {
13 |     revenue: 14405,
14 |     subscription: 300,
15 |   },
16 |   {
17 |     revenue: 9400,
18 |     subscription: 200,
19 |   },
20 |   {
21 |     revenue: 8200,
22 |     subscription: 278,
23 |   },
24 |   {
25 |     revenue: 7000,
26 |     subscription: 189,
27 |   },
28 |   {
29 |     revenue: 9600,
30 |     subscription: 239,
31 |   },
32 |   {
33 |     revenue: 11244,
34 |     subscription: 278,
35 |   },
36 |   {
37 |     revenue: 26475,
38 |     subscription: 189,
39 |   },
40 | ];
41 | 
42 | export default function SubscriptionsCard() {
43 |   return (
44 |     <Card>
45 |       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
46 |         <CardTitle className="text-base">Subscriptions</CardTitle>
47 |       </CardHeader>
48 |       <CardContent>
49 |         <div className="text-2xl font-bold">+2350</div>
50 |         <p className="text-xs text-muted-foreground">+180.1% from last month</p>
51 |         <div className="mt-4 h-[80px]">
52 |           <ResponsiveContainer width="100%" height="100%">
53 |             <BarChart data={data}>
54 |               <Bar
55 |                 dataKey="subscription"
56 |                 style={
57 |                   {
58 |                     fill: "var(--theme-primary)",
59 |                     opacity: 1,
60 |                     "--theme-primary": `hsl(var(--primary))`,
61 |                   } as React.CSSProperties
62 |                 }
63 |               />
64 |             </BarChart>
65 |           </ResponsiveContainer>
66 |         </div>
67 |       </CardContent>
68 |     </Card>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/theme-members.tsx:
--------------------------------------------------------------------------------
  1 | import { ChevronDownIcon, ChevronsDownIcon } from "lucide-react";
  2 | 
  3 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
  4 | import { Button } from "@/components/ui/button";
  5 | import {
  6 |   Card,
  7 |   CardContent,
  8 |   CardDescription,
  9 |   CardHeader,
 10 |   CardTitle,
 11 | } from "@/components/ui/card";
 12 | import {
 13 |   Command,
 14 |   CommandEmpty,
 15 |   CommandGroup,
 16 |   CommandInput,
 17 |   CommandItem,
 18 |   CommandList,
 19 | } from "@/components/ui/command";
 20 | import {
 21 |   Popover,
 22 |   PopoverContent,
 23 |   PopoverTrigger,
 24 | } from "@/components/ui/popover";
 25 | 
 26 | export default function TeamMembersCard() {
 27 |   return (
 28 |     <Card>
 29 |       <CardHeader>
 30 |         <CardTitle className="text-base">Team Members</CardTitle>
 31 |         <CardDescription>
 32 |           Invite your team members to collaborate.
 33 |         </CardDescription>
 34 |       </CardHeader>
 35 |       <CardContent className="grid gap-6">
 36 |         <div className="flex items-center justify-between space-x-4">
 37 |           <div className="flex items-center space-x-4">
 38 |             <Avatar>
 39 |               <AvatarImage src="/avatars/01.png" />
 40 |               <AvatarFallback>OM</AvatarFallback>
 41 |             </Avatar>
 42 |             <div>
 43 |               <p className="text-sm font-medium leading-none">Sofia Davis</p>
 44 |               <p className="text-sm text-muted-foreground">m@example.com</p>
 45 |             </div>
 46 |           </div>
 47 |           <Popover>
 48 |             <PopoverTrigger asChild>
 49 |               <Button variant="outline" className="ml-auto">
 50 |                 Owner{" "}
 51 |                 <ChevronsDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
 52 |               </Button>
 53 |             </PopoverTrigger>
 54 |             <PopoverContent className="p-0" align="end">
 55 |               <Command>
 56 |                 <CommandInput placeholder="Select new role..." />
 57 |                 <CommandList>
 58 |                   <CommandEmpty>No roles found.</CommandEmpty>
 59 |                   <CommandGroup>
 60 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
 61 |                       <p>Viewer</p>
 62 |                       <p className="text-sm text-muted-foreground">
 63 |                         Can view and comment.
 64 |                       </p>
 65 |                     </CommandItem>
 66 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
 67 |                       <p>Developer</p>
 68 |                       <p className="text-sm text-muted-foreground">
 69 |                         Can view, comment and edit.
 70 |                       </p>
 71 |                     </CommandItem>
 72 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
 73 |                       <p>Billing</p>
 74 |                       <p className="text-sm text-muted-foreground">
 75 |                         Can view, comment and manage billing.
 76 |                       </p>
 77 |                     </CommandItem>
 78 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
 79 |                       <p>Owner</p>
 80 |                       <p className="text-sm text-muted-foreground">
 81 |                         Admin-level access to all resources.
 82 |                       </p>
 83 |                     </CommandItem>
 84 |                   </CommandGroup>
 85 |                 </CommandList>
 86 |               </Command>
 87 |             </PopoverContent>
 88 |           </Popover>
 89 |         </div>
 90 |         <div className="flex items-center justify-between space-x-4">
 91 |           <div className="flex items-center space-x-4">
 92 |             <Avatar>
 93 |               <AvatarImage src="/avatars/02.png" />
 94 |               <AvatarFallback>JL</AvatarFallback>
 95 |             </Avatar>
 96 |             <div>
 97 |               <p className="text-sm font-medium leading-none">Jackson Lee</p>
 98 |               <p className="text-sm text-muted-foreground">p@example.com</p>
 99 |             </div>
100 |           </div>
101 |           <Popover>
102 |             <PopoverTrigger asChild>
103 |               <Button variant="outline" className="ml-auto">
104 |                 Member{" "}
105 |                 <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
106 |               </Button>
107 |             </PopoverTrigger>
108 |             <PopoverContent className="p-0" align="end">
109 |               <Command>
110 |                 <CommandInput placeholder="Select new role..." />
111 |                 <CommandList>
112 |                   <CommandEmpty>No roles found.</CommandEmpty>
113 |                   <CommandGroup className="p-1.5">
114 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
115 |                       <p>Viewer</p>
116 |                       <p className="text-sm text-muted-foreground">
117 |                         Can view and comment.
118 |                       </p>
119 |                     </CommandItem>
120 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
121 |                       <p>Developer</p>
122 |                       <p className="text-sm text-muted-foreground">
123 |                         Can view, comment and edit.
124 |                       </p>
125 |                     </CommandItem>
126 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
127 |                       <p>Billing</p>
128 |                       <p className="text-sm text-muted-foreground">
129 |                         Can view, comment and manage billing.
130 |                       </p>
131 |                     </CommandItem>
132 |                     <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
133 |                       <p>Owner</p>
134 |                       <p className="text-sm text-muted-foreground">
135 |                         Admin-level access to all resources.
136 |                       </p>
137 |                     </CommandItem>
138 |                   </CommandGroup>
139 |                 </CommandList>
140 |               </Command>
141 |             </PopoverContent>
142 |           </Popover>
143 |         </div>
144 |       </CardContent>
145 |     </Card>
146 |   );
147 | }
148 | 


--------------------------------------------------------------------------------
/app/dashboard/default/cards/total-revenue.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts";
 4 | 
 5 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 6 | 
 7 | const data = [
 8 |   {
 9 |     revenue: 10400,
10 |     subscription: 240,
11 |   },
12 |   {
13 |     revenue: 14405,
14 |     subscription: 300,
15 |   },
16 |   {
17 |     revenue: 9400,
18 |     subscription: 200,
19 |   },
20 |   {
21 |     revenue: 8200,
22 |     subscription: 278,
23 |   },
24 |   {
25 |     revenue: 7000,
26 |     subscription: 189,
27 |   },
28 |   {
29 |     revenue: 9600,
30 |     subscription: 239,
31 |   },
32 |   {
33 |     revenue: 11244,
34 |     subscription: 278,
35 |   },
36 |   {
37 |     revenue: 26475,
38 |     subscription: 189,
39 |   },
40 | ];
41 | 
42 | export default function TotalRevenueCard() {
43 |   return (
44 |     <Card>
45 |       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
46 |         <CardTitle className="text-base">Total Revenue</CardTitle>
47 |       </CardHeader>
48 |       <CardContent>
49 |         <div className="text-2xl font-bold">$15,231.89</div>
50 |         <p className="text-xs text-muted-foreground">+20.1% from last month</p>
51 |         <div className="h-[80px]">
52 |           <ResponsiveContainer width="100%" height="100%">
53 |             <LineChart
54 |               data={data}
55 |               margin={{
56 |                 top: 5,
57 |                 right: 10,
58 |                 left: 10,
59 |                 bottom: 0,
60 |               }}
61 |             >
62 |               <Line
63 |                 type="monotone"
64 |                 strokeWidth={2}
65 |                 dataKey="revenue"
66 |                 activeDot={{
67 |                   r: 6,
68 |                   style: { fill: "var(--theme-primary)", opacity: 0.25 },
69 |                 }}
70 |                 style={
71 |                   {
72 |                     stroke: "var(--theme-primary)",
73 |                     "--theme-primary": `hsl(var(--primary))`,
74 |                   } as React.CSSProperties
75 |                 }
76 |               />
77 |             </LineChart>
78 |           </ResponsiveContainer>
79 |         </div>
80 |       </CardContent>
81 |     </Card>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/app/dashboard/default/page.tsx:
--------------------------------------------------------------------------------
 1 | import CalendarDateRangePicker from "@/components/date-range-picker";
 2 | import TeamMembersCard from "./cards/theme-members";
 3 | import SubscriptionsCard from "./cards/subscriptions";
 4 | import TotalRevenueCard from "./cards/total-revenue";
 5 | import { ChatCard } from "./cards/chat";
 6 | import { Button } from "@/components/ui/button";
 7 | import MetricCard from "./cards/metric";
 8 | import { PaymentsCard } from "./cards/payment";
 9 | import { PaymentMethodCard } from "./cards/payment-method";
10 | import { generateMeta } from "@/lib/utils";
11 | 
12 | export async function generateMetadata() {
13 |   return generateMeta({
14 |     title: "Dashboard - Shadcn UI Kit Free",
15 |     description:
16 |       "The default dashboard template, built with React and Tailwind CSS, offers a sleek and efficient interface for monitoring key data and user interactions.",
17 |     canonical: "/default"
18 |   });
19 | }
20 | 
21 | export default function Page() {
22 |   return (
23 |     <>
24 |       <div className="mb-4 flex items-center justify-between space-y-2">
25 |         <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
26 |         <div className="flex items-center space-x-2">
27 |           <CalendarDateRangePicker />
28 |           <Button>Download</Button>
29 |         </div>
30 |       </div>
31 |       <div className="grid gap-4 lg:grid-cols-3">
32 |         <TeamMembersCard />
33 |         <SubscriptionsCard />
34 |         <TotalRevenueCard />
35 |         <ChatCard />
36 |         <div className="lg:col-span-2">
37 |           <MetricCard className="h-full" />
38 |         </div>
39 |         <div className="lg:col-span-2">
40 |           <PaymentsCard className="h-full" />
41 |         </div>
42 |         <PaymentMethodCard />
43 |       </div>
44 |     </>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/app/dashboard/error.tsx:
--------------------------------------------------------------------------------
 1 | "use client"; // Error components must be Client Components
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import { useEffect } from "react";
 5 | 
 6 | export default function Error({
 7 |   error,
 8 |   reset
 9 | }: {
10 |   error: Error & { digest?: string };
11 |   reset: () => void;
12 | }) {
13 |   useEffect(() => {
14 |     // Log the error to an error reporting service
15 |     console.error("-->", error);
16 |   }, [error]);
17 | 
18 |   return (
19 |     <div className="flex min-h-[99vh] flex-col items-start gap-3 px-2 py-8">
20 |       <div>
21 |         <h2 className="text-5xl font-bold">Oops!</h2>
22 |         <p className="text-muted-foreground">Something went wrong!</p>
23 |       </div>
24 |       <Button onClick={() => reset()}>Try again</Button>
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
 1 | import MainLayout from "@/components/main-layout";
 2 | 
 3 | export default function AuthLayout({
 4 |   children
 5 | }: Readonly<{
 6 |   children: React.ReactNode;
 7 | }>) {
 8 |   return <MainLayout>{children}</MainLayout>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/settings/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Separator } from "@/components/ui/separator";
 2 | import { SidebarNav } from "./sidebar-nav";
 3 | import { generateMeta } from "@/lib/utils";
 4 | 
 5 | export async function generateMetadata() {
 6 |   return generateMeta({
 7 |     title: "Settings Page",
 8 |     description:
 9 |       "Example of settings page and form created using react-hook-form and Zod validator. Built with Tailwind CSS and React.",
10 |     canonical: "/pages/settings"
11 |   });
12 | }
13 | 
14 | const sidebarNavItems = [
15 |   {
16 |     title: "Profile",
17 |     href: "/dashboard/pages/settings"
18 |   },
19 |   {
20 |     title: "Account",
21 |     href: "#"
22 |   },
23 |   {
24 |     title: "Appearance",
25 |     href: "#"
26 |   },
27 |   {
28 |     title: "Notifications",
29 |     href: "#"
30 |   },
31 |   {
32 |     title: "Display",
33 |     href: "#"
34 |   }
35 | ];
36 | 
37 | export default function SettingsLayout({ children }: { children: React.ReactNode }) {
38 |   return (
39 |     <>
40 |       <div className="space-y-0.5">
41 |         <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
42 |         <p className="text-muted-foreground">
43 |           Manage your account settings and set e-mail preferences.
44 |         </p>
45 |       </div>
46 |       <Separator className="my-6" />
47 |       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
48 |         <aside className="lg:w-1/5">
49 |           <SidebarNav items={sidebarNavItems} />
50 |         </aside>
51 |         <div className="flex-1 lg:max-w-2xl">{children}</div>
52 |       </div>
53 |     </>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/settings/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Separator } from "@/components/ui/separator";
 2 | import { ProfileForm } from "./profile-form";
 3 | 
 4 | export default function SettingsProfilePage() {
 5 |   return (
 6 |     <div className="space-y-6">
 7 |       <div>
 8 |         <h3 className="text-lg font-medium">Profile</h3>
 9 |         <p className="text-sm text-muted-foreground">
10 |           This is how others will see you on the site.
11 |         </p>
12 |       </div>
13 |       <Separator />
14 |       <ProfileForm />
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/settings/profile-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { useFieldArray, useForm } from "react-hook-form";
  6 | import { z } from "zod";
  7 | 
  8 | import { cn } from "@/lib/utils";
  9 | import { Button } from "@/components/ui/button";
 10 | import {
 11 |   Form,
 12 |   FormControl,
 13 |   FormDescription,
 14 |   FormField,
 15 |   FormItem,
 16 |   FormLabel,
 17 |   FormMessage
 18 | } from "@/components/ui/form";
 19 | import { Input } from "@/components/ui/input";
 20 | import {
 21 |   Select,
 22 |   SelectContent,
 23 |   SelectItem,
 24 |   SelectTrigger,
 25 |   SelectValue
 26 | } from "@/components/ui/select";
 27 | import { Textarea } from "@/components/ui/textarea";
 28 | 
 29 | const profileFormSchema = z.object({
 30 |   username: z
 31 |     .string()
 32 |     .min(2, {
 33 |       message: "Username must be at least 2 characters."
 34 |     })
 35 |     .max(30, {
 36 |       message: "Username must not be longer than 30 characters."
 37 |     }),
 38 |   email: z
 39 |     .string({
 40 |       required_error: "Please select an email to display."
 41 |     })
 42 |     .email(),
 43 |   bio: z.string().max(160).min(4),
 44 |   urls: z
 45 |     .array(
 46 |       z.object({
 47 |         value: z.string().url({ message: "Please enter a valid URL." })
 48 |       })
 49 |     )
 50 |     .optional()
 51 | });
 52 | 
 53 | type ProfileFormValues = z.infer<typeof profileFormSchema>;
 54 | 
 55 | // This can come from your database or API.
 56 | const defaultValues: Partial<ProfileFormValues> = {
 57 |   bio: "I own a computer.",
 58 |   urls: [{ value: "https://shadcn.com" }, { value: "http://twitter.com/shadcn" }]
 59 | };
 60 | 
 61 | export function ProfileForm() {
 62 |   const form = useForm<ProfileFormValues>({
 63 |     resolver: zodResolver(profileFormSchema),
 64 |     defaultValues,
 65 |     mode: "onChange"
 66 |   });
 67 | 
 68 |   const { fields, append } = useFieldArray({
 69 |     name: "urls",
 70 |     control: form.control
 71 |   });
 72 | 
 73 |   function onSubmit(data: ProfileFormValues) {}
 74 | 
 75 |   return (
 76 |     <Form {...form}>
 77 |       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
 78 |         <FormField
 79 |           control={form.control}
 80 |           name="username"
 81 |           render={({ field }) => (
 82 |             <FormItem>
 83 |               <FormLabel>Username</FormLabel>
 84 |               <FormControl>
 85 |                 <Input placeholder="shadcn" {...field} />
 86 |               </FormControl>
 87 |               <FormDescription>
 88 |                 This is your public display name. It can be your real name or a pseudonym. You can
 89 |                 only change this once every 30 days.
 90 |               </FormDescription>
 91 |               <FormMessage />
 92 |             </FormItem>
 93 |           )}
 94 |         />
 95 |         <FormField
 96 |           control={form.control}
 97 |           name="email"
 98 |           render={({ field }) => (
 99 |             <FormItem>
100 |               <FormLabel>Email</FormLabel>
101 |               <Select onValueChange={field.onChange} defaultValue={field.value}>
102 |                 <FormControl>
103 |                   <SelectTrigger>
104 |                     <SelectValue placeholder="Select a verified email to display" />
105 |                   </SelectTrigger>
106 |                 </FormControl>
107 |                 <SelectContent>
108 |                   <SelectItem value="m@example.com">m@example.com</SelectItem>
109 |                   <SelectItem value="m@google.com">m@google.com</SelectItem>
110 |                   <SelectItem value="m@support.com">m@support.com</SelectItem>
111 |                 </SelectContent>
112 |               </Select>
113 |               <FormDescription>
114 |                 You can manage verified email addresses in your{" "}
115 |                 <Link href="/examples/forms">email settings</Link>.
116 |               </FormDescription>
117 |               <FormMessage />
118 |             </FormItem>
119 |           )}
120 |         />
121 |         <FormField
122 |           control={form.control}
123 |           name="bio"
124 |           render={({ field }) => (
125 |             <FormItem>
126 |               <FormLabel>Bio</FormLabel>
127 |               <FormControl>
128 |                 <Textarea
129 |                   placeholder="Tell us a little bit about yourself"
130 |                   className="resize-none"
131 |                   {...field}
132 |                 />
133 |               </FormControl>
134 |               <FormDescription>
135 |                 You can <span>@mention</span> other users and organizations to link to them.
136 |               </FormDescription>
137 |               <FormMessage />
138 |             </FormItem>
139 |           )}
140 |         />
141 |         <div>
142 |           {fields.map((field, index) => (
143 |             <FormField
144 |               control={form.control}
145 |               key={field.id}
146 |               name={`urls.${index}.value`}
147 |               render={({ field }) => (
148 |                 <FormItem>
149 |                   <FormLabel className={cn(index !== 0 && "sr-only")}>URLs</FormLabel>
150 |                   <FormDescription className={cn(index !== 0 && "sr-only")}>
151 |                     Add links to your website, blog, or social media profiles.
152 |                   </FormDescription>
153 |                   <FormControl>
154 |                     <Input {...field} />
155 |                   </FormControl>
156 |                   <FormMessage />
157 |                 </FormItem>
158 |               )}
159 |             />
160 |           ))}
161 |           <Button
162 |             type="button"
163 |             variant="outline"
164 |             size="sm"
165 |             className="mt-2"
166 |             onClick={() => append({ value: "" })}>
167 |             Add URL
168 |           </Button>
169 |         </div>
170 |         <Button type="submit">Update profile</Button>
171 |       </form>
172 |     </Form>
173 |   );
174 | }
175 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/settings/sidebar-nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { usePathname } from "next/navigation";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | import { buttonVariants } from "@/components/ui/button";
 8 | 
 9 | interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
10 |   items: {
11 |     href: string;
12 |     title: string;
13 |   }[];
14 | }
15 | 
16 | export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
17 |   const pathname = usePathname();
18 | 
19 |   return (
20 |     <nav
21 |       className={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}
22 |       {...props}>
23 |       {items.map((item) => (
24 |         <Link
25 |           key={item.href}
26 |           href={item.href}
27 |           className={cn(
28 |             buttonVariants({ variant: "ghost" }),
29 |             pathname === item.href ? "bg-muted hover:bg-muted" : "hover:bg-muted",
30 |             "justify-start"
31 |           )}>
32 |           {item.title}
33 |         </Link>
34 |       ))}
35 |     </nav>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/users/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": 1,
  4 |     "name": "Stern Thireau",
  5 |     "email": "sthireau0@prlog.org",
  6 |     "country": "Portugal",
  7 |     "role": "Construction Foreman",
  8 |     "image": "/images/avatars/1.png",
  9 |     "status": "active",
 10 |     "plan_name": "Basic"
 11 |   },
 12 |   {
 13 |     "id": 2,
 14 |     "name": "Ford McKibbin",
 15 |     "email": "fmckibbin1@slate.com",
 16 |     "country": "Mexico",
 17 |     "role": "Project Manager",
 18 |     "image": "/images/avatars/2.png",
 19 |     "status": "pending",
 20 |     "plan_name": "Team"
 21 |   },
 22 |   {
 23 |     "id": 3,
 24 |     "name": "Foss Roglieri",
 25 |     "email": "froglieri2@xing.com",
 26 |     "country": "Brazil",
 27 |     "role": "Construction Expeditor",
 28 |     "image": "/images/avatars/3.png",
 29 |     "status": "active",
 30 |     "plan_name": "Basic"
 31 |   },
 32 |   {
 33 |     "id": 4,
 34 |     "name": "Maurits Elgey",
 35 |     "email": "melgey3@blogger.com",
 36 |     "country": "Poland",
 37 |     "role": "Construction Manager",
 38 |     "image": "/images/avatars/4.png",
 39 |     "status": "active",
 40 |     "plan_name": "Enterprise"
 41 |   },
 42 |   {
 43 |     "id": 5,
 44 |     "name": "Gun Kaasmann",
 45 |     "email": "gkaasmann4@economist.com",
 46 |     "country": "Russia",
 47 |     "role": "Construction Foreman",
 48 |     "image": "/images/avatars/5.png",
 49 |     "status": "pending",
 50 |     "plan_name": "Team"
 51 |   },
 52 |   {
 53 |     "id": 6,
 54 |     "name": "Edmund McCrae",
 55 |     "email": "emccrae5@woothemes.com",
 56 |     "country": "Poland",
 57 |     "role": "Project Manager",
 58 |     "image": "/images/avatars/6.png",
 59 |     "status": "pending",
 60 |     "plan_name": "Team"
 61 |   },
 62 |   {
 63 |     "id": 7,
 64 |     "name": "Samuel Totman",
 65 |     "email": "stotman6@wisc.edu",
 66 |     "country": "France",
 67 |     "role": "Surveyor",
 68 |     "image": "/images/avatars/7.png",
 69 |     "status": "active",
 70 |     "plan_name": "Basic"
 71 |   },
 72 |   {
 73 |     "id": 8,
 74 |     "name": "Patsy Cuardall",
 75 |     "email": "pcuardall7@barnesandnoble.com",
 76 |     "country": "Indonesia",
 77 |     "role": "Architect",
 78 |     "image": "/images/avatars/8.png",
 79 |     "status": "inactive",
 80 |     "plan_name": "Basic"
 81 |   },
 82 |   {
 83 |     "id": 9,
 84 |     "name": "Barnaby Carl",
 85 |     "email": "bcarl8@alexa.com",
 86 |     "country": "Peru",
 87 |     "role": "Subcontractor",
 88 |     "image": "/images/avatars/9.png",
 89 |     "status": "active",
 90 |     "plan_name": "Basic"
 91 |   },
 92 |   {
 93 |     "id": 10,
 94 |     "name": "Mary Stivens",
 95 |     "email": "mstivens9@facebook.com",
 96 |     "country": "Russia",
 97 |     "role": "Construction Manager",
 98 |     "image": "/images/avatars/10.png",
 99 |     "status": "active",
100 |     "plan_name": "Basic"
101 |   },
102 |   {
103 |     "id": 11,
104 |     "name": "Averil Caccavella",
105 |     "email": "acaccavellaa@shinystat.com",
106 |     "country": "China",
107 |     "role": "Construction Foreman",
108 |     "image": "/images/avatars/11.png",
109 |     "status": "active",
110 |     "plan_name": "Basic"
111 |   },
112 |   {
113 |     "id": 12,
114 |     "name": "Beulah Varian",
115 |     "email": "bvarianb@amazon.co.jp",
116 |     "country": "Palestinian Territory",
117 |     "role": "Architect",
118 |     "image": "/images/avatars/1.png",
119 |     "status": "inactive",
120 |     "plan_name": "Enterprise"
121 |   },
122 |   {
123 |     "id": 13,
124 |     "name": "Modesta Handy",
125 |     "email": "mhandyc@cloudflare.com",
126 |     "country": "Russia",
127 |     "role": "Engineer",
128 |     "image": "/images/avatars/2.png",
129 |     "status": "active",
130 |     "plan_name": "Basic"
131 |   },
132 |   {
133 |     "id": 14,
134 |     "name": "Neal Sievewright",
135 |     "email": "nsievewrightd@microsoft.com",
136 |     "country": "Philippines",
137 |     "role": "Project Manager",
138 |     "image": "/images/avatars/3.png",
139 |     "status": "active",
140 |     "plan_name": "Enterprise"
141 |   },
142 |   {
143 |     "id": 15,
144 |     "name": "Sisely Bonson",
145 |     "email": "sbonsone@mozilla.org",
146 |     "country": "Morocco",
147 |     "role": "Architect",
148 |     "image": "/images/avatars/4.png",
149 |     "status": "active",
150 |     "plan_name": "Enterprise"
151 |   },
152 |   {
153 |     "id": 16,
154 |     "name": "Charlena Maccaddie",
155 |     "email": "cmaccaddief@csmonitor.com",
156 |     "country": "Japan",
157 |     "role": "Construction Worker",
158 |     "image": "/images/avatars/5.png",
159 |     "status": "active",
160 |     "plan_name": "Basic"
161 |   },
162 |   {
163 |     "id": 17,
164 |     "name": "Durward Guenther",
165 |     "email": "dguentherg@howstuffworks.com",
166 |     "country": "Portugal",
167 |     "role": "Electrician",
168 |     "image": "/images/avatars/6.png",
169 |     "status": "inactive",
170 |     "plan_name": "Enterprise"
171 |   },
172 |   {
173 |     "id": 18,
174 |     "name": "Rheta Wathall",
175 |     "email": "rwathallh@alexa.com",
176 |     "country": "China",
177 |     "role": "Supervisor",
178 |     "image": "/images/avatars/7.png",
179 |     "status": "active",
180 |     "plan_name": "Basic"
181 |   },
182 |   {
183 |     "id": 19,
184 |     "name": "Hugibert Cuttings",
185 |     "email": "hcuttingsi@dropbox.com",
186 |     "country": "Sweden",
187 |     "role": "Construction Foreman",
188 |     "image": "/images/avatars/8.png",
189 |     "status": "inactive",
190 |     "plan_name": "Basic"
191 |   },
192 |   {
193 |     "id": 20,
194 |     "name": "Riane Winchcum",
195 |     "email": "rwinchcumj@people.com.cn",
196 |     "country": "Philippines",
197 |     "role": "Electrician",
198 |     "image": "/images/avatars/9.png",
199 |     "status": "active",
200 |     "plan_name": "Basic"
201 |   },
202 |   {
203 |     "id": 21,
204 |     "name": "Maurise Reinmar",
205 |     "email": "mreinmark@vk.com",
206 |     "country": "Finland",
207 |     "role": "Project Manager",
208 |     "image": "/images/avatars/10.png",
209 |     "status": "pending",
210 |     "plan_name": "Basic"
211 |   },
212 |   {
213 |     "id": 22,
214 |     "name": "Karita Flight",
215 |     "email": "kflightl@mail.ru",
216 |     "country": "France",
217 |     "role": "Architect",
218 |     "image": "/images/avatars/11.png",
219 |     "status": "active",
220 |     "plan_name": "Team"
221 |   },
222 |   {
223 |     "id": 23,
224 |     "name": "Innis Gillyett",
225 |     "email": "igillyettm@canalblog.com",
226 |     "country": "Ukraine",
227 |     "role": "Estimator",
228 |     "image": "/images/avatars/1.png",
229 |     "status": "active",
230 |     "plan_name": "Basic"
231 |   },
232 |   {
233 |     "id": 24,
234 |     "name": "Teriann Hamflett",
235 |     "email": "thamflettn@gmpg.org",
236 |     "country": "Indonesia",
237 |     "role": "Estimator",
238 |     "image": "/images/avatars/2.png",
239 |     "status": "active",
240 |     "plan_name": "Basic"
241 |   },
242 |   {
243 |     "id": 25,
244 |     "name": "Wynn McCrossan",
245 |     "email": "wmccrossano@nationalgeographic.com",
246 |     "country": "Poland",
247 |     "role": "Construction Expeditor",
248 |     "image": "/images/avatars/3.png",
249 |     "status": "active",
250 |     "plan_name": "Basic"
251 |   },
252 |   {
253 |     "id": 26,
254 |     "name": "Thane Peake",
255 |     "email": "tpeakep@state.gov",
256 |     "country": "China",
257 |     "role": "Estimator",
258 |     "image": "/images/avatars/4.png",
259 |     "status": "active",
260 |     "plan_name": "Team"
261 |   },
262 |   {
263 |     "id": 27,
264 |     "name": "Kalila Corradino",
265 |     "email": "kcorradinoq@sciencedaily.com",
266 |     "country": "Germany",
267 |     "role": "Construction Manager",
268 |     "image": "/images/avatars/5.png",
269 |     "status": "pending",
270 |     "plan_name": "Team"
271 |   },
272 |   {
273 |     "id": 28,
274 |     "name": "Patton Scatchar",
275 |     "email": "pscatcharr@t-online.de",
276 |     "country": "Sweden",
277 |     "role": "Project Manager",
278 |     "image": "/images/avatars/6.png",
279 |     "status": "active",
280 |     "plan_name": "Basic"
281 |   },
282 |   {
283 |     "id": 29,
284 |     "name": "Leona Margetts",
285 |     "email": "lmargettss@dailymail.co.uk",
286 |     "country": "Indonesia",
287 |     "role": "Construction Expeditor",
288 |     "image": "/images/avatars/7.png",
289 |     "status": "active",
290 |     "plan_name": "Team"
291 |   },
292 |   {
293 |     "id": 30,
294 |     "name": "Frieda Caught",
295 |     "email": "fcaughtt@smugmug.com",
296 |     "country": "China",
297 |     "role": "Construction Foreman",
298 |     "image": "/images/avatars/8.png",
299 |     "status": "active",
300 |     "plan_name": "Basic"
301 |   },
302 |   {
303 |     "id": 31,
304 |     "name": "Birch Shakle",
305 |     "email": "bshakleu@ucoz.ru",
306 |     "country": "Indonesia",
307 |     "role": "Supervisor",
308 |     "image": "/images/avatars/9.png",
309 |     "status": "active",
310 |     "plan_name": "Basic"
311 |   },
312 |   {
313 |     "id": 32,
314 |     "name": "Alessandro Roon",
315 |     "email": "aroonv@vkontakte.ru",
316 |     "country": "United States",
317 |     "role": "Construction Worker",
318 |     "image": "/images/avatars/10.png",
319 |     "status": "active",
320 |     "plan_name": "Basic"
321 |   },
322 |   {
323 |     "id": 33,
324 |     "name": "Oliviero Moran",
325 |     "email": "omoranw@chronoengine.com",
326 |     "country": "Liberia",
327 |     "role": "Estimator",
328 |     "image": "/images/avatars/11.png",
329 |     "status": "active",
330 |     "plan_name": "Basic"
331 |   },
332 |   {
333 |     "id": 34,
334 |     "name": "Frederich Tethcote",
335 |     "email": "ftethcotex@guardian.co.uk",
336 |     "country": "China",
337 |     "role": "Engineer",
338 |     "image": "/images/avatars/1.png",
339 |     "status": "active",
340 |     "plan_name": "Basic"
341 |   },
342 |   {
343 |     "id": 35,
344 |     "name": "Elonore Boase",
345 |     "email": "eboasey@networksolutions.com",
346 |     "country": "Guatemala",
347 |     "role": "Construction Manager",
348 |     "image": "/images/avatars/2.png",
349 |     "status": "inactive",
350 |     "plan_name": "Basic"
351 |   },
352 |   {
353 |     "id": 36,
354 |     "name": "Arny Sidebotton",
355 |     "email": "asidebottonz@marketwatch.com",
356 |     "country": "France",
357 |     "role": "Estimator",
358 |     "image": "/images/avatars/3.png",
359 |     "status": "pending",
360 |     "plan_name": "Basic"
361 |   },
362 |   {
363 |     "id": 37,
364 |     "name": "Karolina Lawlie",
365 |     "email": "klawlie10@bloglines.com",
366 |     "country": "Peru",
367 |     "role": "Estimator",
368 |     "image": "/images/avatars/4.png",
369 |     "status": "inactive",
370 |     "plan_name": "Basic"
371 |   },
372 |   {
373 |     "id": 38,
374 |     "name": "Andrew Langlands",
375 |     "email": "alanglands11@deliciousdays.com",
376 |     "country": "Russia",
377 |     "role": "Engineer",
378 |     "image": "/images/avatars/5.png",
379 |     "status": "active",
380 |     "plan_name": "Basic"
381 |   },
382 |   {
383 |     "id": 39,
384 |     "name": "Don Doughton",
385 |     "email": "ddoughton12@reddit.com",
386 |     "country": "Portugal",
387 |     "role": "Architect",
388 |     "image": "/images/avatars/6.png",
389 |     "status": "active",
390 |     "plan_name": "Basic"
391 |   },
392 |   {
393 |     "id": 40,
394 |     "name": "Letta Ofer",
395 |     "email": "lofer13@merriam-webster.com",
396 |     "country": "Bolivia",
397 |     "role": "Construction Foreman",
398 |     "image": "/images/avatars/7.png",
399 |     "status": "active",
400 |     "plan_name": "Basic"
401 |   }
402 | ]
403 | 


--------------------------------------------------------------------------------
/app/dashboard/pages/users/page.tsx:
--------------------------------------------------------------------------------
 1 | import { promises as fs } from "fs";
 2 | import path from "path";
 3 | 
 4 | import Link from "next/link";
 5 | import { Button } from "@/components/ui/button";
 6 | import { PlusCircledIcon } from "@radix-ui/react-icons";
 7 | import UsersDataTable from "./data-table";
 8 | import { generateMeta } from "@/lib/utils";
 9 | 
10 | export async function generateMetadata() {
11 |   return generateMeta({
12 |     title: "Users - Shadcn UI Kit Free",
13 |     description:
14 |       "A list of users created using the Tanstack Table. Tailwind is built on CSS and React.",
15 |     canonical: "/pages/users"
16 |   });
17 | }
18 | 
19 | async function getUsers() {
20 |   const data = await fs.readFile(path.join(process.cwd(), "app/dashboard/pages/users/data.json"));
21 |   return JSON.parse(data.toString());
22 | }
23 | 
24 | export default async function Page() {
25 |   const users = await getUsers();
26 | 
27 |   return (
28 |     <>
29 |       <div className="flex items-center justify-between space-y-2">
30 |         <h1 className="text-2xl font-bold tracking-tight">Users</h1>
31 |         <Button asChild>
32 |           <Link href="#">
33 |             <PlusCircledIcon className="me-2" /> Add New User
34 |           </Link>
35 |         </Button>
36 |       </div>
37 |       <UsersDataTable data={users} />
38 |     </>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.scss:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 20 14.3% 4.1%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 20 14.3% 4.1%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 20 14.3% 4.1%;
13 |     --primary: 24 9.8% 10%;
14 |     --primary-foreground: 60 9.1% 97.8%;
15 |     --secondary: 60 4.8% 95.9%;
16 |     --secondary-foreground: 24 9.8% 10%;
17 |     --muted: 60 4.8% 95.9%;
18 |     --muted-foreground: 25 5.3% 44.7%;
19 |     --accent: 60 4.8% 95.9%;
20 |     --accent-foreground: 24 9.8% 10%;
21 |     --destructive: 0 84.2% 60.2%;
22 |     --destructive-foreground: 60 9.1% 97.8%;
23 |     --border: 20 5.9% 90%;
24 |     --input: 20 5.9% 90%;
25 |     --ring: 20 14.3% 4.1%;
26 |     --radius: 0.5rem;
27 | 
28 |     --chart-1: 359 2% 40%;
29 |     --chart-2: 240 1% 74%;
30 |     --chart-3: 240 1% 58%;
31 |     --chart-4: 240 1% 42%;
32 |     --chart-5: 240 2% 26%;
33 | 
34 |     --sidebar-width: 19rem;
35 |   }
36 | }
37 | 
38 | @layer base {
39 |   * {
40 |     @apply border-border;
41 |   }
42 |   body {
43 |     @apply overflow-x-hidden bg-muted/70 text-foreground;
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Inter } from "next/font/google";
 2 | import "./globals.scss";
 3 | 
 4 | const inter = Inter({ subsets: ["latin"] });
 5 | 
 6 | export default function RootLayout({
 7 |   children
 8 | }: Readonly<{
 9 |   children: React.ReactNode;
10 | }>) {
11 |   return (
12 |     <html lang="en" suppressHydrationWarning>
13 |       <body className={inter.className}>{children}</body>
14 |     </html>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/components/anchor.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | import Link from "next/link";
 5 | import { usePathname } from "next/navigation";
 6 | import { ComponentProps } from "react";
 7 | 
 8 | type AnchorProps = ComponentProps<typeof Link> & {
 9 |   absolute?: boolean;
10 |   activeClassName?: string;
11 |   disabled?: boolean;
12 | };
13 | 
14 | export default function Anchor({
15 |   absolute,
16 |   className = "",
17 |   activeClassName = "",
18 |   disabled,
19 |   children,
20 |   ...props
21 | }: AnchorProps) {
22 |   const path = usePathname();
23 |   const isMatch = absolute
24 |     ? props.href.toString().split("/")[1] == path.split("/")[1]
25 |     : path === props.href;
26 | 
27 |   if (disabled)
28 |     return (
29 |       <div className={cn(className, "cursor-not-allowed")}>{children}</div>
30 |     );
31 |   return (
32 |     <Link className={cn(className, isMatch && activeClassName)} {...props}>
33 |       {children}
34 |     </Link>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/components/card-action-menus.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   DropdownMenu,
 3 |   DropdownMenuItem,
 4 |   DropdownMenuContent,
 5 |   DropdownMenuTrigger
 6 | } from "@/components/ui/dropdown-menu";
 7 | import { Button } from "@/components/ui/button";
 8 | import { Download, Ellipsis } from "lucide-react";
 9 | 
10 | export function CardOptionsMenu() {
11 |   return (
12 |     <div className="absolute end-4 top-2">
13 |       <DropdownMenu>
14 |         <DropdownMenuTrigger asChild>
15 |           <Button variant="ghost" size="sm">
16 |             <Ellipsis className="h-5 w-5" />
17 |           </Button>
18 |         </DropdownMenuTrigger>
19 |         <DropdownMenuContent>
20 |           <DropdownMenuItem>View detail</DropdownMenuItem>
21 |           <DropdownMenuItem>Download</DropdownMenuItem>
22 |           <DropdownMenuItem>Refresh</DropdownMenuItem>
23 |         </DropdownMenuContent>
24 |       </DropdownMenu>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export function ExportButton() {
30 |   return (
31 |     <div className="absolute end-4 top-2">
32 |       <DropdownMenu>
33 |         <DropdownMenuTrigger asChild>
34 |           <Button variant="outline" size="sm" className="!mt-0">
35 |             Export <Download className="ms-2 h-3 w-3" />
36 |           </Button>
37 |         </DropdownMenuTrigger>
38 |         <DropdownMenuContent>
39 |           <DropdownMenuItem>Excel</DropdownMenuItem>
40 |           <DropdownMenuItem>PDF</DropdownMenuItem>
41 |         </DropdownMenuContent>
42 |       </DropdownMenu>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/components/date-range-picker.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { addDays, format } from "date-fns";
 5 | import { DateRange } from "react-day-picker";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | import {
 9 |   Popover,
10 |   PopoverContent,
11 |   PopoverTrigger,
12 | } from "@/components/ui/popover";
13 | import { Button } from "@/components/ui/button";
14 | import { CalendarIcon } from "lucide-react";
15 | import { Calendar } from "@/components/ui/calendar";
16 | 
17 | export default function CalendarDateRangePicker({
18 |   className,
19 | }: React.HTMLAttributes<HTMLDivElement>) {
20 |   const [date, setDate] = React.useState<DateRange | undefined>({
21 |     from: new Date(),
22 |     to: addDays(new Date(), 20),
23 |   });
24 | 
25 |   return (
26 |     <div className={cn("grid gap-2", className)}>
27 |       <Popover>
28 |         <PopoverTrigger asChild>
29 |           <Button
30 |             id="date"
31 |             variant={"outline"}
32 |             className={cn(
33 |               "w-[260px] justify-start text-left font-normal",
34 |               !date && "text-muted-foreground",
35 |             )}
36 |           >
37 |             <CalendarIcon className="mr-2 h-4 w-4" />
38 |             {date?.from ? (
39 |               date.to ? (
40 |                 <>
41 |                   {format(date.from, "LLL dd, y")} -{" "}
42 |                   {format(date.to, "LLL dd, y")}
43 |                 </>
44 |               ) : (
45 |                 format(date.from, "LLL dd, y")
46 |               )
47 |             ) : (
48 |               <span>Pick a date</span>
49 |             )}
50 |           </Button>
51 |         </PopoverTrigger>
52 |         <PopoverContent className="w-auto p-0" align="end">
53 |           <Calendar
54 |             initialFocus
55 |             mode="range"
56 |             defaultMonth={date?.from}
57 |             selected={date}
58 |             onSelect={setDate}
59 |             numberOfMonths={2}
60 |           />
61 |         </PopoverContent>
62 |       </Popover>
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/components/icon.tsx:
--------------------------------------------------------------------------------
 1 | import { icons } from "lucide-react";
 2 | 
 3 | type IconProps = {
 4 |   name: string;
 5 |   className?: string;
 6 | };
 7 | 
 8 | type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 9 | 
10 | type IconsType = {
11 |   [key: string]: IconType;
12 | };
13 | 
14 | const iconMap: IconsType = icons;
15 | 
16 | const Icon: React.FC<IconProps> = ({ name, className }) => {
17 |   const LucideIcon = iconMap[name];
18 | 
19 |   if (!LucideIcon) {
20 |     return null;
21 |   }
22 | 
23 |   return <LucideIcon className={className} />;
24 | };
25 | 
26 | export default Icon;
27 | 


--------------------------------------------------------------------------------
/components/layout/header.tsx:
--------------------------------------------------------------------------------
 1 | import { LockIcon, Menu } from "lucide-react";
 2 | import {
 3 |   DropdownMenu,
 4 |   DropdownMenuContent,
 5 |   DropdownMenuItem,
 6 |   DropdownMenuLabel,
 7 |   DropdownMenuSeparator,
 8 |   DropdownMenuTrigger
 9 | } from "@/components/ui/dropdown-menu";
10 | import { Button } from "@/components/ui/button";
11 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
12 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
13 | import Search from "./search";
14 | import Logo from "./logo";
15 | import { SidebarNavLink } from "./sidebar";
16 | import { page_routes } from "@/lib/routes-config";
17 | import { Fragment } from "react";
18 | import Link from "next/link";
19 | 
20 | export default function Header() {
21 |   return (
22 |     <div className="sticky top-0 z-50 flex flex-col">
23 |       <header className="flex h-14 items-center gap-4 border-b bg-background px-4 lg:h-[60px]">
24 |         <Sheet>
25 |           <SheetTrigger asChild>
26 |             <Button variant="outline" size="icon" className="shrink-0 lg:hidden">
27 |               <Menu className="h-5 w-5" />
28 |               <span className="sr-only">Toggle navigation menu</span>
29 |             </Button>
30 |           </SheetTrigger>
31 |           <SheetContent side="left" className="flex flex-col overflow-auto">
32 |             <Logo className="px-0" />
33 |             <nav className="grid gap-2 text-lg font-medium">
34 |               {page_routes.map((route) => (
35 |                 <Fragment key={route.title}>
36 |                   <div className="px-2 py-4 font-medium">{route.title}</div>
37 |                   <nav className="*:flex *:items-center *:gap-3 *:rounded-lg *:px-3 *:py-2 *:transition-all hover:*:bg-muted">
38 |                     {route.items.map((item, key) => (
39 |                       <SidebarNavLink key={key} item={item} />
40 |                     ))}
41 |                   </nav>
42 |                 </Fragment>
43 |               ))}
44 |             </nav>
45 |             <div className="mt-auto">
46 |               <Card>
47 |                 <CardHeader>
48 |                   <CardTitle>Get Shadcn UI Kit Pro</CardTitle>
49 |                   <CardDescription>
50 |                     Need more pages and components? Then you can get the pro.
51 |                   </CardDescription>
52 |                 </CardHeader>
53 |                 <CardContent className="space-y-2">
54 |                   <Button
55 |                     size="sm"
56 |                     className="w-full items-center bg-gradient-to-r from-indigo-700 via-purple-500 to-pink-700 hover:opacity-90"
57 |                     asChild>
58 |                     <Link href="https://shadcnuikit.com/pricing" target="_blank">
59 |                       <LockIcon className="me-2 h-4 w-4" /> Get Pro
60 |                     </Link>
61 |                   </Button>
62 |                   <Button size="sm" className="w-full" variant="outline" asChild>
63 |                     <Link href="https://shadcnuikit.com/" target="_blank">
64 |                       Learn More
65 |                     </Link>
66 |                   </Button>
67 |                 </CardContent>
68 |               </Card>
69 |             </div>
70 |           </SheetContent>
71 |         </Sheet>
72 |         <div className="w-full flex-1">
73 |           <Search />
74 |         </div>
75 |         <DropdownMenu>
76 |           <DropdownMenuTrigger asChild>
77 |             <figure className="cursor-pointer">
78 |               <img src={`/images/avatars/1.png`} className="h-10 w-10" alt="..." />
79 |             </figure>
80 |           </DropdownMenuTrigger>
81 |           <DropdownMenuContent align="end">
82 |             <DropdownMenuLabel>My Account</DropdownMenuLabel>
83 |             <DropdownMenuSeparator />
84 |             <DropdownMenuItem>Settings</DropdownMenuItem>
85 |             <DropdownMenuItem>Support</DropdownMenuItem>
86 |             <DropdownMenuSeparator />
87 |             <DropdownMenuItem>Logout</DropdownMenuItem>
88 |           </DropdownMenuContent>
89 |         </DropdownMenu>
90 |       </header>
91 |     </div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/components/layout/logo.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import Link from "next/link";
 3 | import { Badge } from "../ui/badge";
 4 | 
 5 | type LogoProps = {
 6 |   className?: string;
 7 | };
 8 | 
 9 | export default function Logo({ className }: LogoProps) {
10 |   return (
11 |     <Link href="/" className={cn("flex items-center gap-2 px-5 py-4 font-bold", className)}>
12 |       <img src="/logo.png" className="block h-5 w-5" alt="shadcn ui kit logo" />
13 |       Shadcn UI Kit <Badge variant="outline">Free</Badge>
14 |     </Link>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/layout/search.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React from "react";
 4 | import { CommandIcon, SearchIcon, icons } from "lucide-react";
 5 | import { Input } from "@/components/ui/input";
 6 | import { page_routes } from "@/lib/routes-config";
 7 | import { useEffect, useState } from "react";
 8 | 
 9 | import {
10 |   CommandDialog,
11 |   CommandEmpty,
12 |   CommandGroup,
13 |   CommandInput,
14 |   CommandItem,
15 |   CommandList,
16 |   CommandSeparator
17 | } from "@/components/ui/command";
18 | import { useRouter } from "next/navigation";
19 | 
20 | type CommandItemProps = {
21 |   item: {
22 |     title: string;
23 |     href: string;
24 |     icon?: string;
25 |   };
26 | };
27 | 
28 | export default function Search() {
29 |   const [open, setOpen] = useState(false);
30 |   const router = useRouter();
31 | 
32 |   useEffect(() => {
33 |     const down = (e: KeyboardEvent) => {
34 |       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
35 |         e.preventDefault();
36 |         setOpen((open) => !open);
37 |       }
38 |     };
39 |     document.addEventListener("keydown", down);
40 |     return () => document.removeEventListener("keydown", down);
41 |   }, []);
42 | 
43 |   const CommandItemComponent: React.FC<CommandItemProps> = ({ item }) => {
44 |     // @ts-expect-error
45 |     const LucideIcon = icons[item.icon];
46 | 
47 |     return (
48 |       <CommandItem
49 |         onSelect={() => {
50 |           setOpen(false);
51 |           router.push(item.href);
52 |         }}>
53 |         {item.icon && <LucideIcon className="me-2 !h-4 !w-4" />}
54 |         <span>{item.title}</span>
55 |       </CommandItem>
56 |     );
57 |   };
58 | 
59 |   return (
60 |     <div>
61 |       <div className="relative max-w-sm flex-1">
62 |         <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500 dark:text-neutral-400" />
63 |         <Input
64 |           className="h-9 w-full cursor-pointer rounded-md border bg-muted pl-10 pr-4 text-sm shadow-sm"
65 |           placeholder="Search..."
66 |           type="search"
67 |           onFocus={() => setOpen(true)}
68 |         />
69 |         <div className="absolute right-2 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 rounded-sm bg-zinc-200 p-1 font-mono text-xs font-medium dark:bg-neutral-700 sm:flex">
70 |           <CommandIcon className="h-3 w-3" />
71 |           <span>k</span>
72 |         </div>
73 |       </div>
74 |       <CommandDialog open={open} onOpenChange={setOpen}>
75 |         <CommandInput placeholder="Type a command or search..." />
76 |         <CommandList>
77 |           <CommandEmpty>No results found.</CommandEmpty>
78 |           {page_routes.map((route) => (
79 |             <React.Fragment key={route.title}>
80 |               <CommandGroup heading={route.title}>
81 |                 {route.items.map((item, key) => (
82 |                   <CommandItemComponent key={key} item={item} />
83 |                 ))}
84 |               </CommandGroup>
85 |               <CommandSeparator />
86 |             </React.Fragment>
87 |           ))}
88 |         </CommandList>
89 |       </CommandDialog>
90 |     </div>
91 |   );
92 | }
93 | 


--------------------------------------------------------------------------------
/components/layout/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { Fragment } from "react";
  2 | import Link from "next/link";
  3 | 
  4 | import { ScrollArea } from "@/components/ui/scroll-area";
  5 | import { page_routes } from "@/lib/routes-config";
  6 | import Anchor from "../anchor";
  7 | import Logo from "./logo";
  8 | import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
  9 | import { Button } from "../ui/button";
 10 | import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 11 | import Icon from "../icon";
 12 | import { ChevronDown, LockIcon } from "lucide-react";
 13 | import { Badge } from "../ui/badge";
 14 | 
 15 | type SidebarNavLinkProps = {
 16 |   item: {
 17 |     title: string;
 18 |     href: string;
 19 |     icon?: string;
 20 |     isComing?: boolean;
 21 |   };
 22 | };
 23 | 
 24 | export const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({ item }: SidebarNavLinkProps) => {
 25 |   return (
 26 |     <Anchor
 27 |       href={item.href}
 28 |       key={item.title + item.href}
 29 |       activeClassName="!bg-primary text-primary-foreground">
 30 |       {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
 31 |       {item.title}
 32 |       {item.isComing && (
 33 |         <Badge className="ms-auto opacity-50" variant="outline">
 34 |           Coming
 35 |         </Badge>
 36 |       )}
 37 |     </Anchor>
 38 |   );
 39 | };
 40 | 
 41 | export default function Sidebar() {
 42 |   return (
 43 |     <div className="fixed hidden h-screen lg:block">
 44 |       <ScrollArea className="h-full w-[--sidebar-width] border-r bg-background px-4">
 45 |         <Logo />
 46 |         {page_routes.map((route) => (
 47 |           <Fragment key={route.title}>
 48 |             <div className="px-2 py-4 font-medium">{route.title}</div>
 49 |             <div className="*:flex *:items-center *:gap-3 *:rounded-lg *:px-3 *:py-2 *:transition-all hover:*:bg-muted">
 50 |               {route.items.map((item, key) => {
 51 |                 return (
 52 |                   <Fragment key={item.title}>
 53 |                     {item.items?.length ? (
 54 |                       <Collapsible className="group !block transition-all hover:data-[state=open]:bg-transparent">
 55 |                         <CollapsibleTrigger className="flex w-full items-center gap-3">
 56 |                           {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
 57 |                           {item.title}
 58 |                           <ChevronDown className="ms-auto h-4 w-4 transition-transform group-data-[state=closed]:rotate-90" />
 59 |                         </CollapsibleTrigger>
 60 |                         <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
 61 |                           <div className="py-2 *:flex *:items-center *:gap-3 *:rounded-lg *:px-7 *:py-2 *:transition-all hover:*:bg-muted">
 62 |                             {item.items.map((item, key) => (
 63 |                               <SidebarNavLink key={key} item={item} />
 64 |                             ))}
 65 |                           </div>
 66 |                         </CollapsibleContent>
 67 |                       </Collapsible>
 68 |                     ) : (
 69 |                       <SidebarNavLink key={key} item={item} />
 70 |                     )}
 71 |                   </Fragment>
 72 |                 );
 73 |               })}
 74 |             </div>
 75 |           </Fragment>
 76 |         ))}
 77 |         <div className="sticky bottom-0 mt-10">
 78 |           <Card>
 79 |             <CardHeader>
 80 |               <CardTitle>Get Shadcn UI Kit Pro</CardTitle>
 81 |               <CardDescription>
 82 |                 Need more pages and components? Then you can get the pro.
 83 |               </CardDescription>
 84 |             </CardHeader>
 85 |             <CardContent className="space-y-2">
 86 |               <Button
 87 |                 size="sm"
 88 |                 className="w-full items-center bg-gradient-to-r from-indigo-700 via-purple-500 to-pink-700 hover:opacity-90"
 89 |                 asChild>
 90 |                 <Link href="https://shadcnuikit.com/pricing" target="_blank">
 91 |                   <LockIcon className="me-2 h-4 w-4" /> Get Pro
 92 |                 </Link>
 93 |               </Button>
 94 |               <Button size="sm" className="w-full" variant="outline" asChild>
 95 |                 <Link href="https://shadcnuikit.com/" target="_blank">
 96 |                   Learn More
 97 |                 </Link>
 98 |               </Button>
 99 |             </CardContent>
100 |           </Card>
101 |         </div>
102 |       </ScrollArea>
103 |     </div>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/components/main-layout.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Sidebar from "./layout/sidebar";
 4 | import Header from "./layout/header";
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | export default function MainLayout({ children }: { children: React.ReactNode }) {
 8 |   return (
 9 |     <>
10 |       <div className="flex h-screen">
11 |         <Sidebar />
12 |         <div className="w-full lg:ps-[--sidebar-width]">
13 |           <Header />
14 |           <main className={cn("min-h-full p-4")}>{children}</main>
15 |         </div>
16 |       </div>
17 |     </>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/components/providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { ThemeProvider } from "next-themes";
 4 | 
 5 | export default function Providers({ children }: { children: React.ReactNode }) {
 6 |   return (
 7 |     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
 8 |       {children}
 9 |     </ThemeProvider>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import * as React from 'react';
 4 | import { ThemeProvider as NextThemesProvider } from 'next-themes';
 5 | import { type ThemeProviderProps } from 'next-themes/dist/types';
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion";
 5 | import { ChevronDown } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const Accordion = AccordionPrimitive.Root;
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ));
21 | AccordionItem.displayName = "AccordionItem";
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className,
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ));
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ));
55 | 
56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
57 | 
58 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
59 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | import { cva, VariantProps } from "class-variance-authority";
 8 | 
 9 | const Avatar = React.forwardRef<
10 |   React.ElementRef<typeof AvatarPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <AvatarPrimitive.Root
14 |     ref={ref}
15 |     className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
16 |     {...props}
17 |   />
18 | ));
19 | Avatar.displayName = AvatarPrimitive.Root.displayName;
20 | 
21 | const AvatarImage = React.forwardRef<
22 |   React.ElementRef<typeof AvatarPrimitive.Image>,
23 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24 | >(({ className, ...props }, ref) => (
25 |   <AvatarPrimitive.Image
26 |     ref={ref}
27 |     className={cn("aspect-square h-full w-full", className)}
28 |     {...props}
29 |   />
30 | ));
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName;
32 | 
33 | const AvatarFallback = React.forwardRef<
34 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
35 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36 | >(({ className, ...props }, ref) => (
37 |   <AvatarPrimitive.Fallback
38 |     ref={ref}
39 |     className={cn(
40 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
41 |       className
42 |     )}
43 |     {...props}
44 |   />
45 | ));
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
47 | 
48 | const indicatorVariants = cva("w-3 h-3 absolute rounded-full end-0 bottom-0", {
49 |   variants: {
50 |     variant: {
51 |       success: "bg-green-400",
52 |       danger: "bg-red-400",
53 |       warning: "bg-orange-400"
54 |     }
55 |   }
56 | });
57 | 
58 | export interface AvatarIndicatorProps
59 |   extends React.HTMLAttributes<HTMLDivElement>,
60 |     VariantProps<typeof indicatorVariants> {
61 |   variant?: "success" | "danger" | "warning" | null;
62 | }
63 | 
64 | const AvatarIndicator = React.forwardRef<HTMLDivElement, AvatarIndicatorProps>(
65 |   ({ variant, className, ...props }, ref) => (
66 |     <div ref={ref} className={cn(indicatorVariants({ variant, className }))} {...props}></div>
67 |   )
68 | );
69 | AvatarIndicator.displayName = AvatarPrimitive.Fallback.displayName;
70 | 
71 | export { Avatar, AvatarImage, AvatarFallback, AvatarIndicator };
72 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, type VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
12 |         secondary:
13 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 |         destructive:
15 |           "border-transparent bg-red-100 text-red-500 hover:bg-destructive/80 dark:bg-red-950 dark:text-white",
16 |         success:
17 |           "border-transparent bg-green-100 text-green-foreground hover:bg-green/80 dark:bg-green-950",
18 |         warning:
19 |           "border-transparent bg-orange-100 text-orange-foreground hover:bg-orange/80 dark:bg-orange-950",
20 |         outline: "text-foreground"
21 |       }
22 |     },
23 |     defaultVariants: {
24 |       variant: "default"
25 |     }
26 |   }
27 | );
28 | 
29 | export interface BadgeProps
30 |   extends React.HTMLAttributes<HTMLDivElement>,
31 |     VariantProps<typeof badgeVariants> {}
32 | 
33 | function Badge({ className, variant, ...props }: BadgeProps) {
34 |   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
35 | }
36 | 
37 | export { Badge, badgeVariants };
38 | 


--------------------------------------------------------------------------------
/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { Slot } from "@radix-ui/react-slot";
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode;
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
 13 | Breadcrumb.displayName = "Breadcrumb";
 14 | 
 15 | const BreadcrumbList = React.forwardRef<
 16 |   HTMLOListElement,
 17 |   React.ComponentPropsWithoutRef<"ol">
 18 | >(({ className, ...props }, ref) => (
 19 |   <ol
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23 |       className,
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ));
 28 | BreadcrumbList.displayName = "BreadcrumbList";
 29 | 
 30 | const BreadcrumbItem = React.forwardRef<
 31 |   HTMLLIElement,
 32 |   React.ComponentPropsWithoutRef<"li">
 33 | >(({ className, ...props }, ref) => (
 34 |   <li
 35 |     ref={ref}
 36 |     className={cn("inline-flex items-center gap-1.5", className)}
 37 |     {...props}
 38 |   />
 39 | ));
 40 | BreadcrumbItem.displayName = "BreadcrumbItem";
 41 | 
 42 | const BreadcrumbLink = React.forwardRef<
 43 |   HTMLAnchorElement,
 44 |   React.ComponentPropsWithoutRef<"a"> & {
 45 |     asChild?: boolean;
 46 |   }
 47 | >(({ asChild, className, ...props }, ref) => {
 48 |   const Comp = asChild ? Slot : "a";
 49 | 
 50 |   return (
 51 |     <Comp
 52 |       ref={ref}
 53 |       className={cn("transition-colors hover:text-foreground", className)}
 54 |       {...props}
 55 |     />
 56 |   );
 57 | });
 58 | BreadcrumbLink.displayName = "BreadcrumbLink";
 59 | 
 60 | const BreadcrumbPage = React.forwardRef<
 61 |   HTMLSpanElement,
 62 |   React.ComponentPropsWithoutRef<"span">
 63 | >(({ className, ...props }, ref) => (
 64 |   <span
 65 |     ref={ref}
 66 |     role="link"
 67 |     aria-disabled="true"
 68 |     aria-current="page"
 69 |     className={cn("font-normal text-foreground", className)}
 70 |     {...props}
 71 |   />
 72 | ));
 73 | BreadcrumbPage.displayName = "BreadcrumbPage";
 74 | 
 75 | const BreadcrumbSeparator = ({
 76 |   children,
 77 |   className,
 78 |   ...props
 79 | }: React.ComponentProps<"li">) => (
 80 |   <li
 81 |     role="presentation"
 82 |     aria-hidden="true"
 83 |     className={cn("[&>svg]:size-3.5", className)}
 84 |     {...props}
 85 |   >
 86 |     {children ?? <ChevronRight />}
 87 |   </li>
 88 | );
 89 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 90 | 
 91 | const BreadcrumbEllipsis = ({
 92 |   className,
 93 |   ...props
 94 | }: React.ComponentProps<"span">) => (
 95 |   <span
 96 |     role="presentation"
 97 |     aria-hidden="true"
 98 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
 99 |     {...props}
100 |   >
101 |     <MoreHorizontal className="h-4 w-4" />
102 |     <span className="sr-only">More</span>
103 |   </span>
104 | );
105 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
106 | 
107 | export {
108 |   Breadcrumb,
109 |   BreadcrumbList,
110 |   BreadcrumbItem,
111 |   BreadcrumbLink,
112 |   BreadcrumbPage,
113 |   BreadcrumbSeparator,
114 |   BreadcrumbEllipsis,
115 | };
116 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 |         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
15 |         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
16 |         ghost: "hover:bg-accent hover:text-accent-foreground",
17 |         link: "text-primary underline-offset-4 hover:underline"
18 |       },
19 |       size: {
20 |         default: "h-10 px-4 py-2",
21 |         sm: "h-9 rounded-md px-3",
22 |         lg: "h-11 rounded-md px-8",
23 |         icon: "h-10 w-10"
24 |       }
25 |     },
26 |     defaultVariants: {
27 |       variant: "default",
28 |       size: "default"
29 |     }
30 |   }
31 | );
32 | 
33 | export interface ButtonProps
34 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
35 |     VariantProps<typeof buttonVariants> {
36 |   asChild?: boolean;
37 | }
38 | 
39 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
40 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
41 |     const Comp = asChild ? Slot : "button";
42 |     return (
43 |       <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
44 |     );
45 |   }
46 | );
47 | Button.displayName = "Button";
48 | 
49 | export { Button, buttonVariants };
50 | 


--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ChevronLeft, ChevronRight } from "lucide-react";
 5 | import { DayPicker } from "react-day-picker";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | import { buttonVariants } from "@/components/ui/button";
 9 | 
10 | export type CalendarProps = React.ComponentProps<typeof DayPicker>;
11 | 
12 | function Calendar({
13 |   className,
14 |   classNames,
15 |   showOutsideDays = true,
16 |   ...props
17 | }: CalendarProps) {
18 |   return (
19 |     <DayPicker
20 |       showOutsideDays={showOutsideDays}
21 |       className={cn("p-3", className)}
22 |       classNames={{
23 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
24 |         month: "space-y-4",
25 |         caption: "flex justify-center pt-1 relative items-center",
26 |         caption_label: "text-sm font-medium",
27 |         nav: "space-x-1 flex items-center",
28 |         nav_button: cn(
29 |           buttonVariants({ variant: "outline" }),
30 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
31 |         ),
32 |         nav_button_previous: "absolute left-1",
33 |         nav_button_next: "absolute right-1",
34 |         table: "w-full border-collapse space-y-1",
35 |         head_row: "flex",
36 |         head_cell:
37 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
38 |         row: "flex w-full mt-2",
39 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
40 |         day: cn(
41 |           buttonVariants({ variant: "ghost" }),
42 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
43 |         ),
44 |         day_range_end: "day-range-end",
45 |         day_selected:
46 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
47 |         day_today: "bg-accent text-accent-foreground",
48 |         day_outside:
49 |           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
50 |         day_disabled: "text-muted-foreground opacity-50",
51 |         day_range_middle:
52 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
53 |         day_hidden: "invisible",
54 |         ...classNames,
55 |       }}
56 |       components={{
57 |         IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
58 |         IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
59 |       }}
60 |       {...props}
61 |     />
62 |   );
63 | }
64 | Calendar.displayName = "Calendar";
65 | 
66 | export { Calendar };
67 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
 6 |   ({ className, ...props }, ref) => (
 7 |     <div
 8 |       ref={ref}
 9 |       className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
10 |       {...props}
11 |     />
12 |   )
13 | );
14 | Card.displayName = "Card";
15 | 
16 | const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
17 |   ({ className, ...props }, ref) => (
18 |     <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
19 |   )
20 | );
21 | CardHeader.displayName = "CardHeader";
22 | 
23 | const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
24 |   ({ className, ...props }, ref) => (
25 |     <h3
26 |       ref={ref}
27 |       className={cn("text-lg font-bold leading-none tracking-tight", className)}
28 |       {...props}
29 |     />
30 |   )
31 | );
32 | CardTitle.displayName = "CardTitle";
33 | 
34 | const CardDescription = React.forwardRef<
35 |   HTMLParagraphElement,
36 |   React.HTMLAttributes<HTMLParagraphElement>
37 | >(({ className, ...props }, ref) => (
38 |   <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
39 | ));
40 | CardDescription.displayName = "CardDescription";
41 | 
42 | const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
43 |   ({ className, ...props }, ref) => (
44 |     <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
45 |   )
46 | );
47 | CardContent.displayName = "CardContent";
48 | 
49 | const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
50 |   ({ className, ...props }, ref) => (
51 |     <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
52 |   )
53 | );
54 | CardFooter.displayName = "CardFooter";
55 | 
56 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
57 | 


--------------------------------------------------------------------------------
/components/ui/chart.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as RechartsPrimitive from "recharts";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | // Format: { THEME_NAME: CSS_SELECTOR }
  9 | const THEMES = { light: "", dark: ".dark" } as const;
 10 | 
 11 | export type ChartConfig = {
 12 |   [k in string]: {
 13 |     label?: React.ReactNode;
 14 |     icon?: React.ComponentType;
 15 |   } & (
 16 |     | { color?: string; theme?: never }
 17 |     | { color?: never; theme: Record<keyof typeof THEMES, string> }
 18 |   );
 19 | };
 20 | 
 21 | type ChartContextProps = {
 22 |   config: ChartConfig;
 23 | };
 24 | 
 25 | const ChartContext = React.createContext<ChartContextProps | null>(null);
 26 | 
 27 | function useChart() {
 28 |   const context = React.useContext(ChartContext);
 29 | 
 30 |   if (!context) {
 31 |     throw new Error("useChart must be used within a <ChartContainer />");
 32 |   }
 33 | 
 34 |   return context;
 35 | }
 36 | 
 37 | const ChartContainer = React.forwardRef<
 38 |   HTMLDivElement,
 39 |   React.ComponentProps<"div"> & {
 40 |     config: ChartConfig;
 41 |     children: React.ComponentProps<
 42 |       typeof RechartsPrimitive.ResponsiveContainer
 43 |     >["children"];
 44 |   }
 45 | >(({ id, className, children, config, ...props }, ref) => {
 46 |   const uniqueId = React.useId();
 47 |   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 48 | 
 49 |   return (
 50 |     <ChartContext.Provider value={{ config }}>
 51 |       <div
 52 |         data-chart={chartId}
 53 |         ref={ref}
 54 |         className={cn(
 55 |           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
 56 |           className,
 57 |         )}
 58 |         {...props}
 59 |       >
 60 |         <ChartStyle id={chartId} config={config} />
 61 |         <RechartsPrimitive.ResponsiveContainer>
 62 |           {children}
 63 |         </RechartsPrimitive.ResponsiveContainer>
 64 |       </div>
 65 |     </ChartContext.Provider>
 66 |   );
 67 | });
 68 | ChartContainer.displayName = "Chart";
 69 | 
 70 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 71 |   const colorConfig = Object.entries(config).filter(
 72 |     ([_, config]) => config.theme || config.color,
 73 |   );
 74 | 
 75 |   if (!colorConfig.length) {
 76 |     return null;
 77 |   }
 78 | 
 79 |   return (
 80 |     <style
 81 |       dangerouslySetInnerHTML={{
 82 |         __html: Object.entries(THEMES)
 83 |           .map(
 84 |             ([theme, prefix]) => `
 85 | ${prefix} [data-chart=${id}] {
 86 | ${colorConfig
 87 |   .map(([key, itemConfig]) => {
 88 |     const color =
 89 |       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
 90 |       itemConfig.color;
 91 |     return color ? `  --color-${key}: ${color};` : null;
 92 |   })
 93 |   .join("\n")}
 94 | }
 95 | `,
 96 |           )
 97 |           .join("\n"),
 98 |       }}
 99 |     />
100 |   );
101 | };
102 | 
103 | const ChartTooltip = RechartsPrimitive.Tooltip;
104 | 
105 | const ChartTooltipContent = React.forwardRef<
106 |   HTMLDivElement,
107 |   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
108 |     React.ComponentProps<"div"> & {
109 |       hideLabel?: boolean;
110 |       hideIndicator?: boolean;
111 |       indicator?: "line" | "dot" | "dashed";
112 |       nameKey?: string;
113 |       labelKey?: string;
114 |     }
115 | >(
116 |   (
117 |     {
118 |       active,
119 |       payload,
120 |       className,
121 |       indicator = "dot",
122 |       hideLabel = false,
123 |       hideIndicator = false,
124 |       label,
125 |       labelFormatter,
126 |       labelClassName,
127 |       formatter,
128 |       color,
129 |       nameKey,
130 |       labelKey,
131 |     },
132 |     ref,
133 |   ) => {
134 |     const { config } = useChart();
135 | 
136 |     const tooltipLabel = React.useMemo(() => {
137 |       if (hideLabel || !payload?.length) {
138 |         return null;
139 |       }
140 | 
141 |       const [item] = payload;
142 |       const key = `${labelKey || item.dataKey || item.name || "value"}`;
143 |       const itemConfig = getPayloadConfigFromPayload(config, item, key);
144 |       const value =
145 |         !labelKey && typeof label === "string"
146 |           ? config[label as keyof typeof config]?.label || label
147 |           : itemConfig?.label;
148 | 
149 |       if (labelFormatter) {
150 |         return (
151 |           <div className={cn("font-medium", labelClassName)}>
152 |             {labelFormatter(value, payload)}
153 |           </div>
154 |         );
155 |       }
156 | 
157 |       if (!value) {
158 |         return null;
159 |       }
160 | 
161 |       return <div className={cn("font-medium", labelClassName)}>{value}</div>;
162 |     }, [
163 |       label,
164 |       labelFormatter,
165 |       payload,
166 |       hideLabel,
167 |       labelClassName,
168 |       config,
169 |       labelKey,
170 |     ]);
171 | 
172 |     if (!active || !payload?.length) {
173 |       return null;
174 |     }
175 | 
176 |     const nestLabel = payload.length === 1 && indicator !== "dot";
177 | 
178 |     return (
179 |       <div
180 |         ref={ref}
181 |         className={cn(
182 |           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
183 |           className,
184 |         )}
185 |       >
186 |         {!nestLabel ? tooltipLabel : null}
187 |         <div className="grid gap-1.5">
188 |           {payload.map((item, index) => {
189 |             const key = `${nameKey || item.name || item.dataKey || "value"}`;
190 |             const itemConfig = getPayloadConfigFromPayload(config, item, key);
191 |             const indicatorColor = color || item.payload.fill || item.color;
192 | 
193 |             return (
194 |               <div
195 |                 key={item.dataKey}
196 |                 className={cn(
197 |                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
198 |                   indicator === "dot" && "items-center",
199 |                 )}
200 |               >
201 |                 {formatter && item?.value !== undefined && item.name ? (
202 |                   formatter(item.value, item.name, item, index, item.payload)
203 |                 ) : (
204 |                   <>
205 |                     {itemConfig?.icon ? (
206 |                       <itemConfig.icon />
207 |                     ) : (
208 |                       !hideIndicator && (
209 |                         <div
210 |                           className={cn(
211 |                             "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
212 |                             {
213 |                               "h-2.5 w-2.5": indicator === "dot",
214 |                               "w-1": indicator === "line",
215 |                               "w-0 border-[1.5px] border-dashed bg-transparent":
216 |                                 indicator === "dashed",
217 |                               "my-0.5": nestLabel && indicator === "dashed",
218 |                             },
219 |                           )}
220 |                           style={
221 |                             {
222 |                               "--color-bg": indicatorColor,
223 |                               "--color-border": indicatorColor,
224 |                             } as React.CSSProperties
225 |                           }
226 |                         />
227 |                       )
228 |                     )}
229 |                     <div
230 |                       className={cn(
231 |                         "flex flex-1 justify-between leading-none",
232 |                         nestLabel ? "items-end" : "items-center",
233 |                       )}
234 |                     >
235 |                       <div className="grid gap-1.5">
236 |                         {nestLabel ? tooltipLabel : null}
237 |                         <span className="text-muted-foreground">
238 |                           {itemConfig?.label || item.name}
239 |                         </span>
240 |                       </div>
241 |                       {item.value && (
242 |                         <span className="font-mono font-medium tabular-nums text-foreground">
243 |                           {item.value.toLocaleString()}
244 |                         </span>
245 |                       )}
246 |                     </div>
247 |                   </>
248 |                 )}
249 |               </div>
250 |             );
251 |           })}
252 |         </div>
253 |       </div>
254 |     );
255 |   },
256 | );
257 | ChartTooltipContent.displayName = "ChartTooltip";
258 | 
259 | const ChartLegend = RechartsPrimitive.Legend;
260 | 
261 | const ChartLegendContent = React.forwardRef<
262 |   HTMLDivElement,
263 |   React.ComponentProps<"div"> &
264 |     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
265 |       hideIcon?: boolean;
266 |       nameKey?: string;
267 |     }
268 | >(
269 |   (
270 |     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
271 |     ref,
272 |   ) => {
273 |     const { config } = useChart();
274 | 
275 |     if (!payload?.length) {
276 |       return null;
277 |     }
278 | 
279 |     return (
280 |       <div
281 |         ref={ref}
282 |         className={cn(
283 |           "flex items-center justify-center gap-4",
284 |           verticalAlign === "top" ? "pb-3" : "pt-3",
285 |           className,
286 |         )}
287 |       >
288 |         {payload.map((item) => {
289 |           const key = `${nameKey || item.dataKey || "value"}`;
290 |           const itemConfig = getPayloadConfigFromPayload(config, item, key);
291 | 
292 |           return (
293 |             <div
294 |               key={item.value}
295 |               className={cn(
296 |                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
297 |               )}
298 |             >
299 |               {itemConfig?.icon && !hideIcon ? (
300 |                 <itemConfig.icon />
301 |               ) : (
302 |                 <div
303 |                   className="h-2 w-2 shrink-0 rounded-[2px]"
304 |                   style={{
305 |                     backgroundColor: item.color,
306 |                   }}
307 |                 />
308 |               )}
309 |               {itemConfig?.label}
310 |             </div>
311 |           );
312 |         })}
313 |       </div>
314 |     );
315 |   },
316 | );
317 | ChartLegendContent.displayName = "ChartLegend";
318 | 
319 | // Helper to extract item config from a payload.
320 | function getPayloadConfigFromPayload(
321 |   config: ChartConfig,
322 |   payload: unknown,
323 |   key: string,
324 | ) {
325 |   if (typeof payload !== "object" || payload === null) {
326 |     return undefined;
327 |   }
328 | 
329 |   const payloadPayload =
330 |     "payload" in payload &&
331 |     typeof payload.payload === "object" &&
332 |     payload.payload !== null
333 |       ? payload.payload
334 |       : undefined;
335 | 
336 |   let configLabelKey: string = key;
337 | 
338 |   if (
339 |     key in payload &&
340 |     typeof payload[key as keyof typeof payload] === "string"
341 |   ) {
342 |     configLabelKey = payload[key as keyof typeof payload] as string;
343 |   } else if (
344 |     payloadPayload &&
345 |     key in payloadPayload &&
346 |     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
347 |   ) {
348 |     configLabelKey = payloadPayload[
349 |       key as keyof typeof payloadPayload
350 |     ] as string;
351 |   }
352 | 
353 |   return configLabelKey in config
354 |     ? config[configLabelKey]
355 |     : config[key as keyof typeof config];
356 | }
357 | 
358 | export {
359 |   ChartContainer,
360 |   ChartTooltip,
361 |   ChartTooltipContent,
362 |   ChartLegend,
363 |   ChartLegendContent,
364 |   ChartStyle,
365 | };
366 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-current")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 4 | 
 5 | const Collapsible = CollapsiblePrimitive.Root
 6 | 
 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 8 | 
 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 | 
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 | 


--------------------------------------------------------------------------------
/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import { type DialogProps } from "@radix-ui/react-dialog";
  5 | import { Command as CommandPrimitive } from "cmdk";
  6 | import { Search } from "lucide-react";
  7 | 
  8 | import { cn } from "@/lib/utils";
  9 | import { Dialog, DialogContent } from "@/components/ui/dialog";
 10 | 
 11 | const Command = React.forwardRef<
 12 |   React.ElementRef<typeof CommandPrimitive>,
 13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 14 | >(({ className, ...props }, ref) => (
 15 |   <CommandPrimitive
 16 |     ref={ref}
 17 |     className={cn(
 18 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 19 |       className,
 20 |     )}
 21 |     {...props}
 22 |   />
 23 | ));
 24 | Command.displayName = CommandPrimitive.displayName;
 25 | 
 26 | interface CommandDialogProps extends DialogProps {}
 27 | 
 28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 29 |   return (
 30 |     <Dialog {...props}>
 31 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 32 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 33 |           {children}
 34 |         </Command>
 35 |       </DialogContent>
 36 |     </Dialog>
 37 |   );
 38 | };
 39 | 
 40 | const CommandInput = React.forwardRef<
 41 |   React.ElementRef<typeof CommandPrimitive.Input>,
 42 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 43 | >(({ className, ...props }, ref) => (
 44 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 45 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 46 |     <CommandPrimitive.Input
 47 |       ref={ref}
 48 |       className={cn(
 49 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 50 |         className,
 51 |       )}
 52 |       {...props}
 53 |     />
 54 |   </div>
 55 | ));
 56 | 
 57 | CommandInput.displayName = CommandPrimitive.Input.displayName;
 58 | 
 59 | const CommandList = React.forwardRef<
 60 |   React.ElementRef<typeof CommandPrimitive.List>,
 61 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 62 | >(({ className, ...props }, ref) => (
 63 |   <CommandPrimitive.List
 64 |     ref={ref}
 65 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 66 |     {...props}
 67 |   />
 68 | ));
 69 | 
 70 | CommandList.displayName = CommandPrimitive.List.displayName;
 71 | 
 72 | const CommandEmpty = React.forwardRef<
 73 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 74 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 75 | >((props, ref) => (
 76 |   <CommandPrimitive.Empty
 77 |     ref={ref}
 78 |     className="py-6 text-center text-sm"
 79 |     {...props}
 80 |   />
 81 | ));
 82 | 
 83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 84 | 
 85 | const CommandGroup = React.forwardRef<
 86 |   React.ElementRef<typeof CommandPrimitive.Group>,
 87 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 88 | >(({ className, ...props }, ref) => (
 89 |   <CommandPrimitive.Group
 90 |     ref={ref}
 91 |     className={cn(
 92 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 93 |       className,
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ));
 98 | 
 99 | CommandGroup.displayName = CommandPrimitive.Group.displayName;
100 | 
101 | const CommandSeparator = React.forwardRef<
102 |   React.ElementRef<typeof CommandPrimitive.Separator>,
103 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104 | >(({ className, ...props }, ref) => (
105 |   <CommandPrimitive.Separator
106 |     ref={ref}
107 |     className={cn("-mx-1 h-px bg-border", className)}
108 |     {...props}
109 |   />
110 | ));
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
112 | 
113 | const CommandItem = React.forwardRef<
114 |   React.ElementRef<typeof CommandPrimitive.Item>,
115 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116 | >(({ className, ...props }, ref) => (
117 |   <CommandPrimitive.Item
118 |     ref={ref}
119 |     className={cn(
120 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
121 |       className,
122 |     )}
123 |     {...props}
124 |   />
125 | ));
126 | 
127 | CommandItem.displayName = CommandPrimitive.Item.displayName;
128 | 
129 | const CommandShortcut = ({
130 |   className,
131 |   ...props
132 | }: React.HTMLAttributes<HTMLSpanElement>) => {
133 |   return (
134 |     <span
135 |       className={cn(
136 |         "ml-auto text-xs tracking-widest text-muted-foreground",
137 |         className,
138 |       )}
139 |       {...props}
140 |     />
141 |   );
142 | };
143 | CommandShortcut.displayName = "CommandShortcut";
144 | 
145 | export {
146 |   Command,
147 |   CommandDialog,
148 |   CommandInput,
149 |   CommandList,
150 |   CommandEmpty,
151 |   CommandGroup,
152 |   CommandItem,
153 |   CommandShortcut,
154 |   CommandSeparator,
155 | };
156 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
  5 | import { X } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Dialog = DialogPrimitive.Root;
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger;
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal;
 14 | 
 15 | const DialogClose = DialogPrimitive.Close;
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className,
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ));
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className,
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ));
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName;
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className,
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | );
 68 | DialogHeader.displayName = "DialogHeader";
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className,
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | );
 82 | DialogFooter.displayName = "DialogFooter";
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className,
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ));
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ));
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | };
123 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  5 | import { Check, ChevronRight, Circle } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root;
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean;
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className,
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ));
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName;
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className,
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ));
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName;
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 69 |         className,
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ));
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean;
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 87 |       inset && "pl-8",
 88 |       className,
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ));
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className,
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ));
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName;
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className,
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ));
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean;
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className,
153 |     )}
154 |     {...props}
155 |   />
156 | ));
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ));
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   );
181 | };
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | };
201 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as LabelPrimitive from "@radix-ui/react-label";
  5 | import { Slot } from "@radix-ui/react-slot";
  6 | import {
  7 |   Controller,
  8 |   ControllerProps,
  9 |   FieldPath,
 10 |   FieldValues,
 11 |   FormProvider,
 12 |   useFormContext,
 13 | } from "react-hook-form";
 14 | 
 15 | import { cn } from "@/lib/utils";
 16 | import { Label } from "@/components/ui/label";
 17 | 
 18 | const Form = FormProvider;
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 23 | > = {
 24 |   name: TName;
 25 | };
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue,
 29 | );
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   );
 42 | };
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext);
 46 |   const itemContext = React.useContext(FormItemContext);
 47 |   const { getFieldState, formState } = useFormContext();
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState);
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>");
 53 |   }
 54 | 
 55 |   const { id } = itemContext;
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   };
 65 | };
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string;
 69 | };
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue,
 73 | );
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId();
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   );
 86 | });
 87 | FormItem.displayName = "FormItem";
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField();
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   );
103 | });
104 | FormLabel.displayName = "FormLabel";
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } =
111 |     useFormField();
112 | 
113 |   return (
114 |     <Slot
115 |       ref={ref}
116 |       id={formItemId}
117 |       aria-describedby={
118 |         !error
119 |           ? `${formDescriptionId}`
120 |           : `${formDescriptionId} ${formMessageId}`
121 |       }
122 |       aria-invalid={!!error}
123 |       {...props}
124 |     />
125 |   );
126 | });
127 | FormControl.displayName = "FormControl";
128 | 
129 | const FormDescription = React.forwardRef<
130 |   HTMLParagraphElement,
131 |   React.HTMLAttributes<HTMLParagraphElement>
132 | >(({ className, ...props }, ref) => {
133 |   const { formDescriptionId } = useFormField();
134 | 
135 |   return (
136 |     <p
137 |       ref={ref}
138 |       id={formDescriptionId}
139 |       className={cn("text-sm text-muted-foreground", className)}
140 |       {...props}
141 |     />
142 |   );
143 | });
144 | FormDescription.displayName = "FormDescription";
145 | 
146 | const FormMessage = React.forwardRef<
147 |   HTMLParagraphElement,
148 |   React.HTMLAttributes<HTMLParagraphElement>
149 | >(({ className, children, ...props }, ref) => {
150 |   const { error, formMessageId } = useFormField();
151 |   const body = error ? String(error?.message) : children;
152 | 
153 |   if (!body) {
154 |     return null;
155 |   }
156 | 
157 |   return (
158 |     <p
159 |       ref={ref}
160 |       id={formMessageId}
161 |       className={cn("text-sm font-medium text-destructive", className)}
162 |       {...props}
163 |     >
164 |       {body}
165 |     </p>
166 |   );
167 | });
168 | FormMessage.displayName = "FormMessage";
169 | 
170 | export {
171 |   useFormField,
172 |   Form,
173 |   FormItem,
174 |   FormLabel,
175 |   FormControl,
176 |   FormDescription,
177 |   FormMessage,
178 |   FormField,
179 | };
180 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |   ({ className, type, ...props }, ref) => {
 9 |     return (
10 |       <input
11 |         type={type}
12 |         className={cn(
13 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   }
21 | );
22 | Input.displayName = "Input";
23 | 
24 | export { Input };
25 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as LabelPrimitive from "@radix-ui/react-label";
 5 | import { cva, type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 | 
26 | export { Label };
27 | 


--------------------------------------------------------------------------------
/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
  3 | 
  4 | import { cn } from "@/lib/utils";
  5 | import { ButtonProps, buttonVariants } from "@/components/ui/button";
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | );
 15 | Pagination.displayName = "Pagination";
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ));
 27 | PaginationContent.displayName = "PaginationContent";
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("", className)} {...props} />
 34 | ));
 35 | PaginationItem.displayName = "PaginationItem";
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean;
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">;
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       className,
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | );
 60 | PaginationLink.displayName = "PaginationLink";
 61 | 
 62 | const PaginationPrevious = ({
 63 |   className,
 64 |   ...props
 65 | }: React.ComponentProps<typeof PaginationLink>) => (
 66 |   <PaginationLink
 67 |     aria-label="Go to previous page"
 68 |     size="default"
 69 |     className={cn("gap-1 pl-2.5", className)}
 70 |     {...props}
 71 |   >
 72 |     <ChevronLeft className="h-4 w-4" />
 73 |     <span>Previous</span>
 74 |   </PaginationLink>
 75 | );
 76 | PaginationPrevious.displayName = "PaginationPrevious";
 77 | 
 78 | const PaginationNext = ({
 79 |   className,
 80 |   ...props
 81 | }: React.ComponentProps<typeof PaginationLink>) => (
 82 |   <PaginationLink
 83 |     aria-label="Go to next page"
 84 |     size="default"
 85 |     className={cn("gap-1 pr-2.5", className)}
 86 |     {...props}
 87 |   >
 88 |     <span>Next</span>
 89 |     <ChevronRight className="h-4 w-4" />
 90 |   </PaginationLink>
 91 | );
 92 | PaginationNext.displayName = "PaginationNext";
 93 | 
 94 | const PaginationEllipsis = ({
 95 |   className,
 96 |   ...props
 97 | }: React.ComponentProps<"span">) => (
 98 |   <span
 99 |     aria-hidden
100 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
101 |     {...props}
102 |   >
103 |     <MoreHorizontal className="h-4 w-4" />
104 |     <span className="sr-only">More pages</span>
105 |   </span>
106 | );
107 | PaginationEllipsis.displayName = "PaginationEllipsis";
108 | 
109 | export {
110 |   Pagination,
111 |   PaginationContent,
112 |   PaginationEllipsis,
113 |   PaginationItem,
114 |   PaginationLink,
115 |   PaginationNext,
116 |   PaginationPrevious,
117 | };
118 | 


--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Popover = PopoverPrimitive.Root;
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className,
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent };
32 | 


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, color, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative h-3 w-full overflow-hidden rounded-full bg-secondary", className)}
15 |     {...props}>
16 |     <ProgressPrimitive.Indicator
17 |       className={cn("h-full w-full flex-1 bg-primary transition-all", color)}
18 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
19 |     />
20 |   </ProgressPrimitive.Root>
21 | ));
22 | Progress.displayName = ProgressPrimitive.Root.displayName;
23 | 
24 | export { Progress };
25 | 


--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 5 | import { Circle } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   );
20 | });
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
32 |         className,
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   );
41 | });
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
43 | 
44 | export { RadioGroup, RadioGroupItem };
45 | 


--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ));
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className,
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ));
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
47 | 
48 | export { ScrollArea, ScrollBar };
49 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SelectPrimitive from "@radix-ui/react-select";
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className,
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className,
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ));
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className,
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ));
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName;
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className,
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ));
100 | SelectContent.displayName = SelectPrimitive.Content.displayName;
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ));
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className,
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ));
135 | SelectItem.displayName = SelectPrimitive.Item.displayName;
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ));
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | };
161 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog";
  5 | import { cva, type VariantProps } from "class-variance-authority";
  6 | import { X } from "lucide-react";
  7 | 
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | const Sheet = SheetPrimitive.Root;
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger;
 13 | 
 14 | const SheetClose = SheetPrimitive.Close;
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal;
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className,
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ));
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   },
 50 | );
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ));
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName;
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className,
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | );
 89 | SheetHeader.displayName = "SheetHeader";
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className,
 99 |     )}
100 |     {...props}
101 |   />
102 | );
103 | SheetFooter.displayName = "SheetFooter";
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ));
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ));
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | };
141 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | 
  3 | import { cn } from "@/lib/utils";
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ));
 17 | Table.displayName = "Table";
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ));
 25 | TableHeader.displayName = "TableHeader";
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ));
 37 | TableBody.displayName = "TableBody";
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className,
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ));
 52 | TableFooter.displayName = "TableFooter";
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className,
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ));
 67 | TableRow.displayName = "TableRow";
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className,
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ));
 82 | TableHead.displayName = "TableHead";
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ));
 94 | TableCell.displayName = "TableCell";
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ));
106 | TableCaption.displayName = "TableCaption";
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | };
118 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Tabs = TabsPrimitive.Root;
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className,
19 |     )}
20 |     {...props}
21 |   />
22 | ));
23 | TabsList.displayName = TabsPrimitive.List.displayName;
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className,
34 |     )}
35 |     {...props}
36 |   />
37 | ));
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className,
49 |     )}
50 |     {...props}
51 |   />
52 | ));
53 | TabsContent.displayName = TabsPrimitive.Content.displayName;
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent };
56 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 6 | 
 7 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 8 |   ({ className, ...props }, ref) => {
 9 |     return (
10 |       <textarea
11 |         className={cn(
12 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
13 |           className
14 |         )}
15 |         ref={ref}
16 |         {...props}
17 |       />
18 |     );
19 |   }
20 | );
21 | Textarea.displayName = "Textarea";
22 | 
23 | export { Textarea };
24 | 


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider;
 9 | 
10 | const Tooltip = TooltipPrimitive.Root;
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className,
24 |     )}
25 |     {...props}
26 |   />
27 | ));
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
31 | 


--------------------------------------------------------------------------------
/components/user-avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { cn, generateAvatarFallback } from "@/lib/utils";
 2 | import {
 3 |   Avatar,
 4 |   AvatarImage,
 5 |   AvatarFallback,
 6 |   AvatarIndicator,
 7 |   AvatarIndicatorProps
 8 | } from "./ui/avatar";
 9 | 
10 | type AvatarProps = {
11 |   image?: string;
12 |   indicator?: AvatarIndicatorProps["variant"];
13 |   fallback?: string;
14 |   className?: string;
15 | };
16 | 
17 | export default function UserAvatar({ image, indicator, fallback = "AB", className }: AvatarProps) {
18 |   return (
19 |     <Avatar className={cn("h-12 w-12 border", className)}>
20 |       <AvatarImage src={image} alt="avatar image" />
21 |       <AvatarIndicator variant={indicator} />
22 |       <AvatarFallback>{generateAvatarFallback(fallback)}</AvatarFallback>
23 |     </Avatar>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/lib/routes-config.tsx:
--------------------------------------------------------------------------------
 1 | type PageRoutesType = {
 2 |   title: string;
 3 |   items: PageRoutesItemType;
 4 | };
 5 | 
 6 | type PageRoutesItemType = {
 7 |   title: string;
 8 |   href: string;
 9 |   icon?: string;
10 |   isComing?: boolean;
11 |   items?: PageRoutesItemType;
12 | }[];
13 | 
14 | export const page_routes: PageRoutesType[] = [
15 |   {
16 |     title: "Menu",
17 |     items: [
18 |       {
19 |         title: "Dashboard",
20 |         href: "/dashboard/default",
21 |         icon: "PieChart"
22 |       },
23 |       { title: "Users", href: "/dashboard/pages/users", icon: "Users" },
24 |       {
25 |         title: "Settings",
26 |         href: "/dashboard/pages/settings",
27 |         icon: "Settings"
28 |       },
29 |       {
30 |         title: "Authentication",
31 |         href: "/",
32 |         icon: "Fingerprint",
33 |         items: [
34 |           { title: "Login", href: "/login" },
35 |           { title: "Register", href: "/register" }
36 |         ]
37 |       },
38 |       {
39 |         title: "Error Pages",
40 |         href: "/",
41 |         icon: "Fingerprint",
42 |         items: [
43 |           { title: "404", href: "/pages/error/404" },
44 |           { title: "500", href: "/pages/error/500" }
45 |         ]
46 |       }
47 |     ]
48 |   }
49 | ];
50 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { Metadata } from "next";
 3 | import { twMerge } from "tailwind-merge";
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | export function generateAvatarFallback(string: string) {
10 |   const names = string.split(" ").filter((name: string) => name);
11 |   const mapped = names.map((name: string) => name.charAt(0).toUpperCase());
12 | 
13 |   return mapped.join("");
14 | }
15 | 
16 | export function generateMeta({
17 |   title,
18 |   description,
19 |   canonical
20 | }: {
21 |   title: string;
22 |   description: string;
23 |   canonical: string;
24 | }): Metadata {
25 |   return {
26 |     title: `${title} - Shadcn UI Kit Free`,
27 |     description: description,
28 |     openGraph: {
29 |       images: [`${process.env.DASHBOARD_BASE_URL}/seo.jpg`]
30 |     }
31 |   };
32 | }
33 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse, type NextRequest } from "next/server";
2 | export function middleware(request: NextRequest) {
3 |   return NextResponse.redirect(new URL("/dashboard/default", request.url));
4 | }
5 | 
6 | export const config = {
7 |   matcher: ["/dashboard", "/"]
8 | };
9 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | 
 3 | import { config } from "dotenv";
 4 | 
 5 | config();
 6 | 
 7 | const nextConfig = {
 8 |   env: {
 9 |     DASHBOARD_BASE_URL: process.env.DASHBOARD_BASE_URL
10 |   }
11 | };
12 | 
13 | export default nextConfig;
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shadcn-ui-kit-free",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@faker-js/faker": "^8.4.1",
13 |     "@hookform/resolvers": "^3.9.0",
14 |     "@mdxeditor/editor": "^3.11.4",
15 |     "@radix-ui/react-accordion": "^1.2.0",
16 |     "@radix-ui/react-avatar": "^1.1.0",
17 |     "@radix-ui/react-checkbox": "^1.1.1",
18 |     "@radix-ui/react-collapsible": "^1.1.0",
19 |     "@radix-ui/react-dialog": "^1.1.1",
20 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
21 |     "@radix-ui/react-icons": "^1.3.0",
22 |     "@radix-ui/react-label": "^2.1.0",
23 |     "@radix-ui/react-popover": "^1.1.1",
24 |     "@radix-ui/react-progress": "^1.0.3",
25 |     "@radix-ui/react-radio-group": "^1.2.0",
26 |     "@radix-ui/react-scroll-area": "^1.0.5",
27 |     "@radix-ui/react-select": "^2.1.1",
28 |     "@radix-ui/react-separator": "^1.1.0",
29 |     "@radix-ui/react-slot": "^1.1.0",
30 |     "@radix-ui/react-switch": "^1.1.0",
31 |     "@radix-ui/react-tabs": "^1.0.4",
32 |     "@radix-ui/react-toast": "^1.2.1",
33 |     "@radix-ui/react-tooltip": "^1.0.7",
34 |     "@tanstack/react-table": "^8.20.1",
35 |     "axios": "^1.7.5",
36 |     "class-variance-authority": "^0.7.0",
37 |     "clsx": "^2.1.1",
38 |     "cmdk": "^1.0.0",
39 |     "date-fns": "^3.6.0",
40 |     "dotenv": "^16.4.5",
41 |     "lucide-react": "^0.379.0",
42 |     "next": "14.2.3",
43 |     "next-themes": "^0.3.0",
44 |     "react": "^18",
45 |     "react-day-picker": "^8.10.1",
46 |     "react-dom": "^18",
47 |     "react-hook-form": "^7.52.2",
48 |     "recharts": "^2.12.7",
49 |     "sass": "^1.77.8",
50 |     "tailwind-merge": "^2.3.0",
51 |     "tailwindcss-animate": "^1.0.7",
52 |     "zod": "^3.23.8"
53 |   },
54 |   "devDependencies": {
55 |     "@types/node": "^20",
56 |     "@types/react": "^18",
57 |     "@types/react-dom": "^18",
58 |     "eslint": "^8",
59 |     "eslint-config-next": "14.2.3",
60 |     "eslint-plugin-readable-tailwind": "^1.7.0",
61 |     "postcss": "^8",
62 |     "prettier": "^3.3.3",
63 |     "prettier-plugin-tailwindcss": "^0.6.6",
64 |     "tailwindcss": "^3.4.1",
65 |     "typescript": "^5"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/github.png


--------------------------------------------------------------------------------
/public/images/404.svg:
--------------------------------------------------------------------------------
1 | 
2 | <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="672.5315" height="738.39398" viewBox="0 0 672.5315 738.39398" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M730.73425,230.607c-46.62012-7.44-99.71-11.41-155-11.41-50.6001,0-99.3501,3.32-142.98,9.58.01026-.67005.02-1.34.04981-2.01a148.99943,148.99943,0,0,1,297.91015,1.82C730.72449,229.267,730.73425,229.937,730.73425,230.607Z" transform="translate(-263.73425 -80.80301)" fill="#000000"/><g opacity="0.1"><path d="M601.28454,82.14432A149.04745,149.04745,0,0,0,432.35339,225.373c-.03027.67-.04,1.34-.0498,2.01,12.96191-1.85981,26.38476-3.4535,40.165-4.78431A149.02172,149.02172,0,0,1,601.28454,82.14432Z" transform="translate(-263.73425 -80.80301)" fill="#fff"/></g><path d="M795.91443,242.427a600.121,600.121,0,0,0-65.2002-13.84,943.3639,943.3639,0,0,0-108.73974-10.45c-15.17041-.62-30.62012-.94-46.24024-.94-12.37988,0-24.66015.2-36.77.6a973.28988,973.28988,0,0,0-106.16015,8.97,624.29224,624.29224,0,0,0-77.25,15.66c-59.21,16.37-91.81983,38.31-91.81983,61.77s32.60987,45.4,91.81983,61.77c41.64013,11.52,92.98,19.37,148.92041,22.97,23.08984,1.5,46.96,2.26,71.25976,2.26,24.37988,0,48.33008-.77,71.49024-2.27,50.90966-3.29,98.00976-10.1,137.42968-20,.21-.06.41016-.11.62012-.16,2.66016-.66,5.27979-1.35,7.87012-2.04.92969-.26,1.84961-.51,2.77-.76a.97843.97843,0,0,1,.15967-.05c.88037-.24,1.75-.49,2.62011-.73,1.74024-.5,3.46-.99,5.14991-1.5.08007-.02.1499-.04.22021-.06,1.46973-.44,2.91016-.88,4.33984-1.32,1.16993-.37,2.33008-.73,3.48-1.1q1.26051-.405,2.49024-.81c.6001-.2,1.18994-.39,1.77-.59.79-.26,1.58008-.53,2.35986-.8.33008-.11.66016-.22.98-.34.75-.25,1.48-.51,2.21-.77.79-.28,1.58008-.57,2.35987-.85.65039-.23,1.30029-.47,1.93994-.71.54-.21,1.07031-.41,1.61035-.61,1.46973-.55,2.91016-1.12006,4.33008-1.68.71-.29,1.41992-.57,2.11963-.86.68994-.28,1.39013-.57,2.07031-.86q1.67944-.70506,3.2998-1.41c.52-.24,1.0503-.47,1.56006-.68994.39014-.18.77-.35,1.16016-.53.27978-.12.56006-.25.83008-.38,1.00976-.46,2.00976-.93,2.98974-1.4q5.64039-2.7,10.52979-5.52c20.45019-11.71,31.24023-24.7,31.24023-38.2C887.73425,280.737,855.12439,258.797,795.91443,242.427Zm-.54,121.62c-41.68994,11.53-93.16992,19.38-149.26026,22.95-22.81005,1.45-46.38964,2.2-70.37988,2.2-23.91015,0-47.41015-.74-70.1499-2.19-56.18018-3.56-107.74023-11.41-149.49023-22.96-58.27-16.12-90.35987-37.37-90.35987-59.85a24.11774,24.11774,0,0,1,.74024-5.89c5.09961-20.28,36.46972-39.26,89.61963-53.96a623.80606,623.80606,0,0,1,76.66015-15.57,976.02713,976.02713,0,0,1,106.79981-9q17.88061-.585,36.18017-.58c15.41016,0,30.6499.31,45.62988.91a941.36713,941.36713,0,0,1,109.37012,10.5A598.85754,598.85754,0,0,1,795.37439,244.347c53.14014,14.7,84.5,33.67,89.60986,53.94a23.82213,23.82213,0,0,1,.75,5.91C885.73425,326.677,853.64441,347.927,795.37439,364.047Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M887.16443,305.107c0,13.36005-11.01026,26-30.67041,37.29-3.26953,1.88-6.78955,3.72-10.52979,5.52-.98.47-1.98.94-2.98974,1.4-.27.13-.5503.26-.83008.38-.39014.18-.77.35-1.16016.53-.50976.22-1.04.45-1.56006.68994q-1.6201.705-3.2998,1.41c-.68018.29-1.38037.58-2.07031.86-.69971.29-1.40967.57-2.11963.86-1.41992.56-2.86035,1.13-4.33008,1.68-.54.2-1.07031.4-1.61035.61-.63965.24-1.28955.48-1.93994.71-.77979.28-1.56983.57-2.35987.85-.73.26-1.46.52-2.21.77-.31982.12006-.6499.23-.98.34-.77978.27-1.56982.54-2.35986.8-.58008.2-1.16992.39-1.77.59q-1.23046.40494-2.49024.81c-1.1499.37-2.31.73-3.48,1.1-1.42968.44-2.87011.88-4.33984,1.32-.07031.02-.14014.04-.22021.06-1.68995.51-3.40967,1-5.14991,1.5-.87011.24-1.73974.49-2.62011.73a.97843.97843,0,0,0-.15967.05c-.92041.25-1.84033.5-2.77.76-2.58008.68-5.21,1.37-7.87012,2.04-.21.05-.41016.1-.62012.16-38.35009,9.58-85.3999,16.56-137.46972,19.93-22.81006,1.47-46.59033,2.25-71.02,2.25-24.6499,0-48.63037-.79-71.62012-2.29-137.24023-8.95-239.37988-43.03-239.37988-83.71a25.07169,25.07169,0,0,1,1.11963-7.3c.06006.17.12011.33.19043.5,14.26953,37.48,115.54,67.77,246.93994,75.16,20.12988,1.13995,40.98,1.73,62.31982,1.73,21.43018,0,42.35987-.6,62.56983-1.74,131.29-7.42,232.46045-37.72,246.68017-75.17q.36036-.90006.62988-1.8A25.30451,25.30451,0,0,1,887.16443,305.107Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M355.40356,294.343c-16.6427,0-34.33068-3.58057-34.33068-10.2168s17.688-10.2168,34.33068-10.2168,34.33069,3.58057,34.33069,10.2168S372.04626,294.343,355.40356,294.343Zm0-18.4336c-19.053,0-32.33068,4.33057-32.33068,8.2168s13.2777,8.2168,32.33068,8.2168,32.33069-4.33057,32.33069-8.2168S374.45654,275.90939,355.40356,275.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M426.40344,341.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S443.04626,341.343,426.40344,341.343Zm0-18.4336c-19.05286,0-32.33056,4.33057-32.33056,8.2168s13.2777,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S445.45642,322.90939,426.40344,322.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M795.40344,294.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S812.04626,294.343,795.40344,294.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S814.45642,275.90939,795.40344,275.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M724.40344,341.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S741.04626,341.343,724.40344,341.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S743.45642,322.90939,724.40344,322.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M575.40344,363.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S592.04626,363.343,575.40344,363.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S594.45642,344.90939,575.40344,344.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><circle cx="336.97785" cy="450.70425" r="42.01233" fill="#2f2e41"/><rect x="565.93651" y="563.55388" width="22.86756" height="12.76328" transform="translate(-457.82019 238.05835) rotate(-26.60099)" fill="#2f2e41"/><ellipse cx="563.82041" cy="573.74843" rx="3.98853" ry="10.63605" transform="translate(-489.27546 647.82906) rotate(-56.60122)" fill="#2f2e41"/><rect x="617.67227" y="558.50174" width="12.76328" height="22.86756" transform="translate(-428.72163 791.92555) rotate(-63.39901)" fill="#2f2e41"/><ellipse cx="637.60379" cy="573.74843" rx="10.63605" ry="3.98853" transform="translate(-474.26735 364.92328) rotate(-33.39878)" fill="#2f2e41"/><circle cx="334.03663" cy="440.42779" r="14.35864" fill="#fff"/><ellipse cx="597.86951" cy="515.08401" rx="4.76624" ry="4.8" transform="translate(-452.84172 492.81919) rotate(-45)" fill="#3f3d56"/><path d="M633.854,485.80233c.63177-15.55359-12.77314-28.7276-29.9408-29.42493s-31.59692,11.346-32.22873,26.8996,11.30191,19.08746,28.46958,19.78485S633.22214,501.35592,633.854,485.80233Z" transform="translate(-263.73425 -80.80301)" fill="#000000"/><ellipse cx="644.38811" cy="537.56776" rx="6.59448" ry="21.00616" transform="translate(-458.4377 468.61755) rotate(-40.64516)" fill="#2f2e41"/><ellipse cx="557.15365" cy="537.56776" rx="21.00616" ry="6.59448" transform="translate(-477.37906 529.35274) rotate(-49.35484)" fill="#2f2e41"/><path d="M612.25083,548.0638a9.57244,9.57244,0,0,1-18.83533,3.42884l-.00336-.0185c-.94177-5.20214,3.08039-7.043,8.28254-7.98474S611.30912,542.86166,612.25083,548.0638Z" transform="translate(-263.73425 -80.80301)" fill="#fff"/><path d="M529.73425,576.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,0,1,4,0v118A2.0001,2.0001,0,0,1,529.73425,576.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M499.73425,682.197a2.0001,2.0001,0,0,1-2-2v-86a2,2,0,1,1,4,0v86A2.0001,2.0001,0,0,1,499.73425,682.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M576.73425,611.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,1,1,4,0v118A2.0001,2.0001,0,0,1,576.73425,611.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M547.73425,696.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,1,1,4,0v48A2.0001,2.0001,0,0,1,547.73425,696.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M588.73425,450.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,0,1,4,0v48A2.0001,2.0001,0,0,1,588.73425,450.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M488.73425,471.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,0,1,4,0v48A2.0001,2.0001,0,0,1,488.73425,471.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M662.73425,476.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,1,1,4,0v48A2.0001,2.0001,0,0,1,662.73425,476.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M658.73425,626.197a2.0001,2.0001,0,0,1-2-2v-58a2,2,0,1,1,4,0v58A2.0001,2.0001,0,0,1,658.73425,626.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M618.73425,677.197a2.0001,2.0001,0,0,1-2-2v-86a2,2,0,1,1,4,0v86A2.0001,2.0001,0,0,1,618.73425,677.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M626.73425,530.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,1,1,4,0v118A2.0001,2.0001,0,0,1,626.73425,530.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><ellipse cx="858.10361" cy="764.78333" rx="6.76007" ry="21.53369" transform="translate(-554.53185 648.46489) rotate(-39.93837)" fill="#2f2e41"/><circle cx="812.2965" cy="757.30544" r="43.06733" transform="translate(-426.75153 1207.63346) rotate(-71.56505)" fill="#2f2e41"/><rect x="553.7073" y="710.30199" width="13.08374" height="23.44171" fill="#2f2e41"/><rect x="527.53982" y="710.30199" width="13.08374" height="23.44171" fill="#2f2e41"/><ellipse cx="555.8879" cy="734.01629" rx="10.90314" ry="4.08868" fill="#2f2e41"/><ellipse cx="529.72042" cy="733.47115" rx="10.90314" ry="4.08868" fill="#2f2e41"/><path d="M798.77365,703.16853c3.84557-15.487,20.82057-24.60076,37.91471-20.35617s27.83428,20.24028,23.98871,35.72729-16.60394,15.537-33.69809,11.29233S794.92806,718.65557,798.77365,703.16853Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><ellipse cx="763.7883" cy="737.32189" rx="6.76007" ry="21.53369" transform="translate(-493.44249 1030.65892) rotate(-64.62574)" fill="#2f2e41"/><circle cx="542.12366" cy="667.41487" r="14.35864" fill="#fff"/><circle cx="536.22229" cy="662.26808" r="4.78622" fill="#3f3d56"/><circle cx="542" cy="697.39398" r="6" fill="#fff"/><path d="M935.26575,819.197h-236a1,1,0,0,1,0-2h236a1,1,0,0,1,0,2Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/></svg>


--------------------------------------------------------------------------------
/public/images/avatars/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/1.png


--------------------------------------------------------------------------------
/public/images/avatars/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/10.png


--------------------------------------------------------------------------------
/public/images/avatars/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/11.png


--------------------------------------------------------------------------------
/public/images/avatars/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/12.png


--------------------------------------------------------------------------------
/public/images/avatars/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/2.png


--------------------------------------------------------------------------------
/public/images/avatars/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/3.png


--------------------------------------------------------------------------------
/public/images/avatars/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/4.png


--------------------------------------------------------------------------------
/public/images/avatars/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/5.png


--------------------------------------------------------------------------------
/public/images/avatars/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/6.png


--------------------------------------------------------------------------------
/public/images/avatars/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/7.png


--------------------------------------------------------------------------------
/public/images/avatars/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/8.png


--------------------------------------------------------------------------------
/public/images/avatars/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/avatars/9.png


--------------------------------------------------------------------------------
/public/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/images/cover.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/logo.png


--------------------------------------------------------------------------------
/public/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/preview.png


--------------------------------------------------------------------------------
/public/seo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bundui/shadcn-dashboard-free/d794529f65db7588ce0b69ca8bb1d0c91511b6a3/public/seo.jpg


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import plugin from "tailwindcss/plugin";
 3 | 
 4 | const config = {
 5 |   darkMode: ["class"],
 6 |   content: [
 7 |     "./pages/**/*.{ts,tsx}",
 8 |     "./components/**/*.{ts,tsx}",
 9 |     "./app/**/*.{ts,tsx}",
10 |     "./src/**/*.{ts,tsx}"
11 |   ],
12 |   prefix: "",
13 |   theme: {
14 |     container: {
15 |       center: true,
16 |       padding: "2rem",
17 |       screens: {
18 |         "2xl": "1400px"
19 |       }
20 |     },
21 |     extend: {
22 |       colors: {
23 |         border: "hsl(var(--border))",
24 |         input: "hsl(var(--input))",
25 |         ring: "hsl(var(--ring))",
26 |         background: "hsl(var(--background))",
27 |         foreground: "hsl(var(--foreground))",
28 |         primary: {
29 |           DEFAULT: "hsl(var(--primary))",
30 |           foreground: "hsl(var(--primary-foreground))"
31 |         },
32 |         secondary: {
33 |           DEFAULT: "hsl(var(--secondary))",
34 |           foreground: "hsl(var(--secondary-foreground))"
35 |         },
36 |         destructive: {
37 |           DEFAULT: "hsl(var(--destructive))",
38 |           foreground: "hsl(var(--destructive-foreground))"
39 |         },
40 |         muted: {
41 |           DEFAULT: "hsl(var(--muted))",
42 |           foreground: "hsl(var(--muted-foreground))"
43 |         },
44 |         accent: {
45 |           DEFAULT: "hsl(var(--accent))",
46 |           foreground: "hsl(var(--accent-foreground))"
47 |         },
48 |         popover: {
49 |           DEFAULT: "hsl(var(--popover))",
50 |           foreground: "hsl(var(--popover-foreground))"
51 |         },
52 |         card: {
53 |           DEFAULT: "hsl(var(--card))",
54 |           foreground: "hsl(var(--card-foreground))"
55 |         }
56 |       },
57 |       borderRadius: {
58 |         lg: "var(--radius)",
59 |         md: "calc(var(--radius) - 2px)",
60 |         sm: "calc(var(--radius) - 4px)"
61 |       },
62 |       keyframes: {
63 |         "accordion-down": {
64 |           from: { height: "0" },
65 |           to: { height: "var(--radix-accordion-content-height)" }
66 |         },
67 |         "accordion-up": {
68 |           from: { height: "var(--radix-accordion-content-height)" },
69 |           to: { height: "0" }
70 |         },
71 |         "collapsible-down": {
72 |           from: { height: "0" },
73 |           to: { height: "var(--radix-collapsible-content-height)" }
74 |         },
75 |         "collapsible-up": {
76 |           from: { height: "var(--radix-collapsible-content-height)" },
77 |           to: { height: "0" }
78 |         }
79 |       },
80 |       animation: {
81 |         "accordion-down": "accordion-down 0.2s ease-out",
82 |         "accordion-up": "accordion-up 0.2s ease-out",
83 |         "collapsible-down": "collapsible-down 0.2s ease-out",
84 |         "collapsible-up": "collapsible-up 0.2s ease-out"
85 |       }
86 |     }
87 |   },
88 |   plugins: [
89 |     require("tailwindcss-animate"),
90 |     plugin(function ({ addBase }) {
91 |       addBase({
92 |         html: { fontSize: "14px" }
93 |       });
94 |     })
95 |   ]
96 | } satisfies Config;
97 | 
98 | export default config;
99 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "bundler",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "incremental": true,
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ],
24 |     "paths": {
25 |       "@/*": [
26 |         "./*"
27 |       ]
28 |     }
29 |   },
30 |   "include": [
31 |     "next-env.d.ts",
32 |     "**/*.ts",
33 |     "**/*.tsx",
34 |     ".next/types/**/*.ts",
35 |     "build/types/**/*.ts"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------