This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
# API base for the browser → Django.
|
||||||
|
# Dev: http://localhost:8000/ (docker compose maps host :8000 → backend:5000)
|
||||||
|
# Prod: leave empty for same-origin (nginx proxies /api, /callback, /auth to Django)
|
||||||
|
VITE_API_URL=http://localhost:8000/
|
||||||
+11
-4
@@ -1,12 +1,19 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" class="antialiased" suppressHydrationWarning>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>frontend-vite</title>
|
<meta name="description" content="Sarlink Portal" />
|
||||||
|
<title>SAR Link Portal</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;300;400;500;600;700;800;900&family=Bokor&family=Geist+Mono:wght@400;500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="antialiased font-sans bg-gray-100 dark:bg-black">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Generated
+3935
-10
File diff suppressed because it is too large
Load Diff
+38
-3
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend-vite",
|
"name": "sarlink-portal-webui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.3.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@@ -10,15 +10,50 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^5.1.1",
|
||||||
|
"@pyncz/tailwind-mask-image": "^2.0.0",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.14",
|
||||||
|
"@radix-ui/react-slider": "^1.3.5",
|
||||||
|
"@tanstack/react-query": "^5.61.4",
|
||||||
|
"axios": "^1.8.4",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"input-otp": "^1.4.2",
|
||||||
|
"jotai": "2.8.0",
|
||||||
|
"lucide-react": "^0.523.0",
|
||||||
|
"moment": "^2.30.1",
|
||||||
|
"motion": "^12.15.0",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"nuqs": "^2.4.3",
|
||||||
|
"radix-ui": "^1.4.2",
|
||||||
"react": "^19.2.8",
|
"react": "^19.2.8",
|
||||||
"react-dom": "^19.2.8"
|
"react-aria-components": "^1.5.0",
|
||||||
|
"react-day-picker": "^9.7.0",
|
||||||
|
"react-dom": "^19.2.8",
|
||||||
|
"react-hook-form": "^7.58.1",
|
||||||
|
"react-phone-number-input": "^3.4.9",
|
||||||
|
"react-resizable-panels": "^3.0.3",
|
||||||
|
"react-router-dom": "^7.1.1",
|
||||||
|
"recharts": "^3.0.0",
|
||||||
|
"sonner": "^2.0.5",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"vaul": "^1.1.2",
|
||||||
|
"zod": "^3.25.67"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.1.11",
|
||||||
"@types/node": "^24.13.3",
|
"@types/node": "^24.13.3",
|
||||||
"@types/react": "^19.2.17",
|
"@types/react": "^19.2.17",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.4",
|
"@vitejs/plugin-react": "^6.0.4",
|
||||||
"oxlint": "^1.75.0",
|
"oxlint": "^1.75.0",
|
||||||
|
"tailwindcss": "^4.1.11",
|
||||||
|
"tailwindcss-motion": "^1.1.0",
|
||||||
|
"tw-animate-css": "^1.3.4",
|
||||||
"typescript": "~6.0.2",
|
"typescript": "~6.0.2",
|
||||||
"vite": "^8.2.0"
|
"vite": "^8.2.0"
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
||||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
||||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
||||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
||||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
||||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
-184
@@ -1,184 +0,0 @@
|
|||||||
.counter {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: var(--accent);
|
|
||||||
background: var(--accent-bg);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-border);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid var(--accent);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.base,
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
inset-inline: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base {
|
|
||||||
width: 170px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework {
|
|
||||||
z-index: 1;
|
|
||||||
top: 34px;
|
|
||||||
height: 28px;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
|
||||||
scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vite {
|
|
||||||
z-index: 0;
|
|
||||||
top: 107px;
|
|
||||||
height: 26px;
|
|
||||||
width: auto;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
|
||||||
scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 32px 20px 24px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
flex: 1 1 0;
|
|
||||||
padding: 32px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#docs {
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 32px 0 0;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--text-h);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--social-bg);
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.button-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
margin-top: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
flex: 1 1 calc(50% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#spacer {
|
|
||||||
height: 88px;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticks {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -4.5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 0;
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
right: 0;
|
|
||||||
border-right-color: var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
-122
@@ -1,122 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import reactLogo from './assets/react.svg'
|
|
||||||
import viteLogo from './assets/vite.svg'
|
|
||||||
import heroImg from './assets/hero.png'
|
|
||||||
import './App.css'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section id="center">
|
|
||||||
<div className="hero">
|
|
||||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
|
||||||
<img src={reactLogo} className="framework" alt="React logo" />
|
|
||||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="counter"
|
|
||||||
onClick={() => setCount((count) => count + 1)}
|
|
||||||
>
|
|
||||||
Count is {count}
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img className="logo" src={viteLogo} alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://react.dev/" target="_blank">
|
|
||||||
<img className="button-icon" src={reactLogo} alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
import { z } from "zod";
|
||||||
|
import { signUpFormSchema } from "@/lib/schemas";
|
||||||
|
import {
|
||||||
|
backendRegister,
|
||||||
|
checkIdOrPhone,
|
||||||
|
checkTempIdOrPhone,
|
||||||
|
} from "@/queries/authentication";
|
||||||
|
import apiClient from "@/lib/api-client";
|
||||||
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
phoneNumber: z
|
||||||
|
.string()
|
||||||
|
.regex(/^[7|9][0-9]{2}-[0-9]{4}$/, "Please enter a valid phone number"),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type FilterUserResponse = {
|
||||||
|
ok: boolean;
|
||||||
|
verified: boolean;
|
||||||
|
};
|
||||||
|
export type FilterTempUserResponse = {
|
||||||
|
ok: boolean;
|
||||||
|
otp_verified: boolean;
|
||||||
|
t_verified: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* In the SPA port, actions can't `redirect()` server-side. Instead they return
|
||||||
|
* a `redirectTo` in their state and the form component navigates to it.
|
||||||
|
*/
|
||||||
|
export async function signin(_previousState: ActionState, formData: FormData) {
|
||||||
|
const phoneNumber = formData.get("phoneNumber") as string;
|
||||||
|
const result = formSchema.safeParse({ phoneNumber });
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
return {
|
||||||
|
message: result.error.errors[0].message,
|
||||||
|
status: "error",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!phoneNumber) {
|
||||||
|
return {
|
||||||
|
message: "Please enter a phone number",
|
||||||
|
status: "error",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const FORMATTED_MOBILE_NUMBER = `${phoneNumber.split("-").join("")}`;
|
||||||
|
|
||||||
|
const user = await apiClient.get(
|
||||||
|
`/api/auth/users/filter/?mobile=${FORMATTED_MOBILE_NUMBER}`,
|
||||||
|
);
|
||||||
|
const userData = user.data as FilterUserResponse;
|
||||||
|
|
||||||
|
if (!userData.ok) {
|
||||||
|
return {
|
||||||
|
status: "redirect",
|
||||||
|
redirectTo: `/auth/signup?phone_number=${phoneNumber}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (!userData.verified) {
|
||||||
|
return {
|
||||||
|
message:
|
||||||
|
"Your account is on pending verification. Please wait for a response from admin or contact shihaam.",
|
||||||
|
status: "error",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
await apiClient.post("/auth/mobile/", { mobile: FORMATTED_MOBILE_NUMBER });
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: "redirect",
|
||||||
|
redirectTo: `/auth/verify-otp?phone_number=${FORMATTED_MOBILE_NUMBER}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ActionState = {
|
||||||
|
status?: string;
|
||||||
|
redirectTo?: string;
|
||||||
|
message?: string;
|
||||||
|
payload?: FormData;
|
||||||
|
errors?: z.typeToFlattenedError<
|
||||||
|
{
|
||||||
|
id_card: string;
|
||||||
|
phone_number: string;
|
||||||
|
name: string;
|
||||||
|
atoll_id: string;
|
||||||
|
island_id: string;
|
||||||
|
address: string;
|
||||||
|
dob: Date;
|
||||||
|
terms: string;
|
||||||
|
policy: string;
|
||||||
|
accNo: string;
|
||||||
|
},
|
||||||
|
string
|
||||||
|
>;
|
||||||
|
db_error?: string;
|
||||||
|
error?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function signup(_actionState: ActionState, formData: FormData) {
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
const parsedData = signUpFormSchema.safeParse(data);
|
||||||
|
|
||||||
|
if (!parsedData.success) {
|
||||||
|
return {
|
||||||
|
message: "Invalid form data",
|
||||||
|
payload: formData,
|
||||||
|
errors: parsedData.error.flatten(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const age =
|
||||||
|
new Date().getFullYear() - new Date(parsedData.data.dob).getFullYear();
|
||||||
|
if (age < 18) {
|
||||||
|
return {
|
||||||
|
message: "You must be at least 18 years old to register.",
|
||||||
|
payload: formData,
|
||||||
|
db_error: "dob",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const idCardExists = await checkIdOrPhone({
|
||||||
|
id_card: parsedData.data.id_card,
|
||||||
|
});
|
||||||
|
if (idCardExists.ok) {
|
||||||
|
return {
|
||||||
|
message: "ID card already exists.",
|
||||||
|
payload: formData,
|
||||||
|
db_error: "id_card",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const phoneNumberExists = await checkIdOrPhone({
|
||||||
|
phone_number: parsedData.data.phone_number,
|
||||||
|
});
|
||||||
|
|
||||||
|
const tempPhoneNumberExists = await checkTempIdOrPhone({
|
||||||
|
phone_number: parsedData.data.phone_number,
|
||||||
|
});
|
||||||
|
if (phoneNumberExists.ok || tempPhoneNumberExists.ok) {
|
||||||
|
return {
|
||||||
|
message: "Phone number already exists.",
|
||||||
|
payload: formData,
|
||||||
|
db_error: "phone_number",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const [signupError, signupResponse] = await tryCatch(
|
||||||
|
backendRegister({
|
||||||
|
payload: {
|
||||||
|
firstname: parsedData.data.name.split(" ")[0],
|
||||||
|
lastname: parsedData.data.name.split(" ").slice(1).join(" "),
|
||||||
|
username: parsedData.data.phone_number,
|
||||||
|
address: parsedData.data.address,
|
||||||
|
id_card: parsedData.data.id_card,
|
||||||
|
dob: new Date(parsedData.data.dob).toISOString().split("T")[0],
|
||||||
|
mobile: parsedData.data.phone_number,
|
||||||
|
island: Number.parseInt(parsedData.data.island_id),
|
||||||
|
atoll: Number.parseInt(parsedData.data.atoll_id),
|
||||||
|
acc_no: parsedData.data.accNo,
|
||||||
|
terms_accepted: parsedData.data.terms,
|
||||||
|
policy_accepted: parsedData.data.policy,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
if (signupError) {
|
||||||
|
return {
|
||||||
|
message: signupError.message,
|
||||||
|
payload: formData,
|
||||||
|
db_error: "phone_number",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
message: "User created successfully",
|
||||||
|
error: "success",
|
||||||
|
status: "redirect",
|
||||||
|
redirectTo: `/auth/verify-otp-registration?phone_number=${encodeURIComponent(
|
||||||
|
signupResponse.t_username,
|
||||||
|
)}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,199 @@
|
|||||||
|
import type {
|
||||||
|
ApiError,
|
||||||
|
ApiResponse,
|
||||||
|
NewPayment,
|
||||||
|
Payment,
|
||||||
|
Topup,
|
||||||
|
} from "@/lib/backend-types";
|
||||||
|
import type { TopupResponse } from "@/lib/types";
|
||||||
|
import apiClient from "@/lib/api-client";
|
||||||
|
import { handleApiResponse } from "@/utils/tryCatch";
|
||||||
|
|
||||||
|
type GenericGetResponseProps = {
|
||||||
|
offset?: number;
|
||||||
|
limit?: number;
|
||||||
|
page?: number;
|
||||||
|
[key: string]: string | number | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
function buildQuery(params: Record<string, string | number | undefined>) {
|
||||||
|
return Object.entries(params)
|
||||||
|
.filter(([_, value]) => value !== undefined && value !== "")
|
||||||
|
.map(
|
||||||
|
([key, value]) =>
|
||||||
|
`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
|
||||||
|
)
|
||||||
|
.join("&");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createPayment(data: NewPayment) {
|
||||||
|
const response = await apiClient.post("/api/billing/payment/", data);
|
||||||
|
return handleApiResponse<Payment>(response, "createPayment");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createTopup(data: { amount: number }) {
|
||||||
|
const response = await apiClient.post("/api/billing/topup/", data);
|
||||||
|
return handleApiResponse<Topup>(response, "createTopup");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPayment({ id }: { id: string }) {
|
||||||
|
const response = await apiClient.get(`/api/billing/payment/${id}`);
|
||||||
|
return handleApiResponse<Payment>(response, "getPayment");
|
||||||
|
}
|
||||||
|
|
||||||
|
type GetPaymentProps = {
|
||||||
|
[key: string]: string | number | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getPayments(params: GetPaymentProps, allPayments = false) {
|
||||||
|
const query = buildQuery(params);
|
||||||
|
const response = await apiClient.get(
|
||||||
|
`/api/billing/payment/?${query}&all_payments=${allPayments}`,
|
||||||
|
);
|
||||||
|
return handleApiResponse<ApiResponse<Payment>>(response, "getPayments");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTopups(
|
||||||
|
params: GenericGetResponseProps,
|
||||||
|
all_topups = false,
|
||||||
|
) {
|
||||||
|
const query = buildQuery(params);
|
||||||
|
const response = await apiClient.get(
|
||||||
|
`/api/billing/topup/?${query}&all_topups=${all_topups}`,
|
||||||
|
);
|
||||||
|
return handleApiResponse<ApiResponse<Topup>>(response, "getTopups");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTopup({ id }: { id: string }) {
|
||||||
|
const response = await apiClient.get(`/api/billing/topup/${id}`);
|
||||||
|
return handleApiResponse<Topup>(response, "getTopup");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function cancelTopup({ id }: { id: string }) {
|
||||||
|
const response = await apiClient.patch(`/api/billing/topup/${id}/cancel/`);
|
||||||
|
return handleApiResponse<Topup>(response, "cancelTopup");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function cancelPayment({ id }: { id: string }) {
|
||||||
|
const response = await apiClient.patch(`/api/billing/payment/${id}/cancel/`);
|
||||||
|
return handleApiResponse<Payment>(response, "cancelPayment");
|
||||||
|
}
|
||||||
|
|
||||||
|
type UpdatePayment = {
|
||||||
|
id: string;
|
||||||
|
method: "TRANSFER" | "WALLET";
|
||||||
|
};
|
||||||
|
export async function verifyPayment({ id, method }: UpdatePayment) {
|
||||||
|
const response = await apiClient.put(`/api/billing/payment/${id}/verify/`, {
|
||||||
|
method,
|
||||||
|
});
|
||||||
|
return handleApiResponse<Payment>(response, "verifyPayment");
|
||||||
|
}
|
||||||
|
|
||||||
|
export type VerifyDevicePaymentState = {
|
||||||
|
payment?: Payment;
|
||||||
|
message: string;
|
||||||
|
success: boolean;
|
||||||
|
fieldErrors: Record<string, string>;
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function verifyDevicePayment(
|
||||||
|
_prevState: VerifyDevicePaymentState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<VerifyDevicePaymentState> {
|
||||||
|
const paymentId = formData.get("paymentId") as string;
|
||||||
|
const method = formData.get("method") as "TRANSFER" | "WALLET";
|
||||||
|
|
||||||
|
if (!paymentId) {
|
||||||
|
return {
|
||||||
|
message: "Payment ID is required",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: { paymentId: "Payment ID is required" },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!method) {
|
||||||
|
return {
|
||||||
|
message: "Payment method is required",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: { method: "Payment method is required" },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.put(
|
||||||
|
`/api/billing/payment/${paymentId}/verify/`,
|
||||||
|
{ method },
|
||||||
|
);
|
||||||
|
const result = handleApiResponse<Payment>(response, "verifyDevicePayment");
|
||||||
|
|
||||||
|
return {
|
||||||
|
message:
|
||||||
|
method === "WALLET"
|
||||||
|
? "Payment completed successfully using wallet!"
|
||||||
|
: "Payment verification successful!",
|
||||||
|
success: true,
|
||||||
|
fieldErrors: {},
|
||||||
|
payment: result,
|
||||||
|
};
|
||||||
|
} catch (error: unknown) {
|
||||||
|
const fallback =
|
||||||
|
"Unable to verify payment. Please try again or contact support.";
|
||||||
|
return {
|
||||||
|
message: error instanceof Error ? error.message || fallback : fallback,
|
||||||
|
success: false,
|
||||||
|
fieldErrors: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type VerifyTopupPaymentState = {
|
||||||
|
transaction?: {
|
||||||
|
sourceBank: string;
|
||||||
|
trxDate: string;
|
||||||
|
};
|
||||||
|
message: string;
|
||||||
|
success: boolean;
|
||||||
|
fieldErrors: Record<string, string>;
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
export async function verifyTopupPayment(
|
||||||
|
_prevState: VerifyTopupPaymentState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<VerifyTopupPaymentState> {
|
||||||
|
const topupId = formData.get("topupId") as string;
|
||||||
|
|
||||||
|
if (!topupId) {
|
||||||
|
return {
|
||||||
|
message: "Topup ID is required",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: { topupId: "Topup ID is required" },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.put(
|
||||||
|
`/api/billing/topup/${topupId}/verify/`,
|
||||||
|
);
|
||||||
|
const result = handleApiResponse<TopupResponse>(
|
||||||
|
response,
|
||||||
|
"verifyTopupPayment",
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
message: result.message || "Topup payment verified successfully",
|
||||||
|
success: true,
|
||||||
|
fieldErrors: {},
|
||||||
|
transaction: result.transaction,
|
||||||
|
};
|
||||||
|
} catch (error: unknown) {
|
||||||
|
const fallback =
|
||||||
|
"Unable to verify payment. Please try again or contact support.";
|
||||||
|
return {
|
||||||
|
message: error instanceof Error ? error.message || fallback : fallback,
|
||||||
|
success: false,
|
||||||
|
fieldErrors: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
import type { RejectUserFormState } from "@/components/user/user-reject-dialog";
|
||||||
|
import type { ApiError } from "@/lib/backend-types";
|
||||||
|
import type { User } from "@/lib/types/user";
|
||||||
|
import apiClient from "@/lib/api-client";
|
||||||
|
import { handleApiResponse } from "@/utils/tryCatch";
|
||||||
|
|
||||||
|
type VerifyUserResponse =
|
||||||
|
| {
|
||||||
|
ok: boolean;
|
||||||
|
mismatch_fields: string[] | null;
|
||||||
|
error: string | null;
|
||||||
|
detail: string | null;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
message: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function verifyUser(userId: string) {
|
||||||
|
try {
|
||||||
|
const r = await apiClient.put(`/api/auth/users/${userId}/verify/`);
|
||||||
|
const body = (r.data ?? {}) as VerifyUserResponse & {
|
||||||
|
message?: string;
|
||||||
|
detail?: string;
|
||||||
|
mismatch_fields?: string[] | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (r.status < 200 || r.status >= 300) {
|
||||||
|
const msg = body?.message || body?.detail || "User verification failed";
|
||||||
|
return {
|
||||||
|
ok: false,
|
||||||
|
error: msg,
|
||||||
|
mismatch_fields: body?.mismatch_fields || null,
|
||||||
|
} as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ok: true, data: body } as const;
|
||||||
|
} catch (err) {
|
||||||
|
return { ok: false, error: (err as Error).message } as const;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getProfile() {
|
||||||
|
const response = await apiClient.get("/api/auth/profile/");
|
||||||
|
return handleApiResponse<User>(response, "getProfile");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function rejectUser(
|
||||||
|
_prevState: RejectUserFormState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<RejectUserFormState> {
|
||||||
|
const userId = formData.get("userId") as string;
|
||||||
|
const rejection_details = formData.get("rejection_details") as string;
|
||||||
|
|
||||||
|
const response = await apiClient.delete(
|
||||||
|
`/api/auth/users/${userId}/reject/`,
|
||||||
|
{ data: { rejection_details } },
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.status === 204) {
|
||||||
|
return {
|
||||||
|
message: "User rejected successfully!",
|
||||||
|
fieldErrors: {},
|
||||||
|
payload: formData,
|
||||||
|
redirectTo: "/users",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.status < 200 || response.status >= 300) {
|
||||||
|
const errorData = (response.data ?? {}) as ApiError;
|
||||||
|
throw new Error(
|
||||||
|
errorData.message || errorData.detail || "Failed to reject user",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const error = (response.data ?? {}) as ApiError;
|
||||||
|
return {
|
||||||
|
message: error.message || error.detail || "An unexpected error occurred.",
|
||||||
|
fieldErrors: {},
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UpdateUserFormState = {
|
||||||
|
message: string;
|
||||||
|
fieldErrors?: {
|
||||||
|
id_card?: string[];
|
||||||
|
first_name?: string[];
|
||||||
|
last_name?: string[];
|
||||||
|
dob?: string[];
|
||||||
|
mobile?: string[];
|
||||||
|
address?: string[];
|
||||||
|
};
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function updateUser(
|
||||||
|
_prevState: UpdateUserFormState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<UpdateUserFormState> {
|
||||||
|
const userId = formData.get("userId") as string;
|
||||||
|
const data: Record<string, string | number | boolean> = {};
|
||||||
|
|
||||||
|
for (const [key, value] of formData.entries()) {
|
||||||
|
if (key !== "userId" && value !== undefined && value !== "") {
|
||||||
|
data[key] = typeof value === "number" ? value : String(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.put(
|
||||||
|
`/api/auth/users/${userId}/update/`,
|
||||||
|
data,
|
||||||
|
);
|
||||||
|
const json = (response.data ?? {}) as Record<string, unknown> &
|
||||||
|
Partial<User> & { message?: string; detail?: string; field_errors?: unknown };
|
||||||
|
|
||||||
|
if (response.status < 200 || response.status >= 300) {
|
||||||
|
const isFieldErrorObject =
|
||||||
|
json &&
|
||||||
|
typeof json === "object" &&
|
||||||
|
!Array.isArray(json) &&
|
||||||
|
Object.values(json).every(
|
||||||
|
(val) => Array.isArray(val) && val.every((v) => typeof v === "string"),
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
message:
|
||||||
|
json.message ||
|
||||||
|
json.detail ||
|
||||||
|
(isFieldErrorObject
|
||||||
|
? "Please correct the highlighted fields."
|
||||||
|
: "An error occurred while updating the user."),
|
||||||
|
fieldErrors: isFieldErrorObject
|
||||||
|
? (json as UpdateUserFormState["fieldErrors"])
|
||||||
|
: (json.field_errors as UpdateUserFormState["fieldErrors"]) || {},
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...(json as unknown as User),
|
||||||
|
message: "User updated successfully",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateUserAgreement(
|
||||||
|
_prevState: UpdateUserFormState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<UpdateUserFormState> {
|
||||||
|
const userId = formData.get("userId") as string;
|
||||||
|
// Remove userId from formData before sending to API
|
||||||
|
const apiFormData = new FormData();
|
||||||
|
for (const [key, value] of formData.entries()) {
|
||||||
|
if (key !== "userId") {
|
||||||
|
apiFormData.append(key, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// axios sets the multipart boundary content-type automatically for FormData.
|
||||||
|
const response = await apiClient.put(
|
||||||
|
`/api/auth/users/${userId}/agreement/`,
|
||||||
|
apiFormData,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.status < 200 || response.status >= 300) {
|
||||||
|
const errorData = (response.data ?? {}) as ApiError & {
|
||||||
|
field_errors?: UpdateUserFormState["fieldErrors"];
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
message:
|
||||||
|
errorData.message ||
|
||||||
|
errorData.detail ||
|
||||||
|
"An error occurred while updating the user agreement.",
|
||||||
|
fieldErrors: errorData.field_errors || {},
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedUserAgreement = (response.data ?? {}) as { agreement: string };
|
||||||
|
return {
|
||||||
|
...updatedUserAgreement,
|
||||||
|
message: "User agreement updated successfully",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AddTopupFormState = {
|
||||||
|
status: boolean;
|
||||||
|
message: string;
|
||||||
|
fieldErrors?: {
|
||||||
|
amount?: string[];
|
||||||
|
description?: string[];
|
||||||
|
};
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function adminUserTopup(
|
||||||
|
_prevState: AddTopupFormState,
|
||||||
|
formData: FormData,
|
||||||
|
): Promise<AddTopupFormState> {
|
||||||
|
const user_id = formData.get("user_id") as string;
|
||||||
|
const amount = formData.get("amount") as string;
|
||||||
|
const description = formData.get("description") as string;
|
||||||
|
|
||||||
|
if (!amount) {
|
||||||
|
return {
|
||||||
|
status: false,
|
||||||
|
message: "Amount is required",
|
||||||
|
fieldErrors: { amount: ["Amount is required"], description: [] },
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const response = await apiClient.post("/api/billing/admin-topup/", {
|
||||||
|
amount: Number.parseInt(amount),
|
||||||
|
user_id: Number.parseInt(user_id),
|
||||||
|
description,
|
||||||
|
});
|
||||||
|
if (response.status < 200 || response.status >= 300) {
|
||||||
|
const errorData = (response.data ?? {}) as ApiError;
|
||||||
|
return {
|
||||||
|
status: false,
|
||||||
|
message:
|
||||||
|
errorData.message ||
|
||||||
|
errorData.detail ||
|
||||||
|
"An error occurred while topping up the user.",
|
||||||
|
fieldErrors: {},
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: true,
|
||||||
|
message: "User topped up successfully",
|
||||||
|
fieldErrors: {},
|
||||||
|
payload: formData,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,55 @@
|
|||||||
|
import { Clipboard, ClipboardCheck } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
export function AccountInfomation({
|
||||||
|
accountNo,
|
||||||
|
accName,
|
||||||
|
}: {
|
||||||
|
accountNo: string;
|
||||||
|
accName: string;
|
||||||
|
}) {
|
||||||
|
const [accNo, setAccNo] = useState(false);
|
||||||
|
return (
|
||||||
|
<div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
|
||||||
|
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
|
||||||
|
Account Information
|
||||||
|
</h6>
|
||||||
|
<div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
|
||||||
|
<div className="text-sm font-semibold">Account Name</div>
|
||||||
|
<span>{accName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
|
||||||
|
<div className="flex flex-col items-center justify-center w-full">
|
||||||
|
<p className="text-sm font-semibold">Account No</p>
|
||||||
|
<span>{accountNo}</span>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setAccNo(true);
|
||||||
|
navigator.clipboard.writeText(accountNo);
|
||||||
|
}, 2000);
|
||||||
|
toast.success("Account number copied!");
|
||||||
|
setAccNo((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className="mt-2 w-full"
|
||||||
|
variant={"secondary"}
|
||||||
|
>
|
||||||
|
{accNo ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>Copy Account Number</span>
|
||||||
|
<Clipboard />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>Copy Account Number</span>
|
||||||
|
<ClipboardCheck color="green" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { deviceCartAtom } from "@/lib/atoms";
|
||||||
|
import type { Device } from "@/lib/backend-types";
|
||||||
|
import { useAtomValue, useSetAtom } from "jotai";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function AddDevicesToCartButton({ device }: { device: Device }) {
|
||||||
|
const setDeviceCart = useSetAtom(deviceCartAtom);
|
||||||
|
const devices = useAtomValue(deviceCartAtom);
|
||||||
|
|
||||||
|
const isChecked = devices.some((d) => d.id === device.id);
|
||||||
|
|
||||||
|
if (device.has_a_pending_payment || device.is_active) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
disabled={device.blocked || device.is_active}
|
||||||
|
className="peer accent-[#f49d1b] size-4"
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={() =>
|
||||||
|
setDeviceCart((prev) =>
|
||||||
|
isChecked
|
||||||
|
? prev.filter((d) => d.id !== device.id)
|
||||||
|
: [...prev, device],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { HandCoins } from "lucide-react";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { userAtom } from "@/lib/auth-store";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { getDevices } from "@/queries/devices";
|
||||||
|
import BlockDeviceDialog from "../block-device-dialog";
|
||||||
|
import ClientErrorMessage from "../client-error-message";
|
||||||
|
import FullPageLoader from "../full-page-loader";
|
||||||
|
import Pagination from "../pagination";
|
||||||
|
|
||||||
|
export function AdminDevicesTable() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const user = useAtomValue(userAtom);
|
||||||
|
const isAdmin = user?.is_admin;
|
||||||
|
|
||||||
|
const page = Number.parseInt(searchParams.get("page") as string) || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const { data: devices, error, isLoading } = useQuery({
|
||||||
|
queryKey: ["admin-devices", apiParams],
|
||||||
|
queryFn: () => getDevices(apiParams, true),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <FullPageLoader />;
|
||||||
|
if (error) return <ClientErrorMessage message={error.message} />;
|
||||||
|
if (!devices) return null;
|
||||||
|
|
||||||
|
const { meta, data } = devices;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data?.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
|
<h3>No devices.</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Device Name</TableHead>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>MAC Address</TableHead>
|
||||||
|
<TableHead>Vendor</TableHead>
|
||||||
|
<TableHead>#</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{data?.map((device) => (
|
||||||
|
<TableRow key={device.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<Link
|
||||||
|
className={cn(
|
||||||
|
"hover:underline font-semibold",
|
||||||
|
device.is_active ? "text-green-600" : "",
|
||||||
|
)}
|
||||||
|
to={`/devices/${device.id}`}
|
||||||
|
>
|
||||||
|
{device.name}
|
||||||
|
</Link>
|
||||||
|
{device.is_active ? (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Active until{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{new Date(
|
||||||
|
device.expiry_date || "",
|
||||||
|
).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Device Inactive
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{device.has_a_pending_payment && (
|
||||||
|
<Link to={`/payments/${device.pending_payment_id}`}>
|
||||||
|
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
|
||||||
|
Payment Pending{" "}
|
||||||
|
<HandCoins className="animate-pulse" size={14} />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||||
|
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
||||||
|
<span className="font-semibold">Comment</span>
|
||||||
|
<p className="text-neutral-400">
|
||||||
|
{device?.reason_for_blocking}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
{device?.user?.name}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{device?.user?.id_card}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">{device.mac}</TableCell>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
{device?.vendor}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{!device.has_a_pending_payment && (
|
||||||
|
<BlockDeviceDialog
|
||||||
|
admin={isAdmin}
|
||||||
|
type={device.blocked ? "unblock" : "block"}
|
||||||
|
device={device}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={5} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">Total {meta?.total} device.</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">Total {meta?.total} devices.</p>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta?.last_page}
|
||||||
|
currentPage={meta?.current_page}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
import { Loader2, PlusCircle } from "lucide-react";
|
||||||
|
import { useActionState, useEffect, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { adminUserTopup } from "@/actions/user-actions";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
|
||||||
|
export type AddTopupFormState = {
|
||||||
|
status: boolean;
|
||||||
|
message: string;
|
||||||
|
fieldErrors?: {
|
||||||
|
amount?: string[];
|
||||||
|
description?: string[];
|
||||||
|
};
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initialState: AddTopupFormState = {
|
||||||
|
message: "",
|
||||||
|
fieldErrors: {},
|
||||||
|
status: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [state, formAction, pending] = useActionState(
|
||||||
|
adminUserTopup,
|
||||||
|
initialState,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (state.message && state !== initialState) {
|
||||||
|
if (state.fieldErrors && Object.keys(state.fieldErrors).length > 0) {
|
||||||
|
toast.error(state.message);
|
||||||
|
} else if (state.status) {
|
||||||
|
setOpen(false);
|
||||||
|
toast.success(state.message);
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["topups"] });
|
||||||
|
navigate("/user-topups?page=1");
|
||||||
|
} else {
|
||||||
|
toast.error(state.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [state, navigate, queryClient]);
|
||||||
|
|
||||||
|
if (!user_id) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
className="gap-2 items-center"
|
||||||
|
disabled={pending}
|
||||||
|
variant="default"
|
||||||
|
>
|
||||||
|
Add cash topup
|
||||||
|
<PlusCircle size={16} />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>New Manual Topup</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
To add a new manual topup, enter the amount below. Click save when
|
||||||
|
you are done.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form action={formAction}>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<Label htmlFor="amount">Topup Amount</Label>
|
||||||
|
<input type="hidden" name="user_id" value={user_id} />
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
defaultValue={(state?.payload?.get("amount") || "") as string}
|
||||||
|
name="amount"
|
||||||
|
id="topup_amount"
|
||||||
|
className="col-span-3"
|
||||||
|
/>
|
||||||
|
{state.fieldErrors?.amount && (
|
||||||
|
<span className="text-red-500 text-sm">
|
||||||
|
{state.fieldErrors.amount[0]}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<Label htmlFor="description">Topup Description</Label>
|
||||||
|
<input type="hidden" name="user_id" value={user_id} />
|
||||||
|
<Textarea
|
||||||
|
defaultValue={
|
||||||
|
(state?.payload?.get("description") || "") as string
|
||||||
|
}
|
||||||
|
rows={10}
|
||||||
|
name="description"
|
||||||
|
id="topup_description"
|
||||||
|
className="col-span-5 max-w-[375px] h-32 resize-none"
|
||||||
|
style={{ overflowY: "auto" }}
|
||||||
|
/>
|
||||||
|
{state.fieldErrors?.description && (
|
||||||
|
<span className="text-red-500 text-sm">
|
||||||
|
{state.fieldErrors.description[0]}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button disabled={pending} type="submit">
|
||||||
|
{pending ? <Loader2 className="animate-spin" /> : "Save"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import { getTopups } from "@/actions/payment";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import ClientErrorMessage from "../client-error-message";
|
||||||
|
import FullPageLoader from "../full-page-loader";
|
||||||
|
import Pagination from "../pagination";
|
||||||
|
import { Badge } from "../ui/badge";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
export function AdminTopupsTable() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const page = Number.parseInt(searchParams.get("page") as string) || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const { data: topups, error, isLoading } = useQuery({
|
||||||
|
queryKey: ["topups", apiParams],
|
||||||
|
queryFn: () => getTopups(apiParams, true),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <FullPageLoader />;
|
||||||
|
if (error) return <ClientErrorMessage message={error.message} />;
|
||||||
|
if (!topups) return null;
|
||||||
|
|
||||||
|
const { data, meta } = topups;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data?.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
|
<h3>No topups yet.</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
<TableHead>Action</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{topups?.data?.map((topup) => (
|
||||||
|
<TableRow key={topup.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
{topup?.user?.name}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{topup?.user?.id_card}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{topup.paid ? (
|
||||||
|
<Badge
|
||||||
|
className="bg-green-100 dark:bg-green-700"
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
{topup.status}
|
||||||
|
</Badge>
|
||||||
|
) : topup.is_expired ? (
|
||||||
|
<Badge>Expired</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline">{topup.status}</Badge>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{topup.amount.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
MVR
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<Link
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
to={`/top-ups/${topup.id}`}
|
||||||
|
>
|
||||||
|
<Button size={"sm"} variant="outline">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">Total {meta?.total} topup.</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">Total {meta?.total} topups.</p>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta?.last_page}
|
||||||
|
currentPage={meta?.current_page}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import { getPayments } from "@/actions/payment";
|
||||||
|
import Pagination from "@/components/pagination";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import ClientErrorMessage from "../client-error-message";
|
||||||
|
import FullPageLoader from "../full-page-loader";
|
||||||
|
|
||||||
|
export function UsersPaymentsTable() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
|
||||||
|
const page = Number.parseInt(searchParams.get("page") as string) || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const { data: payments, error, isLoading } = useQuery({
|
||||||
|
queryKey: ["user-payments", apiParams],
|
||||||
|
queryFn: () => getPayments(apiParams, true),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <FullPageLoader />;
|
||||||
|
if (error) return <ClientErrorMessage message={error.message} />;
|
||||||
|
if (!payments) return null;
|
||||||
|
|
||||||
|
const { meta, data } = payments;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
|
<h3>No user payments yet.</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Devices paid</TableHead>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
<TableHead>Duration</TableHead>
|
||||||
|
<TableHead>Payment Status</TableHead>
|
||||||
|
<TableHead>Payment Method</TableHead>
|
||||||
|
<TableHead>MIB Reference</TableHead>
|
||||||
|
<TableHead>Paid At</TableHead>
|
||||||
|
<TableHead>Action</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{data.map((payment) => (
|
||||||
|
<TableRow
|
||||||
|
className={`${payment.paid && "title-bg dark:bg-black"}`}
|
||||||
|
key={payment.id}
|
||||||
|
>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
<ol className="list-disc list-inside text-sm">
|
||||||
|
{payment.devices.map((device) => (
|
||||||
|
<li
|
||||||
|
key={device.id}
|
||||||
|
className="text-sm text-muted-foreground"
|
||||||
|
>
|
||||||
|
{device.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
{payment?.user?.name}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{payment?.user?.id_card}
|
||||||
|
</span>
|
||||||
|
</div>{" "}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{payment.amount} MVR</TableCell>
|
||||||
|
<TableCell>{payment.number_of_months} Months</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
{payment.status === "PENDING" ? (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-yellow-100 text-black"
|
||||||
|
>
|
||||||
|
{payment.status}
|
||||||
|
</Badge>
|
||||||
|
) : payment.status === "PAID" ? (
|
||||||
|
<Badge variant="outline" className="bg-lime-100 text-black">
|
||||||
|
{payment.status}
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline" className="bg-red-100 text-black">
|
||||||
|
{payment.status}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{payment.method}</TableCell>
|
||||||
|
<TableCell>{payment.mib_reference}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{new Date(payment.paid_at ?? "").toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Link to={`/payments/${payment.id}`}>
|
||||||
|
<Button>Details</Button>
|
||||||
|
</Link>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={10} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">Total {meta?.total} payment.</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">Total {meta?.total} payments.</p>
|
||||||
|
)}{" "}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta?.last_page}
|
||||||
|
currentPage={meta?.current_page}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { EyeIcon } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
|
||||||
|
export function AgreementCard({ agreement }: { agreement: string }) {
|
||||||
|
return (
|
||||||
|
<Card className="w-full max-w-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Sarlink User Agreement</CardTitle>
|
||||||
|
<CardDescription>User agreement for Sarlink services.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardFooter className="flex-col gap-2">
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-full hover:cursor-pointer"
|
||||||
|
href={agreement}
|
||||||
|
>
|
||||||
|
<Button type="button" className="w-full hover:cursor-pointer">
|
||||||
|
<EyeIcon />
|
||||||
|
View Agreement
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { Loader2, User as UserIcon } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { clearAuth, userAtom } from "@/lib/auth-store";
|
||||||
|
import { logout } from "@/queries/authentication";
|
||||||
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
|
|
||||||
|
export function AccountPopover() {
|
||||||
|
const user = useAtomValue(userAtom);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button className="w-fit px-2" variant="outline">
|
||||||
|
<UserIcon />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-fit mr-4">
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h4 className="font-medium leading-none">
|
||||||
|
{user?.first_name} {user?.last_name}
|
||||||
|
</h4>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
<p className="font-semibold">{user?.id_card}</p>
|
||||||
|
<p>{user?.mobile}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Button
|
||||||
|
disabled={loading}
|
||||||
|
onClick={async () => {
|
||||||
|
setLoading(true);
|
||||||
|
// Best-effort backend logout, then clear local auth.
|
||||||
|
await tryCatch(logout());
|
||||||
|
clearAuth();
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/auth/signin");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? <Loader2 className="animate-spin" /> : "Logout"}
|
||||||
|
</Button>
|
||||||
|
<Link to="/profile" className="text-muted-foreground">
|
||||||
|
<Button variant={"secondary"} className="w-full">
|
||||||
|
View Profile
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { NuqsAdapter } from "nuqs/adapters/react-router/v7";
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { getProfile } from "@/actions/user-actions";
|
||||||
|
import { DeviceCartDrawer } from "@/components/device-cart";
|
||||||
|
import { ModeToggle } from "@/components/theme-toggle";
|
||||||
|
import { AppSidebar } from "@/components/ui/app-sidebar";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import {
|
||||||
|
SidebarInset,
|
||||||
|
SidebarProvider,
|
||||||
|
SidebarTrigger,
|
||||||
|
} from "@/components/ui/sidebar";
|
||||||
|
import { Wallet } from "@/components/wallet";
|
||||||
|
import { userAtom } from "@/lib/auth-store";
|
||||||
|
import { WelcomeBanner } from "../welcome-banner";
|
||||||
|
import { AccountPopover } from "./account-popver";
|
||||||
|
|
||||||
|
export function ApplicationLayout() {
|
||||||
|
const user = useAtomValue(userAtom);
|
||||||
|
|
||||||
|
// Fresh profile (wallet balance) — replaces the old server-side getProfile.
|
||||||
|
// Falls back to the login snapshot in userAtom while loading.
|
||||||
|
const { data: profile } = useQuery({
|
||||||
|
queryKey: ["profile"],
|
||||||
|
queryFn: getProfile,
|
||||||
|
});
|
||||||
|
|
||||||
|
const walletBalance = profile?.wallet_balance ?? user?.wallet_balance ?? 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarProvider>
|
||||||
|
<AppSidebar />
|
||||||
|
<SidebarInset>
|
||||||
|
<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
|
||||||
|
<div className="flex items-center gap-2 ">
|
||||||
|
<SidebarTrigger className="-ml-1" />
|
||||||
|
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Wallet walletBalance={walletBalance} />
|
||||||
|
<ModeToggle />
|
||||||
|
<AccountPopover />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<WelcomeBanner
|
||||||
|
firstName={user?.first_name}
|
||||||
|
lastName={user?.last_name}
|
||||||
|
/>
|
||||||
|
<DeviceCartDrawer />
|
||||||
|
<div className="p-4 flex flex-col flex-1 rounded-lg bg-background">
|
||||||
|
<NuqsAdapter>
|
||||||
|
<Outlet />
|
||||||
|
</NuqsAdapter>
|
||||||
|
</div>
|
||||||
|
</SidebarInset>
|
||||||
|
</SidebarProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
|
||||||
|
export function AuthLayout() {
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
import { signin } from "@/actions/auth-actions";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { useActionState, useEffect } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { PhoneInput } from "../ui/phone-input";
|
||||||
|
|
||||||
|
export default function LoginForm() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [state, formAction, isPending] = useActionState(signin, {
|
||||||
|
message: "",
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (state.status === "redirect" && state.redirectTo) {
|
||||||
|
navigate(state.redirectTo);
|
||||||
|
}
|
||||||
|
}, [state, navigate]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
className="overflow-clip title-bg w-full max-w-xs mx-auto rounded-lg shadow border-2 border-sarLinkOrange/50 dark:border-sarLinkOrange/50 mt-4"
|
||||||
|
action={formAction}
|
||||||
|
>
|
||||||
|
<div className="py-4 px-4">
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<PhoneInput
|
||||||
|
id="phone-number"
|
||||||
|
name="phoneNumber"
|
||||||
|
maxLength={8}
|
||||||
|
disabled={isPending}
|
||||||
|
placeholder="Enter phone number"
|
||||||
|
defaultCountry="MV"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{state.status === "error" && (
|
||||||
|
<p className="text-red-500 text-sm">{state.message}</p>
|
||||||
|
)}
|
||||||
|
<Button className="" disabled={isPending} type="submit">
|
||||||
|
{isPending ? <Loader2 className="animate-spin" /> : "Login"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { Navigate, useLocation } from "react-router-dom";
|
||||||
|
import { isAuthenticated, tokenAtom } from "@/lib/auth-store";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Client-side auth gate for the dashboard (replaces the old next-auth
|
||||||
|
* middleware). Renders its children only when authenticated; otherwise
|
||||||
|
* redirects to signin, preserving the attempted path as `callbackUrl`.
|
||||||
|
*
|
||||||
|
* Subscribes to `tokenAtom` so a logout / 401 clear re-evaluates the guard.
|
||||||
|
*/
|
||||||
|
export function RouteGuard({ children }: { children: React.ReactNode }) {
|
||||||
|
useAtomValue(tokenAtom);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
if (!isAuthenticated()) {
|
||||||
|
const callbackUrl = encodeURIComponent(
|
||||||
|
location.pathname + location.search,
|
||||||
|
);
|
||||||
|
return <Navigate to={`/auth/signin?callbackUrl=${callbackUrl}`} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,424 @@
|
|||||||
|
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { signup } from "@/actions/auth-actions";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import type { ApiResponse, Atoll } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { getAtolls } from "@/queries/islands";
|
||||||
|
|
||||||
|
export default function SignUpForm() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { data: atolls } = useQuery<ApiResponse<Atoll>>({
|
||||||
|
queryKey: ["ATOLLS"],
|
||||||
|
queryFn: () => getAtolls(),
|
||||||
|
placeholderData: keepPreviousData,
|
||||||
|
staleTime: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [atoll, setAtoll] = React.useState<Atoll>();
|
||||||
|
|
||||||
|
const [actionState, action, isPending] = React.useActionState(signup, {
|
||||||
|
message: "",
|
||||||
|
db_error: "",
|
||||||
|
errors: undefined,
|
||||||
|
payload: new FormData(),
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
console.log(atoll);
|
||||||
|
}, [atoll]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (actionState?.status === "redirect" && actionState.redirectTo) {
|
||||||
|
navigate(actionState.redirectTo);
|
||||||
|
}
|
||||||
|
}, [actionState, navigate]);
|
||||||
|
|
||||||
|
const [params] = useSearchParams();
|
||||||
|
const phoneNumberFromUrl = params.get("phone_number");
|
||||||
|
const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
|
||||||
|
|
||||||
|
if (actionState?.db_error === "invalidPersonValidation") {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white dark:bg-black rounded-lg">
|
||||||
|
{actionState.message}
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 text-center text-sm">
|
||||||
|
Go to{" "}
|
||||||
|
<Link to="login" className="underline">
|
||||||
|
login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
-
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 w-full rounded h-screen overflow-y-scroll relative items-center justify-center">
|
||||||
|
<div className="absolute inset-0 title-bg mask-dir-to-r mask-from-0 mask-via-100 mask-to-100 mask-linear" />
|
||||||
|
<div className="hidden lg:flex relative overflow-hidden dark:text-white text-gray-900">
|
||||||
|
<div className="relative z-10 flex flex-col justify-center items-center p-12 w-full">
|
||||||
|
<div className="max-w-md text-center">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="w-20 h-20 bg-transparent backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<img
|
||||||
|
src="/logo.png"
|
||||||
|
alt="Company Logo"
|
||||||
|
className="w-12 h-12 text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold dark:text-orange-100">
|
||||||
|
SAR Link by OmegaTech Solutions
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold mb-6">Register your account</h1>
|
||||||
|
<p className="text-xl mb-8 dark:text-orange-100">
|
||||||
|
Pay for your devices and track your bills.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Decorative elements */}
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
action={action}
|
||||||
|
className="flex flex-col justify-center items-center p-6 lg:p-12 space-y-4 w-full "
|
||||||
|
>
|
||||||
|
<div className="max-w-sm shadow-2xl shadow-sarLinkOrange/20 h-fit my-auto mt-2 w-full bg-white dark:bg-transparent rounded-lg m-auto backdrop-blur-lg self-center border-2 border-sarLinkOrange/10 dark:border-sarLinkOrange/50">
|
||||||
|
<div className="py-2 px-4 my-2 space-y-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Full Name
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
className={cn(
|
||||||
|
"text-base",
|
||||||
|
actionState?.errors?.fieldErrors.name &&
|
||||||
|
"border-2 border-red-500",
|
||||||
|
)}
|
||||||
|
name="name"
|
||||||
|
type="text"
|
||||||
|
disabled={isPending}
|
||||||
|
defaultValue={
|
||||||
|
(actionState?.payload?.get("name") || "") as string
|
||||||
|
}
|
||||||
|
placeholder="Full Name"
|
||||||
|
/>
|
||||||
|
{actionState?.errors?.fieldErrors.name && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="id_card"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
ID Card
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
name="id_card"
|
||||||
|
type="text"
|
||||||
|
maxLength={7}
|
||||||
|
disabled={isPending}
|
||||||
|
defaultValue={
|
||||||
|
(actionState?.payload?.get("id_card") || "") as string
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"text-base",
|
||||||
|
actionState?.errors?.fieldErrors?.id_card &&
|
||||||
|
"border-2 border-red-500",
|
||||||
|
)}
|
||||||
|
placeholder="ID Card"
|
||||||
|
/>
|
||||||
|
{actionState?.errors?.fieldErrors?.id_card?.[0] && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors.fieldErrors.id_card[0]}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{actionState?.db_error === "id_card" && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="atoll"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Atoll
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
disabled={isPending}
|
||||||
|
onValueChange={(v) => {
|
||||||
|
console.log({ v });
|
||||||
|
setAtoll(
|
||||||
|
atolls?.data.find(
|
||||||
|
(atoll) => atoll.id === Number.parseInt(v),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
name="atoll_id"
|
||||||
|
value={atoll?.id?.toString() ?? ""}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select atoll" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
<SelectLabel>Atolls</SelectLabel>
|
||||||
|
{atolls?.data.map((atoll) => (
|
||||||
|
<SelectItem key={atoll.id} value={atoll.id.toString()}>
|
||||||
|
{atoll.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
{actionState?.errors?.fieldErrors?.atoll_id && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.atoll_id}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="island"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Island
|
||||||
|
</label>
|
||||||
|
<Select disabled={isPending} name="island_id">
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select island" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
<SelectLabel>Islands</SelectLabel>
|
||||||
|
{atoll?.islands?.map((island) => (
|
||||||
|
<SelectItem
|
||||||
|
key={island.id}
|
||||||
|
value={island.id.toString()}
|
||||||
|
>
|
||||||
|
{island.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
{actionState?.errors?.fieldErrors?.island_id && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.island_id}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="address"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Address
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
className={cn(
|
||||||
|
"text-base",
|
||||||
|
actionState?.errors?.fieldErrors?.address &&
|
||||||
|
"border-2 border-red-500",
|
||||||
|
)}
|
||||||
|
disabled={isPending}
|
||||||
|
name="address"
|
||||||
|
defaultValue={
|
||||||
|
(actionState?.payload?.get("address") || "") as string
|
||||||
|
}
|
||||||
|
type="text"
|
||||||
|
placeholder="Address"
|
||||||
|
/>
|
||||||
|
{actionState?.errors?.fieldErrors?.address && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.address}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="dob"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Date of Birth
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
className={cn(
|
||||||
|
"text-base",
|
||||||
|
actionState?.errors?.fieldErrors?.dob &&
|
||||||
|
"border-2 border-red-500",
|
||||||
|
)}
|
||||||
|
name="dob"
|
||||||
|
disabled={isPending}
|
||||||
|
defaultValue={
|
||||||
|
(actionState?.payload?.get("dob") || "") as string
|
||||||
|
}
|
||||||
|
type="date"
|
||||||
|
placeholder="Date of birth"
|
||||||
|
/>
|
||||||
|
{actionState?.errors?.fieldErrors?.dob && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.dob}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{actionState?.db_error === "dob" && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="accNo"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Account Number
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
className={cn(
|
||||||
|
"text-base",
|
||||||
|
actionState?.errors?.fieldErrors.accNo &&
|
||||||
|
"border-2 border-red-500",
|
||||||
|
)}
|
||||||
|
name="accNo"
|
||||||
|
type="number"
|
||||||
|
disabled={isPending}
|
||||||
|
defaultValue={
|
||||||
|
(actionState?.payload?.get("accNo") || "") as string
|
||||||
|
}
|
||||||
|
placeholder="Account no"
|
||||||
|
/>
|
||||||
|
{actionState?.errors?.fieldErrors.accNo && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors.accNo}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label
|
||||||
|
htmlFor="phone_number"
|
||||||
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
Phone Number
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="phone-number"
|
||||||
|
name="phone_number"
|
||||||
|
maxLength={8}
|
||||||
|
disabled={isPending}
|
||||||
|
className={cn(
|
||||||
|
!phoneNumberFromUrl &&
|
||||||
|
actionState?.errors?.fieldErrors?.phone_number &&
|
||||||
|
"border-2 border-red-500 rounded-md",
|
||||||
|
)}
|
||||||
|
defaultValue={NUMBER_WITHOUT_DASH ?? ""}
|
||||||
|
readOnly={Boolean(phoneNumberFromUrl)}
|
||||||
|
placeholder={phoneNumberFromUrl ?? "Phone number"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors.fieldErrors.phone_number[0]}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{actionState?.db_error === "phone_number" && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.message}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col gap-2 items-start justify-start py-2">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
defaultChecked={
|
||||||
|
((actionState?.payload?.get("terms") || "") as string) ===
|
||||||
|
"on"
|
||||||
|
}
|
||||||
|
name="terms"
|
||||||
|
id="terms"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="terms"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
<span>i accept</span>
|
||||||
|
<Link className="ml-1 underline" to="">
|
||||||
|
terms and conditions
|
||||||
|
</Link>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{actionState?.errors?.fieldErrors?.terms && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.terms}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
defaultChecked={
|
||||||
|
((actionState?.payload?.get("policy") || "") as string) ===
|
||||||
|
"on"
|
||||||
|
}
|
||||||
|
name="policy"
|
||||||
|
id="terms"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="terms"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
<span>i undertand</span>
|
||||||
|
<Link className="ml-1 underline" to="">
|
||||||
|
the privacy policy
|
||||||
|
</Link>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{actionState?.errors?.fieldErrors?.policy && (
|
||||||
|
<span className="text-sm inline-block text-red-500">
|
||||||
|
{actionState?.errors?.fieldErrors?.policy}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button disabled={isPending} className="mt-4 w-full" type="submit">
|
||||||
|
{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 text-center text-sm">
|
||||||
|
Already have an account?{" "}
|
||||||
|
<Link to="signin" className="underline">
|
||||||
|
login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { useTransition } from "react";
|
||||||
|
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { type SubmitHandler, useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import apiClient from "@/lib/api-client";
|
||||||
|
import { setAuth } from "@/lib/auth-store";
|
||||||
|
|
||||||
|
const OTPSchema = z.object({
|
||||||
|
pin: z.string().min(6, {
|
||||||
|
message: "Your one-time password must be 6 characters.",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function VerifyOTPForm({
|
||||||
|
phone_number,
|
||||||
|
}: {
|
||||||
|
phone_number: string;
|
||||||
|
}) {
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
console.log("verification in OTP form", phone_number);
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<z.infer<typeof OTPSchema>>({
|
||||||
|
defaultValues: {
|
||||||
|
pin: "",
|
||||||
|
},
|
||||||
|
resolver: zodResolver(OTPSchema),
|
||||||
|
});
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const callbackUrl = searchParams.get("callbackUrl") || "/dashboard";
|
||||||
|
|
||||||
|
const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
const res = await apiClient.post("/callback/auth/", { token: data.pin });
|
||||||
|
setAuth(res.data.token, {
|
||||||
|
...res.data.user,
|
||||||
|
expiry: res.data.expiry,
|
||||||
|
});
|
||||||
|
navigate(callbackUrl || "/devices");
|
||||||
|
} catch (error: unknown) {
|
||||||
|
const message =
|
||||||
|
// biome-ignore lint/suspicious/noExplicitAny: axios error shape
|
||||||
|
(error as any)?.response?.data?.message ??
|
||||||
|
"The token you entered isn't valid.";
|
||||||
|
toast.error(message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// "{\"message\":\"The token you entered isn't valid.\",\"status\":400}"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
className="w-full max-w-xs title-bg border-2 border-sarLinkOrange/50 rounded-lg shadow my-4"
|
||||||
|
>
|
||||||
|
<div className="grid pb-4 pt-4 gap-4 px-4">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p className="text-center text-sm text-sarLinkOrange">
|
||||||
|
Login OTP Sent to {phone_number}
|
||||||
|
</p>
|
||||||
|
<Label htmlFor="otp-number" className="sr-only text-gray-500">
|
||||||
|
Enter the OTP
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
disabled={isPending}
|
||||||
|
id="otp-number"
|
||||||
|
{...register("pin")}
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter OTP"
|
||||||
|
className="bg-white dark:bg-black"
|
||||||
|
/>
|
||||||
|
{errors.pin && (
|
||||||
|
<p className="text-red-500 text-sm">{errors.pin.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button className="w-full" disabled={isPending} type="submit">
|
||||||
|
{isPending ? <Loader2 className="animate-spin" /> : "Login"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 text-center text-sm">
|
||||||
|
Change{" "}
|
||||||
|
<Link to="signin" className="underline">
|
||||||
|
phone number
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { useActionState } from "react";
|
||||||
|
import { Link, Navigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { VerifyRegistrationOTP } from "@/queries/authentication";
|
||||||
|
|
||||||
|
export default function VerifyRegistrationOTPForm({
|
||||||
|
phone_number,
|
||||||
|
}: {
|
||||||
|
phone_number: string;
|
||||||
|
}) {
|
||||||
|
console.log("verification in OTP form", phone_number);
|
||||||
|
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const mobile = searchParams.get("phone_number");
|
||||||
|
const [state, formAction, isPending] = useActionState(VerifyRegistrationOTP, {
|
||||||
|
message: "",
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!mobile) return <Navigate to="/auth/signin" replace />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
className="w-full max-w-xs bg-white dark:bg-sarLinkOrange/10 title-bg border-2 border-sarLinkOrange/50 rounded-lg shadow my-4"
|
||||||
|
>
|
||||||
|
<div className="grid pb-4 pt-4 gap-4 px-4">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{state.status === "verify_success" ? (
|
||||||
|
<p className="bg-green-100 dark:bg-dark-green-800 border border-green-900/50 text-green-700 rounded p-2 text-center text-sm">
|
||||||
|
{state.message}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="bg-sarLinkOrange border border-yellow-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm text-gray-900 dark:text-orange-950">
|
||||||
|
Account verification OTP sent to [{phone_number}]
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Label htmlFor="otp-number" className="sr-only text-gray-500">
|
||||||
|
Enter the OTP
|
||||||
|
</Label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="mobile"
|
||||||
|
defaultValue={phone_number}
|
||||||
|
hidden
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
disabled={isPending || state.status === "verify_error"}
|
||||||
|
id="otp-number"
|
||||||
|
name="otp"
|
||||||
|
maxLength={6}
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter OTP"
|
||||||
|
className={cn(
|
||||||
|
"bg-white text-black dark:text-white dark:bg-gray-950",
|
||||||
|
state.status === "verify_success" && "hidden",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{state?.status === "error" && (
|
||||||
|
<p className="text-yellow-500 text-sm">{state.message}</p>
|
||||||
|
)}
|
||||||
|
{state.status === "verify_error" && (
|
||||||
|
<p className="text-red-500 text-sm">{state.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className={cn(
|
||||||
|
"w-full",
|
||||||
|
state.status === "verify_success" && "hidden",
|
||||||
|
)}
|
||||||
|
disabled={isPending || state.status === "verify_error"}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<Loader2 className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
"Request verification"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{state.status === "verify_success" && (
|
||||||
|
<div className="mb-4 text-center text-sm">
|
||||||
|
Go to{" "}
|
||||||
|
<Link to="signin" className="underline">
|
||||||
|
login
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Loader2, Trash2 } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { cancelPayment } from "@/actions/payment";
|
||||||
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
export default function CancelPaymentButton({
|
||||||
|
paymentId,
|
||||||
|
}: {
|
||||||
|
paymentId: string;
|
||||||
|
}) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [loading, setLoading] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const [error, payment] = await tryCatch(
|
||||||
|
cancelPayment({ id: paymentId }),
|
||||||
|
);
|
||||||
|
console.log(payment);
|
||||||
|
if (error) {
|
||||||
|
toast.error(error.message);
|
||||||
|
setLoading(false);
|
||||||
|
} else {
|
||||||
|
toast.success("Payment cancelled successfully!", {
|
||||||
|
description: `Your payment of ${payment?.amount} MVR has been cancelled.`,
|
||||||
|
closeButton: true,
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["payment"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["payments"] });
|
||||||
|
navigate("/devices", { replace: true });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={loading}
|
||||||
|
variant={"destructive"}
|
||||||
|
>
|
||||||
|
Cancel Payment
|
||||||
|
{loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Loader2, Trash2 } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { cancelTopup } from "@/actions/payment";
|
||||||
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
export default function CancelTopupButton({ topupId }: { topupId: string }) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [loading, setLoading] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const [error, topup] = await tryCatch(cancelTopup({ id: topupId }));
|
||||||
|
if (error) {
|
||||||
|
toast.error(error.message);
|
||||||
|
setLoading(false);
|
||||||
|
} else {
|
||||||
|
toast.success("Topup cancelled successfully!", {
|
||||||
|
description: `Your topup of ${topup?.amount} MVR has been cancelled.`,
|
||||||
|
closeButton: true,
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["topup"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["topups"] });
|
||||||
|
navigate("/top-ups", { replace: true });
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={loading}
|
||||||
|
variant={"destructive"}
|
||||||
|
>
|
||||||
|
Cancel Topup
|
||||||
|
{loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
|
||||||
|
const calculateTimeLeft = (expiresAt: string) => {
|
||||||
|
const now = Date.now();
|
||||||
|
const expirationTime = new Date(expiresAt).getTime();
|
||||||
|
return Math.max(0, Math.floor((expirationTime - now) / 1000));
|
||||||
|
};
|
||||||
|
|
||||||
|
const HumanizeTimeLeft = (seconds: number) => {
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
const remainingSeconds = seconds % 60;
|
||||||
|
return `${minutes}m ${remainingSeconds}s`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ExpiryCountDown({
|
||||||
|
expiresAt,
|
||||||
|
expiryLabel,
|
||||||
|
}: {
|
||||||
|
expiresAt: string;
|
||||||
|
expiryLabel: string;
|
||||||
|
}) {
|
||||||
|
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(expiresAt));
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const pathname = useLocation().pathname;
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setTimeLeft(calculateTimeLeft(expiresAt));
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, [expiresAt]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (timeLeft <= 0) {
|
||||||
|
navigate(pathname, { replace: true });
|
||||||
|
}
|
||||||
|
}, [timeLeft, navigate, pathname]);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="overflow-clip relative mx-2 p-4 rounded-md border border-dashed flex items-center justify-between text-muted-foreground">
|
||||||
|
<div className="absolute inset-0 title-bg mask-b-from-0" />
|
||||||
|
{timeLeft ? (
|
||||||
|
<span>Time left: {HumanizeTimeLeft(timeLeft)}</span>
|
||||||
|
) : (
|
||||||
|
<span>{expiryLabel} has expired.</span>
|
||||||
|
)}
|
||||||
|
{timeLeft > 0 && (
|
||||||
|
<Progress
|
||||||
|
className="absolute bottom-0 left-0 right-0"
|
||||||
|
color="#f49b5b"
|
||||||
|
value={(timeLeft / 600) * 100}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
import { DialogDescription } from "@radix-ui/react-dialog";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { OctagonX, ShieldBan } from "lucide-react";
|
||||||
|
import { useActionState, useEffect, useState, useTransition } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import type { Device } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { blockDeviceAction } from "@/queries/devices";
|
||||||
|
import { TextShimmer } from "./ui/text-shimmer";
|
||||||
|
import { Textarea } from "./ui/textarea";
|
||||||
|
|
||||||
|
export type BlockDeviceFormState = {
|
||||||
|
message: string;
|
||||||
|
success: boolean;
|
||||||
|
fieldErrors?: {
|
||||||
|
reason_for_blocking?: string[];
|
||||||
|
};
|
||||||
|
payload?: FormData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState: BlockDeviceFormState = {
|
||||||
|
message: "",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function BlockDeviceDialog({
|
||||||
|
device,
|
||||||
|
admin,
|
||||||
|
parentalControl = false,
|
||||||
|
}: {
|
||||||
|
device: Device;
|
||||||
|
type: "block" | "unblock";
|
||||||
|
admin?: boolean;
|
||||||
|
parentalControl?: boolean;
|
||||||
|
}) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [state, formAction, isPending] = useActionState(
|
||||||
|
blockDeviceAction,
|
||||||
|
initialState,
|
||||||
|
);
|
||||||
|
const [isTransitioning, startTransition] = useTransition();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const handleSimpleBlock = () => {
|
||||||
|
startTransition(() => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("deviceId", String(device.id));
|
||||||
|
formData.append("reason_for_blocking", "");
|
||||||
|
formData.append("action", "simple-block");
|
||||||
|
formData.append("blocked_by", "PARENT");
|
||||||
|
|
||||||
|
formAction(formData);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUnblock = () => {
|
||||||
|
startTransition(() => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("deviceId", String(device.id));
|
||||||
|
formData.append("reason_for_blocking", "");
|
||||||
|
formData.append("action", "unblock");
|
||||||
|
formData.append("blocked_by", "PARENT");
|
||||||
|
|
||||||
|
formAction(formData);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show toast notifications based on state changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (state.message) {
|
||||||
|
if (state.success) {
|
||||||
|
toast.success(state.message);
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["devices"] });
|
||||||
|
if (open) setOpen(false);
|
||||||
|
} else {
|
||||||
|
toast.error(state.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [state, open, queryClient]);
|
||||||
|
|
||||||
|
const isLoading = isPending || isTransitioning;
|
||||||
|
|
||||||
|
// If device is blocked and user is not admin, show unblock button
|
||||||
|
if (device.blocked && parentalControl) {
|
||||||
|
return (
|
||||||
|
<Button onClick={handleUnblock} disabled={isLoading}>
|
||||||
|
{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If device is not blocked and user is not admin, show simple block button
|
||||||
|
if ((!device.blocked && parentalControl) || !admin) {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={handleSimpleBlock}
|
||||||
|
disabled={isLoading}
|
||||||
|
variant="destructive"
|
||||||
|
>
|
||||||
|
<ShieldBan />
|
||||||
|
{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If user is admin, show block with reason dialog
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button disabled={isLoading} variant="destructive">
|
||||||
|
<OctagonX />
|
||||||
|
Block
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Block 🚫</DialogTitle>
|
||||||
|
<DialogDescription className="text-sm text-muted-foreground">
|
||||||
|
Please provide a reason for blocking this device
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form action={formAction} className="space-y-4">
|
||||||
|
<input type="hidden" name="deviceId" value={String(device.id)} />
|
||||||
|
<input type="hidden" name="action" value="block" />
|
||||||
|
<input type="hidden" name="blocked_by" value="ADMIN" />
|
||||||
|
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="flex flex-col items-start gap-1">
|
||||||
|
<Label htmlFor="reason_for_blocking" className="text-right">
|
||||||
|
Reason for blocking
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
rows={10}
|
||||||
|
name="reason_for_blocking"
|
||||||
|
id="reason_for_blocking"
|
||||||
|
defaultValue={
|
||||||
|
(state?.payload?.get("reason_for_blocking") || "") as string
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"col-span-5 mt-2",
|
||||||
|
state.fieldErrors?.reason_for_blocking &&
|
||||||
|
"ring-2 ring-red-500",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-red-500">
|
||||||
|
{state.fieldErrors?.reason_for_blocking?.[0]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="destructive" disabled={isLoading} type="submit">
|
||||||
|
{isLoading ? "Blocking..." : "Block"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { HandCoins } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { TableCell, TableRow } from "@/components/ui/table";
|
||||||
|
import { deviceCartAtom } from "@/lib/atoms";
|
||||||
|
import type { Device } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import AddDevicesToCartButton from "./add-devices-to-cart-button";
|
||||||
|
import BlockDeviceDialog from "./block-device-dialog";
|
||||||
|
export default function ClickableRow({
|
||||||
|
device,
|
||||||
|
parentalControl,
|
||||||
|
admin = false,
|
||||||
|
idx,
|
||||||
|
}: {
|
||||||
|
device: Device;
|
||||||
|
parentalControl?: boolean;
|
||||||
|
admin?: boolean;
|
||||||
|
idx?: number;
|
||||||
|
}) {
|
||||||
|
const [devices, setDeviceCart] = useAtom(deviceCartAtom);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow
|
||||||
|
key={device.id}
|
||||||
|
className={cn(
|
||||||
|
(parentalControl === false && device.blocked) || device.is_active
|
||||||
|
? "cursor-not-allowed hover:bg-accent-foreground/10"
|
||||||
|
: "cursor-pointer hover:bg-muted-foreground/10",
|
||||||
|
`motion-preset-fade-md motion-delay-${(idx || 1) * 75}ms`,
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
if (device.blocked) return;
|
||||||
|
if (device.is_active === true) return;
|
||||||
|
if (device.has_a_pending_payment === true) return;
|
||||||
|
if (parentalControl === true) return;
|
||||||
|
setDeviceCart((prev) =>
|
||||||
|
devices.some((d) => d.id === device.id)
|
||||||
|
? prev.filter((d) => d.id !== device.id)
|
||||||
|
: [...prev, device],
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<Link
|
||||||
|
className={cn(
|
||||||
|
"hover:underline font-semibold",
|
||||||
|
device.is_active ? "text-green-600" : "",
|
||||||
|
)}
|
||||||
|
to={`/devices/${device.id}`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{device.name}
|
||||||
|
</Link>
|
||||||
|
{device.is_active ? (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Active until{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{new Date(device.expiry_date || "").toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-muted-foreground">Device Inactive</p>
|
||||||
|
)}
|
||||||
|
{device.has_a_pending_payment && (
|
||||||
|
<Link to={`/payments/${device.pending_payment_id}`}>
|
||||||
|
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
|
||||||
|
Payment Pending{" "}
|
||||||
|
<HandCoins className="animate-pulse" size={14} />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||||
|
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
||||||
|
<span className="font-semibold">Comment</span>
|
||||||
|
<p className="text-neutral-400">{device?.reason_for_blocking}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">{device.mac}</TableCell>
|
||||||
|
<TableCell className="font-medium">{device?.vendor}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{!parentalControl ? (
|
||||||
|
<AddDevicesToCartButton device={device} />
|
||||||
|
) : (
|
||||||
|
<BlockDeviceDialog
|
||||||
|
admin={admin}
|
||||||
|
type={device.blocked ? "unblock" : "block"}
|
||||||
|
device={device}
|
||||||
|
parentalControl={parentalControl}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { Phone, TriangleAlert } from "lucide-react";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
export default function ClientErrorMessage({ message }: { message: string }) {
|
||||||
|
return (
|
||||||
|
<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
|
||||||
|
<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
|
||||||
|
<TriangleAlert color="red" />
|
||||||
|
<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
|
||||||
|
{message === "You do not have permission to perform this action." && (
|
||||||
|
<>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
Please contact the administrator to give you permissions.
|
||||||
|
</span>
|
||||||
|
<a href="tel:9198026">
|
||||||
|
<Button>
|
||||||
|
<Phone /> 919-8026
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { TriangleAlert } from "lucide-react";
|
||||||
|
import { useRouteError } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export default function DashboardError() {
|
||||||
|
const error = useRouteError();
|
||||||
|
console.error(error);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
|
||||||
|
<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
|
||||||
|
<TriangleAlert color="red" />
|
||||||
|
<h2 className="text-red-500 text-xl font-semibold">
|
||||||
|
Something went wrong!
|
||||||
|
</h2>
|
||||||
|
<Button
|
||||||
|
variant={"destructive"}
|
||||||
|
size={"lg"}
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
>
|
||||||
|
Try again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { HandCoins } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { deviceCartAtom } from "@/lib/atoms";
|
||||||
|
import type { Device } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import AddDevicesToCartButton from "./add-devices-to-cart-button";
|
||||||
|
import BlockDeviceDialog from "./block-device-dialog";
|
||||||
|
import { Badge } from "./ui/badge";
|
||||||
|
|
||||||
|
export default function DeviceCard({
|
||||||
|
device,
|
||||||
|
parentalControl,
|
||||||
|
isAdmin,
|
||||||
|
}: {
|
||||||
|
device: Device;
|
||||||
|
parentalControl?: boolean;
|
||||||
|
isAdmin?: boolean;
|
||||||
|
}) {
|
||||||
|
const [devices, setDeviceCart] = useAtom(deviceCartAtom);
|
||||||
|
|
||||||
|
const isChecked = devices.some((d) => d.id === device.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
// biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
|
||||||
|
<div
|
||||||
|
onKeyUp={() => {}}
|
||||||
|
onClick={() => {
|
||||||
|
if (device.blocked) return;
|
||||||
|
if (device.is_active === true) return;
|
||||||
|
if (device.has_a_pending_payment === true) return;
|
||||||
|
if (parentalControl === true) return;
|
||||||
|
setDeviceCart((prev) =>
|
||||||
|
devices.some((d) => d.id === device.id)
|
||||||
|
? prev.filter((d) => d.id !== device.id)
|
||||||
|
: [...prev, device],
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex text-sm justify-between items-center my-2 p-4 border rounded-md motion-preset-fade-md",
|
||||||
|
isChecked ? "bg-accent" : "",
|
||||||
|
device.is_active
|
||||||
|
? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
|
||||||
|
: "cursor-pointer hover:bg-muted-foreground/10",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="">
|
||||||
|
<div className="font-semibold flex flex-col items-start gap-2 mb-2">
|
||||||
|
<Link
|
||||||
|
className={cn(
|
||||||
|
"font-medium hover:underline ml-0.5",
|
||||||
|
device.is_active ? "text-green-600" : "",
|
||||||
|
)}
|
||||||
|
to={`/devices/${device.id}`}
|
||||||
|
>
|
||||||
|
{device.name}
|
||||||
|
</Link>
|
||||||
|
<Badge variant={"outline"}>
|
||||||
|
<span className="font-medium">{device.mac}</span>
|
||||||
|
</Badge>
|
||||||
|
<Badge variant={"outline"}>
|
||||||
|
<span className="font-medium">{device.vendor}</span>
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{device.is_active ? (
|
||||||
|
<div className="text-muted-foreground ml-0.5">
|
||||||
|
Active until{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{new Date(device.expiry_date || "").toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-muted-foreground ml-0.5">Device Inactive</p>
|
||||||
|
)}
|
||||||
|
{device.has_a_pending_payment && (
|
||||||
|
<Link to={`/payments/${device.pending_payment_id}`}>
|
||||||
|
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
|
||||||
|
Payment Pending{" "}
|
||||||
|
<HandCoins className="animate-pulse" size={14} />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{device.blocked && device.blocked_by === "ADMIN" && (
|
||||||
|
<div className="p-2 rounded border my-2 w-full">
|
||||||
|
<span className="uppercase text-red-500">Blocked by admin </span>
|
||||||
|
<p className="text-neutral-500">{device?.reason_for_blocking}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{!parentalControl ? (
|
||||||
|
<AddDevicesToCartButton device={device} />
|
||||||
|
) : (
|
||||||
|
<BlockDeviceDialog
|
||||||
|
admin={isAdmin}
|
||||||
|
type={device.blocked ? "unblock" : "block"}
|
||||||
|
device={device}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { MonitorSmartphone } from "lucide-react";
|
||||||
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { deviceCartAtom } from "@/lib/atoms";
|
||||||
|
|
||||||
|
export function DeviceCartDrawer() {
|
||||||
|
const pathname = useLocation().pathname;
|
||||||
|
const [devices, setDevices] = useAtom(deviceCartAtom);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
if (pathname === "/payment" || pathname === "/devices-to-pay") {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (devices.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<div className="bg-sarLinkOrange rounded-lg shadow-2xl dark:bg-orange-900 fixed bottom-20 w-80 uppercase h-auto z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200 p-2 flex flex-col gap-2">
|
||||||
|
<Button
|
||||||
|
size={"lg"}
|
||||||
|
className="w-ful"
|
||||||
|
onClick={() => navigate("/devices-to-pay")}
|
||||||
|
variant="secondary"
|
||||||
|
>
|
||||||
|
<MonitorSmartphone />
|
||||||
|
Pay {devices.length > 0 && `(${devices.length})`}{" "}
|
||||||
|
{devices.length > 1 ? "devices" : "device"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={"destructive"}
|
||||||
|
onClick={() => setDevices([])}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
type TableSkeletonProps = {
|
||||||
|
headers: string[];
|
||||||
|
length: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function TableSkeleton({ headers, length }: TableSkeletonProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="hidden sm:block w-full">
|
||||||
|
<Table className="overflow-scroll w-full">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
{headers.map((header, index) => (
|
||||||
|
<TableHead key={`${index + 1}`}>{header}</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{Array.from({ length }).map((_, i) => (
|
||||||
|
<TableRow key={`${i + 1}`}>
|
||||||
|
{headers.map((_, index) => (
|
||||||
|
<TableCell key={`${index + 1}`}>
|
||||||
|
<Skeleton className="w-full h-10 rounded" />
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="sm:hidden my-4 w-full">
|
||||||
|
{Array.from({ length }).map((_, i) => (
|
||||||
|
<DeviceCardSkeleton key={`${i + 1}`} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeviceCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex text-sm justify-between items-center my-2 p-4 border rounded-md w-full",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
|
||||||
|
<Skeleton className="w-32 h-6" />
|
||||||
|
<Skeleton className="w-36 h-6" />
|
||||||
|
<Skeleton className="w-32 h-4" />
|
||||||
|
<Skeleton className="w-40 h-8" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||||
|
import { CircleDollarSign, Loader2 } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { createPayment } from "@/actions/payment";
|
||||||
|
import DeviceCard from "@/components/device-card";
|
||||||
|
import NumberInput from "@/components/number-input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { deviceCartAtom, numberOfMonths } from "@/lib/atoms";
|
||||||
|
import type { NewPayment } from "@/lib/backend-types";
|
||||||
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
|
import FullPageLoader from "./full-page-loader";
|
||||||
|
|
||||||
|
export default function DevicesForPayment() {
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const devices = useAtomValue(deviceCartAtom);
|
||||||
|
const setDeviceCart = useSetAtom(deviceCartAtom);
|
||||||
|
const [months, setMonths] = useAtom(numberOfMonths);
|
||||||
|
const [disabled, setDisabled] = useState(false);
|
||||||
|
|
||||||
|
if (location.pathname === "/payments") {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: NewPayment = {
|
||||||
|
number_of_months: months,
|
||||||
|
device_ids: devices.map((device) => device.id),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (disabled) {
|
||||||
|
return <FullPageLoader />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="max-w-lg mx-auto space-y-4 px-4">
|
||||||
|
<div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto pb-4 gap-4">
|
||||||
|
{devices.map((device) => (
|
||||||
|
<DeviceCard key={device.id} device={device} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<NumberInput
|
||||||
|
label="Set No of Months"
|
||||||
|
value={months}
|
||||||
|
onChange={(value: number) => setMonths(value)}
|
||||||
|
maxAllowed={12}
|
||||||
|
isDisabled={devices.length === 0}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setDisabled(true);
|
||||||
|
const [error, response] = await tryCatch(createPayment(data));
|
||||||
|
if (error) {
|
||||||
|
setDisabled(false);
|
||||||
|
toast.error(JSON.stringify(error, null, 2));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setDeviceCart([]);
|
||||||
|
setMonths(1);
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["devices"] });
|
||||||
|
navigate(`/payments/${response.id}`);
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
disabled={devices.length === 0 || disabled}
|
||||||
|
>
|
||||||
|
{disabled ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="ml-2 animate-spin" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Go to payment
|
||||||
|
<CircleDollarSign />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { userAtom } from "@/lib/auth-store";
|
||||||
|
import { getDevices } from "@/queries/devices";
|
||||||
|
import DevicesTableSkeleton from "./device-table-skeleton";
|
||||||
|
import ClickableRow from "./clickable-row";
|
||||||
|
import ClientErrorMessage from "./client-error-message";
|
||||||
|
import DeviceCard from "./device-card";
|
||||||
|
import Pagination from "./pagination";
|
||||||
|
|
||||||
|
export function DevicesTable({
|
||||||
|
parentalControl,
|
||||||
|
additionalFilters = {},
|
||||||
|
}: {
|
||||||
|
parentalControl?: boolean;
|
||||||
|
additionalFilters?: Record<string, string | number | boolean>;
|
||||||
|
}) {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const user = useAtomValue(userAtom);
|
||||||
|
const isAdmin = user?.is_admin;
|
||||||
|
|
||||||
|
const page = Number.parseInt(searchParams.get("page") as string) || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
|
// Build params object for getDevices
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = String(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(additionalFilters)) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: devices,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["devices", apiParams],
|
||||||
|
queryFn: () => getDevices(apiParams),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<DevicesTableSkeleton
|
||||||
|
headers={["Device Name", "Mac Address", "Vendor", "#"]}
|
||||||
|
length={10}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <ClientErrorMessage message={error.message} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { meta, data } = devices ?? {};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data?.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
|
<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Device Name</TableHead>
|
||||||
|
<TableHead>MAC Address</TableHead>
|
||||||
|
<TableHead>Vendor</TableHead>
|
||||||
|
<TableHead>#</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{data?.map((device, idx) => (
|
||||||
|
<ClickableRow
|
||||||
|
admin={isAdmin}
|
||||||
|
key={device.id}
|
||||||
|
device={device}
|
||||||
|
parentalControl={parentalControl}
|
||||||
|
idx={idx + 1}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">Total {meta?.total} device.</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">
|
||||||
|
Total {meta?.total} devices.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="sm:hidden my-4">
|
||||||
|
{data?.map((device) => (
|
||||||
|
<DeviceCard
|
||||||
|
parentalControl={parentalControl}
|
||||||
|
key={device.id}
|
||||||
|
device={device}
|
||||||
|
isAdmin={isAdmin}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta?.last_page ?? 1}
|
||||||
|
currentPage={meta?.current_page ?? 1}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { BadgeDollarSign, Loader2, Wallet } from "lucide-react";
|
||||||
|
import { useActionState, useEffect } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
type VerifyDevicePaymentState,
|
||||||
|
verifyDevicePayment,
|
||||||
|
} from "@/actions/payment";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCaption,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { Payment } from "@/lib/backend-types";
|
||||||
|
import type { User } from "@/lib/types/user";
|
||||||
|
import { shouldShowPaymentInfo } from "@/lib/utils";
|
||||||
|
import { AccountInfomation } from "./account-information";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
const initialState: VerifyDevicePaymentState = {
|
||||||
|
message: "",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DevicesToPay({
|
||||||
|
payment,
|
||||||
|
user,
|
||||||
|
disabled,
|
||||||
|
}: {
|
||||||
|
payment?: Payment;
|
||||||
|
user?: User;
|
||||||
|
disabled?: boolean;
|
||||||
|
}) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [state, formAction, isPending] = useActionState(
|
||||||
|
verifyDevicePayment,
|
||||||
|
initialState,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle toast notifications based on state changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (state.success && state.message) {
|
||||||
|
toast.success("Payment successful!", {
|
||||||
|
closeButton: true,
|
||||||
|
description: state.message,
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["payment"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["profile"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["devices"] });
|
||||||
|
} else if (
|
||||||
|
!state.success &&
|
||||||
|
state.message &&
|
||||||
|
state.message !== initialState.message
|
||||||
|
) {
|
||||||
|
toast.error("Payment Verification Failed", {
|
||||||
|
closeButton: true,
|
||||||
|
description: state.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [state, queryClient]);
|
||||||
|
|
||||||
|
const devices = payment?.devices;
|
||||||
|
if (devices?.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// 100+(n−1)×75
|
||||||
|
const walletBalance = user?.wallet_balance ?? 0;
|
||||||
|
|
||||||
|
const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="p-2 flex flex-col gap-2">
|
||||||
|
<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
|
||||||
|
{!payment?.paid ? "Devices to pay" : "Devices Paid"}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{devices?.map((device) => (
|
||||||
|
<div
|
||||||
|
key={device.id}
|
||||||
|
className="bg-muted border rounded p-2 flex gap-2 items-center motion-preset-fade"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="text-sm font-medium motion-preset-slide-up">
|
||||||
|
{device.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground motion-preset-slide-up motion-delay-100">
|
||||||
|
{device.mac}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||||
|
<Table>
|
||||||
|
<TableCaption>
|
||||||
|
{shouldShowPaymentInfo(payment) && (
|
||||||
|
<div className="max-w-sm mx-auto">
|
||||||
|
<p>Please send the following amount to the payment address</p>
|
||||||
|
<AccountInfomation
|
||||||
|
accName="Baraveli Dev"
|
||||||
|
accountNo="90101400028321000"
|
||||||
|
/>
|
||||||
|
{payment?.paid ? (
|
||||||
|
<Button
|
||||||
|
size={"lg"}
|
||||||
|
variant={"secondary"}
|
||||||
|
disabled
|
||||||
|
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||||
|
>
|
||||||
|
Payment Verified
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{isWalletPayVisible && (
|
||||||
|
<form action={formAction}>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="paymentId"
|
||||||
|
value={payment?.id ?? ""}
|
||||||
|
/>
|
||||||
|
<input type="hidden" name="method" value="WALLET" />
|
||||||
|
<Button
|
||||||
|
disabled={isPending}
|
||||||
|
type="submit"
|
||||||
|
variant={"secondary"}
|
||||||
|
size={"lg"}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{isPending
|
||||||
|
? "Processing payment..."
|
||||||
|
: "Pay with wallet"}
|
||||||
|
<Wallet />
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
<form action={formAction}>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="paymentId"
|
||||||
|
value={payment?.id ?? ""}
|
||||||
|
/>
|
||||||
|
<input type="hidden" name="method" value="TRANSFER" />
|
||||||
|
<Button
|
||||||
|
disabled={isPending || disabled}
|
||||||
|
type="submit"
|
||||||
|
size={"lg"}
|
||||||
|
className="mb-4 w-full"
|
||||||
|
>
|
||||||
|
{isPending ? "Processing payment..." : "I have paid"}
|
||||||
|
{isPending ? (
|
||||||
|
<Loader2 className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<BadgeDollarSign />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TableCaption>
|
||||||
|
<TableBody className="">
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Payment created</TableCell>
|
||||||
|
<TableCell className="text-right motion-preset-slide-up-sm">
|
||||||
|
{new Date(payment?.created_at ?? "").toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
second: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Total Devices</TableCell>
|
||||||
|
<TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-75">
|
||||||
|
{devices?.length}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Duration</TableCell>
|
||||||
|
<TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-100">
|
||||||
|
{payment?.number_of_months} Months
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow className="">
|
||||||
|
<TableCell colSpan={1}>Total Due</TableCell>
|
||||||
|
<TableCell className="text-right text-3xl font-bold motion-preset-slide-up-sm motion-delay-150">
|
||||||
|
{payment?.amount?.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
import { ListFilter, Loader2, X } from "lucide-react";
|
||||||
|
import { useQueryState } from "nuqs";
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@/components/ui/drawer";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function DeviceFilter() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const replace = (url: string) => navigate(url, { replace: true });
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [disabled, startTransition] = useTransition();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
const params = new URLSearchParams(searchParams.toString());
|
||||||
|
|
||||||
|
const [urlInputName] = useQueryState("name", {
|
||||||
|
clearOnDefault: true,
|
||||||
|
});
|
||||||
|
const [urlInputMac] = useQueryState("mac", {
|
||||||
|
clearOnDefault: true,
|
||||||
|
});
|
||||||
|
const [urlInputVendor] = useQueryState("vendor", {
|
||||||
|
clearOnDefault: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Local state for input fields
|
||||||
|
const [inputName, setInputName] = useState(urlInputName ?? "");
|
||||||
|
const [inputMac, setInputMac] = useState(urlInputMac ?? "");
|
||||||
|
const [inputVendor, setInputVendor] = useState(urlInputVendor ?? "");
|
||||||
|
|
||||||
|
// Map filter keys to their state setters
|
||||||
|
const filterSetters: Record<
|
||||||
|
string,
|
||||||
|
React.Dispatch<React.SetStateAction<string>>
|
||||||
|
> = {
|
||||||
|
name: setInputName,
|
||||||
|
mac: setInputMac,
|
||||||
|
vendor: setInputVendor,
|
||||||
|
};
|
||||||
|
function handleSearch({
|
||||||
|
name,
|
||||||
|
mac,
|
||||||
|
vendor,
|
||||||
|
}: {
|
||||||
|
name: string;
|
||||||
|
mac: string;
|
||||||
|
vendor: string;
|
||||||
|
}) {
|
||||||
|
if (name) params.set("name", name);
|
||||||
|
else params.delete("name");
|
||||||
|
if (mac) params.set("mac", mac);
|
||||||
|
else params.delete("mac");
|
||||||
|
if (vendor) params.set("vendor", vendor);
|
||||||
|
else params.delete("vendor");
|
||||||
|
params.set("page", "1");
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
replace(`${pathname}?${params.toString()}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const appliedFilters = searchParams
|
||||||
|
.toString()
|
||||||
|
.split("&")
|
||||||
|
.filter((filter) => !filter.startsWith("page=") && filter);
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||||
|
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DrawerTrigger asChild>
|
||||||
|
<Button
|
||||||
|
className="w-full sm:w-48 flex items-end justify-between"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
Filter
|
||||||
|
<ListFilter />
|
||||||
|
</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<div className="mx-auto w-full max-w-3xl">
|
||||||
|
<DrawerHeader>
|
||||||
|
<DrawerTitle>Device Filters</DrawerTitle>
|
||||||
|
<DrawerDescription asChild>
|
||||||
|
<div>Select your desired filters here</div>
|
||||||
|
</DrawerDescription>
|
||||||
|
</DrawerHeader>
|
||||||
|
|
||||||
|
<div className="grid sm:grid-cols-3 gap-4 p-4">
|
||||||
|
<Input
|
||||||
|
placeholder="Device name ..."
|
||||||
|
value={inputName || searchParams.get("name") || ""}
|
||||||
|
onChange={(e) => setInputName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="Device Mac address ..."
|
||||||
|
value={inputMac || searchParams.get("mac") || ""}
|
||||||
|
onChange={(e) => setInputMac(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="Device vendor ..."
|
||||||
|
value={inputVendor || searchParams.get("vendor") || ""}
|
||||||
|
onChange={(e) => setInputVendor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DrawerFooter className="max-w-sm mx-auto">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
handleSearch({
|
||||||
|
name: inputName ?? "",
|
||||||
|
mac: inputMac ?? "",
|
||||||
|
vendor: inputVendor ?? "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{disabled ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="ml-2 animate-spin" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>Apply Filters</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setInputName("");
|
||||||
|
setInputMac("");
|
||||||
|
setInputVendor("");
|
||||||
|
replace(pathname);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear Filters
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<DrawerClose asChild>
|
||||||
|
<Button variant="outline">Cancel</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
<div className="flex gap-2 w-fit flex-wrap">
|
||||||
|
{appliedFilters.map((filter) => (
|
||||||
|
<Badge
|
||||||
|
aria-disabled={disabled}
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn("flex p-2 gap-2 items-center justify-between", {
|
||||||
|
"opacity-50 pointer-events-none": disabled,
|
||||||
|
})}
|
||||||
|
key={filter}
|
||||||
|
>
|
||||||
|
<span className="text-md">{prettyPrintFilter(filter)}</span>
|
||||||
|
{disabled ? (
|
||||||
|
<Loader2 className="animate-spin" size={16} />
|
||||||
|
) : (
|
||||||
|
<X
|
||||||
|
className="bg-sarLinkOrange/50 rounded-full p-1 hover:cursor-pointer hover:ring ring-sarLinkOrange"
|
||||||
|
size={16}
|
||||||
|
onClick={() => {
|
||||||
|
const key = filter.split("=")[0];
|
||||||
|
params.delete(key);
|
||||||
|
|
||||||
|
// Use the mapping to clear the correct input state
|
||||||
|
filterSetters[key]?.("");
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
replace(`${pathname}?${params.toString()}`);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</X>
|
||||||
|
)}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prettyPrintFilter(filter: string) {
|
||||||
|
const [key, value] = filter.split("=");
|
||||||
|
switch (key) {
|
||||||
|
case "name":
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
Device Name: <span className="text-muted-foreground">{value}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
case "mac":
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
MAC Address: <span className="text-muted-foreground">{value}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
case "vendor":
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
Vendor: <span className="text-muted-foreground">{value}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return filter;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface FilterOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FilterProps {
|
||||||
|
options: FilterOption[];
|
||||||
|
defaultOption: string;
|
||||||
|
queryParamKey: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Filter({
|
||||||
|
options,
|
||||||
|
defaultOption,
|
||||||
|
queryParamKey,
|
||||||
|
}: FilterProps) {
|
||||||
|
const [selectedOption, setSelectedOption] = useState(defaultOption);
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
function handleFilterChange(value: string) {
|
||||||
|
setSelectedOption(value);
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
|
|
||||||
|
params.set(queryParamKey, value);
|
||||||
|
params.set("page", "1");
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
setSearchParams(params, { replace: true });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn(isPending && "animate-pulse")}>
|
||||||
|
<Select
|
||||||
|
disabled={isPending}
|
||||||
|
value={selectedOption}
|
||||||
|
onValueChange={(val) => handleFilterChange(val)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-auto">
|
||||||
|
<SelectValue>
|
||||||
|
{options.find((option) => option.value === selectedOption)?.label}
|
||||||
|
</SelectValue>
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent align="end">
|
||||||
|
{options.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{option.icon}
|
||||||
|
<span>{option.label}</span>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
export default function FullPageLoader() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-screen">
|
||||||
|
<Loader2 className="animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,620 @@
|
|||||||
|
import { ListFilter, Loader2, X } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||||
|
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@/components/ui/drawer";
|
||||||
|
import { DualRangeSlider } from "@/components/ui/dual-range-slider";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
|
||||||
|
|
||||||
|
interface CheckboxGroupProps {
|
||||||
|
label: string;
|
||||||
|
options: Array<{ value: string; label: string }>;
|
||||||
|
selectedValues: string[];
|
||||||
|
onChange: (values: string[]) => void;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
selectedValues,
|
||||||
|
onChange,
|
||||||
|
name,
|
||||||
|
}) => {
|
||||||
|
const handleCheckedChange = (value: string, checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
onChange([...selectedValues, value]);
|
||||||
|
} else {
|
||||||
|
onChange(selectedValues.filter((v) => v !== value));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2 p-2 border rounded-md">
|
||||||
|
<Label className="font-semibold text-sm">{label}</Label>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{options.map((option) => (
|
||||||
|
<div
|
||||||
|
key={`${name}-${option.value}`}
|
||||||
|
className="flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={`${name}-${option.value}`}
|
||||||
|
checked={selectedValues.includes(option.value)}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleCheckedChange(option.value, !!checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={`${name}-${option.value}`}>{option.label}</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type FilterOption = { value: string; label: string };
|
||||||
|
|
||||||
|
type FilterInputConfig<TKey extends string> =
|
||||||
|
| {
|
||||||
|
name: TKey;
|
||||||
|
label: string;
|
||||||
|
placeholder: string;
|
||||||
|
type: "string" | "number";
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
name: TKey;
|
||||||
|
label: string;
|
||||||
|
type: "checkbox-group";
|
||||||
|
options: FilterOption[];
|
||||||
|
serialize?: (values: string[]) => string;
|
||||||
|
deserialize?: (urlValue: string) => string[];
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
name: TKey;
|
||||||
|
label: string;
|
||||||
|
type: "radio-group";
|
||||||
|
options: FilterOption[];
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
name: TKey;
|
||||||
|
label: string;
|
||||||
|
type: "dual-range-slider";
|
||||||
|
min: number;
|
||||||
|
max: number;
|
||||||
|
step?: number;
|
||||||
|
sliderLabel?: string;
|
||||||
|
formatLabel?: (value: number | undefined) => React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Utility type to extract the config for a specific key from the array
|
||||||
|
type GetConfigForKey<
|
||||||
|
TKey,
|
||||||
|
TConfigArray extends FilterInputConfig<string>[],
|
||||||
|
> = TConfigArray extends ReadonlyArray<infer U>
|
||||||
|
? U extends FilterInputConfig<string> & { name: TKey }
|
||||||
|
? U
|
||||||
|
: never
|
||||||
|
: never;
|
||||||
|
|
||||||
|
// This type maps filter keys to their appropriate value types (string or string[])
|
||||||
|
type FilterValues<
|
||||||
|
TFilterKeys extends string,
|
||||||
|
TInputs extends FilterInputConfig<string>[],
|
||||||
|
> = {
|
||||||
|
[K in TFilterKeys]: GetConfigForKey<K, TInputs> extends {
|
||||||
|
type: "checkbox-group";
|
||||||
|
}
|
||||||
|
? string[]
|
||||||
|
: GetConfigForKey<K, TInputs> extends { type: "radio-group" }
|
||||||
|
? string
|
||||||
|
: GetConfigForKey<K, TInputs> extends { type: "dual-range-slider" }
|
||||||
|
? number[]
|
||||||
|
: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Default serialization/deserialization for checkbox-group if not provided
|
||||||
|
const defaultSerialize = (values: string[]) => values.join(",");
|
||||||
|
const defaultDeserialize = (urlValue: string) =>
|
||||||
|
urlValue ? urlValue.split(",") : [];
|
||||||
|
|
||||||
|
// --- Component Props ---
|
||||||
|
interface DynamicFilterProps<
|
||||||
|
TFilterKeys extends string,
|
||||||
|
TInputs extends FilterInputConfig<TFilterKeys>[],
|
||||||
|
> {
|
||||||
|
inputs: TInputs;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DynamicFilter<
|
||||||
|
TFilterKeys extends string,
|
||||||
|
TInputs extends FilterInputConfig<TFilterKeys>[],
|
||||||
|
>({
|
||||||
|
inputs,
|
||||||
|
title = "Filters",
|
||||||
|
description = "Select your desired filters here",
|
||||||
|
}: DynamicFilterProps<TFilterKeys, TInputs>) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [disabled, startTransition] = useTransition();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const pathname = useLocation().pathname;
|
||||||
|
|
||||||
|
// Use a ref or memoized value for URLSearchParams to avoid re-creations
|
||||||
|
// and ensure it's always based on the latest searchParams.
|
||||||
|
const currentParams = useMemo(
|
||||||
|
() => new URLSearchParams(searchParams.toString()),
|
||||||
|
[searchParams],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Initialize local state for input values based on URL
|
||||||
|
const initialInputState = useMemo(() => {
|
||||||
|
const initialState: Partial<FilterValues<TFilterKeys, TInputs>> = {};
|
||||||
|
for (const input of inputs) {
|
||||||
|
const urlValue = searchParams.get(input.name);
|
||||||
|
if (input.type === "checkbox-group") {
|
||||||
|
const deserialize = input.deserialize || defaultDeserialize;
|
||||||
|
(initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
|
||||||
|
deserialize(urlValue || "") as FilterValues<
|
||||||
|
TFilterKeys,
|
||||||
|
TInputs
|
||||||
|
>[typeof input.name];
|
||||||
|
} else if (input.type === "dual-range-slider") {
|
||||||
|
const minValue = searchParams.get(`${input.name}_min`);
|
||||||
|
const maxValue = searchParams.get(`${input.name}_max`);
|
||||||
|
const parsedMin = minValue ? Number(minValue) : input.min;
|
||||||
|
const parsedMax = maxValue ? Number(maxValue) : input.max;
|
||||||
|
(initialState as FilterValues<TFilterKeys, TInputs>)[input.name] = [
|
||||||
|
parsedMin,
|
||||||
|
parsedMax,
|
||||||
|
] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
|
||||||
|
} else {
|
||||||
|
(initialState as FilterValues<TFilterKeys, TInputs>)[input.name] =
|
||||||
|
(urlValue || "") as FilterValues<
|
||||||
|
TFilterKeys,
|
||||||
|
TInputs
|
||||||
|
>[typeof input.name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return initialState as FilterValues<TFilterKeys, TInputs>;
|
||||||
|
}, [inputs, searchParams]); // Re-initialize if inputs config or URL searchParams change
|
||||||
|
|
||||||
|
const [inputValues, setInputValues] =
|
||||||
|
useState<FilterValues<TFilterKeys, TInputs>>(initialInputState);
|
||||||
|
|
||||||
|
// Update local state if URL searchParams change while drawer is closed
|
||||||
|
// This is important if filters are applied externally or on page load
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
setInputValues(initialInputState);
|
||||||
|
}
|
||||||
|
}, [isOpen, initialInputState]);
|
||||||
|
|
||||||
|
// Handler for text/number input changes
|
||||||
|
const handleTextOrNumberInputChange =
|
||||||
|
(name: TFilterKeys) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: e.target.value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handler for checkbox group changes
|
||||||
|
const handleCheckboxGroupChange =
|
||||||
|
(name: TFilterKeys) => (values: string[]) => {
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: values,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handler for dual range slider changes
|
||||||
|
const handleDualRangeChange = (name: TFilterKeys) => (values: number[]) => {
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: values,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handles applying all filters
|
||||||
|
const handleApplyFilters = () => {
|
||||||
|
const newParams = new URLSearchParams(currentParams.toString()); // Start fresh with current params
|
||||||
|
|
||||||
|
for (const input of inputs) {
|
||||||
|
const value = inputValues[input.name];
|
||||||
|
|
||||||
|
if (input.type === "checkbox-group") {
|
||||||
|
const serialize = input.serialize || defaultSerialize;
|
||||||
|
const serializedValue = serialize(value as string[]);
|
||||||
|
if (serializedValue) {
|
||||||
|
newParams.set(input.name, serializedValue);
|
||||||
|
} else {
|
||||||
|
newParams.delete(input.name);
|
||||||
|
}
|
||||||
|
} else if (input.type === "dual-range-slider") {
|
||||||
|
const rangeValues = value as number[];
|
||||||
|
// Only set params if values are different from the default min/max
|
||||||
|
if (
|
||||||
|
rangeValues.length === 2 &&
|
||||||
|
(rangeValues[0] !== input.min || rangeValues[1] !== input.max)
|
||||||
|
) {
|
||||||
|
newParams.set(`${input.name}_min`, rangeValues[0].toString());
|
||||||
|
newParams.set(`${input.name}_max`, rangeValues[1].toString());
|
||||||
|
} else {
|
||||||
|
newParams.delete(`${input.name}_min`);
|
||||||
|
newParams.delete(`${input.name}_max`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// String/Number inputs
|
||||||
|
if (value) {
|
||||||
|
newParams.set(input.name, value as string);
|
||||||
|
} else {
|
||||||
|
newParams.delete(input.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
newParams.set("page", "1");
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
navigate(`${pathname}?${newParams.toString()}`, { replace: true });
|
||||||
|
setIsOpen(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handles clearing all filters
|
||||||
|
const handleClearFilters = () => {
|
||||||
|
// Reset local input values
|
||||||
|
const clearedInputState: Partial<FilterValues<TFilterKeys, TInputs>> = {};
|
||||||
|
for (const input of inputs) {
|
||||||
|
if (input.type === "checkbox-group") {
|
||||||
|
(clearedInputState as FilterValues<TFilterKeys, TInputs>)[
|
||||||
|
input.name as TFilterKeys
|
||||||
|
] = [] as FilterValues<TFilterKeys, TInputs>[typeof input.name];
|
||||||
|
} else if (input.type === "dual-range-slider") {
|
||||||
|
(clearedInputState as FilterValues<TFilterKeys, TInputs>)[
|
||||||
|
input.name as TFilterKeys
|
||||||
|
] = [input.min, input.max] as FilterValues<
|
||||||
|
TFilterKeys,
|
||||||
|
TInputs
|
||||||
|
>[typeof input.name];
|
||||||
|
} else if (
|
||||||
|
input.type === "radio-group" ||
|
||||||
|
input.type === "string" ||
|
||||||
|
input.type === "number"
|
||||||
|
) {
|
||||||
|
(clearedInputState as FilterValues<TFilterKeys, TInputs>)[
|
||||||
|
input.name as TFilterKeys
|
||||||
|
] = "" as FilterValues<TFilterKeys, TInputs>[typeof input.name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInputValues(clearedInputState as FilterValues<TFilterKeys, TInputs>);
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
navigate(pathname, { replace: true });
|
||||||
|
setIsOpen(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Dynamically constructs applied filters for badges
|
||||||
|
const appliedFilters = useMemo(() => {
|
||||||
|
const filters: Array<{
|
||||||
|
key: TFilterKeys;
|
||||||
|
value: string | string[] | number[];
|
||||||
|
label: string;
|
||||||
|
config: FilterInputConfig<TFilterKeys>;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
for (const input of inputs) {
|
||||||
|
if (input.type === "dual-range-slider") {
|
||||||
|
const minValue = searchParams.get(`${input.name}_min`);
|
||||||
|
const maxValue = searchParams.get(`${input.name}_max`);
|
||||||
|
if (minValue && maxValue) {
|
||||||
|
const parsedMin = Number(minValue);
|
||||||
|
const parsedMax = Number(maxValue);
|
||||||
|
// Only show as applied filter if values are different from defaults
|
||||||
|
if (parsedMin !== input.min || parsedMax !== input.max) {
|
||||||
|
filters.push({
|
||||||
|
key: input.name,
|
||||||
|
value: [parsedMin, parsedMax],
|
||||||
|
label: input.label,
|
||||||
|
config: input,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const urlValue = searchParams.get(input.name);
|
||||||
|
if (urlValue) {
|
||||||
|
if (input.type === "checkbox-group") {
|
||||||
|
const deserialize = input.deserialize || defaultDeserialize;
|
||||||
|
const deserialized = deserialize(urlValue);
|
||||||
|
if (deserialized.length > 0) {
|
||||||
|
filters.push({
|
||||||
|
key: input.name,
|
||||||
|
value: deserialized,
|
||||||
|
label: input.label,
|
||||||
|
config: input,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
filters.push({
|
||||||
|
key: input.name,
|
||||||
|
value: urlValue,
|
||||||
|
label: input.label,
|
||||||
|
config: input,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filters;
|
||||||
|
}, [searchParams, inputs]);
|
||||||
|
|
||||||
|
// Dynamic `prettyPrintFilter` for badges
|
||||||
|
const prettyPrintFilter = (
|
||||||
|
_key: TFilterKeys,
|
||||||
|
value: string | string[] | number[],
|
||||||
|
config: FilterInputConfig<TFilterKeys>,
|
||||||
|
) => {
|
||||||
|
if (config.type === "checkbox-group") {
|
||||||
|
const labels = (value as string[])
|
||||||
|
.map((v) => config.options.find((opt) => opt.value === v)?.label || v)
|
||||||
|
.join(", ");
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
{config.label.replace(/%20/g, " ")}:{" "}
|
||||||
|
<span className="text-muted-foreground">{labels}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (config.type === "dual-range-slider") {
|
||||||
|
const rangeValues = value as number[];
|
||||||
|
const formatLabel =
|
||||||
|
config.formatLabel ||
|
||||||
|
((val: number | undefined) => val?.toString() || "");
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
{config.label}:{" "}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{formatLabel(rangeValues[0])} - {formatLabel(rangeValues[1])}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (config.type === "radio-group") {
|
||||||
|
const stringValue = value as string;
|
||||||
|
// For true/false values, display the label instead of the value
|
||||||
|
if (stringValue === "true" || stringValue === "false") {
|
||||||
|
const option = config.options.find((opt) => opt.value === stringValue);
|
||||||
|
const displayValue = option?.label || stringValue;
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
{config.label}:{" "}
|
||||||
|
<span className="text-muted-foreground">{displayValue}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// For other values, display as normal
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
{config.label}:{" "}
|
||||||
|
<span className="text-muted-foreground">{stringValue}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
{config.label}: <span className="text-muted-foreground">{value}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handles removing an individual filter
|
||||||
|
const handleRemoveFilter = (keyToRemove: TFilterKeys) => {
|
||||||
|
const newParams = new URLSearchParams(currentParams.toString());
|
||||||
|
|
||||||
|
// Clear the specific input's local state
|
||||||
|
const inputConfig = inputs.find((input) => input.name === keyToRemove);
|
||||||
|
|
||||||
|
if (inputConfig?.type === "dual-range-slider") {
|
||||||
|
newParams.delete(`${keyToRemove}_min`);
|
||||||
|
newParams.delete(`${keyToRemove}_max`);
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[keyToRemove]: [inputConfig.min, inputConfig.max],
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
newParams.delete(keyToRemove);
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[keyToRemove]: inputConfig?.type === "checkbox-group" ? [] : "",
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
newParams.set("page", "1"); // Reset page after removing a filter
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
navigate(`${pathname}?${newParams.toString()}`, { replace: true });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||||
|
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DrawerTrigger asChild>
|
||||||
|
<Button
|
||||||
|
className="w-full font-barlow sm:w-48 flex items-end justify-between"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
Filter
|
||||||
|
<ListFilter />
|
||||||
|
</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<div className="mx-auto w-full max-w-3xl">
|
||||||
|
<DrawerHeader>
|
||||||
|
<DrawerTitle>{title}</DrawerTitle>
|
||||||
|
<DrawerDescription asChild>
|
||||||
|
<div>{description}</div>
|
||||||
|
</DrawerDescription>
|
||||||
|
</DrawerHeader>
|
||||||
|
|
||||||
|
<div className="grid sm:grid-cols-3 gap-4 p-4">
|
||||||
|
{inputs.map((input) => {
|
||||||
|
switch (input.type) {
|
||||||
|
case "string":
|
||||||
|
case "number":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
key={input.name}
|
||||||
|
placeholder={input.placeholder}
|
||||||
|
value={inputValues[input.name] as string}
|
||||||
|
onChange={handleTextOrNumberInputChange(input.name)}
|
||||||
|
type={input.type}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "checkbox-group":
|
||||||
|
return (
|
||||||
|
<CheckboxGroup
|
||||||
|
key={input.name}
|
||||||
|
name={input.name}
|
||||||
|
label={input.label}
|
||||||
|
options={input.options}
|
||||||
|
selectedValues={inputValues[input.name] as string[]}
|
||||||
|
onChange={handleCheckboxGroupChange(input.name)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "dual-range-slider":
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={input.name}
|
||||||
|
className="px-2 w-full flex flex-col gap-2 p-2 border rounded-md"
|
||||||
|
>
|
||||||
|
<Label className="font-semibold text-sm">
|
||||||
|
{input.label}
|
||||||
|
</Label>
|
||||||
|
<div className="px-3 py-2 mt-5">
|
||||||
|
<DualRangeSlider
|
||||||
|
label={(value) => (
|
||||||
|
<span className="text-xs">
|
||||||
|
{value}
|
||||||
|
{input.sliderLabel}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
value={inputValues[input.name] as number[]}
|
||||||
|
onValueChange={handleDualRangeChange(input.name)}
|
||||||
|
min={input.min}
|
||||||
|
max={input.max}
|
||||||
|
step={input.step || 1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "radio-group":
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={input.name}
|
||||||
|
className="flex flex-col gap-2 p-2 border rounded-md"
|
||||||
|
>
|
||||||
|
<Label className="font-semibold text-sm">
|
||||||
|
{input.label}
|
||||||
|
</Label>
|
||||||
|
<RadioGroup
|
||||||
|
value={inputValues[input.name] as string}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setInputValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[input.name]: value,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{input.options.map((option) => (
|
||||||
|
<div
|
||||||
|
key={`${input.name}-${option.value}`}
|
||||||
|
className="flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<RadioGroupItem
|
||||||
|
value={option.value}
|
||||||
|
id={`${input.name}-${option.value}`}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={`${input.name}-${option.value}`}>
|
||||||
|
{option.label}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<DrawerFooter className="max-w-sm mx-auto">
|
||||||
|
<Button onClick={handleApplyFilters} disabled={disabled}>
|
||||||
|
{disabled ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Applying...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>Apply Filters</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={handleClearFilters}>
|
||||||
|
Clear Filters
|
||||||
|
</Button>
|
||||||
|
<DrawerClose asChild>
|
||||||
|
<Button variant="outline">Cancel</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
<div className="flex gap-2 w-fit flex-wrap">
|
||||||
|
{appliedFilters.map((filter) => (
|
||||||
|
<Badge
|
||||||
|
aria-disabled={disabled}
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn("flex p-2 gap-2 items-center justify-between", {
|
||||||
|
"opacity-50 pointer-events-none": disabled,
|
||||||
|
})}
|
||||||
|
key={filter.key}
|
||||||
|
>
|
||||||
|
<span className="text-md">
|
||||||
|
{prettyPrintFilter(filter.key, filter.value, filter.config)}
|
||||||
|
</span>
|
||||||
|
{disabled ? (
|
||||||
|
<Loader2 className="animate-spin" size={16} />
|
||||||
|
) : (
|
||||||
|
<X
|
||||||
|
className="bg-sarLinkOrange/50 rounded-full p-1 hover:cursor-pointer hover:ring ring-sarLinkOrange"
|
||||||
|
size={16}
|
||||||
|
onClick={() => handleRemoveFilter(filter.key)}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</X>
|
||||||
|
)}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import { PhoneIcon } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export function GetMacAccordion() {
|
||||||
|
return (
|
||||||
|
<Accordion type="single" collapsible className="w-full">
|
||||||
|
<AccordionItem value="item-1">
|
||||||
|
<AccordionTrigger>How do I find my MAC Address?</AccordionTrigger>
|
||||||
|
<AccordionContent className="flex flex-col gap-4 text-start">
|
||||||
|
<p>
|
||||||
|
A MAC (Media Access Control) address is a unique identifier assigned
|
||||||
|
to a device`'`s network. It is used to identify the device on a
|
||||||
|
network, helping to differentiate devices on a network.
|
||||||
|
</p>
|
||||||
|
<Accordion type="single" collapsible className="w-full">
|
||||||
|
<AccordionItem value="iphone">
|
||||||
|
<AccordionTrigger>iPhone</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Settings ➜ General ➜ About ➜ Wi-Fi Address
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="redmi">
|
||||||
|
<AccordionTrigger>Redmi</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Settings ➜ About ➜ Wi-Fi MAC Address
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="samsung">
|
||||||
|
<AccordionTrigger>Samsung</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Settings ➜ About phone ➜ Status Information ➜ Wi-Fi MAC Address
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="windows">
|
||||||
|
<AccordionTrigger>Windows Laptop</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Settings ➜ Network and Internet ➜ Wi-Fi ➜ Hardware Properties ➜
|
||||||
|
Physical address (MAC):
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="other">
|
||||||
|
<AccordionTrigger>Other Device</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<p>Please contact SAR Link for assistance.</p>
|
||||||
|
<a href="tel:+9609198026">
|
||||||
|
<Button className="mt-4">
|
||||||
|
<PhoneIcon className="mr-2" />
|
||||||
|
9198026
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { CheckCheck, X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function InputReadOnly({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
labelClassName,
|
||||||
|
className,
|
||||||
|
showCheck = true,
|
||||||
|
checkTrue = false,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
labelClassName?: string;
|
||||||
|
className?: string;
|
||||||
|
showCheck?: boolean;
|
||||||
|
checkTrue?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none col-span-2 sm:col-span-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="input-33"
|
||||||
|
className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="input-33"
|
||||||
|
className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
|
||||||
|
placeholder={value}
|
||||||
|
disabled
|
||||||
|
value={value}
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showCheck && (
|
||||||
|
<div>
|
||||||
|
{checkTrue ? (
|
||||||
|
<CheckCheck className="mx-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<X className="mx-4 text-red-500" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { Minus, Plus } from "lucide-react";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Group,
|
||||||
|
Input,
|
||||||
|
Label,
|
||||||
|
NumberField,
|
||||||
|
} from "react-aria-components";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function NumberInput({
|
||||||
|
maxAllowed,
|
||||||
|
label,
|
||||||
|
value = 100,
|
||||||
|
onChange,
|
||||||
|
className,
|
||||||
|
isDisabled,
|
||||||
|
}: {
|
||||||
|
maxAllowed?: number;
|
||||||
|
label: string;
|
||||||
|
value?: number;
|
||||||
|
onChange: (value: number) => void;
|
||||||
|
className?: string;
|
||||||
|
isDisabled?: boolean;
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (maxAllowed) {
|
||||||
|
if (value > maxAllowed) {
|
||||||
|
onChange(maxAllowed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [maxAllowed, value, onChange]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NumberField
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
className={cn(className)}
|
||||||
|
value={value}
|
||||||
|
minValue={0}
|
||||||
|
onChange={onChange}
|
||||||
|
>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||||
|
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
|
||||||
|
<Button
|
||||||
|
slot="decrement"
|
||||||
|
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||||
|
</Button>
|
||||||
|
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||||
|
<Button
|
||||||
|
slot="increment"
|
||||||
|
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
</NumberField>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
type PaginationProps = {
|
||||||
|
totalPages: number;
|
||||||
|
currentPage: number;
|
||||||
|
maxVisible?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Pagination({
|
||||||
|
totalPages,
|
||||||
|
currentPage,
|
||||||
|
maxVisible = 4,
|
||||||
|
}: PaginationProps) {
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const activePage = searchParams.get("page") ?? 1;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!searchParams.has("page")) {
|
||||||
|
const next = new URLSearchParams(searchParams);
|
||||||
|
next.set("page", "1");
|
||||||
|
setSearchParams(next, { replace: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Build a search string for a target page, preserving all other params.
|
||||||
|
function searchForPage(page: number) {
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
|
params.set("page", String(page));
|
||||||
|
return `?${params.toString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const generatePageNumbers = (): (number | string)[] => {
|
||||||
|
const halfVisible = Math.floor(maxVisible / 2);
|
||||||
|
let startPage = Math.max(currentPage - halfVisible, 1);
|
||||||
|
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
||||||
|
|
||||||
|
if (endPage - startPage + 1 < maxVisible) {
|
||||||
|
startPage = Math.max(endPage - maxVisible + 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pageNumbers: (number | string)[] = [];
|
||||||
|
|
||||||
|
if (startPage > 1) {
|
||||||
|
pageNumbers.push(1);
|
||||||
|
if (startPage > 2) pageNumbers.push("...");
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = startPage; i <= endPage; i++) {
|
||||||
|
pageNumbers.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (endPage < totalPages) {
|
||||||
|
if (endPage < totalPages - 1) pageNumbers.push("...");
|
||||||
|
pageNumbers.push(totalPages);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pageNumbers;
|
||||||
|
};
|
||||||
|
|
||||||
|
const pageNumbers = generatePageNumbers();
|
||||||
|
|
||||||
|
if (totalPages <= 1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center space-x-2 my-4">
|
||||||
|
{currentPage > 1 && (
|
||||||
|
<Link to={searchForPage(Number(currentPage) - 1)}>
|
||||||
|
<Button variant="secondary" className="flex items-center gap-2">
|
||||||
|
<ArrowLeftIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{pageNumbers.map((page) => (
|
||||||
|
<React.Fragment key={`${page}`}>
|
||||||
|
{typeof page === "number" ? (
|
||||||
|
<Link to={searchForPage(page)}>
|
||||||
|
<Button
|
||||||
|
variant={Number(activePage) === page ? "default" : "outline"}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span className="px-2">...</span>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{currentPage < totalPages && (
|
||||||
|
<Link to={searchForPage(Number(currentPage) + 1)}>
|
||||||
|
<Button variant="secondary" className="flex items-center gap-2">
|
||||||
|
<ArrowRightIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,294 @@
|
|||||||
|
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||||
|
import { Calendar } from "lucide-react";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import { getPayments } from "@/actions/payment";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { Payment } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import ClientErrorMessage from "./client-error-message";
|
||||||
|
import TableSkeleton from "./device-table-skeleton";
|
||||||
|
import Pagination from "./pagination";
|
||||||
|
import { Badge } from "./ui/badge";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import { Separator } from "./ui/separator";
|
||||||
|
|
||||||
|
export function PaymentsTable() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const page = Number.parseInt(searchParams.get("page") ?? "") || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: payments,
|
||||||
|
isPending,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["payments", apiParams],
|
||||||
|
queryFn: () => getPayments(apiParams),
|
||||||
|
placeholderData: keepPreviousData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isPending) {
|
||||||
|
return (
|
||||||
|
<TableSkeleton
|
||||||
|
headers={["Details", "Duration", "Status", "Amount"]}
|
||||||
|
length={10}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <ClientErrorMessage message={error.message} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data, meta } = payments;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data?.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
|
<h3>No Payments.</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Details</TableHead>
|
||||||
|
<TableHead>Duration</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{payments?.data?.map((payment) => (
|
||||||
|
<TableRow className="motion-preset-fade-md" key={payment.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start border rounded p-2",
|
||||||
|
payment?.paid
|
||||||
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
|
: payment?.is_expired
|
||||||
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar size={16} opacity={0.5} />
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{new Date(payment.created_at).toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<Link
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
to={`/payments/${payment.id}`}
|
||||||
|
>
|
||||||
|
<Button size={"sm"} variant="outline">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||||
|
<h3 className="text-sm font-medium">Devices</h3>
|
||||||
|
<ol className="list-disc list-inside text-sm">
|
||||||
|
{payment.devices.map((device) => (
|
||||||
|
<li
|
||||||
|
key={device.id}
|
||||||
|
className="text-sm text-muted-foreground"
|
||||||
|
>
|
||||||
|
{device.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
{payment.number_of_months} Months
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{payment.paid ? (
|
||||||
|
<Badge
|
||||||
|
className={cn(
|
||||||
|
payment.status === "PENDING"
|
||||||
|
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||||
|
: "bg-green-100 dark:bg-green-700",
|
||||||
|
)}
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
{payment.status}
|
||||||
|
</Badge>
|
||||||
|
) : payment.is_expired ? (
|
||||||
|
<Badge>Expired</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline">{payment.status}</Badge>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{payment.amount.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
MVR
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">
|
||||||
|
Total {meta?.total} payment.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">
|
||||||
|
Total {meta?.total} payments.
|
||||||
|
</p>
|
||||||
|
)}{" "}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta.last_page}
|
||||||
|
currentPage={meta.current_page}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="sm:hidden block">
|
||||||
|
{data.map((payment) => (
|
||||||
|
<MobilePaymentDetails key={payment.id} payment={payment} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MobilePaymentDetails({
|
||||||
|
payment,
|
||||||
|
isAdmin = false,
|
||||||
|
}: {
|
||||||
|
payment: Payment;
|
||||||
|
isAdmin?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
|
||||||
|
payment?.paid
|
||||||
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
|
: payment?.is_expired
|
||||||
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar size={16} opacity={0.5} />
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
{new Date(payment.created_at).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<Link
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
to={`/payments/${payment.id}`}
|
||||||
|
>
|
||||||
|
<Button size={"sm"} variant="outline">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||||
|
<h3 className="text-sm font-medium">Devices</h3>
|
||||||
|
<ol className="list-disc list-inside text-sm">
|
||||||
|
{payment.devices.map((device) => (
|
||||||
|
<li key={device.id} className="text-sm text-muted-foreground">
|
||||||
|
{device.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<Separator className="my-2" />
|
||||||
|
<h3 className="text-sm font-medium">Duration</h3>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{payment.number_of_months} Months
|
||||||
|
</span>
|
||||||
|
<Separator className="my-2" />
|
||||||
|
<h3 className="text-sm font-medium">Amount</h3>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{payment.amount.toFixed(2)} MVR
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{payment.paid ? (
|
||||||
|
<Badge
|
||||||
|
className={cn(
|
||||||
|
payment.status === "PENDING"
|
||||||
|
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||||
|
: "bg-green-100 dark:bg-green-700",
|
||||||
|
)}
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
{payment.status}
|
||||||
|
</Badge>
|
||||||
|
) : payment.is_expired ? (
|
||||||
|
<Badge>Expired</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary">{payment.status}</Badge>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
{isAdmin && (
|
||||||
|
<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
|
||||||
|
{payment?.user?.name}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{payment?.user?.id_card}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import {
|
||||||
|
discountPercentageAtom,
|
||||||
|
formulaResultAtom,
|
||||||
|
initialPriceAtom,
|
||||||
|
numberOfDaysAtom,
|
||||||
|
numberOfDevicesAtom,
|
||||||
|
} from "@/lib/atoms";
|
||||||
|
import NumberInput from "./number-input";
|
||||||
|
|
||||||
|
export default function PriceCalculator() {
|
||||||
|
const [initialPrice, setInitialPrice] = useAtom(initialPriceAtom);
|
||||||
|
const [discountPercentage, setDiscountPercentage] = useAtom(
|
||||||
|
discountPercentageAtom,
|
||||||
|
);
|
||||||
|
const [numberOfDevices, setNumberOfDevices] = useAtom(numberOfDevicesAtom);
|
||||||
|
const [numberOfDays, setNumberOfDays] = useAtom(numberOfDaysAtom);
|
||||||
|
const [formulaResult, setFormulaResult] = useAtom(formulaResultAtom);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const basePrice = initialPrice + (numberOfDevices - 1) * discountPercentage;
|
||||||
|
setFormulaResult(
|
||||||
|
`Price for ${numberOfDevices} device(s) over ${numberOfDays} day(s): MVR ${basePrice.toFixed(2)}`,
|
||||||
|
);
|
||||||
|
}, [
|
||||||
|
initialPrice,
|
||||||
|
discountPercentage,
|
||||||
|
numberOfDevices,
|
||||||
|
numberOfDays,
|
||||||
|
setFormulaResult,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border p-2 rounded-xl">
|
||||||
|
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||||
|
<h3 className="text-sarLinkOrange text-2xl">Price Calculator</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
|
{/* Initial Price Input */}
|
||||||
|
<NumberInput
|
||||||
|
label="Initial Price"
|
||||||
|
value={initialPrice}
|
||||||
|
onChange={(value) => setInitialPrice(value)}
|
||||||
|
/>
|
||||||
|
{/* Number of Devices Input */}
|
||||||
|
<NumberInput
|
||||||
|
label="Number of Devices"
|
||||||
|
value={numberOfDevices}
|
||||||
|
onChange={(value) => setNumberOfDevices(value)}
|
||||||
|
/>
|
||||||
|
{/* Number of Days Input */}
|
||||||
|
<NumberInput
|
||||||
|
label="Number of Days"
|
||||||
|
value={numberOfDays}
|
||||||
|
onChange={(value) => setNumberOfDays(value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Discount Percentage Input */}
|
||||||
|
<NumberInput
|
||||||
|
label="Discount Percentage"
|
||||||
|
value={discountPercentage}
|
||||||
|
onChange={(value) => setDiscountPercentage(value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="title-bg relative rounded-lg border border-input shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
|
||||||
|
<label
|
||||||
|
htmlFor=""
|
||||||
|
className="block px-3 pt-2 text-md font-medium text-foreground"
|
||||||
|
>
|
||||||
|
Total
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="flex font-mono font-semibold h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
|
||||||
|
value={formulaResult}
|
||||||
|
readOnly
|
||||||
|
placeholder={"Result"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { useRef, useTransition } from "react";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function Search({ disabled }: { disabled?: boolean }) {
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const searchQuery = searchParams.get("query");
|
||||||
|
|
||||||
|
function handleSearch(term: string) {
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
|
|
||||||
|
if (term) {
|
||||||
|
params.set("query", term);
|
||||||
|
params.set("page", "1");
|
||||||
|
} else {
|
||||||
|
params.delete("query");
|
||||||
|
}
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
setSearchParams(params, { replace: true });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
ref={inputRef}
|
||||||
|
placeholder="Search..."
|
||||||
|
type="search"
|
||||||
|
className={cn("sm:w-fit", isPending && "animate-pulse")}
|
||||||
|
name="search"
|
||||||
|
id="search"
|
||||||
|
defaultValue={searchQuery ? searchQuery : ""}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={false}
|
||||||
|
onChange={(e) => handleSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
import { MonitorIcon, Moon, MoonIcon, Sun, SunIcon } from "lucide-react";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
|
export function ModeToggle() {
|
||||||
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="flex justify-between items-center"
|
||||||
|
onClick={() => setTheme("light")}
|
||||||
|
>
|
||||||
|
Light
|
||||||
|
<SunIcon className="ml-2 h-4 w-4" />
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="flex justify-between items-center"
|
||||||
|
onClick={() => setTheme("dark")}
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
<MoonIcon className="ml-2 h-4 w-4" />
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="flex justify-between items-center"
|
||||||
|
onClick={() => setTheme("system")}
|
||||||
|
>
|
||||||
|
System
|
||||||
|
<MonitorIcon className="ml-2 h-4 w-4" />
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { BadgeDollarSign, Loader2 } from "lucide-react";
|
||||||
|
import { useActionState, useEffect } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
type VerifyTopupPaymentState,
|
||||||
|
verifyTopupPayment,
|
||||||
|
} from "@/actions/payment";
|
||||||
|
import { AccountInfomation } from "@/components/account-information";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCaption,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { Topup } from "@/lib/backend-types";
|
||||||
|
import { shouldShowTopupPaymentInfo } from "@/lib/utils";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
const initialState: VerifyTopupPaymentState = {
|
||||||
|
message: "",
|
||||||
|
success: false,
|
||||||
|
fieldErrors: {},
|
||||||
|
};
|
||||||
|
export default function TopupToPay({
|
||||||
|
topup,
|
||||||
|
disabled,
|
||||||
|
}: {
|
||||||
|
topup?: Topup;
|
||||||
|
disabled?: boolean;
|
||||||
|
}) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [state, formAction, isPending] = useActionState(
|
||||||
|
verifyTopupPayment,
|
||||||
|
initialState,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle toast notifications based on state changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (state.success && state.message) {
|
||||||
|
toast.success("Topup successful!", {
|
||||||
|
closeButton: true,
|
||||||
|
description: state.transaction
|
||||||
|
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||||
|
: state.message,
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["topup"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["topups"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["wallet-transactions"] });
|
||||||
|
} else if (
|
||||||
|
!state.success &&
|
||||||
|
state.message &&
|
||||||
|
state.message !== initialState.message
|
||||||
|
) {
|
||||||
|
toast.error("Topup Payment Verification Failed", {
|
||||||
|
closeButton: true,
|
||||||
|
description: state.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [state, queryClient]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||||
|
<Table>
|
||||||
|
<TableCaption>
|
||||||
|
{shouldShowTopupPaymentInfo(topup) && (
|
||||||
|
<div className="max-w-sm mx-auto">
|
||||||
|
<p>Please send the following amount to the payment address</p>
|
||||||
|
<AccountInfomation
|
||||||
|
accName="Baraveli Dev"
|
||||||
|
accountNo="90101400028321000"
|
||||||
|
/>
|
||||||
|
{topup?.paid ? (
|
||||||
|
<Button
|
||||||
|
size={"lg"}
|
||||||
|
variant={"secondary"}
|
||||||
|
disabled
|
||||||
|
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||||
|
>
|
||||||
|
Topup Payment Verified
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<form action={formAction}>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="topupId"
|
||||||
|
value={topup?.id ?? ""}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
disabled={disabled || isPending}
|
||||||
|
type="submit"
|
||||||
|
size={"lg"}
|
||||||
|
className="mb-4 w-full"
|
||||||
|
>
|
||||||
|
{isPending ? "Processing payment..." : "I have paid"}
|
||||||
|
{isPending ? (
|
||||||
|
<Loader2 className="animate-spin" />
|
||||||
|
) : (
|
||||||
|
<BadgeDollarSign />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TableCaption>
|
||||||
|
<TableBody className="">
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Topup created</TableCell>
|
||||||
|
<TableCell className="text-right text-muted-foreground">
|
||||||
|
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
second: "2-digit",
|
||||||
|
})}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Payment received</TableCell>
|
||||||
|
<TableCell className="text-right text-sarLinkOrange">
|
||||||
|
{topup?.paid_at
|
||||||
|
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
second: "2-digit",
|
||||||
|
})
|
||||||
|
: "-"}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>MIB Reference</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow className="">
|
||||||
|
<TableCell colSpan={1}>Total Due</TableCell>
|
||||||
|
<TableCell className="text-right text-3xl font-bold">
|
||||||
|
{topup?.amount?.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,226 @@
|
|||||||
|
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||||
|
import { Calendar } from "lucide-react";
|
||||||
|
import { Link, useSearchParams } from "react-router-dom";
|
||||||
|
import { getTopups } from "@/actions/payment";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import type { Topup } from "@/lib/backend-types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import ClientErrorMessage from "./client-error-message";
|
||||||
|
import TableSkeleton from "./device-table-skeleton";
|
||||||
|
import Pagination from "./pagination";
|
||||||
|
import { Badge } from "./ui/badge";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
export function TopupsTable() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const page = Number.parseInt(searchParams.get("page") ?? "") || 1;
|
||||||
|
const limit = 10;
|
||||||
|
const offset = (page - 1) * limit;
|
||||||
|
// Build params object
|
||||||
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (value !== undefined && value !== "") {
|
||||||
|
apiParams[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
apiParams.limit = limit;
|
||||||
|
apiParams.offset = offset;
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: topups,
|
||||||
|
isPending,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["topups", apiParams],
|
||||||
|
queryFn: () => getTopups(apiParams),
|
||||||
|
placeholderData: keepPreviousData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isPending) {
|
||||||
|
return (
|
||||||
|
<TableSkeleton headers={["Details", "Status", "Amount"]} length={10} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <ClientErrorMessage message={error.message} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data, meta } = topups;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{data?.length === 0 ? (
|
||||||
|
<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
|
||||||
|
<h3>No topups.</h3>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<Table className="overflow-scroll">
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Details</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="overflow-scroll">
|
||||||
|
{topups?.data?.map((topup) => (
|
||||||
|
<TableRow key={topup.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start border rounded p-2 motion-preset-fade-md",
|
||||||
|
topup?.paid
|
||||||
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
|
: topup?.is_expired
|
||||||
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar size={16} opacity={0.5} />
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{new Date(topup.created_at).toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<Link
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
to={`/top-ups/${topup.id}`}
|
||||||
|
>
|
||||||
|
<Button size={"sm"} variant="outline">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{topup.paid ? (
|
||||||
|
<Badge
|
||||||
|
className="bg-green-100 dark:bg-green-700"
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
{topup.status}
|
||||||
|
</Badge>
|
||||||
|
) : topup.is_expired ? (
|
||||||
|
<Badge>Expired</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline">{topup.status}</Badge>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{topup.amount.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
MVR
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
|
{meta?.total === 1 ? (
|
||||||
|
<p className="text-center">Total {meta?.total} topup.</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center">Total {meta?.total} topups.</p>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="sm:hidden block">
|
||||||
|
{data.map((topup) => (
|
||||||
|
<MobileTopupDetails key={topup.id} topup={topup} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Pagination
|
||||||
|
totalPages={meta?.last_page}
|
||||||
|
currentPage={meta?.current_page}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileTopupDetails({ topup }: { topup: Topup }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
|
||||||
|
topup?.paid
|
||||||
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
|
: topup?.is_expired
|
||||||
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar size={16} opacity={0.5} />
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
{new Date(topup.created_at).toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
day: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<Link
|
||||||
|
className="font-medium hover:underline"
|
||||||
|
to={`/top-ups/${topup.id}`}
|
||||||
|
>
|
||||||
|
<Button size={"sm"} variant="outline">
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
<h3 className="text-sm font-medium">Amount</h3>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{topup.amount.toFixed(2)} MVR
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="font-semibold pr-2">
|
||||||
|
{topup.paid ? (
|
||||||
|
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
|
||||||
|
{topup.status}
|
||||||
|
</Badge>
|
||||||
|
) : topup.is_expired ? (
|
||||||
|
<Badge>Expired</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary">{topup.status}</Badge>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Accordion as AccordionPrimitive } from "radix-ui";
|
||||||
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function Accordion({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||||
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
data-slot="accordion-item"
|
||||||
|
className={cn("border-b last:border-b-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
data-slot="accordion-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
data-slot="accordion-content"
|
||||||
|
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||||
@@ -0,0 +1,156 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||||
|
import * as React from "react";
|
||||||
|
import { buttonVariants } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function AlertDialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||||
|
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
data-slot="alert-dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
data-slot="alert-dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogHeader({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogFooter({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
data-slot="alert-dialog-title"
|
||||||
|
className={cn("text-lg font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
data-slot="alert-dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogAction({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogCancel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
};
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-background text-foreground",
|
||||||
|
destructive:
|
||||||
|
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const Alert = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Alert.displayName = "Alert";
|
||||||
|
|
||||||
|
const AlertTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h5
|
||||||
|
ref={ref}
|
||||||
|
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertTitle.displayName = "AlertTitle";
|
||||||
|
|
||||||
|
const AlertDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDescription.displayName = "AlertDescription";
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription };
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
import { useAtomValue } from "jotai";
|
||||||
|
import {
|
||||||
|
BadgePlus,
|
||||||
|
Calculator,
|
||||||
|
ChevronRight,
|
||||||
|
Coins,
|
||||||
|
CreditCard,
|
||||||
|
Handshake,
|
||||||
|
MonitorSpeaker,
|
||||||
|
Smartphone,
|
||||||
|
UsersRound,
|
||||||
|
Wallet2Icon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Collapsible,
|
||||||
|
CollapsibleContent,
|
||||||
|
CollapsibleTrigger,
|
||||||
|
} from "@/components/ui/collapsible";
|
||||||
|
import {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarRail,
|
||||||
|
} from "@/components/ui/sidebar";
|
||||||
|
import { userAtom } from "@/lib/auth-store";
|
||||||
|
|
||||||
|
type Permission = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Categories = {
|
||||||
|
id: string;
|
||||||
|
children: (
|
||||||
|
| {
|
||||||
|
title: string;
|
||||||
|
link: string;
|
||||||
|
perm_identifier: string;
|
||||||
|
icon: React.JSX.Element;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
title: string;
|
||||||
|
link: string;
|
||||||
|
icon: React.JSX.Element;
|
||||||
|
perm_identifier?: undefined;
|
||||||
|
}
|
||||||
|
)[];
|
||||||
|
}[];
|
||||||
|
|
||||||
|
export function AppSidebar({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Sidebar>) {
|
||||||
|
const user = useAtomValue(userAtom);
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
{
|
||||||
|
id: "MENU",
|
||||||
|
url: "#",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: "Devices",
|
||||||
|
link: "/devices?page=1",
|
||||||
|
perm_identifier: "device",
|
||||||
|
icon: <Smartphone size={16} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Parental Control",
|
||||||
|
link: "/parental-control?page=1",
|
||||||
|
icon: <CreditCard size={16} />,
|
||||||
|
perm_identifier: "device",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Subscriptions",
|
||||||
|
link: "/payments?page=1",
|
||||||
|
icon: <CreditCard size={16} />,
|
||||||
|
perm_identifier: "payment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Top Ups",
|
||||||
|
link: "/top-ups?page=1",
|
||||||
|
icon: <BadgePlus size={16} />,
|
||||||
|
perm_identifier: "topup",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Transaction History",
|
||||||
|
link: "/wallet",
|
||||||
|
icon: <Wallet2Icon size={16} />,
|
||||||
|
perm_identifier: "wallet transaction",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Agreements",
|
||||||
|
link: "/agreements",
|
||||||
|
icon: <Handshake size={16} />,
|
||||||
|
perm_identifier: "device",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ADMIN CONTROL",
|
||||||
|
url: "#",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: "Users",
|
||||||
|
link: "/users",
|
||||||
|
icon: <UsersRound size={16} />,
|
||||||
|
perm_identifier: "device",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "User Devices",
|
||||||
|
link: "/user-devices",
|
||||||
|
icon: <MonitorSpeaker size={16} />,
|
||||||
|
perm_identifier: "device",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "User Payments",
|
||||||
|
link: "/user-payments",
|
||||||
|
icon: <Coins size={16} />,
|
||||||
|
perm_identifier: "payment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "User Topups",
|
||||||
|
link: "/user-topups",
|
||||||
|
icon: <Coins size={16} />,
|
||||||
|
perm_identifier: "topup",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Price Calculator",
|
||||||
|
link: "/price-calculator",
|
||||||
|
icon: <Calculator size={16} />,
|
||||||
|
perm_identifier: "device",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let CATEGORIES: Categories;
|
||||||
|
if (user?.is_admin) {
|
||||||
|
CATEGORIES = categories;
|
||||||
|
} else {
|
||||||
|
// Filter out ADMIN CONTROL category for non-admin users
|
||||||
|
const nonAdminCategories = categories.filter(
|
||||||
|
(category) => category.id !== "ADMIN CONTROL",
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredCategories = nonAdminCategories.map((category) => {
|
||||||
|
const filteredChildren = category.children.filter((child) => {
|
||||||
|
const permIdentifier = child.perm_identifier;
|
||||||
|
return user?.user_permissions?.some((permission: Permission) => {
|
||||||
|
const permissionParts = permission.name.split(" ");
|
||||||
|
const modelNameFromPermission = permissionParts.slice(2).join(" ");
|
||||||
|
return modelNameFromPermission === permIdentifier;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { ...category, children: filteredChildren };
|
||||||
|
});
|
||||||
|
|
||||||
|
CATEGORIES = filteredCategories.filter(
|
||||||
|
(category) => category.children.length > 0,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sidebar {...props} className="z-50">
|
||||||
|
<SidebarHeader>
|
||||||
|
<h4 className="p-2 rounded title-bg border text-center uppercase ">
|
||||||
|
Sar Link Portal
|
||||||
|
</h4>
|
||||||
|
</SidebarHeader>
|
||||||
|
<SidebarContent className="gap-0">
|
||||||
|
{CATEGORIES.map((item) => {
|
||||||
|
return (
|
||||||
|
<Collapsible
|
||||||
|
key={item.id}
|
||||||
|
title={item.id}
|
||||||
|
defaultOpen
|
||||||
|
className="group/collapsible"
|
||||||
|
>
|
||||||
|
<SidebarGroup>
|
||||||
|
<SidebarGroupLabel
|
||||||
|
asChild
|
||||||
|
className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
||||||
|
>
|
||||||
|
<CollapsibleTrigger>
|
||||||
|
{item.id}{" "}
|
||||||
|
<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
</SidebarGroupLabel>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<SidebarGroupContent>
|
||||||
|
<SidebarMenu>
|
||||||
|
{item.children.map((item) => (
|
||||||
|
<SidebarMenuItem key={item.title}>
|
||||||
|
<SidebarMenuButton className="py-6" asChild>
|
||||||
|
<Link className="text-md" to={item.link}>
|
||||||
|
{item.icon}
|
||||||
|
<span className="opacity-70 motion-preset-fade motion-duration-300 ml-2">
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
</Collapsible>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</SidebarContent>
|
||||||
|
<SidebarRail />
|
||||||
|
</Sidebar>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
const AspectRatio = AspectRatioPrimitive.Root;
|
||||||
|
|
||||||
|
export { AspectRatio };
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Avatar as AvatarPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Avatar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
ref={ref}
|
||||||
|
className={cn("aspect-square h-full w-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback };
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { type VariantProps, cva } from "class-variance-authority";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot as SlotPrimitive } from "radix-ui";
|
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Breadcrumb = React.forwardRef<
|
||||||
|
HTMLElement,
|
||||||
|
React.ComponentPropsWithoutRef<"nav"> & {
|
||||||
|
separator?: React.ReactNode;
|
||||||
|
}
|
||||||
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
|
||||||
|
Breadcrumb.displayName = "Breadcrumb";
|
||||||
|
|
||||||
|
const BreadcrumbList = React.forwardRef<
|
||||||
|
HTMLOListElement,
|
||||||
|
React.ComponentPropsWithoutRef<"ol">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ol
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbList.displayName = "BreadcrumbList";
|
||||||
|
|
||||||
|
const BreadcrumbItem = React.forwardRef<
|
||||||
|
HTMLLIElement,
|
||||||
|
React.ComponentPropsWithoutRef<"li">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<li
|
||||||
|
ref={ref}
|
||||||
|
className={cn("inline-flex items-center gap-1.5", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
||||||
|
|
||||||
|
const BreadcrumbLink = React.forwardRef<
|
||||||
|
HTMLAnchorElement,
|
||||||
|
React.ComponentPropsWithoutRef<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
>(({ asChild, className, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
className={cn("transition-colors hover:text-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
||||||
|
|
||||||
|
const BreadcrumbPage = React.forwardRef<
|
||||||
|
HTMLSpanElement,
|
||||||
|
React.ComponentPropsWithoutRef<"span">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<span
|
||||||
|
ref={ref}
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn("font-normal text-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbPage.displayName = "BreadcrumbPage";
|
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) => (
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRight />}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
||||||
|
|
||||||
|
const BreadcrumbEllipsis = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) => (
|
||||||
|
<span
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
};
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import { Slot as SlotPrimitive } from "radix-ui";
|
||||||
|
import { type VariantProps, cva } from "class-variance-authority";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Button, buttonVariants } from "@/components/ui/button";
|
||||||
|
|
||||||
|
function Calendar({
|
||||||
|
className,
|
||||||
|
classNames,
|
||||||
|
showOutsideDays = true,
|
||||||
|
captionLayout = "label",
|
||||||
|
buttonVariant = "ghost",
|
||||||
|
formatters,
|
||||||
|
components,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayPicker> & {
|
||||||
|
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
||||||
|
}) {
|
||||||
|
const defaultClassNames = getDefaultClassNames();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DayPicker
|
||||||
|
showOutsideDays={showOutsideDays}
|
||||||
|
className={cn(
|
||||||
|
"bg-background group/calendar p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
|
||||||
|
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||||
|
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
captionLayout={captionLayout}
|
||||||
|
formatters={{
|
||||||
|
formatMonthDropdown: (date) =>
|
||||||
|
date.toLocaleString("default", { month: "short" }),
|
||||||
|
...formatters,
|
||||||
|
}}
|
||||||
|
classNames={{
|
||||||
|
root: cn("w-fit", defaultClassNames.root),
|
||||||
|
months: cn(
|
||||||
|
"relative flex flex-col gap-4 md:flex-row",
|
||||||
|
defaultClassNames.months,
|
||||||
|
),
|
||||||
|
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
||||||
|
nav: cn(
|
||||||
|
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||||
|
defaultClassNames.nav,
|
||||||
|
),
|
||||||
|
button_previous: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
"h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
|
||||||
|
defaultClassNames.button_previous,
|
||||||
|
),
|
||||||
|
button_next: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
"h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
|
||||||
|
defaultClassNames.button_next,
|
||||||
|
),
|
||||||
|
month_caption: cn(
|
||||||
|
"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
|
||||||
|
defaultClassNames.month_caption,
|
||||||
|
),
|
||||||
|
dropdowns: cn(
|
||||||
|
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||||
|
defaultClassNames.dropdowns,
|
||||||
|
),
|
||||||
|
dropdown_root: cn(
|
||||||
|
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||||
|
defaultClassNames.dropdown_root,
|
||||||
|
),
|
||||||
|
dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
|
||||||
|
caption_label: cn(
|
||||||
|
"select-none font-medium",
|
||||||
|
captionLayout === "label"
|
||||||
|
? "text-sm"
|
||||||
|
: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
||||||
|
defaultClassNames.caption_label,
|
||||||
|
),
|
||||||
|
table: "w-full border-collapse",
|
||||||
|
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||||
|
weekday: cn(
|
||||||
|
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
|
||||||
|
defaultClassNames.weekday,
|
||||||
|
),
|
||||||
|
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
||||||
|
week_number_header: cn(
|
||||||
|
"w-(--cell-size) select-none",
|
||||||
|
defaultClassNames.week_number_header,
|
||||||
|
),
|
||||||
|
week_number: cn(
|
||||||
|
"text-muted-foreground select-none text-[0.8rem]",
|
||||||
|
defaultClassNames.week_number,
|
||||||
|
),
|
||||||
|
day: cn(
|
||||||
|
"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||||
|
defaultClassNames.day,
|
||||||
|
),
|
||||||
|
range_start: cn(
|
||||||
|
"bg-accent rounded-l-md",
|
||||||
|
defaultClassNames.range_start,
|
||||||
|
),
|
||||||
|
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||||
|
range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
|
||||||
|
today: cn(
|
||||||
|
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||||
|
defaultClassNames.today,
|
||||||
|
),
|
||||||
|
outside: cn(
|
||||||
|
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||||
|
defaultClassNames.outside,
|
||||||
|
),
|
||||||
|
disabled: cn(
|
||||||
|
"text-muted-foreground opacity-50",
|
||||||
|
defaultClassNames.disabled,
|
||||||
|
),
|
||||||
|
hidden: cn("invisible", defaultClassNames.hidden),
|
||||||
|
...classNames,
|
||||||
|
}}
|
||||||
|
components={{
|
||||||
|
Root: ({ className, rootRef, ...props }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="calendar"
|
||||||
|
ref={rootRef}
|
||||||
|
className={cn(className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
Chevron: ({ className, orientation, ...props }) => {
|
||||||
|
if (orientation === "left") {
|
||||||
|
return (
|
||||||
|
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orientation === "right") {
|
||||||
|
return (
|
||||||
|
<ChevronRightIcon
|
||||||
|
className={cn("size-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
DayButton: CalendarDayButton,
|
||||||
|
WeekNumber: ({ children, ...props }) => {
|
||||||
|
return (
|
||||||
|
<td {...props}>
|
||||||
|
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
...components,
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarDayButton({
|
||||||
|
className,
|
||||||
|
day,
|
||||||
|
modifiers,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayButton>) {
|
||||||
|
const defaultClassNames = getDefaultClassNames();
|
||||||
|
|
||||||
|
const ref = React.useRef<HTMLButtonElement>(null);
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (modifiers.focused) ref.current?.focus();
|
||||||
|
}, [modifiers.focused]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
data-day={day.date.toLocaleDateString()}
|
||||||
|
data-selected-single={
|
||||||
|
modifiers.selected &&
|
||||||
|
!modifiers.range_start &&
|
||||||
|
!modifiers.range_end &&
|
||||||
|
!modifiers.range_middle
|
||||||
|
}
|
||||||
|
data-range-start={modifiers.range_start}
|
||||||
|
data-range-end={modifiers.range_end}
|
||||||
|
data-range-middle={modifiers.range_middle}
|
||||||
|
className={cn(
|
||||||
|
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
||||||
|
defaultClassNames.day,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Calendar, CalendarDayButton };
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border bg-card text-card-foreground shadow",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Card.displayName = "Card";
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardHeader.displayName = "CardHeader";
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardTitle.displayName = "CardTitle";
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardDescription.displayName = "CardDescription";
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
));
|
||||||
|
CardContent.displayName = "CardContent";
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CardFooter.displayName = "CardFooter";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
};
|
||||||
@@ -0,0 +1,262 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import useEmblaCarousel, {
|
||||||
|
type UseEmblaCarouselType,
|
||||||
|
} from "embla-carousel-react";
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
type CarouselApi = UseEmblaCarouselType[1];
|
||||||
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
||||||
|
type CarouselOptions = UseCarouselParameters[0];
|
||||||
|
type CarouselPlugin = UseCarouselParameters[1];
|
||||||
|
|
||||||
|
type CarouselProps = {
|
||||||
|
opts?: CarouselOptions;
|
||||||
|
plugins?: CarouselPlugin;
|
||||||
|
orientation?: "horizontal" | "vertical";
|
||||||
|
setApi?: (api: CarouselApi) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type CarouselContextProps = {
|
||||||
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
||||||
|
api: ReturnType<typeof useEmblaCarousel>[1];
|
||||||
|
scrollPrev: () => void;
|
||||||
|
scrollNext: () => void;
|
||||||
|
canScrollPrev: boolean;
|
||||||
|
canScrollNext: boolean;
|
||||||
|
} & CarouselProps;
|
||||||
|
|
||||||
|
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
|
||||||
|
|
||||||
|
function useCarousel() {
|
||||||
|
const context = React.useContext(CarouselContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useCarousel must be used within a <Carousel />");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Carousel = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
orientation = "horizontal",
|
||||||
|
opts,
|
||||||
|
setApi,
|
||||||
|
plugins,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
|
{
|
||||||
|
...opts,
|
||||||
|
axis: orientation === "horizontal" ? "x" : "y",
|
||||||
|
},
|
||||||
|
plugins,
|
||||||
|
);
|
||||||
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
||||||
|
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
||||||
|
|
||||||
|
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||||
|
if (!api) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCanScrollPrev(api.canScrollPrev());
|
||||||
|
setCanScrollNext(api.canScrollNext());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const scrollPrev = React.useCallback(() => {
|
||||||
|
api?.scrollPrev();
|
||||||
|
}, [api]);
|
||||||
|
|
||||||
|
const scrollNext = React.useCallback(() => {
|
||||||
|
api?.scrollNext();
|
||||||
|
}, [api]);
|
||||||
|
|
||||||
|
const handleKeyDown = React.useCallback(
|
||||||
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
|
if (event.key === "ArrowLeft") {
|
||||||
|
event.preventDefault();
|
||||||
|
scrollPrev();
|
||||||
|
} else if (event.key === "ArrowRight") {
|
||||||
|
event.preventDefault();
|
||||||
|
scrollNext();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[scrollPrev, scrollNext],
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api || !setApi) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setApi(api);
|
||||||
|
}, [api, setApi]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect(api);
|
||||||
|
api.on("reInit", onSelect);
|
||||||
|
api.on("select", onSelect);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
api?.off("select", onSelect);
|
||||||
|
};
|
||||||
|
}, [api, onSelect]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CarouselContext.Provider
|
||||||
|
value={{
|
||||||
|
carouselRef,
|
||||||
|
api: api,
|
||||||
|
opts,
|
||||||
|
orientation:
|
||||||
|
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||||
|
scrollPrev,
|
||||||
|
scrollNext,
|
||||||
|
canScrollPrev,
|
||||||
|
canScrollNext,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
onKeyDownCapture={handleKeyDown}
|
||||||
|
className={cn("relative", className)}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</CarouselContext.Provider>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Carousel.displayName = "Carousel";
|
||||||
|
|
||||||
|
const CarouselContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { carouselRef, orientation } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={carouselRef} className="overflow-hidden">
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex",
|
||||||
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
CarouselContent.displayName = "CarouselContent";
|
||||||
|
|
||||||
|
const CarouselItem = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { orientation } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
className={cn(
|
||||||
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
CarouselItem.displayName = "CarouselItem";
|
||||||
|
|
||||||
|
const CarouselPrevious = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<typeof Button>
|
||||||
|
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||||
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute h-8 w-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "-left-12 top-1/2 -translate-y-1/2"
|
||||||
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
disabled={!canScrollPrev}
|
||||||
|
onClick={scrollPrev}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Previous slide</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
CarouselPrevious.displayName = "CarouselPrevious";
|
||||||
|
|
||||||
|
const CarouselNext = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<typeof Button>
|
||||||
|
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||||
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute h-8 w-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "-right-12 top-1/2 -translate-y-1/2"
|
||||||
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
disabled={!canScrollNext}
|
||||||
|
onClick={scrollNext}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Next slide</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
CarouselNext.displayName = "CarouselNext";
|
||||||
|
|
||||||
|
export {
|
||||||
|
type CarouselApi,
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselPrevious,
|
||||||
|
CarouselNext,
|
||||||
|
};
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Checkbox as CheckboxPrimitive } from "radix-ui";
|
||||||
|
import { Check } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Checkbox = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
className={cn("flex items-center justify-center text-current")}
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
));
|
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Checkbox };
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
const Collapsible = CollapsiblePrimitive.Root;
|
||||||
|
|
||||||
|
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
||||||
|
|
||||||
|
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
||||||
@@ -0,0 +1,184 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Command as CommandPrimitive } from "cmdk";
|
||||||
|
import { SearchIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
function Command({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive
|
||||||
|
data-slot="command"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandDialog({
|
||||||
|
title = "Command Palette",
|
||||||
|
description = "Search for a command to run...",
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Dialog> & {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
className?: string;
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent
|
||||||
|
className={cn("overflow-hidden p-0", className)}
|
||||||
|
showCloseButton={showCloseButton}
|
||||||
|
>
|
||||||
|
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||||
|
{children}
|
||||||
|
</Command>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="command-input-wrapper"
|
||||||
|
className="flex h-9 items-center gap-2 border-b px-3"
|
||||||
|
>
|
||||||
|
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
data-slot="command-input"
|
||||||
|
className={cn(
|
||||||
|
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
data-slot="command-list"
|
||||||
|
className={cn(
|
||||||
|
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandEmpty({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
data-slot="command-empty"
|
||||||
|
className="py-6 text-center text-sm"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
data-slot="command-group"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
data-slot="command-separator"
|
||||||
|
className={cn("bg-border -mx-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
data-slot="command-item"
|
||||||
|
className={cn(
|
||||||
|
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CommandShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="command-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
};
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const ContextMenu = ContextMenuPrimitive.Root;
|
||||||
|
|
||||||
|
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
|
||||||
|
|
||||||
|
const ContextMenuGroup = ContextMenuPrimitive.Group;
|
||||||
|
|
||||||
|
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
||||||
|
|
||||||
|
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
||||||
|
|
||||||
|
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
||||||
|
|
||||||
|
const ContextMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</ContextMenuPrimitive.SubTrigger>
|
||||||
|
));
|
||||||
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
||||||
|
|
||||||
|
const ContextMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
||||||
|
|
||||||
|
const ContextMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.Portal>
|
||||||
|
<ContextMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</ContextMenuPrimitive.Portal>
|
||||||
|
));
|
||||||
|
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const ContextMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const ContextMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.CheckboxItem>
|
||||||
|
));
|
||||||
|
ContextMenuCheckboxItem.displayName =
|
||||||
|
ContextMenuPrimitive.CheckboxItem.displayName;
|
||||||
|
|
||||||
|
const ContextMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-4 w-4 fill-current" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.RadioItem>
|
||||||
|
));
|
||||||
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
||||||
|
|
||||||
|
const ContextMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold text-foreground",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const ContextMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ContextMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const ContextMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
ContextMenuShortcut.displayName = "ContextMenuShortcut";
|
||||||
|
|
||||||
|
export {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuTrigger,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuCheckboxItem,
|
||||||
|
ContextMenuRadioItem,
|
||||||
|
ContextMenuLabel,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuShortcut,
|
||||||
|
ContextMenuGroup,
|
||||||
|
ContextMenuPortal,
|
||||||
|
ContextMenuSub,
|
||||||
|
ContextMenuSubContent,
|
||||||
|
ContextMenuSubTrigger,
|
||||||
|
ContextMenuRadioGroup,
|
||||||
|
};
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
import { eachMonthOfInterval, endOfYear, format, startOfYear } from "date-fns";
|
||||||
|
import { Calendar as CalendarIcon } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface DatePickerProps {
|
||||||
|
date: Date | undefined;
|
||||||
|
setDate: (date: Date | undefined) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DatePicker({ date, setDate }: DatePickerProps) {
|
||||||
|
const [month, setMonth] = React.useState<number>(
|
||||||
|
date ? date.getMonth() : new Date().getMonth(),
|
||||||
|
);
|
||||||
|
const [year, setYear] = React.useState<number>(
|
||||||
|
date ? date.getFullYear() : new Date().getFullYear(),
|
||||||
|
);
|
||||||
|
|
||||||
|
const years = React.useMemo(() => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
return Array.from(
|
||||||
|
{ length: currentYear - 1900 + 1 },
|
||||||
|
(_, i) => currentYear - i,
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const months = React.useMemo(() => {
|
||||||
|
if (year) {
|
||||||
|
return eachMonthOfInterval({
|
||||||
|
start: startOfYear(new Date(year, 0, 1)),
|
||||||
|
end: endOfYear(new Date(year, 0, 1)),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}, [year]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (date) {
|
||||||
|
setMonth(date.getMonth());
|
||||||
|
setYear(date.getFullYear());
|
||||||
|
}
|
||||||
|
}, [date]);
|
||||||
|
|
||||||
|
const handleYearChange = (selectedYear: string) => {
|
||||||
|
const newYear = Number.parseInt(selectedYear, 10);
|
||||||
|
setYear(newYear);
|
||||||
|
if (date) {
|
||||||
|
const newDate = new Date(date);
|
||||||
|
newDate.setFullYear(newYear);
|
||||||
|
setDate(newDate);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMonthChange = (selectedMonth: string) => {
|
||||||
|
const newMonth = Number.parseInt(selectedMonth, 10);
|
||||||
|
setMonth(newMonth);
|
||||||
|
if (date) {
|
||||||
|
const newDate = new Date(date);
|
||||||
|
newDate.setMonth(newMonth);
|
||||||
|
setDate(newDate);
|
||||||
|
} else {
|
||||||
|
setDate(new Date(year, newMonth, 1));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-start text-left font-normal",
|
||||||
|
!date && "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<div className="flex justify-between p-2 space-x-1">
|
||||||
|
<Select onValueChange={handleYearChange} value={year.toString()}>
|
||||||
|
<SelectTrigger className="w-[120px]">
|
||||||
|
<SelectValue placeholder="Year" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{years.map((y) => (
|
||||||
|
<SelectItem key={y} value={y.toString()}>
|
||||||
|
{y}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select onValueChange={handleMonthChange} value={month.toString()}>
|
||||||
|
<SelectTrigger className="w-[120px]">
|
||||||
|
<SelectValue placeholder="Month" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{months.map((m, index) => (
|
||||||
|
<SelectItem key={`${index + 1}`} value={index.toString()}>
|
||||||
|
{format(m, "MMMM")}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={date}
|
||||||
|
onSelect={setDate}
|
||||||
|
month={new Date(year, month)}
|
||||||
|
onMonthChange={(newMonth) => {
|
||||||
|
setMonth(newMonth.getMonth());
|
||||||
|
setYear(newMonth.getFullYear());
|
||||||
|
}}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-start text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
};
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Drawer as DrawerPrimitive } from "vaul";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Drawer = ({
|
||||||
|
shouldScaleBackground = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
|
||||||
|
<DrawerPrimitive.Root
|
||||||
|
shouldScaleBackground={shouldScaleBackground}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
Drawer.displayName = "Drawer";
|
||||||
|
|
||||||
|
const DrawerTrigger = DrawerPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DrawerPortal = DrawerPrimitive.Portal;
|
||||||
|
|
||||||
|
const DrawerClose = DrawerPrimitive.Close;
|
||||||
|
|
||||||
|
const DrawerOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DrawerPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DrawerPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn("fixed inset-0 z-50 bg-black/80", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DrawerContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DrawerPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DrawerPortal>
|
||||||
|
<DrawerOverlay />
|
||||||
|
<DrawerPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
|
||||||
|
{children}
|
||||||
|
</DrawerPrimitive.Content>
|
||||||
|
</DrawerPortal>
|
||||||
|
));
|
||||||
|
DrawerContent.displayName = "DrawerContent";
|
||||||
|
|
||||||
|
const DrawerHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DrawerHeader.displayName = "DrawerHeader";
|
||||||
|
|
||||||
|
const DrawerFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DrawerFooter.displayName = "DrawerFooter";
|
||||||
|
|
||||||
|
const DrawerTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DrawerPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DrawerPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold leading-none tracking-tight",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const DrawerDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DrawerPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DrawerPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Drawer,
|
||||||
|
DrawerPortal,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerDescription,
|
||||||
|
};
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
));
|
||||||
|
DropdownMenuSubTrigger.displayName =
|
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSubContent.displayName =
|
||||||
|
DropdownMenuPrimitive.SubContent.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
));
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
));
|
||||||
|
DropdownMenuCheckboxItem.displayName =
|
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
));
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
};
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface DualRangeSliderProps
|
||||||
|
extends React.ComponentProps<typeof SliderPrimitive.Root> {
|
||||||
|
labelPosition?: "top" | "bottom";
|
||||||
|
label?: (value: number | undefined) => React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DualRangeSlider = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||||
|
DualRangeSliderProps
|
||||||
|
>(({ className, label, labelPosition = "top", ...props }, ref) => {
|
||||||
|
const initialValue = Array.isArray(props.value)
|
||||||
|
? props.value
|
||||||
|
: [props.min, props.max];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full touch-none select-none items-center",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
||||||
|
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||||
|
</SliderPrimitive.Track>
|
||||||
|
{initialValue.map((value, index) => (
|
||||||
|
<React.Fragment key={`${index + 1}`}>
|
||||||
|
<SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
|
||||||
|
{label && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute flex w-full justify-center",
|
||||||
|
labelPosition === "top" && "-top-7",
|
||||||
|
labelPosition === "bottom" && "top-4",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{label(value)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</SliderPrimitive.Thumb>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</SliderPrimitive.Root>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
DualRangeSlider.displayName = "DualRangeSlider";
|
||||||
|
|
||||||
|
export { DualRangeSlider };
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const FloatingInput = React.forwardRef<
|
||||||
|
HTMLInputElement,
|
||||||
|
React.InputHTMLAttributes<HTMLInputElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
placeholder=" "
|
||||||
|
className={cn("peer", className)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FloatingInput.displayName = "FloatingInput";
|
||||||
|
|
||||||
|
const FloatingLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof Label>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
className={cn(
|
||||||
|
"peer-focus:secondary peer-focus:dark:secondary absolute start-2 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform bg-background px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 dark:bg-background rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4 cursor-text",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FloatingLabel.displayName = "FloatingLabel";
|
||||||
|
|
||||||
|
type FloatingLabelInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
||||||
|
label?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FloatingLabelInput = React.forwardRef<
|
||||||
|
React.ElementRef<typeof FloatingInput>,
|
||||||
|
React.PropsWithoutRef<FloatingLabelInputProps>
|
||||||
|
>(({ id, label, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<FloatingInput ref={ref} id={id} {...props} />
|
||||||
|
<FloatingLabel htmlFor={id}>{label}</FloatingLabel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FloatingLabelInput.displayName = "FloatingLabelInput";
|
||||||
|
|
||||||
|
export { FloatingInput, FloatingLabel, FloatingLabelInput };
|
||||||
@@ -0,0 +1,179 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
FormProvider,
|
||||||
|
useFormContext,
|
||||||
|
type ControllerProps,
|
||||||
|
type FieldPath,
|
||||||
|
type FieldValues,
|
||||||
|
} from "react-hook-form";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
|
const Form = FormProvider;
|
||||||
|
|
||||||
|
type FormFieldContextValue<
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
> = {
|
||||||
|
name: TName;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||||
|
{} as FormFieldContextValue,
|
||||||
|
);
|
||||||
|
|
||||||
|
const FormField = <
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
>({
|
||||||
|
...props
|
||||||
|
}: ControllerProps<TFieldValues, TName>) => {
|
||||||
|
return (
|
||||||
|
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||||
|
<Controller {...props} />
|
||||||
|
</FormFieldContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useFormField = () => {
|
||||||
|
const fieldContext = React.useContext(FormFieldContext);
|
||||||
|
const itemContext = React.useContext(FormItemContext);
|
||||||
|
const { getFieldState, formState } = useFormContext();
|
||||||
|
|
||||||
|
const fieldState = getFieldState(fieldContext.name, formState);
|
||||||
|
|
||||||
|
if (!fieldContext) {
|
||||||
|
throw new Error("useFormField should be used within <FormField>");
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = itemContext;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name: fieldContext.name,
|
||||||
|
formItemId: `${id}-form-item`,
|
||||||
|
formDescriptionId: `${id}-form-item-description`,
|
||||||
|
formMessageId: `${id}-form-item-message`,
|
||||||
|
...fieldState,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
type FormItemContextValue = {
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||||
|
{} as FormItemContextValue,
|
||||||
|
);
|
||||||
|
|
||||||
|
const FormItem = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const id = React.useId();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItemContext.Provider value={{ id }}>
|
||||||
|
<div ref={ref} className={cn("space-y-2", className)} {...props} />
|
||||||
|
</FormItemContext.Provider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormItem.displayName = "FormItem";
|
||||||
|
|
||||||
|
const FormLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { error, formItemId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(error && "text-destructive", className)}
|
||||||
|
htmlFor={formItemId}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormLabel.displayName = "FormLabel";
|
||||||
|
|
||||||
|
const FormControl = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SlotPrimitive.Slot>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||||
|
useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SlotPrimitive.Slot
|
||||||
|
ref={ref}
|
||||||
|
id={formItemId}
|
||||||
|
aria-describedby={
|
||||||
|
!error
|
||||||
|
? `${formDescriptionId}`
|
||||||
|
: `${formDescriptionId} ${formMessageId}`
|
||||||
|
}
|
||||||
|
aria-invalid={!!error}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormControl.displayName = "FormControl";
|
||||||
|
|
||||||
|
const FormDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { formDescriptionId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
id={formDescriptionId}
|
||||||
|
className={cn("text-[0.8rem] text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormDescription.displayName = "FormDescription";
|
||||||
|
|
||||||
|
const FormMessage = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, children, ...props }, ref) => {
|
||||||
|
const { error, formMessageId } = useFormField();
|
||||||
|
const body = error ? String(error?.message ?? "") : children;
|
||||||
|
|
||||||
|
if (!body) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
id={formMessageId}
|
||||||
|
className={cn("text-[0.8rem] font-medium text-destructive", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormMessage.displayName = "FormMessage";
|
||||||
|
|
||||||
|
export {
|
||||||
|
useFormField,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormMessage,
|
||||||
|
FormField,
|
||||||
|
};
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { HoverCard as HoverCardPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const HoverCard = HoverCardPrimitive.Root;
|
||||||
|
|
||||||
|
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
||||||
|
|
||||||
|
const HoverCardContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof HoverCardPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<HoverCardPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { OTPInput, OTPInputContext } from "input-otp";
|
||||||
|
import { Minus } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const InputOTP = React.forwardRef<
|
||||||
|
React.ElementRef<typeof OTPInput>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof OTPInput>
|
||||||
|
>(({ className, containerClassName, ...props }, ref) => (
|
||||||
|
<OTPInput
|
||||||
|
ref={ref}
|
||||||
|
containerClassName={cn(
|
||||||
|
"flex items-center gap-2 has-disabled:opacity-50",
|
||||||
|
containerClassName,
|
||||||
|
)}
|
||||||
|
className={cn("disabled:cursor-not-allowed", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
InputOTP.displayName = "InputOTP";
|
||||||
|
|
||||||
|
const InputOTPGroup = React.forwardRef<
|
||||||
|
React.ElementRef<"div">,
|
||||||
|
React.ComponentPropsWithoutRef<"div">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("flex items-center", className)} {...props} />
|
||||||
|
));
|
||||||
|
InputOTPGroup.displayName = "InputOTPGroup";
|
||||||
|
|
||||||
|
const InputOTPSlot = React.forwardRef<
|
||||||
|
React.ElementRef<"div">,
|
||||||
|
React.ComponentPropsWithoutRef<"div"> & { index: number }
|
||||||
|
>(({ index, className, ...props }, ref) => {
|
||||||
|
const inputOTPContext = React.useContext(OTPInputContext);
|
||||||
|
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
|
||||||
|
isActive && "z-10 ring-1 ring-ring",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{char}
|
||||||
|
{hasFakeCaret && (
|
||||||
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
InputOTPSlot.displayName = "InputOTPSlot";
|
||||||
|
|
||||||
|
const InputOTPSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<"div">,
|
||||||
|
React.ComponentPropsWithoutRef<"div">
|
||||||
|
>(({ ...props }, ref) => (
|
||||||
|
<div ref={ref} role="separator" {...props}>
|
||||||
|
<Minus />
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
||||||
|
|
||||||
|
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Label as LabelPrimitive } from "radix-ui";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
||||||
|
);
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Label };
|
||||||
@@ -0,0 +1,256 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Menubar as MenubarPrimitive } from "radix-ui";
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function MenubarMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
|
||||||
|
return <MenubarPrimitive.Menu {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
|
||||||
|
return <MenubarPrimitive.Group {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
|
||||||
|
return <MenubarPrimitive.Portal {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
|
||||||
|
return <MenubarPrimitive.RadioGroup {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
|
||||||
|
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Menubar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Menubar.displayName = MenubarPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const MenubarTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const MenubarSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</MenubarPrimitive.SubTrigger>
|
||||||
|
));
|
||||||
|
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
|
||||||
|
|
||||||
|
const MenubarSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
|
||||||
|
|
||||||
|
const MenubarContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<MenubarPrimitive.Portal>
|
||||||
|
<MenubarPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
alignOffset={alignOffset}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</MenubarPrimitive.Portal>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
MenubarContent.displayName = MenubarPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const MenubarItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
MenubarItem.displayName = MenubarPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const MenubarCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.CheckboxItem>
|
||||||
|
));
|
||||||
|
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
|
||||||
|
|
||||||
|
const MenubarRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-4 w-4 fill-current" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.RadioItem>
|
||||||
|
));
|
||||||
|
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
|
||||||
|
|
||||||
|
const MenubarLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const MenubarSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof MenubarPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<MenubarPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const MenubarShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
MenubarShortcut.displayname = "MenubarShortcut";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Menubar,
|
||||||
|
MenubarMenu,
|
||||||
|
MenubarTrigger,
|
||||||
|
MenubarContent,
|
||||||
|
MenubarItem,
|
||||||
|
MenubarSeparator,
|
||||||
|
MenubarLabel,
|
||||||
|
MenubarCheckboxItem,
|
||||||
|
MenubarRadioGroup,
|
||||||
|
MenubarRadioItem,
|
||||||
|
MenubarPortal,
|
||||||
|
MenubarSubContent,
|
||||||
|
MenubarSubTrigger,
|
||||||
|
MenubarGroup,
|
||||||
|
MenubarSub,
|
||||||
|
MenubarShortcut,
|
||||||
|
};
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const NavigationMenu = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<NavigationMenuViewport />
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
));
|
||||||
|
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuList = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"group flex flex-1 list-none items-center justify-center space-x-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuItem = NavigationMenuPrimitive.Item;
|
||||||
|
|
||||||
|
const navigationMenuTriggerStyle = cva(
|
||||||
|
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
|
||||||
|
);
|
||||||
|
|
||||||
|
const NavigationMenuTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}{" "}
|
||||||
|
<ChevronDown
|
||||||
|
className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
));
|
||||||
|
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuLink = NavigationMenuPrimitive.Link;
|
||||||
|
|
||||||
|
const NavigationMenuViewport = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div className={cn("absolute left-0 top-full flex justify-center")}>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
NavigationMenuViewport.displayName =
|
||||||
|
NavigationMenuPrimitive.Viewport.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuIndicator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
));
|
||||||
|
NavigationMenuIndicator.displayName =
|
||||||
|
NavigationMenuPrimitive.Indicator.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
};
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
import { CheckIcon, ChevronsUpDown } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
import * as RPNInput from "react-phone-number-input";
|
||||||
|
import flags from "react-phone-number-input/flags";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
type PhoneInputProps = Omit<
|
||||||
|
React.ComponentProps<"input">,
|
||||||
|
"onChange" | "value" | "ref"
|
||||||
|
> &
|
||||||
|
Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
|
||||||
|
onChange?: (value: RPNInput.Value) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
|
||||||
|
React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
|
||||||
|
({ className, onChange, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<RPNInput.default
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex", className)}
|
||||||
|
flagComponent={FlagComponent}
|
||||||
|
countrySelectComponent={CountrySelect}
|
||||||
|
inputComponent={InputComponent}
|
||||||
|
smartCaret={false}
|
||||||
|
/**
|
||||||
|
* Handles the onChange event.
|
||||||
|
*
|
||||||
|
* react-phone-number-input might trigger the onChange event as undefined
|
||||||
|
* when a valid phone number is not entered. To prevent this,
|
||||||
|
* the value is coerced to an empty string.
|
||||||
|
*
|
||||||
|
* @param {E164Number | undefined} value - The entered value
|
||||||
|
*/
|
||||||
|
onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
PhoneInput.displayName = "PhoneInput";
|
||||||
|
|
||||||
|
const InputComponent = React.forwardRef<
|
||||||
|
HTMLInputElement,
|
||||||
|
React.ComponentProps<"input">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<Input
|
||||||
|
className={cn("mx-2 bg-white/10 backdrop-blur-md", className)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
InputComponent.displayName = "InputComponent";
|
||||||
|
|
||||||
|
type CountryEntry = { label: string; value: RPNInput.Country | undefined };
|
||||||
|
|
||||||
|
type CountrySelectProps = {
|
||||||
|
disabled?: boolean;
|
||||||
|
value: RPNInput.Country;
|
||||||
|
options: CountryEntry[];
|
||||||
|
onChange: (country: RPNInput.Country) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const CountrySelect = ({
|
||||||
|
disabled,
|
||||||
|
value: selectedCountry,
|
||||||
|
options: countryList,
|
||||||
|
onChange,
|
||||||
|
}: CountrySelectProps) => {
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="flex gap-1 px-3 focus:z-10"
|
||||||
|
disabled={true}
|
||||||
|
>
|
||||||
|
<FlagComponent
|
||||||
|
country={selectedCountry}
|
||||||
|
countryName={selectedCountry}
|
||||||
|
/>
|
||||||
|
<ChevronsUpDown
|
||||||
|
className={cn(
|
||||||
|
"-mr-2 size-4 opacity-50",
|
||||||
|
disabled ? "hidden" : "opacity-100",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[300px] p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Search country..." />
|
||||||
|
<CommandList>
|
||||||
|
<ScrollArea className="h-72">
|
||||||
|
<CommandEmpty>No country found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{countryList.map(({ value, label }) =>
|
||||||
|
value ? (
|
||||||
|
<CountrySelectOption
|
||||||
|
key={value}
|
||||||
|
country={value}
|
||||||
|
countryName={label}
|
||||||
|
selectedCountry={selectedCountry}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
) : null,
|
||||||
|
)}
|
||||||
|
</CommandGroup>
|
||||||
|
</ScrollArea>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface CountrySelectOptionProps extends RPNInput.FlagProps {
|
||||||
|
selectedCountry: RPNInput.Country;
|
||||||
|
onChange: (country: RPNInput.Country) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CountrySelectOption = ({
|
||||||
|
country,
|
||||||
|
countryName,
|
||||||
|
selectedCountry,
|
||||||
|
onChange,
|
||||||
|
}: CountrySelectOptionProps) => {
|
||||||
|
return (
|
||||||
|
<CommandItem className="gap-2" onSelect={() => onChange(country)}>
|
||||||
|
<FlagComponent country={country} countryName={countryName} />
|
||||||
|
<span className="flex-1 text-sm">{countryName}</span>
|
||||||
|
<span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
|
||||||
|
<CheckIcon
|
||||||
|
className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
|
||||||
|
const Flag = flags[country];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="flex scale-125 h-4 w-6 overflow-hidden rounded-sm cursor-not-allowed">
|
||||||
|
{Flag && <Flag title={countryName} />}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { PhoneInput };
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Popover as PopoverPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Popover = PopoverPrimitive.Root;
|
||||||
|
|
||||||
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||||
|
|
||||||
|
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||||
|
|
||||||
|
const PopoverContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
));
|
||||||
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Progress as ProgressPrimitive } from "radix-ui";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Progress = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||||
|
>(({ className, value, ...props }, ref) => (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative h-1 w-full overflow-hidden rounded-full bg-primary/20",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
className={cn(
|
||||||
|
"h-full w-full flex-1 transition-all",
|
||||||
|
className,
|
||||||
|
(value ?? 0) < 20 ? "bg-red-500" : "bg-sarLinkOrange",
|
||||||
|
)}
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
));
|
||||||
|
Progress.displayName = ProgressPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Progress };
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
|
||||||
|
import { Circle } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const RadioGroup = React.forwardRef<
|
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Root
|
||||||
|
className={cn("grid gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const RadioGroupItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||||
|
<Circle className="h-3.5 w-3.5 fill-primary" />
|
||||||
|
</RadioGroupPrimitive.Indicator>
|
||||||
|
</RadioGroupPrimitive.Item>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem };
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { GripVertical } from "lucide-react";
|
||||||
|
import * as ResizablePrimitive from "react-resizable-panels";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const ResizablePanelGroup = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
||||||
|
<ResizablePrimitive.PanelGroup
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ResizablePanel = ResizablePrimitive.Panel;
|
||||||
|
|
||||||
|
const ResizableHandle = ({
|
||||||
|
withHandle,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||||
|
withHandle?: boolean;
|
||||||
|
}) => (
|
||||||
|
<ResizablePrimitive.PanelResizeHandle
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{withHandle && (
|
||||||
|
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||||
|
<GripVertical className="h-2.5 w-2.5" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResizablePrimitive.PanelResizeHandle>
|
||||||
|
);
|
||||||
|
|
||||||
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn("relative overflow-hidden", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
));
|
||||||
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const ScrollBar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
ref={ref}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none select-none transition-colors",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent p-px",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent p-px",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
));
|
||||||
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar };
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { Search } from "lucide-react";
|
||||||
|
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import {
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarInput,
|
||||||
|
} from "@/components/ui/sidebar";
|
||||||
|
|
||||||
|
export function SearchForm({ ...props }: React.ComponentProps<"form">) {
|
||||||
|
return (
|
||||||
|
<form {...props}>
|
||||||
|
<SidebarGroup className="py-0">
|
||||||
|
<SidebarGroupContent className="relative">
|
||||||
|
<Label htmlFor="search" className="sr-only">
|
||||||
|
Search
|
||||||
|
</Label>
|
||||||
|
<SidebarInput
|
||||||
|
id="search"
|
||||||
|
placeholder="Search the docs..."
|
||||||
|
className="pl-8"
|
||||||
|
/>
|
||||||
|
<Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Select as SelectPrimitive } from "radix-ui";
|
||||||
|
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root;
|
||||||
|
|
||||||
|
const SelectGroup = SelectPrimitive.Group;
|
||||||
|
|
||||||
|
const SelectValue = SelectPrimitive.Value;
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
));
|
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const SelectScrollUpButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUp className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
));
|
||||||
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
||||||
|
|
||||||
|
const SelectScrollDownButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDown className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
));
|
||||||
|
SelectScrollDownButton.displayName =
|
||||||
|
SelectPrimitive.ScrollDownButton.displayName;
|
||||||
|
|
||||||
|
const SelectContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
));
|
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const SelectItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
));
|
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const SelectSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectGroup,
|
||||||
|
SelectValue,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectContent,
|
||||||
|
SelectLabel,
|
||||||
|
SelectItem,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
};
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Separator as SeparatorPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Separator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 bg-border",
|
||||||
|
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Separator };
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
import { Dialog as SheetPrimitive } from "radix-ui";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Sheet = SheetPrimitive.Root;
|
||||||
|
|
||||||
|
const SheetTrigger = SheetPrimitive.Trigger;
|
||||||
|
|
||||||
|
const SheetClose = SheetPrimitive.Close;
|
||||||
|
|
||||||
|
const SheetPortal = SheetPrimitive.Portal;
|
||||||
|
|
||||||
|
const SheetOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const sheetVariants = cva(
|
||||||
|
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-[cubic-bezier(0.17,0.84,0.44,1)] data-[state=closed]:duration-200 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
side: {
|
||||||
|
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||||
|
bottom:
|
||||||
|
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||||
|
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||||
|
right:
|
||||||
|
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
side: "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
interface SheetContentProps
|
||||||
|
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||||
|
VariantProps<typeof sheetVariants> {}
|
||||||
|
|
||||||
|
const SheetContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||||
|
SheetContentProps
|
||||||
|
>(({ side = "right", className, children, ...props }, ref) => (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(sheetVariants({ side }), className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
{children}
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
));
|
||||||
|
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const SheetHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-2 text-center sm:text-left",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
SheetHeader.displayName = "SheetHeader";
|
||||||
|
|
||||||
|
const SheetFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
SheetFooter.displayName = "SheetFooter";
|
||||||
|
|
||||||
|
const SheetTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-lg font-semibold text-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const SheetDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetPortal,
|
||||||
|
SheetOverlay,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
};
|
||||||
@@ -0,0 +1,780 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { PanelLeft } from "lucide-react";
|
||||||
|
import { Slot as SlotPrimitive } from "radix-ui";
|
||||||
|
import * as React from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from "@/components/ui/sheet";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/tooltip";
|
||||||
|
import { useIsMobile } from "@/hooks/use-mobile";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
||||||
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||||
|
const SIDEBAR_WIDTH = "16rem";
|
||||||
|
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
||||||
|
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||||
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||||
|
|
||||||
|
type SidebarContextProps = {
|
||||||
|
state: "expanded" | "collapsed";
|
||||||
|
open: boolean;
|
||||||
|
setOpen: (open: boolean) => void;
|
||||||
|
openMobile: boolean;
|
||||||
|
setOpenMobile: (open: boolean) => void;
|
||||||
|
isMobile: boolean;
|
||||||
|
toggleSidebar: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SidebarContext = React.createContext<SidebarContextProps | null>(null);
|
||||||
|
|
||||||
|
function useSidebar() {
|
||||||
|
const context = React.useContext(SidebarContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useSidebar must be used within a SidebarProvider.");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SidebarProvider = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
defaultOpen = true,
|
||||||
|
open: openProp,
|
||||||
|
onOpenChange: setOpenProp,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
const [openMobile, setOpenMobile] = React.useState(false);
|
||||||
|
|
||||||
|
// This is the internal state of the sidebar.
|
||||||
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
|
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||||
|
const open = openProp ?? _open;
|
||||||
|
const setOpen = React.useCallback(
|
||||||
|
(value: boolean | ((value: boolean) => boolean)) => {
|
||||||
|
const openState = typeof value === "function" ? value(open) : value;
|
||||||
|
if (setOpenProp) {
|
||||||
|
setOpenProp(openState);
|
||||||
|
} else {
|
||||||
|
_setOpen(openState);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This sets the cookie to keep the sidebar state.
|
||||||
|
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
||||||
|
},
|
||||||
|
[setOpenProp, open],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Helper to toggle the sidebar.
|
||||||
|
const toggleSidebar = React.useCallback(() => {
|
||||||
|
return isMobile
|
||||||
|
? setOpenMobile((open) => !open)
|
||||||
|
: setOpen((open) => !open);
|
||||||
|
}, [isMobile, setOpen, setOpenMobile]);
|
||||||
|
|
||||||
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (
|
||||||
|
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||||
|
(event.metaKey || event.ctrlKey)
|
||||||
|
) {
|
||||||
|
event.preventDefault();
|
||||||
|
toggleSidebar();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
|
}, [toggleSidebar]);
|
||||||
|
|
||||||
|
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||||
|
// This makes it easier to style the sidebar with Tailwind classes.
|
||||||
|
const state = open ? "expanded" : "collapsed";
|
||||||
|
|
||||||
|
const contextValue = React.useMemo<SidebarContextProps>(
|
||||||
|
() => ({
|
||||||
|
state,
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
isMobile,
|
||||||
|
openMobile,
|
||||||
|
setOpenMobile,
|
||||||
|
toggleSidebar,
|
||||||
|
}),
|
||||||
|
[
|
||||||
|
state,
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
isMobile,
|
||||||
|
openMobile,
|
||||||
|
setOpenMobile,
|
||||||
|
toggleSidebar,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarContext.Provider value={contextValue}>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH,
|
||||||
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||||
|
...style,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</SidebarContext.Provider>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
SidebarProvider.displayName = "SidebarProvider";
|
||||||
|
|
||||||
|
const Sidebar = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
side?: "left" | "right";
|
||||||
|
variant?: "sidebar" | "floating" | "inset";
|
||||||
|
collapsible?: "offcanvas" | "icon" | "none";
|
||||||
|
}
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
side = "left",
|
||||||
|
variant = "sidebar",
|
||||||
|
collapsible = "offcanvas",
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||||
|
|
||||||
|
if (collapsible === "none") {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||||
|
<SheetContent
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
data-mobile="true"
|
||||||
|
className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
side={side}
|
||||||
|
>
|
||||||
|
<SheetHeader className="sr-only">
|
||||||
|
<SheetTitle>Sidebar</SheetTitle>
|
||||||
|
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="flex h-full w-full flex-col">{children}</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="group peer hidden text-sidebar-foreground md:block"
|
||||||
|
data-state={state}
|
||||||
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||||
|
data-variant={variant}
|
||||||
|
data-side={side}
|
||||||
|
>
|
||||||
|
{/* This is what handles the sidebar gap on desktop */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-150 ease-[cubic-bezier(0.17,0.84,0.44,1)]",
|
||||||
|
"group-data-[collapsible=offcanvas]:w-0",
|
||||||
|
"group-data-[side=right]:rotate-180",
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-150 ease-[cubic-bezier(0.17,0.84,0.44,1)] md:flex",
|
||||||
|
side === "left"
|
||||||
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||||
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||||
|
// Adjust the padding for floating and inset variants.
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Sidebar.displayName = "Sidebar";
|
||||||
|
|
||||||
|
const SidebarTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof Button>,
|
||||||
|
React.ComponentProps<typeof Button>
|
||||||
|
>(({ className, onClick, ...props }, ref) => {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="trigger"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className={cn("h-7 w-7", className)}
|
||||||
|
onClick={(event) => {
|
||||||
|
onClick?.(event);
|
||||||
|
toggleSidebar();
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<PanelLeft />
|
||||||
|
<span className="sr-only">Toggle Sidebar</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarTrigger.displayName = "SidebarTrigger";
|
||||||
|
|
||||||
|
const SidebarRail = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<"button">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="rail"
|
||||||
|
aria-label="Toggle Sidebar"
|
||||||
|
tabIndex={-1}
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
title="Toggle Sidebar"
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-[cubic-bezier(0.17,0.84,0.44,1)] after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
||||||
|
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||||
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||||
|
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
|
||||||
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||||
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarRail.displayName = "SidebarRail";
|
||||||
|
|
||||||
|
const SidebarInset = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"main">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full flex-1 flex-col bg-background",
|
||||||
|
"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarInset.displayName = "SidebarInset";
|
||||||
|
|
||||||
|
const SidebarInput = React.forwardRef<
|
||||||
|
React.ElementRef<typeof Input>,
|
||||||
|
React.ComponentProps<typeof Input>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="input"
|
||||||
|
className={cn(
|
||||||
|
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarInput.displayName = "SidebarInput";
|
||||||
|
|
||||||
|
const SidebarHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="header"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarHeader.displayName = "SidebarHeader";
|
||||||
|
|
||||||
|
const SidebarFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="footer"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarFooter.displayName = "SidebarFooter";
|
||||||
|
|
||||||
|
const SidebarSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof Separator>,
|
||||||
|
React.ComponentProps<typeof Separator>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<Separator
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="separator"
|
||||||
|
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarSeparator.displayName = "SidebarSeparator";
|
||||||
|
|
||||||
|
const SidebarContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="content"
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarContent.displayName = "SidebarContent";
|
||||||
|
|
||||||
|
const SidebarGroup = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="group"
|
||||||
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarGroup.displayName = "SidebarGroup";
|
||||||
|
|
||||||
|
const SidebarGroupLabel = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> & { asChild?: boolean }
|
||||||
|
>(({ className, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "div";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="group-label"
|
||||||
|
className={cn(
|
||||||
|
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-150 ease-[cubic-bezier(0.17,0.84,0.44,1)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
||||||
|
|
||||||
|
const SidebarGroupAction = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<"button"> & { asChild?: boolean }
|
||||||
|
>(({ className, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="group-action"
|
||||||
|
className={cn(
|
||||||
|
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 after:md:hidden",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarGroupAction.displayName = "SidebarGroupAction";
|
||||||
|
|
||||||
|
const SidebarGroupContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="group-content"
|
||||||
|
className={cn("w-full text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SidebarGroupContent.displayName = "SidebarGroupContent";
|
||||||
|
|
||||||
|
const SidebarMenu = React.forwardRef<
|
||||||
|
HTMLUListElement,
|
||||||
|
React.ComponentProps<"ul">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ul
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu"
|
||||||
|
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SidebarMenu.displayName = "SidebarMenu";
|
||||||
|
|
||||||
|
const SidebarMenuItem = React.forwardRef<
|
||||||
|
HTMLLIElement,
|
||||||
|
React.ComponentProps<"li">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<li
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-item"
|
||||||
|
className={cn("group/menu-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SidebarMenuItem.displayName = "SidebarMenuItem";
|
||||||
|
|
||||||
|
const sidebarMenuButtonVariants = cva(
|
||||||
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||||
|
outline:
|
||||||
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-8 text-sm",
|
||||||
|
sm: "h-7 text-xs",
|
||||||
|
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const SidebarMenuButton = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
isActive?: boolean;
|
||||||
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||||
|
} & VariantProps<typeof sidebarMenuButtonVariants>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
asChild = false,
|
||||||
|
isActive = false,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
tooltip,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "button";
|
||||||
|
const { isMobile, state } = useSidebar();
|
||||||
|
|
||||||
|
const button = (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!tooltip) {
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof tooltip === "string") {
|
||||||
|
tooltip = {
|
||||||
|
children: tooltip,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
align="center"
|
||||||
|
hidden={state !== "collapsed" || isMobile}
|
||||||
|
{...tooltip}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
||||||
|
|
||||||
|
const SidebarMenuAction = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
showOnHover?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-action"
|
||||||
|
className={cn(
|
||||||
|
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 after:md:hidden",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
showOnHover &&
|
||||||
|
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarMenuAction.displayName = "SidebarMenuAction";
|
||||||
|
|
||||||
|
const SidebarMenuBadge = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-badge"
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
|
||||||
|
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
||||||
|
|
||||||
|
const SidebarMenuSkeleton = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
showIcon?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, showIcon = false, ...props }, ref) => {
|
||||||
|
// Random width between 50 to 90%.
|
||||||
|
const width = React.useMemo(() => {
|
||||||
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-skeleton"
|
||||||
|
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{showIcon && (
|
||||||
|
<Skeleton
|
||||||
|
className="size-4 rounded-md"
|
||||||
|
data-sidebar="menu-skeleton-icon"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Skeleton
|
||||||
|
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||||
|
data-sidebar="menu-skeleton-text"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--skeleton-width": width,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
||||||
|
|
||||||
|
const SidebarMenuSub = React.forwardRef<
|
||||||
|
HTMLUListElement,
|
||||||
|
React.ComponentProps<"ul">
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ul
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-sub"
|
||||||
|
className={cn(
|
||||||
|
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SidebarMenuSub.displayName = "SidebarMenuSub";
|
||||||
|
|
||||||
|
const SidebarMenuSubItem = React.forwardRef<
|
||||||
|
HTMLLIElement,
|
||||||
|
React.ComponentProps<"li">
|
||||||
|
>(({ ...props }, ref) => <li ref={ref} {...props} />);
|
||||||
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
||||||
|
|
||||||
|
const SidebarMenuSubButton = React.forwardRef<
|
||||||
|
HTMLAnchorElement,
|
||||||
|
React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
size?: "sm" | "md";
|
||||||
|
isActive?: boolean;
|
||||||
|
}
|
||||||
|
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? SlotPrimitive.Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
data-sidebar="menu-sub-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||||
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||||
|
size === "sm" && "text-xs",
|
||||||
|
size === "md" && "text-sm",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupAction,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarInput,
|
||||||
|
SidebarInset,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuAction,
|
||||||
|
SidebarMenuBadge,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuSkeleton,
|
||||||
|
SidebarMenuSub,
|
||||||
|
SidebarMenuSubButton,
|
||||||
|
SidebarMenuSubItem,
|
||||||
|
SidebarProvider,
|
||||||
|
SidebarRail,
|
||||||
|
SidebarSeparator,
|
||||||
|
SidebarTrigger,
|
||||||
|
useSidebar,
|
||||||
|
};
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function Skeleton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton };
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Slider as SliderPrimitive } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Slider = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SliderPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full touch-none select-none items-center",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||||
|
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||||
|
</SliderPrimitive.Track>
|
||||||
|
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||||
|
</SliderPrimitive.Root>
|
||||||
|
));
|
||||||
|
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Slider };
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
import { Toaster as Sonner } from "sonner";
|
||||||
|
|
||||||
|
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast:
|
||||||
|
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||||
|
description: "group-[.toast]:text-muted-foreground",
|
||||||
|
actionButton:
|
||||||
|
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||||
|
cancelButton:
|
||||||
|
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Toaster };
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Switch as SwitchPrimitives } from "radix-ui";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Switch = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SwitchPrimitives.Root
|
||||||
|
className={cn(
|
||||||
|
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
<SwitchPrimitives.Thumb
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitives.Root>
|
||||||
|
));
|
||||||
|
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||||
|
|
||||||
|
export { Switch };
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user