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