├── .DS_Store ├── .gitignore ├── README.md ├── components.json ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── .DS_Store ├── App.tsx ├── apis │ ├── instances │ │ ├── public-api.ts │ │ └── secure-api.ts │ ├── queries │ │ ├── category.ts │ │ ├── keys.ts │ │ └── product.ts │ └── services │ │ ├── category.ts │ │ └── product.ts ├── assets │ ├── .DS_Store │ ├── lotties │ │ ├── .DS_Store │ │ └── cat.json │ ├── react.svg │ └── translations │ │ ├── en.json │ │ └── mm.json ├── components │ ├── .DS_Store │ ├── charts │ │ ├── chart-area-axes.tsx │ │ ├── chart-area-default.tsx │ │ ├── chart-area-gradient.tsx │ │ ├── chart-area-icons.tsx │ │ ├── chart-area-interactive.tsx │ │ ├── chart-area-legend.tsx │ │ ├── chart-area-linear.tsx │ │ ├── chart-area-stacked-expand.tsx │ │ ├── chart-area-stacked.tsx │ │ ├── chart-area-step.tsx │ │ ├── chart-bar-active.tsx │ │ ├── chart-bar-default.tsx │ │ ├── chart-bar-horizontal.tsx │ │ ├── chart-bar-label-custom.tsx │ │ ├── chart-bar-label.tsx │ │ ├── chart-bar-mixed.tsx │ │ ├── chart-bar-multiple.tsx │ │ ├── chart-bar-negative.tsx │ │ ├── chart-bar-stacked.tsx │ │ ├── chart-line-default.tsx │ │ ├── chart-line-dots-colors.tsx │ │ ├── chart-line-dots-custom.tsx │ │ ├── chart-line-dots.tsx │ │ ├── chart-line-interactive.tsx │ │ ├── chart-line-label-custom.tsx │ │ ├── chart-line-label.tsx │ │ ├── chart-line-linear.tsx │ │ ├── chart-line-multiple.tsx │ │ ├── chart-line-step.tsx │ │ ├── chart-pie-donut-active.tsx │ │ ├── chart-pie-donut-text.tsx │ │ ├── chart-pie-donut.tsx │ │ ├── chart-pie-interactive.tsx │ │ ├── chart-pie-label-custom.tsx │ │ ├── chart-pie-label-list.tsx │ │ ├── chart-pie-label.tsx │ │ ├── chart-pie-legend.tsx │ │ ├── chart-pie-separator-none.tsx │ │ ├── chart-pie-simple.tsx │ │ ├── chart-pie-stacked.tsx │ │ ├── chart-radar-default.tsx │ │ ├── chart-radar-dots.tsx │ │ ├── chart-radar-grid-circle-fill.tsx │ │ ├── chart-radar-grid-circle-no-lines.tsx │ │ ├── chart-radar-grid-circle.tsx │ │ ├── chart-radar-grid-custom.tsx │ │ ├── chart-radar-grid-fill.tsx │ │ ├── chart-radar-grid-none.tsx │ │ ├── chart-radar-icons.tsx │ │ ├── chart-radar-label-custom.tsx │ │ ├── chart-radar-legend.tsx │ │ ├── chart-radar-lines-only.tsx │ │ ├── chart-radar-multiple.tsx │ │ ├── chart-radar-radius.tsx │ │ ├── chart-radial-grid.tsx │ │ ├── chart-radial-label.tsx │ │ ├── chart-radial-shape.tsx │ │ ├── chart-radial-simple.tsx │ │ ├── chart-radial-stacked.tsx │ │ ├── chart-radial-text.tsx │ │ ├── chart-tooltip-advanced.tsx │ │ ├── chart-tooltip-default.tsx │ │ ├── chart-tooltip-formatter.tsx │ │ ├── chart-tooltip-icons.tsx │ │ ├── chart-tooltip-indicator-line.tsx │ │ ├── chart-tooltip-indicator-none.tsx │ │ ├── chart-tooltip-label-custom.tsx │ │ ├── chart-tooltip-label-formatter.tsx │ │ └── chart-tooltip-label-none.tsx │ ├── commons │ │ ├── between.tsx │ │ ├── center.tsx │ │ ├── lang-dropdown.tsx │ │ ├── logo.tsx │ │ ├── page-title.tsx │ │ └── text.tsx │ ├── data-table │ │ ├── data-table-column-header.tsx │ │ ├── data-table-faceted-filter.tsx │ │ ├── data-table-loader.tsx │ │ ├── data-table-pagination.tsx │ │ ├── data-table-view-options.tsx │ │ └── data-table.tsx │ ├── inputs │ │ ├── checkbox-input.tsx │ │ ├── checkgroup-Input.tsx │ │ ├── date-input.tsx │ │ ├── password-input.tsx │ │ ├── radio-input.tsx │ │ ├── search-input.tsx │ │ ├── select-input.tsx │ │ ├── text-input.tsx │ │ └── textarea-input.tsx │ ├── loaders │ │ └── page-loader.tsx │ ├── modals │ │ ├── demo.tsx │ │ ├── idle-confirmation.tsx │ │ └── logout-confirmation.tsx │ ├── selects │ │ └── category-select.tsx │ ├── theme │ │ └── theme-provider.tsx │ └── ui │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumb.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── card.tsx │ │ ├── chart.tsx │ │ ├── checkbox.tsx │ │ ├── command.tsx │ │ ├── dialog.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── pagination.tsx │ │ ├── popover.tsx │ │ ├── radio-group.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── sonner.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ └── tooltip.tsx ├── configs │ ├── menus.tsx │ ├── routes.tsx │ └── vars.tsx ├── helpers │ └── form-schemas-validators.ts ├── hooks │ ├── use-auth-operations.ts │ ├── use-auth.ts │ ├── use-report.ts │ ├── use-unauth.ts │ └── use-url-query.ts ├── i18n.ts ├── index.css ├── layouts │ ├── auth │ │ ├── auth-layout.tsx │ │ └── components │ │ │ ├── header.tsx │ │ │ └── index.ts │ ├── dashboard │ │ ├── components │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── sidebar-footer.tsx │ │ │ ├── sidebar-header.tsx │ │ │ ├── sidebar-item.tsx │ │ │ └── sidebar.tsx │ │ └── dashboard-layout.tsx │ └── root │ │ └── root-layout.tsx ├── lib │ └── utils.ts ├── main.tsx ├── pages │ ├── .DS_Store │ ├── charts │ │ ├── .DS_Store │ │ └── charts-page.tsx │ ├── dashboard │ │ ├── components │ │ │ └── recent-sales.tsx │ │ └── dashboard-page.tsx │ ├── error-pages │ │ ├── 404-page.tsx │ │ ├── 500-page.tsx │ │ └── components │ │ │ └── Error.tsx │ ├── form │ │ ├── components │ │ │ └── FormWithReusableInputs.tsx │ │ ├── form-page.tsx │ │ ├── mock-data │ │ │ └── mock-data.ts │ │ └── schemas │ │ │ └── normal-form-schema.ts │ ├── index.ts │ ├── login │ │ ├── login-page.tsx │ │ └── schemas │ │ │ └── login-schema.ts │ ├── modals │ │ ├── components │ │ │ ├── ModalCard.tsx │ │ │ └── ToastCard.tsx │ │ ├── mock-data │ │ │ ├── modals.ts │ │ │ └── toasts.ts │ │ └── modals-page.tsx │ └── table │ │ ├── components │ │ ├── columns.tsx │ │ ├── row-actions.tsx │ │ └── tool-bar.tsx │ │ ├── create-page.tsx │ │ ├── list-page.tsx │ │ ├── mock-data │ │ └── mock-data.ts │ │ └── schemas │ │ └── normal-form-schema.ts ├── stores │ └── user-preference.ts ├── types │ └── global.d.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinPyaeKyaw/shadcn-admin-starter-template/965735f31f0d52136bc1b4da672592de19175f38/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | node_modules 3 | build 4 | dist -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@components", 15 | "utils": "@lib/utils", 16 | "ui": "@components/ui", 17 | "lib": "@lib", 18 | "hooks": "@/hooks" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import reactHooks from "eslint-plugin-react-hooks"; 4 | import reactRefresh from "eslint-plugin-react-refresh"; 5 | import tseslint from "typescript-eslint"; 6 | 7 | export default tseslint.config( 8 | { ignores: ["dist"] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ["**/*.{ts,tsx}"], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | "react-hooks": reactHooks, 18 | "react-refresh": reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | "react-refresh/only-export-components": [ 23 | "warn", 24 | { allowConstantExport: true }, 25 | ], 26 | "@typescript-eslint/no-explicit-any": "off", 27 | }, 28 | } 29 | ); 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shadcn-admin-portal-template", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@hookform/resolvers": "^3.9.0", 14 | "@radix-ui/react-avatar": "^1.1.1", 15 | "@radix-ui/react-checkbox": "^1.1.1", 16 | "@radix-ui/react-dialog": "^1.1.1", 17 | "@radix-ui/react-dropdown-menu": "^2.1.1", 18 | "@radix-ui/react-icons": "^1.3.0", 19 | "@radix-ui/react-label": "^2.1.0", 20 | "@radix-ui/react-popover": "^1.1.1", 21 | "@radix-ui/react-radio-group": "^1.2.0", 22 | "@radix-ui/react-select": "^2.1.1", 23 | "@radix-ui/react-separator": "^1.1.0", 24 | "@radix-ui/react-slider": "^1.2.0", 25 | "@radix-ui/react-slot": "^1.1.0", 26 | "@radix-ui/react-tabs": "^1.1.0", 27 | "@radix-ui/react-toast": "^1.2.1", 28 | "@radix-ui/react-tooltip": "^1.1.2", 29 | "@saimin/react-modal-manager": "^1.0.9", 30 | "@tanstack/react-query": "^5.56.2", 31 | "@tanstack/react-table": "^8.20.5", 32 | "axios": "^1.7.7", 33 | "class-variance-authority": "^0.7.0", 34 | "clsx": "^2.1.1", 35 | "cmdk": "^1.0.0", 36 | "date-fns": "^3.6.0", 37 | "i18next": "^23.15.1", 38 | "js-cookie": "^3.0.5", 39 | "lottie-react": "^2.4.0", 40 | "lucide-react": "^0.438.0", 41 | "next-themes": "^0.3.0", 42 | "react": "^18.3.1", 43 | "react-day-picker": "^8.10.1", 44 | "react-dom": "^18.3.1", 45 | "react-hook-form": "^7.53.0", 46 | "react-i18next": "^15.0.1", 47 | "react-idle-timer": "^5.7.2", 48 | "react-router-dom": "^6.26.1", 49 | "recharts": "^2.13.0-alpha.5", 50 | "sonner": "^1.5.0", 51 | "tailwind-merge": "^2.5.2", 52 | "tailwindcss-animate": "^1.0.7", 53 | "xlsx": "^0.18.5", 54 | "zod": "^3.23.8", 55 | "zustand": "^4.5.5" 56 | }, 57 | "devDependencies": { 58 | "@eslint/js": "^9.9.0", 59 | "@types/js-cookie": "^3.0.6", 60 | "@types/node": "^22.5.2", 61 | "@types/react": "^18.3.3", 62 | "@types/react-dom": "^18.3.0", 63 | "@vitejs/plugin-react": "^4.3.1", 64 | "autoprefixer": "^10.4.20", 65 | "eslint": "^9.9.0", 66 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 67 | "eslint-plugin-react-refresh": "^0.4.9", 68 | "globals": "^15.9.0", 69 | "postcss": "^8.4.44", 70 | "tailwindcss": "^3.4.10", 71 | "typescript": "^5.5.3", 72 | "typescript-eslint": "^8.0.1", 73 | "vite": "^5.4.1" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinPyaeKyaw/shadcn-admin-starter-template/965735f31f0d52136bc1b4da672592de19175f38/src/.DS_Store -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from "@components/theme/theme-provider"; 2 | import { Toaster } from "@components/ui/sonner"; 3 | import { router } from "@configs/routes"; 4 | import { RouterProvider } from "react-router-dom"; 5 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; 6 | 7 | const queryClient = new QueryClient(); 8 | 9 | function App() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /src/apis/instances/public-api.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const publicApi = axios.create({ 4 | baseURL: import.meta.env.VITE_API_URL, 5 | timeout: 1000, 6 | }); 7 | 8 | // Add a request interceptor 9 | publicApi.interceptors.request.use( 10 | function (config) { 11 | console.log("public request"); 12 | // Do something before request is sent 13 | return config; 14 | }, 15 | function (error) { 16 | // Do something with request error 17 | return Promise.reject(error); 18 | } 19 | ); 20 | 21 | // Add a response interceptor 22 | publicApi.interceptors.response.use( 23 | function (response) { 24 | console.log("public response"); 25 | // Any status code that lie within the range of 2xx cause this function to trigger 26 | // Do something with response data 27 | return response; 28 | }, 29 | function (error) { 30 | // Any status codes that falls outside the range of 2xx cause this function to trigger 31 | // Do something with response error 32 | return Promise.reject(error); 33 | } 34 | ); 35 | 36 | export default publicApi; 37 | -------------------------------------------------------------------------------- /src/apis/instances/secure-api.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const secureApi = axios.create({ 4 | baseURL: import.meta.env.VITE_API_URL, 5 | timeout: 1000, 6 | }); 7 | 8 | // Add a request interceptor 9 | secureApi.interceptors.request.use( 10 | function (config) { 11 | console.log("secure request"); 12 | // Do something before request is sent 13 | return config; 14 | }, 15 | function (error) { 16 | // Do something with request error 17 | return Promise.reject(error); 18 | } 19 | ); 20 | 21 | // Add a response interceptor 22 | secureApi.interceptors.response.use( 23 | function (response) { 24 | console.log("secure response"); 25 | // Any status code that lie within the range of 2xx cause this function to trigger 26 | // Do something with response data 27 | return response; 28 | }, 29 | function (error) { 30 | // Any status codes that falls outside the range of 2xx cause this function to trigger 31 | // Do something with response error 32 | return Promise.reject(error); 33 | } 34 | ); 35 | 36 | export default secureApi; 37 | -------------------------------------------------------------------------------- /src/apis/queries/category.ts: -------------------------------------------------------------------------------- 1 | import { useQuery } from "@tanstack/react-query"; 2 | import { productKeys } from "./keys"; 3 | import { getAllProductCategories } from "@apis/services/category"; 4 | 5 | export function useGetAllProductCategories() { 6 | return useQuery({ 7 | queryKey: productKeys.all, 8 | queryFn: () => getAllProductCategories(), 9 | select: (data) => 10 | data.data.map((d: Record) => ({ 11 | value: d.slug, 12 | label: d.name, 13 | })), 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /src/apis/queries/keys.ts: -------------------------------------------------------------------------------- 1 | export const productKeys = { 2 | all: ["product"] as const, 3 | detail: (id: string) => [...productKeys.all, id] as const, 4 | filters: (filters: Record) => [...productKeys.all, ...Object.values(filters)] as const, 5 | }; 6 | 7 | export const categoryKeys = { 8 | all: ["category"] as const, 9 | detail: (id: string) => [...categoryKeys.all, id] as const, 10 | filters: (filters: Record) => [...categoryKeys.all, ...Object.values(filters)] as const, 11 | }; 12 | -------------------------------------------------------------------------------- /src/apis/queries/product.ts: -------------------------------------------------------------------------------- 1 | import { getAllProducts } from "@apis/services/product"; 2 | import { useQuery } from "@tanstack/react-query"; 3 | import { productKeys } from "./keys"; 4 | 5 | export function useGetAllProducts( 6 | filters: Record, 7 | enabled: boolean = true 8 | ) { 9 | return useQuery({ 10 | queryKey: productKeys.filters(filters), 11 | queryFn: () => getAllProducts(filters), 12 | enabled, 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /src/apis/services/category.ts: -------------------------------------------------------------------------------- 1 | import publicApi from "@apis/instances/public-api"; 2 | 3 | export function getAllProductCategories() { 4 | return publicApi.get("/products/categories"); 5 | } 6 | -------------------------------------------------------------------------------- /src/apis/services/product.ts: -------------------------------------------------------------------------------- 1 | import publicApi from "@apis/instances/public-api"; 2 | 3 | export function getAllProducts(filters?: Record) { 4 | return publicApi.get("/products", { 5 | params: filters 6 | }); 7 | } -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinPyaeKyaw/shadcn-admin-starter-template/965735f31f0d52136bc1b4da672592de19175f38/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/assets/lotties/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinPyaeKyaw/shadcn-admin-starter-template/965735f31f0d52136bc1b4da672592de19175f38/src/assets/lotties/.DS_Store -------------------------------------------------------------------------------- /src/assets/translations/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome", 3 | "sidebar": { 4 | "dashboard": "Dashboard", 5 | "form": "Form", 6 | "table": "Table", 7 | "charts": "Charts", 8 | "calendar": "Calendar", 9 | "errPages": "Error Pages", 10 | "modals": "Modals" 11 | }, 12 | "login": { 13 | "loginHere": "Login Here", 14 | "username": "Username", 15 | "enterUsername": "Enter Username", 16 | "password": "Password", 17 | "enterPassword": "Enter Password", 18 | "login": "Login" 19 | }, 20 | "form": { 21 | "pageTitle": "Customizable & Reusable Form Components", 22 | "pageDesc": "Easily create dynamic, scalable forms with customizable, reusable components. Simplify development with built-in validation, accessibility, and flexible styling options for any project." 23 | }, 24 | "table": { 25 | "pageTitle": "Customizable & Reusable Table Components", 26 | "pageDesc": "Easily create dynamic, scalable forms with customizable, reusable components. Simplify development with built-in validation, accessibility, and flexible styling options for any project." 27 | }, 28 | "modal": { 29 | "pageTitle": "Customizable & Reusable Modal Components", 30 | "pageDesc": "Easily create dynamic, scalable forms with customizable, reusable components. Simplify development with built-in validation, accessibility, and flexible styling options for any project." 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/translations/mm.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "ကြိုဆိုပါတယ်ဗျာ", 3 | "sidebar": { 4 | "dashboard": "ဒက်ရှိဘုတ်", 5 | "form": "ဖောင်", 6 | "table": "ဇယားကွက်", 7 | "charts": "ဇယားများ", 8 | "calendar": "ပြက္ခဒိန်", 9 | "errPages": "အမှားစာမျက်နှာများ", 10 | "modals": "မော်ဒယ်လ်များ" 11 | }, 12 | "login": { 13 | "loginHere": "လော့ဂင်ဝင်ရန်", 14 | "username": "နာမည်", 15 | "enterUsername": "နာမည်ရိုက်ထည့်ပါ", 16 | "password": "စကားဝှက်", 17 | "enterPassword": "စကားဝှက်ရိုက်ထည့်ပါ", 18 | "login": "ဝင်မည်" 19 | }, 20 | "form": { 21 | "pageTitle": "စိတ်ကြိုက်ပြင်ဆင်နိုင်ပြီး ပြန်လည်အသုံးပြုနိုင်တဲ့ Form Components", 22 | "pageDesc": "Dynamic ဖြစ်ပြီး အချိုးအစား ပြောင်းလဲနိုင်တဲ့ form တွေကို အလွယ်တကူ ဖန်တီးနိုင်စေဖို့၊ ပြန်လည်အသုံးပြုနိုင်တဲ့ component တွေကို မိမိစိတ်ကြိုက် ပြင်ဆင်နိုင်အောင် တိကျစွာ ဖော်ဆောင်ပေးပါတယ်။ လွယ်ကူတဲ့ validation နဲ့ အသုံးပြုသူအတွက် အသင့်တော်ဆုံး အဆင်ပြေအောင် accessibility ထည့်သွင်းပေးထားပြီး မည်သည့် project အတွက်မဆို လိုအပ်သလို စတိုင်အပြောင်းအလဲတွေ လွယ်လွယ်ကူကူ ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။" 23 | }, 24 | "table": { 25 | "pageTitle": "စိတ်ကြိုက်ပြင်ဆင်နိုင်ပြီး ပြန်လည်အသုံးပြုနိုင်တဲ့ Table Components", 26 | "pageDesc": "Dynamic ဖြစ်ပြီး အချိုးအစားပြောင်းလဲနိုင်တဲ့ form တွေကို စိတ်ကြိုက်ပြင်ဆင်နိုင်တဲ့ ပြန်လည်အသုံးပြုနိုင်တဲ့ component တွေနဲ့ အလွယ်တကူ ဖန်တီးနိုင်ပါသည်။ ဘယ် project မဆို အဆင်ပြေစွာ develop လုပ်နိုင်ရန် built-in validation, accessibility, နဲ့ flexible styling ရွေးချယ်စရာတွေ ပါဝင်ထားပါတယ်။" 27 | }, 28 | "modal": { 29 | "pageTitle": "စိတ်ကြိုက်ပြင်ဆင်နိုင်ပြီး ပြန်လည်အသုံးပြုနိုင်တဲ့ Modal Components", 30 | "pageDesc": "Dynamic ဖြစ်ပြီး အချိုးအစားပြောင်းလဲနိုင်တဲ့ form တွေကို စိတ်ကြိုက်ပြင်ဆင်နိုင်တဲ့ ပြန်လည်အသုံးပြုနိုင်တဲ့ component တွေနဲ့ အလွယ်တကူ ဖန်တီးနိုင်ပါတယ်။ မည်သည့် project မဆို ဖွံ့ဖြိုးရေးလုပ်ရန် built-in validation၊ အသုံးပြုသူအတွက် accessibility၊ နှင့် လွယ်ကူသော styling ရွေးချယ်မှုများဖြင့် လွယ်ကူစေပါသည်။" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MinPyaeKyaw/shadcn-admin-starter-template/965735f31f0d52136bc1b4da672592de19175f38/src/components/.DS_Store -------------------------------------------------------------------------------- /src/components/charts/chart-area-default.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A simple area chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function AreaChartDefault() { 38 | return ( 39 | 40 | 41 | Area Chart 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 48 | 56 | 57 | value.slice(0, 3)} 63 | /> 64 | } 67 | /> 68 | 75 | 76 | 77 | 78 | 79 |
80 |
81 |
82 | Trending up by 5.2% this month 83 |
84 |
85 | January - June 2024 86 |
87 |
88 |
89 | 90 | 91 | ); 92 | } 93 | -------------------------------------------------------------------------------- /src/components/charts/chart-area-linear.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A linear area chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function AreaChartLinear() { 38 | return ( 39 | 40 | 41 | Area Chart - Linear 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 48 | 56 | 57 | value.slice(0, 3)} 63 | /> 64 | } 67 | /> 68 | 75 | 76 | 77 | 78 | 79 |
80 |
81 |
82 | Trending up by 5.2% this month 83 |
84 |
85 | January - June 2024 86 |
87 |
88 |
89 | 90 | 91 | ); 92 | } 93 | -------------------------------------------------------------------------------- /src/components/charts/chart-area-step.tsx: -------------------------------------------------------------------------------- 1 | import { Activity, TrendingUp } from "lucide-react"; 2 | import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A step area chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | icon: Activity, 35 | }, 36 | } satisfies ChartConfig; 37 | 38 | export default function AreaChartStep() { 39 | return ( 40 | 41 | 42 | Area Chart - Step 43 | 44 | Showing total visitors for the last 6 months 45 | 46 | 47 | 48 | 49 | 57 | 58 | value.slice(0, 3)} 64 | /> 65 | } 68 | /> 69 | 76 | 77 | 78 | 79 | 80 |
81 |
82 |
83 | Trending up by 5.2% this month 84 |
85 |
86 | January - June 2024 87 |
88 |
89 |
90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-default.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A bar chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function BarChartDefault() { 38 | return ( 39 | 40 | 41 | Bar Chart 42 | January - June 2024 43 | 44 | 45 | 46 | 47 | 48 | value.slice(0, 3)} 54 | /> 55 | } 58 | /> 59 | 60 | 61 | 62 | 63 | 64 |
65 | Trending up by 5.2% this month 66 |
67 |
68 | Showing total visitors for the last 6 months 69 |
70 | 71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-horizontal.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, XAxis, YAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A horizontal bar chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function BarChartHorizontal() { 38 | return ( 39 | 40 | 41 | Bar Chart - Horizontal 42 | January - June 2024 43 | 44 | 45 | 46 | 54 | 55 | value.slice(0, 3)} 62 | /> 63 | } 66 | /> 67 | 68 | 69 | 70 | 71 | 72 |
73 | Trending up by 5.2% this month 74 |
75 |
76 | Showing total visitors for the last 6 months 77 |
78 | 79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-label.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A bar chart with a label"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function BarChartLabel() { 38 | return ( 39 | 40 | 41 | Bar Chart - Label 42 | January - June 2024 43 | 44 | 45 | 46 | 53 | 54 | value.slice(0, 3)} 60 | /> 61 | } 64 | /> 65 | 66 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-multiple.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A multiple bar chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186, mobile: 80 }, 23 | { month: "February", desktop: 305, mobile: 200 }, 24 | { month: "March", desktop: 237, mobile: 120 }, 25 | { month: "April", desktop: 73, mobile: 190 }, 26 | { month: "May", desktop: 209, mobile: 130 }, 27 | { month: "June", desktop: 214, mobile: 140 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | mobile: { 36 | label: "Mobile", 37 | color: "hsl(var(--chart-2))", 38 | }, 39 | } satisfies ChartConfig; 40 | 41 | export default function BarChartMultiple() { 42 | return ( 43 | 44 | 45 | Bar Chart - Multiple 46 | January - June 2024 47 | 48 | 49 | 50 | 51 | 52 | value.slice(0, 3)} 58 | /> 59 | } 62 | /> 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 | Trending up by 5.2% this month 71 |
72 |
73 | Showing total visitors for the last 6 months 74 |
75 | 76 | 77 | ); 78 | } 79 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-negative.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A bar chart with negative values"; 20 | 21 | const chartData = [ 22 | { month: "January", visitors: 186 }, 23 | { month: "February", visitors: 205 }, 24 | { month: "March", visitors: -207 }, 25 | { month: "April", visitors: 173 }, 26 | { month: "May", visitors: -209 }, 27 | { month: "June", visitors: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | visitors: { 32 | label: "Visitors", 33 | }, 34 | } satisfies ChartConfig; 35 | 36 | export default function BarChartNegative() { 37 | return ( 38 | 39 | 40 | Bar Chart - Negative 41 | January - June 2024 42 | 43 | 44 | 45 | 46 | 47 | } 50 | /> 51 | 52 | 53 | {chartData.map((item) => ( 54 | 0 58 | ? "hsl(var(--primary))" 59 | : "hsl(var(--chart-2))" 60 | } 61 | /> 62 | ))} 63 | 64 | 65 | 66 | 67 | 68 |
69 | Trending up by 5.2% this month 70 |
71 |
72 | Showing total visitors for the last 6 months 73 |
74 | 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/components/charts/chart-bar-stacked.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartLegend, 16 | ChartLegendContent, 17 | ChartTooltip, 18 | ChartTooltipContent, 19 | } from "@components/ui/chart"; 20 | 21 | export const description = "A stacked bar chart with a legend"; 22 | 23 | const chartData = [ 24 | { month: "January", desktop: 186, mobile: 80 }, 25 | { month: "February", desktop: 305, mobile: 200 }, 26 | { month: "March", desktop: 237, mobile: 120 }, 27 | { month: "April", desktop: 73, mobile: 190 }, 28 | { month: "May", desktop: 209, mobile: 130 }, 29 | { month: "June", desktop: 214, mobile: 140 }, 30 | ]; 31 | 32 | const chartConfig = { 33 | desktop: { 34 | label: "Desktop", 35 | color: "hsl(var(--primary))", 36 | }, 37 | mobile: { 38 | label: "Mobile", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | } satisfies ChartConfig; 42 | 43 | export default function BarChartStacked() { 44 | return ( 45 | 46 | 47 | Bar Chart - Stacked + Legend 48 | January - June 2024 49 | 50 | 51 | 52 | 53 | 54 | value.slice(0, 3)} 60 | /> 61 | } /> 62 | } /> 63 | 69 | 75 | 76 | 77 | 78 | 79 |
80 | Trending up by 5.2% this month 81 |
82 |
83 | Showing total visitors for the last 6 months 84 |
85 | 86 | 87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /src/components/charts/chart-line-default.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A line chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function LineChartDefault() { 38 | return ( 39 | 40 | 41 | Line Chart 42 | January - June 2024 43 | 44 | 45 | 46 | 54 | 55 | value.slice(0, 3)} 61 | /> 62 | } 65 | /> 66 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-line-linear.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A linear line chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function LineChartLinear() { 38 | return ( 39 | 40 | 41 | Line Chart - Linear 42 | January - June 2024 43 | 44 | 45 | 46 | 54 | 55 | value.slice(0, 3)} 61 | /> 62 | } 65 | /> 66 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-line-step.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A line chart with step"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 73 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function LineChartStep() { 38 | return ( 39 | 40 | 41 | Line Chart - Step 42 | January - June 2024 43 | 44 | 45 | 46 | 54 | 55 | value.slice(0, 3)} 61 | /> 62 | } 65 | /> 66 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie-donut.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Pie, PieChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A donut chart"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function PieChartDonut() { 56 | return ( 57 | 58 | 59 | Pie Chart - Donut 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } 71 | /> 72 | 78 | 79 | 80 | 81 | 82 |
83 | Trending up by 5.2% this month 84 |
85 |
86 | Showing total visitors for the last 6 months 87 |
88 | 89 | 90 | ); 91 | } 92 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie-label.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Pie, PieChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A pie chart with a label"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function PieChartLabel() { 56 | return ( 57 | 58 | 59 | Pie Chart - Label 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } /> 69 | 70 | 71 | 72 | 73 | 74 |
75 | Trending up by 5.2% this month 76 |
77 |
78 | Showing total visitors for the last 6 months 79 |
80 | 81 | 82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie-legend.tsx: -------------------------------------------------------------------------------- 1 | import { Pie, PieChart } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartLegend, 14 | ChartLegendContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A pie chart with a legend"; 18 | 19 | const chartData = [ 20 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 21 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 22 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 23 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 24 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 25 | ]; 26 | 27 | const chartConfig = { 28 | visitors: { 29 | label: "Visitors", 30 | }, 31 | chrome: { 32 | label: "Chrome", 33 | color: "hsl(var(--primary))", 34 | }, 35 | safari: { 36 | label: "Safari", 37 | color: "hsl(var(--chart-2))", 38 | }, 39 | firefox: { 40 | label: "Firefox", 41 | color: "hsl(var(--chart-3))", 42 | }, 43 | edge: { 44 | label: "Edge", 45 | color: "hsl(var(--chart-4))", 46 | }, 47 | other: { 48 | label: "Other", 49 | color: "hsl(var(--chart-5))", 50 | }, 51 | } satisfies ChartConfig; 52 | 53 | export default function PieChartLegend() { 54 | return ( 55 | 56 | 57 | Pie Chart - Legend 58 | January - June 2024 59 | 60 | 61 | 65 | 66 | 67 | } 69 | className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" 70 | /> 71 | 72 | 73 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie-separator-none.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Pie, PieChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A pie chart with no separator"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function PieChartSeparatorNone() { 56 | return ( 57 | 58 | 59 | Pie Chart - Separator None 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } 71 | /> 72 | 78 | 79 | 80 | 81 | 82 |
83 | Trending up by 5.2% this month 84 |
85 |
86 | Showing total visitors for the last 6 months 87 |
88 | 89 | 90 | ); 91 | } 92 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie-simple.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { Pie, PieChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A simple pie chart"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function PieChartSimple() { 56 | return ( 57 | 58 | 59 | Pie Chart 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } 71 | /> 72 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-default.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 273 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartDefault() { 38 | return ( 39 | 40 | 41 | Radar Chart 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } /> 53 | 54 | 55 | 60 | 61 | 62 | 63 | 64 |
65 | Trending up by 5.2% this month 66 |
67 |
68 | January - June 2024 69 |
70 | 71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-dots.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with dots"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 273 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartDots() { 38 | return ( 39 | 40 | 41 | Radar Chart - Dots 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } /> 53 | 54 | 55 | 64 | 65 | 66 | 67 | 68 |
69 | Trending up by 5.2% this month 70 |
71 |
72 | January - June 2024 73 |
74 | 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-circle-fill.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a grid and circle fill"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 285 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 203 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 264 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridCircleFill() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid Circle Filled 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } /> 53 | 57 | 58 | 63 | 64 | 65 | 66 | 67 |
68 | Trending up by 5.2% this month 69 |
70 |
71 | January - June 2024 72 |
73 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-circle-no-lines.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a grid and circle fill"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 203 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridCircleNoLines() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid Circle - No lines 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } 55 | /> 56 | 57 | 58 | 67 | 68 | 69 | 70 | 71 |
72 | Trending up by 5.2% this month 73 |
74 |
75 | January - June 2024 76 |
77 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-circle.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a grid and circle"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 273 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridCircle() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid Circle 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } 55 | /> 56 | 57 | 58 | 67 | 68 | 69 | 70 | 71 |
72 | Trending up by 5.2% this month 73 |
74 |
75 | January - June 2024 76 |
77 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-custom.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a custom grid"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 273 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridCustom() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid Custom 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } 55 | /> 56 | 57 | 58 | 63 | 64 | 65 | 66 | 67 |
68 | Trending up by 5.2% this month 69 |
70 |
71 | January - June 2024 72 |
73 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-fill.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a grid filled"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 285 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 203 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 264 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridFill() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid Filled 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } 55 | /> 56 | 57 | 58 | 63 | 64 | 65 | 66 | 67 |
68 | Trending up by 5.2% this month 69 |
70 |
71 | January - June 2024 72 |
73 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-grid-none.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with no grid"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186 }, 23 | { month: "February", desktop: 305 }, 24 | { month: "March", desktop: 237 }, 25 | { month: "April", desktop: 273 }, 26 | { month: "May", desktop: 209 }, 27 | { month: "June", desktop: 214 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | } satisfies ChartConfig; 36 | 37 | export default function RadarChartGridNone() { 38 | return ( 39 | 40 | 41 | Radar Chart - Grid None 42 | 43 | Showing total visitors for the last 6 months 44 | 45 | 46 | 47 | 51 | 52 | } 55 | /> 56 | 57 | 66 | 67 | 68 | 69 | 70 |
71 | Trending up by 5.2% this month 72 |
73 |
74 | January - June 2024 75 |
76 | 77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-legend.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartLegend, 16 | ChartLegendContent, 17 | ChartTooltip, 18 | ChartTooltipContent, 19 | } from "@components/ui/chart"; 20 | 21 | export const description = "A radar chart with a legend"; 22 | 23 | const chartData = [ 24 | { month: "January", desktop: 186, mobile: 80 }, 25 | { month: "February", desktop: 305, mobile: 200 }, 26 | { month: "March", desktop: 237, mobile: 120 }, 27 | { month: "April", desktop: 73, mobile: 190 }, 28 | { month: "May", desktop: 209, mobile: 130 }, 29 | { month: "June", desktop: 214, mobile: 140 }, 30 | ]; 31 | 32 | const chartConfig = { 33 | desktop: { 34 | label: "Desktop", 35 | color: "hsl(var(--primary))", 36 | }, 37 | mobile: { 38 | label: "Mobile", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | } satisfies ChartConfig; 42 | 43 | export default function RadarChartLegend() { 44 | return ( 45 | 46 | 47 | Radar Chart - Legend 48 | 49 | Showing total visitors for the last 6 months 50 | 51 | 52 | 53 | 57 | 64 | } 67 | /> 68 | 69 | 70 | 75 | 76 | } /> 77 | 78 | 79 | 80 | 81 |
82 | Trending up by 5.2% this month 83 |
84 |
85 | January - June 2024 86 |
87 | 88 | 89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-multiple.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with multiple data"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186, mobile: 80 }, 23 | { month: "February", desktop: 305, mobile: 200 }, 24 | { month: "March", desktop: 237, mobile: 120 }, 25 | { month: "April", desktop: 73, mobile: 190 }, 26 | { month: "May", desktop: 209, mobile: 130 }, 27 | { month: "June", desktop: 214, mobile: 140 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | mobile: { 36 | label: "Mobile", 37 | color: "hsl(var(--chart-2))", 38 | }, 39 | } satisfies ChartConfig; 40 | 41 | export default function RadarChartMultiple() { 42 | return ( 43 | 44 | 45 | Radar Chart - Multiple 46 | 47 | Showing total visitors for the last 6 months 48 | 49 | 50 | 51 | 55 | 56 | } 59 | /> 60 | 61 | 62 | 67 | 68 | 69 | 70 | 71 | 72 |
73 | Trending up by 5.2% this month 74 |
75 |
76 | January - June 2024 77 |
78 | 79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /src/components/charts/chart-radar-radius.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radar chart with a radius axis"; 20 | 21 | const chartData = [ 22 | { month: "January", desktop: 186, mobile: 80 }, 23 | { month: "February", desktop: 305, mobile: 200 }, 24 | { month: "March", desktop: 237, mobile: 120 }, 25 | { month: "April", desktop: 73, mobile: 190 }, 26 | { month: "May", desktop: 209, mobile: 130 }, 27 | { month: "June", desktop: 214, mobile: 140 }, 28 | ]; 29 | 30 | const chartConfig = { 31 | desktop: { 32 | label: "Desktop", 33 | color: "hsl(var(--primary))", 34 | }, 35 | mobile: { 36 | label: "Mobile", 37 | color: "hsl(var(--chart-2))", 38 | }, 39 | } satisfies ChartConfig; 40 | 41 | export default function RadarChartRadius() { 42 | return ( 43 | 44 | 45 | Radar Chart - Radius Axis 46 | 47 | Showing total visitors for the last 6 months 48 | 49 | 50 | 51 | 55 | 56 | 60 | } 61 | /> 62 | 63 | 68 | 69 | 75 | 76 | 77 | 78 | 79 |
80 | Trending up by 5.2% this month 81 |
82 |
83 | January - June 2024 84 |
85 | 86 | 87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /src/components/charts/chart-radial-grid.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { PolarGrid, RadialBar, RadialBarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radial chart with a grid"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function RadialChartGrid() { 56 | return ( 57 | 58 | 59 | Radial Chart - Grid 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } 71 | /> 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 | Trending up by 5.2% this month 80 |
81 |
82 | Showing total visitors for the last 6 months 83 |
84 | 85 | 86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /src/components/charts/chart-radial-simple.tsx: -------------------------------------------------------------------------------- 1 | import { TrendingUp } from "lucide-react"; 2 | import { RadialBar, RadialBarChart } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | } from "@components/ui/card"; 12 | import { 13 | ChartConfig, 14 | ChartContainer, 15 | ChartTooltip, 16 | ChartTooltipContent, 17 | } from "@components/ui/chart"; 18 | 19 | export const description = "A radial chart"; 20 | 21 | const chartData = [ 22 | { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, 23 | { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, 24 | { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, 25 | { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, 26 | { browser: "other", visitors: 90, fill: "var(--color-other)" }, 27 | ]; 28 | 29 | const chartConfig = { 30 | visitors: { 31 | label: "Visitors", 32 | }, 33 | chrome: { 34 | label: "Chrome", 35 | color: "hsl(var(--primary))", 36 | }, 37 | safari: { 38 | label: "Safari", 39 | color: "hsl(var(--chart-2))", 40 | }, 41 | firefox: { 42 | label: "Firefox", 43 | color: "hsl(var(--chart-3))", 44 | }, 45 | edge: { 46 | label: "Edge", 47 | color: "hsl(var(--chart-4))", 48 | }, 49 | other: { 50 | label: "Other", 51 | color: "hsl(var(--chart-5))", 52 | }, 53 | } satisfies ChartConfig; 54 | 55 | export default function RadialChartSimple() { 56 | return ( 57 | 58 | 59 | Radial Chart 60 | January - June 2024 61 | 62 | 63 | 67 | 68 | } 71 | /> 72 | 73 | 74 | 75 | 76 | 77 |
78 | Trending up by 5.2% this month 79 |
80 |
81 | Showing total visitors for the last 6 months 82 |
83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-default.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | running: { 30 | label: "Running", 31 | color: "hsl(var(--primary))", 32 | }, 33 | swimming: { 34 | label: "Swimming", 35 | color: "hsl(var(--chart-2))", 36 | }, 37 | } satisfies ChartConfig; 38 | 39 | export default function TooltipChartDefault() { 40 | return ( 41 | 42 | 43 | Tooltip - Default 44 | 45 | Default tooltip with ChartTooltipContent. 46 | 47 | 48 | 49 | 50 | 51 | { 57 | return new Date(value).toLocaleDateString("en-US", { 58 | weekday: "short", 59 | }); 60 | }} 61 | /> 62 | 68 | 74 | } 76 | cursor={false} 77 | defaultIndex={1} 78 | /> 79 | 80 | 81 | 82 | 83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-icons.tsx: -------------------------------------------------------------------------------- 1 | import { Footprints, Waves } from "lucide-react"; 2 | import { Bar, BarChart, XAxis } from "recharts"; 3 | 4 | import { 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardHeader, 9 | CardTitle, 10 | } from "@components/ui/card"; 11 | import { 12 | ChartConfig, 13 | ChartContainer, 14 | ChartTooltip, 15 | ChartTooltipContent, 16 | } from "@components/ui/chart"; 17 | 18 | export const description = "A stacked bar chart with a legend"; 19 | 20 | const chartData = [ 21 | { date: "2024-07-15", running: 450, swimming: 300 }, 22 | { date: "2024-07-16", running: 380, swimming: 420 }, 23 | { date: "2024-07-17", running: 520, swimming: 120 }, 24 | { date: "2024-07-18", running: 140, swimming: 550 }, 25 | { date: "2024-07-19", running: 600, swimming: 350 }, 26 | { date: "2024-07-20", running: 480, swimming: 400 }, 27 | ]; 28 | 29 | const chartConfig = { 30 | running: { 31 | label: "Running", 32 | color: "hsl(var(--primary))", 33 | icon: Footprints, 34 | }, 35 | swimming: { 36 | label: "Swimming", 37 | color: "hsl(var(--chart-2))", 38 | icon: Waves, 39 | }, 40 | } satisfies ChartConfig; 41 | 42 | export default function TooltipChartIcon() { 43 | return ( 44 | 45 | 46 | Tooltip - Icons 47 | Tooltip with icons. 48 | 49 | 50 | 51 | 52 | { 58 | return new Date(value).toLocaleDateString("en-US", { 59 | weekday: "short", 60 | }); 61 | }} 62 | /> 63 | 69 | 75 | } 77 | cursor={false} 78 | defaultIndex={1} 79 | /> 80 | 81 | 82 | 83 | 84 | ); 85 | } 86 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-indicator-line.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | running: { 30 | label: "Running", 31 | color: "hsl(var(--primary))", 32 | }, 33 | swimming: { 34 | label: "Swimming", 35 | color: "hsl(var(--chart-2))", 36 | }, 37 | } satisfies ChartConfig; 38 | 39 | export default function TooltipChartIndicatorLine() { 40 | return ( 41 | 42 | 43 | Tooltip - Line Indicator 44 | Tooltip with line indicator. 45 | 46 | 47 | 48 | 49 | { 55 | return new Date(value).toLocaleDateString("en-US", { 56 | weekday: "short", 57 | }); 58 | }} 59 | /> 60 | 66 | 72 | } 74 | cursor={false} 75 | defaultIndex={1} 76 | /> 77 | 78 | 79 | 80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-indicator-none.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | running: { 30 | label: "Running", 31 | color: "hsl(var(--primary))", 32 | }, 33 | swimming: { 34 | label: "Swimming", 35 | color: "hsl(var(--chart-2))", 36 | }, 37 | } satisfies ChartConfig; 38 | 39 | export default function TooltipChartIndicatorNone() { 40 | return ( 41 | 42 | 43 | Tooltip - No Indicator 44 | Tooltip with no indicator. 45 | 46 | 47 | 48 | 49 | { 55 | return new Date(value).toLocaleDateString("en-US", { 56 | weekday: "short", 57 | }); 58 | }} 59 | /> 60 | 66 | 72 | } 74 | cursor={false} 75 | defaultIndex={1} 76 | /> 77 | 78 | 79 | 80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-label-custom.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | activities: { 30 | label: "Activities", 31 | }, 32 | running: { 33 | label: "Running", 34 | color: "hsl(var(--primary))", 35 | }, 36 | swimming: { 37 | label: "Swimming", 38 | color: "hsl(var(--chart-2))", 39 | }, 40 | } satisfies ChartConfig; 41 | 42 | export default function TooltipChartLabelCustom() { 43 | return ( 44 | 45 | 46 | Tooltip - Custom label 47 | 48 | Tooltip with custom label from chartConfig. 49 | 50 | 51 | 52 | 53 | 54 | { 60 | return new Date(value).toLocaleDateString("en-US", { 61 | weekday: "short", 62 | }); 63 | }} 64 | /> 65 | 71 | 77 | 80 | } 81 | cursor={false} 82 | defaultIndex={1} 83 | /> 84 | 85 | 86 | 87 | 88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-label-formatter.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | running: { 30 | label: "Running", 31 | color: "hsl(var(--primary))", 32 | }, 33 | swimming: { 34 | label: "Swimming", 35 | color: "hsl(var(--chart-2))", 36 | }, 37 | } satisfies ChartConfig; 38 | 39 | export default function TooltipChartLabelFormatter() { 40 | return ( 41 | 42 | 43 | Tooltip - Label Formatter 44 | Tooltip with label formatter. 45 | 46 | 47 | 48 | 49 | { 55 | return new Date(value).toLocaleDateString("en-US", { 56 | weekday: "short", 57 | }); 58 | }} 59 | /> 60 | 66 | 72 | { 76 | return new Date(value).toLocaleDateString("en-US", { 77 | day: "numeric", 78 | month: "long", 79 | year: "numeric", 80 | }); 81 | }} 82 | /> 83 | } 84 | cursor={false} 85 | defaultIndex={1} 86 | /> 87 | 88 | 89 | 90 | 91 | ); 92 | } 93 | -------------------------------------------------------------------------------- /src/components/charts/chart-tooltip-label-none.tsx: -------------------------------------------------------------------------------- 1 | import { Bar, BarChart, XAxis } from "recharts"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from "@components/ui/card"; 10 | import { 11 | ChartConfig, 12 | ChartContainer, 13 | ChartTooltip, 14 | ChartTooltipContent, 15 | } from "@components/ui/chart"; 16 | 17 | export const description = "A stacked bar chart with a legend"; 18 | 19 | const chartData = [ 20 | { date: "2024-07-15", running: 450, swimming: 300 }, 21 | { date: "2024-07-16", running: 380, swimming: 420 }, 22 | { date: "2024-07-17", running: 520, swimming: 120 }, 23 | { date: "2024-07-18", running: 140, swimming: 550 }, 24 | { date: "2024-07-19", running: 600, swimming: 350 }, 25 | { date: "2024-07-20", running: 480, swimming: 400 }, 26 | ]; 27 | 28 | const chartConfig = { 29 | running: { 30 | label: "Running", 31 | color: "hsl(var(--primary))", 32 | }, 33 | swimming: { 34 | label: "Swimming", 35 | color: "hsl(var(--chart-2))", 36 | }, 37 | } satisfies ChartConfig; 38 | 39 | export default function TooltipChartLabelNone() { 40 | return ( 41 | 42 | 43 | Tooltip - No Label 44 | Tooltip with no label. 45 | 46 | 47 | 48 | 49 | { 55 | return new Date(value).toLocaleDateString("en-US", { 56 | weekday: "short", 57 | }); 58 | }} 59 | /> 60 | 66 | 72 | } 74 | cursor={false} 75 | defaultIndex={1} 76 | /> 77 | 78 | 79 | 80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /src/components/commons/between.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { ReactNode } from "react"; 3 | 4 | interface Props { 5 | w?: string | number; 6 | h?: string | number; 7 | className?: string; 8 | children: ReactNode; 9 | } 10 | 11 | function Between({ w = "full", h = "auto", className, children }: Props) { 12 | return ( 13 |
14 | {children} 15 |
16 | ); 17 | } 18 | 19 | export default Between; 20 | -------------------------------------------------------------------------------- /src/components/commons/center.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { ReactNode } from "react"; 3 | 4 | interface Props { 5 | w?: string | number; 6 | h?: string | number; 7 | className?: string; 8 | children: ReactNode; 9 | } 10 | 11 | function Center({ w, h, className, children }: Props) { 12 | return ( 13 |
21 | {children} 22 |
23 | ); 24 | } 25 | 26 | export default Center; 27 | -------------------------------------------------------------------------------- /src/components/commons/lang-dropdown.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@components/ui/button"; 2 | import { 3 | DropdownMenu, 4 | DropdownMenuContent, 5 | DropdownMenuItem, 6 | DropdownMenuTrigger, 7 | } from "@components/ui/dropdown-menu"; 8 | import useUserPreference from "@stores/user-preference"; 9 | import clsx from "clsx"; 10 | import { Earth } from "lucide-react"; 11 | import { useTranslation } from "react-i18next"; 12 | 13 | function LangDropdown() { 14 | const { i18n } = useTranslation(); 15 | const { changeLang } = useUserPreference(); 16 | 17 | const handleChangeLang = (lang: Lang) => { 18 | i18n.changeLanguage(lang); 19 | changeLang(lang); 20 | }; 21 | 22 | return ( 23 | 24 | 25 | 32 | 33 | 34 | handleChangeLang("en")} 36 | className={clsx( 37 | "cursor-pointer", 38 | i18n.language === "en" && 39 | "bg-primary text-primary-foreground focus:text-primary-foreground focus:bg-primary" 40 | )} 41 | > 42 | English 43 | 44 | handleChangeLang("mm")} 46 | className={clsx( 47 | "cursor-pointer", 48 | i18n.language === "mm" && 49 | "bg-primary text-primary-foreground focus:text-primary-foreground focus:bg-primary" 50 | )} 51 | > 52 | Myanmar 53 | 54 | 55 | 56 | ); 57 | } 58 | 59 | export default LangDropdown; 60 | -------------------------------------------------------------------------------- /src/components/commons/logo.tsx: -------------------------------------------------------------------------------- 1 | // interface Props {} 2 | 3 | import { Cannabis } from "lucide-react"; 4 | 5 | const Logo = () => { 6 | return ( 7 |
8 |
9 | 10 |
11 |
Starter Template
12 |
13 | ); 14 | }; 15 | 16 | export default Logo; 17 | -------------------------------------------------------------------------------- /src/components/commons/page-title.tsx: -------------------------------------------------------------------------------- 1 | import Text from "@components/commons/text"; 2 | 3 | interface Props { 4 | title: string; 5 | desc?: string; 6 | } 7 | 8 | function PageTitle({ title, desc }: Props) { 9 | return ( 10 |
11 | 12 | {title} 13 | 14 | {desc} 15 |
16 | ); 17 | } 18 | 19 | export default PageTitle; 20 | -------------------------------------------------------------------------------- /src/components/commons/text.tsx: -------------------------------------------------------------------------------- 1 | import { cva, type VariantProps } from "class-variance-authority"; 2 | import clsx from "clsx"; 3 | 4 | const textStyles = cva("font-sans", { 5 | variants: { 6 | size: { 7 | xs: "text-xs", 8 | sm: "text-sm", 9 | md: "text-base", 10 | lg: "text-lg", 11 | xl: "text-xl", 12 | xxl: "text-2xl", 13 | xxxl: "text-3xl", 14 | }, 15 | weight: { 16 | normal: "font-normal", 17 | bold: "font-bold", 18 | }, 19 | color: { 20 | default: "text-inherit", 21 | primary: "text-primary", 22 | secondary: "text-secondary", 23 | danger: "text-red-500", 24 | }, 25 | }, 26 | defaultVariants: { 27 | size: "sm", 28 | weight: "normal", 29 | color: "default", 30 | }, 31 | }); 32 | 33 | type TextProps = VariantProps & { 34 | children: React.ReactNode; 35 | className?: string; 36 | }; 37 | 38 | const Text: React.FC = ({ 39 | size, 40 | weight, 41 | color, 42 | className, 43 | children, 44 | }) => { 45 | return ( 46 |

47 | {children} 48 |

49 | ); 50 | }; 51 | 52 | export default Text; 53 | -------------------------------------------------------------------------------- /src/components/data-table/data-table-column-header.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | ArrowDownIcon, 3 | ArrowUpIcon, 4 | CaretSortIcon, 5 | EyeNoneIcon, 6 | } from "@radix-ui/react-icons"; 7 | import { Column } from "@tanstack/react-table"; 8 | 9 | import { Button } from "@components/ui/button"; 10 | import { 11 | DropdownMenu, 12 | DropdownMenuContent, 13 | DropdownMenuItem, 14 | DropdownMenuSeparator, 15 | DropdownMenuTrigger, 16 | } from "@components/ui/dropdown-menu"; 17 | import { cn } from "@lib/utils"; 18 | 19 | interface DataTableColumnHeaderProps 20 | extends React.HTMLAttributes { 21 | column: Column; 22 | title: string; 23 | } 24 | 25 | export function DataTableColumnHeader({ 26 | column, 27 | title, 28 | className, 29 | }: DataTableColumnHeaderProps) { 30 | if (!column.getCanSort()) { 31 | return
{title}
; 32 | } 33 | 34 | return ( 35 |
36 | 37 | 38 | 52 | 53 | 54 | column.toggleSorting(false)}> 55 | 56 | Asc 57 | 58 | column.toggleSorting(true)}> 59 | 60 | Desc 61 | 62 | 63 | column.toggleVisibility(false)}> 64 | 65 | Hide 66 | 67 | 68 | 69 |
70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/components/data-table/data-table-loader.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from "@components/ui/skeleton"; 2 | import { 3 | Table as ShadcnTable, 4 | TableBody, 5 | TableCell, 6 | TableHead, 7 | TableHeader, 8 | TableRow, 9 | } from "@components/ui/table"; 10 | import { flexRender, Table } from "@tanstack/react-table"; 11 | 12 | interface Props { 13 | table: Table; 14 | rowCount: number; 15 | } 16 | 17 | function DataTableLoader({ table, rowCount }: Props) { 18 | const rowCountNumber = new Array(rowCount).fill(""); 19 | 20 | return ( 21 |
22 | 23 | 24 | {table.getHeaderGroups().map((headerGroup) => ( 25 | 26 | {headerGroup.headers.map((header) => { 27 | return ( 28 | 29 | {header.isPlaceholder 30 | ? null 31 | : flexRender( 32 | header.column.columnDef.header, 33 | header.getContext() 34 | )} 35 | 36 | ); 37 | })} 38 | 39 | ))} 40 | 41 | 42 | {rowCountNumber.map((_, i) => ( 43 | 44 | {table.getAllColumns().map((_, i) => ( 45 | 46 | 47 | 48 | ))} 49 | 50 | ))} 51 | 52 | 53 |
54 | ); 55 | } 56 | 57 | export default DataTableLoader; 58 | -------------------------------------------------------------------------------- /src/components/data-table/data-table-view-options.tsx: -------------------------------------------------------------------------------- 1 | import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"; 2 | import { MixerHorizontalIcon } from "@radix-ui/react-icons"; 3 | import { Table } from "@tanstack/react-table"; 4 | 5 | import { Button } from "@components/ui/button"; 6 | import { 7 | DropdownMenu, 8 | DropdownMenuCheckboxItem, 9 | DropdownMenuContent, 10 | DropdownMenuLabel, 11 | DropdownMenuSeparator, 12 | } from "@components/ui/dropdown-menu"; 13 | 14 | interface DataTableViewOptionsProps { 15 | table: Table; 16 | } 17 | 18 | export function DataTableViewOptions({ 19 | table, 20 | }: DataTableViewOptionsProps) { 21 | return ( 22 | 23 | 24 | 32 | 33 | 34 | Toggle columns 35 | 36 | {table 37 | .getAllColumns() 38 | .filter( 39 | (column) => 40 | typeof column.accessorFn !== "undefined" && column.getCanHide() 41 | ) 42 | .map((column) => { 43 | return ( 44 | column.toggleVisibility(!!value)} 49 | > 50 | {column.id} 51 | 52 | ); 53 | })} 54 | 55 | 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/inputs/checkbox-input.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@components/ui/checkbox"; 2 | import clsx from "clsx"; 3 | 4 | interface Props { 5 | label?: string; 6 | description?: string; 7 | name: string; 8 | form?: any; 9 | } 10 | 11 | function CheckboxInput({ label, description, name, form }: Props) { 12 | return ( 13 |
14 | { 17 | form.clearErrors(name); 18 | form.setValue(name, e); 19 | }} 20 | /> 21 |
22 | 31 | {description && ( 32 |

38 | {description} 39 |

40 | )} 41 |
42 |
43 | ); 44 | } 45 | 46 | export default CheckboxInput; 47 | -------------------------------------------------------------------------------- /src/components/inputs/checkgroup-Input.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@components/ui/checkbox"; 2 | import { 3 | FormControl, 4 | FormDescription, 5 | FormField, 6 | FormItem, 7 | FormLabel, 8 | FormMessage, 9 | } from "@components/ui/form"; 10 | 11 | interface Props { 12 | label?: string; 13 | description?: string; 14 | withAsterisk?: boolean; 15 | data: DataType[]; 16 | name: string; 17 | form?: any; 18 | } 19 | 20 | function CheckGroupInput({ 21 | label, 22 | description, 23 | name, 24 | data, 25 | withAsterisk = false, 26 | form, 27 | }: Props) { 28 | return ( 29 | ( 33 | 34 |
35 | 36 | {label}{" "} 37 | {withAsterisk && *} 38 | 39 | {description && {description}} 40 |
41 | {data.map((d) => ( 42 | { 47 | return ( 48 | 52 | 53 | { 56 | return checked 57 | ? field.onChange([...(field.value || []), d.value]) 58 | : field.onChange( 59 | field.value?.filter( 60 | (value: string) => value !== d.value 61 | ) 62 | ); 63 | }} 64 | /> 65 | 66 | {d.label} 67 | 68 | ); 69 | }} 70 | /> 71 | ))} 72 | 73 | 74 | )} 75 | /> 76 | ); 77 | } 78 | 79 | export default CheckGroupInput; 80 | -------------------------------------------------------------------------------- /src/components/inputs/date-input.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@components/ui/button"; 2 | import { Calendar } from "@components/ui/calendar"; 3 | import { format } from "date-fns"; 4 | import { 5 | FormControl, 6 | FormDescription, 7 | FormField, 8 | FormItem, 9 | FormLabel, 10 | FormMessage, 11 | } from "@components/ui/form"; 12 | import { PopoverContent } from "@components/ui/popover"; 13 | import { cn } from "@lib/utils"; 14 | import { Popover, PopoverTrigger } from "@radix-ui/react-popover"; 15 | import { CalendarIcon } from "lucide-react"; 16 | 17 | interface Props { 18 | label?: string; 19 | placeholder?: string; 20 | description?: string; 21 | name: string; 22 | withAsterisk?: boolean; 23 | form?: any; 24 | } 25 | 26 | function DateInput({ 27 | label, 28 | placeholder, 29 | description, 30 | withAsterisk = false, 31 | name, 32 | form, 33 | }: Props) { 34 | return ( 35 | ( 39 | 40 | {(label || withAsterisk) && ( 41 | 42 | {label}{" "} 43 | {withAsterisk && *} 44 | 45 | )} 46 | 47 | 48 | 49 | 63 | 64 | 65 | 66 | { 70 | field.onChange(e?.toISOString()); 71 | }} 72 | disabled={(date) => 73 | date > new Date() || date < new Date("1900-01-01") 74 | } 75 | initialFocus 76 | /> 77 | 78 | 79 | {description && {description}} 80 | 81 | 82 | )} 83 | /> 84 | ); 85 | } 86 | 87 | export default DateInput; 88 | -------------------------------------------------------------------------------- /src/components/inputs/password-input.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormDescription, 4 | FormField, 5 | FormItem, 6 | FormLabel, 7 | FormMessage, 8 | } from "@components/ui/form"; 9 | import { Input } from "@components/ui/input"; 10 | import { Eye, EyeOff } from "lucide-react"; 11 | import { useState } from "react"; 12 | 13 | interface Props { 14 | label?: string; 15 | placeholder?: string; 16 | description?: string; 17 | withAsterisk?: boolean; 18 | name: string; 19 | form?: any; 20 | } 21 | 22 | function PasswordInput({ 23 | label, 24 | placeholder, 25 | description, 26 | withAsterisk = false, 27 | name, 28 | form, 29 | }: Props) { 30 | const [visiblePassword, setVisiblePassword] = useState(false); 31 | 32 | const togglePasswordVisibility = () => { 33 | setVisiblePassword((prev) => !prev); 34 | }; 35 | 36 | return ( 37 | ( 41 | 42 | {(label || withAsterisk) && ( 43 | 47 | {label} 48 | {withAsterisk && *} 49 | 50 | )} 51 | 52 |
53 |
57 | {!visiblePassword ? ( 58 | 59 | ) : ( 60 | 61 | )} 62 |
63 | 69 |
70 | 71 | 72 | {description && {description}} 73 | 74 | 75 | )} 76 | /> 77 | ); 78 | } 79 | 80 | export default PasswordInput; 81 | -------------------------------------------------------------------------------- /src/components/inputs/radio-input.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormField, 4 | FormItem, 5 | FormLabel, 6 | FormMessage, 7 | } from "@components/ui/form"; 8 | import { RadioGroup, RadioGroupItem } from "@components/ui/radio-group"; 9 | 10 | interface Props { 11 | label?: string; 12 | name: string; 13 | withAsterisk?: boolean; 14 | data: DataType[]; 15 | form?: any; 16 | } 17 | 18 | function RadioInput({ label, name, data, withAsterisk = false, form }: Props) { 19 | return ( 20 | ( 24 | 25 | {(label || withAsterisk) && ( 26 | 27 | {label}{" "} 28 | {withAsterisk && *} 29 | 30 | )} 31 | 32 | 37 | {data.map((d) => ( 38 | 42 | 43 | 44 | 45 | {d.label} 46 | 47 | ))} 48 | 49 | 50 | 51 | 52 | )} 53 | /> 54 | ); 55 | } 56 | 57 | export default RadioInput; 58 | -------------------------------------------------------------------------------- /src/components/inputs/search-input.tsx: -------------------------------------------------------------------------------- 1 | import { Input } from "@components/ui/input"; 2 | import { Search } from "lucide-react"; 3 | 4 | function SearchInput() { 5 | return ( 6 |
7 | 8 | 13 |
14 | ); 15 | } 16 | 17 | export default SearchInput; 18 | -------------------------------------------------------------------------------- /src/components/inputs/select-input.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormDescription, 4 | FormField, 5 | FormItem, 6 | FormLabel, 7 | FormMessage, 8 | } from "@components/ui/form"; 9 | import { 10 | Select, 11 | SelectContent, 12 | SelectItem, 13 | SelectTrigger, 14 | SelectValue, 15 | } from "@components/ui/select"; 16 | 17 | interface Props { 18 | label?: string; 19 | placeholder?: string; 20 | description?: string; 21 | data: DataType[]; 22 | withAsterisk?: boolean; 23 | name: string; 24 | form?: any; 25 | isLoading?: boolean; 26 | className?: string; 27 | } 28 | 29 | function SelectInput({ 30 | label, 31 | placeholder, 32 | withAsterisk = false, 33 | description, 34 | data, 35 | name, 36 | form, 37 | isLoading = false, 38 | className, 39 | }: Props) { 40 | return ( 41 | ( 45 | 46 | {(label || withAsterisk) && ( 47 | 48 | {label}{" "} 49 | {withAsterisk && *} 50 | 51 | )} 52 | 74 | {description && {description}} 75 | 76 | 77 | )} 78 | /> 79 | ); 80 | } 81 | 82 | export default SelectInput; 83 | -------------------------------------------------------------------------------- /src/components/inputs/text-input.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormDescription, 4 | FormField, 5 | FormItem, 6 | FormLabel, 7 | FormMessage, 8 | } from "@components/ui/form"; 9 | import { Input } from "@components/ui/input"; 10 | 11 | interface Props { 12 | label?: string; 13 | placeholder?: string; 14 | description?: string; 15 | withAsterisk?: boolean; 16 | name: string; 17 | form?: any; 18 | } 19 | 20 | function TextInput({ 21 | label, 22 | placeholder, 23 | description, 24 | withAsterisk = false, 25 | name, 26 | form, 27 | }: Props) { 28 | return ( 29 | ( 33 | 34 | {(label || withAsterisk) && ( 35 | 36 | {label}{" "} 37 | {withAsterisk && *} 38 | 39 | )} 40 | 41 | 42 | 43 | 44 | {description && {description}} 45 | 46 | 47 | )} 48 | /> 49 | ); 50 | } 51 | 52 | export default TextInput; 53 | -------------------------------------------------------------------------------- /src/components/inputs/textarea-input.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormDescription, 4 | FormField, 5 | FormItem, 6 | FormLabel, 7 | FormMessage, 8 | } from "@components/ui/form"; 9 | import { Textarea } from "@components/ui/textarea"; 10 | 11 | interface Props { 12 | label?: string; 13 | placeholder?: string; 14 | description?: string; 15 | withAsterisk?: boolean; 16 | name: string; 17 | form?: any; 18 | } 19 | 20 | function TextareaInput({ 21 | label, 22 | placeholder, 23 | description, 24 | withAsterisk = false, 25 | name, 26 | form, 27 | }: Props) { 28 | return ( 29 | { 33 | return ( 34 | 35 | {(label || withAsterisk) && ( 36 | 37 | {label}{" "} 38 | {withAsterisk && ( 39 | * 40 | )} 41 | 42 | )} 43 | 44 |