first commit after code setup css is loading as expected
This commit is contained in:
commit
bf4d90a5a2
47
.gitignore
vendored
Normal file
47
.gitignore
vendored
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
build
|
||||||
|
out
|
||||||
|
.next
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.turbo
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
3
Attributions.md
Normal file
3
Attributions.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
|
||||||
|
|
||||||
|
This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Royal Enfield Onboarding</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6787
package-lock.json
generated
Normal file
6787
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
77
package.json
Normal file
77
package.json
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
{
|
||||||
|
"name": "royal-enfield-onboarding-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-accordion": "^1.1.2",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.0.5",
|
||||||
|
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
||||||
|
"@radix-ui/react-avatar": "^1.0.4",
|
||||||
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
|
"@radix-ui/react-collapsible": "^1.0.3",
|
||||||
|
"@radix-ui/react-context-menu": "^2.1.5",
|
||||||
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||||
|
"@radix-ui/react-hover-card": "^1.0.7",
|
||||||
|
"@radix-ui/react-label": "^2.0.2",
|
||||||
|
"@radix-ui/react-menubar": "^1.0.4",
|
||||||
|
"@radix-ui/react-navigation-menu": "^1.1.4",
|
||||||
|
"@radix-ui/react-popover": "^1.0.7",
|
||||||
|
"@radix-ui/react-progress": "^1.0.3",
|
||||||
|
"@radix-ui/react-radio-group": "^1.1.3",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||||
|
"@radix-ui/react-select": "^2.0.0",
|
||||||
|
"@radix-ui/react-separator": "^1.0.3",
|
||||||
|
"@radix-ui/react-slider": "^1.1.2",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@radix-ui/react-switch": "^1.0.3",
|
||||||
|
"@radix-ui/react-tabs": "^1.0.4",
|
||||||
|
"@radix-ui/react-toggle": "^1.0.3",
|
||||||
|
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.1.0",
|
||||||
|
"cmdk": "^1.0.0",
|
||||||
|
"date-fns": "^3.3.1",
|
||||||
|
"embla-carousel-react": "^8.0.0",
|
||||||
|
"framer-motion": "^11.0.8",
|
||||||
|
"input-otp": "^1.2.0",
|
||||||
|
"lucide-react": "^0.344.0",
|
||||||
|
"next-themes": "^0.2.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-day-picker": "^8.10.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.51.0",
|
||||||
|
"react-resizable-panels": "^2.0.12",
|
||||||
|
"react-router-dom": "^6.22.3",
|
||||||
|
"recharts": "^2.12.2",
|
||||||
|
"sonner": "^1.4.3",
|
||||||
|
"tailwind-merge": "^2.2.1",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"vaul": "^0.9.0",
|
||||||
|
"zod": "^3.22.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
|
"@types/node": "^20.11.24",
|
||||||
|
"@types/react": "^18.2.61",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||||
|
"@typescript-eslint/parser": "^7.1.0",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"autoprefixer": "^10.4.23",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^6.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
589
src/App.tsx
Normal file
589
src/App.tsx
Normal file
@ -0,0 +1,589 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { ApplicationFormPage } from './components/public/ApplicationFormPage';
|
||||||
|
import { LoginPage } from './components/auth/LoginPage';
|
||||||
|
import { Sidebar } from './components/layout/Sidebar';
|
||||||
|
import { Header } from './components/layout/Header';
|
||||||
|
import { Dashboard } from './components/dashboard/Dashboard';
|
||||||
|
import { FinanceDashboard } from './components/dashboard/FinanceDashboard';
|
||||||
|
import { DealerDashboard } from './components/dashboard/DealerDashboard';
|
||||||
|
import { ApplicationsPage } from './components/applications/ApplicationsPage';
|
||||||
|
import { AllApplicationsPage } from './components/applications/AllApplicationsPage';
|
||||||
|
import { OpportunityRequestsPage } from './components/applications/OpportunityRequestsPage';
|
||||||
|
import { UnopportunityRequestsPage } from './components/applications/UnopportunityRequestsPage';
|
||||||
|
import { ApplicationDetails } from './components/applications/ApplicationDetails';
|
||||||
|
import { ResignationPage } from './components/applications/ResignationPage';
|
||||||
|
import { TerminationPage } from './components/applications/TerminationPage';
|
||||||
|
import { FnFPage } from './components/applications/FnFPage';
|
||||||
|
import { ResignationDetails } from './components/applications/ResignationDetails';
|
||||||
|
import { TerminationDetails } from './components/applications/TerminationDetails';
|
||||||
|
import { FnFDetails } from './components/applications/FnFDetails';
|
||||||
|
import { FinanceOnboardingPage } from './components/applications/FinanceOnboardingPage';
|
||||||
|
import { FinanceFnFPage } from './components/applications/FinanceFnFPage';
|
||||||
|
import { FinancePaymentDetailsPage } from './components/applications/FinancePaymentDetailsPage';
|
||||||
|
import { FinanceFnFDetailsPage } from './components/applications/FinanceFnFDetailsPage';
|
||||||
|
import { MasterPage } from './components/applications/MasterPage';
|
||||||
|
import { ConstitutionalChangePage } from './components/applications/ConstitutionalChangePage';
|
||||||
|
import { ConstitutionalChangeDetails } from './components/applications/ConstitutionalChangeDetails';
|
||||||
|
import { RelocationRequestPage } from './components/applications/RelocationRequestPage';
|
||||||
|
import { RelocationRequestDetails } from './components/applications/RelocationRequestDetails';
|
||||||
|
import { WorknotePage } from './components/applications/WorknotePage';
|
||||||
|
import { DealerResignationPage } from './components/dealer/DealerResignationPage';
|
||||||
|
import { DealerConstitutionalChangePage } from './components/dealer/DealerConstitutionalChangePage';
|
||||||
|
import { DealerRelocationPage } from './components/dealer/DealerRelocationPage';
|
||||||
|
import { Toaster } from './components/ui/sonner';
|
||||||
|
import { mockUsers, User } from './lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
type View = 'dashboard' | 'applications' | 'all-applications' | 'opportunity-requests' | 'unopportunity-requests' | 'tasks' | 'reports' | 'settings' | 'users' | 'resignation' | 'termination' | 'fnf' | 'finance-onboarding' | 'finance-fnf' | 'master' | 'constitutional-change' | 'relocation-requests' | 'worknote' | 'dealer-resignation' | 'dealer-constitutional' | 'dealer-relocation';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [showAdminLogin, setShowAdminLogin] = useState(false);
|
||||||
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||||
|
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||||
|
const [currentView, setCurrentView] = useState<View>('dashboard');
|
||||||
|
const [selectedApplicationId, setSelectedApplicationId] = useState<string | null>(null);
|
||||||
|
const [selectedResignationId, setSelectedResignationId] = useState<string | null>(null);
|
||||||
|
const [selectedTerminationId, setSelectedTerminationId] = useState<string | null>(null);
|
||||||
|
const [selectedFnFId, setSelectedFnFId] = useState<string | null>(null);
|
||||||
|
const [selectedPaymentId, setSelectedPaymentId] = useState<string | null>(null);
|
||||||
|
const [selectedFinanceFnFId, setSelectedFinanceFnFId] = useState<string | null>(null);
|
||||||
|
const [selectedConstitutionalChangeId, setSelectedConstitutionalChangeId] = useState<string | null>(null);
|
||||||
|
const [selectedRelocationRequestId, setSelectedRelocationRequestId] = useState<string | null>(null);
|
||||||
|
const [applicationFilter, setApplicationFilter] = useState<string>('all');
|
||||||
|
const [worknoteContext, setWorknoteContext] = useState<{
|
||||||
|
requestId: string;
|
||||||
|
requestType: 'relocation' | 'constitutional-change' | 'fnf' | 'resignation' | 'termination';
|
||||||
|
requestTitle: string;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const handleLogin = (email: string, password: string) => {
|
||||||
|
// Find user in mock data
|
||||||
|
const user = mockUsers.find(u => u.email === email && u.password === password);
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
setCurrentUser(user);
|
||||||
|
setIsAuthenticated(true);
|
||||||
|
toast.success(`Welcome back, ${user.name}! (${user.role})`);
|
||||||
|
} else {
|
||||||
|
toast.error('Invalid credentials');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
setIsAuthenticated(false);
|
||||||
|
setCurrentUser(null);
|
||||||
|
setCurrentView('dashboard');
|
||||||
|
setSelectedApplicationId(null);
|
||||||
|
setShowAdminLogin(false);
|
||||||
|
toast.info('Logged out successfully');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShowAdminLogin = () => {
|
||||||
|
setShowAdminLogin(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNavigate = (view: string, filter?: string) => {
|
||||||
|
setCurrentView(view as View);
|
||||||
|
setSelectedApplicationId(null);
|
||||||
|
setSelectedResignationId(null);
|
||||||
|
setSelectedTerminationId(null);
|
||||||
|
setSelectedFnFId(null);
|
||||||
|
setSelectedPaymentId(null);
|
||||||
|
setSelectedFinanceFnFId(null);
|
||||||
|
if (filter) {
|
||||||
|
setApplicationFilter(filter);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewDetails = (id: string) => {
|
||||||
|
setSelectedApplicationId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewResignationDetails = (id: string) => {
|
||||||
|
setSelectedResignationId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewTerminationDetails = (id: string) => {
|
||||||
|
setSelectedTerminationId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewFnFDetails = (id: string) => {
|
||||||
|
setSelectedFnFId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewPaymentDetails = (id: string) => {
|
||||||
|
setSelectedPaymentId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewFinanceFnFDetails = (id: string) => {
|
||||||
|
setSelectedFinanceFnFId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewConstitutionalChangeDetails = (id: string) => {
|
||||||
|
setSelectedConstitutionalChangeId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewRelocationRequestDetails = (id: string) => {
|
||||||
|
setSelectedRelocationRequestId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromDetails = () => {
|
||||||
|
setSelectedApplicationId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromPaymentDetails = () => {
|
||||||
|
setSelectedPaymentId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromFinanceFnFDetails = () => {
|
||||||
|
setSelectedFinanceFnFId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromResignation = () => {
|
||||||
|
setSelectedResignationId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromTermination = () => {
|
||||||
|
setSelectedTerminationId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromFnF = () => {
|
||||||
|
setSelectedFnFId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromConstitutionalChange = () => {
|
||||||
|
setSelectedConstitutionalChangeId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromRelocationRequest = () => {
|
||||||
|
setSelectedRelocationRequestId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenWorknote = (requestId: string, requestType: 'relocation' | 'constitutional-change' | 'fnf' | 'resignation' | 'termination', requestTitle: string) => {
|
||||||
|
setWorknoteContext({ requestId, requestType, requestTitle });
|
||||||
|
setCurrentView('worknote');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackFromWorknote = () => {
|
||||||
|
setWorknoteContext(null);
|
||||||
|
// Return to the previous view based on request type
|
||||||
|
if (worknoteContext) {
|
||||||
|
if (worknoteContext.requestType === 'relocation') {
|
||||||
|
setSelectedRelocationRequestId(worknoteContext.requestId);
|
||||||
|
setCurrentView('relocation-requests');
|
||||||
|
} else if (worknoteContext.requestType === 'constitutional-change') {
|
||||||
|
setSelectedConstitutionalChangeId(worknoteContext.requestId);
|
||||||
|
setCurrentView('constitutional-change');
|
||||||
|
}
|
||||||
|
// Add other request types as needed
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPageTitle = () => {
|
||||||
|
if (selectedApplicationId) {
|
||||||
|
return 'Application Details';
|
||||||
|
}
|
||||||
|
if (selectedResignationId) {
|
||||||
|
return 'Resignation Details';
|
||||||
|
}
|
||||||
|
if (selectedTerminationId) {
|
||||||
|
return 'Termination Details';
|
||||||
|
}
|
||||||
|
if (selectedFnFId) {
|
||||||
|
return 'F&F Case Details';
|
||||||
|
}
|
||||||
|
if (selectedConstitutionalChangeId) {
|
||||||
|
return 'Constitutional Change Details';
|
||||||
|
}
|
||||||
|
if (selectedRelocationRequestId) {
|
||||||
|
return 'Relocation Request Details';
|
||||||
|
}
|
||||||
|
switch (currentView) {
|
||||||
|
case 'dashboard':
|
||||||
|
return 'Dashboard';
|
||||||
|
case 'all-applications':
|
||||||
|
return 'All Applications';
|
||||||
|
case 'opportunity-requests':
|
||||||
|
return 'Opportunity Requests';
|
||||||
|
case 'unopportunity-requests':
|
||||||
|
return 'Unopportunity Requests';
|
||||||
|
case 'applications':
|
||||||
|
return 'Dealership Requests';
|
||||||
|
case 'tasks':
|
||||||
|
return 'My Tasks';
|
||||||
|
case 'reports':
|
||||||
|
return 'Reports & Analytics';
|
||||||
|
case 'settings':
|
||||||
|
return 'Settings';
|
||||||
|
case 'users':
|
||||||
|
return 'User Management';
|
||||||
|
case 'resignation':
|
||||||
|
return 'Resignation Management';
|
||||||
|
case 'termination':
|
||||||
|
return 'Termination Management';
|
||||||
|
case 'fnf':
|
||||||
|
return 'Full & Final Settlement';
|
||||||
|
case 'finance-onboarding':
|
||||||
|
return 'Payment Verification';
|
||||||
|
case 'finance-fnf':
|
||||||
|
return 'F&F Financial Settlement';
|
||||||
|
case 'master':
|
||||||
|
return 'Master Configuration';
|
||||||
|
case 'constitutional-change':
|
||||||
|
return 'Constitutional Change';
|
||||||
|
case 'relocation-requests':
|
||||||
|
return 'Relocation Requests';
|
||||||
|
case 'worknote':
|
||||||
|
return 'Worknote Management';
|
||||||
|
case 'dealer-resignation':
|
||||||
|
return 'Dealer Resignation Management';
|
||||||
|
case 'dealer-constitutional':
|
||||||
|
return 'Dealer Constitutional Change';
|
||||||
|
case 'dealer-relocation':
|
||||||
|
return 'Dealer Relocation Requests';
|
||||||
|
default:
|
||||||
|
return 'Dashboard';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show public application form if not authenticated and not trying to log in as admin
|
||||||
|
if (!isAuthenticated && !showAdminLogin) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ApplicationFormPage onAdminLogin={handleShowAdminLogin} />
|
||||||
|
<Toaster />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show admin login page if user clicked admin login but hasn't authenticated yet
|
||||||
|
if (!isAuthenticated && showAdminLogin) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<LoginPage onLogin={handleLogin} />
|
||||||
|
<Toaster />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-slate-50">
|
||||||
|
<Sidebar
|
||||||
|
activeView={currentView}
|
||||||
|
onNavigate={handleNavigate}
|
||||||
|
onLogout={handleLogout}
|
||||||
|
currentUser={currentUser}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
<Header
|
||||||
|
title={getPageTitle()}
|
||||||
|
currentUser={currentUser}
|
||||||
|
onRefresh={() => window.location.reload()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main className={`flex-1 overflow-y-auto ${currentView === 'worknote' ? '' : 'p-6'}`}>
|
||||||
|
{currentView === 'worknote' && worknoteContext ? (
|
||||||
|
<WorknotePage
|
||||||
|
requestId={worknoteContext.requestId}
|
||||||
|
requestType={worknoteContext.requestType}
|
||||||
|
requestTitle={worknoteContext.requestTitle}
|
||||||
|
onBack={handleBackFromWorknote}
|
||||||
|
currentUser={currentUser}
|
||||||
|
/>
|
||||||
|
) : selectedPaymentId ? (
|
||||||
|
<FinancePaymentDetailsPage
|
||||||
|
applicationId={selectedPaymentId}
|
||||||
|
onBack={handleBackFromPaymentDetails}
|
||||||
|
/>
|
||||||
|
) : selectedFinanceFnFId ? (
|
||||||
|
<FinanceFnFDetailsPage
|
||||||
|
fnfId={selectedFinanceFnFId}
|
||||||
|
onBack={handleBackFromFinanceFnFDetails}
|
||||||
|
/>
|
||||||
|
) : selectedApplicationId ? (
|
||||||
|
<ApplicationDetails
|
||||||
|
applicationId={selectedApplicationId}
|
||||||
|
onBack={handleBackFromDetails}
|
||||||
|
/>
|
||||||
|
) : selectedResignationId ? (
|
||||||
|
<ResignationDetails
|
||||||
|
resignationId={selectedResignationId}
|
||||||
|
onBack={handleBackFromResignation}
|
||||||
|
currentUser={currentUser}
|
||||||
|
/>
|
||||||
|
) : selectedTerminationId ? (
|
||||||
|
<TerminationDetails
|
||||||
|
terminationId={selectedTerminationId}
|
||||||
|
onBack={handleBackFromTermination}
|
||||||
|
currentUser={currentUser}
|
||||||
|
/>
|
||||||
|
) : selectedFnFId ? (
|
||||||
|
<FnFDetails
|
||||||
|
fnfId={selectedFnFId}
|
||||||
|
onBack={handleBackFromFnF}
|
||||||
|
currentUser={currentUser}
|
||||||
|
/>
|
||||||
|
) : selectedConstitutionalChangeId ? (
|
||||||
|
<ConstitutionalChangeDetails
|
||||||
|
requestId={selectedConstitutionalChangeId}
|
||||||
|
onBack={handleBackFromConstitutionalChange}
|
||||||
|
currentUser={currentUser}
|
||||||
|
onOpenWorknote={handleOpenWorknote}
|
||||||
|
/>
|
||||||
|
) : selectedRelocationRequestId ? (
|
||||||
|
<RelocationRequestDetails
|
||||||
|
requestId={selectedRelocationRequestId}
|
||||||
|
onBack={handleBackFromRelocationRequest}
|
||||||
|
currentUser={currentUser}
|
||||||
|
onOpenWorknote={handleOpenWorknote}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{currentView === 'dashboard' && (
|
||||||
|
currentUser?.role === 'Finance Admin' || currentUser?.role === 'Finance' ? (
|
||||||
|
<FinanceDashboard
|
||||||
|
currentUser={currentUser}
|
||||||
|
onNavigate={handleNavigate}
|
||||||
|
onViewPaymentDetails={handleViewPaymentDetails}
|
||||||
|
onViewFnFDetails={handleViewFinanceFnFDetails}
|
||||||
|
/>
|
||||||
|
) : currentUser?.role === 'Dealer' ? (
|
||||||
|
<DealerDashboard
|
||||||
|
currentUser={currentUser}
|
||||||
|
onNavigate={handleNavigate}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Dashboard onNavigate={handleNavigate} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'all-applications' && (
|
||||||
|
currentUser?.role === 'DD' ? (
|
||||||
|
<AllApplicationsPage
|
||||||
|
onViewDetails={handleViewDetails}
|
||||||
|
initialFilter={applicationFilter}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to DD users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'opportunity-requests' && (
|
||||||
|
currentUser?.role === 'DD Lead' ? (
|
||||||
|
<OpportunityRequestsPage
|
||||||
|
onViewDetails={handleViewDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to DD Lead users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'unopportunity-requests' && (
|
||||||
|
currentUser?.role === 'DD Lead' ? (
|
||||||
|
<UnopportunityRequestsPage
|
||||||
|
onViewDetails={handleViewDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to DD Lead users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'applications' && (
|
||||||
|
<ApplicationsPage
|
||||||
|
onViewDetails={handleViewDetails}
|
||||||
|
initialFilter={applicationFilter}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'tasks' && (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">My Tasks</h2>
|
||||||
|
<p className="text-slate-600">Task management interface would be displayed here</p>
|
||||||
|
<p className="text-slate-500 mt-4">Shows applications assigned to the current user</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'reports' && (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Reports & Analytics</h2>
|
||||||
|
<p className="text-slate-600">Advanced reporting and analytics dashboard</p>
|
||||||
|
<p className="text-slate-500 mt-4">Charts, export capabilities, and custom filters</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'settings' && (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8">
|
||||||
|
<h2 className="text-slate-900 mb-4">Settings</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-slate-900 mb-2">Profile Settings</h3>
|
||||||
|
<p className="text-slate-600">Update your profile information and preferences</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-slate-900 mb-2">Notification Preferences</h3>
|
||||||
|
<p className="text-slate-600">Configure email and system notifications</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-slate-900 mb-2">Security</h3>
|
||||||
|
<p className="text-slate-600">Change password and manage security settings</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'users' && (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8">
|
||||||
|
<h2 className="text-slate-900 mb-4">User Management</h2>
|
||||||
|
<p className="text-slate-600 mb-4">Manage system users and their roles</p>
|
||||||
|
<div className="space-y-2 text-slate-600">
|
||||||
|
<p>• Add/Edit/Remove users</p>
|
||||||
|
<p>• Assign roles and permissions</p>
|
||||||
|
<p>• View user activity logs</p>
|
||||||
|
<p>• Manage access controls</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'resignation' && (
|
||||||
|
<ResignationPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewResignationDetails}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'termination' && (
|
||||||
|
<TerminationPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewTerminationDetails}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'fnf' && (
|
||||||
|
<FnFPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewFnFDetails}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'finance-onboarding' && (
|
||||||
|
currentUser?.role === 'Finance' ? (
|
||||||
|
<FinanceOnboardingPage onViewPaymentDetails={handleViewPaymentDetails} />
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Finance users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'finance-fnf' && (
|
||||||
|
currentUser?.role === 'Finance' ? (
|
||||||
|
<FinanceFnFPage onViewFnFDetails={handleViewFinanceFnFDetails} />
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Finance users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'master' && (
|
||||||
|
currentUser?.role === 'Super Admin' || currentUser?.role === 'DD Admin' || currentUser?.role === 'DD Lead' ? (
|
||||||
|
<MasterPage />
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Super Admin, DD Admin, and DD Lead users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'constitutional-change' && (
|
||||||
|
currentUser?.role === 'Super Admin' || currentUser?.role === 'DD Admin' || currentUser?.role === 'DD Lead' ? (
|
||||||
|
<ConstitutionalChangePage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewConstitutionalChangeDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Super Admin, DD Admin, and DD Lead users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'relocation-requests' && (
|
||||||
|
currentUser?.role === 'Super Admin' || currentUser?.role === 'DD Admin' || currentUser?.role === 'DD Lead' ? (
|
||||||
|
<RelocationRequestPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewRelocationRequestDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Super Admin, DD Admin, and DD Lead users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Dealer-specific views */}
|
||||||
|
{currentView === 'dealer-resignation' && (
|
||||||
|
currentUser?.role === 'Dealer' ? (
|
||||||
|
<DealerResignationPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewResignationDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Dealer users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'dealer-constitutional' && (
|
||||||
|
currentUser?.role === 'Dealer' ? (
|
||||||
|
<DealerConstitutionalChangePage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewConstitutionalChangeDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Dealer users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentView === 'dealer-relocation' && (
|
||||||
|
currentUser?.role === 'Dealer' ? (
|
||||||
|
<DealerRelocationPage
|
||||||
|
currentUser={currentUser}
|
||||||
|
onViewDetails={handleViewRelocationRequestDetails}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Access Denied</h2>
|
||||||
|
<p className="text-slate-600">This page is only accessible to Dealer users.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Toaster />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
427
src/components/applications/AllApplicationsPage.tsx
Normal file
427
src/components/applications/AllApplicationsPage.tsx
Normal file
@ -0,0 +1,427 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { ApplicationCard } from './ApplicationCard';
|
||||||
|
import { mockApplications, locations, states, ApplicationStatus } from '../../lib/mock-data';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '../ui/select';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
Download,
|
||||||
|
Grid3x3,
|
||||||
|
List,
|
||||||
|
Mail,
|
||||||
|
CheckCircle,
|
||||||
|
AlertCircle
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Checkbox } from '../ui/checkbox';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface AllApplicationsPageProps {
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
initialFilter?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AllApplicationsPage({ onViewDetails, initialFilter = 'all' }: AllApplicationsPageProps) {
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid');
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>(initialFilter);
|
||||||
|
const [locationFilter, setLocationFilter] = useState<string>('all');
|
||||||
|
const [stateFilter, setStateFilter] = useState<string>('all');
|
||||||
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||||
|
const [showShortlistModal, setShowShortlistModal] = useState(false);
|
||||||
|
const [shortlistRemark, setShortlistRemark] = useState('');
|
||||||
|
const [applicationsData, setApplicationsData] = useState(mockApplications);
|
||||||
|
|
||||||
|
// Filter to show ONLY applications that have NOT been shortlisted yet
|
||||||
|
const filteredApplications = applicationsData.filter((app) => {
|
||||||
|
// IMPORTANT: Only show non-shortlisted applications
|
||||||
|
const isNotShortlisted = !app.isShortlisted;
|
||||||
|
|
||||||
|
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.registrationNumber.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
const matchesStatus = statusFilter === 'all' || app.status === statusFilter;
|
||||||
|
const matchesLocation = locationFilter === 'all' || app.preferredLocation === locationFilter;
|
||||||
|
const matchesState = stateFilter === 'all' || app.state === stateFilter;
|
||||||
|
|
||||||
|
return isNotShortlisted && matchesSearch && matchesStatus && matchesLocation && matchesState;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSelectAll = (checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds(filteredApplications.map(app => app.id));
|
||||||
|
} else {
|
||||||
|
setSelectedIds([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectOne = (id: string, checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds([...selectedIds, id]);
|
||||||
|
} else {
|
||||||
|
setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShortlist = () => {
|
||||||
|
if (selectedIds.length === 0) {
|
||||||
|
toast.error('Please select at least one application to shortlist');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setShowShortlistModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmShortlist = () => {
|
||||||
|
// Update applications to mark them as shortlisted
|
||||||
|
const updatedApplications = applicationsData.map(app => {
|
||||||
|
if (selectedIds.includes(app.id)) {
|
||||||
|
return {
|
||||||
|
...app,
|
||||||
|
isShortlisted: true,
|
||||||
|
status: app.status === 'Submitted' || app.status === 'Questionnaire Completed'
|
||||||
|
? 'Shortlisted' as ApplicationStatus
|
||||||
|
: app.status
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return app;
|
||||||
|
});
|
||||||
|
|
||||||
|
setApplicationsData(updatedApplications);
|
||||||
|
setSelectedIds([]);
|
||||||
|
setShowShortlistModal(false);
|
||||||
|
setShortlistRemark('');
|
||||||
|
|
||||||
|
toast.success(`${selectedIds.length} application(s) shortlisted successfully!`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkReminders = () => {
|
||||||
|
toast.success(`Reminder emails sent to ${selectedIds.length} applicant(s)`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// For DD's All Applications page, only show initial statuses
|
||||||
|
const statusOptions: ApplicationStatus[] = [
|
||||||
|
'Submitted',
|
||||||
|
'Questionnaire Pending',
|
||||||
|
'Questionnaire Completed'
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: ApplicationStatus) => {
|
||||||
|
const colors: Record<ApplicationStatus, string> = {
|
||||||
|
'Submitted': 'bg-blue-100 text-blue-800',
|
||||||
|
'Questionnaire Pending': 'bg-yellow-100 text-yellow-800',
|
||||||
|
'Questionnaire Completed': 'bg-cyan-100 text-cyan-800',
|
||||||
|
'Shortlisted': 'bg-purple-100 text-purple-800',
|
||||||
|
'Level 1 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'Level 1 Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Level 2 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'Level 2 Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Level 2 Recommended': 'bg-teal-100 text-teal-800',
|
||||||
|
'Level 3 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'FDD Verification': 'bg-indigo-100 text-indigo-800',
|
||||||
|
'Payment Pending': 'bg-amber-100 text-amber-800',
|
||||||
|
'LOI Issued': 'bg-sky-100 text-sky-800',
|
||||||
|
'Dealer Code Generation': 'bg-purple-100 text-purple-800',
|
||||||
|
'Architecture Team Assigned': 'bg-blue-100 text-blue-800',
|
||||||
|
'Architecture Document Upload': 'bg-blue-100 text-blue-800',
|
||||||
|
'Architecture Team Completion': 'bg-blue-100 text-blue-800',
|
||||||
|
'Statutory GST': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory PAN': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Nodal': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Check': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Partnership': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Firm Reg': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Virtual Code': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Domain': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory MSD': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory LOI Ack': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'EOR In Progress': 'bg-violet-100 text-violet-800',
|
||||||
|
'LOA Pending': 'bg-pink-100 text-pink-800',
|
||||||
|
'Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Rejected': 'bg-red-100 text-red-800',
|
||||||
|
'Disqualified': 'bg-gray-100 text-gray-800'
|
||||||
|
};
|
||||||
|
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Info Banner */}
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<h3 className="text-amber-900 mb-1">DD Workflow - Initial Application Review</h3>
|
||||||
|
<p className="text-amber-800">
|
||||||
|
This page shows <strong>only applications that haven't been shortlisted yet</strong>. Review and select promising candidates using the <strong>Shortlist</strong> button.
|
||||||
|
Once shortlisted, applications will be removed from here and moved to the <strong>Dealership Requests</strong> page for further processing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header with Filters */}
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Search and Primary Filters */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name or registration number..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Statuses</SelectItem>
|
||||||
|
{statusOptions.map((status) => (
|
||||||
|
<SelectItem key={status} value={status}>{status}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={stateFilter} onValueChange={setStateFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by state" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All States</SelectItem>
|
||||||
|
{states.map((state) => (
|
||||||
|
<SelectItem key={state} value={state}>{state}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by location" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Locations</SelectItem>
|
||||||
|
{locations.map((location) => (
|
||||||
|
<SelectItem key={location} value={location}>{location}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'grid' ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('grid')}
|
||||||
|
className={viewMode === 'grid' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
<Grid3x3 className="w-4 h-4 mr-2" />
|
||||||
|
Grid
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'table' ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('table')}
|
||||||
|
className={viewMode === 'table' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
<List className="w-4 h-4 mr-2" />
|
||||||
|
Table
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Export
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{selectedIds.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBulkReminders}
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4 mr-2" />
|
||||||
|
Send Reminders ({selectedIds.length})
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleShortlist}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Shortlist ({selectedIds.length})
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ml-auto">
|
||||||
|
<Badge variant="outline" className="text-slate-600">
|
||||||
|
{filteredApplications.length} pending shortlisting
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Applications Grid/Table */}
|
||||||
|
{viewMode === 'grid' ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<div key={app.id} className="relative">
|
||||||
|
<div className="absolute top-4 left-4 z-10">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(app.id)}
|
||||||
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
||||||
|
className="bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{app.isShortlisted && (
|
||||||
|
<div className="absolute top-4 right-4 z-10">
|
||||||
|
<Badge className="bg-green-600">Shortlisted</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<ApplicationCard
|
||||||
|
application={app}
|
||||||
|
onViewDetails={onViewDetails}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-12">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.length === filteredApplications.length && filteredApplications.length > 0}
|
||||||
|
onCheckedChange={handleSelectAll}
|
||||||
|
/>
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>Registration</TableHead>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Location</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Shortlisted</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Submitted</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<TableRow
|
||||||
|
key={app.id}
|
||||||
|
className="cursor-pointer hover:bg-slate-50"
|
||||||
|
onClick={() => onViewDetails(app.id)}
|
||||||
|
>
|
||||||
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(app.id)}
|
||||||
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{app.registrationNumber}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{app.name}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-600">{app.preferredLocation}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(app.status)}>
|
||||||
|
{app.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{app.isShortlisted ? (
|
||||||
|
<Badge className="bg-green-600">Yes</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline">No</Badge>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Progress value={app.progress} className="w-20" />
|
||||||
|
<span className="text-slate-600">{app.progress}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-600">{app.submissionDate}</span>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shortlist Modal */}
|
||||||
|
<Dialog open={showShortlistModal} onOpenChange={setShowShortlistModal}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Shortlist Applications</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
You are about to shortlist {selectedIds.length} application(s). These applications will be moved to the Dealership Requests page.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Shortlisting Remark (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Enter reason for shortlisting these applications..."
|
||||||
|
value={shortlistRemark}
|
||||||
|
onChange={(e) => setShortlistRemark(e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => setShowShortlistModal(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="flex-1 bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={confirmShortlist}
|
||||||
|
>
|
||||||
|
Confirm Shortlist
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
139
src/components/applications/ApplicationCard.tsx
Normal file
139
src/components/applications/ApplicationCard.tsx
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { Application } from '../../lib/mock-data';
|
||||||
|
import { MapPin, Phone, Mail, Award, Calendar, Building } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ApplicationCardProps {
|
||||||
|
application: Application;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ApplicationCard({ application, onViewDetails }: ApplicationCardProps) {
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
'Submitted': 'bg-slate-500',
|
||||||
|
'Questionnaire Pending': 'bg-orange-500',
|
||||||
|
'Questionnaire Completed': 'bg-blue-500',
|
||||||
|
'Shortlisted': 'bg-cyan-500',
|
||||||
|
'Level 1 Pending': 'bg-amber-500',
|
||||||
|
'Level 1 Approved': 'bg-green-500',
|
||||||
|
'Level 2 Pending': 'bg-purple-500',
|
||||||
|
'Level 2 Approved': 'bg-green-600',
|
||||||
|
'Level 2 Recommended': 'bg-teal-500',
|
||||||
|
'Level 3 Pending': 'bg-indigo-500',
|
||||||
|
'FDD Verification': 'bg-violet-500',
|
||||||
|
'Payment Pending': 'bg-yellow-500',
|
||||||
|
'LOI Issued': 'bg-lime-500',
|
||||||
|
'Dealer Code Generation': 'bg-fuchsia-500',
|
||||||
|
'Architecture Team Assigned': 'bg-blue-500',
|
||||||
|
'Architecture Document Upload': 'bg-blue-500',
|
||||||
|
'Architecture Team Completion': 'bg-blue-500',
|
||||||
|
'Statutory GST': 'bg-emerald-500',
|
||||||
|
'Statutory PAN': 'bg-emerald-500',
|
||||||
|
'Statutory Nodal': 'bg-emerald-500',
|
||||||
|
'Statutory Check': 'bg-emerald-500',
|
||||||
|
'Statutory Partnership': 'bg-emerald-500',
|
||||||
|
'Statutory Firm Reg': 'bg-emerald-500',
|
||||||
|
'Statutory Virtual Code': 'bg-emerald-500',
|
||||||
|
'Statutory Domain': 'bg-emerald-500',
|
||||||
|
'Statutory MSD': 'bg-emerald-500',
|
||||||
|
'Statutory LOI Ack': 'bg-emerald-500',
|
||||||
|
'EOR In Progress': 'bg-sky-500',
|
||||||
|
'LOA Pending': 'bg-emerald-500',
|
||||||
|
'Approved': 'bg-green-700',
|
||||||
|
'Rejected': 'bg-red-500',
|
||||||
|
'Disqualified': 'bg-red-700'
|
||||||
|
};
|
||||||
|
return statusColors[status] || 'bg-slate-500';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-6 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<h3 className="text-slate-900">{application.name}</h3>
|
||||||
|
{application.tags?.map((tag) => (
|
||||||
|
<Badge
|
||||||
|
key={tag}
|
||||||
|
variant="outline"
|
||||||
|
className={tag === 'Approved' ? 'border-green-500 text-green-700' : 'border-teal-500 text-teal-700'}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600">{application.registrationNumber}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(application.status)}>
|
||||||
|
{application.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-4">
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
<span>{application.preferredLocation}</span>
|
||||||
|
{application.rank && application.totalApplicantsAtLocation && (
|
||||||
|
<Badge variant="outline">
|
||||||
|
Rank {application.rank}/{application.totalApplicantsAtLocation}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-2 text-slate-600">
|
||||||
|
<Building className="w-4 h-4 mt-0.5" />
|
||||||
|
<span className="text-sm">{application.businessAddress}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<Mail className="w-4 h-4" />
|
||||||
|
<span>{application.email}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<Phone className="w-4 h-4" />
|
||||||
|
<span>{application.phone}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{application.questionnaireMarks !== undefined && (
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<Award className="w-4 h-4" />
|
||||||
|
<span>Score: {application.questionnaireMarks}/100</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>Submitted: {new Date(application.submissionDate).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-slate-600">Progress</span>
|
||||||
|
<span className="text-slate-900">{application.progress}%</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={application.progress} className="h-2" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Deadline Warning */}
|
||||||
|
{application.deadline && application.status === 'Questionnaire Pending' && (
|
||||||
|
<div className="mb-4 p-3 bg-orange-50 border border-orange-200 rounded-md">
|
||||||
|
<p className="text-orange-800">
|
||||||
|
Deadline: {new Date(application.deadline).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={() => onViewDetails(application.id)}
|
||||||
|
className="w-full bg-amber-600 hover:bg-amber-700"
|
||||||
|
>
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1997
src/components/applications/ApplicationDetails.tsx
Normal file
1997
src/components/applications/ApplicationDetails.tsx
Normal file
File diff suppressed because it is too large
Load Diff
338
src/components/applications/ApplicationsPage.tsx
Normal file
338
src/components/applications/ApplicationsPage.tsx
Normal file
@ -0,0 +1,338 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { mockApplications, locations, ApplicationStatus } from '../../lib/mock-data';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '../ui/select';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
Download,
|
||||||
|
Mail,
|
||||||
|
Plus
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Checkbox } from '../ui/checkbox';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
|
||||||
|
interface ApplicationsPageProps {
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
initialFilter?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ApplicationsPage({ onViewDetails, initialFilter }: ApplicationsPageProps) {
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [locationFilter, setLocationFilter] = useState<string>('all');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>(initialFilter || 'all');
|
||||||
|
|
||||||
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||||
|
const [sortBy, setSortBy] = useState<'date'>('date');
|
||||||
|
const [showNewApplicationModal, setShowNewApplicationModal] = useState(false);
|
||||||
|
|
||||||
|
// Filter and sort applications - ONLY show shortlisted applications
|
||||||
|
// Exclude specific applications (APP-005, APP-006, APP-007, APP-008) from Dealership Requests page
|
||||||
|
const excludedApplicationIds = ['5', '6', '7', '8'];
|
||||||
|
|
||||||
|
const filteredApplications = mockApplications
|
||||||
|
.filter((app) => {
|
||||||
|
const matchesSearch =
|
||||||
|
app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.registrationNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.email.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
|
||||||
|
const matchesLocation = locationFilter === 'all' || app.preferredLocation === locationFilter;
|
||||||
|
const matchesStatus = statusFilter === 'all' || app.status === statusFilter;
|
||||||
|
const isShortlisted = app.isShortlisted === true; // Only show shortlisted applications
|
||||||
|
const notExcluded = !excludedApplicationIds.includes(app.id); // Exclude APP-005, 006, 007, 008
|
||||||
|
|
||||||
|
return matchesSearch && matchesLocation && matchesStatus && isShortlisted && notExcluded;
|
||||||
|
})
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (sortBy === 'date') {
|
||||||
|
return new Date(b.submissionDate).getTime() - new Date(a.submissionDate).getTime();
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleSelection = (id: string) => {
|
||||||
|
setSelectedIds(prev =>
|
||||||
|
prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSelectAll = () => {
|
||||||
|
if (selectedIds.length === filteredApplications.length) {
|
||||||
|
setSelectedIds([]);
|
||||||
|
} else {
|
||||||
|
setSelectedIds(filteredApplications.map(app => app.id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkReminders = () => {
|
||||||
|
alert(`Sending reminders to ${selectedIds.length} applicants`);
|
||||||
|
setSelectedIds([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExport = () => {
|
||||||
|
alert('Exporting applications to CSV...');
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
'Submitted': 'bg-slate-500',
|
||||||
|
'Questionnaire Pending': 'bg-orange-500',
|
||||||
|
'Questionnaire Completed': 'bg-blue-500',
|
||||||
|
'Shortlisted': 'bg-cyan-500',
|
||||||
|
'Level 1 Pending': 'bg-amber-500',
|
||||||
|
'Level 1 Approved': 'bg-green-500',
|
||||||
|
'Level 2 Pending': 'bg-purple-500',
|
||||||
|
'Level 2 Approved': 'bg-green-600',
|
||||||
|
'Level 2 Recommended': 'bg-teal-500',
|
||||||
|
'Level 3 Pending': 'bg-indigo-500',
|
||||||
|
'FDD Verification': 'bg-violet-500',
|
||||||
|
'Payment Pending': 'bg-yellow-500',
|
||||||
|
'LOI Issued': 'bg-lime-500',
|
||||||
|
'Dealer Code Generation': 'bg-fuchsia-500',
|
||||||
|
'Architecture Team Assigned': 'bg-blue-500',
|
||||||
|
'Architecture Document Upload': 'bg-blue-500',
|
||||||
|
'Architecture Team Completion': 'bg-blue-500',
|
||||||
|
'Statutory GST': 'bg-emerald-500',
|
||||||
|
'Statutory PAN': 'bg-emerald-500',
|
||||||
|
'Statutory Nodal': 'bg-emerald-500',
|
||||||
|
'Statutory Check': 'bg-emerald-500',
|
||||||
|
'Statutory Partnership': 'bg-emerald-500',
|
||||||
|
'Statutory Firm Reg': 'bg-emerald-500',
|
||||||
|
'Statutory Virtual Code': 'bg-emerald-500',
|
||||||
|
'Statutory Domain': 'bg-emerald-500',
|
||||||
|
'Statutory MSD': 'bg-emerald-500',
|
||||||
|
'Statutory LOI Ack': 'bg-emerald-500',
|
||||||
|
'EOR In Progress': 'bg-sky-500',
|
||||||
|
'LOA Pending': 'bg-emerald-500',
|
||||||
|
'Approved': 'bg-green-700',
|
||||||
|
'Rejected': 'bg-red-500',
|
||||||
|
'Disqualified': 'bg-red-700'
|
||||||
|
};
|
||||||
|
return statusColors[status] || 'bg-slate-500';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Info Banner - Only visible for DD users */}
|
||||||
|
{/* Note: This page shows only applications that have been shortlisted */}
|
||||||
|
|
||||||
|
{/* Filters and Actions Bar */}
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name, ID, or email..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Location Filter */}
|
||||||
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
||||||
|
<SelectTrigger className="w-full lg:w-48">
|
||||||
|
<SelectValue placeholder="All Locations" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Locations</SelectItem>
|
||||||
|
{locations.map((location) => (
|
||||||
|
<SelectItem key={location} value={location}>
|
||||||
|
{location}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{/* Status Filter */}
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-full lg:w-48">
|
||||||
|
<SelectValue placeholder="All Statuses" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Statuses</SelectItem>
|
||||||
|
<SelectItem value="Questionnaire Pending">Questionnaire Pending</SelectItem>
|
||||||
|
<SelectItem value="Shortlisted">Shortlisted</SelectItem>
|
||||||
|
<SelectItem value="Level 1 Pending">Level 1 Pending</SelectItem>
|
||||||
|
<SelectItem value="Level 2 Pending">Level 2 Pending</SelectItem>
|
||||||
|
<SelectItem value="Level 3 Pending">Level 3 Pending</SelectItem>
|
||||||
|
<SelectItem value="EOR In Progress">EOR In Progress</SelectItem>
|
||||||
|
<SelectItem value="Approved">Approved</SelectItem>
|
||||||
|
<SelectItem value="Rejected">Rejected</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{/* Sort By */}
|
||||||
|
<Select value={sortBy} onValueChange={(v) => setSortBy(v as any)}>
|
||||||
|
<SelectTrigger className="w-full lg:w-40">
|
||||||
|
<SelectValue placeholder="Sort By" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="date">Date</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-wrap items-center gap-3 mt-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleExport}
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Export
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{selectedIds.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBulkReminders}
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4 mr-2" />
|
||||||
|
Send Reminders ({selectedIds.length})
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ml-auto text-slate-600">
|
||||||
|
{filteredApplications.length} application{filteredApplications.length !== 1 ? 's' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Applications Table */}
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-12">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.length === filteredApplications.length}
|
||||||
|
onCheckedChange={toggleSelectAll}
|
||||||
|
/>
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>ID</TableHead>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Preferred Location</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Applicant Location</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Applied On</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<TableRow key={app.id}>
|
||||||
|
<TableCell>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(app.id)}
|
||||||
|
onCheckedChange={() => toggleSelection(app.id)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{app.registrationNumber}</TableCell>
|
||||||
|
<TableCell>{app.name}</TableCell>
|
||||||
|
<TableCell>{app.preferredLocation}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(app.status)}>
|
||||||
|
{app.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600 max-w-xs truncate">
|
||||||
|
{app.residentialAddress}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Progress value={app.progress} className="h-2 w-20" />
|
||||||
|
<span className="text-slate-600">{app.progress}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{new Date(app.submissionDate).toLocaleDateString()}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(app.id)}
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New Application Modal */}
|
||||||
|
<Dialog open={showNewApplicationModal} onOpenChange={setShowNewApplicationModal}>
|
||||||
|
<DialogContent className="max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Add New Application (Admin)</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-slate-600">This form allows administrators to manually add applications to the system.</p>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Name</Label>
|
||||||
|
<Input placeholder="Full Name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Email</Label>
|
||||||
|
<Input type="email" placeholder="email@example.com" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Phone</Label>
|
||||||
|
<Input placeholder="+91 XXXXX XXXXX" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Preferred Location</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select location" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{locations.map(loc => (
|
||||||
|
<SelectItem key={loc} value={loc}>{loc}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<Button variant="outline" onClick={() => setShowNewApplicationModal(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
Create Application
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
787
src/components/applications/ConstitutionalChangeDetails.tsx
Normal file
787
src/components/applications/ConstitutionalChangeDetails.tsx
Normal file
@ -0,0 +1,787 @@
|
|||||||
|
import { ArrowLeft, FileText, Calendar, User, Building2, CheckCircle2, Clock, AlertCircle, Upload, Download, Eye, ArrowRight, Shield, MessageSquare } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User as UserType } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { mockConstitutionalChangeRequests } from './ConstitutionalChangePage';
|
||||||
|
|
||||||
|
interface ConstitutionalChangeDetailsProps {
|
||||||
|
requestId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: UserType | null;
|
||||||
|
onOpenWorknote?: (requestId: string, requestType: 'relocation' | 'constitutional-change' | 'fnf' | 'resignation' | 'termination', requestTitle: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow stages as per the process flow
|
||||||
|
const workflowStages = [
|
||||||
|
{ id: 1, name: 'Request Created', key: 'created', role: 'Dealer' },
|
||||||
|
{ id: 2, name: 'ASM Review', key: 'asm', role: 'ASM' },
|
||||||
|
{ id: 3, name: 'RBM Review', key: 'rbm', role: 'RBM' },
|
||||||
|
{ id: 4, name: 'DD ZM Review', key: 'dd-zm', role: 'DD-ZM' },
|
||||||
|
{ id: 5, name: 'ZBH Review', key: 'zbh', role: 'ZBH' },
|
||||||
|
{ id: 6, name: 'DD Lead Review', key: 'dd-lead', role: 'DD Lead' },
|
||||||
|
{ id: 7, name: 'FDD Review', key: 'fdd', role: 'FDD' },
|
||||||
|
{ id: 8, name: 'DD Head Review', key: 'dd-head', role: 'DD Head' },
|
||||||
|
{ id: 9, name: 'NBH Review', key: 'nbh', role: 'NBH' },
|
||||||
|
{ id: 10, name: 'Docs Collection by DD H.O', key: 'docs-collection', role: 'DD H.O' },
|
||||||
|
{ id: 11, name: 'New Code Creation', key: 'code-creation', role: 'DD Admin' },
|
||||||
|
{ id: 12, name: 'New LOA Issuance', key: 'loa-issuance', role: 'DD Admin' },
|
||||||
|
{ id: 13, name: 'Closure of Request', key: 'closure', role: 'System' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Document requirements mapping (same as in ConstitutionalChangePage)
|
||||||
|
const documentRequirements: Record<string, number[]> = {
|
||||||
|
'Partnership': [1, 2, 3, 4, 8, 9, 10, 16],
|
||||||
|
'LLP': [1, 2, 3, 7, 8, 9, 10, 16],
|
||||||
|
'Pvt Ltd': [1, 2, 3, 5, 6, 7, 8, 10, 16],
|
||||||
|
'Proprietorship': [1, 2, 3, 10, 16]
|
||||||
|
};
|
||||||
|
|
||||||
|
const documentNames: Record<number, string> = {
|
||||||
|
1: 'GST',
|
||||||
|
2: 'Firm Pan Copy',
|
||||||
|
3: 'Self attested KYC\'s',
|
||||||
|
4: 'Partnership Agreement (Notarised)',
|
||||||
|
5: 'MOA (Applicable for Only Pvt.Ltd)',
|
||||||
|
6: 'AOA (Applicable for Only Pvt.Ltd)',
|
||||||
|
7: 'COI (Applicable for Only Pvt.Ltd & LLP)',
|
||||||
|
8: 'BPA - Business Purchase Agreement',
|
||||||
|
9: 'Firm Registration Certificate (Partnership)',
|
||||||
|
10: 'Cancelled Cheque',
|
||||||
|
11: 'LLP Agreement (Notarised)',
|
||||||
|
12: 'ZBH Approval',
|
||||||
|
13: 'NBH Approval',
|
||||||
|
14: 'RBM Approval',
|
||||||
|
15: 'DD-Lead Approval',
|
||||||
|
16: 'Declaration / Authorization Letter'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock uploaded documents
|
||||||
|
const mockUploadedDocuments = [
|
||||||
|
{ docNumber: 1, fileName: 'GST_Certificate.pdf', uploadedOn: '2025-12-15', uploadedBy: 'Dealer', status: 'Verified' },
|
||||||
|
{ docNumber: 2, fileName: 'Firm_PAN.pdf', uploadedOn: '2025-12-15', uploadedBy: 'Dealer', status: 'Verified' },
|
||||||
|
{ docNumber: 3, fileName: 'KYC_Documents.pdf', uploadedOn: '2025-12-15', uploadedBy: 'Dealer', status: 'Pending Verification' },
|
||||||
|
{ docNumber: 4, fileName: 'Partnership_Agreement_Notarised.pdf', uploadedOn: '2025-12-16', uploadedBy: 'Dealer', status: 'Verified' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock workflow history
|
||||||
|
const mockWorkflowHistory = [
|
||||||
|
{
|
||||||
|
stage: 'Request Created',
|
||||||
|
actor: 'Amit Sharma (Dealer)',
|
||||||
|
action: 'Created',
|
||||||
|
date: '2025-12-15 10:30 AM',
|
||||||
|
comments: 'Submitted constitutional change request from Proprietorship to Partnership',
|
||||||
|
status: 'Completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: 'ASM Review',
|
||||||
|
actor: 'Rajesh Kumar (ASM)',
|
||||||
|
action: 'Approved',
|
||||||
|
date: '2025-12-16 02:15 PM',
|
||||||
|
comments: 'Verified dealer credentials and approved for next stage',
|
||||||
|
status: 'Completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: 'RBM Review',
|
||||||
|
actor: 'Priya Sharma (RBM)',
|
||||||
|
action: 'Under Review',
|
||||||
|
date: '2025-12-17 09:00 AM',
|
||||||
|
comments: 'Documents under verification',
|
||||||
|
status: 'In Progress'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock worknotes - Discussion platform for this request
|
||||||
|
const initialWorknotes = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
user: 'Rajesh Kumar',
|
||||||
|
role: 'ASM',
|
||||||
|
message: 'I have reviewed the partnership agreement. All partners have proper KYC documentation. Looks good to proceed.',
|
||||||
|
timestamp: '2025-12-16 11:30 AM',
|
||||||
|
avatar: 'RK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
user: 'Priya Sharma',
|
||||||
|
role: 'RBM',
|
||||||
|
message: 'Can we get clarification on the profit sharing ratio mentioned in the partnership deed? It seems different from what was discussed.',
|
||||||
|
timestamp: '2025-12-17 02:45 PM',
|
||||||
|
avatar: 'PS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'The profit sharing ratio is 60:40 as per the partnership deed. This was agreed upon by all partners and is correctly reflected in the document.',
|
||||||
|
timestamp: '2025-12-17 04:15 PM',
|
||||||
|
avatar: 'AS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
user: 'Priya Sharma',
|
||||||
|
role: 'RBM',
|
||||||
|
message: 'Thank you for the clarification. I have verified the BPA and other statutory documents. Everything appears to be in order.',
|
||||||
|
timestamp: '2025-12-18 10:00 AM',
|
||||||
|
avatar: 'PS'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getTypeColor = (type: string) => {
|
||||||
|
switch(type) {
|
||||||
|
case 'Proprietorship': return 'bg-purple-100 text-purple-700 border-purple-300';
|
||||||
|
case 'Partnership': return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
case 'LLP': return 'bg-indigo-100 text-indigo-700 border-indigo-300';
|
||||||
|
case 'Pvt Ltd': return 'bg-cyan-100 text-cyan-700 border-cyan-300';
|
||||||
|
default: return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed' || status === 'Verified') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending') || status === 'In Progress') return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ConstitutionalChangeDetails({ requestId, onBack, currentUser, onOpenWorknote }: ConstitutionalChangeDetailsProps) {
|
||||||
|
const [isActionDialogOpen, setIsActionDialogOpen] = useState(false);
|
||||||
|
const [actionType, setActionType] = useState<'approve' | 'reject' | 'hold'>('approve');
|
||||||
|
const [comments, setComments] = useState('');
|
||||||
|
const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
|
||||||
|
const [isWorknoteDialogOpen, setIsWorknoteDialogOpen] = useState(false);
|
||||||
|
const [worknotes, setWorknotes] = useState(initialWorknotes);
|
||||||
|
const [newWorknote, setNewWorknote] = useState('');
|
||||||
|
|
||||||
|
// Find the request
|
||||||
|
const request = mockConstitutionalChangeRequests.find(r => r.id === requestId);
|
||||||
|
|
||||||
|
if (!request) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Request Not Found</h2>
|
||||||
|
<p className="text-slate-600 mb-4">The constitutional change request you're looking for doesn't exist.</p>
|
||||||
|
<Button onClick={onBack}>Go Back</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get required documents for this request
|
||||||
|
const requiredDocs = documentRequirements[request.targetType] || [];
|
||||||
|
|
||||||
|
// Calculate current stage index
|
||||||
|
const getCurrentStageIndex = () => {
|
||||||
|
const stageMap: Record<string, number> = {
|
||||||
|
'Dealer': 1,
|
||||||
|
'ASM': 2,
|
||||||
|
'RBM': 3,
|
||||||
|
'DD-ZM': 4,
|
||||||
|
'ZBH': 5,
|
||||||
|
'DD Lead': 6,
|
||||||
|
'FDD': 7,
|
||||||
|
'DD Head': 8,
|
||||||
|
'NBH': 9,
|
||||||
|
'DD H.O': 10,
|
||||||
|
'Closed': 13
|
||||||
|
};
|
||||||
|
return stageMap[request.currentStage] || 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentStageIndex = getCurrentStageIndex();
|
||||||
|
|
||||||
|
const handleAction = (type: 'approve' | 'reject' | 'hold') => {
|
||||||
|
setActionType(type);
|
||||||
|
setIsActionDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitAction = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const actionText = actionType === 'approve' ? 'approved' : actionType === 'reject' ? 'rejected' : 'put on hold';
|
||||||
|
toast.success(`Request ${actionText} successfully`);
|
||||||
|
|
||||||
|
setIsActionDialogOpen(false);
|
||||||
|
setComments('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadDocument = () => {
|
||||||
|
toast.success('Document uploaded successfully');
|
||||||
|
setIsUploadDialogOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddWorknote = () => {
|
||||||
|
if (newWorknote.trim()) {
|
||||||
|
const newNote = {
|
||||||
|
id: worknotes.length + 1,
|
||||||
|
user: currentUser?.name || 'Anonymous',
|
||||||
|
role: currentUser?.role || 'User',
|
||||||
|
message: newWorknote,
|
||||||
|
timestamp: new Date().toLocaleString(),
|
||||||
|
avatar: currentUser?.name?.slice(0, 2).toUpperCase() || 'AN'
|
||||||
|
};
|
||||||
|
setWorknotes([...worknotes, newNote]);
|
||||||
|
setNewWorknote('');
|
||||||
|
toast.success('Worknote added successfully');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={onBack}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900">{request.id} - Constitutional Change Details</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
{request.dealerName} ({request.dealerCode})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Request Overview */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Request Overview</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-1">Dealer Details</p>
|
||||||
|
<p className="text-slate-900">{request.dealerName}</p>
|
||||||
|
<p className="text-slate-600 text-sm">{request.dealerCode}</p>
|
||||||
|
<p className="text-slate-600 text-sm">{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-2">Constitutional Change</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={getTypeColor(request.currentType)}>
|
||||||
|
{request.currentType}
|
||||||
|
</Badge>
|
||||||
|
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||||
|
<Badge className={getTypeColor(request.targetType)}>
|
||||||
|
{request.targetType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-1">Request Information</p>
|
||||||
|
<p className="text-slate-900 text-sm">Submitted: {request.submittedOn}</p>
|
||||||
|
<p className="text-slate-600 text-sm">By: {request.submittedBy}</p>
|
||||||
|
<p className="text-slate-900 text-sm mt-2">Current Stage: {request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<p className="text-slate-600 text-sm mb-2">Reason for Change</p>
|
||||||
|
<p className="text-slate-900">{request.reason}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
<Card>
|
||||||
|
<Tabs defaultValue="workflow" className="w-full">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="overflow-x-auto -mx-6 px-6">
|
||||||
|
<TabsList className="w-max min-w-full justify-start">
|
||||||
|
<TabsTrigger value="workflow">Workflow Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="documents">Documents</TabsTrigger>
|
||||||
|
<TabsTrigger value="history">History & Audit Trail</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
{/* Workflow Progress Tab */}
|
||||||
|
<TabsContent value="workflow" className="mt-0">
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-slate-900">Overall Progress</span>
|
||||||
|
<span className="text-slate-600">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-3 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-500"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Workflow Stages */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{workflowStages.map((stage, index) => {
|
||||||
|
const isCompleted = index < currentStageIndex - 1;
|
||||||
|
const isCurrent = index === currentStageIndex - 1;
|
||||||
|
const isPending = index > currentStageIndex - 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={stage.id} className="flex items-start gap-4">
|
||||||
|
{/* Status Icon */}
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||||
|
isCompleted ? 'bg-green-100' :
|
||||||
|
isCurrent ? 'bg-amber-100' :
|
||||||
|
'bg-slate-100'
|
||||||
|
}`}>
|
||||||
|
{isCompleted ? (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||||||
|
) : isCurrent ? (
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="w-5 h-5 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{index < workflowStages.length - 1 && (
|
||||||
|
<div className={`w-0.5 h-12 ${
|
||||||
|
isCompleted ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stage Info */}
|
||||||
|
<div className={`flex-1 pb-8 ${isCurrent ? 'bg-amber-50 -ml-4 pl-4 pr-4 py-3 rounded-lg border border-amber-200' : ''}`}>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className={`${isCurrent ? 'text-amber-900' : 'text-slate-900'}`}>
|
||||||
|
{stage.name}
|
||||||
|
</h4>
|
||||||
|
<p className={`text-sm ${isCurrent ? 'text-amber-700' : 'text-slate-600'}`}>
|
||||||
|
Responsible: {stage.role}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={
|
||||||
|
isCompleted ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
isCurrent ? 'bg-amber-100 text-amber-700 border-amber-300' :
|
||||||
|
'bg-slate-100 text-slate-500 border-slate-300'
|
||||||
|
}>
|
||||||
|
{isCompleted ? 'Completed' : isCurrent ? 'In Progress' : 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Documents Tab */}
|
||||||
|
<TabsContent value="documents" className="mt-0">
|
||||||
|
<Tabs defaultValue="required" className="w-full">
|
||||||
|
<TabsList className="w-full justify-start mb-4">
|
||||||
|
<TabsTrigger value="required">Required for Process</TabsTrigger>
|
||||||
|
<TabsTrigger value="existing">Existing Documents</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Required Documents Sub-tab */}
|
||||||
|
<TabsContent value="required" className="mt-0">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h4 className="text-slate-900">Document Checklist</h4>
|
||||||
|
<Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button size="sm" className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Upload className="w-4 h-4 mr-2" />
|
||||||
|
Upload Document
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Upload Document</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Select the document type and upload the file
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Document Type</Label>
|
||||||
|
<select className="w-full mt-1 px-3 py-2 border border-slate-300 rounded-md">
|
||||||
|
{requiredDocs.map(docNum => (
|
||||||
|
<option key={docNum} value={docNum}>
|
||||||
|
{documentNames[docNum]}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Upload File</Label>
|
||||||
|
<Input type="file" className="mt-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsUploadDialogOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={handleUploadDocument}
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{requiredDocs.map((docNum) => {
|
||||||
|
const uploaded = mockUploadedDocuments.find(d => d.docNumber === docNum);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={docNum}
|
||||||
|
className={`flex items-center justify-between p-3 rounded-lg border ${
|
||||||
|
uploaded ? 'bg-green-50 border-green-200' : 'bg-slate-50 border-slate-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{uploaded ? (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="w-5 h-5 text-slate-400" />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className={uploaded ? 'text-green-900' : 'text-slate-900'}>
|
||||||
|
{documentNames[docNum]}
|
||||||
|
</p>
|
||||||
|
{uploaded && (
|
||||||
|
<p className="text-green-700 text-sm">{uploaded.fileName}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{uploaded ? (
|
||||||
|
<Badge className="bg-green-100 text-green-700 border-green-300">
|
||||||
|
{uploaded.status}
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge className="bg-slate-100 text-slate-600 border-slate-300">
|
||||||
|
Not Uploaded
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Existing Documents Sub-tab */}
|
||||||
|
<TabsContent value="existing" className="mt-0">
|
||||||
|
{mockUploadedDocuments.length > 0 ? (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-slate-900 mb-3">All Uploaded Documents</h4>
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>File Name</TableHead>
|
||||||
|
<TableHead>Uploaded On</TableHead>
|
||||||
|
<TableHead>Uploaded By</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockUploadedDocuments.map((doc) => (
|
||||||
|
<TableRow key={doc.docNumber}>
|
||||||
|
<TableCell className="text-slate-900">
|
||||||
|
{documentNames[doc.docNumber]}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{doc.fileName}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{doc.uploadedOn}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{doc.uploadedBy}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(doc.status)}>
|
||||||
|
{doc.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Download className="w-4 h-4 mr-1" />
|
||||||
|
Download
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-slate-500">
|
||||||
|
No documents uploaded yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* History Tab */}
|
||||||
|
<TabsContent value="history" className="mt-0">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockWorkflowHistory.map((entry, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-4 pb-4 border-b border-slate-200 last:border-0">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||||
|
entry.status === 'Completed' ? 'bg-green-100' :
|
||||||
|
entry.status === 'In Progress' ? 'bg-amber-100' :
|
||||||
|
'bg-slate-100'
|
||||||
|
}`}>
|
||||||
|
{entry.status === 'Completed' ? (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||||||
|
) : entry.status === 'In Progress' ? (
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
) : (
|
||||||
|
<User className="w-5 h-5 text-slate-600" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-slate-900">{entry.stage}</h4>
|
||||||
|
<p className="text-slate-600 text-sm">{entry.actor}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(entry.status)}>
|
||||||
|
{entry.action}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mt-2">{entry.comments}</p>
|
||||||
|
<p className="text-slate-500 text-sm mt-1">{entry.date}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</CardContent>
|
||||||
|
</Tabs>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Sidebar - Actions */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Current Status Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Current Status</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Current Stage</p>
|
||||||
|
<p className="text-slate-900">{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Actions Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Actions</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Button
|
||||||
|
className="w-full bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={() => handleAction('approve')}
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-4 h-4 mr-2" />
|
||||||
|
Approve Request
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
className="w-full"
|
||||||
|
onClick={() => handleAction('reject')}
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-4 h-4 mr-2" />
|
||||||
|
Reject Request
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="border-t border-slate-200 pt-3 mt-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full border-blue-300 text-blue-700 hover:bg-blue-50"
|
||||||
|
onClick={() => {
|
||||||
|
if (onOpenWorknote) {
|
||||||
|
onOpenWorknote(requestId, 'constitutional-change', `${request.dealerName} (${request.dealerCode}) - Constitutional Change Request`);
|
||||||
|
} else {
|
||||||
|
setIsWorknoteDialogOpen(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
Worknotes ({worknotes.length})
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Dialog */}
|
||||||
|
<Dialog open={isActionDialogOpen} onOpenChange={setIsActionDialogOpen}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{actionType === 'approve' ? 'Approve Request' :
|
||||||
|
actionType === 'reject' ? 'Reject Request' :
|
||||||
|
'Put Request on Hold'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Please provide comments for this action. This will be recorded in the audit trail.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitAction} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="comments">Comments *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="comments"
|
||||||
|
value={comments}
|
||||||
|
onChange={(e) => setComments(e.target.value)}
|
||||||
|
placeholder="Enter your comments..."
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsActionDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className={
|
||||||
|
actionType === 'approve' ? 'bg-green-600 hover:bg-green-700' :
|
||||||
|
actionType === 'reject' ? 'bg-red-600 hover:bg-red-700' :
|
||||||
|
'bg-amber-600 hover:bg-amber-700'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{actionType === 'approve' ? 'Approve' :
|
||||||
|
actionType === 'reject' ? 'Reject' :
|
||||||
|
'Put on Hold'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Worknotes Dialog */}
|
||||||
|
<Dialog open={isWorknoteDialogOpen} onOpenChange={setIsWorknoteDialogOpen}>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[80vh]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Worknotes - Discussion Platform</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Collaborate with team members on this constitutional change request. All discussions are logged and timestamped.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Discussion Thread */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Discussion History ({worknotes.length} messages)</Label>
|
||||||
|
<div className="border border-slate-200 rounded-lg p-4 max-h-96 overflow-y-auto bg-slate-50">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{worknotes.map((note) => (
|
||||||
|
<div key={note.id} className="flex items-start gap-3">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center text-white flex-shrink-0">
|
||||||
|
{note.avatar}
|
||||||
|
</div>
|
||||||
|
{/* Message Content */}
|
||||||
|
<div className="flex-1 bg-white rounded-lg p-3 border border-slate-200">
|
||||||
|
<div className="flex items-start justify-between mb-1">
|
||||||
|
<div>
|
||||||
|
<h5 className="text-slate-900">{note.user}</h5>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-xs">
|
||||||
|
{note.role}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-500 text-xs">{note.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-700 text-sm mt-2">{note.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add New Worknote */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="newWorknote">Add New Worknote</Label>
|
||||||
|
<Textarea
|
||||||
|
id="newWorknote"
|
||||||
|
value={newWorknote}
|
||||||
|
onChange={(e) => setNewWorknote(e.target.value)}
|
||||||
|
placeholder="Type your message here... Share updates, ask questions, or provide feedback."
|
||||||
|
rows={3}
|
||||||
|
className="resize-none"
|
||||||
|
/>
|
||||||
|
<p className="text-slate-500 text-xs">
|
||||||
|
Posting as: {currentUser?.name || 'Anonymous'} ({currentUser?.role || 'User'})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setIsWorknoteDialogOpen(false);
|
||||||
|
setNewWorknote('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={handleAddWorknote}
|
||||||
|
disabled={!newWorknote.trim()}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
Post Worknote
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
729
src/components/applications/ConstitutionalChangePage.tsx
Normal file
729
src/components/applications/ConstitutionalChangePage.tsx
Normal file
@ -0,0 +1,729 @@
|
|||||||
|
import { FileText, Calendar, Building, Plus, Eye, ArrowRight, Shield } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface ConstitutionalChangePageProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock dealer data for auto-fetch
|
||||||
|
const mockDealerData: Record<string, any> = {
|
||||||
|
'DL-MH-001': {
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
address: '123, MG Road, Bandra West',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Mumbai Central',
|
||||||
|
dealershipName: 'Royal Enfield Mumbai',
|
||||||
|
gst: '27AABCU9603R1ZX',
|
||||||
|
currentType: 'Proprietorship',
|
||||||
|
region: 'West',
|
||||||
|
zone: 'Maharashtra'
|
||||||
|
},
|
||||||
|
'DL-KA-045': {
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
address: '456, Brigade Road, Whitefield',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Bangalore South',
|
||||||
|
dealershipName: 'Royal Enfield Bangalore',
|
||||||
|
gst: '29AABCU9603R1ZX',
|
||||||
|
currentType: 'Partnership',
|
||||||
|
region: 'South',
|
||||||
|
zone: 'Karnataka'
|
||||||
|
},
|
||||||
|
'DL-TN-028': {
|
||||||
|
dealerName: 'Rahul Motors',
|
||||||
|
address: '789, Anna Salai, T Nagar',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Chennai East',
|
||||||
|
dealershipName: 'Royal Enfield Chennai',
|
||||||
|
gst: '33AABCU9603R1ZX',
|
||||||
|
currentType: 'LLP',
|
||||||
|
region: 'South',
|
||||||
|
zone: 'Tamil Nadu'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock constitutional change requests
|
||||||
|
export const mockConstitutionalChangeRequests = [
|
||||||
|
{
|
||||||
|
id: 'CC-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
currentType: 'Proprietorship',
|
||||||
|
targetType: 'Partnership',
|
||||||
|
reason: 'Adding new partner to expand business operations',
|
||||||
|
status: 'RBM Review',
|
||||||
|
currentStage: 'RBM',
|
||||||
|
submittedOn: '2025-12-15',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CC-002',
|
||||||
|
dealerCode: 'DL-KA-045',
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
location: 'Bangalore, Karnataka',
|
||||||
|
currentType: 'Partnership',
|
||||||
|
targetType: 'Pvt Ltd',
|
||||||
|
reason: 'Converting to Pvt Ltd for better business structure',
|
||||||
|
status: 'DD Lead Review',
|
||||||
|
currentStage: 'DD Lead',
|
||||||
|
submittedOn: '2025-12-10',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 46
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CC-003',
|
||||||
|
dealerCode: 'DL-TN-028',
|
||||||
|
dealerName: 'Rahul Motors',
|
||||||
|
location: 'Chennai, Tamil Nadu',
|
||||||
|
currentType: 'LLP',
|
||||||
|
targetType: 'Pvt Ltd',
|
||||||
|
reason: 'Upgrading to Pvt Ltd for investment opportunities',
|
||||||
|
status: 'NBH Review',
|
||||||
|
currentStage: 'NBH',
|
||||||
|
submittedOn: '2025-12-05',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 69
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CC-004',
|
||||||
|
dealerCode: 'DL-DL-012',
|
||||||
|
dealerName: 'Suresh Auto Pvt Ltd',
|
||||||
|
location: 'Delhi, Delhi',
|
||||||
|
currentType: 'Pvt Ltd',
|
||||||
|
targetType: 'Partnership',
|
||||||
|
reason: 'Removing one partner from the business',
|
||||||
|
status: 'Docs Collection',
|
||||||
|
currentStage: 'DD H.O',
|
||||||
|
submittedOn: '2025-11-28',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 77
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CC-005',
|
||||||
|
dealerCode: 'DL-GJ-089',
|
||||||
|
dealerName: 'Gujarat Motors',
|
||||||
|
location: 'Ahmedabad, Gujarat',
|
||||||
|
currentType: 'Partnership',
|
||||||
|
targetType: 'LLP',
|
||||||
|
reason: 'Converting to LLP for limited liability protection',
|
||||||
|
status: 'Completed',
|
||||||
|
currentStage: 'Closed',
|
||||||
|
submittedOn: '2025-11-20',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 100
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Document requirements mapping
|
||||||
|
const documentRequirements: Record<string, number[]> = {
|
||||||
|
'Partnership': [1, 2, 3, 4, 8, 9, 10, 16],
|
||||||
|
'LLP': [1, 2, 3, 7, 8, 9, 10, 16],
|
||||||
|
'Pvt Ltd': [1, 2, 3, 5, 6, 7, 8, 10, 16],
|
||||||
|
'Proprietorship': [1, 2, 3, 10, 16]
|
||||||
|
};
|
||||||
|
|
||||||
|
// Document names
|
||||||
|
const documentNames: Record<number, string> = {
|
||||||
|
1: 'GST',
|
||||||
|
2: 'Firm Pan Copy',
|
||||||
|
3: 'Self attested KYC\'s',
|
||||||
|
4: 'Partnership Agreement (Notarised)',
|
||||||
|
5: 'MOA (Applicable for Only Pvt.Ltd)',
|
||||||
|
6: 'AOA (Applicable for Only Pvt.Ltd)',
|
||||||
|
7: 'COI (Applicable for Only Pvt.Ltd & LLP)',
|
||||||
|
8: 'BPA - Business Purchase Agreement',
|
||||||
|
9: 'Firm Registration Certificate (Partnership)',
|
||||||
|
10: 'Cancelled Cheque',
|
||||||
|
11: 'LLP Agreement (Notarised)',
|
||||||
|
12: 'ZBH Approval',
|
||||||
|
13: 'NBH Approval',
|
||||||
|
14: 'RBM Approval',
|
||||||
|
15: 'DD-Lead Approval',
|
||||||
|
16: 'Declaration / Authorization Letter'
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
if (status.includes('Collection')) return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTypeColor = (type: string) => {
|
||||||
|
switch(type) {
|
||||||
|
case 'Proprietorship': return 'bg-purple-100 text-purple-700 border-purple-300';
|
||||||
|
case 'Partnership': return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
case 'LLP': return 'bg-indigo-100 text-indigo-700 border-indigo-300';
|
||||||
|
case 'Pvt Ltd': return 'bg-cyan-100 text-cyan-700 border-cyan-300';
|
||||||
|
default: return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ConstitutionalChangePage({ currentUser, onViewDetails }: ConstitutionalChangePageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [dealerCode, setDealerCode] = useState('');
|
||||||
|
const [dealerData, setDealerData] = useState<any>(null);
|
||||||
|
const [targetType, setTargetType] = useState('');
|
||||||
|
const [reason, setReason] = useState('');
|
||||||
|
const [requiredDocs, setRequiredDocs] = useState<number[]>([]);
|
||||||
|
|
||||||
|
const handleDealerCodeChange = (code: string) => {
|
||||||
|
setDealerCode(code);
|
||||||
|
if (mockDealerData[code]) {
|
||||||
|
setDealerData(mockDealerData[code]);
|
||||||
|
toast.success('Dealer details loaded successfully');
|
||||||
|
} else {
|
||||||
|
setDealerData(null);
|
||||||
|
if (code.trim()) {
|
||||||
|
toast.error('Dealer code not found');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTargetTypeChange = (type: string) => {
|
||||||
|
setTargetType(type);
|
||||||
|
setRequiredDocs(documentRequirements[type] || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitRequest = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!dealerData) {
|
||||||
|
toast.error('Please enter a valid dealer code');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!targetType) {
|
||||||
|
toast.error('Please select target dealership type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reason.trim()) {
|
||||||
|
toast.error('Please provide a reason for constitutional change');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate that target type is different from current type
|
||||||
|
if (dealerData.currentType === targetType) {
|
||||||
|
toast.error('Target type cannot be same as current type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('Constitutional change request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setDealerCode('');
|
||||||
|
setDealerData(null);
|
||||||
|
setTargetType('');
|
||||||
|
setReason('');
|
||||||
|
setRequiredDocs([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter requests based on user role
|
||||||
|
const getFilteredRequests = () => {
|
||||||
|
// For now, showing all requests. In real implementation, filter by role permissions
|
||||||
|
return mockConstitutionalChangeRequests;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredRequests = getFilteredRequests();
|
||||||
|
|
||||||
|
// Statistics
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Total Requests',
|
||||||
|
value: filteredRequests.length,
|
||||||
|
icon: FileText,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'In Progress',
|
||||||
|
value: filteredRequests.filter(r => r.status !== 'Completed' && !r.status.includes('Rejected')).length,
|
||||||
|
icon: Calendar,
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Completed',
|
||||||
|
value: filteredRequests.filter(r => r.status === 'Completed').length,
|
||||||
|
icon: Shield,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Action',
|
||||||
|
value: filteredRequests.filter(r => r.status.includes('Review') || r.status.includes('Pending')).length,
|
||||||
|
icon: Building,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">Constitutional Change Management</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Manage dealership constitutional change requests - Adding/Removing partners or changing business structure
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
New Request
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Constitutional Change Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Submit a request for dealership constitutional change. All fields are mandatory.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitRequest} className="space-y-4">
|
||||||
|
{/* Dealer Code */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerCode">Dealer Code *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerCode"
|
||||||
|
placeholder="Enter dealer code (e.g., DL-MH-001)"
|
||||||
|
value={dealerCode}
|
||||||
|
onChange={(e) => handleDealerCodeChange(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auto-populated Dealer Details */}
|
||||||
|
{dealerData && (
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-3">
|
||||||
|
<h3 className="text-slate-900">Dealer Details</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Name:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealership Name:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Location:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.address}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">GST:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Current Type:</span>
|
||||||
|
<Badge className={getTypeColor(dealerData.currentType)}>
|
||||||
|
{dealerData.currentType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Region/Zone:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.region} / {dealerData.zone}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Target Dealership Type */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="targetType">Target Dealership Type *</Label>
|
||||||
|
<Select value={targetType} onValueChange={handleTargetTypeChange} required>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select target dealership type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Proprietorship">Proprietorship</SelectItem>
|
||||||
|
<SelectItem value="Partnership">Partnership</SelectItem>
|
||||||
|
<SelectItem value="LLP">LLP (Limited Liability Partnership)</SelectItem>
|
||||||
|
<SelectItem value="Pvt Ltd">Pvt Ltd (Private Limited)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{dealerData && targetType && dealerData.currentType === targetType && (
|
||||||
|
<p className="text-red-600 text-sm">Target type cannot be same as current type</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Required Documents Display */}
|
||||||
|
{targetType && requiredDocs.length > 0 && (
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2">
|
||||||
|
<h4 className="text-blue-900">Required Documents for {targetType}</h4>
|
||||||
|
<div className="grid grid-cols-1 gap-2">
|
||||||
|
{requiredDocs.map((docNum) => (
|
||||||
|
<div key={docNum} className="flex items-start gap-2 text-sm">
|
||||||
|
<span className="text-blue-600 font-medium">{docNum}.</span>
|
||||||
|
<span className="text-blue-800">{documentNames[docNum]}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Reason */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Reason for Constitutional Change *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="reason"
|
||||||
|
placeholder="Provide detailed reason for the constitutional change request..."
|
||||||
|
value={reason}
|
||||||
|
onChange={(e) => setReason(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
disabled={!dealerData || !targetType || (dealerData && dealerData.currentType === targetType)}
|
||||||
|
>
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistics Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">{stat.title}</p>
|
||||||
|
<p className="text-slate-900 text-2xl mt-1">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
<div className={`${stat.color} w-12 h-12 rounded-lg flex items-center justify-center`}>
|
||||||
|
<Icon className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Requests Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Constitutional Change Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Track and manage all constitutional change requests across all stages
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="all" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-4">
|
||||||
|
<TabsTrigger value="all">All Requests</TabsTrigger>
|
||||||
|
<TabsTrigger value="pending">Pending</TabsTrigger>
|
||||||
|
<TabsTrigger value="in-progress">In Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="all" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Constitutional Change</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.location}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={getTypeColor(request.currentType)}>
|
||||||
|
{request.currentType}
|
||||||
|
</Badge>
|
||||||
|
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||||
|
<Badge className={getTypeColor(request.targetType)}>
|
||||||
|
{request.targetType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-300"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-600 text-sm">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="text-slate-900">{request.submittedOn}</div>
|
||||||
|
<div className="text-slate-600 text-sm">By {request.submittedBy}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="pending" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Constitutional Change</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status.includes('Review') || r.status.includes('Pending'))
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.location}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={getTypeColor(request.currentType)}>
|
||||||
|
{request.currentType}
|
||||||
|
</Badge>
|
||||||
|
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||||
|
<Badge className={getTypeColor(request.targetType)}>
|
||||||
|
{request.targetType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="in-progress" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Constitutional Change</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status !== 'Completed' && !r.status.includes('Rejected'))
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.location}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={getTypeColor(request.currentType)}>
|
||||||
|
{request.currentType}
|
||||||
|
</Badge>
|
||||||
|
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||||
|
<Badge className={getTypeColor(request.targetType)}>
|
||||||
|
{request.targetType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-300"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-600 text-sm">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="completed" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Constitutional Change</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status === 'Completed')
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.location}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={getTypeColor(request.currentType)}>
|
||||||
|
{request.currentType}
|
||||||
|
</Badge>
|
||||||
|
<ArrowRight className="w-4 h-4 text-slate-400" />
|
||||||
|
<Badge className={getTypeColor(request.targetType)}>
|
||||||
|
{request.targetType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="text-slate-900">{request.submittedOn}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1507
src/components/applications/FinanceFnFDetailsPage.tsx
Normal file
1507
src/components/applications/FinanceFnFDetailsPage.tsx
Normal file
File diff suppressed because it is too large
Load Diff
901
src/components/applications/FinanceFnFPage.tsx
Normal file
901
src/components/applications/FinanceFnFPage.tsx
Normal file
@ -0,0 +1,901 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '../ui/dialog';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import {
|
||||||
|
DollarSign,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
AlertCircle,
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
Calculator,
|
||||||
|
FileText,
|
||||||
|
User,
|
||||||
|
MapPin,
|
||||||
|
Calendar,
|
||||||
|
IndianRupee,
|
||||||
|
Wallet,
|
||||||
|
CreditCard,
|
||||||
|
Receipt
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
// Mock F&F cases data
|
||||||
|
const mockFnFCases = [
|
||||||
|
{
|
||||||
|
id: 'FNF-2025-001',
|
||||||
|
dealerCode: 'RE-MUM-001',
|
||||||
|
dealerName: 'Rajesh Motors',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
terminationType: 'Resignation',
|
||||||
|
submittedDate: '2025-10-01',
|
||||||
|
status: 'Pending Finance Review',
|
||||||
|
financialData: {
|
||||||
|
securityDeposit: 500000,
|
||||||
|
inventoryValue: 2500000,
|
||||||
|
equipmentValue: 800000,
|
||||||
|
outstandingInvoices: 350000,
|
||||||
|
warrantyPending: 125000,
|
||||||
|
serviceDues: 80000,
|
||||||
|
partsDues: 150000,
|
||||||
|
advancesGiven: 0,
|
||||||
|
penalties: 50000,
|
||||||
|
otherCharges: 25000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'FNF-2025-002',
|
||||||
|
dealerCode: 'RE-DEL-002',
|
||||||
|
dealerName: 'Capital Enfield',
|
||||||
|
location: 'Delhi, NCR',
|
||||||
|
terminationType: 'Termination',
|
||||||
|
submittedDate: '2025-10-03',
|
||||||
|
status: 'Pending Finance Review',
|
||||||
|
financialData: {
|
||||||
|
securityDeposit: 750000,
|
||||||
|
inventoryValue: 1800000,
|
||||||
|
equipmentValue: 600000,
|
||||||
|
outstandingInvoices: 520000,
|
||||||
|
warrantyPending: 95000,
|
||||||
|
serviceDues: 120000,
|
||||||
|
partsDues: 200000,
|
||||||
|
advancesGiven: 100000,
|
||||||
|
penalties: 150000,
|
||||||
|
otherCharges: 75000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'FNF-2025-003',
|
||||||
|
dealerCode: 'RE-BLR-003',
|
||||||
|
dealerName: 'Bangalore Bikes',
|
||||||
|
location: 'Bangalore, Karnataka',
|
||||||
|
terminationType: 'Resignation',
|
||||||
|
submittedDate: '2025-09-28',
|
||||||
|
status: 'Settlement Approved',
|
||||||
|
settlementAmount: 425000,
|
||||||
|
settlementType: 'Payable to Dealer',
|
||||||
|
approvedDate: '2025-10-05',
|
||||||
|
financialData: {
|
||||||
|
securityDeposit: 600000,
|
||||||
|
inventoryValue: 3000000,
|
||||||
|
equipmentValue: 900000,
|
||||||
|
outstandingInvoices: 280000,
|
||||||
|
warrantyPending: 150000,
|
||||||
|
serviceDues: 95000,
|
||||||
|
partsDues: 180000,
|
||||||
|
advancesGiven: 50000,
|
||||||
|
penalties: 0,
|
||||||
|
otherCharges: 20000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface FinanceFnFPageProps {
|
||||||
|
onViewFnFDetails?: (fnfId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FinanceFnFPage({ onViewFnFDetails }: FinanceFnFPageProps = {}) {
|
||||||
|
const [selectedCase, setSelectedCase] = useState<any>(null);
|
||||||
|
const [showReviewDialog, setShowReviewDialog] = useState(false);
|
||||||
|
const [showDetailsDialog, setShowDetailsDialog] = useState(false);
|
||||||
|
const [adjustments, setAdjustments] = useState('');
|
||||||
|
const [finalNotes, setFinalNotes] = useState('');
|
||||||
|
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved'>('all');
|
||||||
|
|
||||||
|
const filteredCases = mockFnFCases.filter(fnf => {
|
||||||
|
if (filterStatus === 'all') return true;
|
||||||
|
if (filterStatus === 'pending') return fnf.status === 'Pending Finance Review';
|
||||||
|
if (filterStatus === 'approved') return fnf.status === 'Settlement Approved';
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
const calculateSettlement = (data: any) => {
|
||||||
|
// Amounts dealer needs to pay back (Receivables from dealer)
|
||||||
|
const receivables =
|
||||||
|
data.outstandingInvoices +
|
||||||
|
data.serviceDues +
|
||||||
|
data.partsDues +
|
||||||
|
data.advancesGiven +
|
||||||
|
data.penalties +
|
||||||
|
data.otherCharges;
|
||||||
|
|
||||||
|
// Amounts company needs to pay back (Payables to dealer)
|
||||||
|
const payables =
|
||||||
|
data.securityDeposit +
|
||||||
|
data.inventoryValue +
|
||||||
|
data.equipmentValue;
|
||||||
|
|
||||||
|
// Pending warranty claims (to be deducted)
|
||||||
|
const deductions = data.warrantyPending;
|
||||||
|
|
||||||
|
// Net settlement = Payables - Receivables - Deductions
|
||||||
|
const netSettlement = payables - receivables - deductions;
|
||||||
|
|
||||||
|
return {
|
||||||
|
receivables,
|
||||||
|
payables,
|
||||||
|
deductions,
|
||||||
|
netSettlement,
|
||||||
|
settlementType: netSettlement > 0 ? 'Payable to Dealer' : 'Receivable from Dealer',
|
||||||
|
settlementAmount: Math.abs(netSettlement),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReviewCase = (fnfCase: any) => {
|
||||||
|
if (onViewFnFDetails) {
|
||||||
|
onViewFnFDetails(fnfCase.id);
|
||||||
|
} else {
|
||||||
|
setSelectedCase(fnfCase);
|
||||||
|
setShowReviewDialog(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewDetails = (fnfCase: any) => {
|
||||||
|
if (onViewFnFDetails) {
|
||||||
|
onViewFnFDetails(fnfCase.id);
|
||||||
|
} else {
|
||||||
|
setSelectedCase(fnfCase);
|
||||||
|
setShowDetailsDialog(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmSettlement = () => {
|
||||||
|
const settlement = calculateSettlement(selectedCase.financialData);
|
||||||
|
toast.success(
|
||||||
|
`Settlement approved: ${settlement.settlementType} - ₹${settlement.settlementAmount.toLocaleString()}`
|
||||||
|
);
|
||||||
|
setShowReviewDialog(false);
|
||||||
|
setAdjustments('');
|
||||||
|
setFinalNotes('');
|
||||||
|
setSelectedCase(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pendingCount = mockFnFCases.filter(fnf => fnf.status === 'Pending Finance Review').length;
|
||||||
|
const approvedCount = mockFnFCases.filter(fnf => fnf.status === 'Settlement Approved').length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">F&F Financial Settlement</h1>
|
||||||
|
<p className="text-slate-600">Review and process full & final settlements for dealerships</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Pending Review</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{pendingCount}</div>
|
||||||
|
<Calculator className="w-8 h-8 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Approved Settlements</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{approvedCount}</div>
|
||||||
|
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Total Cases</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{mockFnFCases.length}</div>
|
||||||
|
<FileText className="w-8 h-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Net Receivable</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">₹2.5L</div>
|
||||||
|
<TrendingUp className="w-8 h-8 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'all' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('all')}
|
||||||
|
className={filterStatus === 'all' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
All Cases ({mockFnFCases.length})
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'pending' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('pending')}
|
||||||
|
className={filterStatus === 'pending' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
Pending Review ({pendingCount})
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'approved' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('approved')}
|
||||||
|
className={filterStatus === 'approved' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
Approved ({approvedCount})
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* F&F Cases Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>F&F Settlement Queue</CardTitle>
|
||||||
|
<CardDescription>Review financial status and calculate settlements</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Case ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Location</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Submitted Date</TableHead>
|
||||||
|
<TableHead>Net Settlement</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredCases.map((fnfCase) => {
|
||||||
|
const settlement = calculateSettlement(fnfCase.financialData);
|
||||||
|
return (
|
||||||
|
<TableRow key={fnfCase.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<div className="text-slate-900">{fnfCase.id}</div>
|
||||||
|
<div className="text-sm text-slate-500">{fnfCase.dealerCode}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<User className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-900">{fnfCase.dealerName}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-900">{fnfCase.location}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={fnfCase.terminationType === 'Resignation' ? 'default' : 'secondary'}>
|
||||||
|
{fnfCase.terminationType}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-900">{fnfCase.submittedDate}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{settlement.settlementType === 'Payable to Dealer' ? (
|
||||||
|
<TrendingDown className="w-4 h-4 text-red-600" />
|
||||||
|
) : (
|
||||||
|
<TrendingUp className="w-4 h-4 text-green-600" />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<div className="text-slate-900">₹{settlement.settlementAmount.toLocaleString()}</div>
|
||||||
|
<div className="text-xs text-slate-500">{settlement.settlementType}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant={fnfCase.status === 'Settlement Approved' ? 'default' : 'secondary'}
|
||||||
|
className={fnfCase.status === 'Settlement Approved' ? 'bg-green-600' : 'bg-amber-600'}
|
||||||
|
>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant={fnfCase.status === 'Pending Finance Review' ? 'default' : 'outline'}
|
||||||
|
className={fnfCase.status === 'Pending Finance Review' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
onClick={() => handleViewDetails(fnfCase)}
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Review Dialog */}
|
||||||
|
<Dialog open={showReviewDialog} onOpenChange={setShowReviewDialog}>
|
||||||
|
<DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Financial Settlement Review</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Review financial details and calculate final settlement for {selectedCase?.dealerName}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{selectedCase && (
|
||||||
|
<Tabs defaultValue="breakdown" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-3">
|
||||||
|
<TabsTrigger value="breakdown">Financial Breakdown</TabsTrigger>
|
||||||
|
<TabsTrigger value="calculation">Settlement Calculation</TabsTrigger>
|
||||||
|
<TabsTrigger value="summary">Final Summary</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="breakdown" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Payables (Company owes dealer) */}
|
||||||
|
<Card className="border-green-200 bg-green-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Wallet className="w-5 h-5 text-green-600" />
|
||||||
|
Payables to Dealer
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Amounts company owes to dealer</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Security Deposit</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.securityDeposit.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Inventory Value</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.inventoryValue.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Equipment Value</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.equipmentValue.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-3 border-t border-green-300">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-900">Total Payables</span>
|
||||||
|
<span className="text-slate-900 text-lg">
|
||||||
|
₹{(
|
||||||
|
selectedCase.financialData.securityDeposit +
|
||||||
|
selectedCase.financialData.inventoryValue +
|
||||||
|
selectedCase.financialData.equipmentValue
|
||||||
|
).toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Receivables (Dealer owes company) */}
|
||||||
|
<Card className="border-red-200 bg-red-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Receipt className="w-5 h-5 text-red-600" />
|
||||||
|
Receivables from Dealer
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Amounts dealer owes to company</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Outstanding Invoices</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.outstandingInvoices.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Service Dues</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.serviceDues.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Parts Dues</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.partsDues.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Advances Given</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.advancesGiven.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Penalties</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.penalties.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Other Charges</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.otherCharges.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-3 border-t border-red-300">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-900">Total Receivables</span>
|
||||||
|
<span className="text-slate-900 text-lg">
|
||||||
|
₹{calculateSettlement(selectedCase.financialData).receivables.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Deductions */}
|
||||||
|
<Card className="border-amber-200 bg-amber-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600" />
|
||||||
|
Deductions
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Pending claims and deductions</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-slate-600">Warranty Claims Pending</span>
|
||||||
|
<span className="text-slate-900 text-lg">₹{selectedCase.financialData.warrantyPending.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculation" className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Settlement Calculation</CardTitle>
|
||||||
|
<CardDescription>Step-by-step calculation of final settlement amount</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{(() => {
|
||||||
|
const settlement = calculateSettlement(selectedCase.financialData);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center p-3 bg-green-50 rounded">
|
||||||
|
<span className="text-slate-900">Total Payables (to Dealer)</span>
|
||||||
|
<span className="text-green-600 text-lg">+ ₹{settlement.payables.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center p-3 bg-red-50 rounded">
|
||||||
|
<span className="text-slate-900">Total Receivables (from Dealer)</span>
|
||||||
|
<span className="text-red-600 text-lg">- ₹{settlement.receivables.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center p-3 bg-amber-50 rounded">
|
||||||
|
<span className="text-slate-900">Total Deductions</span>
|
||||||
|
<span className="text-amber-600 text-lg">- ₹{settlement.deductions.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-px bg-slate-300"></div>
|
||||||
|
|
||||||
|
<div className={`p-4 rounded-lg ${
|
||||||
|
settlement.netSettlement > 0
|
||||||
|
? 'bg-red-100 border-2 border-red-300'
|
||||||
|
: 'bg-green-100 border-2 border-green-300'
|
||||||
|
}`}>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-slate-900">Net Settlement</span>
|
||||||
|
<span className="text-2xl text-slate-900">
|
||||||
|
₹{settlement.settlementAmount.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{settlement.settlementType === 'Payable to Dealer' ? (
|
||||||
|
<>
|
||||||
|
<TrendingDown className="w-5 h-5 text-red-600" />
|
||||||
|
<span className="text-red-700">Company needs to pay dealer</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<TrendingUp className="w-5 h-5 text-green-600" />
|
||||||
|
<span className="text-green-700">Dealer needs to pay company</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||||
|
<AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-900 mb-1">Calculation Formula</p>
|
||||||
|
<p className="text-sm text-slate-600">
|
||||||
|
Net Settlement = Total Payables - Total Receivables - Total Deductions
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600 mt-2">
|
||||||
|
= ₹{settlement.payables.toLocaleString()} - ₹{settlement.receivables.toLocaleString()} - ₹{settlement.deductions.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="summary" className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Case Summary</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Case ID</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.id}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Dealer Name</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Dealer Code</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Location</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Termination Type</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.terminationType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Submitted Date</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.submittedDate}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Final Settlement</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{(() => {
|
||||||
|
const settlement = calculateSettlement(selectedCase.financialData);
|
||||||
|
return (
|
||||||
|
<div className={`p-6 rounded-lg text-center ${
|
||||||
|
settlement.settlementType === 'Payable to Dealer'
|
||||||
|
? 'bg-red-100 border-2 border-red-300'
|
||||||
|
: 'bg-green-100 border-2 border-green-300'
|
||||||
|
}`}>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-3">
|
||||||
|
{settlement.settlementType === 'Payable to Dealer' ? (
|
||||||
|
<TrendingDown className="w-8 h-8 text-red-600" />
|
||||||
|
) : (
|
||||||
|
<TrendingUp className="w-8 h-8 text-green-600" />
|
||||||
|
)}
|
||||||
|
<span className={`text-lg ${
|
||||||
|
settlement.settlementType === 'Payable to Dealer' ? 'text-red-700' : 'text-green-700'
|
||||||
|
}`}>
|
||||||
|
{settlement.settlementType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-4xl text-slate-900 mb-2">
|
||||||
|
₹{settlement.settlementAmount.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
{settlement.settlementType === 'Payable to Dealer'
|
||||||
|
? 'Company will pay this amount to the dealer'
|
||||||
|
: 'Dealer must pay this amount to the company'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="adjustments">Adjustments (if any)</Label>
|
||||||
|
<Input
|
||||||
|
id="adjustments"
|
||||||
|
value={adjustments}
|
||||||
|
onChange={(e) => setAdjustments(e.target.value)}
|
||||||
|
placeholder="Enter any adjustments to the settlement amount"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="finalNotes">Final Notes</Label>
|
||||||
|
<Textarea
|
||||||
|
id="finalNotes"
|
||||||
|
value={finalNotes}
|
||||||
|
onChange={(e) => setFinalNotes(e.target.value)}
|
||||||
|
placeholder="Enter any final notes or remarks for this settlement..."
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowReviewDialog(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={confirmSettlement}
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Approve Settlement
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* View Details Dialog */}
|
||||||
|
<Dialog open={showDetailsDialog} onOpenChange={setShowDetailsDialog}>
|
||||||
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Settlement Details</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Complete settlement information for {selectedCase?.dealerName}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{selectedCase && (
|
||||||
|
<Tabs defaultValue="info" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-2">
|
||||||
|
<TabsTrigger value="info">Case Information</TabsTrigger>
|
||||||
|
<TabsTrigger value="financial">Financial Breakdown</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="info" className="space-y-4 mt-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Case Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Case ID</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.id}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Dealer Code</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Dealer Name</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Location</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Termination Type</p>
|
||||||
|
<Badge variant={selectedCase.terminationType === 'Resignation' ? 'default' : 'secondary'}>
|
||||||
|
{selectedCase.terminationType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Status</p>
|
||||||
|
<Badge
|
||||||
|
variant={selectedCase.status === 'Settlement Approved' ? 'default' : 'secondary'}
|
||||||
|
className={selectedCase.status === 'Settlement Approved' ? 'bg-green-600' : 'bg-amber-600'}
|
||||||
|
>
|
||||||
|
{selectedCase.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Submitted Date</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.submittedDate}</p>
|
||||||
|
</div>
|
||||||
|
{selectedCase.approvedDate && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Approved Date</p>
|
||||||
|
<p className="text-slate-900">{selectedCase.approvedDate}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="financial" className="space-y-4 mt-4">
|
||||||
|
{(() => {
|
||||||
|
const settlement = calculateSettlement(selectedCase.financialData);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Payables */}
|
||||||
|
<Card className="border-green-200 bg-green-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Wallet className="w-5 h-5 text-green-600" />
|
||||||
|
Payables to Dealer
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Security Deposit</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.securityDeposit.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Inventory Value</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.inventoryValue.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Equipment Value</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.equipmentValue.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-2 border-t border-green-300">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-900">Total Payables</span>
|
||||||
|
<span className="text-slate-900 text-lg">₹{settlement.payables.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Receivables */}
|
||||||
|
<Card className="border-red-200 bg-red-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Receipt className="w-5 h-5 text-red-600" />
|
||||||
|
Receivables from Dealer
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Outstanding Invoices</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.outstandingInvoices.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Service Dues</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.serviceDues.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Parts Dues</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.partsDues.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Advances Given</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.advancesGiven.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Penalties</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.penalties.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Other Charges</span>
|
||||||
|
<span className="text-slate-900">₹{selectedCase.financialData.otherCharges.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-2 border-t border-red-300">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-900">Total Receivables</span>
|
||||||
|
<span className="text-slate-900 text-lg">₹{settlement.receivables.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Deductions */}
|
||||||
|
<Card className="border-amber-200 bg-amber-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600" />
|
||||||
|
Deductions
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-600">Warranty Claims Pending</span>
|
||||||
|
<span className="text-slate-900 text-lg">₹{selectedCase.financialData.warrantyPending.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Net Settlement */}
|
||||||
|
<Card className={`${
|
||||||
|
settlement.settlementType === 'Payable to Dealer'
|
||||||
|
? 'border-red-300 bg-red-100'
|
||||||
|
: 'border-green-300 bg-green-100'
|
||||||
|
}`}>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Net Settlement</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-2">
|
||||||
|
{settlement.settlementType === 'Payable to Dealer' ? (
|
||||||
|
<TrendingDown className="w-6 h-6 text-red-600" />
|
||||||
|
) : (
|
||||||
|
<TrendingUp className="w-6 h-6 text-green-600" />
|
||||||
|
)}
|
||||||
|
<span className={`text-lg ${
|
||||||
|
settlement.settlementType === 'Payable to Dealer' ? 'text-red-700' : 'text-green-700'
|
||||||
|
}`}>
|
||||||
|
{settlement.settlementType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl text-slate-900">
|
||||||
|
₹{settlement.settlementAmount.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowDetailsDialog(false)}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
{selectedCase?.status === 'Pending Finance Review' && (
|
||||||
|
<Button
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={() => {
|
||||||
|
setShowDetailsDialog(false);
|
||||||
|
handleReviewCase(selectedCase);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Review & Settle
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
588
src/components/applications/FinanceOnboardingPage.tsx
Normal file
588
src/components/applications/FinanceOnboardingPage.tsx
Normal file
@ -0,0 +1,588 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '../ui/dialog';
|
||||||
|
import {
|
||||||
|
DollarSign,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Clock,
|
||||||
|
AlertCircle,
|
||||||
|
CreditCard,
|
||||||
|
FileText,
|
||||||
|
Calendar,
|
||||||
|
User,
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
Mail
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
// Mock data for applications pending finance approval
|
||||||
|
const mockFinanceApplications = [
|
||||||
|
{
|
||||||
|
id: 'APP-2025-001',
|
||||||
|
registrationNumber: 'RE-MUM-2025-001',
|
||||||
|
name: 'Amit Sharma',
|
||||||
|
email: 'amit.sharma@example.com',
|
||||||
|
phone: '+91 98765 43210',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
securityDeposit: '₹10,00,000',
|
||||||
|
paymentStatus: 'Pending Verification',
|
||||||
|
submittedDate: '2025-10-08',
|
||||||
|
dueDate: '2025-10-15',
|
||||||
|
paymentMode: 'NEFT',
|
||||||
|
transactionId: 'TXN2025001234',
|
||||||
|
bankName: 'HDFC Bank',
|
||||||
|
accountNumber: '****5678',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'APP-2025-002',
|
||||||
|
registrationNumber: 'RE-DEL-2025-002',
|
||||||
|
name: 'Priya Patel',
|
||||||
|
email: 'priya.patel@example.com',
|
||||||
|
phone: '+91 98765 43211',
|
||||||
|
location: 'Delhi, NCR',
|
||||||
|
securityDeposit: '₹15,00,000',
|
||||||
|
paymentStatus: 'Pending Verification',
|
||||||
|
submittedDate: '2025-10-09',
|
||||||
|
dueDate: '2025-10-16',
|
||||||
|
paymentMode: 'RTGS',
|
||||||
|
transactionId: 'TXN2025001235',
|
||||||
|
bankName: 'ICICI Bank',
|
||||||
|
accountNumber: '****9012',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'APP-2025-003',
|
||||||
|
registrationNumber: 'RE-BLR-2025-003',
|
||||||
|
name: 'Raj Kumar',
|
||||||
|
email: 'raj.kumar@example.com',
|
||||||
|
phone: '+91 98765 43212',
|
||||||
|
location: 'Bangalore, Karnataka',
|
||||||
|
securityDeposit: '₹12,00,000',
|
||||||
|
paymentStatus: 'Verified',
|
||||||
|
submittedDate: '2025-10-05',
|
||||||
|
approvedDate: '2025-10-07',
|
||||||
|
paymentMode: 'IMPS',
|
||||||
|
transactionId: 'TXN2025001230',
|
||||||
|
bankName: 'SBI',
|
||||||
|
accountNumber: '****3456',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface FinanceOnboardingPageProps {
|
||||||
|
onViewPaymentDetails?: (applicationId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FinanceOnboardingPage({ onViewPaymentDetails }: FinanceOnboardingPageProps = {}) {
|
||||||
|
const [selectedApplication, setSelectedApplication] = useState<any>(null);
|
||||||
|
const [showVerifyDialog, setShowVerifyDialog] = useState(false);
|
||||||
|
const [showDetailsDialog, setShowDetailsDialog] = useState(false);
|
||||||
|
const [verificationNotes, setVerificationNotes] = useState('');
|
||||||
|
const [receivedAmount, setReceivedAmount] = useState('');
|
||||||
|
const [verificationDate, setVerificationDate] = useState('');
|
||||||
|
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'verified'>('all');
|
||||||
|
|
||||||
|
const filteredApplications = mockFinanceApplications.filter(app => {
|
||||||
|
if (filterStatus === 'all') return true;
|
||||||
|
if (filterStatus === 'pending') return app.paymentStatus === 'Pending Verification';
|
||||||
|
if (filterStatus === 'verified') return app.paymentStatus === 'Verified';
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleVerifyPayment = (app: any) => {
|
||||||
|
setSelectedApplication(app);
|
||||||
|
setReceivedAmount(app.securityDeposit);
|
||||||
|
setVerificationDate(new Date().toISOString().split('T')[0]);
|
||||||
|
setShowVerifyDialog(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewDetails = (app: any) => {
|
||||||
|
if (onViewPaymentDetails) {
|
||||||
|
onViewPaymentDetails(app.id);
|
||||||
|
} else {
|
||||||
|
setSelectedApplication(app);
|
||||||
|
setShowDetailsDialog(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmVerification = (approved: boolean) => {
|
||||||
|
if (approved) {
|
||||||
|
toast.success(`Payment verified for ${selectedApplication.name}`);
|
||||||
|
} else {
|
||||||
|
toast.error(`Payment rejected for ${selectedApplication.name}`);
|
||||||
|
}
|
||||||
|
setShowVerifyDialog(false);
|
||||||
|
setVerificationNotes('');
|
||||||
|
setSelectedApplication(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pendingCount = mockFinanceApplications.filter(app => app.paymentStatus === 'Pending Verification').length;
|
||||||
|
const verifiedCount = mockFinanceApplications.filter(app => app.paymentStatus === 'Verified').length;
|
||||||
|
const totalAmount = mockFinanceApplications.reduce((sum, app) => {
|
||||||
|
const amount = parseInt(app.securityDeposit.replace(/[₹,]/g, ''));
|
||||||
|
return sum + amount;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">Payment Verification</h1>
|
||||||
|
<p className="text-slate-600">Verify advance payments for dealership applications</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Pending Verification</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{pendingCount}</div>
|
||||||
|
<Clock className="w-8 h-8 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Verified Payments</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{verifiedCount}</div>
|
||||||
|
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Total Applications</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">{mockFinanceApplications.length}</div>
|
||||||
|
<FileText className="w-8 h-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm text-slate-600">Total Amount</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-slate-900 text-2xl">₹{(totalAmount / 100000).toFixed(1)}L</div>
|
||||||
|
<DollarSign className="w-8 h-8 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'all' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('all')}
|
||||||
|
className={filterStatus === 'all' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
All ({mockFinanceApplications.length})
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'pending' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('pending')}
|
||||||
|
className={filterStatus === 'pending' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
Pending ({pendingCount})
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={filterStatus === 'verified' ? 'default' : 'outline'}
|
||||||
|
onClick={() => setFilterStatus('verified')}
|
||||||
|
className={filterStatus === 'verified' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
Verified ({verifiedCount})
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Applications Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Payment Verification Queue</CardTitle>
|
||||||
|
<CardDescription>Review and verify advance payment receipts</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Application ID</TableHead>
|
||||||
|
<TableHead>Applicant Details</TableHead>
|
||||||
|
<TableHead>Location</TableHead>
|
||||||
|
<TableHead>Payment Details</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Due Date</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<TableRow key={app.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<div className="text-slate-900">{app.id}</div>
|
||||||
|
<div className="text-sm text-slate-500">{app.registrationNumber}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<User className="w-3 h-3 text-slate-400" />
|
||||||
|
<span className="text-slate-900">{app.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-3 h-3 text-slate-400" />
|
||||||
|
<span className="text-sm text-slate-500">{app.phone}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-3 h-3 text-slate-400" />
|
||||||
|
<span className="text-sm text-slate-500">{app.email}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-900">{app.location}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CreditCard className="w-3 h-3 text-slate-400" />
|
||||||
|
<span className="text-sm text-slate-900">{app.paymentMode}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-slate-500">TXN: {app.transactionId}</div>
|
||||||
|
<div className="text-sm text-slate-500">{app.bankName}</div>
|
||||||
|
<div className="text-sm text-slate-500">A/C: {app.accountNumber}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="text-slate-900">{app.securityDeposit}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant={app.paymentStatus === 'Verified' ? 'default' : 'secondary'}
|
||||||
|
className={app.paymentStatus === 'Verified' ? 'bg-green-600' : 'bg-amber-600'}
|
||||||
|
>
|
||||||
|
{app.paymentStatus}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-900">
|
||||||
|
{app.paymentStatus === 'Verified' ? app.approvedDate : app.dueDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant={app.paymentStatus === 'Pending Verification' ? 'default' : 'outline'}
|
||||||
|
className={app.paymentStatus === 'Pending Verification' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
onClick={() => handleViewDetails(app)}
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Verification Dialog */}
|
||||||
|
<Dialog open={showVerifyDialog} onOpenChange={setShowVerifyDialog}>
|
||||||
|
<DialogContent className="max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Verify Payment</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Review and verify the advance payment for {selectedApplication?.name}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Application Summary */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Application Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Application ID</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.id}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Applicant Name</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Location</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Expected Amount</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.securityDeposit}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Payment Details */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Payment Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Payment Mode</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.paymentMode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Transaction ID</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.transactionId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Bank Name</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.bankName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Account Number</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Verification Form */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="receivedAmount">Received Amount</Label>
|
||||||
|
<Input
|
||||||
|
id="receivedAmount"
|
||||||
|
value={receivedAmount}
|
||||||
|
onChange={(e) => setReceivedAmount(e.target.value)}
|
||||||
|
placeholder="₹10,00,000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="verificationDate">Verification Date</Label>
|
||||||
|
<Input
|
||||||
|
id="verificationDate"
|
||||||
|
type="date"
|
||||||
|
value={verificationDate}
|
||||||
|
onChange={(e) => setVerificationDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="notes">Verification Notes</Label>
|
||||||
|
<Textarea
|
||||||
|
id="notes"
|
||||||
|
value={verificationNotes}
|
||||||
|
onChange={(e) => setVerificationNotes(e.target.value)}
|
||||||
|
placeholder="Enter any notes or remarks about this payment verification..."
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Warning */}
|
||||||
|
<div className="flex items-start gap-3 p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-900 mb-1">Important</p>
|
||||||
|
<p className="text-sm text-slate-600">
|
||||||
|
Please ensure you have verified the payment details with the bank before approving.
|
||||||
|
This action will allow the application to proceed to the next stage.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowVerifyDialog(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="text-red-600 hover:bg-red-50"
|
||||||
|
onClick={() => confirmVerification(false)}
|
||||||
|
>
|
||||||
|
<XCircle className="w-4 h-4 mr-2" />
|
||||||
|
Reject Payment
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={() => confirmVerification(true)}
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Approve Payment
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* View Details Dialog */}
|
||||||
|
<Dialog open={showDetailsDialog} onOpenChange={setShowDetailsDialog}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Payment Details</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Complete information for {selectedApplication?.name}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Application Info */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Application Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Application ID</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.id}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Registration Number</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.registrationNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Applicant Name</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Email</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.email}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Phone</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.phone}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Location</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Payment Info */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Payment Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Security Deposit</p>
|
||||||
|
<p className="text-slate-900 text-lg">{selectedApplication?.securityDeposit}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Payment Status</p>
|
||||||
|
<Badge
|
||||||
|
variant={selectedApplication?.paymentStatus === 'Verified' ? 'default' : 'secondary'}
|
||||||
|
className={selectedApplication?.paymentStatus === 'Verified' ? 'bg-green-600' : 'bg-amber-600'}
|
||||||
|
>
|
||||||
|
{selectedApplication?.paymentStatus}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Payment Mode</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.paymentMode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Transaction ID</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.transactionId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Bank Name</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.bankName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Account Number</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Submitted Date</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.submittedDate}</p>
|
||||||
|
</div>
|
||||||
|
{selectedApplication?.paymentStatus === 'Verified' && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Approved Date</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.approvedDate}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{selectedApplication?.paymentStatus === 'Pending Verification' && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">Due Date</p>
|
||||||
|
<p className="text-slate-900">{selectedApplication?.dueDate}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowDetailsDialog(false)}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
{selectedApplication?.paymentStatus === 'Pending Verification' && (
|
||||||
|
<Button
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={() => {
|
||||||
|
setShowDetailsDialog(false);
|
||||||
|
handleVerifyPayment(selectedApplication);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Verify Payment
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
408
src/components/applications/FinancePaymentDetailsPage.tsx
Normal file
408
src/components/applications/FinancePaymentDetailsPage.tsx
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
DollarSign,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Upload,
|
||||||
|
FileText,
|
||||||
|
Calendar,
|
||||||
|
User,
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
Mail,
|
||||||
|
CreditCard,
|
||||||
|
Building,
|
||||||
|
Hash,
|
||||||
|
Wallet
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface FinancePaymentDetailsPageProps {
|
||||||
|
applicationId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock data - in real app this would come from API
|
||||||
|
const getApplicationData = (id: string) => {
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
registrationNumber: 'REG-2024-001',
|
||||||
|
name: 'Amit Sharma',
|
||||||
|
email: 'amit.sharma@email.com',
|
||||||
|
phone: '+91 98765 43210',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
securityDeposit: '₹5,00,000',
|
||||||
|
securityDepositNum: 500000,
|
||||||
|
paymentMode: 'NEFT',
|
||||||
|
transactionId: 'NEFT24567890123',
|
||||||
|
bankName: 'HDFC Bank',
|
||||||
|
accountNumber: '****6789',
|
||||||
|
submittedDate: '2025-10-01',
|
||||||
|
dueDate: '2025-10-08',
|
||||||
|
paymentStatus: 'Pending Verification',
|
||||||
|
documents: [
|
||||||
|
{ name: 'Payment Receipt.pdf', size: '245 KB', uploadedOn: '2025-10-01' },
|
||||||
|
{ name: 'Bank Statement.pdf', size: '512 KB', uploadedOn: '2025-10-01' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function FinancePaymentDetailsPage({ applicationId, onBack }: FinancePaymentDetailsPageProps) {
|
||||||
|
const application = getApplicationData(applicationId);
|
||||||
|
|
||||||
|
const [paymentDetails, setPaymentDetails] = useState({
|
||||||
|
verificationTransactionId: '',
|
||||||
|
receivedAmount: application.securityDepositNum.toString(),
|
||||||
|
receivedDate: new Date().toISOString().split('T')[0],
|
||||||
|
verificationRemarks: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const [uploadedDocuments, setUploadedDocuments] = useState<any[]>([]);
|
||||||
|
|
||||||
|
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const files = event.target.files;
|
||||||
|
if (files && files.length > 0) {
|
||||||
|
const newDocs = Array.from(files).map(file => ({
|
||||||
|
name: file.name,
|
||||||
|
size: `${(file.size / 1024).toFixed(0)} KB`,
|
||||||
|
uploadedOn: new Date().toISOString().split('T')[0]
|
||||||
|
}));
|
||||||
|
setUploadedDocuments([...uploadedDocuments, ...newDocs]);
|
||||||
|
toast.success(`${files.length} document(s) uploaded successfully`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApprovePayment = () => {
|
||||||
|
if (!paymentDetails.verificationTransactionId || !paymentDetails.receivedDate) {
|
||||||
|
toast.error('Please fill in all required payment details');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (paymentDetails.receivedAmount !== application.securityDepositNum.toString()) {
|
||||||
|
toast.warning('Received amount differs from expected amount');
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(`Payment verified and approved for ${application.name}`);
|
||||||
|
setTimeout(() => onBack(), 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRejectPayment = () => {
|
||||||
|
if (!paymentDetails.verificationRemarks) {
|
||||||
|
toast.error('Please provide remarks for rejection');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.error(`Payment rejected for ${application.name}`);
|
||||||
|
setTimeout(() => onBack(), 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="outline" size="icon" onClick={onBack}>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl mb-1">Payment Verification</h1>
|
||||||
|
<p className="text-slate-600">Review and verify advance payment details</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Banner */}
|
||||||
|
<Card className="border-amber-200 bg-amber-50">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
|
||||||
|
<DollarSign className="w-6 h-6 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900">Payment Pending Verification</p>
|
||||||
|
<p className="text-sm text-slate-600">Due Date: {application.dueDate}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-amber-600">
|
||||||
|
{application.paymentStatus}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Left Column - Application & Payment Info */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{/* Application Details */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<User className="w-5 h-5" />
|
||||||
|
Applicant Information
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Application ID</Label>
|
||||||
|
<p className="text-slate-900">{application.id}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Registration Number</Label>
|
||||||
|
<p className="text-slate-900">{application.registrationNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Applicant Name</Label>
|
||||||
|
<p className="text-slate-900">{application.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Email</Label>
|
||||||
|
<p className="text-slate-900">{application.email}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Phone</Label>
|
||||||
|
<p className="text-slate-900">{application.phone}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Location</Label>
|
||||||
|
<p className="text-slate-900">{application.location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Payment Information */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<CreditCard className="w-5 h-5" />
|
||||||
|
Submitted Payment Details
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Security Deposit</Label>
|
||||||
|
<p className="text-slate-900 text-2xl text-green-600">{application.securityDeposit}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Payment Mode</Label>
|
||||||
|
<p className="text-slate-900">{application.paymentMode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Transaction ID</Label>
|
||||||
|
<p className="text-slate-900">{application.transactionId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Bank Name</Label>
|
||||||
|
<p className="text-slate-900">{application.bankName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Account Number</Label>
|
||||||
|
<p className="text-slate-900">{application.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-500">Submitted Date</Label>
|
||||||
|
<p className="text-slate-900">{application.submittedDate}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Submitted Documents */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5" />
|
||||||
|
Submitted Documents
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{application.documents.map((doc, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<FileText className="w-5 h-5 text-slate-400" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900">{doc.name}</p>
|
||||||
|
<p className="text-sm text-slate-500">{doc.size} • Uploaded on {doc.uploadedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Download
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Upload Additional Documents */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Upload className="w-5 h-5" />
|
||||||
|
Upload Additional Documents
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Upload any additional verification documents or receipts
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-amber-400 hover:bg-amber-50 transition-colors">
|
||||||
|
<Upload className="w-8 h-8 text-slate-400 mx-auto mb-2" />
|
||||||
|
<p className="text-slate-600 mb-2">Click to upload or drag and drop</p>
|
||||||
|
<p className="text-sm text-slate-500">PDF, DOC, DOCX, PNG, JPG (max 10MB)</p>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
className="hidden"
|
||||||
|
id="file-upload"
|
||||||
|
onChange={handleFileUpload}
|
||||||
|
accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
|
||||||
|
/>
|
||||||
|
<label htmlFor="file-upload">
|
||||||
|
<Button variant="outline" className="mt-4" asChild>
|
||||||
|
<span>Choose Files</span>
|
||||||
|
</Button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{uploadedDocuments.length > 0 && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Uploaded Documents</Label>
|
||||||
|
{uploadedDocuments.map((doc, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900">{doc.name}</p>
|
||||||
|
<p className="text-sm text-slate-500">{doc.size}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column - Verification Form */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card className="sticky top-6">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Wallet className="w-5 h-5" />
|
||||||
|
Payment Verification
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Enter payment verification details
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="verificationTxnId">
|
||||||
|
Verification Transaction ID <span className="text-red-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="verificationTxnId"
|
||||||
|
placeholder="Enter transaction ID"
|
||||||
|
value={paymentDetails.verificationTransactionId}
|
||||||
|
onChange={(e) => setPaymentDetails({ ...paymentDetails, verificationTransactionId: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="receivedAmount">
|
||||||
|
Received Amount (₹) <span className="text-red-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="receivedAmount"
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter received amount"
|
||||||
|
value={paymentDetails.receivedAmount}
|
||||||
|
onChange={(e) => setPaymentDetails({ ...paymentDetails, receivedAmount: e.target.value })}
|
||||||
|
/>
|
||||||
|
{paymentDetails.receivedAmount !== application.securityDepositNum.toString() && (
|
||||||
|
<p className="text-sm text-amber-600 mt-1 flex items-center gap-1">
|
||||||
|
<XCircle className="w-3 h-3" />
|
||||||
|
Amount differs from expected: {application.securityDeposit}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="receivedDate">
|
||||||
|
Payment Received Date <span className="text-red-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="receivedDate"
|
||||||
|
type="date"
|
||||||
|
value={paymentDetails.receivedDate}
|
||||||
|
onChange={(e) => setPaymentDetails({ ...paymentDetails, receivedDate: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="verificationRemarks">Verification Remarks</Label>
|
||||||
|
<Textarea
|
||||||
|
id="verificationRemarks"
|
||||||
|
placeholder="Enter any remarks or notes..."
|
||||||
|
rows={4}
|
||||||
|
value={paymentDetails.verificationRemarks}
|
||||||
|
onChange={(e) => setPaymentDetails({ ...paymentDetails, verificationRemarks: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t">
|
||||||
|
<Button
|
||||||
|
className="w-full bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={handleApprovePayment}
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Confirm Payment Received
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Quick Info Card */}
|
||||||
|
<Card className="bg-blue-50 border-blue-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Verification Checklist</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="space-y-2 text-sm text-slate-700">
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-600 mt-0.5" />
|
||||||
|
<span>Verify transaction ID matches bank records</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-600 mt-0.5" />
|
||||||
|
<span>Confirm amount received in company account</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-600 mt-0.5" />
|
||||||
|
<span>Review all submitted documents</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-600 mt-0.5" />
|
||||||
|
<span>Upload bank verification receipt if available</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
919
src/components/applications/FnFDetails.tsx
Normal file
919
src/components/applications/FnFDetails.tsx
Normal file
@ -0,0 +1,919 @@
|
|||||||
|
import { ArrowLeft, Check, FileText, Calendar, DollarSign, AlertCircle, Upload, Send, Clock, Users, FileCheck, MessageSquare, Handshake, CheckCircle2 } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User, mockFnFCases, mockDocuments, mockAuditLogs } from '../../lib/mock-data';
|
||||||
|
import { WorkNotesPage } from './WorkNotesPage';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface FnFDetailsProps {
|
||||||
|
fnfId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FnFDetails({ fnfId, onBack, currentUser }: FnFDetailsProps) {
|
||||||
|
const [sendStakeholdersDialog, setSendStakeholdersDialog] = useState(false);
|
||||||
|
|
||||||
|
// Find the F&F case
|
||||||
|
const fnfCase = mockFnFCases.find(c => c.id === fnfId);
|
||||||
|
|
||||||
|
if (!fnfCase) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<p className="text-slate-600">Case not found</p>
|
||||||
|
<Button onClick={onBack} className="mt-4">Go Back</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate age in days from F&F submission date
|
||||||
|
const calculateAge = (startDate: string) => {
|
||||||
|
const start = new Date(startDate);
|
||||||
|
const today = new Date('2025-10-15'); // Using current date from context
|
||||||
|
const diffTime = Math.abs(today.getTime() - start.getTime());
|
||||||
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
return diffDays;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnfAge = calculateAge(fnfCase.submittedOn);
|
||||||
|
|
||||||
|
const canSendToStakeholders = currentUser &&
|
||||||
|
['DD Lead', 'DD Head', 'NBH', 'DD Admin', 'Super Admin'].includes(currentUser.role);
|
||||||
|
|
||||||
|
const handleSendToStakeholders = () => {
|
||||||
|
toast.success('Notifications sent to all 16 departments');
|
||||||
|
setSendStakeholdersDialog(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'New':
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
case 'In Progress':
|
||||||
|
return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
case 'Under Review':
|
||||||
|
return 'bg-orange-100 text-orange-700 border-orange-300';
|
||||||
|
case 'Completed':
|
||||||
|
return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
default:
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDepartmentStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'No Dues':
|
||||||
|
return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
case 'Dues':
|
||||||
|
return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
case 'Pending':
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
default:
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const responsesReceived = fnfCase.departmentResponses.filter(d => d.status !== 'Pending').length;
|
||||||
|
const totalDepartments = fnfCase.departmentResponses.length;
|
||||||
|
const progressPercentage = (responsesReceived / totalDepartments) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="outline" size="icon" onClick={onBack}>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl">{fnfCase.caseNumber}</h1>
|
||||||
|
<p className="text-slate-600">{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={fnfCase.requestType === 'Resignation' ? 'bg-amber-100 text-amber-700 border-amber-300' : 'bg-red-100 text-red-700 border-red-300'}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Button */}
|
||||||
|
{canSendToStakeholders && fnfCase.status === 'New' && (
|
||||||
|
<Button
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
onClick={() => setSendStakeholdersDialog(true)}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Send to Stakeholders
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Summary */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Overall Progress</CardTitle>
|
||||||
|
<CardDescription>Department responses: {responsesReceived} / {totalDepartments}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Progress value={progressPercentage} className="h-3" />
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">No Dues</p>
|
||||||
|
<p className="text-2xl text-green-600">
|
||||||
|
{fnfCase.departmentResponses.filter(d => d.status === 'No Dues').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Dues</p>
|
||||||
|
<p className="text-2xl text-red-600">
|
||||||
|
{fnfCase.departmentResponses.filter(d => d.status === 'Dues').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Pending</p>
|
||||||
|
<p className="text-2xl text-slate-600">
|
||||||
|
{fnfCase.departmentResponses.filter(d => d.status === 'Pending').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Finance Status</p>
|
||||||
|
<p className="text-lg">{fnfCase.financeReportStatus}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<Tabs defaultValue="details" className="w-full">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="progress">Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="details">Case Details</TabsTrigger>
|
||||||
|
<TabsTrigger value="departments">Department Responses</TabsTrigger>
|
||||||
|
<TabsTrigger value="financial">Financial Summary</TabsTrigger>
|
||||||
|
<TabsTrigger value="documents">Documents</TabsTrigger>
|
||||||
|
<TabsTrigger value="worknotes">Work Notes</TabsTrigger>
|
||||||
|
<TabsTrigger value="audit">Audit Trail</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Progress Tab */}
|
||||||
|
<TabsContent value="progress">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>F&F Settlement Progress</CardTitle>
|
||||||
|
<CardDescription>Track the complete journey from initiation to completion</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="relative">
|
||||||
|
{/* Progress Steps */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Step 1: F&F Initiated */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-green-100 border-2 border-green-600 flex items-center justify-center">
|
||||||
|
<Check className="w-6 h-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="w-0.5 h-full bg-green-300 mt-2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">F&F Initiated</h3>
|
||||||
|
<Badge className="bg-green-600">Completed</Badge>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-slate-600">{fnfCase.submittedOn}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
Full & Final settlement process has been initiated. Case created and basic information collected.
|
||||||
|
</p>
|
||||||
|
<Card className="bg-green-50 border-green-200">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Case Number</p>
|
||||||
|
<p className="text-slate-900">{fnfCase.caseNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Request Type</p>
|
||||||
|
<p className="text-slate-900">{fnfCase.requestType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer</p>
|
||||||
|
<p className="text-slate-900">{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p className="text-slate-900">{fnfCase.location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2: Department Responses Received */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 ${
|
||||||
|
responsesReceived === totalDepartments
|
||||||
|
? 'bg-green-100 border-green-600'
|
||||||
|
: responsesReceived > 0
|
||||||
|
? 'bg-blue-100 border-blue-600'
|
||||||
|
: 'bg-slate-100 border-slate-300'
|
||||||
|
}`}>
|
||||||
|
{responsesReceived === totalDepartments ? (
|
||||||
|
<Check className="w-6 h-6 text-green-600" />
|
||||||
|
) : responsesReceived > 0 ? (
|
||||||
|
<Users className="w-6 h-6 text-blue-600" />
|
||||||
|
) : (
|
||||||
|
<Clock className="w-6 h-6 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-0.5 h-full mt-2 ${
|
||||||
|
responsesReceived === totalDepartments ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`}></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">Department Responses Received</h3>
|
||||||
|
<Badge className={
|
||||||
|
responsesReceived === totalDepartments
|
||||||
|
? 'bg-green-600'
|
||||||
|
: responsesReceived > 0
|
||||||
|
? 'bg-blue-600'
|
||||||
|
: 'bg-slate-400'
|
||||||
|
}>
|
||||||
|
{responsesReceived === totalDepartments
|
||||||
|
? 'Completed'
|
||||||
|
: responsesReceived > 0
|
||||||
|
? 'In Progress'
|
||||||
|
: 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{responsesReceived === totalDepartments && (
|
||||||
|
<span className="text-sm text-slate-600">Oct 10, 2025</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
All stakeholder departments submit their NOC or dues information.
|
||||||
|
{responsesReceived > 0 && ` (${responsesReceived}/${totalDepartments} responses received)`}
|
||||||
|
</p>
|
||||||
|
{responsesReceived > 0 && (
|
||||||
|
<Card className={responsesReceived === totalDepartments ? 'bg-green-50 border-green-200' : 'bg-blue-50 border-blue-200'}>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-slate-600">Progress</span>
|
||||||
|
<span className="text-sm">{responsesReceived} / {totalDepartments} departments</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={progressPercentage} className="h-2" />
|
||||||
|
<div className="grid grid-cols-3 gap-3 text-sm">
|
||||||
|
<div className="text-center p-2 bg-green-100 rounded">
|
||||||
|
<p className="text-green-700">No Dues</p>
|
||||||
|
<p className="text-green-900">{fnfCase.departmentResponses.filter(d => d.status === 'No Dues').length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 bg-red-100 rounded">
|
||||||
|
<p className="text-red-700">Dues</p>
|
||||||
|
<p className="text-red-900">{fnfCase.departmentResponses.filter(d => d.status === 'Dues').length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 bg-slate-100 rounded">
|
||||||
|
<p className="text-slate-700">Pending</p>
|
||||||
|
<p className="text-slate-900">{fnfCase.departmentResponses.filter(d => d.status === 'Pending').length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3: Finance Final Summary */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 ${
|
||||||
|
fnfCase.financeReportStatus === 'Completed'
|
||||||
|
? 'bg-green-100 border-green-600'
|
||||||
|
: fnfCase.financeReportStatus === 'In Progress'
|
||||||
|
? 'bg-blue-100 border-blue-600'
|
||||||
|
: 'bg-slate-100 border-slate-300'
|
||||||
|
}`}>
|
||||||
|
{fnfCase.financeReportStatus === 'Completed' ? (
|
||||||
|
<Check className="w-6 h-6 text-green-600" />
|
||||||
|
) : fnfCase.financeReportStatus === 'In Progress' ? (
|
||||||
|
<FileCheck className="w-6 h-6 text-blue-600" />
|
||||||
|
) : (
|
||||||
|
<Clock className="w-6 h-6 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-0.5 h-full mt-2 ${
|
||||||
|
fnfCase.financeReportStatus === 'Completed' ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`}></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">Finance Final Summary</h3>
|
||||||
|
<Badge className={
|
||||||
|
fnfCase.financeReportStatus === 'Completed'
|
||||||
|
? 'bg-green-600'
|
||||||
|
: fnfCase.financeReportStatus === 'In Progress'
|
||||||
|
? 'bg-blue-600'
|
||||||
|
: 'bg-slate-400'
|
||||||
|
}>
|
||||||
|
{fnfCase.financeReportStatus}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{fnfCase.financeReportStatus === 'Completed' && (
|
||||||
|
<span className="text-sm text-slate-600">Oct 12, 2025</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
Finance department consolidates all department responses and prepares final settlement summary with total payable and recovery amounts.
|
||||||
|
</p>
|
||||||
|
{fnfCase.financeReportStatus !== 'Pending' && (
|
||||||
|
<Card className={fnfCase.financeReportStatus === 'Completed' ? 'bg-green-50 border-green-200' : 'bg-blue-50 border-blue-200'}>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="text-center p-3 bg-green-100 rounded-lg">
|
||||||
|
<p className="text-xs text-green-700 mb-1">Payable Amount</p>
|
||||||
|
<p className="text-green-900">₹{fnfCase.totalPayableAmount?.toLocaleString() || '0'}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-red-100 rounded-lg">
|
||||||
|
<p className="text-xs text-red-700 mb-1">Recovery Amount</p>
|
||||||
|
<p className="text-red-900">₹{fnfCase.totalRecoveryAmount?.toLocaleString() || '0'}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-blue-100 rounded-lg">
|
||||||
|
<p className="text-xs text-blue-700 mb-1">Net Amount</p>
|
||||||
|
<p className={
|
||||||
|
(fnfCase.totalRecoveryAmount || 0) > (fnfCase.totalPayableAmount || 0)
|
||||||
|
? 'text-red-900'
|
||||||
|
: 'text-green-900'
|
||||||
|
}>
|
||||||
|
₹{Math.abs((fnfCase.totalRecoveryAmount || 0) - (fnfCase.totalPayableAmount || 0)).toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 4: Financial Discussion with Dealer */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 ${
|
||||||
|
fnfCase.status === 'Settled'
|
||||||
|
? 'bg-green-100 border-green-600'
|
||||||
|
: fnfCase.status === 'Under Review'
|
||||||
|
? 'bg-blue-100 border-blue-600'
|
||||||
|
: 'bg-slate-100 border-slate-300'
|
||||||
|
}`}>
|
||||||
|
{fnfCase.status === 'Settled' ? (
|
||||||
|
<Check className="w-6 h-6 text-green-600" />
|
||||||
|
) : fnfCase.status === 'Under Review' ? (
|
||||||
|
<MessageSquare className="w-6 h-6 text-blue-600" />
|
||||||
|
) : (
|
||||||
|
<Clock className="w-6 h-6 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-0.5 h-full mt-2 ${
|
||||||
|
fnfCase.status === 'Settled' ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`}></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">Financial Discussion with Dealer</h3>
|
||||||
|
<Badge className={
|
||||||
|
fnfCase.status === 'Settled'
|
||||||
|
? 'bg-green-600'
|
||||||
|
: fnfCase.status === 'Under Review'
|
||||||
|
? 'bg-blue-600'
|
||||||
|
: 'bg-slate-400'
|
||||||
|
}>
|
||||||
|
{fnfCase.status === 'Settled'
|
||||||
|
? 'Completed'
|
||||||
|
: fnfCase.status === 'Under Review'
|
||||||
|
? 'In Progress'
|
||||||
|
: 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<span className="text-sm text-slate-600">Oct 14, 2025</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
Finance team, legal team, and relevant departments discuss final settlement with the dealer. Dealer reviews and agrees to the financial terms.
|
||||||
|
</p>
|
||||||
|
{fnfCase.status === 'Under Review' && (
|
||||||
|
<Card className="bg-orange-50 border-orange-200">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-orange-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-orange-900 mb-1">Ongoing Discussions</p>
|
||||||
|
<p className="text-xs text-orange-700">
|
||||||
|
Negotiations in progress regarding recovery/payable amounts. Finance team is working with departments and dealer to resolve discrepancies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<Card className="bg-green-50 border-green-200">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-green-900 mb-1">Agreement Reached</p>
|
||||||
|
<p className="text-xs text-green-700">
|
||||||
|
Dealer has reviewed and agreed to the final settlement terms. Ready for payment processing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 5: Full and Final Settlement */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 ${
|
||||||
|
fnfCase.status === 'Settled'
|
||||||
|
? 'bg-green-100 border-green-600'
|
||||||
|
: 'bg-slate-100 border-slate-300'
|
||||||
|
}`}>
|
||||||
|
{fnfCase.status === 'Settled' ? (
|
||||||
|
<Check className="w-6 h-6 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<Clock className="w-6 h-6 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`w-0.5 h-full mt-2 ${
|
||||||
|
fnfCase.status === 'Settled' ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`}></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">Full and Final Settlement</h3>
|
||||||
|
<Badge className={fnfCase.status === 'Settled' ? 'bg-green-600' : 'bg-slate-400'}>
|
||||||
|
{fnfCase.status === 'Settled' ? 'Completed' : 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<span className="text-sm text-slate-600">Oct 15, 2025</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
All financial settlements are processed. Payments made or recoveries completed as per agreed terms. All documentation finalized.
|
||||||
|
</p>
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<Card className="bg-green-50 border-green-200">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-700">Settlement Processed</span>
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-700">Payment Completed</span>
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-700">Documentation Complete</span>
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 6: F&F Complete */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full flex items-center justify-center border-2 ${
|
||||||
|
fnfCase.status === 'Settled'
|
||||||
|
? 'bg-green-100 border-green-600'
|
||||||
|
: 'bg-slate-100 border-slate-300'
|
||||||
|
}`}>
|
||||||
|
{fnfCase.status === 'Settled' ? (
|
||||||
|
<CheckCircle2 className="w-6 h-6 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<Clock className="w-6 h-6 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h3 className="text-slate-900">F&F Complete</h3>
|
||||||
|
<Badge className={fnfCase.status === 'Settled' ? 'bg-green-600' : 'bg-slate-400'}>
|
||||||
|
{fnfCase.status === 'Settled' ? 'Completed' : 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<span className="text-sm text-slate-600">Oct 15, 2025</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mb-3">
|
||||||
|
Full & Final settlement process completed successfully. Case closed. All obligations fulfilled.
|
||||||
|
</p>
|
||||||
|
{fnfCase.status === 'Settled' && (
|
||||||
|
<Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-300">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center">
|
||||||
|
<CheckCircle2 className="w-7 h-7 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-green-900">Settlement Successfully Completed</p>
|
||||||
|
<p className="text-xs text-green-700 mt-1">
|
||||||
|
All processes completed. Case Number: {fnfCase.caseNumber}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Case Details Tab */}
|
||||||
|
<TabsContent value="details" className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Basic Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Case Number</Label>
|
||||||
|
<p>{fnfCase.caseNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Code</Label>
|
||||||
|
<p>{fnfCase.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Name</Label>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Name</Label>
|
||||||
|
<p>{fnfCase.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Location</Label>
|
||||||
|
<p>{fnfCase.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Request Type</Label>
|
||||||
|
<p>{fnfCase.requestType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Original Request ID</Label>
|
||||||
|
<p>{fnfCase.originalRequestId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted On</Label>
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-blue-200 bg-blue-50/30">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-blue-900">F&F Settlement Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Last Operational Date (Sales)</Label>
|
||||||
|
<p>{fnfCase.lastOperationalDateSales}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Last Operational Date (Services)</Label>
|
||||||
|
<p>{fnfCase.lastOperationalDateServices}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted Date (F&F Start)</Label>
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Age (Days)</Label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<p>{fnfAge} days</p>
|
||||||
|
<Badge variant="outline" className={
|
||||||
|
fnfAge < 30 ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
fnfAge < 60 ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
|
||||||
|
'bg-red-100 text-red-700 border-red-300'
|
||||||
|
}>
|
||||||
|
{fnfAge < 30 ? 'Recent' : fnfAge < 60 ? 'In Progress' : 'Overdue'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Type of Closure</Label>
|
||||||
|
<p>{fnfCase.typeOfClosure}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GST</Label>
|
||||||
|
<p>{fnfCase.gst}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{fnfCase.status === 'Under Review' && (
|
||||||
|
<Card className="border-orange-200 bg-orange-50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-orange-900">Under Review</CardTitle>
|
||||||
|
<CardDescription className="text-orange-700">
|
||||||
|
This case is under negotiation/discussion with the dealer, finance team, legal team, and relevant departments
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-orange-800">
|
||||||
|
Discussions ongoing regarding recovery/payable amounts. Finance team is working with departments to resolve discrepancies.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Department Responses Tab */}
|
||||||
|
<TabsContent value="departments">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Department Responses ({responsesReceived} / {totalDepartments})</CardTitle>
|
||||||
|
<CardDescription>Status of NOC and dues from all departments</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Department</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Amount Type</TableHead>
|
||||||
|
<TableHead>Amount</TableHead>
|
||||||
|
<TableHead>Submitted Date</TableHead>
|
||||||
|
<TableHead>Remarks</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{fnfCase.departmentResponses.map((dept) => (
|
||||||
|
<TableRow key={dept.id}>
|
||||||
|
<TableCell>{dept.departmentName}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getDepartmentStatusColor(dept.status)}>
|
||||||
|
{dept.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{dept.amountType ? (
|
||||||
|
<Badge variant={dept.amountType === 'Recovery Amount' ? 'destructive' : 'default'}>
|
||||||
|
{dept.amountType}
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{dept.amount ? (
|
||||||
|
<span className={dept.amountType === 'Recovery Amount' ? 'text-red-600' : 'text-green-600'}>
|
||||||
|
₹{dept.amount.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{dept.submittedDate || '-'}</TableCell>
|
||||||
|
<TableCell className="max-w-xs truncate">{dept.remarks || '-'}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Financial Summary Tab */}
|
||||||
|
<TabsContent value="financial">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Financial Summary</CardTitle>
|
||||||
|
<CardDescription>Consolidated view of all payable and recovery amounts</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="p-6 bg-green-50 rounded-lg border border-green-200">
|
||||||
|
<p className="text-sm text-green-700 mb-2">Total Payable Amount</p>
|
||||||
|
<p className="text-3xl text-green-600">
|
||||||
|
₹{fnfCase.totalPayableAmount?.toLocaleString() || '0'}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-green-600 mt-1">Amount to be paid to dealer</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 bg-red-50 rounded-lg border border-red-200">
|
||||||
|
<p className="text-sm text-red-700 mb-2">Total Recovery Amount</p>
|
||||||
|
<p className="text-3xl text-red-600">
|
||||||
|
₹{fnfCase.totalRecoveryAmount?.toLocaleString() || '0'}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-red-600 mt-1">Amount to be recovered from dealer</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 bg-blue-50 rounded-lg border border-blue-200">
|
||||||
|
<p className="text-sm text-blue-700 mb-2">Net Amount</p>
|
||||||
|
<p className={`text-3xl ${
|
||||||
|
(fnfCase.totalRecoveryAmount || 0) > (fnfCase.totalPayableAmount || 0)
|
||||||
|
? 'text-red-600'
|
||||||
|
: 'text-green-600'
|
||||||
|
}`}>
|
||||||
|
₹{Math.abs((fnfCase.totalRecoveryAmount || 0) - (fnfCase.totalPayableAmount || 0)).toLocaleString()}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-blue-600 mt-1">
|
||||||
|
{(fnfCase.totalRecoveryAmount || 0) > (fnfCase.totalPayableAmount || 0)
|
||||||
|
? 'Recovery from dealer'
|
||||||
|
: 'Payment to dealer'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Finance Report Status</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Badge className={
|
||||||
|
fnfCase.financeReportStatus === 'Completed' ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
fnfCase.financeReportStatus === 'In Progress' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
|
||||||
|
'bg-slate-100 text-slate-700 border-slate-300'
|
||||||
|
}>
|
||||||
|
{fnfCase.financeReportStatus}
|
||||||
|
</Badge>
|
||||||
|
{fnfCase.financeReportStatus === 'Pending' && (
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Waiting for all department responses before finance can prepare final report
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{fnfCase.financeReportStatus === 'In Progress' && (
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Finance team is reviewing department responses and preparing final settlement report
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{fnfCase.financeRemarks && (
|
||||||
|
<div className="mt-4 p-4 bg-slate-50 rounded-lg">
|
||||||
|
<Label className="text-slate-600">Finance Remarks</Label>
|
||||||
|
<p className="mt-1">{fnfCase.financeRemarks}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Documents Tab */}
|
||||||
|
<TabsContent value="documents">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Documents</CardTitle>
|
||||||
|
<CardDescription>All NOC documents and due statements from departments</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Upload Date</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockDocuments.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FileText className="w-4 h-4 text-slate-500" />
|
||||||
|
<span>{doc.name}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{doc.type}</TableCell>
|
||||||
|
<TableCell>{doc.uploadDate}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={doc.status === 'Verified' ? 'default' : 'secondary'}>
|
||||||
|
{doc.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button size="sm" variant="outline">View</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Work Notes Tab */}
|
||||||
|
<TabsContent value="worknotes">
|
||||||
|
<WorkNotesPage />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Audit Trail Tab */}
|
||||||
|
<TabsContent value="audit">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Audit Trail</CardTitle>
|
||||||
|
<CardDescription>Complete history of actions on this F&F case</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockAuditLogs.map((log) => (
|
||||||
|
<div key={log.id} className="flex gap-4 pb-4 border-b border-slate-200 last:border-0">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-blue-600 mt-2" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<p>{log.action}</p>
|
||||||
|
<span className="text-sm text-slate-600">{log.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-600">{log.user}</p>
|
||||||
|
{log.details && <p className="text-sm text-slate-500 mt-1">{log.details}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* Send to Stakeholders Dialog */}
|
||||||
|
<Dialog open={sendStakeholdersDialog} onOpenChange={setSendStakeholdersDialog}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Send to All Stakeholders</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
This will send notifications to all 16 departments to submit their NOC or dues information
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||||
|
<p className="text-sm text-blue-900 mb-2">Notifications will be sent to:</p>
|
||||||
|
<ul className="text-sm text-blue-800 space-y-1 ml-4">
|
||||||
|
<li>• All 16 departments</li>
|
||||||
|
<li>• Case Number: {fnfCase.caseNumber}</li>
|
||||||
|
<li>• Dealer: {fnfCase.dealerName}</li>
|
||||||
|
<li>• Type: {fnfCase.requestType}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setSendStakeholdersDialog(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSendToStakeholders}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Send Notifications
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
490
src/components/applications/FnFPage.tsx
Normal file
490
src/components/applications/FnFPage.tsx
Normal file
@ -0,0 +1,490 @@
|
|||||||
|
import { DollarSign, Calendar, Building, Eye, Send, FileCheck } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { User, mockFnFCases } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface FnFPageProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'New':
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
case 'In Progress':
|
||||||
|
return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
case 'Under Review':
|
||||||
|
return 'bg-orange-100 text-orange-700 border-orange-300';
|
||||||
|
case 'Completed':
|
||||||
|
return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
default:
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTypeColor = (type: string) => {
|
||||||
|
return type === 'Resignation'
|
||||||
|
? 'bg-amber-100 text-amber-700 border-amber-300'
|
||||||
|
: 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function FnFPage({ currentUser, onViewDetails }: FnFPageProps) {
|
||||||
|
// Check if user can send to stakeholders (DD Lead and above, not Finance)
|
||||||
|
const canSendToStakeholders = currentUser &&
|
||||||
|
['DD Lead', 'DD Head', 'NBH', 'DD Admin', 'Super Admin'].includes(currentUser.role);
|
||||||
|
|
||||||
|
const handleSendToStakeholders = (caseId: string) => {
|
||||||
|
toast.success('Notifications sent to all stakeholders');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>New Cases</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-blue-600">
|
||||||
|
{mockFnFCases.filter(c => c.status === 'New').length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Just Arrived</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>In Progress</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-yellow-600">
|
||||||
|
{mockFnFCases.filter(c => c.status === 'In Progress').length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Awaiting Response</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Under Review</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-orange-600">
|
||||||
|
{mockFnFCases.filter(c => c.status === 'Under Review').length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Discussion Ongoing</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Completed</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-green-600">
|
||||||
|
{mockFnFCases.filter(c => c.status === 'Completed').length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Finalized</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>All Cases</CardDescription>
|
||||||
|
<CardTitle className="text-3xl">{mockFnFCases.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Total</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Full & Final Settlement Cases</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Manage dealer exit dues clearance and settlement
|
||||||
|
{currentUser && ` • Current Role: ${currentUser.role}`}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="all" className="w-full">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="new">New Cases</TabsTrigger>
|
||||||
|
<TabsTrigger value="all">All Cases</TabsTrigger>
|
||||||
|
<TabsTrigger value="progress">In Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="review">Under Review</TabsTrigger>
|
||||||
|
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* New Cases Tab */}
|
||||||
|
<TabsContent value="new" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockFnFCases
|
||||||
|
.filter(c => c.status === 'New')
|
||||||
|
.map((fnfCase) => (
|
||||||
|
<Card key={fnfCase.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-blue-100 rounded-lg">
|
||||||
|
<FileCheck className="w-6 h-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{fnfCase.caseNumber}</h3>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getTypeColor(fnfCase.requestType)}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Code</p>
|
||||||
|
<p>{fnfCase.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealership Name</p>
|
||||||
|
<p>{fnfCase.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{fnfCase.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Original Request ID</p>
|
||||||
|
<p>{fnfCase.originalRequestId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-500" />
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Finance Report</p>
|
||||||
|
<p>{fnfCase.financeReportStatus}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 ml-4">
|
||||||
|
{canSendToStakeholders && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-blue-600 border-blue-300 hover:bg-blue-50"
|
||||||
|
onClick={() => handleSendToStakeholders(fnfCase.id)}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Send to Stakeholders
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(fnfCase.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
{mockFnFCases.filter(c => c.status === 'New').length === 0 && (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<FileCheck className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No new cases to display</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* All Cases Tab */}
|
||||||
|
<TabsContent value="all" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockFnFCases.map((fnfCase) => (
|
||||||
|
<Card key={fnfCase.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className={`p-3 rounded-lg ${
|
||||||
|
fnfCase.status === 'New' ? 'bg-blue-100' :
|
||||||
|
fnfCase.status === 'In Progress' ? 'bg-yellow-100' :
|
||||||
|
fnfCase.status === 'Under Review' ? 'bg-orange-100' :
|
||||||
|
'bg-green-100'
|
||||||
|
}`}>
|
||||||
|
<DollarSign className={`w-6 h-6 ${
|
||||||
|
fnfCase.status === 'New' ? 'text-blue-600' :
|
||||||
|
fnfCase.status === 'In Progress' ? 'text-yellow-600' :
|
||||||
|
fnfCase.status === 'Under Review' ? 'text-orange-600' :
|
||||||
|
'text-green-600'
|
||||||
|
}`} />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{fnfCase.caseNumber}</h3>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getTypeColor(fnfCase.requestType)}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealership Name</p>
|
||||||
|
<p>{fnfCase.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{fnfCase.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 ml-4">
|
||||||
|
{canSendToStakeholders && fnfCase.status === 'New' && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-blue-600 border-blue-300 hover:bg-blue-50"
|
||||||
|
onClick={() => handleSendToStakeholders(fnfCase.id)}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Send to Stakeholders
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(fnfCase.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* In Progress Tab */}
|
||||||
|
<TabsContent value="progress" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockFnFCases
|
||||||
|
.filter(c => c.status === 'In Progress')
|
||||||
|
.map((fnfCase) => (
|
||||||
|
<Card key={fnfCase.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-yellow-100 rounded-lg">
|
||||||
|
<DollarSign className="w-6 h-6 text-yellow-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{fnfCase.caseNumber}</h3>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getTypeColor(fnfCase.requestType)}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Departments Responded</p>
|
||||||
|
<p>
|
||||||
|
{fnfCase.departmentResponses.filter(d => d.status !== 'Pending').length} / {fnfCase.departmentResponses.length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(fnfCase.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
{mockFnFCases.filter(c => c.status === 'In Progress').length === 0 && (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<DollarSign className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No cases in progress</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Under Review Tab */}
|
||||||
|
<TabsContent value="review" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockFnFCases
|
||||||
|
.filter(c => c.status === 'Under Review')
|
||||||
|
.map((fnfCase) => (
|
||||||
|
<Card key={fnfCase.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-orange-100 rounded-lg">
|
||||||
|
<DollarSign className="w-6 h-6 text-orange-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{fnfCase.caseNumber}</h3>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getTypeColor(fnfCase.requestType)}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Recovery Amount</p>
|
||||||
|
<p className="text-red-600">₹{fnfCase.totalRecoveryAmount?.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Payable Amount</p>
|
||||||
|
<p className="text-green-600">₹{fnfCase.totalPayableAmount?.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Finance Status</p>
|
||||||
|
<p>{fnfCase.financeReportStatus}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(fnfCase.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
{mockFnFCases.filter(c => c.status === 'Under Review').length === 0 && (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<DollarSign className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No cases under review</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Completed Tab */}
|
||||||
|
<TabsContent value="completed" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockFnFCases
|
||||||
|
.filter(c => c.status === 'Completed')
|
||||||
|
.map((fnfCase) => (
|
||||||
|
<Card key={fnfCase.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-green-100 rounded-lg">
|
||||||
|
<FileCheck className="w-6 h-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{fnfCase.caseNumber}</h3>
|
||||||
|
<Badge className={getStatusColor(fnfCase.status)}>
|
||||||
|
{fnfCase.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getTypeColor(fnfCase.requestType)}>
|
||||||
|
{fnfCase.requestType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{fnfCase.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Completed On</p>
|
||||||
|
<p>{fnfCase.completedOn || 'N/A'}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{fnfCase.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(fnfCase.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
{mockFnFCases.filter(c => c.status === 'Completed').length === 0 && (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<FileCheck className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No completed cases</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
3288
src/components/applications/MasterPage.tsx
Normal file
3288
src/components/applications/MasterPage.tsx
Normal file
File diff suppressed because it is too large
Load Diff
479
src/components/applications/OpportunityRequestsPage.tsx
Normal file
479
src/components/applications/OpportunityRequestsPage.tsx
Normal file
@ -0,0 +1,479 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { mockApplications, locations, states, ApplicationStatus } from '../../lib/mock-data';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '../ui/select';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Download,
|
||||||
|
CheckCircle,
|
||||||
|
Mail,
|
||||||
|
Grid3x3,
|
||||||
|
List,
|
||||||
|
AlertCircle
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
import { Progress } from '../ui/progress';
|
||||||
|
import { Checkbox } from '../ui/checkbox';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { ApplicationCard } from './ApplicationCard';
|
||||||
|
|
||||||
|
interface OpportunityRequestsPageProps {
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OpportunityRequestsPage({ onViewDetails }: OpportunityRequestsPageProps) {
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'table'>('table');
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
|
const [locationFilter, setLocationFilter] = useState<string>('all');
|
||||||
|
const [stateFilter, setStateFilter] = useState<string>('all');
|
||||||
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||||
|
const [showShortlistModal, setShowShortlistModal] = useState(false);
|
||||||
|
const [shortlistRemark, setShortlistRemark] = useState('');
|
||||||
|
const [assigneeEmail, setAssigneeEmail] = useState('');
|
||||||
|
const [applicationsData, setApplicationsData] = useState(mockApplications);
|
||||||
|
|
||||||
|
// Filter applications that match preferred locations (opportunity requests)
|
||||||
|
// These are applications where we are currently offering dealerships
|
||||||
|
// Shows applications shortlisted by DD but NOT yet shortlisted by DD Lead
|
||||||
|
// IMPORTANT: Only shows applications in early stages (before they enter full workflow)
|
||||||
|
const filteredApplications = applicationsData.filter((app) => {
|
||||||
|
// Only show applications that are:
|
||||||
|
// 1. Shortlisted by DD (isShortlisted = true) - meaning it's an opportunity
|
||||||
|
// 2. NOT yet shortlisted by DD Lead (ddLeadShortlisted !== true) - waiting for DD Lead action
|
||||||
|
// 3. In early stages ONLY (Submitted, Questionnaire Pending, Questionnaire Completed)
|
||||||
|
const isOpportunity = app.isShortlisted === true && !(app as any).ddLeadShortlisted;
|
||||||
|
|
||||||
|
// Only show applications with early-stage statuses
|
||||||
|
const validStatuses: ApplicationStatus[] = ['Submitted', 'Questionnaire Pending', 'Questionnaire Completed'];
|
||||||
|
const isEarlyStage = validStatuses.includes(app.status);
|
||||||
|
|
||||||
|
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.registrationNumber.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
const matchesStatus = statusFilter === 'all' || app.status === statusFilter;
|
||||||
|
const matchesLocation = locationFilter === 'all' || app.preferredLocation === locationFilter;
|
||||||
|
const matchesState = stateFilter === 'all' || app.state === stateFilter;
|
||||||
|
|
||||||
|
return isOpportunity && isEarlyStage && matchesSearch && matchesStatus && matchesLocation && matchesState;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSelectAll = (checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds(filteredApplications.map(app => app.id));
|
||||||
|
} else {
|
||||||
|
setSelectedIds([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectOne = (id: string, checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds([...selectedIds, id]);
|
||||||
|
} else {
|
||||||
|
setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShortlist = () => {
|
||||||
|
if (selectedIds.length === 0) {
|
||||||
|
toast.error('Please select at least one application to shortlist');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setShowShortlistModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmShortlist = () => {
|
||||||
|
if (!assigneeEmail.trim()) {
|
||||||
|
toast.error('Please enter an email to assign the applications');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Email validation
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(assigneeEmail)) {
|
||||||
|
toast.error('Please enter a valid email address');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update applications to mark them as shortlisted by DD Lead
|
||||||
|
const updatedApplications = applicationsData.map(app => {
|
||||||
|
if (selectedIds.includes(app.id)) {
|
||||||
|
return {
|
||||||
|
...app,
|
||||||
|
ddLeadShortlisted: true,
|
||||||
|
assignedTo: assigneeEmail
|
||||||
|
} as any;
|
||||||
|
}
|
||||||
|
return app;
|
||||||
|
});
|
||||||
|
|
||||||
|
setApplicationsData(updatedApplications);
|
||||||
|
setSelectedIds([]);
|
||||||
|
setShowShortlistModal(false);
|
||||||
|
setShortlistRemark('');
|
||||||
|
setAssigneeEmail('');
|
||||||
|
|
||||||
|
toast.success(`${selectedIds.length} application(s) shortlisted and assigned to ${assigneeEmail}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkReminders = () => {
|
||||||
|
if (selectedIds.length === 0) {
|
||||||
|
toast.error('Please select at least one application');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(`Reminder emails sent to ${selectedIds.length} applicant(s)`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// For Opportunity Requests, only show early-stage statuses
|
||||||
|
// These applications haven't entered the full dealership approval workflow yet
|
||||||
|
const statusOptions: ApplicationStatus[] = [
|
||||||
|
'Submitted',
|
||||||
|
'Questionnaire Pending',
|
||||||
|
'Questionnaire Completed'
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: ApplicationStatus) => {
|
||||||
|
const colors: Record<ApplicationStatus, string> = {
|
||||||
|
'Submitted': 'bg-blue-100 text-blue-800',
|
||||||
|
'Questionnaire Pending': 'bg-yellow-100 text-yellow-800',
|
||||||
|
'Questionnaire Completed': 'bg-cyan-100 text-cyan-800',
|
||||||
|
'Shortlisted': 'bg-purple-100 text-purple-800',
|
||||||
|
'Level 1 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'Level 1 Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Level 2 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'Level 2 Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Level 2 Recommended': 'bg-teal-100 text-teal-800',
|
||||||
|
'Level 3 Pending': 'bg-orange-100 text-orange-800',
|
||||||
|
'FDD Verification': 'bg-indigo-100 text-indigo-800',
|
||||||
|
'Payment Pending': 'bg-amber-100 text-amber-800',
|
||||||
|
'LOI Issued': 'bg-sky-100 text-sky-800',
|
||||||
|
'Dealer Code Generation': 'bg-purple-100 text-purple-800',
|
||||||
|
'Architecture Team Assigned': 'bg-blue-100 text-blue-800',
|
||||||
|
'Architecture Document Upload': 'bg-blue-100 text-blue-800',
|
||||||
|
'Architecture Team Completion': 'bg-blue-100 text-blue-800',
|
||||||
|
'Statutory GST': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory PAN': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Nodal': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Check': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Partnership': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Firm Reg': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Virtual Code': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory Domain': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory MSD': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'Statutory LOI Ack': 'bg-emerald-100 text-emerald-800',
|
||||||
|
'EOR In Progress': 'bg-violet-100 text-violet-800',
|
||||||
|
'LOA Pending': 'bg-pink-100 text-pink-800',
|
||||||
|
'Approved': 'bg-green-100 text-green-800',
|
||||||
|
'Rejected': 'bg-red-100 text-red-800',
|
||||||
|
'Disqualified': 'bg-gray-100 text-gray-800'
|
||||||
|
};
|
||||||
|
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Info Banner */}
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<h3 className="text-amber-900 mb-1">DD Lead Workflow - Opportunity Requests</h3>
|
||||||
|
<p className="text-amber-800">
|
||||||
|
This page shows <strong>applications where dealerships are being offered</strong> at the applicant's preferred location.
|
||||||
|
These have been shortlisted by DD and are waiting for your review. Select and <strong>Shortlist</strong> promising candidates
|
||||||
|
to move them to the <strong>Dealership Requests</strong> page for further processing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header with Filters */}
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-6">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Search and Primary Filters */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name or registration number..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Statuses</SelectItem>
|
||||||
|
{statusOptions.map((status) => (
|
||||||
|
<SelectItem key={status} value={status}>{status}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={stateFilter} onValueChange={setStateFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by state" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All States</SelectItem>
|
||||||
|
{states.map((state) => (
|
||||||
|
<SelectItem key={state} value={state}>{state}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-48">
|
||||||
|
<SelectValue placeholder="Filter by location" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Locations</SelectItem>
|
||||||
|
{locations.map((location) => (
|
||||||
|
<SelectItem key={location} value={location}>{location}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'grid' ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('grid')}
|
||||||
|
className={viewMode === 'grid' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
<Grid3x3 className="w-4 h-4 mr-2" />
|
||||||
|
Grid
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'table' ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('table')}
|
||||||
|
className={viewMode === 'table' ? 'bg-amber-600 hover:bg-amber-700' : ''}
|
||||||
|
>
|
||||||
|
<List className="w-4 h-4 mr-2" />
|
||||||
|
Table
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Export
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{selectedIds.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBulkReminders}
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4 mr-2" />
|
||||||
|
Send Reminders ({selectedIds.length})
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleShortlist}
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Shortlist ({selectedIds.length})
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ml-auto">
|
||||||
|
<Badge variant="outline" className="text-slate-600">
|
||||||
|
{filteredApplications.length} pending shortlisting
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Applications Grid/Table */}
|
||||||
|
{viewMode === 'grid' ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<div key={app.id} className="relative">
|
||||||
|
<div className="absolute top-4 left-4 z-10">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(app.id)}
|
||||||
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
||||||
|
className="bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ApplicationCard
|
||||||
|
application={app}
|
||||||
|
onViewDetails={onViewDetails}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filteredApplications.length === 0 && (
|
||||||
|
<div className="col-span-full text-center py-12 text-slate-500 bg-white rounded-lg border border-slate-200">
|
||||||
|
<CheckCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p className="text-lg mb-2">No opportunity requests found</p>
|
||||||
|
<p className="text-sm">Try adjusting your filters</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-12">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.length === filteredApplications.length && filteredApplications.length > 0}
|
||||||
|
onCheckedChange={handleSelectAll}
|
||||||
|
/>
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>Registration</TableHead>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Preferred Location</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Applicant Location</TableHead>
|
||||||
|
<TableHead>Shortlisted</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Applied On</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredApplications.map((app) => (
|
||||||
|
<TableRow
|
||||||
|
key={app.id}
|
||||||
|
className="cursor-pointer hover:bg-slate-50"
|
||||||
|
onClick={() => onViewDetails(app.id)}
|
||||||
|
>
|
||||||
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(app.id)}
|
||||||
|
onCheckedChange={(checked) => handleSelectOne(app.id, checked as boolean)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{app.registrationNumber}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{app.name}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-600">{app.preferredLocation}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(app.status)}>
|
||||||
|
{app.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-600">{app.businessAddress}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">No</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Progress value={app.progress} className="w-20" />
|
||||||
|
<span className="text-slate-600">{app.progress}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-600">{app.submissionDate}</span>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
{filteredApplications.length === 0 && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={9} className="text-center py-12 text-slate-500">
|
||||||
|
<CheckCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p className="text-lg mb-2">No opportunity requests found</p>
|
||||||
|
<p className="text-sm">Try adjusting your filters</p>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shortlist Modal with Email Assignment */}
|
||||||
|
<Dialog open={showShortlistModal} onOpenChange={setShowShortlistModal}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Shortlist & Assign Applications</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
You are about to shortlist {selectedIds.length} application(s). These applications will be moved to the Dealership Requests page.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Assign to User Email *</Label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter email address to assign applications..."
|
||||||
|
value={assigneeEmail}
|
||||||
|
onChange={(e) => setAssigneeEmail(e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
/>
|
||||||
|
<p className="text-slate-500 text-sm mt-1">The selected applications will be assigned to this user for processing</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Shortlisting Remark (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Enter reason for shortlisting these applications..."
|
||||||
|
value={shortlistRemark}
|
||||||
|
onChange={(e) => setShortlistRemark(e.target.value)}
|
||||||
|
className="mt-2"
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => {
|
||||||
|
setShowShortlistModal(false);
|
||||||
|
setAssigneeEmail('');
|
||||||
|
setShortlistRemark('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="flex-1 bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={confirmShortlist}
|
||||||
|
>
|
||||||
|
Confirm Shortlist
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
905
src/components/applications/RelocationRequestDetails.tsx
Normal file
905
src/components/applications/RelocationRequestDetails.tsx
Normal file
@ -0,0 +1,905 @@
|
|||||||
|
import { ArrowLeft, FileText, Calendar, User, Building2, CheckCircle2, Clock, AlertCircle, Upload, Download, Eye, Navigation, MapPin, GitBranch, MessageSquare } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User as UserType } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { mockRelocationRequests } from './RelocationRequestPage';
|
||||||
|
|
||||||
|
interface RelocationRequestDetailsProps {
|
||||||
|
requestId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: UserType | null;
|
||||||
|
onOpenWorknote?: (requestId: string, requestType: 'relocation' | 'constitutional-change' | 'fnf' | 'resignation' | 'termination', requestTitle: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Workflow stages as per the process flow (12 stages with parallel branches)
|
||||||
|
const workflowStages = [
|
||||||
|
{ id: 1, name: 'Request Created', key: 'created', role: 'Dealer' },
|
||||||
|
{ id: 2, name: 'ASM Review', key: 'asm', role: 'ASM' },
|
||||||
|
{ id: 3, name: 'RBM Review', key: 'rbm', role: 'RBM' },
|
||||||
|
{ id: 4, name: 'DD ZM Review', key: 'dd-zm', role: 'DD-ZM' },
|
||||||
|
{ id: 5, name: 'ZBH Review', key: 'zbh', role: 'ZBH' },
|
||||||
|
{ id: 6, name: 'DD Lead Review', key: 'dd-lead', role: 'DD Lead' },
|
||||||
|
{ id: 7, name: 'DD Head Review', key: 'dd-head', role: 'DD Head' },
|
||||||
|
{ id: 8, name: 'NBH Review', key: 'nbh', role: 'NBH' },
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: 'Parallel Processing',
|
||||||
|
key: 'parallel',
|
||||||
|
role: 'Multiple Teams',
|
||||||
|
isParallel: true,
|
||||||
|
branches: [
|
||||||
|
{
|
||||||
|
name: 'Documentation Track',
|
||||||
|
color: 'blue',
|
||||||
|
stages: [
|
||||||
|
{ id: '9a-1', name: 'Documents Collection by H.O', key: 'docs-collection', role: 'DD H.O' },
|
||||||
|
{ id: '9a-2', name: 'New LOA Issuance', key: 'loa-issuance', role: 'DD Admin' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Infrastructure Track',
|
||||||
|
color: 'green',
|
||||||
|
stages: [
|
||||||
|
{ id: '9b-1', name: 'Layout Issuance by Architect', key: 'layout-issuance', role: 'Architect' },
|
||||||
|
{ id: '9b-2', name: 'Infra Completion', key: 'infra-completion', role: 'Dealer' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ id: 10, name: 'NBH Clearance with EOR', key: 'nbh-eor', role: 'NBH' },
|
||||||
|
{ id: 11, name: 'Relocation Complete', key: 'complete', role: 'System' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Required documents list
|
||||||
|
const requiredDocuments = [
|
||||||
|
'Property documents for new location',
|
||||||
|
'Lease/Rental agreement for new location',
|
||||||
|
'NOC from current landlord',
|
||||||
|
'Municipal approvals',
|
||||||
|
'Fire safety certificate',
|
||||||
|
'Pollution clearance',
|
||||||
|
'Layout/Floor plan of new location',
|
||||||
|
'Photos of new location',
|
||||||
|
'Locality map',
|
||||||
|
'Building plan approval',
|
||||||
|
'Electricity connection documents',
|
||||||
|
'Water supply documents'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock uploaded documents
|
||||||
|
const mockUploadedDocuments = [
|
||||||
|
{ id: 1, name: 'Property_Documents.pdf', uploadedOn: '2025-12-20', uploadedBy: 'Dealer', status: 'Verified', category: 'Property' },
|
||||||
|
{ id: 2, name: 'Lease_Agreement.pdf', uploadedOn: '2025-12-20', uploadedBy: 'Dealer', status: 'Verified', category: 'Property' },
|
||||||
|
{ id: 3, name: 'NOC_Current_Landlord.pdf', uploadedOn: '2025-12-21', uploadedBy: 'Dealer', status: 'Pending Verification', category: 'Legal' },
|
||||||
|
{ id: 4, name: 'Municipal_Approval.pdf', uploadedOn: '2025-12-21', uploadedBy: 'Dealer', status: 'Verified', category: 'Statutory' },
|
||||||
|
{ id: 5, name: 'Floor_Plan.pdf', uploadedOn: '2025-12-22', uploadedBy: 'Dealer', status: 'Verified', category: 'Infrastructure' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock workflow history
|
||||||
|
const mockWorkflowHistory = [
|
||||||
|
{
|
||||||
|
stage: 'Request Created',
|
||||||
|
actor: 'Amit Sharma (Dealer)',
|
||||||
|
action: 'Created',
|
||||||
|
date: '2025-12-20 10:30 AM',
|
||||||
|
comments: 'Submitted relocation request to move from Bandra West to Andheri East',
|
||||||
|
status: 'Completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: 'ASM Review',
|
||||||
|
actor: 'Rajesh Kumar (ASM)',
|
||||||
|
action: 'Approved',
|
||||||
|
date: '2025-12-21 02:15 PM',
|
||||||
|
comments: 'Verified proposed location and approved for next stage',
|
||||||
|
status: 'Completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: 'RBM Review',
|
||||||
|
actor: 'Priya Sharma (RBM)',
|
||||||
|
action: 'Approved',
|
||||||
|
date: '2025-12-22 11:00 AM',
|
||||||
|
comments: 'Location feasibility checked and approved',
|
||||||
|
status: 'Completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: 'DD ZM Review',
|
||||||
|
actor: 'Suresh Patel (DD-ZM)',
|
||||||
|
action: 'Under Review',
|
||||||
|
date: '2025-12-23 09:00 AM',
|
||||||
|
comments: 'Reviewing market potential of new location',
|
||||||
|
status: 'In Progress'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock worknotes - Discussion platform for this request
|
||||||
|
const initialWorknotes = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
user: 'Rajesh Kumar',
|
||||||
|
role: 'ASM',
|
||||||
|
message: 'I have visited the proposed location. The area has good visibility and footfall. However, parking might be a concern during peak hours.',
|
||||||
|
timestamp: '2025-12-21 10:30 AM',
|
||||||
|
avatar: 'RK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
user: 'Priya Sharma',
|
||||||
|
role: 'RBM',
|
||||||
|
message: 'Thanks for the site visit update. Can we get clarity on the parking arrangements from the dealer?',
|
||||||
|
timestamp: '2025-12-21 03:45 PM',
|
||||||
|
avatar: 'PS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'We have secured dedicated parking for 15 bikes in the basement. Additionally, there\'s street parking available during non-peak hours.',
|
||||||
|
timestamp: '2025-12-22 09:15 AM',
|
||||||
|
avatar: 'AS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
user: 'Suresh Patel',
|
||||||
|
role: 'DD-ZM',
|
||||||
|
message: 'Good to know about parking. What about the competition analysis in the new area? Any other Royal Enfield dealers nearby?',
|
||||||
|
timestamp: '2025-12-23 11:00 AM',
|
||||||
|
avatar: 'SP'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'Nearest RE dealer is 8km away in Powai. This location will help us tap into the Andheri East market which is currently underserved.',
|
||||||
|
timestamp: '2025-12-23 02:20 PM',
|
||||||
|
avatar: 'AS'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed' || status === 'Verified') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending') || status === 'In Progress') return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
if (status.includes('Collection') || status.includes('Completion')) return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function RelocationRequestDetails({ requestId, onBack, currentUser, onOpenWorknote }: RelocationRequestDetailsProps) {
|
||||||
|
const [isActionDialogOpen, setIsActionDialogOpen] = useState(false);
|
||||||
|
const [actionType, setActionType] = useState<'approve' | 'reject' | 'hold'>('approve');
|
||||||
|
const [comments, setComments] = useState('');
|
||||||
|
const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
|
||||||
|
const [isWorknoteDialogOpen, setIsWorknoteDialogOpen] = useState(false);
|
||||||
|
const [worknotes, setWorknotes] = useState(initialWorknotes);
|
||||||
|
const [newWorknote, setNewWorknote] = useState('');
|
||||||
|
|
||||||
|
// Find the request
|
||||||
|
const request = mockRelocationRequests.find(r => r.id === requestId);
|
||||||
|
|
||||||
|
if (!request) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||||
|
<h2 className="text-slate-900 mb-2">Request Not Found</h2>
|
||||||
|
<p className="text-slate-600 mb-4">The relocation request you're looking for doesn't exist.</p>
|
||||||
|
<Button onClick={onBack}>Go Back</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate current stage index
|
||||||
|
const getCurrentStageIndex = () => {
|
||||||
|
const stageMap: Record<string, number> = {
|
||||||
|
'Dealer': 1,
|
||||||
|
'ASM': 2,
|
||||||
|
'RBM': 3,
|
||||||
|
'DD-ZM': 4,
|
||||||
|
'ZBH': 5,
|
||||||
|
'DD Lead': 6,
|
||||||
|
'DD Head': 7,
|
||||||
|
'NBH': 8,
|
||||||
|
'DD H.O': 9, // Parallel branch A
|
||||||
|
'Architect': 9, // Parallel branch B
|
||||||
|
'Closed': 11
|
||||||
|
};
|
||||||
|
return stageMap[request.currentStage] || 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentStageIndex = getCurrentStageIndex();
|
||||||
|
|
||||||
|
const handleAction = (type: 'approve' | 'reject' | 'hold') => {
|
||||||
|
setActionType(type);
|
||||||
|
setIsActionDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitAction = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const actionText = actionType === 'approve' ? 'approved' : actionType === 'reject' ? 'rejected' : 'put on hold';
|
||||||
|
toast.success(`Request ${actionText} successfully`);
|
||||||
|
|
||||||
|
setIsActionDialogOpen(false);
|
||||||
|
setComments('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadDocument = () => {
|
||||||
|
toast.success('Document uploaded successfully');
|
||||||
|
setIsUploadDialogOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddWorknote = () => {
|
||||||
|
if (newWorknote.trim()) {
|
||||||
|
const newNote = {
|
||||||
|
id: worknotes.length + 1,
|
||||||
|
user: currentUser?.name || 'Anonymous',
|
||||||
|
role: currentUser?.role || 'User',
|
||||||
|
message: newWorknote,
|
||||||
|
timestamp: new Date().toLocaleString(),
|
||||||
|
avatar: currentUser?.name?.slice(0, 2).toUpperCase() || 'AN'
|
||||||
|
};
|
||||||
|
setWorknotes([...worknotes, newNote]);
|
||||||
|
setNewWorknote('');
|
||||||
|
toast.success('Worknote added successfully');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={onBack}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900">{request.id} - Relocation Request Details</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
{request.dealerName} ({request.dealerCode})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Request Overview */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Relocation Overview</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-1">Dealer Details</p>
|
||||||
|
<p className="text-slate-900">{request.dealerName}</p>
|
||||||
|
<p className="text-slate-600 text-sm">{request.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-2">Relocation Route</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4 text-slate-400" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-xs">From</p>
|
||||||
|
<p className="text-slate-900 text-sm">{request.currentLocation}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Navigation className="w-4 h-4 text-amber-600" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-xs">To</p>
|
||||||
|
<p className="text-slate-900 text-sm">{request.proposedLocation}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
Distance: {request.distance}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm mb-1">Request Information</p>
|
||||||
|
<p className="text-slate-900 text-sm">Submitted: {request.submittedOn}</p>
|
||||||
|
<p className="text-slate-600 text-sm">By: {request.submittedBy}</p>
|
||||||
|
<p className="text-slate-900 text-sm mt-2">Current Stage: {request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<p className="text-slate-600 text-sm mb-2">Reason for Relocation</p>
|
||||||
|
<p className="text-slate-900">{request.reason}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
<Card>
|
||||||
|
<Tabs defaultValue="workflow" className="w-full">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="overflow-x-auto -mx-6 px-6">
|
||||||
|
<TabsList className="w-max min-w-full justify-start">
|
||||||
|
<TabsTrigger value="workflow">Workflow Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="documents">Documents</TabsTrigger>
|
||||||
|
<TabsTrigger value="history">History & Audit Trail</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
{/* Workflow Progress Tab */}
|
||||||
|
<TabsContent value="workflow" className="mt-0">
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-slate-900">Overall Progress</span>
|
||||||
|
<span className="text-slate-600">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-3 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-500"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Workflow Stages */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{workflowStages.map((stage, index) => {
|
||||||
|
const isCompleted = index < currentStageIndex - 1;
|
||||||
|
const isCurrent = index === currentStageIndex - 1;
|
||||||
|
const isPending = index > currentStageIndex - 1;
|
||||||
|
|
||||||
|
// Handle parallel branches
|
||||||
|
if (stage.isParallel) {
|
||||||
|
return (
|
||||||
|
<div key={stage.id} className="space-y-4">
|
||||||
|
{/* Parallel stage header */}
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||||
|
isCompleted ? 'bg-green-100' :
|
||||||
|
isCurrent ? 'bg-amber-100' :
|
||||||
|
'bg-slate-100'
|
||||||
|
}`}>
|
||||||
|
<GitBranch className={`w-5 h-5 ${
|
||||||
|
isCompleted ? 'text-green-600' :
|
||||||
|
isCurrent ? 'text-amber-600' :
|
||||||
|
'text-slate-400'
|
||||||
|
}`} />
|
||||||
|
</div>
|
||||||
|
<div className="w-0.5 h-8 bg-slate-200" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-4">
|
||||||
|
<h4 className="text-slate-900">{stage.name}</h4>
|
||||||
|
<p className="text-slate-600 text-sm">Two parallel tracks proceeding simultaneously</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Parallel branches */}
|
||||||
|
<div className="ml-14 grid grid-cols-2 gap-4">
|
||||||
|
{stage.branches?.map((branch, branchIndex) => (
|
||||||
|
<div key={branchIndex} className={`border-2 rounded-lg p-4 ${
|
||||||
|
branch.color === 'blue' ? 'border-blue-200 bg-blue-50' : 'border-green-200 bg-green-50'
|
||||||
|
}`}>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<div className={`w-2 h-2 rounded-full ${
|
||||||
|
branch.color === 'blue' ? 'bg-blue-600' : 'bg-green-600'
|
||||||
|
}`} />
|
||||||
|
<h5 className={branch.color === 'blue' ? 'text-blue-900' : 'text-green-900'}>
|
||||||
|
{branch.name}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{branch.stages.map((subStage) => {
|
||||||
|
const subIsCompleted = currentStageIndex > 9;
|
||||||
|
const subIsCurrent = currentStageIndex === 9 &&
|
||||||
|
((branch.color === 'blue' && request.currentStage === 'DD H.O') ||
|
||||||
|
(branch.color === 'green' && request.currentStage === 'Architect'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={subStage.id} className="flex items-start gap-3">
|
||||||
|
<div className={`w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||||
|
subIsCompleted ? 'bg-green-100' :
|
||||||
|
subIsCurrent ? 'bg-amber-100' :
|
||||||
|
'bg-white'
|
||||||
|
}`}>
|
||||||
|
{subIsCompleted ? (
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||||
|
) : subIsCurrent ? (
|
||||||
|
<Clock className="w-4 h-4 text-amber-600" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="w-4 h-4 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className={`text-sm ${
|
||||||
|
subIsCompleted ? 'text-green-900' :
|
||||||
|
subIsCurrent ? 'text-amber-900' :
|
||||||
|
branch.color === 'blue' ? 'text-blue-800' : 'text-green-800'
|
||||||
|
}`}>
|
||||||
|
{subStage.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-600">{subStage.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="ml-5 w-0.5 h-8 bg-slate-200" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={stage.id} className="flex items-start gap-4">
|
||||||
|
{/* Status Icon */}
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||||
|
isCompleted ? 'bg-green-100' :
|
||||||
|
isCurrent ? 'bg-amber-100' :
|
||||||
|
'bg-slate-100'
|
||||||
|
}`}>
|
||||||
|
{isCompleted ? (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||||||
|
) : isCurrent ? (
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="w-5 h-5 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{index < workflowStages.length - 1 && (
|
||||||
|
<div className={`w-0.5 h-12 ${
|
||||||
|
isCompleted ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stage Info */}
|
||||||
|
<div className={`flex-1 pb-8 ${isCurrent ? 'bg-amber-50 -ml-4 pl-4 pr-4 py-3 rounded-lg border border-amber-200' : ''}`}>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className={`${isCurrent ? 'text-amber-900' : 'text-slate-900'}`}>
|
||||||
|
{stage.name}
|
||||||
|
</h4>
|
||||||
|
<p className={`text-sm ${isCurrent ? 'text-amber-700' : 'text-slate-600'}`}>
|
||||||
|
Responsible: {stage.role}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={
|
||||||
|
isCompleted ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
isCurrent ? 'bg-amber-100 text-amber-700 border-amber-300' :
|
||||||
|
'bg-slate-100 text-slate-500 border-slate-300'
|
||||||
|
}>
|
||||||
|
{isCompleted ? 'Completed' : isCurrent ? 'In Progress' : 'Pending'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Documents Tab */}
|
||||||
|
<TabsContent value="documents" className="mt-0">
|
||||||
|
<Tabs defaultValue="required" className="w-full">
|
||||||
|
<TabsList className="w-full justify-start mb-4">
|
||||||
|
<TabsTrigger value="required">Required for Process</TabsTrigger>
|
||||||
|
<TabsTrigger value="existing">Existing Documents</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Required Documents Sub-tab */}
|
||||||
|
<TabsContent value="required" className="mt-0">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Upload Button */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h4 className="text-slate-900">Required Documents</h4>
|
||||||
|
<Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button size="sm" className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Upload className="w-4 h-4 mr-2" />
|
||||||
|
Upload Document
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Upload Document</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Select the document type and upload the file
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label>Document Type</Label>
|
||||||
|
<select className="w-full mt-1 px-3 py-2 border border-slate-300 rounded-md">
|
||||||
|
{requiredDocuments.map((doc, index) => (
|
||||||
|
<option key={index} value={doc}>
|
||||||
|
{doc}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Upload File</Label>
|
||||||
|
<Input type="file" className="mt-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsUploadDialogOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={handleUploadDocument}
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Required Documents Checklist */}
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{requiredDocuments.map((doc, index) => {
|
||||||
|
const uploaded = mockUploadedDocuments.find(d => d.name.toLowerCase().includes(doc.toLowerCase().split(' ')[0]));
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex items-center gap-2 p-2 rounded border text-sm ${
|
||||||
|
uploaded ? 'bg-green-50 border-green-200' : 'bg-slate-50 border-slate-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{uploaded ? (
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-green-600 flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="w-4 h-4 text-slate-400 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
<span className={uploaded ? 'text-green-900' : 'text-slate-700'}>
|
||||||
|
{doc}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Existing Documents Sub-tab */}
|
||||||
|
<TabsContent value="existing" className="mt-0">
|
||||||
|
{mockUploadedDocuments.length > 0 ? (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-slate-900 mb-3">All Uploaded Documents</h4>
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Category</TableHead>
|
||||||
|
<TableHead>Uploaded On</TableHead>
|
||||||
|
<TableHead>Uploaded By</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockUploadedDocuments.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell className="text-slate-900">
|
||||||
|
{doc.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300">
|
||||||
|
{doc.category}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{doc.uploadedOn}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{doc.uploadedBy}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={getStatusColor(doc.status)}>
|
||||||
|
{doc.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Download className="w-4 h-4 mr-1" />
|
||||||
|
Download
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-slate-500">
|
||||||
|
No documents uploaded yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* History Tab */}
|
||||||
|
<TabsContent value="history" className="mt-0">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockWorkflowHistory.map((entry, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-4 pb-4 border-b border-slate-200 last:border-0">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||||
|
entry.status === 'Completed' ? 'bg-green-100' :
|
||||||
|
entry.status === 'In Progress' ? 'bg-amber-100' :
|
||||||
|
'bg-slate-100'
|
||||||
|
}`}>
|
||||||
|
{entry.status === 'Completed' ? (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-600" />
|
||||||
|
) : entry.status === 'In Progress' ? (
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
) : (
|
||||||
|
<User className="w-5 h-5 text-slate-600" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-slate-900">{entry.stage}</h4>
|
||||||
|
<p className="text-slate-600 text-sm">{entry.actor}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={getStatusColor(entry.status)}>
|
||||||
|
{entry.action}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm mt-2">{entry.comments}</p>
|
||||||
|
<p className="text-slate-500 text-sm mt-1">{entry.date}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</CardContent>
|
||||||
|
</Tabs>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Sidebar - Actions */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Current Status Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Current Status</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Current Stage</p>
|
||||||
|
<p className="text-slate-900">{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Progress</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-300"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-900">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">Distance</p>
|
||||||
|
<p className="text-slate-900">{request.distance}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Actions Card */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Actions</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
{currentUser?.role !== 'Dealer' && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
className="w-full bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={() => handleAction('approve')}
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-4 h-4 mr-2" />
|
||||||
|
Approve Request
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
className="w-full"
|
||||||
|
onClick={() => handleAction('reject')}
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-4 h-4 mr-2" />
|
||||||
|
Reject Request
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="border-t border-slate-200 pt-3 mt-3" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full border-blue-300 text-blue-700 hover:bg-blue-50"
|
||||||
|
onClick={() => {
|
||||||
|
if (onOpenWorknote) {
|
||||||
|
onOpenWorknote(requestId, 'relocation', `${request.dealerName} (${request.dealerCode}) - Relocation Request`);
|
||||||
|
} else {
|
||||||
|
setIsWorknoteDialogOpen(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
Worknotes ({worknotes.length})
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Dialog */}
|
||||||
|
<Dialog open={isActionDialogOpen} onOpenChange={setIsActionDialogOpen}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{actionType === 'approve' ? 'Approve Request' :
|
||||||
|
actionType === 'reject' ? 'Reject Request' :
|
||||||
|
'Put Request on Hold'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Please provide comments for this action. This will be recorded in the audit trail.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitAction} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="comments">Comments *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="comments"
|
||||||
|
value={comments}
|
||||||
|
onChange={(e) => setComments(e.target.value)}
|
||||||
|
placeholder="Enter your comments..."
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsActionDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className={
|
||||||
|
actionType === 'approve' ? 'bg-green-600 hover:bg-green-700' :
|
||||||
|
actionType === 'reject' ? 'bg-red-600 hover:bg-red-700' :
|
||||||
|
'bg-amber-600 hover:bg-amber-700'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{actionType === 'approve' ? 'Approve' :
|
||||||
|
actionType === 'reject' ? 'Reject' :
|
||||||
|
'Put on Hold'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Worknotes Dialog */}
|
||||||
|
<Dialog open={isWorknoteDialogOpen} onOpenChange={setIsWorknoteDialogOpen}>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[80vh]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Worknotes - Discussion Platform</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Collaborate with team members on this relocation request. All discussions are logged and timestamped.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Discussion Thread */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Discussion History ({worknotes.length} messages)</Label>
|
||||||
|
<div className="border border-slate-200 rounded-lg p-4 max-h-96 overflow-y-auto bg-slate-50">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{worknotes.map((note) => (
|
||||||
|
<div key={note.id} className="flex items-start gap-3">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center text-white flex-shrink-0">
|
||||||
|
{note.avatar}
|
||||||
|
</div>
|
||||||
|
{/* Message Content */}
|
||||||
|
<div className="flex-1 bg-white rounded-lg p-3 border border-slate-200">
|
||||||
|
<div className="flex items-start justify-between mb-1">
|
||||||
|
<div>
|
||||||
|
<h5 className="text-slate-900">{note.user}</h5>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-xs">
|
||||||
|
{note.role}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-500 text-xs">{note.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-700 text-sm mt-2">{note.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add New Worknote */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="newWorknote">Add New Worknote</Label>
|
||||||
|
<Textarea
|
||||||
|
id="newWorknote"
|
||||||
|
value={newWorknote}
|
||||||
|
onChange={(e) => setNewWorknote(e.target.value)}
|
||||||
|
placeholder="Type your message here... Share updates, ask questions, or provide feedback."
|
||||||
|
rows={3}
|
||||||
|
className="resize-none"
|
||||||
|
/>
|
||||||
|
<p className="text-slate-500 text-xs">
|
||||||
|
Posting as: {currentUser?.name || 'Anonymous'} ({currentUser?.role || 'User'})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setIsWorknoteDialogOpen(false);
|
||||||
|
setNewWorknote('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
onClick={handleAddWorknote}
|
||||||
|
disabled={!newWorknote.trim()}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
Post Worknote
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
878
src/components/applications/RelocationRequestPage.tsx
Normal file
878
src/components/applications/RelocationRequestPage.tsx
Normal file
@ -0,0 +1,878 @@
|
|||||||
|
import { FileText, Calendar, Building, Plus, Eye, MapPin, Navigation } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface RelocationRequestPageProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock dealer data for auto-fetch
|
||||||
|
const mockDealerData: Record<string, any> = {
|
||||||
|
'DL-MH-001': {
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
currentAddress: '123, MG Road, Bandra West, Mumbai, Maharashtra - 400050',
|
||||||
|
city: 'Mumbai',
|
||||||
|
state: 'Maharashtra',
|
||||||
|
pincode: '400050',
|
||||||
|
dealershipName: 'Royal Enfield Mumbai',
|
||||||
|
gst: '27AABCU9603R1ZX',
|
||||||
|
region: 'West',
|
||||||
|
zone: 'Maharashtra'
|
||||||
|
},
|
||||||
|
'DL-KA-045': {
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
dealerCode: 'DL-KA-045',
|
||||||
|
currentAddress: '456, Brigade Road, Whitefield, Bangalore, Karnataka - 560066',
|
||||||
|
city: 'Bangalore',
|
||||||
|
state: 'Karnataka',
|
||||||
|
pincode: '560066',
|
||||||
|
dealershipName: 'Royal Enfield Bangalore',
|
||||||
|
gst: '29AABCU9603R1ZX',
|
||||||
|
region: 'South',
|
||||||
|
zone: 'Karnataka'
|
||||||
|
},
|
||||||
|
'DL-TN-028': {
|
||||||
|
dealerName: 'Rahul Motors',
|
||||||
|
dealerCode: 'DL-TN-028',
|
||||||
|
currentAddress: '789, Anna Salai, T Nagar, Chennai, Tamil Nadu - 600017',
|
||||||
|
city: 'Chennai',
|
||||||
|
state: 'Tamil Nadu',
|
||||||
|
pincode: '600017',
|
||||||
|
dealershipName: 'Royal Enfield Chennai',
|
||||||
|
gst: '33AABCU9603R1ZX',
|
||||||
|
region: 'South',
|
||||||
|
zone: 'Tamil Nadu'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock relocation requests
|
||||||
|
export const mockRelocationRequests = [
|
||||||
|
{
|
||||||
|
id: 'RLO-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
currentLocation: 'Bandra West, Mumbai',
|
||||||
|
proposedLocation: 'Andheri East, Mumbai',
|
||||||
|
distance: '12 km',
|
||||||
|
reason: 'Better connectivity and higher footfall area',
|
||||||
|
status: 'DD ZM Review',
|
||||||
|
currentStage: 'DD-ZM',
|
||||||
|
submittedOn: '2025-12-20',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 25
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RLO-002',
|
||||||
|
dealerCode: 'DL-KA-045',
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
currentLocation: 'Whitefield, Bangalore',
|
||||||
|
proposedLocation: 'Koramangala, Bangalore',
|
||||||
|
distance: '18 km',
|
||||||
|
reason: 'Expansion to premium market segment',
|
||||||
|
status: 'DD Lead Review',
|
||||||
|
currentStage: 'DD Lead',
|
||||||
|
submittedOn: '2025-12-15',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RLO-003',
|
||||||
|
dealerCode: 'DL-TN-028',
|
||||||
|
dealerName: 'Rahul Motors',
|
||||||
|
currentLocation: 'T Nagar, Chennai',
|
||||||
|
proposedLocation: 'OMR, Chennai',
|
||||||
|
distance: '22 km',
|
||||||
|
reason: 'Moving to IT corridor for better business prospects',
|
||||||
|
status: 'Infra Completion',
|
||||||
|
currentStage: 'Architect',
|
||||||
|
submittedOn: '2025-11-28',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 83
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RLO-004',
|
||||||
|
dealerCode: 'DL-DL-012',
|
||||||
|
dealerName: 'Suresh Auto Pvt Ltd',
|
||||||
|
currentLocation: 'Connaught Place, Delhi',
|
||||||
|
proposedLocation: 'Dwarka, Delhi',
|
||||||
|
distance: '15 km',
|
||||||
|
reason: 'Lower rental costs and larger space availability',
|
||||||
|
status: 'Completed',
|
||||||
|
currentStage: 'Closed',
|
||||||
|
submittedOn: '2025-11-10',
|
||||||
|
submittedBy: 'Dealer',
|
||||||
|
progressPercentage: 100
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
if (status.includes('Collection') || status.includes('Completion')) return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function RelocationRequestPage({ currentUser, onViewDetails }: RelocationRequestPageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [dealerCode, setDealerCode] = useState('');
|
||||||
|
const [dealerData, setDealerData] = useState<any>(null);
|
||||||
|
const [proposedAddress, setProposedAddress] = useState('');
|
||||||
|
const [proposedCity, setProposedCity] = useState('');
|
||||||
|
const [proposedState, setProposedState] = useState('');
|
||||||
|
const [proposedPincode, setProposedPincode] = useState('');
|
||||||
|
const [distance, setDistance] = useState('');
|
||||||
|
const [reason, setReason] = useState('');
|
||||||
|
const [propertyType, setPropertyType] = useState('');
|
||||||
|
const [expectedDate, setExpectedDate] = useState('');
|
||||||
|
const [locationMode, setLocationMode] = useState<'manual' | 'map'>('manual');
|
||||||
|
const [mapCoordinates, setMapCoordinates] = useState({ lat: 19.0760, lng: 72.8777 }); // Default to Mumbai
|
||||||
|
const [selectedLocation, setSelectedLocation] = useState<{ lat: number; lng: number } | null>(null);
|
||||||
|
|
||||||
|
const handleDealerCodeChange = (code: string) => {
|
||||||
|
setDealerCode(code);
|
||||||
|
if (mockDealerData[code]) {
|
||||||
|
setDealerData(mockDealerData[code]);
|
||||||
|
toast.success('Dealer details loaded successfully');
|
||||||
|
} else {
|
||||||
|
setDealerData(null);
|
||||||
|
if (code.trim()) {
|
||||||
|
toast.error('Dealer code not found');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMapClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
// Convert click position to approximate lat/lng (mock calculation)
|
||||||
|
const lat = mapCoordinates.lat + (y - rect.height / 2) / 1000;
|
||||||
|
const lng = mapCoordinates.lng + (x - rect.width / 2) / 1000;
|
||||||
|
|
||||||
|
setSelectedLocation({ lat, lng });
|
||||||
|
|
||||||
|
// Mock reverse geocoding - auto-fill address fields
|
||||||
|
const mockLocations = [
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400001', address: 'Nariman Point, South Mumbai' },
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400051', address: 'Andheri East, Mumbai' },
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400070', address: 'Powai, Mumbai' },
|
||||||
|
{ city: 'Bangalore', state: 'Karnataka', pincode: '560001', address: 'MG Road, Bangalore' },
|
||||||
|
{ city: 'Chennai', state: 'Tamil Nadu', pincode: '600001', address: 'Anna Salai, Chennai' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const randomLocation = mockLocations[Math.floor(Math.random() * mockLocations.length)];
|
||||||
|
setProposedAddress(randomLocation.address);
|
||||||
|
setProposedCity(randomLocation.city);
|
||||||
|
setProposedState(randomLocation.state);
|
||||||
|
setProposedPincode(randomLocation.pincode);
|
||||||
|
|
||||||
|
toast.success('Location selected from map');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetForm = () => {
|
||||||
|
setDealerCode('');
|
||||||
|
setDealerData(null);
|
||||||
|
setProposedAddress('');
|
||||||
|
setProposedCity('');
|
||||||
|
setProposedState('');
|
||||||
|
setProposedPincode('');
|
||||||
|
setDistance('');
|
||||||
|
setReason('');
|
||||||
|
setPropertyType('');
|
||||||
|
setExpectedDate('');
|
||||||
|
setLocationMode('manual');
|
||||||
|
setSelectedLocation(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitRequest = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!dealerData) {
|
||||||
|
toast.error('Please enter a valid dealer code');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!proposedAddress.trim() || !proposedCity.trim() || !proposedState.trim() || !proposedPincode.trim()) {
|
||||||
|
toast.error('Please enter complete proposed location details');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!distance.trim()) {
|
||||||
|
toast.error('Please enter distance from current location');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reason.trim()) {
|
||||||
|
toast.error('Please provide a reason for relocation');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!propertyType) {
|
||||||
|
toast.error('Please select property type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('Relocation request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
handleResetForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter requests based on user role
|
||||||
|
const getFilteredRequests = () => {
|
||||||
|
// For now, showing all requests. In real implementation, filter by role permissions
|
||||||
|
return mockRelocationRequests;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredRequests = getFilteredRequests();
|
||||||
|
|
||||||
|
// Statistics
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Total Requests',
|
||||||
|
value: filteredRequests.length,
|
||||||
|
icon: FileText,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'In Progress',
|
||||||
|
value: filteredRequests.filter(r => r.status !== 'Completed' && !r.status.includes('Rejected')).length,
|
||||||
|
icon: Calendar,
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Completed',
|
||||||
|
value: filteredRequests.filter(r => r.status === 'Completed').length,
|
||||||
|
icon: MapPin,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Action',
|
||||||
|
value: filteredRequests.filter(r => r.status.includes('Review') || r.status.includes('Pending')).length,
|
||||||
|
icon: Building,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">Relocation Request Management</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Manage dealer relocation requests - Moving dealership to a new location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
New Relocation Request
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Relocation Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Submit a request for dealership relocation. All fields are mandatory.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitRequest} className="space-y-4">
|
||||||
|
{/* Dealer Code */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerCode">Dealer Code *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerCode"
|
||||||
|
placeholder="Enter dealer code (e.g., DL-MH-001)"
|
||||||
|
value={dealerCode}
|
||||||
|
onChange={(e) => handleDealerCodeChange(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auto-populated Dealer Details */}
|
||||||
|
{dealerData && (
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-3">
|
||||||
|
<h3 className="text-slate-900">Current Dealership Details</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Name:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealership Name:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="text-slate-600">Current Location:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.currentAddress}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">GST:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Region/Zone:</span>
|
||||||
|
<p className="text-slate-900">{dealerData.region} / {dealerData.zone}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Proposed New Location */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-slate-900">Proposed New Location *</h3>
|
||||||
|
|
||||||
|
{/* Location Mode Toggle */}
|
||||||
|
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setLocationMode('manual')}
|
||||||
|
className={`px-3 py-1 rounded text-sm transition-colors ${
|
||||||
|
locationMode === 'manual'
|
||||||
|
? 'bg-white text-slate-900 shadow-sm'
|
||||||
|
: 'text-slate-600 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Manual Entry
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setLocationMode('map')}
|
||||||
|
className={`px-3 py-1 rounded text-sm transition-colors flex items-center gap-1 ${
|
||||||
|
locationMode === 'map'
|
||||||
|
? 'bg-white text-slate-900 shadow-sm'
|
||||||
|
: 'text-slate-600 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<MapPin className="w-3 h-3" />
|
||||||
|
Map Location
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map Mode */}
|
||||||
|
{locationMode === 'map' && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Map Picker */}
|
||||||
|
<div className="border-2 border-amber-300 rounded-lg overflow-hidden">
|
||||||
|
<div
|
||||||
|
onClick={handleMapClick}
|
||||||
|
className="relative h-64 bg-gradient-to-br from-green-100 via-blue-50 to-amber-50 cursor-crosshair"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `
|
||||||
|
linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px)
|
||||||
|
`,
|
||||||
|
backgroundSize: '20px 20px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Map Roads/Features */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute top-1/4 left-0 right-0 h-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute top-1/2 left-0 right-0 h-2 bg-slate-400 opacity-40" />
|
||||||
|
<div className="absolute top-3/4 left-0 right-0 h-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute left-1/4 top-0 bottom-0 w-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute left-1/2 top-0 bottom-0 w-2 bg-slate-400 opacity-40" />
|
||||||
|
<div className="absolute left-3/4 top-0 bottom-0 w-1 bg-slate-300 opacity-30" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Center Marker (current location) */}
|
||||||
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<Building className="w-6 h-6 text-blue-600" />
|
||||||
|
<div className="text-xs text-blue-900 bg-white px-2 py-1 rounded shadow-sm mt-1">
|
||||||
|
Current Location
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Selected Location Marker */}
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="absolute top-1/3 left-2/3 transform -translate-x-1/2 -translate-y-full">
|
||||||
|
<div className="flex flex-col items-center animate-bounce">
|
||||||
|
<MapPin className="w-8 h-8 text-amber-600 drop-shadow-lg" />
|
||||||
|
<div className="text-xs text-amber-900 bg-amber-100 px-2 py-1 rounded shadow-md border border-amber-300">
|
||||||
|
New Location
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Instructions */}
|
||||||
|
<div className="absolute bottom-2 left-2 bg-white/90 px-3 py-2 rounded shadow-sm border border-slate-200">
|
||||||
|
<p className="text-xs text-slate-700">
|
||||||
|
<MapPin className="w-3 h-3 inline mr-1" />
|
||||||
|
Click anywhere on the map to select new location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Coordinates Display */}
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="absolute top-2 right-2 bg-amber-600 text-white px-3 py-2 rounded shadow-md text-xs">
|
||||||
|
Lat: {selectedLocation.lat.toFixed(4)}, Lng: {selectedLocation.lng.toFixed(4)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-800">
|
||||||
|
✓ Location selected! Address details auto-filled below.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Manual Entry Mode - Address Fields */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedAddress">Complete Address *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedAddress"
|
||||||
|
placeholder="Building/Shop number, Street, Locality"
|
||||||
|
value={proposedAddress}
|
||||||
|
onChange={(e) => setProposedAddress(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedCity">City *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedCity"
|
||||||
|
placeholder="City"
|
||||||
|
value={proposedCity}
|
||||||
|
onChange={(e) => setProposedCity(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedState">State *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedState"
|
||||||
|
placeholder="State"
|
||||||
|
value={proposedState}
|
||||||
|
onChange={(e) => setProposedState(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedPincode">Pincode *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedPincode"
|
||||||
|
placeholder="Pincode"
|
||||||
|
value={proposedPincode}
|
||||||
|
onChange={(e) => setProposedPincode(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Distance & Property Details */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="distance">Distance from Current Location *</Label>
|
||||||
|
<Input
|
||||||
|
id="distance"
|
||||||
|
placeholder="e.g., 12 km"
|
||||||
|
value={distance}
|
||||||
|
onChange={(e) => setDistance(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="propertyType">Property Type *</Label>
|
||||||
|
<Select value={propertyType} onValueChange={setPropertyType} required>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select property type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Owned">Owned</SelectItem>
|
||||||
|
<SelectItem value="Leased">Leased</SelectItem>
|
||||||
|
<SelectItem value="Rented">Rented</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expected Relocation Date */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="expectedDate">Expected Relocation Date</Label>
|
||||||
|
<Input
|
||||||
|
id="expectedDate"
|
||||||
|
type="date"
|
||||||
|
value={expectedDate}
|
||||||
|
onChange={(e) => setExpectedDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reason */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Reason for Relocation *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="reason"
|
||||||
|
placeholder="Provide detailed reason for relocation request..."
|
||||||
|
value={reason}
|
||||||
|
onChange={(e) => setReason(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Required Documents Info */}
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<h4 className="text-blue-900 mb-2">Documents Required (to be uploaded later)</h4>
|
||||||
|
<ul className="text-blue-800 text-sm space-y-1">
|
||||||
|
<li>• Property documents for new location</li>
|
||||||
|
<li>• Lease/Rental agreement for new location</li>
|
||||||
|
<li>• NOC from current landlord</li>
|
||||||
|
<li>• Municipal approvals</li>
|
||||||
|
<li>• Fire safety certificate</li>
|
||||||
|
<li>• Pollution clearance</li>
|
||||||
|
<li>• Layout/Floor plan of new location</li>
|
||||||
|
<li>• Photos of new location</li>
|
||||||
|
<li>• Locality map</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
disabled={!dealerData}
|
||||||
|
>
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistics Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-sm">{stat.title}</p>
|
||||||
|
<p className="text-slate-900 text-2xl mt-1">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
<div className={`${stat.color} w-12 h-12 rounded-lg flex items-center justify-center`}>
|
||||||
|
<Icon className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Requests Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Relocation Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Track and manage all dealership relocation requests across all stages
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="all" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-4">
|
||||||
|
<TabsTrigger value="all">All Requests</TabsTrigger>
|
||||||
|
<TabsTrigger value="pending">Pending</TabsTrigger>
|
||||||
|
<TabsTrigger value="in-progress">In Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="all" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Relocation Details</TableHead>
|
||||||
|
<TableHead>Distance</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="flex items-center gap-1 text-slate-600 text-sm">
|
||||||
|
<span className="text-slate-500">From:</span>
|
||||||
|
<span>{request.currentLocation}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 text-slate-900 text-sm">
|
||||||
|
<Navigation className="w-3 h-3 text-amber-600" />
|
||||||
|
<span className="text-slate-500">To:</span>
|
||||||
|
<span>{request.proposedLocation}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.distance}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-300"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-600 text-sm">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="text-slate-900">{request.submittedOn}</div>
|
||||||
|
<div className="text-slate-600 text-sm">By {request.submittedBy}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="pending" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Relocation Details</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status.includes('Review') || r.status.includes('Pending'))
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-slate-600 text-sm">From: {request.currentLocation}</div>
|
||||||
|
<div className="text-slate-900 text-sm">To: {request.proposedLocation}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="in-progress" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Relocation Details</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Current Stage</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status !== 'Completed' && !r.status.includes('Rejected'))
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-slate-600 text-sm">From: {request.currentLocation}</div>
|
||||||
|
<div className="text-slate-900 text-sm">To: {request.proposedLocation}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-amber-600 transition-all duration-300"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-600 text-sm">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-slate-700">
|
||||||
|
{request.currentStage}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="completed" className="mt-4">
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-slate-50">
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Dealer Details</TableHead>
|
||||||
|
<TableHead>Relocation Details</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredRequests
|
||||||
|
.filter(r => r.status === 'Completed')
|
||||||
|
.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.id}</div>
|
||||||
|
<div className="text-slate-600 text-sm">{request.dealerCode}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium text-slate-900">{request.dealerName}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-slate-600 text-sm">From: {request.currentLocation}</div>
|
||||||
|
<div className="text-slate-900 text-sm">To: {request.proposedLocation}</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="text-slate-900">{request.submittedOn}</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
765
src/components/applications/ResignationDetails.tsx
Normal file
765
src/components/applications/ResignationDetails.tsx
Normal file
@ -0,0 +1,765 @@
|
|||||||
|
import { ArrowLeft, Check, X, RotateCcw, UserPlus, MessageSquare, FileText, Calendar, TrendingUp, Send } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User, mockWorkNotes, mockDocuments, mockAuditLogs } from '../../lib/mock-data';
|
||||||
|
import { WorkNotesPage } from './WorkNotesPage';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface ResignationDetailsProps {
|
||||||
|
resignationId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ResignationDetails({ resignationId, onBack, currentUser }: ResignationDetailsProps) {
|
||||||
|
const [actionDialog, setActionDialog] = useState<{ open: boolean; type: 'approve' | 'withdrawal' | 'sendback' | 'assign' | 'pushfnf' | null }>({ open: false, type: null });
|
||||||
|
const [workNotesOpen, setWorkNotesOpen] = useState(false);
|
||||||
|
const [remarks, setRemarks] = useState('');
|
||||||
|
const [assignToUser, setAssignToUser] = useState('');
|
||||||
|
const [stageDocumentsDialog, setStageDocumentsDialog] = useState<{ open: boolean; stageName: string; documents: any[] }>({ open: false, stageName: '', documents: [] });
|
||||||
|
|
||||||
|
// Check if user can push to F&F (DD Lead and above)
|
||||||
|
const canPushToFnF = currentUser && ['DD Lead', 'DD Head', 'NBH', 'DD Admin', 'Super Admin'].includes(currentUser.role);
|
||||||
|
|
||||||
|
// Mock data - would come from API
|
||||||
|
const request = {
|
||||||
|
id: resignationId,
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
address: '123, MG Road, Bandra West, Mumbai',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Mumbai Central',
|
||||||
|
dealershipName: 'Royal Enfield Mumbai',
|
||||||
|
gst: '27AABCU9603R1ZX',
|
||||||
|
salesCode: 'SAL-MH-001',
|
||||||
|
serviceCode: 'SRV-MH-001',
|
||||||
|
accessoriesCode: 'ACC-MH-001',
|
||||||
|
gmaCode: 'GMA-MH-001',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
inauguration: 'March 2020',
|
||||||
|
loa: 'February 2020',
|
||||||
|
loi: 'January 2020',
|
||||||
|
lastSixMonthsSales: '₹85,00,000',
|
||||||
|
numberOfDealerships: '2',
|
||||||
|
numberOfStudios: '1',
|
||||||
|
constitution: 'PVT. LTD.',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
typeOfClosure: 'Complete',
|
||||||
|
formatCategory: 'A+',
|
||||||
|
dealerScoreCardBand: 'Gold',
|
||||||
|
resignationReason: 'Personal Health Reasons',
|
||||||
|
customerDescription: 'Due to ongoing health issues and family commitments, I am unable to continue managing the dealership operations effectively. After careful consideration, I have decided to resign from my position.',
|
||||||
|
status: 'ASM Review',
|
||||||
|
currentStage: 'ASM',
|
||||||
|
submittedOn: '2025-10-08',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock documents by stage
|
||||||
|
const stageDocuments: Record<string, any[]> = {
|
||||||
|
'Request Submitted': [
|
||||||
|
{ id: 1, name: 'Resignation Application Form.pdf', type: 'Application', uploadDate: '2025-10-08', uploader: 'DD Lead' },
|
||||||
|
{ id: 2, name: 'Dealer Profile.pdf', type: 'Profile', uploadDate: '2025-10-08', uploader: 'DD Lead' }
|
||||||
|
],
|
||||||
|
'ASM Review': [
|
||||||
|
{ id: 3, name: 'ASM Review Report.pdf', type: 'Review', uploadDate: '2025-10-09', uploader: 'ASM - Mumbai' },
|
||||||
|
{ id: 4, name: 'Sales Performance Report.xlsx', type: 'Report', uploadDate: '2025-10-09', uploader: 'ASM - Mumbai' },
|
||||||
|
{ id: 5, name: 'Customer Feedback Summary.pdf', type: 'Feedback', uploadDate: '2025-10-09', uploader: 'ASM - Mumbai' }
|
||||||
|
],
|
||||||
|
'RBM + DD ZM Review': [
|
||||||
|
{ id: 6, name: 'RBM Evaluation.pdf', type: 'Evaluation', uploadDate: '2025-10-10', uploader: 'RBM - West Zone' },
|
||||||
|
{ id: 7, name: 'DD ZM Assessment.pdf', type: 'Assessment', uploadDate: '2025-10-10', uploader: 'DD ZM - West' }
|
||||||
|
],
|
||||||
|
'ZBH Review': [
|
||||||
|
{ id: 8, name: 'ZBH Approval Document.pdf', type: 'Approval', uploadDate: '2025-10-11', uploader: 'ZBH - West Zone' }
|
||||||
|
],
|
||||||
|
'DD Lead Review': [],
|
||||||
|
'NBH Approval': [],
|
||||||
|
'Legal - Resignation Letter': []
|
||||||
|
};
|
||||||
|
|
||||||
|
const progressStages = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Request Submitted',
|
||||||
|
status: 'completed',
|
||||||
|
date: '2025-10-08',
|
||||||
|
description: 'Resignation request created by DD Lead',
|
||||||
|
actionType: 'approved',
|
||||||
|
actionBy: 'DD Lead',
|
||||||
|
remarks: 'Initial resignation request submitted with all required documentation.',
|
||||||
|
feedback: 'Request is complete and ready for ASM review.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'ASM Review',
|
||||||
|
status: request.currentStage === 'ASM' ? 'active' : request.currentStage === 'ASM' ? 'pending' : 'completed',
|
||||||
|
date: request.currentStage === 'ASM' ? '2025-10-09' : undefined,
|
||||||
|
description: 'Area Sales Manager review',
|
||||||
|
actionType: request.currentStage === 'ASM' ? undefined : 'approved',
|
||||||
|
actionBy: request.currentStage === 'ASM' ? undefined : 'ASM - Mumbai',
|
||||||
|
remarks: request.currentStage === 'ASM' ? undefined : 'Reviewed dealer performance and resignation request. All documentation verified.',
|
||||||
|
feedback: request.currentStage === 'ASM' ? undefined : 'Dealer has maintained good performance. Recommended for approval at next level.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'RBM + DD ZM Review',
|
||||||
|
status: request.currentStage === 'RBM' || request.currentStage === 'DD ZM' ? 'active' : ['Legal', 'NBH', 'DD Lead', 'ZBH'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Regional Business Manager and DD ZM evaluation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'ZBH Review',
|
||||||
|
status: request.currentStage === 'ZBH' ? 'active' : ['Legal', 'NBH', 'DD Lead'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Zonal Business Head approval'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'DD Lead Review',
|
||||||
|
status: request.currentStage === 'DD Lead' ? 'active' : ['Legal', 'NBH'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'DD Lead final review'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'NBH Approval',
|
||||||
|
status: request.currentStage === 'NBH' ? 'active' : request.currentStage === 'Legal' ? 'completed' : 'pending',
|
||||||
|
description: 'National Business Head approval'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'Legal - Resignation Letter',
|
||||||
|
status: request.currentStage === 'Legal' ? 'active' : 'pending',
|
||||||
|
description: 'Legal team issues resignation approval letter'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleViewStageDocuments = (stageName: string) => {
|
||||||
|
const documents = stageDocuments[stageName] || [];
|
||||||
|
setStageDocumentsDialog({ open: true, stageName, documents });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAction = (type: 'approve' | 'withdrawal' | 'sendback' | 'assign') => {
|
||||||
|
setActionDialog({ open: true, type });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitAction = () => {
|
||||||
|
if (!remarks && actionDialog.type !== 'assign') {
|
||||||
|
toast.error('Please provide remarks');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (actionDialog.type === 'assign' && !assignToUser) {
|
||||||
|
toast.error('Please select a user');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const actionMessages = {
|
||||||
|
approve: 'Request approved successfully',
|
||||||
|
withdrawal: 'Request withdrawn successfully',
|
||||||
|
sendback: 'Request sent back for clarification',
|
||||||
|
assign: `Request assigned to ${assignToUser}`,
|
||||||
|
pushfnf: 'Request pushed to F&F successfully'
|
||||||
|
};
|
||||||
|
|
||||||
|
toast.success(actionMessages[actionDialog.type!]);
|
||||||
|
setActionDialog({ open: false, type: null });
|
||||||
|
setRemarks('');
|
||||||
|
setAssignToUser('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const workNotesCount = mockWorkNotes.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="outline" size="icon" onClick={onBack} className="hover:bg-slate-100 transition-colors">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl">{resignationId}</h1>
|
||||||
|
<p className="text-slate-600">{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-yellow-100 text-yellow-700 border-yellow-300">
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Bar - Professional Layout */}
|
||||||
|
<Card className="border-slate-200 shadow-sm">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Primary Actions Row */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-slate-600 mr-2">Workflow Actions:</span>
|
||||||
|
{currentUser?.role !== 'Dealer' && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="bg-green-600 hover:bg-green-700 transition-all hover:shadow-md"
|
||||||
|
onClick={() => handleAction('approve')}
|
||||||
|
>
|
||||||
|
<Check className="w-4 h-4 mr-2" />
|
||||||
|
Approve
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="hover:bg-slate-50 transition-all"
|
||||||
|
onClick={() => handleAction('sendback')}
|
||||||
|
>
|
||||||
|
<RotateCcw className="w-4 h-4 mr-2" />
|
||||||
|
Send Back
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-red-600 border-red-300 hover:bg-red-50 transition-all"
|
||||||
|
onClick={() => handleAction('withdrawal')}
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4 mr-2" />
|
||||||
|
Withdrawal
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Actions */}
|
||||||
|
{currentUser?.role !== 'Dealer' && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{canPushToFnF && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-blue-600 border-blue-300 hover:bg-blue-50 transition-all"
|
||||||
|
onClick={() => handleAction('pushfnf')}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Push to F&F
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="hover:bg-slate-50 transition-all"
|
||||||
|
onClick={() => handleAction('assign')}
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4 mr-2" />
|
||||||
|
Assign User
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Work Notes Button - Independent Section */}
|
||||||
|
<div className="flex items-center justify-between pt-4 border-t border-slate-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-4 h-4 text-slate-500" />
|
||||||
|
<span className="text-sm text-slate-600">Communication & Notes</span>
|
||||||
|
</div>
|
||||||
|
<Dialog open={workNotesOpen} onOpenChange={setWorkNotesOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="relative hover:bg-amber-50 hover:border-amber-300 hover:text-amber-700 transition-all"
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
View Work Notes
|
||||||
|
{workNotesCount > 0 && (
|
||||||
|
<Badge className="ml-2 bg-amber-600 hover:bg-amber-700 text-white h-5 px-2">
|
||||||
|
{workNotesCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-5 h-5 text-amber-600" />
|
||||||
|
Work Notes - {resignationId}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
View all communications and internal notes for this resignation request
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<WorkNotesPage />
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<Tabs defaultValue="details" className="w-full">
|
||||||
|
<TabsList className="bg-slate-100 p-1">
|
||||||
|
<TabsTrigger value="details" className="data-[state=active]:bg-white">Details</TabsTrigger>
|
||||||
|
<TabsTrigger value="progress" className="data-[state=active]:bg-white">Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="documents" className="data-[state=active]:bg-white">Documents</TabsTrigger>
|
||||||
|
<TabsTrigger value="audit" className="data-[state=active]:bg-white">Audit Trail</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Details Tab */}
|
||||||
|
<TabsContent value="details" className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Request Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Code</Label>
|
||||||
|
<p>{request.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Name</Label>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GST</Label>
|
||||||
|
<p>{request.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<Label className="text-slate-600">Address</Label>
|
||||||
|
<p>{request.address}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">City Category</Label>
|
||||||
|
<p>{request.cityCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Domain Name</Label>
|
||||||
|
<p>{request.domainName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Name</Label>
|
||||||
|
<p>{request.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Sales Code</Label>
|
||||||
|
<p>{request.salesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Service Code</Label>
|
||||||
|
<p>{request.serviceCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Accessories Code</Label>
|
||||||
|
<p>{request.accessoriesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GMA Code</Label>
|
||||||
|
<p>{request.gmaCode}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Operational Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Inauguration</Label>
|
||||||
|
<p>{request.inauguration}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">LOA</Label>
|
||||||
|
<p>{request.loa}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">LOI</Label>
|
||||||
|
<p>{request.loi}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Last 6 Months Sales</Label>
|
||||||
|
<p>{request.lastSixMonthsSales}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Number of Dealerships</Label>
|
||||||
|
<p>{request.numberOfDealerships}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Number of Studios</Label>
|
||||||
|
<p>{request.numberOfStudios}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Constitution</Label>
|
||||||
|
<p>{request.constitution}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Type</Label>
|
||||||
|
<p>{request.dealershipType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Type of Closure</Label>
|
||||||
|
<p>{request.typeOfClosure}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Format Category</Label>
|
||||||
|
<p>{request.formatCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Score Card Band</Label>
|
||||||
|
<p>{request.dealerScoreCardBand}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Resignation Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Resignation Reason</Label>
|
||||||
|
<p>{request.resignationReason}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Customer Description</Label>
|
||||||
|
<p>{request.customerDescription}</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted By</Label>
|
||||||
|
<p>{request.submittedBy}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted On</Label>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Progress Tab */}
|
||||||
|
<TabsContent value="progress">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Progress Timeline</CardTitle>
|
||||||
|
<CardDescription>Track the resignation request approval process</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{progressStages.map((stage, index) => {
|
||||||
|
const documentCount = stageDocuments[stage.name]?.length || 0;
|
||||||
|
return (
|
||||||
|
<div key={stage.id} className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||||
|
stage.status === 'completed' ? 'bg-green-100 text-green-600' :
|
||||||
|
stage.status === 'active' ? 'bg-blue-100 text-blue-600' :
|
||||||
|
'bg-slate-100 text-slate-400'
|
||||||
|
}`}>
|
||||||
|
{stage.status === 'completed' ? (
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<span>{stage.id}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{index < progressStages.length - 1 && (
|
||||||
|
<div className={`w-0.5 ${
|
||||||
|
stage.remarks ? 'h-32' : 'h-16'
|
||||||
|
} ${
|
||||||
|
stage.status === 'completed' ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h3 className={
|
||||||
|
stage.status === 'completed' ? 'text-green-600' :
|
||||||
|
stage.status === 'active' ? 'text-blue-600' :
|
||||||
|
'text-slate-400'
|
||||||
|
}>{stage.name}</h3>
|
||||||
|
{documentCount > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewStageDocuments(stage.name)}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
<FileText className="w-3 h-3" />
|
||||||
|
<span>{documentCount} {documentCount === 1 ? 'doc' : 'docs'}</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{stage.date && (
|
||||||
|
<div className="flex items-center gap-1 text-sm text-slate-600">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>{stage.date}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm">{stage.description}</p>
|
||||||
|
|
||||||
|
{/* Action Badge and Remarks */}
|
||||||
|
{stage.actionType && stage.remarks && (
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={
|
||||||
|
stage.actionType === 'approved' ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
stage.actionType === 'sendback' ? 'bg-orange-100 text-orange-700 border-orange-300' :
|
||||||
|
stage.actionType === 'withdrawal' ? 'bg-red-100 text-red-700 border-red-300' :
|
||||||
|
'bg-blue-100 text-blue-700 border-blue-300'
|
||||||
|
}>
|
||||||
|
{stage.actionType === 'approved' && '✓ Approved'}
|
||||||
|
{stage.actionType === 'sendback' && '↩ Sent Back'}
|
||||||
|
{stage.actionType === 'withdrawal' && '✗ Withdrawn'}
|
||||||
|
</Badge>
|
||||||
|
{stage.actionBy && (
|
||||||
|
<span className="text-xs text-slate-500">by {stage.actionBy}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-slate-600">Remarks:</Label>
|
||||||
|
<p className="text-sm text-slate-700 mt-1">{stage.remarks}</p>
|
||||||
|
</div>
|
||||||
|
{stage.feedback && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-slate-600">Feedback:</Label>
|
||||||
|
<p className="text-sm text-slate-700 mt-1">{stage.feedback}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Documents Tab */}
|
||||||
|
<TabsContent value="documents">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Documents</CardTitle>
|
||||||
|
<CardDescription>View and manage resignation documents</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Upload Date</TableHead>
|
||||||
|
<TableHead>Uploader</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockDocuments.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FileText className="w-4 h-4 text-slate-500" />
|
||||||
|
<span>{doc.name}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{doc.type}</TableCell>
|
||||||
|
<TableCell>{doc.uploadDate}</TableCell>
|
||||||
|
<TableCell>{doc.uploader || '-'}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button size="sm" variant="outline">View</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Audit Trail Tab */}
|
||||||
|
<TabsContent value="audit">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Audit Trail</CardTitle>
|
||||||
|
<CardDescription>Complete history of actions on this resignation request</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockAuditLogs.map((log) => (
|
||||||
|
<div key={log.id} className="flex gap-4 pb-4 border-b border-slate-200 last:border-0">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-blue-600 mt-2" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<p>{log.action}</p>
|
||||||
|
<span className="text-sm text-slate-600">{log.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-600">{log.user}</p>
|
||||||
|
{log.details && <p className="text-sm text-slate-500 mt-1">{log.details}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* Action Dialogs */}
|
||||||
|
<Dialog open={actionDialog.open} onOpenChange={(open) => setActionDialog({ open, type: null })}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{actionDialog.type === 'approve' && 'Approve Resignation Request'}
|
||||||
|
{actionDialog.type === 'withdrawal' && 'Withdraw Resignation Request'}
|
||||||
|
{actionDialog.type === 'sendback' && 'Send Back for Clarification'}
|
||||||
|
{actionDialog.type === 'assign' && 'Assign to User'}
|
||||||
|
{actionDialog.type === 'pushfnf' && 'Push to Full & Final Settlement'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{actionDialog.type === 'assign'
|
||||||
|
? 'Select a user to assign this request to'
|
||||||
|
: actionDialog.type === 'pushfnf'
|
||||||
|
? 'This will move the resignation request to F&F for dues clearance'
|
||||||
|
: 'Please provide remarks for this action'
|
||||||
|
}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{actionDialog.type === 'assign' ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Select User</Label>
|
||||||
|
<Select value={assignToUser} onValueChange={setAssignToUser}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Choose a user" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="asm">ASM - Area Sales Manager</SelectItem>
|
||||||
|
<SelectItem value="rbm">RBM - Regional Business Manager</SelectItem>
|
||||||
|
<SelectItem value="zbh">ZBH - Zonal Business Head</SelectItem>
|
||||||
|
<SelectItem value="nbh">NBH - National Business Head</SelectItem>
|
||||||
|
<SelectItem value="legal">Legal Team</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
) : actionDialog.type === 'pushfnf' ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Remarks (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
value={remarks}
|
||||||
|
onChange={(e) => setRemarks(e.target.value)}
|
||||||
|
placeholder="Add any additional notes..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Remarks *</Label>
|
||||||
|
<Textarea
|
||||||
|
value={remarks}
|
||||||
|
onChange={(e) => setRemarks(e.target.value)}
|
||||||
|
placeholder="Enter your remarks here..."
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setActionDialog({ open: false, type: null })}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSubmitAction}
|
||||||
|
className={
|
||||||
|
actionDialog.type === 'approve' ? 'bg-green-600 hover:bg-green-700' :
|
||||||
|
actionDialog.type === 'withdrawal' ? 'bg-red-600 hover:bg-red-700' :
|
||||||
|
'bg-blue-600 hover:bg-blue-700'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Stage Documents Dialog */}
|
||||||
|
<Dialog open={stageDocumentsDialog.open} onOpenChange={(open) => setStageDocumentsDialog({ open, stageName: '', documents: [] })}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5 text-blue-600" />
|
||||||
|
Documents - {stageDocumentsDialog.stageName}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Documents uploaded for this stage ({stageDocumentsDialog.documents.length} {stageDocumentsDialog.documents.length === 1 ? 'document' : 'documents'})
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="max-h-96 overflow-y-auto">
|
||||||
|
{stageDocumentsDialog.documents.length > 0 ? (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Upload Date</TableHead>
|
||||||
|
<TableHead>Uploader</TableHead>
|
||||||
|
<TableHead>Action</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{stageDocumentsDialog.documents.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell>{doc.name}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{doc.type}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{doc.uploadDate}</TableCell>
|
||||||
|
<TableCell>{doc.uploader}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button size="sm" variant="outline" className="text-blue-600 hover:text-blue-700">
|
||||||
|
<FileText className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-slate-500">
|
||||||
|
No documents uploaded for this stage yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setStageDocumentsDialog({ open: false, stageName: '', documents: [] })}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
768
src/components/applications/ResignationPage.tsx
Normal file
768
src/components/applications/ResignationPage.tsx
Normal file
@ -0,0 +1,768 @@
|
|||||||
|
import { FileText, Calendar, Building, Plus, Eye } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface ResignationPageProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock dealer data for auto-fetch
|
||||||
|
const mockDealerData: Record<string, any> = {
|
||||||
|
'DL-MH-001': {
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
address: '123, MG Road, Bandra West',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Mumbai Central',
|
||||||
|
dealershipName: 'Royal Enfield Mumbai',
|
||||||
|
gst: '27AABCU9603R1ZX',
|
||||||
|
salesCode: 'SAL-MH-001',
|
||||||
|
serviceCode: 'SRV-MH-001',
|
||||||
|
accessoriesCode: 'ACC-MH-001',
|
||||||
|
gmaCode: 'GMA-MH-001'
|
||||||
|
},
|
||||||
|
'DL-KA-045': {
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
address: '456, Brigade Road, Whitefield',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Bangalore South',
|
||||||
|
dealershipName: 'Royal Enfield Bangalore',
|
||||||
|
gst: '29AABCU9603R1ZX',
|
||||||
|
salesCode: 'SAL-KA-045',
|
||||||
|
serviceCode: 'SRV-KA-045',
|
||||||
|
accessoriesCode: 'ACC-KA-045',
|
||||||
|
gmaCode: 'GMA-KA-045'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock resignation requests
|
||||||
|
export const mockResignationRequests = [
|
||||||
|
{
|
||||||
|
id: 'RES-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
location: 'Mumbai, Maharashtra',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
formatCategory: 'A+',
|
||||||
|
resignationReason: 'Personal Health Reasons',
|
||||||
|
status: 'ASM Review',
|
||||||
|
currentStage: 'ASM',
|
||||||
|
submittedOn: '2025-10-08',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RES-002',
|
||||||
|
dealerCode: 'DL-KA-045',
|
||||||
|
dealerName: 'Priya Automobiles',
|
||||||
|
location: 'Bangalore, Karnataka',
|
||||||
|
dealershipType: 'Studio',
|
||||||
|
formatCategory: 'A',
|
||||||
|
resignationReason: 'Relocating to Different City',
|
||||||
|
status: 'DD Lead Review',
|
||||||
|
currentStage: 'DD Lead',
|
||||||
|
submittedOn: '2025-10-03',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RES-003',
|
||||||
|
dealerCode: 'DL-TN-028',
|
||||||
|
dealerName: 'Rahul Motors',
|
||||||
|
location: 'Chennai, Tamil Nadu',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
formatCategory: 'B',
|
||||||
|
resignationReason: 'Starting Own Venture',
|
||||||
|
status: 'NBH Approved',
|
||||||
|
currentStage: 'Legal',
|
||||||
|
submittedOn: '2025-10-05',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status.includes('Approved')) return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ResignationPage({ currentUser, onViewDetails }: ResignationPageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [dealerCode, setDealerCode] = useState('');
|
||||||
|
const [autoFilledData, setAutoFilledData] = useState<any>(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
inaugurationMonth: '',
|
||||||
|
inaugurationYear: '',
|
||||||
|
loaMonth: '',
|
||||||
|
loaYear: '',
|
||||||
|
loiMonth: '',
|
||||||
|
loiYear: '',
|
||||||
|
lastSixMonthsSales: '',
|
||||||
|
numberOfDealerships: '',
|
||||||
|
numberOfStudios: '',
|
||||||
|
constitution: '',
|
||||||
|
dealershipType: '',
|
||||||
|
typeOfClosure: '',
|
||||||
|
formatCategory: '',
|
||||||
|
dealerScoreCardBand: '',
|
||||||
|
resignationReason: '',
|
||||||
|
customerDescription: '',
|
||||||
|
document: null as File | null
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleDealerCodeChange = (code: string) => {
|
||||||
|
setDealerCode(code);
|
||||||
|
if (mockDealerData[code]) {
|
||||||
|
setAutoFilledData(mockDealerData[code]);
|
||||||
|
toast.success('Dealer details loaded successfully');
|
||||||
|
} else {
|
||||||
|
setAutoFilledData(null);
|
||||||
|
if (code) {
|
||||||
|
toast.error('Dealer code not found');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!autoFilledData) {
|
||||||
|
toast.error('Please enter a valid dealer code');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success('Resignation request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
// Reset form
|
||||||
|
setDealerCode('');
|
||||||
|
setAutoFilledData(null);
|
||||||
|
setFormData({
|
||||||
|
inaugurationMonth: '',
|
||||||
|
inaugurationYear: '',
|
||||||
|
loaMonth: '',
|
||||||
|
loaYear: '',
|
||||||
|
loiMonth: '',
|
||||||
|
loiYear: '',
|
||||||
|
lastSixMonthsSales: '',
|
||||||
|
numberOfDealerships: '',
|
||||||
|
numberOfStudios: '',
|
||||||
|
constitution: '',
|
||||||
|
dealershipType: '',
|
||||||
|
typeOfClosure: '',
|
||||||
|
formatCategory: '',
|
||||||
|
dealerScoreCardBand: '',
|
||||||
|
resignationReason: '',
|
||||||
|
customerDescription: '',
|
||||||
|
document: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isDDLead = currentUser?.role === 'DD Lead';
|
||||||
|
|
||||||
|
// Helper function to check if request is at current user's level
|
||||||
|
const isRequestAtMyLevel = (request: any) => {
|
||||||
|
if (!currentUser) return false;
|
||||||
|
|
||||||
|
const roleToStageMapping: Record<string, string[]> = {
|
||||||
|
'DD Lead': ['DD Lead'],
|
||||||
|
'DD-ZM': ['DD-ZM'],
|
||||||
|
'RBM': ['RBM'],
|
||||||
|
'DD AM': ['ASM', 'DD AM'],
|
||||||
|
'ZBH': ['ZBH'],
|
||||||
|
'NBH': ['NBH'],
|
||||||
|
'Legal Admin': ['Legal'],
|
||||||
|
'DD Admin': ['DD Admin'],
|
||||||
|
'Super Admin': ['DD Admin', 'NBH', 'Legal', 'ZBH', 'RBM', 'ASM', 'DD Lead']
|
||||||
|
};
|
||||||
|
|
||||||
|
const userStages = roleToStageMapping[currentUser.role] || [];
|
||||||
|
return userStages.some(stage =>
|
||||||
|
request.currentStage.includes(stage) ||
|
||||||
|
request.status.includes(stage)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openRequests = mockResignationRequests.filter(req =>
|
||||||
|
!req.status.includes('Completed') &&
|
||||||
|
!req.status.includes('Closed') &&
|
||||||
|
isRequestAtMyLevel(req)
|
||||||
|
);
|
||||||
|
|
||||||
|
const completedRequests = mockResignationRequests.filter(req =>
|
||||||
|
req.status.includes('Completed') ||
|
||||||
|
req.status.includes('Closed') ||
|
||||||
|
req.status.includes('Final Approval')
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>All Requests</CardDescription>
|
||||||
|
<CardTitle className="text-3xl">{mockResignationRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Total Requests</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Open</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-yellow-600">{openRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Requires Your Action</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Completed</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-green-600">{completedRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Finalized</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle>Resignation Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Track and manage dealer resignation requests
|
||||||
|
{!isDDLead && (
|
||||||
|
<span className="block mt-1 text-amber-600">
|
||||||
|
• Note: Only DD Lead can create resignation requests. Current role: {currentUser?.role || 'Not logged in'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
{isDDLead && (
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Create Resignation Request
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Resignation Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Fill in the details to create a new resignation request
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Dealer Code - Auto-fetch trigger */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerCode">Dealer Code *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerCode"
|
||||||
|
value={dealerCode}
|
||||||
|
onChange={(e) => handleDealerCodeChange(e.target.value)}
|
||||||
|
placeholder="e.g., DL-MH-001"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auto-filled data */}
|
||||||
|
{autoFilledData && (
|
||||||
|
<div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Name</Label>
|
||||||
|
<p>{autoFilledData.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GST</Label>
|
||||||
|
<p>{autoFilledData.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Address</Label>
|
||||||
|
<p>{autoFilledData.address}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">City Category</Label>
|
||||||
|
<p>{autoFilledData.cityCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Domain Name</Label>
|
||||||
|
<p>{autoFilledData.domainName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Principal Name</Label>
|
||||||
|
<p>{autoFilledData.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Sales Code</Label>
|
||||||
|
<p>{autoFilledData.salesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Service Code</Label>
|
||||||
|
<p>{autoFilledData.serviceCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Accessories Code</Label>
|
||||||
|
<p>{autoFilledData.accessoriesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GMA Code</Label>
|
||||||
|
<p>{autoFilledData.gmaCode}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Date fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Inauguration *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.inaugurationMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, inaugurationMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.inaugurationYear}
|
||||||
|
onChange={(e) => setFormData({...formData, inaugurationYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>LOA *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.loaMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, loaMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.loaYear}
|
||||||
|
onChange={(e) => setFormData({...formData, loaYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>LOI *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.loiMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, loiMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.loiYear}
|
||||||
|
onChange={(e) => setFormData({...formData, loiYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="sales">Last 6 Months Sales *</Label>
|
||||||
|
<Input
|
||||||
|
id="sales"
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter sales figure"
|
||||||
|
value={formData.lastSixMonthsSales}
|
||||||
|
onChange={(e) => setFormData({...formData, lastSixMonthsSales: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Number fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerships">Number of Dealerships *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerships"
|
||||||
|
type="number"
|
||||||
|
value={formData.numberOfDealerships}
|
||||||
|
onChange={(e) => setFormData({...formData, numberOfDealerships: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="studios">Number of Studios *</Label>
|
||||||
|
<Input
|
||||||
|
id="studios"
|
||||||
|
type="number"
|
||||||
|
value={formData.numberOfStudios}
|
||||||
|
onChange={(e) => setFormData({...formData, numberOfStudios: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dropdown fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Constitution *</Label>
|
||||||
|
<Select value={formData.constitution} onValueChange={(value) => setFormData({...formData, constitution: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select constitution" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pvt-ltd">PVT. LTD.</SelectItem>
|
||||||
|
<SelectItem value="partnership">Partnership</SelectItem>
|
||||||
|
<SelectItem value="proprietorship">Proprietorship</SelectItem>
|
||||||
|
<SelectItem value="public-limited">Public Limited</SelectItem>
|
||||||
|
<SelectItem value="llp">LLP</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Dealership Type *</Label>
|
||||||
|
<Select value={formData.dealershipType} onValueChange={(value) => setFormData({...formData, dealershipType: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="main-dealer">Main Dealer</SelectItem>
|
||||||
|
<SelectItem value="studio">Studio</SelectItem>
|
||||||
|
<SelectItem value="asp">ASP</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Type of Closure *</Label>
|
||||||
|
<Select value={formData.typeOfClosure} onValueChange={(value) => setFormData({...formData, typeOfClosure: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select closure type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="complete">Complete</SelectItem>
|
||||||
|
<SelectItem value="partial">Partial</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
{formData.dealershipType !== 'studio' && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Format Category *</Label>
|
||||||
|
<Select value={formData.formatCategory} onValueChange={(value) => setFormData({...formData, formatCategory: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="a-plus">A+</SelectItem>
|
||||||
|
<SelectItem value="a">A</SelectItem>
|
||||||
|
<SelectItem value="b">B</SelectItem>
|
||||||
|
<SelectItem value="c">C</SelectItem>
|
||||||
|
<SelectItem value="d">D</SelectItem>
|
||||||
|
<SelectItem value="e">E</SelectItem>
|
||||||
|
<SelectItem value="r">R</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Dealer Score Card Band *</Label>
|
||||||
|
<Select value={formData.dealerScoreCardBand} onValueChange={(value) => setFormData({...formData, dealerScoreCardBand: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select band" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="platinum">Platinum</SelectItem>
|
||||||
|
<SelectItem value="gold">Gold</SelectItem>
|
||||||
|
<SelectItem value="silver">Silver</SelectItem>
|
||||||
|
<SelectItem value="bronze">Bronze</SelectItem>
|
||||||
|
<SelectItem value="no-band">No Band</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text fields */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Resignation Reason *</Label>
|
||||||
|
<Input
|
||||||
|
id="reason"
|
||||||
|
value={formData.resignationReason}
|
||||||
|
onChange={(e) => setFormData({...formData, resignationReason: e.target.value})}
|
||||||
|
placeholder="Brief reason for resignation"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="description">Dealer Voice *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
value={formData.customerDescription}
|
||||||
|
onChange={(e) => setFormData({...formData, customerDescription: e.target.value})}
|
||||||
|
placeholder="Detailed description provided by customer"
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="document">Upload Document</Label>
|
||||||
|
<Input
|
||||||
|
id="document"
|
||||||
|
type="file"
|
||||||
|
onChange={(e) => setFormData({...formData, document: e.target.files?.[0] || null})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="all" className="w-full">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="all">All Requests</TabsTrigger>
|
||||||
|
<TabsTrigger value="open">Open</TabsTrigger>
|
||||||
|
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="all" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockResignationRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-amber-100 rounded-lg">
|
||||||
|
<FileText className="w-6 h-6 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Code</p>
|
||||||
|
<p>{request.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealership Type</p>
|
||||||
|
<p>{request.dealershipType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Format Category</p>
|
||||||
|
<p>{request.formatCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Reason</p>
|
||||||
|
<p>{request.resignationReason}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Current Stage</p>
|
||||||
|
<p>{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-500" />
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Open Tab */}
|
||||||
|
<TabsContent value="open" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{openRequests.length > 0 ? (
|
||||||
|
openRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-yellow-100 rounded-lg">
|
||||||
|
<FileText className="w-6 h-6 text-yellow-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Current Stage</p>
|
||||||
|
<p>{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<FileText className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No requests requiring your action</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Completed Tab */}
|
||||||
|
<TabsContent value="completed" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{completedRequests.length > 0 ? (
|
||||||
|
completedRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-green-100 rounded-lg">
|
||||||
|
<FileText className="w-6 h-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Final Stage</p>
|
||||||
|
<p>{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<FileText className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No completed resignations to display</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
863
src/components/applications/TerminationDetails.tsx
Normal file
863
src/components/applications/TerminationDetails.tsx
Normal file
@ -0,0 +1,863 @@
|
|||||||
|
import { ArrowLeft, Check, X, RotateCcw, UserPlus, MessageSquare, FileText, Calendar, AlertTriangle, Send } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User, mockWorkNotes, mockDocuments, mockAuditLogs } from '../../lib/mock-data';
|
||||||
|
import { WorkNotesPage } from './WorkNotesPage';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface TerminationDetailsProps {
|
||||||
|
terminationId: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TerminationDetails({ terminationId, onBack, currentUser }: TerminationDetailsProps) {
|
||||||
|
const [actionDialog, setActionDialog] = useState<{ open: boolean; type: 'approve' | 'withdrawal' | 'sendback' | 'assign' | 'pushfnf' | null }>({ open: false, type: null });
|
||||||
|
const [workNotesOpen, setWorkNotesOpen] = useState(false);
|
||||||
|
const [remarks, setRemarks] = useState('');
|
||||||
|
const [assignToUser, setAssignToUser] = useState('');
|
||||||
|
const [stageDocumentsDialog, setStageDocumentsDialog] = useState<{ open: boolean; stageName: string; documents: any[] }>({ open: false, stageName: '', documents: [] });
|
||||||
|
|
||||||
|
// Check if user can push to F&F (DD Lead and above)
|
||||||
|
const canPushToFnF = currentUser && ['DD Lead', 'DD Head', 'NBH', 'DD Admin', 'Super Admin'].includes(currentUser.role);
|
||||||
|
|
||||||
|
// Mock data - would come from API
|
||||||
|
const request = {
|
||||||
|
id: terminationId,
|
||||||
|
dealerCode: 'DL-MH-025',
|
||||||
|
dealerName: 'Vikram Patil Motors',
|
||||||
|
address: '789, FC Road, Shivaji Nagar, Pune',
|
||||||
|
cityCategory: 'Tier 2',
|
||||||
|
domainName: 'Pune West',
|
||||||
|
dealershipName: 'Royal Enfield Pune',
|
||||||
|
gst: '27AABCU9604R1ZX',
|
||||||
|
salesCode: 'SAL-MH-025',
|
||||||
|
serviceCode: 'SRV-MH-025',
|
||||||
|
accessoriesCode: 'ACC-MH-025',
|
||||||
|
gmaCode: 'GMA-MH-025',
|
||||||
|
location: 'Pune, Maharashtra',
|
||||||
|
inauguration: 'June 2019',
|
||||||
|
loa: 'May 2019',
|
||||||
|
loi: 'April 2019',
|
||||||
|
lastSixMonthsSales: '₹45,00,000',
|
||||||
|
numberOfDealerships: '1',
|
||||||
|
numberOfStudios: '0',
|
||||||
|
constitution: 'Partnership',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
typeOfClosure: 'Complete',
|
||||||
|
formatCategory: 'B',
|
||||||
|
dealerScoreCardBand: 'Bronze',
|
||||||
|
terminationCategory: 'Breach of Agreement',
|
||||||
|
subCategory: 'Violation of exclusivity clause, unauthorized sub-dealership',
|
||||||
|
description: 'Multiple instances of contract violations including unauthorized sale of competing brands and creation of sub-dealerships without company approval. Despite warnings, dealer has continued non-compliant practices.',
|
||||||
|
severity: 'High',
|
||||||
|
status: 'RBM Review',
|
||||||
|
currentStage: 'RBM',
|
||||||
|
submittedOn: '2025-10-15',
|
||||||
|
submittedBy: 'ASM - Mumbai Region'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock documents by stage
|
||||||
|
const stageDocuments: Record<string, any[]> = {
|
||||||
|
'Request Initiated': [
|
||||||
|
{ id: 1, name: 'Termination Request Form.pdf', type: 'Request', uploadDate: '2025-10-15', uploader: 'ASM - Mumbai' },
|
||||||
|
{ id: 2, name: 'Violation Evidence Report.pdf', type: 'Evidence', uploadDate: '2025-10-15', uploader: 'ASM - Mumbai' },
|
||||||
|
{ id: 3, name: 'Dealer Performance History.xlsx', type: 'Report', uploadDate: '2025-10-15', uploader: 'ASM - Mumbai' }
|
||||||
|
],
|
||||||
|
'RBM Review': [
|
||||||
|
{ id: 4, name: 'RBM Investigation Report.pdf', type: 'Investigation', uploadDate: '2025-10-16', uploader: 'RBM - West Zone' },
|
||||||
|
{ id: 5, name: 'Field Visit Photos.pdf', type: 'Evidence', uploadDate: '2025-10-16', uploader: 'RBM - West Zone' }
|
||||||
|
],
|
||||||
|
'ZBH Review': [
|
||||||
|
{ id: 6, name: 'ZBH Assessment.pdf', type: 'Assessment', uploadDate: '2025-10-17', uploader: 'ZBH - West Zone' }
|
||||||
|
],
|
||||||
|
'DD Lead Review': [
|
||||||
|
{ id: 7, name: 'DD Lead Recommendation.pdf', type: 'Recommendation', uploadDate: '2025-10-18', uploader: 'DD Lead' },
|
||||||
|
{ id: 8, name: 'Competitor Analysis.pdf', type: 'Analysis', uploadDate: '2025-10-18', uploader: 'DD Lead' }
|
||||||
|
],
|
||||||
|
'Legal Verification': [
|
||||||
|
{ id: 9, name: 'Legal Opinion.pdf', type: 'Legal', uploadDate: '2025-10-19', uploader: 'Legal Team' },
|
||||||
|
{ id: 10, name: 'Contract Review.pdf', type: 'Legal', uploadDate: '2025-10-19', uploader: 'Legal Team' },
|
||||||
|
{ id: 11, name: 'Compliance Checklist.pdf', type: 'Compliance', uploadDate: '2025-10-19', uploader: 'Legal Team' }
|
||||||
|
],
|
||||||
|
'NBH Evaluation': [],
|
||||||
|
'Show Cause Notice (SCN)': [
|
||||||
|
{ id: 12, name: 'Show Cause Notice.pdf', type: 'Notice', uploadDate: '2025-10-20', uploader: 'Legal Admin' }
|
||||||
|
],
|
||||||
|
'DD Lead & Legal Review': [],
|
||||||
|
'NBH Termination Approval': [],
|
||||||
|
'CCO Approval': [],
|
||||||
|
'CEO Final Approval': [],
|
||||||
|
'Legal - Termination Letter': [
|
||||||
|
{ id: 13, name: 'Termination Letter - Draft.pdf', type: 'Letter', uploadDate: '2025-10-21', uploader: 'Legal Team' },
|
||||||
|
{ id: 14, name: 'Termination Letter - Final.pdf', type: 'Letter', uploadDate: '2025-10-21', uploader: 'Legal Admin' }
|
||||||
|
],
|
||||||
|
'DD Admin - Share with Dealer': [],
|
||||||
|
'Dealer Terminated': []
|
||||||
|
};
|
||||||
|
|
||||||
|
const progressStages = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Request Initiated',
|
||||||
|
status: 'completed',
|
||||||
|
date: '2025-10-15',
|
||||||
|
description: 'Termination request created by ASM/Initiator',
|
||||||
|
actionType: 'approved',
|
||||||
|
actionBy: 'ASM - Mumbai Region',
|
||||||
|
remarks: 'Termination request initiated due to severe breach of agreement. Multiple violations documented.',
|
||||||
|
feedback: 'All evidence and documentation attached. Case requires urgent attention due to severity of violations.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'RBM Review',
|
||||||
|
status: request.currentStage === 'RBM' ? 'active' : ['ZBH', 'DD Lead', 'Legal', 'NBH', 'SCN', 'CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Regional Business Manager review',
|
||||||
|
actionType: request.currentStage === 'RBM' ? undefined : undefined,
|
||||||
|
actionBy: request.currentStage === 'RBM' ? undefined : undefined,
|
||||||
|
remarks: request.currentStage === 'RBM' ? undefined : undefined,
|
||||||
|
feedback: request.currentStage === 'RBM' ? undefined : undefined
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'ZBH Review',
|
||||||
|
status: request.currentStage === 'ZBH' ? 'active' : ['DD Lead', 'Legal', 'NBH', 'SCN', 'CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Zonal Business Head evaluation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'DD Lead Review',
|
||||||
|
status: request.currentStage === 'DD Lead' ? 'active' : ['Legal', 'NBH', 'SCN', 'CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'DD Lead validation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'Legal Verification',
|
||||||
|
status: request.currentStage === 'Legal' ? 'active' : ['NBH', 'SCN', 'CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Legal team validates termination grounds'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'NBH Evaluation',
|
||||||
|
status: request.currentStage === 'NBH' ? 'active' : ['SCN', 'CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'National Business Head decision'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'Show Cause Notice (SCN)',
|
||||||
|
status: request.currentStage === 'SCN' ? 'active' : ['CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'SCN sent to dealer, awaiting response'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: 'DD Lead & Legal Review',
|
||||||
|
status: request.currentStage === 'DD Lead Legal' ? 'active' : ['CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Evaluation of SCN response'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: 'NBH Termination Approval',
|
||||||
|
status: request.currentStage === 'NBH Final' ? 'active' : ['CCO', 'CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'NBH approves termination'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
name: 'CCO Approval',
|
||||||
|
status: request.currentStage === 'CCO' ? 'active' : ['CEO', 'Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Chief Commercial Officer approval'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
name: 'CEO Final Approval',
|
||||||
|
status: request.currentStage === 'CEO' ? 'active' : ['Legal Letter', 'DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'CEO final authorization'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
name: 'Legal - Termination Letter',
|
||||||
|
status: request.currentStage === 'Legal Letter' ? 'active' : ['DD Admin Letter', 'Terminated'].includes(request.currentStage) ? 'completed' : 'pending',
|
||||||
|
description: 'Legal team shares termination letter to DD-Lead and DD Admin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
name: 'DD Admin - Share with Dealer',
|
||||||
|
status: request.currentStage === 'DD Admin Letter' ? 'active' : request.currentStage === 'Terminated' ? 'completed' : 'pending',
|
||||||
|
description: 'DD Admin shares termination letter with dealer (Proceed to F&F)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
name: 'Dealer Terminated',
|
||||||
|
status: request.currentStage === 'Terminated' ? 'completed' : 'pending',
|
||||||
|
description: 'Dealership termination effective'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleViewStageDocuments = (stageName: string) => {
|
||||||
|
const documents = stageDocuments[stageName] || [];
|
||||||
|
setStageDocumentsDialog({ open: true, stageName, documents });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAction = (type: 'approve' | 'withdrawal' | 'sendback' | 'assign') => {
|
||||||
|
setActionDialog({ open: true, type });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitAction = () => {
|
||||||
|
if (!remarks && actionDialog.type !== 'assign' && actionDialog.type !== 'pushfnf') {
|
||||||
|
toast.error('Please provide remarks');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (actionDialog.type === 'assign' && !assignToUser) {
|
||||||
|
toast.error('Please select a user');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const actionMessages = {
|
||||||
|
approve: 'Request approved and forwarded',
|
||||||
|
withdrawal: 'Request withdrawn successfully',
|
||||||
|
sendback: 'Request sent back for clarification',
|
||||||
|
assign: `Request assigned to ${assignToUser}`,
|
||||||
|
pushfnf: 'Request pushed to F&F successfully'
|
||||||
|
};
|
||||||
|
|
||||||
|
toast.success(actionMessages[actionDialog.type!]);
|
||||||
|
setActionDialog({ open: false, type: null });
|
||||||
|
setRemarks('');
|
||||||
|
setAssignToUser('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSeverityColor = (severity: string) => {
|
||||||
|
switch (severity) {
|
||||||
|
case 'Critical':
|
||||||
|
return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
case 'High':
|
||||||
|
return 'bg-orange-100 text-orange-700 border-orange-300';
|
||||||
|
case 'Medium':
|
||||||
|
return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
default:
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const workNotesCount = mockWorkNotes.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Warning Alert */}
|
||||||
|
<Alert className="border-red-200 bg-red-50">
|
||||||
|
<AlertTriangle className="h-4 w-4 text-red-600" />
|
||||||
|
<AlertTitle className="text-red-900">Sensitive Information</AlertTitle>
|
||||||
|
<AlertDescription className="text-red-700">
|
||||||
|
This is a termination case. All actions are logged and audited. Proceed with caution.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="outline" size="icon" onClick={onBack} className="hover:bg-slate-100 transition-colors">
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl">{terminationId}</h1>
|
||||||
|
<p className="text-slate-600">{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<Badge className={getSeverityColor(request.severity)}>
|
||||||
|
{request.severity}
|
||||||
|
</Badge>
|
||||||
|
<Badge className="bg-red-100 text-red-700 border-red-300">
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Bar - Professional Layout */}
|
||||||
|
<Card className="border-red-200 shadow-sm">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Primary Actions Row */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-slate-600 mr-2">Termination Actions:</span>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="bg-green-600 hover:bg-green-700 transition-all hover:shadow-md"
|
||||||
|
onClick={() => handleAction('approve')}
|
||||||
|
>
|
||||||
|
<Check className="w-4 h-4 mr-2" />
|
||||||
|
Approve
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-red-600 border-red-300 hover:bg-red-50 transition-all"
|
||||||
|
onClick={() => handleAction('withdrawal')}
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4 mr-2" />
|
||||||
|
Withdrawal
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="hover:bg-slate-50 transition-all"
|
||||||
|
onClick={() => handleAction('sendback')}
|
||||||
|
>
|
||||||
|
<RotateCcw className="w-4 h-4 mr-2" />
|
||||||
|
Send Back
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Actions */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{canPushToFnF && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-blue-600 border-blue-300 hover:bg-blue-50 transition-all"
|
||||||
|
onClick={() => handleAction('pushfnf')}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4 mr-2" />
|
||||||
|
Push to F&F
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="hover:bg-slate-50 transition-all"
|
||||||
|
onClick={() => handleAction('assign')}
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4 mr-2" />
|
||||||
|
Assign User
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Work Notes Button - Independent Section */}
|
||||||
|
<div className="flex items-center justify-between pt-4 border-t border-red-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-4 h-4 text-slate-500" />
|
||||||
|
<span className="text-sm text-slate-600">Communication & Notes</span>
|
||||||
|
</div>
|
||||||
|
<Dialog open={workNotesOpen} onOpenChange={setWorkNotesOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="relative hover:bg-red-50 hover:border-red-300 hover:text-red-700 transition-all"
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4 mr-2" />
|
||||||
|
View Work Notes
|
||||||
|
{workNotesCount > 0 && (
|
||||||
|
<Badge className="ml-2 bg-red-600 hover:bg-red-700 text-white h-5 px-2">
|
||||||
|
{workNotesCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-5 h-5 text-red-600" />
|
||||||
|
Work Notes - {terminationId}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
View all communications and internal notes for this termination case
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<WorkNotesPage />
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<Tabs defaultValue="details" className="w-full">
|
||||||
|
<TabsList className="bg-slate-100 p-1">
|
||||||
|
<TabsTrigger value="details" className="data-[state=active]:bg-white">Details</TabsTrigger>
|
||||||
|
<TabsTrigger value="progress" className="data-[state=active]:bg-white">Progress</TabsTrigger>
|
||||||
|
<TabsTrigger value="documents" className="data-[state=active]:bg-white">Documents</TabsTrigger>
|
||||||
|
<TabsTrigger value="audit" className="data-[state=active]:bg-white">Audit Trail</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Details Tab */}
|
||||||
|
<TabsContent value="details" className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dealer Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Code</Label>
|
||||||
|
<p>{request.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Name</Label>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GST</Label>
|
||||||
|
<p>{request.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<Label className="text-slate-600">Address</Label>
|
||||||
|
<p>{request.address}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">City Category</Label>
|
||||||
|
<p>{request.cityCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Domain Name</Label>
|
||||||
|
<p>{request.domainName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Name</Label>
|
||||||
|
<p>{request.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Sales Code</Label>
|
||||||
|
<p>{request.salesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Service Code</Label>
|
||||||
|
<p>{request.serviceCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Accessories Code</Label>
|
||||||
|
<p>{request.accessoriesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GMA Code</Label>
|
||||||
|
<p>{request.gmaCode}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Operational Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Inauguration</Label>
|
||||||
|
<p>{request.inauguration}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">LOA</Label>
|
||||||
|
<p>{request.loa}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">LOI</Label>
|
||||||
|
<p>{request.loi}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Last 6 Months Sales</Label>
|
||||||
|
<p>{request.lastSixMonthsSales}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Number of Dealerships</Label>
|
||||||
|
<p>{request.numberOfDealerships}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Number of Studios</Label>
|
||||||
|
<p>{request.numberOfStudios}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Constitution</Label>
|
||||||
|
<p>{request.constitution}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Type</Label>
|
||||||
|
<p>{request.dealershipType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Type of Closure</Label>
|
||||||
|
<p>{request.typeOfClosure}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Format Category</Label>
|
||||||
|
<p>{request.formatCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Score Card Band</Label>
|
||||||
|
<p>{request.dealerScoreCardBand}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-red-200 bg-red-50/30">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-red-900 flex items-center gap-2">
|
||||||
|
<AlertTriangle className="w-5 h-5" />
|
||||||
|
Termination Details
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Termination Category</Label>
|
||||||
|
<p className="text-red-900">{request.terminationCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Sub Category</Label>
|
||||||
|
<p>{request.subCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Description</Label>
|
||||||
|
<p>{request.description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Severity</Label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<Badge className={getSeverityColor(request.severity)}>
|
||||||
|
{request.severity}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted By</Label>
|
||||||
|
<p>{request.submittedBy}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Submitted On</Label>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Progress Tab */}
|
||||||
|
<TabsContent value="progress">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Termination Progress Timeline</CardTitle>
|
||||||
|
<CardDescription>Track the termination request approval process</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{progressStages.map((stage, index) => {
|
||||||
|
const documentCount = stageDocuments[stage.name]?.length || 0;
|
||||||
|
return (
|
||||||
|
<div key={stage.id} className="flex gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||||
|
stage.status === 'completed' ? 'bg-green-100 text-green-600' :
|
||||||
|
stage.status === 'active' ? 'bg-red-100 text-red-600' :
|
||||||
|
'bg-slate-100 text-slate-400'
|
||||||
|
}`}>
|
||||||
|
{stage.status === 'completed' ? (
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
) : stage.status === 'active' ? (
|
||||||
|
<AlertTriangle className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<span>{stage.id}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{index < progressStages.length - 1 && (
|
||||||
|
<div className={`w-0.5 ${
|
||||||
|
stage.remarks ? 'h-32' : 'h-16'
|
||||||
|
} ${
|
||||||
|
stage.status === 'completed' ? 'bg-green-300' : 'bg-slate-200'
|
||||||
|
}`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 pb-8">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h3 className={
|
||||||
|
stage.status === 'completed' ? 'text-green-600' :
|
||||||
|
stage.status === 'active' ? 'text-red-600' :
|
||||||
|
'text-slate-400'
|
||||||
|
}>{stage.name}</h3>
|
||||||
|
{documentCount > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewStageDocuments(stage.name)}
|
||||||
|
className="flex items-center gap-1 px-2 py-1 rounded-full bg-red-100 hover:bg-red-200 text-red-700 text-xs transition-colors cursor-pointer"
|
||||||
|
>
|
||||||
|
<FileText className="w-3 h-3" />
|
||||||
|
<span>{documentCount} {documentCount === 1 ? 'doc' : 'docs'}</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{stage.date && (
|
||||||
|
<div className="flex items-center gap-1 text-sm text-slate-600">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>{stage.date}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm">{stage.description}</p>
|
||||||
|
|
||||||
|
{/* Action Badge and Remarks */}
|
||||||
|
{stage.actionType && stage.remarks && (
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={
|
||||||
|
stage.actionType === 'approved' ? 'bg-green-100 text-green-700 border-green-300' :
|
||||||
|
stage.actionType === 'sendback' ? 'bg-orange-100 text-orange-700 border-orange-300' :
|
||||||
|
stage.actionType === 'withdrawal' ? 'bg-red-100 text-red-700 border-red-300' :
|
||||||
|
'bg-blue-100 text-blue-700 border-blue-300'
|
||||||
|
}>
|
||||||
|
{stage.actionType === 'approved' && '✓ Approved'}
|
||||||
|
{stage.actionType === 'sendback' && '↩ Sent Back'}
|
||||||
|
{stage.actionType === 'withdrawal' && '✗ Withdrawn'}
|
||||||
|
</Badge>
|
||||||
|
{stage.actionBy && (
|
||||||
|
<span className="text-xs text-slate-500">by {stage.actionBy}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-slate-600">Remarks:</Label>
|
||||||
|
<p className="text-sm text-slate-700 mt-1">{stage.remarks}</p>
|
||||||
|
</div>
|
||||||
|
{stage.feedback && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs text-slate-600">Feedback:</Label>
|
||||||
|
<p className="text-sm text-slate-700 mt-1">{stage.feedback}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Documents Tab */}
|
||||||
|
<TabsContent value="documents">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Documents</CardTitle>
|
||||||
|
<CardDescription>View and manage termination case documents</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Upload Date</TableHead>
|
||||||
|
<TableHead>Uploader</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockDocuments.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FileText className="w-4 h-4 text-slate-500" />
|
||||||
|
<span>{doc.name}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{doc.type}</TableCell>
|
||||||
|
<TableCell>{doc.uploadDate}</TableCell>
|
||||||
|
<TableCell>{doc.uploader || '-'}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button size="sm" variant="outline">View</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Audit Trail Tab */}
|
||||||
|
<TabsContent value="audit">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Audit Trail</CardTitle>
|
||||||
|
<CardDescription>Complete history of actions on this termination case</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockAuditLogs.map((log) => (
|
||||||
|
<div key={log.id} className="flex gap-4 pb-4 border-b border-slate-200 last:border-0">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-red-600 mt-2" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<p>{log.action}</p>
|
||||||
|
<span className="text-sm text-slate-600">{log.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-600">{log.user}</p>
|
||||||
|
{log.details && <p className="text-sm text-slate-500 mt-1">{log.details}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* Action Dialogs */}
|
||||||
|
<Dialog open={actionDialog.open} onOpenChange={(open) => setActionDialog({ open, type: null })}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{actionDialog.type === 'approve' && 'Approve Termination Request'}
|
||||||
|
{actionDialog.type === 'withdrawal' && 'Withdraw Termination Request'}
|
||||||
|
{actionDialog.type === 'sendback' && 'Send Back for Clarification'}
|
||||||
|
{actionDialog.type === 'assign' && 'Assign to User'}
|
||||||
|
{actionDialog.type === 'pushfnf' && 'Push to Full & Final Settlement'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{actionDialog.type === 'assign'
|
||||||
|
? 'Select a user to assign this request to'
|
||||||
|
: actionDialog.type === 'pushfnf'
|
||||||
|
? 'This will move the termination case to F&F for dues clearance'
|
||||||
|
: 'Please provide remarks for this action'
|
||||||
|
}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{actionDialog.type === 'assign' ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Select User</Label>
|
||||||
|
<Select value={assignToUser} onValueChange={setAssignToUser}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Choose a user" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="rbm">RBM - Regional Business Manager</SelectItem>
|
||||||
|
<SelectItem value="zbh">ZBH - Zonal Business Head</SelectItem>
|
||||||
|
<SelectItem value="dd-lead">DD Lead</SelectItem>
|
||||||
|
<SelectItem value="legal">Legal Team</SelectItem>
|
||||||
|
<SelectItem value="nbh">NBH - National Business Head</SelectItem>
|
||||||
|
<SelectItem value="cco">CCO - Chief Commercial Officer</SelectItem>
|
||||||
|
<SelectItem value="ceo">CEO</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
) : actionDialog.type === 'pushfnf' ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Remarks (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
value={remarks}
|
||||||
|
onChange={(e) => setRemarks(e.target.value)}
|
||||||
|
placeholder="Add any additional notes..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Remarks *</Label>
|
||||||
|
<Textarea
|
||||||
|
value={remarks}
|
||||||
|
onChange={(e) => setRemarks(e.target.value)}
|
||||||
|
placeholder="Enter your remarks here..."
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setActionDialog({ open: false, type: null })}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSubmitAction}
|
||||||
|
className={
|
||||||
|
actionDialog.type === 'approve' ? 'bg-green-600 hover:bg-green-700' :
|
||||||
|
actionDialog.type === 'withdrawal' ? 'bg-red-600 hover:bg-red-700' :
|
||||||
|
'bg-blue-600 hover:bg-blue-700'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Stage Documents Dialog */}
|
||||||
|
<Dialog open={stageDocumentsDialog.open} onOpenChange={(open) => setStageDocumentsDialog({ open, stageName: '', documents: [] })}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5 text-red-600" />
|
||||||
|
Documents - {stageDocumentsDialog.stageName}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Documents uploaded for this stage ({stageDocumentsDialog.documents.length} {stageDocumentsDialog.documents.length === 1 ? 'document' : 'documents'})
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="max-h-96 overflow-y-auto">
|
||||||
|
{stageDocumentsDialog.documents.length > 0 ? (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Document Name</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Upload Date</TableHead>
|
||||||
|
<TableHead>Uploader</TableHead>
|
||||||
|
<TableHead>Action</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{stageDocumentsDialog.documents.map((doc) => (
|
||||||
|
<TableRow key={doc.id}>
|
||||||
|
<TableCell>{doc.name}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{doc.type}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{doc.uploadDate}</TableCell>
|
||||||
|
<TableCell>{doc.uploader}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button size="sm" variant="outline" className="text-red-600 hover:text-red-700">
|
||||||
|
<FileText className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-slate-500">
|
||||||
|
No documents uploaded for this stage yet
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setStageDocumentsDialog({ open: false, stageName: '', documents: [] })}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
819
src/components/applications/TerminationPage.tsx
Normal file
819
src/components/applications/TerminationPage.tsx
Normal file
@ -0,0 +1,819 @@
|
|||||||
|
import { AlertTriangle, Calendar, Building, Plus, Eye, XCircle } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface TerminationPageProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock dealer data for auto-fetch
|
||||||
|
const mockDealerData: Record<string, any> = {
|
||||||
|
'DL-MH-025': {
|
||||||
|
dealerName: 'Vikram Patil Motors',
|
||||||
|
address: '789, FC Road, Shivaji Nagar',
|
||||||
|
cityCategory: 'Tier 2',
|
||||||
|
domainName: 'Pune West',
|
||||||
|
dealershipName: 'Royal Enfield Pune',
|
||||||
|
gst: '27AABCU9604R1ZX',
|
||||||
|
salesCode: 'SAL-MH-025',
|
||||||
|
serviceCode: 'SRV-MH-025',
|
||||||
|
accessoriesCode: 'ACC-MH-025',
|
||||||
|
gmaCode: 'GMA-MH-025'
|
||||||
|
},
|
||||||
|
'DL-TG-033': {
|
||||||
|
dealerName: 'Sanjay Enterprises',
|
||||||
|
address: '321, Hitec City, Gachibowli',
|
||||||
|
cityCategory: 'Tier 1',
|
||||||
|
domainName: 'Hyderabad Central',
|
||||||
|
dealershipName: 'Royal Enfield Hyderabad',
|
||||||
|
gst: '36AABCU9604R1ZX',
|
||||||
|
salesCode: 'SAL-TG-033',
|
||||||
|
serviceCode: 'SRV-TG-033',
|
||||||
|
accessoriesCode: 'ACC-TG-033',
|
||||||
|
gmaCode: 'GMA-TG-033'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock termination requests
|
||||||
|
export const mockTerminationRequests = [
|
||||||
|
{
|
||||||
|
id: 'TERM-001',
|
||||||
|
dealerCode: 'DL-MH-025',
|
||||||
|
dealerName: 'Vikram Patil Motors',
|
||||||
|
location: 'Pune, Maharashtra',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
formatCategory: 'B',
|
||||||
|
terminationCategory: 'Breach of Agreement',
|
||||||
|
severity: 'High',
|
||||||
|
status: 'RBM Review',
|
||||||
|
currentStage: 'RBM',
|
||||||
|
submittedOn: '2025-10-15',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'TERM-002',
|
||||||
|
dealerCode: 'DL-TG-033',
|
||||||
|
dealerName: 'Sanjay Enterprises',
|
||||||
|
location: 'Hyderabad, Telangana',
|
||||||
|
dealershipType: 'Studio',
|
||||||
|
formatCategory: 'C',
|
||||||
|
terminationCategory: 'Financial Irregularities',
|
||||||
|
severity: 'Critical',
|
||||||
|
status: 'Legal Review',
|
||||||
|
currentStage: 'Legal',
|
||||||
|
submittedOn: '2025-09-20',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'TERM-003',
|
||||||
|
dealerCode: 'DL-KA-052',
|
||||||
|
dealerName: 'Anil Motors',
|
||||||
|
location: 'Mysore, Karnataka',
|
||||||
|
dealershipType: 'Main Dealer',
|
||||||
|
formatCategory: 'B',
|
||||||
|
terminationCategory: 'Non-compliance',
|
||||||
|
severity: 'Medium',
|
||||||
|
status: 'CEO Approved',
|
||||||
|
currentStage: 'Terminated',
|
||||||
|
submittedOn: '2025-08-01',
|
||||||
|
submittedBy: 'DD Lead'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const getSeverityColor = (severity: string) => {
|
||||||
|
switch (severity) {
|
||||||
|
case 'Critical':
|
||||||
|
return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
case 'High':
|
||||||
|
return 'bg-orange-100 text-orange-700 border-orange-300';
|
||||||
|
case 'Medium':
|
||||||
|
return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
case 'Low':
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
default:
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status.includes('Approved') || status.includes('Terminated')) return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-blue-100 text-blue-700 border-blue-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TerminationPage({ currentUser, onViewDetails }: TerminationPageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [dealerCode, setDealerCode] = useState('');
|
||||||
|
const [autoFilledData, setAutoFilledData] = useState<any>(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
inaugurationMonth: '',
|
||||||
|
inaugurationYear: '',
|
||||||
|
loaMonth: '',
|
||||||
|
loaYear: '',
|
||||||
|
loiMonth: '',
|
||||||
|
loiYear: '',
|
||||||
|
lastSixMonthsSales: '',
|
||||||
|
numberOfDealerships: '',
|
||||||
|
numberOfStudios: '',
|
||||||
|
constitution: '',
|
||||||
|
dealershipType: '',
|
||||||
|
typeOfClosure: '',
|
||||||
|
formatCategory: '',
|
||||||
|
dealerScoreCardBand: '',
|
||||||
|
terminationCategory: '',
|
||||||
|
subCategory: '',
|
||||||
|
description: '',
|
||||||
|
document: null as File | null
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleDealerCodeChange = (code: string) => {
|
||||||
|
setDealerCode(code);
|
||||||
|
if (mockDealerData[code]) {
|
||||||
|
setAutoFilledData(mockDealerData[code]);
|
||||||
|
toast.success('Dealer details loaded successfully');
|
||||||
|
} else {
|
||||||
|
setAutoFilledData(null);
|
||||||
|
if (code) {
|
||||||
|
toast.error('Dealer code not found');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!autoFilledData) {
|
||||||
|
toast.error('Please enter a valid dealer code');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success('Termination request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
// Reset form
|
||||||
|
setDealerCode('');
|
||||||
|
setAutoFilledData(null);
|
||||||
|
setFormData({
|
||||||
|
inaugurationMonth: '',
|
||||||
|
inaugurationYear: '',
|
||||||
|
loaMonth: '',
|
||||||
|
loaYear: '',
|
||||||
|
loiMonth: '',
|
||||||
|
loiYear: '',
|
||||||
|
lastSixMonthsSales: '',
|
||||||
|
numberOfDealerships: '',
|
||||||
|
numberOfStudios: '',
|
||||||
|
constitution: '',
|
||||||
|
dealershipType: '',
|
||||||
|
typeOfClosure: '',
|
||||||
|
formatCategory: '',
|
||||||
|
dealerScoreCardBand: '',
|
||||||
|
terminationCategory: '',
|
||||||
|
subCategory: '',
|
||||||
|
description: '',
|
||||||
|
document: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isDDLead = currentUser?.role === 'DD Lead';
|
||||||
|
|
||||||
|
// Helper function to check if request is at current user's level
|
||||||
|
const isRequestAtMyLevel = (request: any) => {
|
||||||
|
if (!currentUser) return false;
|
||||||
|
|
||||||
|
const roleToStageMapping: Record<string, string[]> = {
|
||||||
|
'DD Lead': ['DD Lead'],
|
||||||
|
'RBM': ['RBM'],
|
||||||
|
'ZBH': ['ZBH'],
|
||||||
|
'NBH': ['NBH'],
|
||||||
|
'Legal Admin': ['Legal'],
|
||||||
|
'DD Admin': ['DD Admin'],
|
||||||
|
'Super Admin': ['DD Admin', 'NBH', 'Legal', 'ZBH', 'RBM', 'DD Lead', 'CCO', 'CEO']
|
||||||
|
};
|
||||||
|
|
||||||
|
const userStages = roleToStageMapping[currentUser.role] || [];
|
||||||
|
return userStages.some(stage =>
|
||||||
|
request.currentStage.includes(stage) ||
|
||||||
|
request.status.includes(stage)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openRequests = mockTerminationRequests.filter(req =>
|
||||||
|
!req.status.includes('Terminated') &&
|
||||||
|
!req.status.includes('Completed') &&
|
||||||
|
!req.status.includes('Closed') &&
|
||||||
|
isRequestAtMyLevel(req)
|
||||||
|
);
|
||||||
|
|
||||||
|
const completedRequests = mockTerminationRequests.filter(req =>
|
||||||
|
req.status.includes('Terminated') ||
|
||||||
|
req.status.includes('Completed') ||
|
||||||
|
req.status.includes('Closed') ||
|
||||||
|
req.currentStage === 'Terminated'
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Warning Alert */}
|
||||||
|
<Alert className="border-red-200 bg-red-50">
|
||||||
|
<AlertTriangle className="h-4 w-4 text-red-600" />
|
||||||
|
<AlertTitle className="text-red-900">Restricted Access</AlertTitle>
|
||||||
|
<AlertDescription className="text-red-700">
|
||||||
|
This section contains sensitive information. All termination actions are logged and require proper authorization.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
{/* Header Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>All Cases</CardDescription>
|
||||||
|
<CardTitle className="text-3xl">{mockTerminationRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Total Cases</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Open</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-orange-600">{openRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Requires Your Action</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardDescription>Completed</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-green-600">{completedRequests.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-slate-600">Finalized</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle>Termination Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Manage dealer termination proceedings and legal compliance
|
||||||
|
{!isDDLead && (
|
||||||
|
<span className="block mt-1 text-red-600">
|
||||||
|
• Note: Only DD Lead can create termination requests. Current role: {currentUser?.role || 'Not logged in'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
{isDDLead && (
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-red-600 hover:bg-red-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Create Termination Request
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Termination Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Fill in the details to create a new termination request
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Dealer Code - Auto-fetch trigger */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerCode">Dealer Code *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerCode"
|
||||||
|
value={dealerCode}
|
||||||
|
onChange={(e) => handleDealerCodeChange(e.target.value)}
|
||||||
|
placeholder="e.g., DL-MH-025"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auto-filled data */}
|
||||||
|
{autoFilledData && (
|
||||||
|
<div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealer Name</Label>
|
||||||
|
<p>{autoFilledData.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GST</Label>
|
||||||
|
<p>{autoFilledData.gst}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Address</Label>
|
||||||
|
<p>{autoFilledData.address}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">City Category</Label>
|
||||||
|
<p>{autoFilledData.cityCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Domain Name</Label>
|
||||||
|
<p>{autoFilledData.domainName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Dealership Name</Label>
|
||||||
|
<p>{autoFilledData.dealershipName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Sales Code</Label>
|
||||||
|
<p>{autoFilledData.salesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Service Code</Label>
|
||||||
|
<p>{autoFilledData.serviceCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">Accessories Code</Label>
|
||||||
|
<p>{autoFilledData.accessoriesCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-slate-600">GMA Code</Label>
|
||||||
|
<p>{autoFilledData.gmaCode}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Date fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Inauguration *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.inaugurationMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, inaugurationMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.inaugurationYear}
|
||||||
|
onChange={(e) => setFormData({...formData, inaugurationYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>LOA *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.loaMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, loaMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.loaYear}
|
||||||
|
onChange={(e) => setFormData({...formData, loaYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>LOI *</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Month (1-12)"
|
||||||
|
min="1"
|
||||||
|
max="12"
|
||||||
|
value={formData.loiMonth}
|
||||||
|
onChange={(e) => setFormData({...formData, loiMonth: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Year"
|
||||||
|
min="2000"
|
||||||
|
max="2025"
|
||||||
|
value={formData.loiYear}
|
||||||
|
onChange={(e) => setFormData({...formData, loiYear: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="sales">Last 6 Months Sales *</Label>
|
||||||
|
<Input
|
||||||
|
id="sales"
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter sales figure"
|
||||||
|
value={formData.lastSixMonthsSales}
|
||||||
|
onChange={(e) => setFormData({...formData, lastSixMonthsSales: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Number fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dealerships">Number of Dealerships *</Label>
|
||||||
|
<Input
|
||||||
|
id="dealerships"
|
||||||
|
type="number"
|
||||||
|
value={formData.numberOfDealerships}
|
||||||
|
onChange={(e) => setFormData({...formData, numberOfDealerships: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="studios">Number of Studios *</Label>
|
||||||
|
<Input
|
||||||
|
id="studios"
|
||||||
|
type="number"
|
||||||
|
value={formData.numberOfStudios}
|
||||||
|
onChange={(e) => setFormData({...formData, numberOfStudios: e.target.value})}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dropdown fields */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Constitution *</Label>
|
||||||
|
<Select value={formData.constitution} onValueChange={(value) => setFormData({...formData, constitution: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select constitution" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pvt-ltd">PVT. LTD.</SelectItem>
|
||||||
|
<SelectItem value="partnership">Partnership</SelectItem>
|
||||||
|
<SelectItem value="proprietorship">Proprietorship</SelectItem>
|
||||||
|
<SelectItem value="public-limited">Public Limited</SelectItem>
|
||||||
|
<SelectItem value="llp">LLP</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Dealership Type *</Label>
|
||||||
|
<Select value={formData.dealershipType} onValueChange={(value) => setFormData({...formData, dealershipType: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="main-dealer">Main Dealer</SelectItem>
|
||||||
|
<SelectItem value="studio">Studio</SelectItem>
|
||||||
|
<SelectItem value="asp">ASP</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Type of Closure *</Label>
|
||||||
|
<Select value={formData.typeOfClosure} onValueChange={(value) => setFormData({...formData, typeOfClosure: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select closure type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="complete">Complete</SelectItem>
|
||||||
|
<SelectItem value="partial">Partial</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Format Category *</Label>
|
||||||
|
<Select value={formData.formatCategory} onValueChange={(value) => setFormData({...formData, formatCategory: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="a-plus">A+</SelectItem>
|
||||||
|
<SelectItem value="a">A</SelectItem>
|
||||||
|
<SelectItem value="b">B</SelectItem>
|
||||||
|
<SelectItem value="c">C</SelectItem>
|
||||||
|
<SelectItem value="d">D</SelectItem>
|
||||||
|
<SelectItem value="e">E</SelectItem>
|
||||||
|
<SelectItem value="r">R</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Dealer Score Card Band *</Label>
|
||||||
|
<Select value={formData.dealerScoreCardBand} onValueChange={(value) => setFormData({...formData, dealerScoreCardBand: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select band" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="platinum">Platinum</SelectItem>
|
||||||
|
<SelectItem value="gold">Gold</SelectItem>
|
||||||
|
<SelectItem value="silver">Silver</SelectItem>
|
||||||
|
<SelectItem value="bronze">Bronze</SelectItem>
|
||||||
|
<SelectItem value="no-band">No Band</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Termination specific fields */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Termination Category *</Label>
|
||||||
|
<Select value={formData.terminationCategory} onValueChange={(value) => setFormData({...formData, terminationCategory: value})}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select termination category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="working-capital">Working Capital</SelectItem>
|
||||||
|
<SelectItem value="performance-issues">Performance Issues</SelectItem>
|
||||||
|
<SelectItem value="unethical-practical">Unethical Practical</SelectItem>
|
||||||
|
<SelectItem value="unforeseen-circumstances">Unforeseen Circumstances</SelectItem>
|
||||||
|
<SelectItem value="others">Others</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formData.terminationCategory && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="subCategory">Sub Category *</Label>
|
||||||
|
<Input
|
||||||
|
id="subCategory"
|
||||||
|
value={formData.subCategory}
|
||||||
|
onChange={(e) => setFormData({...formData, subCategory: e.target.value})}
|
||||||
|
placeholder="Provide more details about the termination category"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="description">Description *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData({...formData, description: e.target.value})}
|
||||||
|
placeholder="Detailed description of the termination reason"
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="document">Upload Document</Label>
|
||||||
|
<Input
|
||||||
|
id="document"
|
||||||
|
type="file"
|
||||||
|
onChange={(e) => setFormData({...formData, document: e.target.files?.[0] || null})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" className="bg-red-600 hover:bg-red-700">
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Tabs defaultValue="all" className="w-full">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="all">All Cases</TabsTrigger>
|
||||||
|
<TabsTrigger value="open">Open</TabsTrigger>
|
||||||
|
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="all" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{mockTerminationRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-red-100 rounded-lg">
|
||||||
|
<XCircle className="w-6 h-6 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getSeverityColor(request.severity)}>
|
||||||
|
{request.severity}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Code</p>
|
||||||
|
<p>{request.dealerCode}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealership Type</p>
|
||||||
|
<p>{request.dealershipType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Format Category</p>
|
||||||
|
<p>{request.formatCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Termination Category</p>
|
||||||
|
<p>{request.terminationCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Current Stage</p>
|
||||||
|
<p>{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-500" />
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Open Tab */}
|
||||||
|
<TabsContent value="open" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{openRequests.length > 0 ? (
|
||||||
|
openRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-orange-100 rounded-lg">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-orange-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getSeverityColor(request.severity)}>
|
||||||
|
{request.severity}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Current Stage</p>
|
||||||
|
<p>{request.currentStage}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<XCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No requests requiring your action</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Completed Tab */}
|
||||||
|
<TabsContent value="completed" className="mt-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{completedRequests.length > 0 ? (
|
||||||
|
completedRequests.map((request) => (
|
||||||
|
<Card key={request.id} className="border-slate-200">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-4 flex-1">
|
||||||
|
<div className="p-3 bg-green-100 rounded-lg">
|
||||||
|
<XCircle className="w-6 h-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg">{request.id}</h3>
|
||||||
|
<Badge className={getStatusColor(request.status)}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Dealer Name</p>
|
||||||
|
<p>{request.dealerName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Location</p>
|
||||||
|
<p>{request.location}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Termination Category</p>
|
||||||
|
<p>{request.terminationCategory}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Submitted On</p>
|
||||||
|
<p>{request.submittedOn}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onViewDetails(request.id)}
|
||||||
|
className="ml-4"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-2" />
|
||||||
|
View Details
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 text-slate-500">
|
||||||
|
<XCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p>No completed termination cases</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
199
src/components/applications/UnopportunityRequestsPage.tsx
Normal file
199
src/components/applications/UnopportunityRequestsPage.tsx
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { mockApplications, locations, states } from '../../lib/mock-data';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '../ui/select';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Download,
|
||||||
|
Database
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '../ui/table';
|
||||||
|
|
||||||
|
interface UnopportunityRequestsPageProps {
|
||||||
|
onViewDetails: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UnopportunityRequestsPage({ onViewDetails }: UnopportunityRequestsPageProps) {
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [locationFilter, setLocationFilter] = useState<string>('all');
|
||||||
|
const [stateFilter, setStateFilter] = useState<string>('all');
|
||||||
|
|
||||||
|
// Filter unopportunity leads - These are lead generation submissions
|
||||||
|
// People who expressed interest but received unopportunity email because
|
||||||
|
// we're currently not offering dealerships in their preferred location
|
||||||
|
const filteredLeads = mockApplications.filter((app) => {
|
||||||
|
// Only show applications that have not been shortlisted by DD
|
||||||
|
// These are pure leads for future reference
|
||||||
|
const isUnopportunity = !app.isShortlisted;
|
||||||
|
|
||||||
|
const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.registrationNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
app.phone.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
const matchesLocation = locationFilter === 'all' || app.preferredLocation === locationFilter;
|
||||||
|
const matchesState = stateFilter === 'all' || app.state === stateFilter;
|
||||||
|
|
||||||
|
return isUnopportunity && matchesSearch && matchesLocation && matchesState;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl mb-2">Unopportunity Requests (Lead Generation)</h2>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Interest submissions from regions where dealerships are currently not being offered. These leads received unopportunity notification and are stored for future reference.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">Total Leads</p>
|
||||||
|
<p className="text-2xl text-slate-900 mt-1">{filteredLeads.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-blue-100 rounded-lg">
|
||||||
|
<Database className="w-6 h-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||||
|
<p className="text-slate-600">Unique Locations</p>
|
||||||
|
<p className="text-2xl text-slate-900 mt-1">
|
||||||
|
{new Set(filteredLeads.map(app => app.preferredLocation)).size}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||||
|
<p className="text-slate-600">With Experience</p>
|
||||||
|
<p className="text-2xl text-amber-600 mt-1">
|
||||||
|
{filteredLeads.filter(app => app.pastExperience && app.pastExperience !== 'No').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters and Actions */}
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name, email, phone, or registration number..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
||||||
|
<SelectTrigger className="w-full lg:w-48">
|
||||||
|
<SelectValue placeholder="All Locations" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Locations</SelectItem>
|
||||||
|
{locations.map((location) => (
|
||||||
|
<SelectItem key={location} value={location}>{location}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={stateFilter} onValueChange={setStateFilter}>
|
||||||
|
<SelectTrigger className="w-full lg:w-48">
|
||||||
|
<SelectValue placeholder="All States" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All States</SelectItem>
|
||||||
|
{states.map((state) => (
|
||||||
|
<SelectItem key={state} value={state}>{state}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<Download className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lead Generation Table */}
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Phone</TableHead>
|
||||||
|
<TableHead>Email</TableHead>
|
||||||
|
<TableHead>Preferred Location</TableHead>
|
||||||
|
<TableHead>Main Address</TableHead>
|
||||||
|
<TableHead>Age</TableHead>
|
||||||
|
<TableHead>Experience</TableHead>
|
||||||
|
<TableHead>Education</TableHead>
|
||||||
|
<TableHead>Applied On</TableHead>
|
||||||
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredLeads.map((lead) => (
|
||||||
|
<TableRow key={lead.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900">{lead.name}</p>
|
||||||
|
<p className="text-slate-500 text-sm">{lead.registrationNumber}</p>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-900">{lead.phone}</TableCell>
|
||||||
|
<TableCell className="text-slate-600">{lead.email}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900">{lead.preferredLocation}</p>
|
||||||
|
<p className="text-slate-500 text-sm">{lead.state}</p>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600 max-w-xs truncate">{lead.residentialAddress}</TableCell>
|
||||||
|
<TableCell className="text-slate-900">{lead.age}</TableCell>
|
||||||
|
<TableCell className="text-slate-600">{lead.pastExperience}</TableCell>
|
||||||
|
<TableCell className="text-slate-900">{lead.education}</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{new Date(lead.submissionDate).toLocaleDateString()}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onViewDetails(lead.id)}
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
{filteredLeads.length === 0 && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={10} className="text-center py-12 text-slate-500">
|
||||||
|
<Database className="w-12 h-12 mx-auto mb-4 text-slate-400" />
|
||||||
|
<p className="text-lg mb-2">No lead generation data found</p>
|
||||||
|
<p className="text-sm">Try adjusting your filters</p>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
367
src/components/applications/WorkNotesPage.tsx
Normal file
367
src/components/applications/WorkNotesPage.tsx
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { ScrollArea } from '../ui/scroll-area';
|
||||||
|
import { Avatar, AvatarFallback } from '../ui/avatar';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Send,
|
||||||
|
Paperclip,
|
||||||
|
Smile,
|
||||||
|
Image as ImageIcon,
|
||||||
|
MessageSquare
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { WorkNote } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
interface WorkNotesPageProps {
|
||||||
|
applicationId: string;
|
||||||
|
applicationName: string;
|
||||||
|
registrationNumber: string;
|
||||||
|
onBack: () => void;
|
||||||
|
initialNotes?: WorkNote[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Participant {
|
||||||
|
name: string;
|
||||||
|
initials: string;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkNotesPage({
|
||||||
|
applicationId,
|
||||||
|
applicationName,
|
||||||
|
registrationNumber,
|
||||||
|
onBack,
|
||||||
|
initialNotes = []
|
||||||
|
}: WorkNotesPageProps) {
|
||||||
|
const [notes, setNotes] = useState<WorkNote[]>(initialNotes);
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
const [showMentionSuggestions, setShowMentionSuggestions] = useState(false);
|
||||||
|
const [mentionQuery, setMentionQuery] = useState('');
|
||||||
|
const [cursorPosition, setCursorPosition] = useState(0);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Mock participants for @mentions
|
||||||
|
const participants: Participant[] = [
|
||||||
|
{ name: 'Sarah Chen', initials: 'SC', color: 'bg-green-600' },
|
||||||
|
{ name: 'Lisa Wong', initials: 'LW', color: 'bg-blue-600' },
|
||||||
|
{ name: 'Mark Johnson', initials: 'MJ', color: 'bg-purple-600' },
|
||||||
|
{ name: 'Anjali Sharma', initials: 'AS', color: 'bg-amber-600' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Scroll to bottom when new messages arrive
|
||||||
|
useEffect(() => {
|
||||||
|
if (scrollRef.current) {
|
||||||
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||||
|
}
|
||||||
|
}, [notes]);
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
const cursorPos = e.target.selectionStart || 0;
|
||||||
|
|
||||||
|
setMessage(value);
|
||||||
|
setCursorPosition(cursorPos);
|
||||||
|
|
||||||
|
// Check if user is typing @ mention
|
||||||
|
const textBeforeCursor = value.substring(0, cursorPos);
|
||||||
|
const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
|
||||||
|
|
||||||
|
if (lastAtSymbol !== -1 && lastAtSymbol === textBeforeCursor.length - 1) {
|
||||||
|
setShowMentionSuggestions(true);
|
||||||
|
setMentionQuery('');
|
||||||
|
} else if (lastAtSymbol !== -1) {
|
||||||
|
const query = textBeforeCursor.substring(lastAtSymbol + 1);
|
||||||
|
if (!query.includes(' ')) {
|
||||||
|
setShowMentionSuggestions(true);
|
||||||
|
setMentionQuery(query);
|
||||||
|
} else {
|
||||||
|
setShowMentionSuggestions(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setShowMentionSuggestions(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMentionSelect = (name: string) => {
|
||||||
|
const textBeforeCursor = message.substring(0, cursorPosition);
|
||||||
|
const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
|
||||||
|
const textAfterCursor = message.substring(cursorPosition);
|
||||||
|
|
||||||
|
const newMessage =
|
||||||
|
message.substring(0, lastAtSymbol) +
|
||||||
|
`@${name} ` +
|
||||||
|
textAfterCursor;
|
||||||
|
|
||||||
|
setMessage(newMessage);
|
||||||
|
setShowMentionSuggestions(false);
|
||||||
|
inputRef.current?.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendMessage = () => {
|
||||||
|
if (!message.trim()) return;
|
||||||
|
|
||||||
|
// Extract mentions from message
|
||||||
|
const mentionRegex = /@(\w+\s*\w*)/g;
|
||||||
|
const mentions: string[] = [];
|
||||||
|
let match;
|
||||||
|
while ((match = mentionRegex.exec(message)) !== null) {
|
||||||
|
mentions.push(match[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const newNote: WorkNote = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
user: 'Current User',
|
||||||
|
message: message,
|
||||||
|
timestamp: new Date().toLocaleString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: false
|
||||||
|
}),
|
||||||
|
mentions: mentions.length > 0 ? mentions : undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
setNotes([...notes, newNote]);
|
||||||
|
setMessage('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSendMessage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderMessageWithMentions = (text: string) => {
|
||||||
|
const parts = text.split(/(@\w+\s*\w*)/g);
|
||||||
|
|
||||||
|
return parts.map((part, index) => {
|
||||||
|
if (part.startsWith('@')) {
|
||||||
|
return (
|
||||||
|
<span key={index} className="text-blue-600 hover:underline cursor-pointer">
|
||||||
|
{part}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <span key={index}>{part}</span>;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getInitials = (name: string) => {
|
||||||
|
return name
|
||||||
|
.split(' ')
|
||||||
|
.map(n => n[0])
|
||||||
|
.join('')
|
||||||
|
.toUpperCase()
|
||||||
|
.substring(0, 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAvatarColor = (name: string) => {
|
||||||
|
const colors = [
|
||||||
|
'bg-green-600',
|
||||||
|
'bg-blue-600',
|
||||||
|
'bg-purple-600',
|
||||||
|
'bg-amber-600',
|
||||||
|
'bg-pink-600',
|
||||||
|
'bg-indigo-600',
|
||||||
|
'bg-teal-600',
|
||||||
|
];
|
||||||
|
const index = name.length % colors.length;
|
||||||
|
return colors[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredParticipants = participants.filter(p =>
|
||||||
|
p.name.toLowerCase().includes(mentionQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen flex flex-col bg-slate-50">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white border-b border-slate-200 px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={onBack}
|
||||||
|
className="hover:bg-slate-100"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900">Work Notes</h1>
|
||||||
|
<div className="flex items-center gap-2 text-slate-600">
|
||||||
|
<span>{applicationName}</span>
|
||||||
|
<span className="text-slate-400">|</span>
|
||||||
|
<span className="text-slate-500">{registrationNumber}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Participant Avatars */}
|
||||||
|
<div className="flex items-center -space-x-2">
|
||||||
|
{participants.slice(0, 3).map((participant, index) => (
|
||||||
|
<Avatar
|
||||||
|
key={index}
|
||||||
|
className="w-8 h-8 border-2 border-white"
|
||||||
|
>
|
||||||
|
<AvatarFallback className={`${participant.color} text-white text-xs`}>
|
||||||
|
{participant.initials}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
))}
|
||||||
|
{participants.length > 3 && (
|
||||||
|
<div className="w-8 h-8 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center">
|
||||||
|
<span className="text-slate-600 text-xs">+{participants.length - 3}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages Area */}
|
||||||
|
<ScrollArea className="flex-1 px-6 py-4">
|
||||||
|
<div className="max-w-4xl mx-auto space-y-6" ref={scrollRef}>
|
||||||
|
{notes.map((note, index) => {
|
||||||
|
const isCurrentUser = note.user === 'Current User';
|
||||||
|
const previousNote = index > 0 ? notes[index - 1] : null;
|
||||||
|
const showAvatar = !previousNote || previousNote.user !== note.user;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={note.id} className="flex gap-3">
|
||||||
|
{/* Avatar */}
|
||||||
|
{showAvatar ? (
|
||||||
|
<Avatar className="w-10 h-10 flex-shrink-0">
|
||||||
|
<AvatarFallback className={`${getAvatarColor(note.user)} text-white`}>
|
||||||
|
{getInitials(note.user)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
) : (
|
||||||
|
<div className="w-10 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Message Content */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
{showAvatar && (
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<span className="text-slate-900">{note.user}</span>
|
||||||
|
{index === 0 && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
Initiator
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<span className="text-slate-400 text-xs">
|
||||||
|
{note.timestamp}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-slate-200 px-4 py-3 shadow-sm">
|
||||||
|
<p className="text-slate-700 leading-relaxed whitespace-pre-wrap">
|
||||||
|
{renderMessageWithMentions(note.message)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{notes.length === 0 && (
|
||||||
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||||
|
<MessageSquare className="w-16 h-16 text-slate-300 mb-4" />
|
||||||
|
<h3 className="text-slate-900 mb-2">No messages yet</h3>
|
||||||
|
<p className="text-slate-600">Start the conversation by sending a message below</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
{/* Input Area */}
|
||||||
|
<div className="bg-white border-t border-slate-200 px-6 py-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Mention Suggestions */}
|
||||||
|
{showMentionSuggestions && filteredParticipants.length > 0 && (
|
||||||
|
<div className="mb-2 bg-white border border-slate-200 rounded-lg shadow-lg overflow-hidden">
|
||||||
|
{filteredParticipants.map((participant) => (
|
||||||
|
<button
|
||||||
|
key={participant.name}
|
||||||
|
onClick={() => handleMentionSelect(participant.name)}
|
||||||
|
className="w-full flex items-center gap-3 px-4 py-2 hover:bg-slate-50 transition-colors text-left"
|
||||||
|
>
|
||||||
|
<Avatar className="w-8 h-8">
|
||||||
|
<AvatarFallback className={`${participant.color} text-white text-xs`}>
|
||||||
|
{participant.initials}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<span className="text-slate-900">{participant.name}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Input Field */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-slate-400 hover:text-slate-600"
|
||||||
|
>
|
||||||
|
<Paperclip className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-slate-400 hover:text-slate-600"
|
||||||
|
>
|
||||||
|
<ImageIcon className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-slate-400 hover:text-slate-600"
|
||||||
|
>
|
||||||
|
<Smile className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Input
|
||||||
|
ref={inputRef}
|
||||||
|
type="text"
|
||||||
|
placeholder="Type your message... Use @username to mention someone"
|
||||||
|
value={message}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
className="w-full pr-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleSendMessage}
|
||||||
|
disabled={!message.trim()}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||||
|
size="icon"
|
||||||
|
>
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-slate-400 text-xs mt-2">
|
||||||
|
Press Enter to send • Use @ to mention someone
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
398
src/components/applications/WorknotePage.tsx
Normal file
398
src/components/applications/WorknotePage.tsx
Normal file
@ -0,0 +1,398 @@
|
|||||||
|
import { ArrowLeft, MessageSquare, Send, Clock, User as UserIcon } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface WorknotePageProps {
|
||||||
|
requestId: string;
|
||||||
|
requestType: 'relocation' | 'constitutional-change' | 'fnf' | 'resignation' | 'termination';
|
||||||
|
requestTitle: string;
|
||||||
|
onBack: () => void;
|
||||||
|
currentUser: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock worknotes - Discussion platform for requests
|
||||||
|
const initialWorknotes = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
user: 'Rajesh Kumar',
|
||||||
|
role: 'ASM',
|
||||||
|
message: 'I have visited the proposed location. The area has good visibility and footfall. However, parking might be a concern during peak hours.',
|
||||||
|
timestamp: '2025-12-21 10:30 AM',
|
||||||
|
avatar: 'RK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
user: 'Priya Sharma',
|
||||||
|
role: 'RBM',
|
||||||
|
message: 'Thanks for the site visit update. Can we get clarity on the parking arrangements from the dealer?',
|
||||||
|
timestamp: '2025-12-21 03:45 PM',
|
||||||
|
avatar: 'PS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'We have secured dedicated parking for 15 bikes in the basement. Additionally, there\'s street parking available during non-peak hours.',
|
||||||
|
timestamp: '2025-12-22 09:15 AM',
|
||||||
|
avatar: 'AS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
user: 'Suresh Patel',
|
||||||
|
role: 'DD-ZM',
|
||||||
|
message: 'Good to know about parking. What about the competition analysis in the new area? Any other Royal Enfield dealers nearby?',
|
||||||
|
timestamp: '2025-12-23 11:00 AM',
|
||||||
|
avatar: 'SP'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'Nearest RE dealer is 8km away in Powai. This location will help us tap into the Andheri East market which is currently underserved.',
|
||||||
|
timestamp: '2025-12-23 02:20 PM',
|
||||||
|
avatar: 'AS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
user: 'Vikram Singh',
|
||||||
|
role: 'DD Lead',
|
||||||
|
message: 'The market analysis looks promising. @Amit Sharma, please also share the projected sales figures for the first year at the new location.',
|
||||||
|
timestamp: '2025-12-24 09:00 AM',
|
||||||
|
avatar: 'VS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
user: 'Amit Sharma',
|
||||||
|
role: 'Dealer',
|
||||||
|
message: 'Based on the catchment area analysis, we are projecting 180-200 units in Year 1, with a growth rate of 15-20% YoY. Detailed projection sheet will be uploaded in documents section.',
|
||||||
|
timestamp: '2025-12-24 02:30 PM',
|
||||||
|
avatar: 'AS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
user: 'Neha Kapoor',
|
||||||
|
role: 'DD Head',
|
||||||
|
message: 'Excellent! The projections align with our regional targets. Once the financial documents are verified, we can move forward with approval.',
|
||||||
|
timestamp: '2025-12-25 10:15 AM',
|
||||||
|
avatar: 'NK'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Generate avatar color based on role
|
||||||
|
const getAvatarColor = (role: string) => {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
'Dealer': 'bg-blue-600',
|
||||||
|
'ASM': 'bg-green-600',
|
||||||
|
'RBM': 'bg-purple-600',
|
||||||
|
'DD-ZM': 'bg-amber-600',
|
||||||
|
'ZBH': 'bg-red-600',
|
||||||
|
'DD Lead': 'bg-indigo-600',
|
||||||
|
'DD Head': 'bg-pink-600',
|
||||||
|
'NBH': 'bg-teal-600',
|
||||||
|
'DD Admin': 'bg-orange-600',
|
||||||
|
'Super Admin': 'bg-slate-700',
|
||||||
|
'Finance': 'bg-emerald-600'
|
||||||
|
};
|
||||||
|
return colorMap[role] || 'bg-slate-600';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function WorknotePage({ requestId, requestType, requestTitle, onBack, currentUser }: WorknotePageProps) {
|
||||||
|
const [worknotes, setWorknotes] = useState(initialWorknotes);
|
||||||
|
const [newWorknote, setNewWorknote] = useState('');
|
||||||
|
|
||||||
|
const handleAddWorknote = () => {
|
||||||
|
if (newWorknote.trim()) {
|
||||||
|
const now = new Date();
|
||||||
|
const timestamp = now.toLocaleString('en-US', {
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const newNote = {
|
||||||
|
id: worknotes.length + 1,
|
||||||
|
user: currentUser?.name || 'Anonymous',
|
||||||
|
role: currentUser?.role || 'User',
|
||||||
|
message: newWorknote,
|
||||||
|
timestamp: timestamp,
|
||||||
|
avatar: currentUser?.name?.split(' ').map(n => n[0]).join('').toUpperCase() || 'AN'
|
||||||
|
};
|
||||||
|
|
||||||
|
setWorknotes([...worknotes, newNote]);
|
||||||
|
setNewWorknote('');
|
||||||
|
toast.success('Worknote posted successfully');
|
||||||
|
|
||||||
|
// Auto-scroll to bottom after adding new note
|
||||||
|
setTimeout(() => {
|
||||||
|
const container = document.getElementById('worknotes-container');
|
||||||
|
if (container) {
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||||
|
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleAddWorknote();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white border-b border-slate-200 px-4 sm:px-6 py-4 sticky top-0 z-10">
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||||
|
<div className="flex items-center gap-3 sm:gap-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={onBack}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Back to Request
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<MessageSquare className="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" />
|
||||||
|
<h1 className="text-slate-900 text-lg sm:text-xl">Worknotes Discussion</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-xs sm:text-sm mt-1">
|
||||||
|
{requestId} - {requestTitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline" className="border-blue-300 text-blue-700">
|
||||||
|
{worknotes.length} Messages
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content Area */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
|
||||||
|
{/* Discussion Thread - Takes 2 columns */}
|
||||||
|
<div className="lg:col-span-2 flex flex-col min-h-0">
|
||||||
|
<Card className="flex flex-col">
|
||||||
|
<CardHeader className="border-b border-slate-200 py-3">
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<MessageSquare className="w-5 h-5 text-amber-600" />
|
||||||
|
Discussion Thread
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{/* Messages Container */}
|
||||||
|
<div
|
||||||
|
id="worknotes-container"
|
||||||
|
className="h-[300px] sm:h-[350px] lg:h-[400px] overflow-y-auto p-3 sm:p-4 space-y-2 bg-slate-50"
|
||||||
|
>
|
||||||
|
{worknotes.map((note) => {
|
||||||
|
const isCurrentUser = note.user === currentUser?.name;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={note.id}
|
||||||
|
className={`flex items-start gap-2 ${isCurrentUser ? 'flex-row-reverse' : ''}`}
|
||||||
|
>
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className={`w-7 h-7 rounded-full ${getAvatarColor(note.role)} flex items-center justify-center text-white flex-shrink-0 text-xs`}>
|
||||||
|
{note.avatar}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Content */}
|
||||||
|
<div className={`flex-1 max-w-2xl ${isCurrentUser ? 'items-end' : ''}`}>
|
||||||
|
<div className={`bg-white rounded-lg p-2.5 border border-slate-200 shadow-sm ${isCurrentUser ? 'bg-amber-50 border-amber-200' : ''}`}>
|
||||||
|
<div className={`flex items-start justify-between mb-1 gap-2 ${isCurrentUser ? 'flex-row-reverse' : ''}`}>
|
||||||
|
<div className={isCurrentUser ? 'text-right' : ''}>
|
||||||
|
<h5 className="text-slate-900 text-xs font-medium">{note.user}</h5>
|
||||||
|
<Badge variant="outline" className="border-slate-300 text-[10px] h-4 px-1.5 mt-0.5">
|
||||||
|
{note.role}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className={`flex items-center gap-1 text-slate-500 text-[10px] ${isCurrentUser ? 'flex-row-reverse' : ''}`}>
|
||||||
|
<Clock className="w-2.5 h-2.5" />
|
||||||
|
<span className="whitespace-nowrap">{note.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-700 whitespace-pre-wrap text-xs leading-relaxed">{note.message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{worknotes.length === 0 && (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-center py-12">
|
||||||
|
<MessageSquare className="w-16 h-16 text-slate-300 mb-4" />
|
||||||
|
<h3 className="text-slate-900 mb-2">No worknotes yet</h3>
|
||||||
|
<p className="text-slate-600 text-sm">Start the discussion by posting the first worknote</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Input Area - Fixed at bottom */}
|
||||||
|
<Card className="mt-3 lg:mt-4">
|
||||||
|
<CardContent className="p-3 sm:p-4">
|
||||||
|
<div className="space-y-2 sm:space-y-3">
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<Label htmlFor="newWorknote" className="text-slate-900 text-sm">
|
||||||
|
Add New Worknote
|
||||||
|
</Label>
|
||||||
|
<span className="text-slate-500 text-xs hidden sm:inline">
|
||||||
|
Press Ctrl + Enter to send
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Textarea
|
||||||
|
id="newWorknote"
|
||||||
|
value={newWorknote}
|
||||||
|
onChange={(e) => setNewWorknote(e.target.value)}
|
||||||
|
onKeyDown={handleKeyPress}
|
||||||
|
placeholder="Type your message here..."
|
||||||
|
rows={2}
|
||||||
|
className="resize-none text-sm"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||||
|
<p className="text-slate-500 text-xs">
|
||||||
|
Posting as: <span className="text-slate-900">{currentUser?.name || 'Anonymous'}</span>
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={handleAddWorknote}
|
||||||
|
disabled={!newWorknote.trim()}
|
||||||
|
className="bg-amber-600 hover:bg-amber-700 text-sm h-9"
|
||||||
|
>
|
||||||
|
<Send className="w-3.5 h-3.5 mr-2" />
|
||||||
|
Post
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar - Guidelines and Info */}
|
||||||
|
<div className="space-y-3 lg:space-y-4 max-h-[600px] lg:max-h-[700px] overflow-y-auto pr-1">
|
||||||
|
{/* Request Info */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="py-3">
|
||||||
|
<CardTitle className="text-sm">Request Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2.5">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-xs mb-1">Request ID</p>
|
||||||
|
<p className="text-slate-900 text-xs break-all">{requestId}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-xs mb-1">Request Type</p>
|
||||||
|
<Badge variant="outline" className="capitalize text-xs">
|
||||||
|
{requestType.replace('-', ' ')}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600 text-xs mb-1">Title</p>
|
||||||
|
<p className="text-slate-900 text-xs break-words">{requestTitle}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Statistics */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="py-3">
|
||||||
|
<CardTitle className="text-sm">Discussion Statistics</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2.5">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-slate-600 text-xs">Total Messages</span>
|
||||||
|
<span className="text-slate-900 text-sm">{worknotes.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-slate-600 text-xs">Participants</span>
|
||||||
|
<span className="text-slate-900 text-sm">
|
||||||
|
{new Set(worknotes.map(n => n.user)).size}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-slate-600 text-xs">Last Activity</span>
|
||||||
|
<span className="text-slate-900 text-xs">
|
||||||
|
{worknotes.length > 0 ? worknotes[worknotes.length - 1].timestamp.split(' ')[0] : 'N/A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Guidelines */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="py-3">
|
||||||
|
<CardTitle className="text-sm">Worknote Guidelines</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="space-y-1.5 text-slate-600 text-xs">
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>Be clear and concise in your messages</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>Use @ mentions to tag specific users</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>All worknotes are permanently logged</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>Stay professional and on-topic</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>Include relevant details and context</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<span className="text-amber-600 mt-0.5">•</span>
|
||||||
|
<span>Respond to queries in a timely manner</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Participants */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="py-3">
|
||||||
|
<CardTitle className="text-sm">Active Participants</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{Array.from(new Set(worknotes.map(n => JSON.stringify({ user: n.user, role: n.role, avatar: n.avatar }))))
|
||||||
|
.map(str => JSON.parse(str))
|
||||||
|
.map((participant, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-2">
|
||||||
|
<div className={`w-6 h-6 rounded-full ${getAvatarColor(participant.role)} flex items-center justify-center text-white text-xs`}>
|
||||||
|
{participant.avatar}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-slate-900 text-xs truncate">{participant.user}</p>
|
||||||
|
<p className="text-slate-600 text-[10px]">{participant.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
295
src/components/auth/LoginPage.tsx
Normal file
295
src/components/auth/LoginPage.tsx
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Checkbox } from '../ui/checkbox';
|
||||||
|
import { AlertCircle, Copy, Check } from 'lucide-react';
|
||||||
|
import { mockUsers } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
interface LoginPageProps {
|
||||||
|
onLogin: (email: string, password: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LoginPage({ onLogin }: LoginPageProps) {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [rememberMe, setRememberMe] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [showForgotPassword, setShowForgotPassword] = useState(false);
|
||||||
|
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const copyToClipboard = async (text: string, index: number) => {
|
||||||
|
try {
|
||||||
|
// Try modern clipboard API first
|
||||||
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
setCopiedIndex(index);
|
||||||
|
setTimeout(() => setCopiedIndex(null), 2000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// Clipboard API blocked, try fallback method
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback method for older browsers or blocked clipboard
|
||||||
|
try {
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = text;
|
||||||
|
textArea.style.position = 'fixed';
|
||||||
|
textArea.style.left = '-999999px';
|
||||||
|
textArea.style.top = '-999999px';
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.focus();
|
||||||
|
textArea.select();
|
||||||
|
|
||||||
|
const successful = document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
|
||||||
|
if (successful) {
|
||||||
|
setCopiedIndex(index);
|
||||||
|
setTimeout(() => setCopiedIndex(null), 2000);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
// Both methods failed - silently ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const quickLogin = (userEmail: string, userPassword: string) => {
|
||||||
|
setEmail(userEmail);
|
||||||
|
setPassword(userPassword);
|
||||||
|
// Auto-submit after a short delay
|
||||||
|
setTimeout(() => {
|
||||||
|
onLogin(userEmail, userPassword);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
if (!email || !password) {
|
||||||
|
setError('Please enter both email and password');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple validation for demo
|
||||||
|
if (password.length < 6) {
|
||||||
|
setError('Invalid credentials');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onLogin(email, password);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleForgotPassword = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// Mock password reset
|
||||||
|
alert('Password reset link sent to ' + email);
|
||||||
|
setShowForgotPassword(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4 overflow-y-auto">
|
||||||
|
{/* Background decorative elements */}
|
||||||
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div className="absolute -top-40 -right-40 w-80 h-80 bg-amber-600/10 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-amber-600/10 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-6xl grid md:grid-cols-2 gap-8 my-8">
|
||||||
|
{/* Left side - Login Form */}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* Logo and Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="inline-flex items-center justify-center w-20 h-20 bg-amber-600 rounded-full mb-4">
|
||||||
|
<svg viewBox="0 0 24 24" className="w-12 h-12 text-white" fill="currentColor">
|
||||||
|
<path d="M12 2L4 6v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V6l-8-4zm0 2.2l6 3v4.8c0 4.5-3.1 8.7-6 10-2.9-1.3-6-5.5-6-10V7.2l6-3z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-white mb-2">Royal Enfield</h1>
|
||||||
|
<p className="text-slate-400">Dealership Onboarding System</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Login Form */}
|
||||||
|
<div className="bg-white rounded-lg shadow-2xl p-8">
|
||||||
|
{!showForgotPassword ? (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">Email Address</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="you@royalenfield.com"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="password">Password</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter your password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="remember"
|
||||||
|
checked={rememberMe}
|
||||||
|
onCheckedChange={(checked) => setRememberMe(checked as boolean)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="remember" className="cursor-pointer">
|
||||||
|
Remember Me
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowForgotPassword(true)}
|
||||||
|
className="text-amber-600 hover:text-amber-700"
|
||||||
|
>
|
||||||
|
Forgot Password?
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-md">
|
||||||
|
<AlertCircle className="w-4 h-4 text-red-600" />
|
||||||
|
<span className="text-red-600">{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full bg-amber-600 hover:bg-amber-700">
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleForgotPassword} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="mb-2">Reset Password</h2>
|
||||||
|
<p className="text-slate-600">Enter your email to receive a password reset link</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reset-email">Email Address</Label>
|
||||||
|
<Input
|
||||||
|
id="reset-email"
|
||||||
|
type="email"
|
||||||
|
placeholder="you@royalenfield.com"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowForgotPassword(false)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
Back to Login
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" className="flex-1 bg-amber-600 hover:bg-amber-700">
|
||||||
|
Send Reset Link
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center mt-6 text-slate-400">
|
||||||
|
<p>© 2025 Royal Enfield. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right side - Test Credentials */}
|
||||||
|
<div className="bg-white rounded-lg shadow-2xl p-8 overflow-y-auto max-h-[800px]">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="mb-2">Test User Credentials</h2>
|
||||||
|
<p className="text-slate-600">Click on any user to auto-login</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{mockUsers.map((user, index) => (
|
||||||
|
<div
|
||||||
|
key={user.id}
|
||||||
|
className="border border-slate-200 rounded-lg p-4 hover:border-amber-600 hover:bg-amber-50 transition-all cursor-pointer"
|
||||||
|
onClick={() => quickLogin(user.email, user.password)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<span className="px-2 py-1 bg-amber-100 text-amber-800 rounded text-xs">
|
||||||
|
{user.role}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-900">{user.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-slate-500">Email:</p>
|
||||||
|
<p className="text-slate-900 font-mono break-all">{user.email}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
copyToClipboard(user.email, index * 2);
|
||||||
|
}}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded"
|
||||||
|
>
|
||||||
|
{copiedIndex === index * 2 ? (
|
||||||
|
<Check className="w-4 h-4 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<Copy className="w-4 h-4 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-slate-500">Password:</p>
|
||||||
|
<p className="text-slate-900 font-mono">{user.password}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
copyToClipboard(user.password, index * 2 + 1);
|
||||||
|
}}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded"
|
||||||
|
>
|
||||||
|
{copiedIndex === index * 2 + 1 ? (
|
||||||
|
<Check className="w-4 h-4 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<Copy className="w-4 h-4 text-slate-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 pt-3 border-t border-slate-200">
|
||||||
|
<p className="text-amber-600 text-center">Click to login as {user.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
262
src/components/dashboard/Dashboard.tsx
Normal file
262
src/components/dashboard/Dashboard.tsx
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
UserCheck,
|
||||||
|
XCircle,
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
AlertCircle,
|
||||||
|
ClipboardCheck,
|
||||||
|
Mail,
|
||||||
|
Inbox
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { dashboardStats, recentActivities } from '../../lib/mock-data';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { ScrollArea } from '../ui/scroll-area';
|
||||||
|
|
||||||
|
interface DashboardProps {
|
||||||
|
onNavigate: (view: string, filter?: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Dashboard({ onNavigate }: DashboardProps) {
|
||||||
|
const statCards = [
|
||||||
|
{
|
||||||
|
title: 'Total Applications',
|
||||||
|
value: dashboardStats.totalApplications,
|
||||||
|
icon: FileText,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
trend: { value: 12, isPositive: true },
|
||||||
|
filter: 'all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'LOA Issued',
|
||||||
|
value: dashboardStats.loaIssued,
|
||||||
|
icon: CheckCircle,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
trend: { value: 8, isPositive: true },
|
||||||
|
filter: 'Approved'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Level 1 Pending',
|
||||||
|
value: dashboardStats.level1Pending,
|
||||||
|
icon: Clock,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
trend: { value: 3, isPositive: false },
|
||||||
|
filter: 'Level 1 Pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Level 2 Pending',
|
||||||
|
value: dashboardStats.level2Pending,
|
||||||
|
icon: UserCheck,
|
||||||
|
color: 'bg-purple-500',
|
||||||
|
trend: { value: 5, isPositive: true },
|
||||||
|
filter: 'Level 2 Pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Level 3 Pending',
|
||||||
|
value: dashboardStats.level3Pending,
|
||||||
|
icon: ClipboardCheck,
|
||||||
|
color: 'bg-indigo-500',
|
||||||
|
trend: { value: 2, isPositive: false },
|
||||||
|
filter: 'Level 3 Pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'EOR In Progress',
|
||||||
|
value: dashboardStats.eorInProgress,
|
||||||
|
icon: AlertCircle,
|
||||||
|
color: 'bg-cyan-500',
|
||||||
|
trend: { value: 1, isPositive: true },
|
||||||
|
filter: 'EOR In Progress'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Disqualified',
|
||||||
|
value: dashboardStats.disqualified,
|
||||||
|
icon: XCircle,
|
||||||
|
color: 'bg-red-500',
|
||||||
|
trend: { value: 4, isPositive: false },
|
||||||
|
filter: 'Disqualified'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Reminders',
|
||||||
|
value: dashboardStats.pendingReminders,
|
||||||
|
icon: Mail,
|
||||||
|
color: 'bg-orange-500',
|
||||||
|
trend: { value: 7, isPositive: false },
|
||||||
|
filter: 'Questionnaire Pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Shortlisted Today',
|
||||||
|
value: dashboardStats.shortlistedToday,
|
||||||
|
icon: CheckCircle,
|
||||||
|
color: 'bg-teal-500',
|
||||||
|
trend: { value: 5, isPositive: true },
|
||||||
|
filter: 'Shortlisted'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Shortlisting',
|
||||||
|
value: dashboardStats.pendingShortlisting,
|
||||||
|
icon: Inbox,
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
trend: { value: 2, isPositive: false },
|
||||||
|
filter: 'all',
|
||||||
|
action: 'all-applications' // Special action to navigate to all applications page
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock chart data for status distribution
|
||||||
|
const statusData = [
|
||||||
|
{ status: 'Pending', count: 45, color: '#f59e0b' },
|
||||||
|
{ status: 'In Progress', count: 68, color: '#3b82f6' },
|
||||||
|
{ status: 'Approved', count: 25, color: '#10b981' },
|
||||||
|
{ status: 'Rejected', count: 12, color: '#ef4444' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const locationData = [
|
||||||
|
{ location: 'Mumbai', count: 23 },
|
||||||
|
{ location: 'Delhi', count: 18 },
|
||||||
|
{ location: 'Bangalore', count: 21 },
|
||||||
|
{ location: 'Chennai', count: 15 },
|
||||||
|
{ location: 'Kolkata', count: 12 },
|
||||||
|
{ location: 'Others', count: 61 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const maxLocationCount = Math.max(...locationData.map(l => l.count));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Metric Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{statCards.map((stat) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
const TrendIcon = stat.trend.isPositive ? TrendingUp : TrendingDown;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={stat.title}
|
||||||
|
className="cursor-pointer hover:shadow-lg transition-shadow"
|
||||||
|
onClick={() => onNavigate((stat as any).action || 'applications', stat.filter)}
|
||||||
|
>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-slate-600">{stat.title}</CardTitle>
|
||||||
|
<div className={`${stat.color} p-2 rounded-lg`}>
|
||||||
|
<Icon className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-end justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="text-slate-900">{stat.value}</div>
|
||||||
|
<div className={`flex items-center gap-1 mt-1 ${
|
||||||
|
stat.trend.isPositive ? 'text-green-600' : 'text-red-600'
|
||||||
|
}`}>
|
||||||
|
<TrendIcon className="w-3 h-3" />
|
||||||
|
<span>{stat.trend.value}% from last month</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Charts and Activity */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* Status Distribution */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Application Status Distribution</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{statusData.map((item) => (
|
||||||
|
<div key={item.status} className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="w-3 h-3 rounded-full"
|
||||||
|
style={{ backgroundColor: item.color }}
|
||||||
|
></div>
|
||||||
|
<span className="text-slate-700">{item.status}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-900">{item.count}</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-slate-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="h-2 rounded-full transition-all"
|
||||||
|
style={{
|
||||||
|
width: `${(item.count / 150) * 100}%`,
|
||||||
|
backgroundColor: item.color
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Applications by Location */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Applications by Location</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{locationData.map((item) => (
|
||||||
|
<div key={item.location} className="flex items-center gap-3">
|
||||||
|
<div className="w-24 text-slate-700">{item.location}</div>
|
||||||
|
<div className="flex-1 bg-slate-200 rounded-full h-8 relative overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="bg-amber-600 h-full rounded-full transition-all flex items-center justify-end px-3"
|
||||||
|
style={{ width: `${(item.count / maxLocationCount) * 100}%` }}
|
||||||
|
>
|
||||||
|
<span className="text-white">{item.count}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Recent Activity</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ScrollArea className="h-80">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentActivities.map((activity) => (
|
||||||
|
<div
|
||||||
|
key={activity.id}
|
||||||
|
className="flex items-start gap-4 p-3 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors"
|
||||||
|
onClick={() => onNavigate('applications')}
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
{activity.action === 'Approved' && <CheckCircle className="w-5 h-5 text-green-600" />}
|
||||||
|
{activity.action === 'Interview Scheduled' && <Clock className="w-5 h-5 text-blue-600" />}
|
||||||
|
{activity.action === 'Document Uploaded' && <FileText className="w-5 h-5 text-purple-600" />}
|
||||||
|
{activity.action === 'Reminder Sent' && <Mail className="w-5 h-5 text-orange-600" />}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<Badge variant="outline">{activity.applicationId}</Badge>
|
||||||
|
<span className="text-slate-700">{activity.action}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 mt-1">by {activity.user}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-slate-500 flex-shrink-0">{activity.timestamp}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
265
src/components/dashboard/DealerDashboard.tsx
Normal file
265
src/components/dashboard/DealerDashboard.tsx
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
import { FileText, RefreshCcw, MapPin, Users, TrendingUp, Clock, CheckCircle, AlertCircle } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
interface DealerDashboardProps {
|
||||||
|
currentUser: User | null;
|
||||||
|
onNavigate: (view: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DealerDashboard({ currentUser, onNavigate }: DealerDashboardProps) {
|
||||||
|
// Dealer stats - showing their own requests
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Constitutional Changes',
|
||||||
|
value: 1,
|
||||||
|
icon: RefreshCcw,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
change: 'In Review',
|
||||||
|
onClick: () => onNavigate('dealer-constitutional')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Relocation Requests',
|
||||||
|
value: 1,
|
||||||
|
icon: MapPin,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
change: 'Pending Approval',
|
||||||
|
onClick: () => onNavigate('dealer-relocation')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Requests',
|
||||||
|
value: 2,
|
||||||
|
icon: TrendingUp,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
change: 'All time',
|
||||||
|
onClick: () => {}
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Recent requests by the dealer
|
||||||
|
const recentRequests = [
|
||||||
|
{
|
||||||
|
id: 'CON-001',
|
||||||
|
type: 'Constitutional Change',
|
||||||
|
title: 'Change from Proprietorship to Partnership',
|
||||||
|
status: 'RBM Review',
|
||||||
|
date: '2025-12-15',
|
||||||
|
color: 'bg-blue-100 text-blue-700 border-blue-300'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RLO-001',
|
||||||
|
type: 'Relocation',
|
||||||
|
title: 'Moving to Andheri East, Mumbai',
|
||||||
|
status: 'DD ZM Review',
|
||||||
|
date: '2025-12-10',
|
||||||
|
color: 'bg-amber-100 text-amber-700 border-amber-300'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Quick actions for dealer
|
||||||
|
const quickActions = [
|
||||||
|
{
|
||||||
|
title: 'Constitutional Change',
|
||||||
|
description: 'Request change in business structure',
|
||||||
|
icon: RefreshCcw,
|
||||||
|
color: 'bg-blue-50 hover:bg-blue-100 border-blue-200',
|
||||||
|
textColor: 'text-blue-700',
|
||||||
|
onClick: () => onNavigate('dealer-constitutional')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Request Relocation',
|
||||||
|
description: 'Move dealership to new location',
|
||||||
|
icon: MapPin,
|
||||||
|
color: 'bg-amber-50 hover:bg-amber-100 border-amber-200',
|
||||||
|
textColor: 'text-amber-700',
|
||||||
|
onClick: () => onNavigate('dealer-relocation')
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Welcome Section */}
|
||||||
|
<div className="bg-gradient-to-r from-amber-500 to-amber-600 rounded-lg p-6 text-white">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-white mb-2">Welcome back, {currentUser?.name}!</h1>
|
||||||
|
<p className="text-amber-100">
|
||||||
|
Dealer Code: DL-MH-001 • Royal Enfield Mumbai
|
||||||
|
</p>
|
||||||
|
<p className="text-amber-100 text-sm mt-1">
|
||||||
|
Bandra West, Mumbai, Maharashtra
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-white">Active Dealership</div>
|
||||||
|
<Badge className="bg-green-500 text-white border-0 mt-2">
|
||||||
|
<CheckCircle className="w-3 h-3 mr-1" />
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={index}
|
||||||
|
className="cursor-pointer hover:shadow-lg transition-shadow"
|
||||||
|
onClick={stat.onClick}
|
||||||
|
>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm">{stat.title}</CardTitle>
|
||||||
|
<div className={`${stat.color} p-2 rounded-lg`}>
|
||||||
|
<Icon className="h-4 w-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-slate-900 text-2xl">{stat.value}</div>
|
||||||
|
<p className="text-xs text-slate-600 mt-1">{stat.change}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Quick Actions</CardTitle>
|
||||||
|
<CardDescription>Submit new requests and manage your dealership</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{quickActions.map((action, index) => {
|
||||||
|
const Icon = action.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={action.onClick}
|
||||||
|
className={`${action.color} border-2 rounded-lg p-4 text-left transition-all`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className={`${action.textColor} p-2 bg-white rounded-lg`}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className={`${action.textColor} mb-1`}>{action.title}</h3>
|
||||||
|
<p className="text-slate-600 text-sm">{action.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Recent Requests */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>My Recent Requests</CardTitle>
|
||||||
|
<CardDescription>Track the status of your submitted requests</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{recentRequests.map((request) => (
|
||||||
|
<div
|
||||||
|
key={request.id}
|
||||||
|
className="flex items-center justify-between p-4 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<span className="text-slate-900">{request.id}</span>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
{request.type}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 text-sm">{request.title}</p>
|
||||||
|
<p className="text-slate-500 text-xs mt-1">Submitted on {request.date}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Badge className={`border ${request.color}`}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Information Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
Important Reminders
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle className="w-4 h-4 text-amber-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm">GST Filing Due</p>
|
||||||
|
<p className="text-slate-600 text-xs">Due by Jan 15, 2026</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle className="w-4 h-4 text-amber-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm">Inventory Audit Scheduled</p>
|
||||||
|
<p className="text-slate-600 text-xs">Jan 20, 2026</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm">Compliance Report Submitted</p>
|
||||||
|
<p className="text-slate-600 text-xs">Jan 2, 2026</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Users className="w-5 h-5 text-blue-600" />
|
||||||
|
Support & Help
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm mb-1">Regional Manager</p>
|
||||||
|
<p className="text-slate-600 text-xs">Rajesh Kumar - +91 98765 43210</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm mb-1">Zonal Business Head</p>
|
||||||
|
<p className="text-slate-600 text-xs">Priya Sharma - +91 98765 43211</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-900 text-sm mb-1">Support Email</p>
|
||||||
|
<p className="text-slate-600 text-xs">dealer.support@royalenfield.com</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="w-full mt-2">
|
||||||
|
Contact Support
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1038
src/components/dashboard/FinanceDashboard.tsx
Normal file
1038
src/components/dashboard/FinanceDashboard.tsx
Normal file
File diff suppressed because it is too large
Load Diff
344
src/components/dealer/DealerConstitutionalChangePage.tsx
Normal file
344
src/components/dealer/DealerConstitutionalChangePage.tsx
Normal file
@ -0,0 +1,344 @@
|
|||||||
|
import { RefreshCcw, Plus, Eye, Calendar, FileText } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User as UserType } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface DealerConstitutionalChangePageProps {
|
||||||
|
currentUser: UserType | null;
|
||||||
|
onViewDetails?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock constitutional change requests for this dealer
|
||||||
|
const mockDealerConstitutionalChanges = [
|
||||||
|
{
|
||||||
|
id: 'CON-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
currentConstitution: 'Proprietorship',
|
||||||
|
proposedConstitution: 'Partnership',
|
||||||
|
reason: 'Adding family members as partners',
|
||||||
|
status: 'RBM Review',
|
||||||
|
submittedOn: '2025-12-15',
|
||||||
|
currentStage: 'RBM',
|
||||||
|
progressPercentage: 25
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
const constitutionTypes = ['Proprietorship', 'Partnership', 'LLP', 'Pvt Ltd'];
|
||||||
|
|
||||||
|
export function DealerConstitutionalChangePage({ currentUser, onViewDetails }: DealerConstitutionalChangePageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [currentConstitution, setCurrentConstitution] = useState('Proprietorship'); // Pre-filled
|
||||||
|
const [proposedConstitution, setProposedConstitution] = useState('');
|
||||||
|
const [reason, setReason] = useState('');
|
||||||
|
const [newPartners, setNewPartners] = useState('');
|
||||||
|
const [shareholdingPattern, setShareholdingPattern] = useState('');
|
||||||
|
|
||||||
|
const handleSubmitRequest = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!proposedConstitution) {
|
||||||
|
toast.error('Please select proposed constitution type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentConstitution === proposedConstitution) {
|
||||||
|
toast.error('Proposed constitution must be different from current');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reason.trim()) {
|
||||||
|
toast.error('Please provide a reason for constitutional change');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('Constitutional change request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setProposedConstitution('');
|
||||||
|
setReason('');
|
||||||
|
setNewPartners('');
|
||||||
|
setShareholdingPattern('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Total Requests',
|
||||||
|
value: mockDealerConstitutionalChanges.length,
|
||||||
|
icon: RefreshCcw,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending',
|
||||||
|
value: mockDealerConstitutionalChanges.filter(r => r.status !== 'Completed' && r.status !== 'Rejected').length,
|
||||||
|
icon: Calendar,
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Completed',
|
||||||
|
value: mockDealerConstitutionalChanges.filter(r => r.status === 'Completed').length,
|
||||||
|
icon: FileText,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">My Constitutional Change Requests</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Submit and track requests for changing your business constitution
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
New Constitutional Change
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Submit Constitutional Change Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Request to change your dealership's business constitution structure
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitRequest} className="space-y-4">
|
||||||
|
{/* Dealer Info */}
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-2">
|
||||||
|
<h3 className="text-slate-900">Current Dealership Information</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Code:</span>
|
||||||
|
<p className="text-slate-900">DL-MH-001</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Name:</span>
|
||||||
|
<p className="text-slate-900">Amit Sharma Motors</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="text-slate-600">Current Constitution:</span>
|
||||||
|
<p className="text-slate-900">Proprietorship</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Constitution Change */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="currentConstitution">Current Constitution *</Label>
|
||||||
|
<Input
|
||||||
|
id="currentConstitution"
|
||||||
|
value={currentConstitution}
|
||||||
|
disabled
|
||||||
|
className="bg-slate-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedConstitution">Proposed Constitution *</Label>
|
||||||
|
<Select value={proposedConstitution} onValueChange={setProposedConstitution} required>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select new constitution" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{constitutionTypes
|
||||||
|
.filter(type => type !== currentConstitution)
|
||||||
|
.map(type => (
|
||||||
|
<SelectItem key={type} value={type}>{type}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reason */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Reason for Change *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="reason"
|
||||||
|
placeholder="Please provide detailed reason for constitutional change..."
|
||||||
|
value={reason}
|
||||||
|
onChange={(e) => setReason(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New Partners (if applicable) */}
|
||||||
|
{(proposedConstitution === 'Partnership' || proposedConstitution === 'LLP') && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="newPartners">Details of New Partners/Members</Label>
|
||||||
|
<Textarea
|
||||||
|
id="newPartners"
|
||||||
|
placeholder="Name, relationship, and experience of new partners..."
|
||||||
|
value={newPartners}
|
||||||
|
onChange={(e) => setNewPartners(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shareholding Pattern */}
|
||||||
|
{(proposedConstitution === 'Pvt Ltd' || proposedConstitution === 'LLP') && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="shareholdingPattern">Proposed Shareholding Pattern</Label>
|
||||||
|
<Textarea
|
||||||
|
id="shareholdingPattern"
|
||||||
|
placeholder="Details of share distribution among partners/directors..."
|
||||||
|
value={shareholdingPattern}
|
||||||
|
onChange={(e) => setShareholdingPattern(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Document Requirements */}
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<h4 className="text-blue-900 mb-2">Documents Required (to be uploaded later)</h4>
|
||||||
|
<ul className="text-blue-800 text-sm space-y-1">
|
||||||
|
<li>• GST Registration Certificate</li>
|
||||||
|
<li>• Firm PAN Copy</li>
|
||||||
|
<li>• Partnership Deed (if applicable)</li>
|
||||||
|
<li>• LLP Agreement (if applicable)</li>
|
||||||
|
<li>• Certificate of Incorporation (if applicable)</li>
|
||||||
|
<li>• MOA & AOA (if applicable)</li>
|
||||||
|
<li>• Board Resolution</li>
|
||||||
|
<li>• Aadhaar & PAN of all partners/directors</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm">{stat.title}</CardTitle>
|
||||||
|
<div className={`${stat.color} p-2 rounded-lg`}>
|
||||||
|
<Icon className="h-4 w-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-slate-900 text-2xl">{stat.value}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Requests Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>My Constitutional Change Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
View and track all your constitutional change requests
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Current</TableHead>
|
||||||
|
<TableHead>Proposed</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Current Status</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockDealerConstitutionalChanges.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{request.id}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{request.currentConstitution}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className="bg-blue-100 text-blue-700 border-blue-300">
|
||||||
|
{request.proposedConstitution}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{request.submittedOn}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={`border ${getStatusColor(request.status)}`}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-blue-600 h-2 rounded-full"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-slate-600">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onViewDetails && onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
524
src/components/dealer/DealerRelocationPage.tsx
Normal file
524
src/components/dealer/DealerRelocationPage.tsx
Normal file
@ -0,0 +1,524 @@
|
|||||||
|
import { MapPin, Plus, Eye, Calendar, FileText, Building, Navigation } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User as UserType } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface DealerRelocationPageProps {
|
||||||
|
currentUser: UserType | null;
|
||||||
|
onViewDetails?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock relocation requests for this dealer
|
||||||
|
const mockDealerRelocations = [
|
||||||
|
{
|
||||||
|
id: 'RLO-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
currentLocation: 'Bandra West, Mumbai',
|
||||||
|
proposedLocation: 'Andheri East, Mumbai',
|
||||||
|
distance: '12 km',
|
||||||
|
reason: 'Better connectivity and higher footfall area',
|
||||||
|
status: 'DD ZM Review',
|
||||||
|
submittedOn: '2025-12-20',
|
||||||
|
currentStage: 'DD-ZM',
|
||||||
|
progressPercentage: 25
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function DealerRelocationPage({ currentUser, onViewDetails }: DealerRelocationPageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [proposedAddress, setProposedAddress] = useState('');
|
||||||
|
const [proposedCity, setProposedCity] = useState('');
|
||||||
|
const [proposedState, setProposedState] = useState('');
|
||||||
|
const [proposedPincode, setProposedPincode] = useState('');
|
||||||
|
const [distance, setDistance] = useState('');
|
||||||
|
const [propertyType, setPropertyType] = useState('');
|
||||||
|
const [expectedDate, setExpectedDate] = useState('');
|
||||||
|
const [reason, setReason] = useState('');
|
||||||
|
const [locationMode, setLocationMode] = useState<'manual' | 'map'>('manual');
|
||||||
|
const [mapCoordinates, setMapCoordinates] = useState({ lat: 19.0760, lng: 72.8777 });
|
||||||
|
const [selectedLocation, setSelectedLocation] = useState<{ lat: number; lng: number } | null>(null);
|
||||||
|
|
||||||
|
const handleMapClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
const lat = mapCoordinates.lat + (y - rect.height / 2) / 1000;
|
||||||
|
const lng = mapCoordinates.lng + (x - rect.width / 2) / 1000;
|
||||||
|
|
||||||
|
setSelectedLocation({ lat, lng });
|
||||||
|
|
||||||
|
const mockLocations = [
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400001', address: 'Nariman Point, South Mumbai' },
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400051', address: 'Andheri East, Mumbai' },
|
||||||
|
{ city: 'Mumbai', state: 'Maharashtra', pincode: '400070', address: 'Powai, Mumbai' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const randomLocation = mockLocations[Math.floor(Math.random() * mockLocations.length)];
|
||||||
|
setProposedAddress(randomLocation.address);
|
||||||
|
setProposedCity(randomLocation.city);
|
||||||
|
setProposedState(randomLocation.state);
|
||||||
|
setProposedPincode(randomLocation.pincode);
|
||||||
|
|
||||||
|
toast.success('Location selected from map');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitRequest = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!proposedAddress.trim() || !proposedCity.trim() || !proposedState.trim() || !proposedPincode.trim()) {
|
||||||
|
toast.error('Please enter complete proposed location details');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!distance.trim()) {
|
||||||
|
toast.error('Please enter distance from current location');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!propertyType) {
|
||||||
|
toast.error('Please select property type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reason.trim()) {
|
||||||
|
toast.error('Please provide a reason for relocation');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('Relocation request submitted successfully');
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setProposedAddress('');
|
||||||
|
setProposedCity('');
|
||||||
|
setProposedState('');
|
||||||
|
setProposedPincode('');
|
||||||
|
setDistance('');
|
||||||
|
setPropertyType('');
|
||||||
|
setExpectedDate('');
|
||||||
|
setReason('');
|
||||||
|
setLocationMode('manual');
|
||||||
|
setSelectedLocation(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Total Requests',
|
||||||
|
value: mockDealerRelocations.length,
|
||||||
|
icon: MapPin,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending',
|
||||||
|
value: mockDealerRelocations.filter(r => r.status !== 'Completed' && r.status !== 'Rejected').length,
|
||||||
|
icon: Calendar,
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Completed',
|
||||||
|
value: mockDealerRelocations.filter(r => r.status === 'Completed').length,
|
||||||
|
icon: FileText,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">My Relocation Requests</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Submit and track requests for relocating your dealership
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
New Relocation Request
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Submit Relocation Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Request to relocate your dealership to a new location
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitRequest} className="space-y-4">
|
||||||
|
{/* Current Dealer Info */}
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-3">
|
||||||
|
<h3 className="text-slate-900">Current Dealership Details</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Code:</span>
|
||||||
|
<p className="text-slate-900">DL-MH-001</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Dealer Name:</span>
|
||||||
|
<p className="text-slate-900">Amit Sharma Motors</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="text-slate-600">Current Location:</span>
|
||||||
|
<p className="text-slate-900">123, MG Road, Bandra West, Mumbai, Maharashtra - 400050</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Proposed New Location */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-slate-900">Proposed New Location *</h3>
|
||||||
|
|
||||||
|
{/* Location Mode Toggle */}
|
||||||
|
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setLocationMode('manual')}
|
||||||
|
className={`px-3 py-1 rounded text-sm transition-colors ${
|
||||||
|
locationMode === 'manual'
|
||||||
|
? 'bg-white text-slate-900 shadow-sm'
|
||||||
|
: 'text-slate-600 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Manual Entry
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setLocationMode('map')}
|
||||||
|
className={`px-3 py-1 rounded text-sm transition-colors flex items-center gap-1 ${
|
||||||
|
locationMode === 'map'
|
||||||
|
? 'bg-white text-slate-900 shadow-sm'
|
||||||
|
: 'text-slate-600 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<MapPin className="w-3 h-3" />
|
||||||
|
Map Location
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map Mode */}
|
||||||
|
{locationMode === 'map' && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="border-2 border-amber-300 rounded-lg overflow-hidden">
|
||||||
|
<div
|
||||||
|
onClick={handleMapClick}
|
||||||
|
className="relative h-64 bg-gradient-to-br from-green-100 via-blue-50 to-amber-50 cursor-crosshair"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `
|
||||||
|
linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px)
|
||||||
|
`,
|
||||||
|
backgroundSize: '20px 20px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div className="absolute top-1/4 left-0 right-0 h-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute top-1/2 left-0 right-0 h-2 bg-slate-400 opacity-40" />
|
||||||
|
<div className="absolute top-3/4 left-0 right-0 h-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute left-1/4 top-0 bottom-0 w-1 bg-slate-300 opacity-30" />
|
||||||
|
<div className="absolute left-1/2 top-0 bottom-0 w-2 bg-slate-400 opacity-40" />
|
||||||
|
<div className="absolute left-3/4 top-0 bottom-0 w-1 bg-slate-300 opacity-30" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<Building className="w-6 h-6 text-blue-600" />
|
||||||
|
<div className="text-xs text-blue-900 bg-white px-2 py-1 rounded shadow-sm mt-1">
|
||||||
|
Current Location
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="absolute top-1/3 left-2/3 transform -translate-x-1/2 -translate-y-full">
|
||||||
|
<div className="flex flex-col items-center animate-bounce">
|
||||||
|
<MapPin className="w-8 h-8 text-amber-600 drop-shadow-lg" />
|
||||||
|
<div className="text-xs text-amber-900 bg-amber-100 px-2 py-1 rounded shadow-md border border-amber-300">
|
||||||
|
New Location
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="absolute bottom-2 left-2 bg-white/90 px-3 py-2 rounded shadow-sm border border-slate-200">
|
||||||
|
<p className="text-xs text-slate-700">
|
||||||
|
<MapPin className="w-3 h-3 inline mr-1" />
|
||||||
|
Click anywhere on the map to select new location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="absolute top-2 right-2 bg-amber-600 text-white px-3 py-2 rounded shadow-md text-xs">
|
||||||
|
Lat: {selectedLocation.lat.toFixed(4)}, Lng: {selectedLocation.lng.toFixed(4)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedLocation && (
|
||||||
|
<div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-800">
|
||||||
|
✓ Location selected! Address details auto-filled below.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Address Fields */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedAddress">Complete Address *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedAddress"
|
||||||
|
placeholder="Building/Shop number, Street, Locality"
|
||||||
|
value={proposedAddress}
|
||||||
|
onChange={(e) => setProposedAddress(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedCity">City *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedCity"
|
||||||
|
placeholder="City"
|
||||||
|
value={proposedCity}
|
||||||
|
onChange={(e) => setProposedCity(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedState">State *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedState"
|
||||||
|
placeholder="State"
|
||||||
|
value={proposedState}
|
||||||
|
onChange={(e) => setProposedState(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="proposedPincode">Pincode *</Label>
|
||||||
|
<Input
|
||||||
|
id="proposedPincode"
|
||||||
|
placeholder="Pincode"
|
||||||
|
value={proposedPincode}
|
||||||
|
onChange={(e) => setProposedPincode(e.target.value)}
|
||||||
|
required
|
||||||
|
readOnly={locationMode === 'map' && !!selectedLocation}
|
||||||
|
className={locationMode === 'map' && selectedLocation ? 'bg-green-50' : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Distance & Property Details */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="distance">Distance from Current Location *</Label>
|
||||||
|
<Input
|
||||||
|
id="distance"
|
||||||
|
placeholder="e.g., 12 km"
|
||||||
|
value={distance}
|
||||||
|
onChange={(e) => setDistance(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="propertyType">Property Type *</Label>
|
||||||
|
<Select value={propertyType} onValueChange={setPropertyType} required>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select property type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Owned">Owned</SelectItem>
|
||||||
|
<SelectItem value="Leased">Leased</SelectItem>
|
||||||
|
<SelectItem value="Rented">Rented</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expected Relocation Date */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="expectedDate">Expected Relocation Date</Label>
|
||||||
|
<Input
|
||||||
|
id="expectedDate"
|
||||||
|
type="date"
|
||||||
|
value={expectedDate}
|
||||||
|
onChange={(e) => setExpectedDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reason */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Reason for Relocation *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="reason"
|
||||||
|
placeholder="Provide detailed reason for relocation request..."
|
||||||
|
value={reason}
|
||||||
|
onChange={(e) => setReason(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Required Documents Info */}
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<h4 className="text-blue-900 mb-2">Documents Required (to be uploaded later)</h4>
|
||||||
|
<ul className="text-blue-800 text-sm space-y-1">
|
||||||
|
<li>• Property documents for new location</li>
|
||||||
|
<li>• Lease/Rental agreement for new location</li>
|
||||||
|
<li>• NOC from current landlord</li>
|
||||||
|
<li>• Municipal approvals</li>
|
||||||
|
<li>• Fire safety certificate</li>
|
||||||
|
<li>• Pollution clearance</li>
|
||||||
|
<li>• Layout/Floor plan of new location</li>
|
||||||
|
<li>• Photos of new location</li>
|
||||||
|
<li>• Locality map</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsDialogOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-amber-600 hover:bg-amber-700"
|
||||||
|
>
|
||||||
|
Submit Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm">{stat.title}</CardTitle>
|
||||||
|
<div className={`${stat.color} p-2 rounded-lg`}>
|
||||||
|
<Icon className="h-4 w-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-slate-900 text-2xl">{stat.value}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Requests Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>My Relocation Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
View and track all your relocation requests
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Request ID</TableHead>
|
||||||
|
<TableHead>Current Location</TableHead>
|
||||||
|
<TableHead>Proposed Location</TableHead>
|
||||||
|
<TableHead>Distance</TableHead>
|
||||||
|
<TableHead>Submitted On</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Progress</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{mockDealerRelocations.map((request) => (
|
||||||
|
<TableRow key={request.id}>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-slate-900">{request.id}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{request.currentLocation}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-900">
|
||||||
|
{request.proposedLocation}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{request.distance}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-slate-600">
|
||||||
|
{request.submittedOn}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={`border ${getStatusColor(request.status)}`}>
|
||||||
|
{request.status}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-amber-600 h-2 rounded-full"
|
||||||
|
style={{ width: `${request.progressPercentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-slate-600">{request.progressPercentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onViewDetails && onViewDetails(request.id)}
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
436
src/components/dealer/DealerResignationPage.tsx
Normal file
436
src/components/dealer/DealerResignationPage.tsx
Normal file
@ -0,0 +1,436 @@
|
|||||||
|
import { FileText, Plus, Eye, Calendar, User, Building2, Store, MapPin, CheckCircle, Clock } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { User as UserType } from '../../lib/mock-data';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
interface DealerResignationPageProps {
|
||||||
|
currentUser: UserType | null;
|
||||||
|
onViewDetails?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock outlets owned by dealer
|
||||||
|
interface Outlet {
|
||||||
|
id: string;
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
type: 'Dealership' | 'Studio';
|
||||||
|
address: string;
|
||||||
|
city: string;
|
||||||
|
state: string;
|
||||||
|
status: 'Active' | 'Pending Resignation' | 'Closed';
|
||||||
|
establishedDate: string;
|
||||||
|
hasActiveResignation?: boolean;
|
||||||
|
resignationId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mockOutlets: Outlet[] = [
|
||||||
|
{
|
||||||
|
id: 'OUT-001',
|
||||||
|
code: 'DL-MH-001',
|
||||||
|
name: 'Royal Enfield Mumbai',
|
||||||
|
type: 'Dealership',
|
||||||
|
address: 'Plot No. 45, Linking Road, Bandra West',
|
||||||
|
city: 'Mumbai',
|
||||||
|
state: 'Maharashtra',
|
||||||
|
status: 'Active',
|
||||||
|
establishedDate: '2018-06-15',
|
||||||
|
hasActiveResignation: true,
|
||||||
|
resignationId: 'RES-001'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'OUT-002',
|
||||||
|
code: 'ST-MH-002',
|
||||||
|
name: 'Royal Enfield Andheri Studio',
|
||||||
|
type: 'Studio',
|
||||||
|
address: 'Shop 12, Phoenix Market City, Kurla',
|
||||||
|
city: 'Mumbai',
|
||||||
|
state: 'Maharashtra',
|
||||||
|
status: 'Active',
|
||||||
|
establishedDate: '2020-03-20'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'OUT-003',
|
||||||
|
code: 'DL-MH-003',
|
||||||
|
name: 'Royal Enfield Thane Dealership',
|
||||||
|
type: 'Dealership',
|
||||||
|
address: 'Eastern Express Highway, Thane West',
|
||||||
|
city: 'Thane',
|
||||||
|
state: 'Maharashtra',
|
||||||
|
status: 'Active',
|
||||||
|
establishedDate: '2019-09-10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'OUT-004',
|
||||||
|
code: 'ST-MH-004',
|
||||||
|
name: 'Royal Enfield Pune Studio',
|
||||||
|
type: 'Studio',
|
||||||
|
address: 'FC Road, Deccan Gymkhana',
|
||||||
|
city: 'Pune',
|
||||||
|
state: 'Maharashtra',
|
||||||
|
status: 'Active',
|
||||||
|
establishedDate: '2021-01-05'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mock resignation requests for this dealer
|
||||||
|
const mockDealerResignations = [
|
||||||
|
{
|
||||||
|
id: 'RES-001',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
resignationType: 'Voluntary',
|
||||||
|
lastOperationalDate: '2026-02-28',
|
||||||
|
reason: 'Personal health issues',
|
||||||
|
status: 'ASM Review',
|
||||||
|
submittedOn: '2025-12-20',
|
||||||
|
currentStage: 'ASM',
|
||||||
|
progressPercentage: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'RES-005',
|
||||||
|
dealerCode: 'DL-MH-001',
|
||||||
|
dealerName: 'Amit Sharma Motors',
|
||||||
|
resignationType: 'Voluntary',
|
||||||
|
lastOperationalDate: '2025-06-30',
|
||||||
|
reason: 'Relocation to different city',
|
||||||
|
status: 'Completed',
|
||||||
|
submittedOn: '2025-04-15',
|
||||||
|
currentStage: 'Closed',
|
||||||
|
progressPercentage: 100
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
if (status === 'Completed') return 'bg-green-100 text-green-700 border-green-300';
|
||||||
|
if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
|
||||||
|
if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
|
||||||
|
return 'bg-slate-100 text-slate-700 border-slate-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
export function DealerResignationPage({ currentUser, onViewDetails }: DealerResignationPageProps) {
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [selectedOutlet, setSelectedOutlet] = useState<Outlet | null>(null);
|
||||||
|
const [resignationType, setResignationType] = useState('');
|
||||||
|
const [lastOperationalDateSales, setLastOperationalDateSales] = useState('');
|
||||||
|
const [lastOperationalDateServices, setLastOperationalDateServices] = useState('');
|
||||||
|
const [reason, setReason] = useState('');
|
||||||
|
const [additionalInfo, setAdditionalInfo] = useState('');
|
||||||
|
|
||||||
|
const handleOpenResignationDialog = (outlet: Outlet) => {
|
||||||
|
setSelectedOutlet(outlet);
|
||||||
|
setIsDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitRequest = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!resignationType) {
|
||||||
|
toast.error('Please select resignation type');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!lastOperationalDateSales || !lastOperationalDateServices) {
|
||||||
|
toast.error('Please enter last operational dates');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reason.trim()) {
|
||||||
|
toast.error('Please provide a reason for resignation');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(`Resignation request submitted successfully for ${selectedOutlet?.name}`);
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setSelectedOutlet(null);
|
||||||
|
setResignationType('');
|
||||||
|
setLastOperationalDateSales('');
|
||||||
|
setLastOperationalDateServices('');
|
||||||
|
setReason('');
|
||||||
|
setAdditionalInfo('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Total Outlets',
|
||||||
|
value: mockOutlets.length,
|
||||||
|
icon: Building2,
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Active Outlets',
|
||||||
|
value: mockOutlets.filter(o => o.status === 'Active').length,
|
||||||
|
icon: CheckCircle,
|
||||||
|
color: 'bg-green-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Resignations',
|
||||||
|
value: mockOutlets.filter(o => o.hasActiveResignation).length,
|
||||||
|
icon: Clock,
|
||||||
|
color: 'bg-amber-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900 mb-2">Dealership Resignation Management</h1>
|
||||||
|
<p className="text-slate-600">
|
||||||
|
Manage resignation requests for your dealerships and studios
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm">{stat.title}</CardTitle>
|
||||||
|
<div className={`${stat.color} p-2 rounded-lg`}>
|
||||||
|
<Icon className="h-4 w-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-slate-900 text-2xl">{stat.value}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* My Outlets Section */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>My Outlets</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Select an outlet to request resignation
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{mockOutlets.map((outlet) => {
|
||||||
|
const OutletIcon = outlet.type === 'Dealership' ? Building2 : Store;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={outlet.id}
|
||||||
|
className="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className={`${outlet.type === 'Dealership' ? 'bg-blue-100' : 'bg-purple-100'} p-2 rounded-lg`}>
|
||||||
|
<OutletIcon className={`w-5 h-5 ${outlet.type === 'Dealership' ? 'text-blue-600' : 'text-purple-600'}`} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-slate-900">{outlet.name}</h3>
|
||||||
|
<p className="text-slate-600 text-sm">{outlet.code}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
className={`border ${
|
||||||
|
outlet.status === 'Active'
|
||||||
|
? 'bg-green-100 text-green-700 border-green-300'
|
||||||
|
: outlet.status === 'Pending Resignation'
|
||||||
|
? 'bg-amber-100 text-amber-700 border-amber-300'
|
||||||
|
: 'bg-slate-100 text-slate-700 border-slate-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{outlet.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2 mb-4">
|
||||||
|
<div className="flex items-start gap-2 text-sm">
|
||||||
|
<MapPin className="w-4 h-4 text-slate-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-slate-600">{outlet.address}</p>
|
||||||
|
<p className="text-slate-500">{outlet.city}, {outlet.state}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
<Calendar className="w-4 h-4 text-slate-400" />
|
||||||
|
<span className="text-slate-600">
|
||||||
|
Established: {new Date(outlet.establishedDate).toLocaleDateString('en-GB', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric'
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{outlet.hasActiveResignation ? (
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded p-3 text-sm">
|
||||||
|
<p className="text-amber-800">
|
||||||
|
Resignation in progress - <span className="underline cursor-pointer" onClick={() => onViewDetails && outlet.resignationId && onViewDetails(outlet.resignationId)}>View Request</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
className="w-full bg-red-600 hover:bg-red-700"
|
||||||
|
onClick={() => handleOpenResignationDialog(outlet)}
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-2" />
|
||||||
|
Request Resignation
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Resignation Request Dialog */}
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Submit Resignation Request</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Fill in the details for your resignation request. All fields are mandatory.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitRequest} className="space-y-4">
|
||||||
|
{/* Outlet Info */}
|
||||||
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 space-y-2">
|
||||||
|
<h3 className="text-slate-900">Outlet Information</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Outlet Code:</span>
|
||||||
|
<p className="text-slate-900">{selectedOutlet?.code}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Outlet Name:</span>
|
||||||
|
<p className="text-slate-900">{selectedOutlet?.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">Type:</span>
|
||||||
|
<p className="text-slate-900">{selectedOutlet?.type}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-slate-600">City:</span>
|
||||||
|
<p className="text-slate-900">{selectedOutlet?.city}, {selectedOutlet?.state}</p>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="text-slate-600">Address:</span>
|
||||||
|
<p className="text-slate-900">{selectedOutlet?.address}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resignation Type */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="resignationType">Resignation Type *</Label>
|
||||||
|
<Select value={resignationType} onValueChange={setResignationType} required>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select resignation type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Voluntary">Voluntary</SelectItem>
|
||||||
|
<SelectItem value="Retirement">Retirement</SelectItem>
|
||||||
|
<SelectItem value="Health Issues">Health Issues</SelectItem>
|
||||||
|
<SelectItem value="Business Closure">Business Closure</SelectItem>
|
||||||
|
<SelectItem value="Other">Other</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Last Operational Dates */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="lastOpDateSales">Last Operational Date - Sales *</Label>
|
||||||
|
<Input
|
||||||
|
id="lastOpDateSales"
|
||||||
|
type="date"
|
||||||
|
value={lastOperationalDateSales}
|
||||||
|
onChange={(e) => setLastOperationalDateSales(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="lastOpDateServices">Last Operational Date - Services *</Label>
|
||||||
|
<Input
|
||||||
|
id="lastOpDateServices"
|
||||||
|
type="date"
|
||||||
|
value={lastOperationalDateServices}
|
||||||
|
onChange={(e) => setLastOperationalDateServices(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reason */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="reason">Reason for Resignation *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="reason"
|
||||||
|
placeholder="Please provide detailed reason for resignation..."
|
||||||
|
value={reason}
|
||||||
|
onChange={(e) => setReason(e.target.value)}
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Information */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="additionalInfo">Additional Information (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
id="additionalInfo"
|
||||||
|
placeholder="Any additional details..."
|
||||||
|
value={additionalInfo}
|
||||||
|
onChange={(e) => setAdditionalInfo(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Important Info */}
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||||
|
<h4 className="text-amber-900 mb-2">Important Information</h4>
|
||||||
|
<ul className="text-amber-800 text-sm space-y-1">
|
||||||
|
<li>• F&F settlement process will be initiated after submission</li>
|
||||||
|
<li>• All department clearances must be obtained</li>
|
||||||
|
<li>• Final settlement will be processed after closure</li>
|
||||||
|
<li>• Please ensure all documents are ready for submission</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
setSelectedOutlet(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
>
|
||||||
|
Submit Resignation Request
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Requests Table - Removed */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
src/components/figma/ImageWithFallback.tsx
Normal file
27
src/components/figma/ImageWithFallback.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
const ERROR_IMG_SRC =
|
||||||
|
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
|
||||||
|
|
||||||
|
export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
|
||||||
|
const [didError, setDidError] = useState(false)
|
||||||
|
|
||||||
|
const handleError = () => {
|
||||||
|
setDidError(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { src, alt, style, className, ...rest } = props
|
||||||
|
|
||||||
|
return didError ? (
|
||||||
|
<div
|
||||||
|
className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center w-full h-full">
|
||||||
|
<img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
|
||||||
|
)
|
||||||
|
}
|
||||||
129
src/components/layout/Header.tsx
Normal file
129
src/components/layout/Header.tsx
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
import { Bell, RefreshCw, HelpCircle, User as UserIcon } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '../ui/dropdown-menu';
|
||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
title: string;
|
||||||
|
currentUser?: User | null;
|
||||||
|
onRefresh?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header({ title, currentUser, onRefresh }: HeaderProps) {
|
||||||
|
const notifications = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
message: 'New application assigned: APP-006',
|
||||||
|
time: '5 min ago',
|
||||||
|
unread: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
message: 'Interview scheduled for APP-001',
|
||||||
|
time: '1 hour ago',
|
||||||
|
unread: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
message: 'Document verified for APP-004',
|
||||||
|
time: '2 hours ago',
|
||||||
|
unread: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const unreadCount = notifications.filter(n => n.unread).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-white border-b border-slate-200 px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-slate-900">{title}</h1>
|
||||||
|
<p className="text-slate-600">Manage and track dealership applications</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Current User Info */}
|
||||||
|
{currentUser && (
|
||||||
|
<div className="flex items-center gap-3 px-3 py-2 bg-slate-100 rounded-lg">
|
||||||
|
<div className="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center">
|
||||||
|
<UserIcon className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="text-slate-900">{currentUser.name}</p>
|
||||||
|
<p className="text-slate-600">{currentUser.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Refresh Button */}
|
||||||
|
{onRefresh && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={onRefresh}
|
||||||
|
title="Refresh"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Help */}
|
||||||
|
<Button variant="outline" size="icon" title="Help">
|
||||||
|
<HelpCircle className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Notifications */}
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon" className="relative">
|
||||||
|
<Bell className="w-4 h-4" />
|
||||||
|
{unreadCount > 0 && (
|
||||||
|
<Badge
|
||||||
|
variant="destructive"
|
||||||
|
className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center text-xs"
|
||||||
|
>
|
||||||
|
{unreadCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-80">
|
||||||
|
<div className="p-3 border-b">
|
||||||
|
<p>Notifications</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-96 overflow-y-auto">
|
||||||
|
{notifications.map((notification) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={notification.id}
|
||||||
|
className={`p-3 cursor-pointer ${
|
||||||
|
notification.unread ? 'bg-amber-50' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-slate-900">{notification.message}</p>
|
||||||
|
<p className="text-slate-500 mt-1">{notification.time}</p>
|
||||||
|
</div>
|
||||||
|
{notification.unread && (
|
||||||
|
<div className="w-2 h-2 bg-amber-600 rounded-full flex-shrink-0"></div>
|
||||||
|
)}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="p-3 border-t text-center">
|
||||||
|
<button className="text-amber-600 hover:text-amber-700">
|
||||||
|
View All Notifications
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
258
src/components/layout/Sidebar.tsx
Normal file
258
src/components/layout/Sidebar.tsx
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
FileText,
|
||||||
|
LogOut,
|
||||||
|
Users,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Search,
|
||||||
|
Inbox,
|
||||||
|
UserMinus,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
FolderOpen,
|
||||||
|
Settings,
|
||||||
|
RefreshCcw,
|
||||||
|
MapPin
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { User } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
activeView: string;
|
||||||
|
onNavigate: (view: string) => void;
|
||||||
|
onLogout: () => void;
|
||||||
|
currentUser: User | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Sidebar({ activeView, onNavigate, onLogout, currentUser }: SidebarProps) {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [offboardingExpanded, setOffboardingExpanded] = useState(false);
|
||||||
|
const [allRequestsExpanded, setAllRequestsExpanded] = useState(false);
|
||||||
|
|
||||||
|
// Finance role has only specific menu items
|
||||||
|
const menuItems = currentUser?.role === 'Finance' ? [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
||||||
|
{ id: 'finance-onboarding', label: 'Onboarding', icon: FileText },
|
||||||
|
{ id: 'finance-fnf', label: 'F&F', icon: UserMinus },
|
||||||
|
] : currentUser?.role === 'Dealer' ? [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
||||||
|
{ id: 'dealer-resignation', label: 'My Resignations', icon: UserMinus },
|
||||||
|
{ id: 'dealer-constitutional', label: 'Constitutional Change', icon: RefreshCcw },
|
||||||
|
{ id: 'dealer-relocation', label: 'Relocation Requests', icon: MapPin },
|
||||||
|
] : [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
||||||
|
{ id: 'applications', label: 'Dealership Requests', icon: FileText },
|
||||||
|
{
|
||||||
|
id: 'offboarding',
|
||||||
|
label: 'Offboarding',
|
||||||
|
icon: UserMinus,
|
||||||
|
hasSubmenu: true,
|
||||||
|
submenuKey: 'offboarding',
|
||||||
|
submenu: [
|
||||||
|
{ id: 'resignation', label: 'Resignation' },
|
||||||
|
{ id: 'termination', label: 'Termination' },
|
||||||
|
{ id: 'fnf', label: 'F&F' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ id: 'constitutional-change', label: 'Constitutional Change', icon: RefreshCcw },
|
||||||
|
{ id: 'relocation-requests', label: 'Relocation Requests', icon: MapPin },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add All Applications for DD role (before Dealership Requests)
|
||||||
|
if (currentUser?.role === 'DD') {
|
||||||
|
menuItems.splice(1, 0, { id: 'all-applications', label: 'All Applications', icon: Inbox });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add All Requests for DD Lead role (before Dealership Requests)
|
||||||
|
if (currentUser?.role === 'DD Lead') {
|
||||||
|
menuItems.splice(1, 0, {
|
||||||
|
id: 'all-requests',
|
||||||
|
label: 'All Requests',
|
||||||
|
icon: FolderOpen,
|
||||||
|
hasSubmenu: true,
|
||||||
|
submenuKey: 'allRequests',
|
||||||
|
submenu: [
|
||||||
|
{ id: 'opportunity-requests', label: 'Opportunity Requests' },
|
||||||
|
{ id: 'unopportunity-requests', label: 'Unopportunity Requests' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Master for Super Admin, DD Admin, and DD Lead
|
||||||
|
if (currentUser?.role === 'Super Admin' || currentUser?.role === 'DD Admin' || currentUser?.role === 'DD Lead') {
|
||||||
|
menuItems.push({ id: 'master', label: 'Master', icon: Settings });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentUser?.role === 'Super Admin') {
|
||||||
|
menuItems.push({ id: 'users', label: 'User Management', icon: Users });
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (searchQuery.trim()) {
|
||||||
|
// Navigate to applications with search query
|
||||||
|
onNavigate('applications');
|
||||||
|
// In real app, would pass search query
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`bg-slate-900 text-white h-screen flex flex-col transition-all duration-300 ${
|
||||||
|
collapsed ? 'w-20' : 'w-64'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Header with Logo */}
|
||||||
|
<div className="p-4 border-b border-slate-800">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{!collapsed && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-10 h-10 bg-amber-600 rounded-lg flex items-center justify-center">
|
||||||
|
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
|
||||||
|
<path d="M12 2L4 6v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V6l-8-4zm0 2.2l6 3v4.8c0 4.5-3.1 8.7-6 10-2.9-1.3-6-5.5-6-10V7.2l6-3z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="text-amber-600">RE Dealer</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
|
className="p-1 hover:bg-slate-800 rounded transition-colors"
|
||||||
|
>
|
||||||
|
{collapsed ? (
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<ChevronLeft className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
{!collapsed && (
|
||||||
|
<div className="p-4 border-b border-slate-800">
|
||||||
|
<form onSubmit={handleSearch} className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search applications..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="w-full pl-10 bg-slate-800 border-slate-700 text-white placeholder:text-slate-400"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Menu Items */}
|
||||||
|
<nav className="flex-1 p-4 space-y-2">
|
||||||
|
{menuItems.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const isActive = activeView === item.id;
|
||||||
|
const hasSubmenu = item.hasSubmenu;
|
||||||
|
const isSubmenuActive = hasSubmenu && item.submenu?.some(sub => activeView === sub.id);
|
||||||
|
|
||||||
|
// Determine which submenu is expanded based on submenuKey
|
||||||
|
const submenuKey = (item as any).submenuKey;
|
||||||
|
const isExpanded = submenuKey === 'offboarding' ? offboardingExpanded :
|
||||||
|
submenuKey === 'allRequests' ? allRequestsExpanded : false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.id}>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (hasSubmenu) {
|
||||||
|
if (submenuKey === 'offboarding') {
|
||||||
|
setOffboardingExpanded(!offboardingExpanded);
|
||||||
|
} else if (submenuKey === 'allRequests') {
|
||||||
|
setAllRequestsExpanded(!allRequestsExpanded);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onNavigate(item.id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
||||||
|
isActive || isSubmenuActive
|
||||||
|
? 'bg-amber-600 text-white'
|
||||||
|
: 'text-slate-300 hover:bg-slate-800 hover:text-white'
|
||||||
|
}`}
|
||||||
|
title={collapsed ? item.label : undefined}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||||
|
{!collapsed && (
|
||||||
|
<>
|
||||||
|
<span className="flex-1 text-left">{item.label}</span>
|
||||||
|
{hasSubmenu && (
|
||||||
|
isExpanded ? (
|
||||||
|
<ChevronUp className="w-4 h-4 flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown className="w-4 h-4 flex-shrink-0" />
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Submenu */}
|
||||||
|
{hasSubmenu && isExpanded && !collapsed && (
|
||||||
|
<div className="ml-4 mt-2 space-y-1">
|
||||||
|
{item.submenu?.map((subItem) => {
|
||||||
|
const isSubActive = activeView === subItem.id;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={subItem.id}
|
||||||
|
onClick={() => onNavigate(subItem.id)}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-2 rounded-lg transition-colors text-sm ${
|
||||||
|
isSubActive
|
||||||
|
? 'bg-amber-600 text-white'
|
||||||
|
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="w-1 h-1 rounded-full bg-current flex-shrink-0" />
|
||||||
|
<span>{subItem.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* User Profile & Logout */}
|
||||||
|
<div className="p-4 border-t border-slate-800 space-y-2">
|
||||||
|
{!collapsed && currentUser && (
|
||||||
|
<div className="px-4 py-2 bg-slate-800 rounded-lg mb-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-amber-600 rounded-full flex items-center justify-center">
|
||||||
|
<span>{currentUser.name.charAt(0)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="truncate">{currentUser.name}</p>
|
||||||
|
<p className="text-slate-400 truncate">{currentUser.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={onLogout}
|
||||||
|
variant="ghost"
|
||||||
|
className={`w-full ${
|
||||||
|
collapsed ? 'px-2' : 'justify-start'
|
||||||
|
} text-slate-300 hover:bg-slate-800 hover:text-white`}
|
||||||
|
title={collapsed ? 'Logout' : undefined}
|
||||||
|
>
|
||||||
|
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||||
|
{!collapsed && <span className="ml-3">Logout</span>}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
649
src/components/public/ApplicationFormPage.tsx
Normal file
649
src/components/public/ApplicationFormPage.tsx
Normal file
@ -0,0 +1,649 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { Label } from '../ui/label';
|
||||||
|
import { Textarea } from '../ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||||
|
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
|
||||||
|
import { Checkbox } from '../ui/checkbox';
|
||||||
|
import { CheckCircle, Users, Star, Shield, LogIn, Award, TrendingUp, Handshake } from 'lucide-react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
// import backgroundImage from 'figma:asset/ee01d864b6e23a8197b42f3168c98eedec9d2440.png';
|
||||||
|
|
||||||
|
interface ApplicationFormPageProps {
|
||||||
|
onAdminLogin: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
country: '',
|
||||||
|
state: '',
|
||||||
|
district: '',
|
||||||
|
name: '',
|
||||||
|
interestedCity: '',
|
||||||
|
email: '',
|
||||||
|
pincode: '',
|
||||||
|
mobile: '',
|
||||||
|
ownRoyalEnfield: '',
|
||||||
|
royalEnfieldModel: '',
|
||||||
|
age: '',
|
||||||
|
education: '',
|
||||||
|
companyName: '',
|
||||||
|
source: '',
|
||||||
|
existingDealer: '',
|
||||||
|
description: '',
|
||||||
|
address: '',
|
||||||
|
acceptTerms: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Validate required fields
|
||||||
|
if (!formData.country || !formData.state || !formData.district || !formData.name ||
|
||||||
|
!formData.interestedCity || !formData.email || !formData.pincode || !formData.mobile ||
|
||||||
|
!formData.ownRoyalEnfield || !formData.age || !formData.education ||
|
||||||
|
!formData.companyName || !formData.source || !formData.existingDealer ||
|
||||||
|
!formData.description || !formData.address) {
|
||||||
|
toast.error('Please fill in all required fields');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate Royal Enfield model if they own one
|
||||||
|
if (formData.ownRoyalEnfield === 'yes' && !formData.royalEnfieldModel) {
|
||||||
|
toast.error('Please select your Royal Enfield model');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate terms acceptance
|
||||||
|
if (!formData.acceptTerms) {
|
||||||
|
toast.error('Please accept the terms and conditions to continue');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success message
|
||||||
|
toast.success('Application submitted successfully! We will contact you soon.');
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setFormData({
|
||||||
|
country: '',
|
||||||
|
state: '',
|
||||||
|
district: '',
|
||||||
|
name: '',
|
||||||
|
interestedCity: '',
|
||||||
|
email: '',
|
||||||
|
pincode: '',
|
||||||
|
mobile: '',
|
||||||
|
ownRoyalEnfield: '',
|
||||||
|
royalEnfieldModel: '',
|
||||||
|
age: '',
|
||||||
|
education: '',
|
||||||
|
companyName: '',
|
||||||
|
source: '',
|
||||||
|
existingDealer: '',
|
||||||
|
description: '',
|
||||||
|
address: '',
|
||||||
|
acceptTerms: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-950">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-black/90 backdrop-blur-md border-b border-amber-500/20 sticky top-0 z-50 shadow-xl">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg">
|
||||||
|
<span className="text-white text-xl">RE</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-white text-2xl tracking-tight">Royal Enfield</h1>
|
||||||
|
<p className="text-amber-400/80 text-xs tracking-wide uppercase">Dealer Partnership Portal</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={onAdminLogin}
|
||||||
|
className="flex items-center gap-2 bg-white/5 border-amber-500/30 text-amber-400 hover:bg-amber-500/10 hover:border-amber-500/50 hover:text-amber-300 transition-all"
|
||||||
|
>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Admin Login
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative py-24 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.1),transparent_50%)]"></div>
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(251,146,60,0.1),transparent_50%)]"></div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 text-center relative z-10">
|
||||||
|
<div className="inline-block mb-6">
|
||||||
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-6 py-2">
|
||||||
|
<p className="text-amber-400 text-sm tracking-wide">Since 1901 • Legacy of Excellence</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-5xl md:text-6xl text-white mb-6 tracking-tight">
|
||||||
|
Join the Royal Enfield
|
||||||
|
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
|
||||||
|
Partnership Network
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-300 text-lg md:text-xl max-w-3xl mx-auto mb-12 leading-relaxed">
|
||||||
|
Become part of our legendary heritage and bring the spirit of Pure Motorcycling to riders in your community
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap justify-center gap-8">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||||||
|
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-200">120+ Year Heritage</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||||||
|
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-200">Global Recognition</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
|
||||||
|
<CheckCircle className="w-5 h-5 text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-slate-200">Premium Support</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Why Partner Section */}
|
||||||
|
<section className="py-20 bg-slate-900/50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl text-white mb-4">Why Partner With Royal Enfield?</h2>
|
||||||
|
<p className="text-slate-400 text-lg">Unmatched benefits for ambitious entrepreneurs</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{/* Premium Brand */}
|
||||||
|
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||||||
|
<Star className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white text-xl mb-3">Premium Brand</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
Represent a legendary brand trusted by millions worldwide since 1901
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Strong Support */}
|
||||||
|
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||||||
|
<Handshake className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white text-xl mb-3">Complete Support</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
Comprehensive training, marketing, and ongoing operational support
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Growth Opportunity */}
|
||||||
|
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||||||
|
<TrendingUp className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white text-xl mb-3">Growth Potential</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
Tap into expanding markets with increasing customer demand
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Proven Success */}
|
||||||
|
<div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
|
||||||
|
<Award className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white text-xl mb-3">Proven Model</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
Join thousands of successful dealers in our global network
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Application Form Section */}
|
||||||
|
<section className="relative py-24 overflow-hidden">
|
||||||
|
{/* Background Image with Overlay */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
{/* <img
|
||||||
|
src={backgroundImage}
|
||||||
|
alt="Royal Enfield Showroom"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/> */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-950/95 via-slate-900/90 to-slate-950/95 backdrop-blur-sm"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto px-6 relative z-10">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<div className="inline-block mb-4">
|
||||||
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-5 py-2">
|
||||||
|
<p className="text-amber-400 text-sm tracking-wide">Start Your Journey</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-4xl text-white mb-4">Dealership Application</h2>
|
||||||
|
<p className="text-slate-300 text-lg">
|
||||||
|
Complete the form below to begin your partnership with Royal Enfield
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="bg-slate-900/60 backdrop-blur-xl rounded-3xl border border-slate-700/50 p-10 shadow-2xl">
|
||||||
|
<div className="space-y-7">
|
||||||
|
{/* Name & Email */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="name" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<Users className="w-4 h-4 text-amber-400" />
|
||||||
|
Full Name <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
placeholder="Enter your full name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">✉️</span>
|
||||||
|
Email Address <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="your-email@example.com"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile & Age */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="mobile" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">📱</span>
|
||||||
|
Mobile Number <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="mobile"
|
||||||
|
type="tel"
|
||||||
|
placeholder="+91 98765 43210"
|
||||||
|
value={formData.mobile}
|
||||||
|
onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="age" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">👤</span>
|
||||||
|
Age <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="age"
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter your age"
|
||||||
|
value={formData.age}
|
||||||
|
onChange={(e) => setFormData({ ...formData, age: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Country, State, District */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="country" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🌍</span>
|
||||||
|
Country <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Select value={formData.country} onValueChange={(value) => setFormData({ ...formData, country: value })}>
|
||||||
|
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||||||
|
<SelectValue placeholder="Select country" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||||||
|
<SelectItem value="india">India</SelectItem>
|
||||||
|
<SelectItem value="nepal">Nepal</SelectItem>
|
||||||
|
<SelectItem value="bangladesh">Bangladesh</SelectItem>
|
||||||
|
<SelectItem value="sri-lanka">Sri Lanka</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="state" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🏛️</span>
|
||||||
|
State <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Select value={formData.state} onValueChange={(value) => setFormData({ ...formData, state: value })}>
|
||||||
|
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||||||
|
<SelectValue placeholder="Select state" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||||||
|
<SelectItem value="maharashtra">Maharashtra</SelectItem>
|
||||||
|
<SelectItem value="karnataka">Karnataka</SelectItem>
|
||||||
|
<SelectItem value="tamil-nadu">Tamil Nadu</SelectItem>
|
||||||
|
<SelectItem value="delhi">Delhi</SelectItem>
|
||||||
|
<SelectItem value="rajasthan">Rajasthan</SelectItem>
|
||||||
|
<SelectItem value="uttar-pradesh">Uttar Pradesh</SelectItem>
|
||||||
|
<SelectItem value="gujarat">Gujarat</SelectItem>
|
||||||
|
<SelectItem value="west-bengal">West Bengal</SelectItem>
|
||||||
|
<SelectItem value="andhra-pradesh">Andhra Pradesh</SelectItem>
|
||||||
|
<SelectItem value="telangana">Telangana</SelectItem>
|
||||||
|
<SelectItem value="kerala">Kerala</SelectItem>
|
||||||
|
<SelectItem value="punjab">Punjab</SelectItem>
|
||||||
|
<SelectItem value="haryana">Haryana</SelectItem>
|
||||||
|
<SelectItem value="madhya-pradesh">Madhya Pradesh</SelectItem>
|
||||||
|
<SelectItem value="odisha">Odisha</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="district" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">📍</span>
|
||||||
|
District <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="district"
|
||||||
|
placeholder="Enter district"
|
||||||
|
value={formData.district}
|
||||||
|
onChange={(e) => setFormData({ ...formData, district: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interested City & Pincode */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="interestedCity" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🏙️</span>
|
||||||
|
Interested City for Dealership <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="interestedCity"
|
||||||
|
placeholder="Enter city name"
|
||||||
|
value={formData.interestedCity}
|
||||||
|
onChange={(e) => setFormData({ ...formData, interestedCity: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="pincode" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">📮</span>
|
||||||
|
Pincode <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="pincode"
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter pincode"
|
||||||
|
value={formData.pincode}
|
||||||
|
onChange={(e) => setFormData({ ...formData, pincode: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Education & Company Name */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="education" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🎓</span>
|
||||||
|
Education Qualification <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Select value={formData.education} onValueChange={(value) => setFormData({ ...formData, education: value })}>
|
||||||
|
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||||||
|
<SelectValue placeholder="Select qualification" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||||||
|
<SelectItem value="high-school">High School</SelectItem>
|
||||||
|
<SelectItem value="diploma">Diploma</SelectItem>
|
||||||
|
<SelectItem value="bachelors">Bachelor's Degree</SelectItem>
|
||||||
|
<SelectItem value="masters">Master's Degree</SelectItem>
|
||||||
|
<SelectItem value="doctorate">Doctorate</SelectItem>
|
||||||
|
<SelectItem value="other">Other</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="companyName" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🏢</span>
|
||||||
|
Company Name <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="companyName"
|
||||||
|
placeholder="Enter company name"
|
||||||
|
value={formData.companyName}
|
||||||
|
onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Source */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="source" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">📢</span>
|
||||||
|
How did you hear about us? <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Select value={formData.source} onValueChange={(value) => setFormData({ ...formData, source: value })}>
|
||||||
|
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||||||
|
<SelectValue placeholder="Select source" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||||||
|
<SelectItem value="existing-dealer">Existing RE Dealer</SelectItem>
|
||||||
|
<SelectItem value="customer">Customer</SelectItem>
|
||||||
|
<SelectItem value="re-employee">RE Employee</SelectItem>
|
||||||
|
<SelectItem value="newspaper">Newspaper</SelectItem>
|
||||||
|
<SelectItem value="website">Website</SelectItem>
|
||||||
|
<SelectItem value="friend">Friend</SelectItem>
|
||||||
|
<SelectItem value="other">Other</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Do you own a Royal Enfield? */}
|
||||||
|
<div>
|
||||||
|
<Label className="flex items-center gap-2 text-slate-200 mb-4">
|
||||||
|
<span className="text-amber-400">🏍️</span>
|
||||||
|
Do you own a Royal Enfield? <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<RadioGroup value={formData.ownRoyalEnfield} onValueChange={(value) => setFormData({ ...formData, ownRoyalEnfield: value, royalEnfieldModel: value === 'no' ? '' : formData.royalEnfieldModel })}>
|
||||||
|
<div className="flex items-center space-x-8">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<RadioGroupItem value="yes" id="own-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||||||
|
<Label htmlFor="own-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<RadioGroupItem value="no" id="own-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||||||
|
<Label htmlFor="no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Royal Enfield Model - Conditional */}
|
||||||
|
{formData.ownRoyalEnfield === 'yes' && (
|
||||||
|
<div className="animate-in fade-in slide-in-from-top-2 duration-300">
|
||||||
|
<Label htmlFor="royalEnfieldModel" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🏍️</span>
|
||||||
|
Which Royal Enfield model do you own? <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Select value={formData.royalEnfieldModel} onValueChange={(value) => setFormData({ ...formData, royalEnfieldModel: value })}>
|
||||||
|
<SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
|
||||||
|
<SelectValue placeholder="Select your bike model" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="bg-slate-800 border-slate-700 text-white">
|
||||||
|
<SelectItem value="classic-350">Classic 350</SelectItem>
|
||||||
|
<SelectItem value="meteor-350">Meteor 350</SelectItem>
|
||||||
|
<SelectItem value="hunter-350">Hunter 350</SelectItem>
|
||||||
|
<SelectItem value="bullet-350">Bullet 350</SelectItem>
|
||||||
|
<SelectItem value="himalayan">Himalayan</SelectItem>
|
||||||
|
<SelectItem value="scram-411">Scram 411</SelectItem>
|
||||||
|
<SelectItem value="interceptor-650">Interceptor 650</SelectItem>
|
||||||
|
<SelectItem value="continental-gt-650">Continental GT 650</SelectItem>
|
||||||
|
<SelectItem value="super-meteor-650">Super Meteor 650</SelectItem>
|
||||||
|
<SelectItem value="shotgun-650">Shotgun 650</SelectItem>
|
||||||
|
<SelectItem value="himalayan-450">Himalayan 450</SelectItem>
|
||||||
|
<SelectItem value="other">Other</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Existing Dealer/Vendor */}
|
||||||
|
<div>
|
||||||
|
<Label className="flex items-center gap-2 text-slate-200 mb-4">
|
||||||
|
<span className="text-amber-400">🏪</span>
|
||||||
|
Are you an existing dealer/vendor of Royal Enfield? <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<RadioGroup value={formData.existingDealer} onValueChange={(value) => setFormData({ ...formData, existingDealer: value })}>
|
||||||
|
<div className="flex items-center space-x-8">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<RadioGroupItem value="yes" id="dealer-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||||||
|
<Label htmlFor="dealer-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<RadioGroupItem value="no" id="dealer-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
|
||||||
|
<Label htmlFor="dealer-no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="address" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">🏠</span>
|
||||||
|
Address <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="address"
|
||||||
|
placeholder="Enter your complete address including landmarks"
|
||||||
|
value={formData.address}
|
||||||
|
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
rows={3}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="description" className="flex items-center gap-2 text-slate-200 mb-3">
|
||||||
|
<span className="text-amber-400">📝</span>
|
||||||
|
Description <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
placeholder="Tell us about your business background, experience, and why you want to become a Royal Enfield dealer..."
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||||
|
className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
|
||||||
|
rows={5}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Terms and Conditions */}
|
||||||
|
<div className="flex items-start space-x-3 bg-slate-800/30 p-5 rounded-xl border border-slate-700/50">
|
||||||
|
<Checkbox
|
||||||
|
id="terms"
|
||||||
|
checked={formData.acceptTerms}
|
||||||
|
onCheckedChange={(checked) => setFormData({ ...formData, acceptTerms: checked as boolean })}
|
||||||
|
className="border-slate-600 data-[state=checked]:bg-amber-500 data-[state=checked]:border-amber-500 mt-0.5"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Label htmlFor="terms" className="cursor-pointer text-slate-200">
|
||||||
|
I accept the terms and conditions <span className="text-amber-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<p className="text-slate-400 text-xs mt-2 leading-relaxed">
|
||||||
|
By submitting this form, you agree to our privacy policy and terms of service.
|
||||||
|
We will use your information to process your dealership application.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white py-6 text-lg shadow-xl shadow-amber-500/20 hover:shadow-2xl hover:shadow-amber-500/30 transition-all duration-300"
|
||||||
|
>
|
||||||
|
Submit Application
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-black/90 backdrop-blur-md border-t border-slate-800 py-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||||
|
{/* About Section */}
|
||||||
|
<div>
|
||||||
|
<div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg mb-6">
|
||||||
|
<span className="text-white text-xl">RE</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed mb-4">
|
||||||
|
Since 1901, Royal Enfield has been the world's oldest motorcycle brand in continuous production,
|
||||||
|
creating timeless motorcycles that define the pure motorcycling experience.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white mb-6">Quick Links</h3>
|
||||||
|
<ul className="space-y-3 text-sm">
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">About Royal Enfield</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Our Motorcycles</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Service & Support</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dealership & Contact */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white mb-6">Dealership Support</h3>
|
||||||
|
<ul className="space-y-3 text-sm mb-8">
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Application Process</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Partnership Requirements</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Training & Support</a></li>
|
||||||
|
<li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">FAQs</a></li>
|
||||||
|
</ul>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<p className="text-slate-400">Email: <span className="text-amber-400">dealership@royalenfield.com</span></p>
|
||||||
|
<p className="text-slate-400">Phone: <span className="text-amber-400">+91 1800-123-7567</span></p>
|
||||||
|
<p className="text-slate-500">Mon-Fri, 9:00 AM - 6:00 PM IST</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-slate-800 mt-12 pt-8 text-center">
|
||||||
|
<p className="text-slate-500 text-sm">
|
||||||
|
© 2024 Royal Enfield. All rights reserved. | Made like a gun, goes like a bullet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
66
src/components/ui/accordion.tsx
Normal file
66
src/components/ui/accordion.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||||
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./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 };
|
||||||
157
src/components/ui/alert-dialog.tsx
Normal file
157
src/components/ui/alert-dialog.tsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { buttonVariants } from "./button";
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
66
src/components/ui/alert.tsx
Normal file
66
src/components/ui/alert.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-card text-card-foreground",
|
||||||
|
destructive:
|
||||||
|
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Alert({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert"
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-title"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-description"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription };
|
||||||
11
src/components/ui/aspect-ratio.tsx
Normal file
11
src/components/ui/aspect-ratio.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
||||||
|
|
||||||
|
function AspectRatio({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
|
||||||
|
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { AspectRatio };
|
||||||
53
src/components/ui/avatar.tsx
Normal file
53
src/components/ui/avatar.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Avatar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
data-slot="avatar"
|
||||||
|
className={cn(
|
||||||
|
"relative flex size-10 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarImage({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
data-slot="avatar-image"
|
||||||
|
className={cn("aspect-square size-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarFallback({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
data-slot="avatar-fallback"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback };
|
||||||
46
src/components/ui/badge.tsx
Normal file
46
src/components/ui/badge.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
109
src/components/ui/breadcrumb.tsx
Normal file
109
src/components/ui/breadcrumb.tsx
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
||||||
|
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||||
|
return (
|
||||||
|
<ol
|
||||||
|
data-slot="breadcrumb-list"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-item"
|
||||||
|
className={cn("inline-flex items-center gap-1.5", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbLink({
|
||||||
|
asChild,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="breadcrumb-link"
|
||||||
|
className={cn("hover:text-foreground transition-colors", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-page"
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn("text-foreground font-normal", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbSeparator({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-separator"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("[&>svg]:size-3.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRight />}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbEllipsis({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-ellipsis"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("flex size-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="size-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
};
|
||||||
58
src/components/ui/button.tsx
Normal file
58
src/components/ui/button.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "./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 hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background text-foreground 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 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 rounded-md",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const Button = React.forwardRef<
|
||||||
|
HTMLButtonElement,
|
||||||
|
React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
>(({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
75
src/components/ui/calendar.tsx
Normal file
75
src/components/ui/calendar.tsx
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { DayPicker } from "react-day-picker";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { buttonVariants } from "./button";
|
||||||
|
|
||||||
|
function Calendar({
|
||||||
|
className,
|
||||||
|
classNames,
|
||||||
|
showOutsideDays = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayPicker>) {
|
||||||
|
return (
|
||||||
|
<DayPicker
|
||||||
|
showOutsideDays={showOutsideDays}
|
||||||
|
className={cn("p-3", className)}
|
||||||
|
classNames={{
|
||||||
|
months: "flex flex-col sm:flex-row gap-2",
|
||||||
|
month: "flex flex-col gap-4",
|
||||||
|
caption: "flex justify-center pt-1 relative items-center w-full",
|
||||||
|
caption_label: "text-sm font-medium",
|
||||||
|
nav: "flex items-center gap-1",
|
||||||
|
nav_button: cn(
|
||||||
|
buttonVariants({ variant: "outline" }),
|
||||||
|
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||||
|
),
|
||||||
|
nav_button_previous: "absolute left-1",
|
||||||
|
nav_button_next: "absolute right-1",
|
||||||
|
table: "w-full border-collapse space-x-1",
|
||||||
|
head_row: "flex",
|
||||||
|
head_cell:
|
||||||
|
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
|
||||||
|
row: "flex w-full mt-2",
|
||||||
|
cell: cn(
|
||||||
|
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
|
||||||
|
props.mode === "range"
|
||||||
|
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
|
||||||
|
: "[&:has([aria-selected])]:rounded-md",
|
||||||
|
),
|
||||||
|
day: cn(
|
||||||
|
buttonVariants({ variant: "ghost" }),
|
||||||
|
"size-8 p-0 font-normal aria-selected:opacity-100",
|
||||||
|
),
|
||||||
|
day_range_start:
|
||||||
|
"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
|
||||||
|
day_range_end:
|
||||||
|
"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
|
||||||
|
day_selected:
|
||||||
|
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
||||||
|
day_today: "bg-accent text-accent-foreground",
|
||||||
|
day_outside:
|
||||||
|
"day-outside text-muted-foreground aria-selected:text-muted-foreground",
|
||||||
|
day_disabled: "text-muted-foreground opacity-50",
|
||||||
|
day_range_middle:
|
||||||
|
"aria-selected:bg-accent aria-selected:text-accent-foreground",
|
||||||
|
day_hidden: "invisible",
|
||||||
|
...classNames,
|
||||||
|
}}
|
||||||
|
components={{
|
||||||
|
IconLeft: ({ className, ...props }) => (
|
||||||
|
<ChevronLeft className={cn("size-4", className)} {...props} />
|
||||||
|
),
|
||||||
|
IconRight: ({ className, ...props }) => (
|
||||||
|
<ChevronRight className={cn("size-4", className)} {...props} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Calendar };
|
||||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<h4
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6 [&:last-child]:pb-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
};
|
||||||
241
src/components/ui/carousel.tsx
Normal file
241
src/components/ui/carousel.tsx
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import useEmblaCarousel, {
|
||||||
|
type UseEmblaCarouselType,
|
||||||
|
} from "embla-carousel-react";
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { Button } from "./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;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Carousel({
|
||||||
|
orientation = "horizontal",
|
||||||
|
opts,
|
||||||
|
setApi,
|
||||||
|
plugins,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||||
|
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
|
||||||
|
onKeyDownCapture={handleKeyDown}
|
||||||
|
className={cn("relative", className)}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
data-slot="carousel"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</CarouselContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { carouselRef, orientation } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={carouselRef}
|
||||||
|
className="overflow-hidden"
|
||||||
|
data-slot="carousel-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex",
|
||||||
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { orientation } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
data-slot="carousel-item"
|
||||||
|
className={cn(
|
||||||
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselPrevious({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-previous"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -left-12 -translate-y-1/2"
|
||||||
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
disabled={!canScrollPrev}
|
||||||
|
onClick={scrollPrev}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
<span className="sr-only">Previous slide</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselNext({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-next"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -right-12 -translate-y-1/2"
|
||||||
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
disabled={!canScrollNext}
|
||||||
|
onClick={scrollNext}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowRight />
|
||||||
|
<span className="sr-only">Next slide</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
type CarouselApi,
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselPrevious,
|
||||||
|
CarouselNext,
|
||||||
|
};
|
||||||
353
src/components/ui/chart.tsx
Normal file
353
src/components/ui/chart.tsx
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as RechartsPrimitive from "recharts";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const;
|
||||||
|
|
||||||
|
export type ChartConfig = {
|
||||||
|
[k in string]: {
|
||||||
|
label?: React.ReactNode;
|
||||||
|
icon?: React.ComponentType;
|
||||||
|
} & (
|
||||||
|
| { color?: string; theme?: never }
|
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type ChartContextProps = {
|
||||||
|
config: ChartConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||||
|
|
||||||
|
function useChart() {
|
||||||
|
const context = React.useContext(ChartContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useChart must be used within a <ChartContainer />");
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartContainer({
|
||||||
|
id,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
config,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
config: ChartConfig;
|
||||||
|
children: React.ComponentProps<
|
||||||
|
typeof RechartsPrimitive.ResponsiveContainer
|
||||||
|
>["children"];
|
||||||
|
}) {
|
||||||
|
const uniqueId = React.useId();
|
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChartContext.Provider value={{ config }}>
|
||||||
|
<div
|
||||||
|
data-slot="chart"
|
||||||
|
data-chart={chartId}
|
||||||
|
className={cn(
|
||||||
|
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChartStyle id={chartId} config={config} />
|
||||||
|
<RechartsPrimitive.ResponsiveContainer>
|
||||||
|
{children}
|
||||||
|
</RechartsPrimitive.ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</ChartContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||||
|
const colorConfig = Object.entries(config).filter(
|
||||||
|
([, config]) => config.theme || config.color,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!colorConfig.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: Object.entries(THEMES)
|
||||||
|
.map(
|
||||||
|
([theme, prefix]) => `
|
||||||
|
${prefix} [data-chart=${id}] {
|
||||||
|
${colorConfig
|
||||||
|
.map(([key, itemConfig]) => {
|
||||||
|
const color =
|
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||||
|
itemConfig.color;
|
||||||
|
return color ? ` --color-${key}: ${color};` : null;
|
||||||
|
})
|
||||||
|
.join("\n")}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("\n"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||||
|
|
||||||
|
function ChartTooltipContent({
|
||||||
|
active,
|
||||||
|
payload,
|
||||||
|
className,
|
||||||
|
indicator = "dot",
|
||||||
|
hideLabel = false,
|
||||||
|
hideIndicator = false,
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
labelClassName,
|
||||||
|
formatter,
|
||||||
|
color,
|
||||||
|
nameKey,
|
||||||
|
labelKey,
|
||||||
|
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
hideLabel?: boolean;
|
||||||
|
hideIndicator?: boolean;
|
||||||
|
indicator?: "line" | "dot" | "dashed";
|
||||||
|
nameKey?: string;
|
||||||
|
labelKey?: string;
|
||||||
|
}) {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => {
|
||||||
|
if (hideLabel || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [item] = payload;
|
||||||
|
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const value =
|
||||||
|
!labelKey && typeof label === "string"
|
||||||
|
? config[label as keyof typeof config]?.label || label
|
||||||
|
: itemConfig?.label;
|
||||||
|
|
||||||
|
if (labelFormatter) {
|
||||||
|
return (
|
||||||
|
<div className={cn("font-medium", labelClassName)}>
|
||||||
|
{labelFormatter(value, payload)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||||
|
}, [
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
payload,
|
||||||
|
hideLabel,
|
||||||
|
labelClassName,
|
||||||
|
config,
|
||||||
|
labelKey,
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!active || !payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!nestLabel ? tooltipLabel : null}
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{payload.map((item, index) => {
|
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
const indicatorColor = color || item.payload.fill || item.color;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.dataKey}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
||||||
|
indicator === "dot" && "items-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatter && item?.value !== undefined && item.name ? (
|
||||||
|
formatter(item.value, item.name, item, index, item.payload)
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{itemConfig?.icon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
!hideIndicator && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||||
|
{
|
||||||
|
"h-2.5 w-2.5": indicator === "dot",
|
||||||
|
"w-1": indicator === "line",
|
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||||
|
indicator === "dashed",
|
||||||
|
"my-0.5": nestLabel && indicator === "dashed",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--color-bg": indicatorColor,
|
||||||
|
"--color-border": indicatorColor,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 justify-between leading-none",
|
||||||
|
nestLabel ? "items-end" : "items-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{nestLabel ? tooltipLabel : null}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{itemConfig?.label || item.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.value && (
|
||||||
|
<span className="text-foreground font-mono font-medium tabular-nums">
|
||||||
|
{item.value.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend;
|
||||||
|
|
||||||
|
function ChartLegendContent({
|
||||||
|
className,
|
||||||
|
hideIcon = false,
|
||||||
|
payload,
|
||||||
|
verticalAlign = "bottom",
|
||||||
|
nameKey,
|
||||||
|
}: React.ComponentProps<"div"> &
|
||||||
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||||
|
hideIcon?: boolean;
|
||||||
|
nameKey?: string;
|
||||||
|
}) {
|
||||||
|
const { config } = useChart();
|
||||||
|
|
||||||
|
if (!payload?.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex items-center justify-center gap-4",
|
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{payload.map((item) => {
|
||||||
|
const key = `${nameKey || item.dataKey || "value"}`;
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.value}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{itemConfig?.icon && !hideIcon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: item.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{itemConfig?.label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload(
|
||||||
|
config: ChartConfig,
|
||||||
|
payload: unknown,
|
||||||
|
key: string,
|
||||||
|
) {
|
||||||
|
if (typeof payload !== "object" || payload === null) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const payloadPayload =
|
||||||
|
"payload" in payload &&
|
||||||
|
typeof payload.payload === "object" &&
|
||||||
|
payload.payload !== null
|
||||||
|
? payload.payload
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
let configLabelKey: string = key;
|
||||||
|
|
||||||
|
if (
|
||||||
|
key in payload &&
|
||||||
|
typeof payload[key as keyof typeof payload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||||
|
} else if (
|
||||||
|
payloadPayload &&
|
||||||
|
key in payloadPayload &&
|
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payloadPayload[
|
||||||
|
key as keyof typeof payloadPayload
|
||||||
|
] as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
return configLabelKey in config
|
||||||
|
? config[configLabelKey]
|
||||||
|
: config[key as keyof typeof config];
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ChartContainer,
|
||||||
|
ChartTooltip,
|
||||||
|
ChartTooltipContent,
|
||||||
|
ChartLegend,
|
||||||
|
ChartLegendContent,
|
||||||
|
ChartStyle,
|
||||||
|
};
|
||||||
32
src/components/ui/checkbox.tsx
Normal file
32
src/components/ui/checkbox.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||||
|
import { CheckIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Checkbox({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
data-slot="checkbox"
|
||||||
|
className={cn(
|
||||||
|
"peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
data-slot="checkbox-indicator"
|
||||||
|
className="flex items-center justify-center text-current transition-none"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-3.5" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Checkbox };
|
||||||
33
src/components/ui/collapsible.tsx
Normal file
33
src/components/ui/collapsible.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
||||||
|
|
||||||
|
function Collapsible({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||||
|
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleTrigger
|
||||||
|
data-slot="collapsible-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleContent({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleContent
|
||||||
|
data-slot="collapsible-content"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
||||||
177
src/components/ui/command.tsx
Normal file
177
src/components/ui/command.tsx
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Command as CommandPrimitive } from "cmdk";
|
||||||
|
import { SearchIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "./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,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Dialog> & {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogDescription>{description}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent className="overflow-hidden p-0">
|
||||||
|
<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,
|
||||||
|
};
|
||||||
252
src/components/ui/context-menu.tsx
Normal file
252
src/components/ui/context-menu.tsx
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function ContextMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
|
||||||
|
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
|
||||||
|
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.RadioGroup
|
||||||
|
data-slot="context-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.SubTrigger
|
||||||
|
data-slot="context-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto" />
|
||||||
|
</ContextMenuPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.SubContent
|
||||||
|
data-slot="context-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Portal>
|
||||||
|
<ContextMenuPrimitive.Content
|
||||||
|
data-slot="context-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</ContextMenuPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: "default" | "destructive";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Item
|
||||||
|
data-slot="context-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="context-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.RadioItem
|
||||||
|
data-slot="context-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<ContextMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</ContextMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</ContextMenuPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Label
|
||||||
|
data-slot="context-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<ContextMenuPrimitive.Separator
|
||||||
|
data-slot="context-menu-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContextMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="context-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuTrigger,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuCheckboxItem,
|
||||||
|
ContextMenuRadioItem,
|
||||||
|
ContextMenuLabel,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuShortcut,
|
||||||
|
ContextMenuGroup,
|
||||||
|
ContextMenuPortal,
|
||||||
|
ContextMenuSub,
|
||||||
|
ContextMenuSubContent,
|
||||||
|
ContextMenuSubTrigger,
|
||||||
|
ContextMenuRadioGroup,
|
||||||
|
};
|
||||||
138
src/components/ui/dialog.tsx
Normal file
138
src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./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} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentProps<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentProps<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
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}
|
||||||
|
<DialogPrimitive.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>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
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-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
};
|
||||||
132
src/components/ui/drawer.tsx
Normal file
132
src/components/ui/drawer.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Drawer as DrawerPrimitive } from "vaul";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Drawer({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
|
||||||
|
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
|
||||||
|
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
|
||||||
|
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
|
||||||
|
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Overlay
|
||||||
|
data-slot="drawer-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 DrawerContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DrawerPortal data-slot="drawer-portal">
|
||||||
|
<DrawerOverlay />
|
||||||
|
<DrawerPrimitive.Content
|
||||||
|
data-slot="drawer-content"
|
||||||
|
className={cn(
|
||||||
|
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
||||||
|
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
||||||
|
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
||||||
|
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
||||||
|
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
||||||
|
{children}
|
||||||
|
</DrawerPrimitive.Content>
|
||||||
|
</DrawerPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="drawer-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="drawer-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Title
|
||||||
|
data-slot="drawer-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Description
|
||||||
|
data-slot="drawer-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Drawer,
|
||||||
|
DrawerPortal,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerTrigger,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerDescription,
|
||||||
|
};
|
||||||
257
src/components/ui/dropdown-menu.tsx
Normal file
257
src/components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function DropdownMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||||
|
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Trigger
|
||||||
|
data-slot="dropdown-menu-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
data-slot="dropdown-menu-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: "default" | "destructive";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
data-slot="dropdown-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="dropdown-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioGroup
|
||||||
|
data-slot="dropdown-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
data-slot="dropdown-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
data-slot="dropdown-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
data-slot="dropdown-menu-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="dropdown-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||||
|
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
data-slot="dropdown-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto size-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
data-slot="dropdown-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
};
|
||||||
168
src/components/ui/form.tsx
Normal file
168
src/components/ui/form.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
FormProvider,
|
||||||
|
useFormContext,
|
||||||
|
useFormState,
|
||||||
|
type ControllerProps,
|
||||||
|
type FieldPath,
|
||||||
|
type FieldValues,
|
||||||
|
} from "react-hook-form";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { Label } from "./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 } = useFormContext();
|
||||||
|
const formState = useFormState({ name: fieldContext.name });
|
||||||
|
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,
|
||||||
|
);
|
||||||
|
|
||||||
|
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const id = React.useId();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItemContext.Provider value={{ id }}>
|
||||||
|
<div
|
||||||
|
data-slot="form-item"
|
||||||
|
className={cn("grid gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</FormItemContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
const { error, formItemId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
data-slot="form-label"
|
||||||
|
data-error={!!error}
|
||||||
|
className={cn("data-[error=true]:text-destructive", className)}
|
||||||
|
htmlFor={formItemId}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||||
|
useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Slot
|
||||||
|
data-slot="form-control"
|
||||||
|
id={formItemId}
|
||||||
|
aria-describedby={
|
||||||
|
!error
|
||||||
|
? `${formDescriptionId}`
|
||||||
|
: `${formDescriptionId} ${formMessageId}`
|
||||||
|
}
|
||||||
|
aria-invalid={!!error}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { formDescriptionId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-description"
|
||||||
|
id={formDescriptionId}
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
|
const { error, formMessageId } = useFormField();
|
||||||
|
const body = error ? String(error?.message ?? "") : props.children;
|
||||||
|
|
||||||
|
if (!body) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
data-slot="form-message"
|
||||||
|
id={formMessageId}
|
||||||
|
className={cn("text-destructive text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
useFormField,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormMessage,
|
||||||
|
FormField,
|
||||||
|
};
|
||||||
44
src/components/ui/hover-card.tsx
Normal file
44
src/components/ui/hover-card.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function HoverCard({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
|
||||||
|
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function HoverCardTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HoverCardContent({
|
||||||
|
className,
|
||||||
|
align = "center",
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
|
||||||
|
<HoverCardPrimitive.Content
|
||||||
|
data-slot="hover-card-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</HoverCardPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
||||||
77
src/components/ui/input-otp.tsx
Normal file
77
src/components/ui/input-otp.tsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { OTPInput, OTPInputContext } from "input-otp";
|
||||||
|
import { MinusIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function InputOTP({
|
||||||
|
className,
|
||||||
|
containerClassName,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof OTPInput> & {
|
||||||
|
containerClassName?: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<OTPInput
|
||||||
|
data-slot="input-otp"
|
||||||
|
containerClassName={cn(
|
||||||
|
"flex items-center gap-2 has-disabled:opacity-50",
|
||||||
|
containerClassName,
|
||||||
|
)}
|
||||||
|
className={cn("disabled:cursor-not-allowed", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="input-otp-group"
|
||||||
|
className={cn("flex items-center gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputOTPSlot({
|
||||||
|
index,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
index: number;
|
||||||
|
}) {
|
||||||
|
const inputOTPContext = React.useContext(OTPInputContext);
|
||||||
|
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="input-otp-slot"
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{char}
|
||||||
|
{hasFakeCaret && (
|
||||||
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div data-slot="input-otp-separator" role="separator" {...props}>
|
||||||
|
<MinusIcon />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
||||||
26
src/components/ui/input.tsx
Normal file
26
src/components/ui/input.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
ref={ref}
|
||||||
|
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 px-3 py-1 text-base bg-input-background 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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Input.displayName = "Input";
|
||||||
|
|
||||||
|
export { Input };
|
||||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label };
|
||||||
276
src/components/ui/menubar.tsx
Normal file
276
src/components/ui/menubar.tsx
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as MenubarPrimitive from "@radix-ui/react-menubar";
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Menubar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Root
|
||||||
|
data-slot="menubar"
|
||||||
|
className={cn(
|
||||||
|
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
|
||||||
|
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
|
||||||
|
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
|
||||||
|
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarTrigger({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Trigger
|
||||||
|
data-slot="menubar-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarContent({
|
||||||
|
className,
|
||||||
|
align = "start",
|
||||||
|
alignOffset = -4,
|
||||||
|
sideOffset = 8,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<MenubarPortal>
|
||||||
|
<MenubarPrimitive.Content
|
||||||
|
data-slot="menubar-content"
|
||||||
|
align={align}
|
||||||
|
alignOffset={alignOffset}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</MenubarPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
|
||||||
|
inset?: boolean;
|
||||||
|
variant?: "default" | "destructive";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Item
|
||||||
|
data-slot="menubar-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.CheckboxItem
|
||||||
|
data-slot="menubar-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.CheckboxItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.RadioItem
|
||||||
|
data-slot="menubar-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<MenubarPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</MenubarPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</MenubarPrimitive.RadioItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Label
|
||||||
|
data-slot="menubar-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.Separator
|
||||||
|
data-slot="menubar-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="menubar-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
|
||||||
|
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.SubTrigger
|
||||||
|
data-slot="menubar-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||||
|
</MenubarPrimitive.SubTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenubarSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<MenubarPrimitive.SubContent
|
||||||
|
data-slot="menubar-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Menubar,
|
||||||
|
MenubarPortal,
|
||||||
|
MenubarMenu,
|
||||||
|
MenubarTrigger,
|
||||||
|
MenubarContent,
|
||||||
|
MenubarGroup,
|
||||||
|
MenubarSeparator,
|
||||||
|
MenubarLabel,
|
||||||
|
MenubarItem,
|
||||||
|
MenubarShortcut,
|
||||||
|
MenubarCheckboxItem,
|
||||||
|
MenubarRadioGroup,
|
||||||
|
MenubarRadioItem,
|
||||||
|
MenubarSub,
|
||||||
|
MenubarSubTrigger,
|
||||||
|
MenubarSubContent,
|
||||||
|
};
|
||||||
168
src/components/ui/navigation-menu.tsx
Normal file
168
src/components/ui/navigation-menu.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function NavigationMenu({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
viewport = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||||
|
viewport?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
data-slot="navigation-menu"
|
||||||
|
data-viewport={viewport}
|
||||||
|
className={cn(
|
||||||
|
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{viewport && <NavigationMenuViewport />}
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
data-slot="navigation-menu-list"
|
||||||
|
className={cn(
|
||||||
|
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Item
|
||||||
|
data-slot="navigation-menu-item"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
|
||||||
|
);
|
||||||
|
|
||||||
|
function NavigationMenuTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
data-slot="navigation-menu-trigger"
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}{" "}
|
||||||
|
<ChevronDownIcon
|
||||||
|
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
data-slot="navigation-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"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 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||||
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuViewport({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute top-full left-0 isolate z-50 flex justify-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
data-slot="navigation-menu-viewport"
|
||||||
|
className={cn(
|
||||||
|
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuLink({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Link
|
||||||
|
data-slot="navigation-menu-link"
|
||||||
|
className={cn(
|
||||||
|
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuIndicator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
data-slot="navigation-menu-indicator"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
};
|
||||||
127
src/components/ui/pagination.tsx
Normal file
127
src/components/ui/pagination.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
MoreHorizontalIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { Button, buttonVariants } from "./button";
|
||||||
|
|
||||||
|
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
role="navigation"
|
||||||
|
aria-label="pagination"
|
||||||
|
data-slot="pagination"
|
||||||
|
className={cn("mx-auto flex w-full justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="pagination-content"
|
||||||
|
className={cn("flex flex-row items-center gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||||
|
return <li data-slot="pagination-item" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
type PaginationLinkProps = {
|
||||||
|
isActive?: boolean;
|
||||||
|
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||||
|
React.ComponentProps<"a">;
|
||||||
|
|
||||||
|
function PaginationLink({
|
||||||
|
className,
|
||||||
|
isActive,
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: PaginationLinkProps) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
data-slot="pagination-link"
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({
|
||||||
|
variant: isActive ? "outline" : "ghost",
|
||||||
|
size,
|
||||||
|
}),
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationPrevious({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PaginationLink>) {
|
||||||
|
return (
|
||||||
|
<PaginationLink
|
||||||
|
aria-label="Go to previous page"
|
||||||
|
size="default"
|
||||||
|
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
<span className="hidden sm:block">Previous</span>
|
||||||
|
</PaginationLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationNext({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PaginationLink>) {
|
||||||
|
return (
|
||||||
|
<PaginationLink
|
||||||
|
aria-label="Go to next page"
|
||||||
|
size="default"
|
||||||
|
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="hidden sm:block">Next</span>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</PaginationLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PaginationEllipsis({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
aria-hidden
|
||||||
|
data-slot="pagination-ellipsis"
|
||||||
|
className={cn("flex size-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontalIcon className="size-4" />
|
||||||
|
<span className="sr-only">More pages</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Pagination,
|
||||||
|
PaginationContent,
|
||||||
|
PaginationLink,
|
||||||
|
PaginationItem,
|
||||||
|
PaginationPrevious,
|
||||||
|
PaginationNext,
|
||||||
|
PaginationEllipsis,
|
||||||
|
};
|
||||||
48
src/components/ui/popover.tsx
Normal file
48
src/components/ui/popover.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Popover({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||||
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||||
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverContent({
|
||||||
|
className,
|
||||||
|
align = "center",
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
data-slot="popover-content"
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PopoverAnchor({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||||
|
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||||
31
src/components/ui/progress.tsx
Normal file
31
src/components/ui/progress.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Progress({
|
||||||
|
className,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
data-slot="progress"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
data-slot="progress-indicator"
|
||||||
|
className="bg-primary h-full w-full flex-1 transition-all"
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Progress };
|
||||||
45
src/components/ui/radio-group.tsx
Normal file
45
src/components/ui/radio-group.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
||||||
|
import { CircleIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function RadioGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Root
|
||||||
|
data-slot="radio-group"
|
||||||
|
className={cn("grid gap-3", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RadioGroupItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Item
|
||||||
|
data-slot="radio-group-item"
|
||||||
|
className={cn(
|
||||||
|
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<RadioGroupPrimitive.Indicator
|
||||||
|
data-slot="radio-group-indicator"
|
||||||
|
className="relative flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||||
|
</RadioGroupPrimitive.Indicator>
|
||||||
|
</RadioGroupPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem };
|
||||||
56
src/components/ui/resizable.tsx
Normal file
56
src/components/ui/resizable.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { GripVerticalIcon } from "lucide-react";
|
||||||
|
import * as ResizablePrimitive from "react-resizable-panels";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function ResizablePanelGroup({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
|
||||||
|
return (
|
||||||
|
<ResizablePrimitive.PanelGroup
|
||||||
|
data-slot="resizable-panel-group"
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResizablePanel({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
|
||||||
|
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResizableHandle({
|
||||||
|
withHandle,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||||
|
withHandle?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ResizablePrimitive.PanelResizeHandle
|
||||||
|
data-slot="resizable-handle"
|
||||||
|
className={cn(
|
||||||
|
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||||
|
<GripVerticalIcon className="size-2.5" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ResizablePrimitive.PanelResizeHandle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||||
58
src/components/ui/scroll-area.tsx
Normal file
58
src/components/ui/scroll-area.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function ScrollArea({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
data-slot="scroll-area"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport
|
||||||
|
data-slot="scroll-area-viewport"
|
||||||
|
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ScrollBar({
|
||||||
|
className,
|
||||||
|
orientation = "vertical",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
data-slot="scroll-area-scrollbar"
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none p-px transition-colors select-none",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||||
|
data-slot="scroll-area-thumb"
|
||||||
|
className="bg-border relative flex-1 rounded-full"
|
||||||
|
/>
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar };
|
||||||
189
src/components/ui/select.tsx
Normal file
189
src/components/ui/select.tsx
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||||
|
import {
|
||||||
|
CheckIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: "sm" | "default";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "popper",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||||
|
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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
};
|
||||||
28
src/components/ui/separator.tsx
Normal file
28
src/components/ui/separator.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = "horizontal",
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator-root"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator };
|
||||||
139
src/components/ui/sheet.tsx
Normal file
139
src/components/ui/sheet.tsx
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { XIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-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 SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left";
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
side === "right" &&
|
||||||
|
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||||
|
side === "left" &&
|
||||||
|
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||||
|
side === "top" &&
|
||||||
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||||
|
side === "bottom" &&
|
||||||
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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">
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
};
|
||||||
726
src/components/ui/sidebar.tsx
Normal file
726
src/components/ui/sidebar.tsx
Normal file
@ -0,0 +1,726 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { VariantProps, cva } from "class-variance-authority";
|
||||||
|
import { PanelLeftIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { useIsMobile } from "./use-mobile";
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { Button } from "./button";
|
||||||
|
import { Input } from "./input";
|
||||||
|
import { Separator } from "./separator";
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from "./sheet";
|
||||||
|
import { Skeleton } from "./skeleton";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "./tooltip";
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarProvider({
|
||||||
|
defaultOpen = true,
|
||||||
|
open: openProp,
|
||||||
|
onOpenChange: setOpenProp,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
}) {
|
||||||
|
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
|
||||||
|
data-slot="sidebar-wrapper"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH,
|
||||||
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||||
|
...style,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</SidebarContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Sidebar({
|
||||||
|
side = "left",
|
||||||
|
variant = "sidebar",
|
||||||
|
collapsible = "offcanvas",
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
side?: "left" | "right";
|
||||||
|
variant?: "sidebar" | "floating" | "inset";
|
||||||
|
collapsible?: "offcanvas" | "icon" | "none";
|
||||||
|
}) {
|
||||||
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||||
|
|
||||||
|
if (collapsible === "none") {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar"
|
||||||
|
className={cn(
|
||||||
|
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||||
|
<SheetContent
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
data-slot="sidebar"
|
||||||
|
data-mobile="true"
|
||||||
|
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>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
|
||||||
|
className="group peer text-sidebar-foreground hidden md:block"
|
||||||
|
data-state={state}
|
||||||
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||||
|
data-variant={variant}
|
||||||
|
data-side={side}
|
||||||
|
data-slot="sidebar"
|
||||||
|
>
|
||||||
|
{/* This is what handles the sidebar gap on desktop */}
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-gap"
|
||||||
|
className={cn(
|
||||||
|
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||||
|
"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
|
||||||
|
data-slot="sidebar-container"
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear 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"
|
||||||
|
data-slot="sidebar-inner"
|
||||||
|
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarTrigger({
|
||||||
|
className,
|
||||||
|
onClick,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-sidebar="trigger"
|
||||||
|
data-slot="sidebar-trigger"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className={cn("size-7", className)}
|
||||||
|
onClick={(event) => {
|
||||||
|
onClick?.(event);
|
||||||
|
toggleSidebar();
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<PanelLeftIcon />
|
||||||
|
<span className="sr-only">Toggle Sidebar</span>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||||
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
data-sidebar="rail"
|
||||||
|
data-slot="sidebar-rail"
|
||||||
|
aria-label="Toggle Sidebar"
|
||||||
|
tabIndex={-1}
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
title="Toggle Sidebar"
|
||||||
|
className={cn(
|
||||||
|
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] 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",
|
||||||
|
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||||
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||||
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
data-slot="sidebar-inset"
|
||||||
|
className={cn(
|
||||||
|
"bg-background relative flex w-full flex-1 flex-col",
|
||||||
|
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Input>) {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
data-slot="sidebar-input"
|
||||||
|
data-sidebar="input"
|
||||||
|
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-header"
|
||||||
|
data-sidebar="header"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-footer"
|
||||||
|
data-sidebar="footer"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Separator>) {
|
||||||
|
return (
|
||||||
|
<Separator
|
||||||
|
data-slot="sidebar-separator"
|
||||||
|
data-sidebar="separator"
|
||||||
|
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-content"
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group"
|
||||||
|
data-sidebar="group"
|
||||||
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupLabel({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "div";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-label"
|
||||||
|
data-sidebar="group-label"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-action"
|
||||||
|
data-sidebar="group-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after:hidden",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group-content"
|
||||||
|
data-sidebar="group-content"
|
||||||
|
className={cn("w-full text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu"
|
||||||
|
data-sidebar="menu"
|
||||||
|
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-item"
|
||||||
|
data-sidebar="menu-item"
|
||||||
|
className={cn("group/menu-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sidebarMenuButtonVariants = cva(
|
||||||
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden 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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function SidebarMenuButton({
|
||||||
|
asChild = false,
|
||||||
|
isActive = false,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
tooltip,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
isActive?: boolean;
|
||||||
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||||
|
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
const { isMobile, state } = useSidebar();
|
||||||
|
|
||||||
|
const button = (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-button"
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
showOnHover = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
showOnHover?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-action"
|
||||||
|
data-sidebar="menu-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after: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 &&
|
||||||
|
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuBadge({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-badge"
|
||||||
|
data-sidebar="menu-badge"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||||
|
"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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSkeleton({
|
||||||
|
className,
|
||||||
|
showIcon = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
showIcon?: boolean;
|
||||||
|
}) {
|
||||||
|
// Random width between 50 to 90%.
|
||||||
|
const width = React.useMemo(() => {
|
||||||
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-skeleton"
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu-sub"
|
||||||
|
data-sidebar="menu-sub"
|
||||||
|
className={cn(
|
||||||
|
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-sub-item"
|
||||||
|
data-sidebar="menu-sub-item"
|
||||||
|
className={cn("group/menu-sub-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubButton({
|
||||||
|
asChild = false,
|
||||||
|
size = "md",
|
||||||
|
isActive = false,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
size?: "sm" | "md";
|
||||||
|
isActive?: boolean;
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-sub-button"
|
||||||
|
data-sidebar="menu-sub-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 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",
|
||||||
|
"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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
13
src/components/ui/skeleton.tsx
Normal file
13
src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="skeleton"
|
||||||
|
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton };
|
||||||
63
src/components/ui/slider.tsx
Normal file
63
src/components/ui/slider.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Slider({
|
||||||
|
className,
|
||||||
|
defaultValue,
|
||||||
|
value,
|
||||||
|
min = 0,
|
||||||
|
max = 100,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
||||||
|
const _values = React.useMemo(
|
||||||
|
() =>
|
||||||
|
Array.isArray(value)
|
||||||
|
? value
|
||||||
|
: Array.isArray(defaultValue)
|
||||||
|
? defaultValue
|
||||||
|
: [min, max],
|
||||||
|
[value, defaultValue, min, max],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SliderPrimitive.Root
|
||||||
|
data-slot="slider"
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
value={value}
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Track
|
||||||
|
data-slot="slider-track"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SliderPrimitive.Range
|
||||||
|
data-slot="slider-range"
|
||||||
|
className={cn(
|
||||||
|
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SliderPrimitive.Track>
|
||||||
|
{Array.from({ length: _values.length }, (_, index) => (
|
||||||
|
<SliderPrimitive.Thumb
|
||||||
|
data-slot="slider-thumb"
|
||||||
|
key={index}
|
||||||
|
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</SliderPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Slider };
|
||||||
25
src/components/ui/sonner.tsx
Normal file
25
src/components/ui/sonner.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
import { Toaster as Sonner, ToasterProps } from "sonner";
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--normal-bg": "var(--popover)",
|
||||||
|
"--normal-text": "var(--popover-foreground)",
|
||||||
|
"--normal-border": "var(--border)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Toaster };
|
||||||
31
src/components/ui/switch.tsx
Normal file
31
src/components/ui/switch.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Switch({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SwitchPrimitive.Root
|
||||||
|
data-slot="switch"
|
||||||
|
className={cn(
|
||||||
|
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SwitchPrimitive.Thumb
|
||||||
|
data-slot="switch-thumb"
|
||||||
|
className={cn(
|
||||||
|
"bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Switch };
|
||||||
116
src/components/ui/table.tsx
Normal file
116
src/components/ui/table.tsx
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="table-container"
|
||||||
|
className="relative w-full overflow-x-auto"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
data-slot="table"
|
||||||
|
className={cn("w-full caption-bottom text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||||
|
return (
|
||||||
|
<thead
|
||||||
|
data-slot="table-header"
|
||||||
|
className={cn("[&_tr]:border-b", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||||
|
return (
|
||||||
|
<tbody
|
||||||
|
data-slot="table-body"
|
||||||
|
className={cn("[&_tr:last-child]:border-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||||
|
return (
|
||||||
|
<tfoot
|
||||||
|
data-slot="table-footer"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
data-slot="table-row"
|
||||||
|
className={cn(
|
||||||
|
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
data-slot="table-head"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
data-slot="table-cell"
|
||||||
|
className={cn(
|
||||||
|
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCaption({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"caption">) {
|
||||||
|
return (
|
||||||
|
<caption
|
||||||
|
data-slot="table-caption"
|
||||||
|
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Table,
|
||||||
|
TableHeader,
|
||||||
|
TableBody,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
TableCell,
|
||||||
|
TableCaption,
|
||||||
|
};
|
||||||
66
src/components/ui/tabs.tsx
Normal file
66
src/components/ui/tabs.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Tabs({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Root
|
||||||
|
data-slot="tabs"
|
||||||
|
className={cn("flex flex-col gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.List
|
||||||
|
data-slot="tabs-list"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsTrigger({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Trigger
|
||||||
|
data-slot="tabs-trigger"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Content
|
||||||
|
data-slot="tabs-content"
|
||||||
|
className={cn("flex-1 outline-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
||||||
18
src/components/ui/textarea.tsx
Normal file
18
src/components/ui/textarea.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
className={cn(
|
||||||
|
"resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Textarea };
|
||||||
73
src/components/ui/toggle-group.tsx
Normal file
73
src/components/ui/toggle-group.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
||||||
|
import { type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
import { toggleVariants } from "./toggle";
|
||||||
|
|
||||||
|
const ToggleGroupContext = React.createContext<
|
||||||
|
VariantProps<typeof toggleVariants>
|
||||||
|
>({
|
||||||
|
size: "default",
|
||||||
|
variant: "default",
|
||||||
|
});
|
||||||
|
|
||||||
|
function ToggleGroup({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
||||||
|
VariantProps<typeof toggleVariants>) {
|
||||||
|
return (
|
||||||
|
<ToggleGroupPrimitive.Root
|
||||||
|
data-slot="toggle-group"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ToggleGroupContext.Provider value={{ variant, size }}>
|
||||||
|
{children}
|
||||||
|
</ToggleGroupContext.Provider>
|
||||||
|
</ToggleGroupPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ToggleGroupItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
||||||
|
VariantProps<typeof toggleVariants>) {
|
||||||
|
const context = React.useContext(ToggleGroupContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToggleGroupPrimitive.Item
|
||||||
|
data-slot="toggle-group-item"
|
||||||
|
data-variant={context.variant || variant}
|
||||||
|
data-size={context.size || size}
|
||||||
|
className={cn(
|
||||||
|
toggleVariants({
|
||||||
|
variant: context.variant || variant,
|
||||||
|
size: context.size || size,
|
||||||
|
}),
|
||||||
|
"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ToggleGroupPrimitive.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ToggleGroup, ToggleGroupItem };
|
||||||
47
src/components/ui/toggle.tsx
Normal file
47
src/components/ui/toggle.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
const toggleVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-transparent",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-2 min-w-9",
|
||||||
|
sm: "h-8 px-1.5 min-w-8",
|
||||||
|
lg: "h-10 px-2.5 min-w-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
function Toggle({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||||
|
VariantProps<typeof toggleVariants>) {
|
||||||
|
return (
|
||||||
|
<TogglePrimitive.Root
|
||||||
|
data-slot="toggle"
|
||||||
|
className={cn(toggleVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toggle, toggleVariants };
|
||||||
61
src/components/ui/tooltip.tsx
Normal file
61
src/components/ui/tooltip.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||||
|
|
||||||
|
import { cn } from "./utils";
|
||||||
|
|
||||||
|
function TooltipProvider({
|
||||||
|
delayDuration = 0,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||||
|
return (
|
||||||
|
<TooltipPrimitive.Provider
|
||||||
|
data-slot="tooltip-provider"
|
||||||
|
delayDuration={delayDuration}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Tooltip({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<TooltipProvider>
|
||||||
|
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TooltipTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||||
|
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function TooltipContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 0,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
data-slot="tooltip-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||||
|
</TooltipPrimitive.Content>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||||
21
src/components/ui/use-mobile.ts
Normal file
21
src/components/ui/use-mobile.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
const MOBILE_BREAKPOINT = 768;
|
||||||
|
|
||||||
|
export function useIsMobile() {
|
||||||
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
|
||||||
|
undefined,
|
||||||
|
);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||||
|
const onChange = () => {
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||||
|
};
|
||||||
|
mql.addEventListener("change", onChange);
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||||
|
return () => mql.removeEventListener("change", onChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return !!isMobile;
|
||||||
|
}
|
||||||
6
src/components/ui/utils.ts
Normal file
6
src/components/ui/utils.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
61
src/guidelines/Guidelines.md
Normal file
61
src/guidelines/Guidelines.md
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
**Add your own guidelines here**
|
||||||
|
<!--
|
||||||
|
|
||||||
|
System Guidelines
|
||||||
|
|
||||||
|
Use this file to provide the AI with rules and guidelines you want it to follow.
|
||||||
|
This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs
|
||||||
|
|
||||||
|
TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need
|
||||||
|
|
||||||
|
# General guidelines
|
||||||
|
|
||||||
|
Any general rules you want the AI to follow.
|
||||||
|
For example:
|
||||||
|
|
||||||
|
* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
|
||||||
|
* Refactor code as you go to keep code clean
|
||||||
|
* Keep file sizes small and put helper functions and components in their own files.
|
||||||
|
|
||||||
|
--------------
|
||||||
|
|
||||||
|
# Design system guidelines
|
||||||
|
Rules for how the AI should make generations look like your company's design system
|
||||||
|
|
||||||
|
Additionally, if you select a design system to use in the prompt box, you can reference
|
||||||
|
your design system's components, tokens, variables and components.
|
||||||
|
For example:
|
||||||
|
|
||||||
|
* Use a base font-size of 14px
|
||||||
|
* Date formats should always be in the format “Jun 10”
|
||||||
|
* The bottom toolbar should only ever have a maximum of 4 items
|
||||||
|
* Never use the floating action button with the bottom toolbar
|
||||||
|
* Chips should always come in sets of 3 or more
|
||||||
|
* Don't use a dropdown if there are 2 or fewer options
|
||||||
|
|
||||||
|
You can also create sub sections and add more specific details
|
||||||
|
For example:
|
||||||
|
|
||||||
|
|
||||||
|
## Button
|
||||||
|
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
|
||||||
|
users through the application. It provides visual feedback and clear affordances to enhance user experience.
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
|
||||||
|
or initiating processes. They communicate interactivity and should have clear, action-oriented labels.
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
* Primary Button
|
||||||
|
* Purpose : Used for the main action in a section or page
|
||||||
|
* Visual Style : Bold, filled with the primary brand color
|
||||||
|
* Usage : One primary button per section to guide users toward the most important action
|
||||||
|
* Secondary Button
|
||||||
|
* Purpose : Used for alternative or supporting actions
|
||||||
|
* Visual Style : Outlined with the primary color, transparent background
|
||||||
|
* Usage : Can appear alongside a primary button for less important actions
|
||||||
|
* Tertiary Button
|
||||||
|
* Purpose : Used for the least important actions
|
||||||
|
* Visual Style : Text-only with no border, using primary color
|
||||||
|
* Usage : For actions that should be available but not emphasized
|
||||||
|
-->
|
||||||
1049
src/lib/mock-data.ts
Normal file
1049
src/lib/mock-data.ts
Normal file
File diff suppressed because it is too large
Load Diff
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './styles/globals.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
190
src/styles/globals.css
Normal file
190
src/styles/globals.css
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font-size: 16px;
|
||||||
|
--background: #ffffff;
|
||||||
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: #ffffff;
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: #030213;
|
||||||
|
--primary-foreground: oklch(1 0 0);
|
||||||
|
--secondary: oklch(0.95 0.0058 264.53);
|
||||||
|
--secondary-foreground: #030213;
|
||||||
|
--muted: #ececf0;
|
||||||
|
--muted-foreground: #717182;
|
||||||
|
--accent: #e9ebef;
|
||||||
|
--accent-foreground: #030213;
|
||||||
|
--destructive: #d4183d;
|
||||||
|
--destructive-foreground: #ffffff;
|
||||||
|
--border: rgba(0, 0, 0, 0.1);
|
||||||
|
--input: transparent;
|
||||||
|
--input-background: #f3f3f5;
|
||||||
|
--switch-background: #cbced4;
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-normal: 400;
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: #030213;
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.145 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.145 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.985 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.396 0.141 25.723);
|
||||||
|
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||||
|
--border: oklch(0.269 0 0);
|
||||||
|
--input: oklch(0.269 0 0);
|
||||||
|
--ring: oklch(0.439 0 0);
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-normal: 400;
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(0.269 0 0);
|
||||||
|
--sidebar-ring: oklch(0.439 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-input-background: var(--input-background);
|
||||||
|
--color-switch-background: var(--switch-background);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
|
||||||
|
*/
|
||||||
|
@layer base {
|
||||||
|
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
|
||||||
|
h1 {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-weight-normal);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-weight-normal);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: var(--font-size);
|
||||||
|
}
|
||||||
39
tsconfig.json
Normal file
39
tsconfig.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": [
|
||||||
|
"ES2020",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
12
tsconfig.node.json
Normal file
12
tsconfig.node.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"vite.config.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import path from "path"
|
||||||
|
import react from "@vitejs/plugin-react"
|
||||||
|
import { defineConfig } from "vite"
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user