laxmanhalaki/Re_Figma_Code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: laxmanhalaki:fdbc8dcfa1111285a663c335e8a7a606a83e618b
Branches Tags
laxmanhalaki:main
laxmanhalaki:custom_production
laxmanhalaki:dealer_claim
laxmanhalaki:custom_uat
laxmanhalaki:claim_management
laxmanhalaki:dev_branch
..
compare: laxmanhalaki:66c33703e1afb7d0a14ec7a608c82689cd8f7c7a
Branches Tags
laxmanhalaki:main
laxmanhalaki:custom_production
laxmanhalaki:dealer_claim
laxmanhalaki:custom_uat
laxmanhalaki:claim_management
laxmanhalaki:dev_branch

No commits in common. "fdbc8dcfa1111285a663c335e8a7a606a83e618b" and "66c33703e1afb7d0a14ec7a608c82689cd8f7c7a" have entirely different histories.
fdbc8dcfa1 ... 66c33703e1

23 changed files with 535 additions and 2160 deletions
Show Stats Expand all files Collapse all files

335
src/App.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-dom';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/layout/PageLayout';
import { Dashboard } from '@/pages/Dashboard';
import { OpenRequests } from '@/pages/OpenRequests';
@ -21,9 +21,6 @@ import { Settings } from '@/pages/Settings';
import { Notifications } from '@/pages/Notifications';
import { DetailedReports } from '@/pages/DetailedReports';
import { Admin } from '@/pages/Admin';
import { AdminTemplatesList } from '@/pages/Admin/Templates/AdminTemplatesList';
import { CreateTemplate } from '@/pages/Admin/Templates/CreateTemplate';
import { CreateAdminRequest } from '@/pages/CreateAdminRequest/CreateAdminRequest';
import { ApprovalActionModal } from '@/components/modals/ApprovalActionModal';
import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
@ -43,7 +40,7 @@ interface AppProps {
function RequestsRoute({ onViewRequest }: { onViewRequest: (requestId: string) => void }) {
const { user } = useAuth();
const isAdmin = hasManagementAccess(user);
// Render separate screens based on user role
// Admin/Management users see all organization requests
// Regular users see only their participant requests (approver/spectator, NOT initiator)
@ -155,7 +152,7 @@ function AppRoutes({ onLogout }: AppProps) {
const handleViewRequest = (requestId: string, requestTitle?: string, status?: string, request?: any) => {
setSelectedRequestId(requestId);
setSelectedRequestTitle(requestTitle || 'Unknown Request');
// Use global navigation utility for consistent routing
navigateToRequest({
requestId,
@ -183,18 +180,18 @@ function AppRoutes({ onLogout }: AppProps) {
}
return;
}
// If requestData has backendId, it means it came from the API flow (CreateRequest component)
// The hook already shows the toast, so we just navigate
if (requestData.backendId) {
navigate('/my-requests');
return;
}
// Regular custom request submission (old flow without API)
// Generate unique ID for the new custom request
const requestId = `RE-REQ-2024-${String(Object.keys(CUSTOM_REQUEST_DATABASE).length + dynamicRequests.length + 1).padStart(3, '0')}`;
// Create full custom request object
const newCustomRequest = {
id: requestId,
@ -222,21 +219,21 @@ function AppRoutes({ onLogout }: AppProps) {
avatar: 'CU'
},
department: requestData.department || 'General',
createdAt: new Date().toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
createdAt: new Date().toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
hour12: true
}),
updatedAt: new Date().toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
updatedAt: new Date().toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
hour12: true
}),
dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
submittedDate: new Date().toISOString(),
@ -246,7 +243,7 @@ function AppRoutes({ onLogout }: AppProps) {
// Extract name from email if name is not available
const approverName = approver?.name || approver?.email?.split('@')[0] || `Approver ${index + 1}`;
const approverEmail = approver?.email || '';
return {
step: index + 1,
approver: `${approverName}${approverEmail ? ` (${approverEmail})` : ''}`,
@ -271,28 +268,32 @@ function AppRoutes({ onLogout }: AppProps) {
};
}),
auditTrail: [
{
type: 'created',
action: 'Request Created',
details: `Custom request "${requestData.title}" created`,
user: 'Current User',
{
type: 'created',
action: 'Request Created',
details: `Custom request "${requestData.title}" created`,
user: 'Current User',
timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
},
{
type: 'assignment',
action: 'Assigned to Approver',
details: `Request assigned to ${requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email || 'first approver'}`,
user: 'System',
{
type: 'assignment',
action: 'Assigned to Approver',
details: `Request assigned to ${requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email || 'first approver'}`,
user: 'System',
timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
}
],
tags: requestData.tags || ['custom-request']
};
// Add to dynamic requests
setDynamicRequests([...dynamicRequests, newCustomRequest]);
navigate('/my-requests');
toast.success('Request Submitted Successfully!', {
description: `Your request "${requestData.title}" (${requestId}) has been created and sent for approval.`,
duration: 5000,
});
};
const handleApprovalSubmit = (action: 'approve' | 'reject', _comment: string) => {
@ -309,7 +310,7 @@ function AppRoutes({ onLogout }: AppProps) {
duration: 5000,
});
}
setApprovalAction(null);
resolve(true);
}, 1000);
@ -342,7 +343,7 @@ function AppRoutes({ onLogout }: AppProps) {
// Call API to create claim request
const response = await createClaimRequest(payload);
// Validate response - ensure request was actually created successfully
if (!response || !response.request) {
throw new Error('Invalid response from server: Request object not found');
@ -376,11 +377,11 @@ function AppRoutes({ onLogout }: AppProps) {
}
} catch (error: any) {
console.error('[App] Error creating claim request:', error);
// Check for manager-related errors
const errorData = error?.response?.data;
const errorCode = errorData?.code || errorData?.error?.code;
if (errorCode === 'NO_MANAGER_FOUND') {
// Show modal for no manager found
setManagerModalData({
@ -391,7 +392,7 @@ function AppRoutes({ onLogout }: AppProps) {
setManagerModalOpen(true);
return;
}
if (errorCode === 'MULTIPLE_MANAGERS_FOUND') {
// Show modal with manager list for selection
const managers = errorData?.managers || errorData?.error?.managers || [];
@ -404,20 +405,20 @@ function AppRoutes({ onLogout }: AppProps) {
setManagerModalOpen(true);
return;
}
// Other errors - show toast
const errorMessage = error?.response?.data?.message || error?.message || 'Failed to create claim request';
toast.error('Failed to Submit Claim Request', {
description: errorMessage,
});
}
// Keep the old code below for backward compatibility (local storage fallback)
// This can be removed once API integration is fully tested
/*
// Generate unique ID for the new claim request
const requestId = `RE-REQ-2024-CM-${String(dynamicRequests.length + 2).padStart(3, '0')}`;
// Create full request object
const newRequest = {
id: requestId,
@ -444,21 +445,21 @@ function AppRoutes({ onLogout }: AppProps) {
avatar: 'CU'
},
department: 'Marketing',
createdAt: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
createdAt: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
hour12: true
}),
updatedAt: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
updatedAt: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
hour12: true
}),
dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
conclusionRemark: '',
@ -578,30 +579,30 @@ function AppRoutes({ onLogout }: AppProps) {
documents: [],
spectators: [],
auditTrail: [
{
type: 'created',
action: 'Request Created',
details: `Claim request for ${claimData.activityName} created`,
user: 'Current User',
timestamp: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
{
type: 'created',
action: 'Request Created',
details: `Claim request for ${claimData.activityName} created`,
user: 'Current User',
timestamp: new Date().toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true
hour12: true
})
}
],
tags: ['claim-management', 'new-request', claimData.activityType?.toLowerCase().replace(/\s+/g, '-')]
};
// Add to dynamic requests
setDynamicRequests(prev => [...prev, newRequest]);
// Also add to REQUEST_DATABASE for immediate viewing
(REQUEST_DATABASE as any)[requestId] = newRequest;
toast.success('Claim Request Submitted', {
description: 'Your claim management request has been created successfully.',
});
@ -613,194 +614,134 @@ function AppRoutes({ onLogout }: AppProps) {
<div className="min-h-screen h-screen flex flex-col overflow-hidden bg-background">
<Routes>
{/* Auth Callback - Unified callback for both OKTA and Tanflow */}
<Route
path="/login/callback"
element={<AuthCallback />}
<Route
path="/login/callback"
element={<AuthCallback />}
/>
{/* Dashboard - Conditionally renders DealerDashboard or regular Dashboard */}
<Route
path="/"
<Route
path="/"
element={
<PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
</PageLayout>
}
}
/>
<Route
path="/dashboard"
<Route
path="/dashboard"
element={
<PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
</PageLayout>
}
/>
{/* Admin Routes Group with Shared Layout */}
<Route
element={
<PageLayout currentPage="admin-templates" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Outlet />
</PageLayout>
}
>
<Route path="/admin/create-template" element={<CreateTemplate />} />
<Route path="/admin/edit-template/:templateId" element={<CreateTemplate />} />
<Route path="/admin/templates" element={<AdminTemplatesList />} />
</Route>
{/* Create Request from Admin Template (Dedicated Flow) */}
<Route
path="/create-admin-request/:templateId"
element={
<CreateAdminRequest />
}
/>
<Route
path="/admin"
element={
<PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Admin />
</PageLayout>
}
/>
{/* Admin Routes Group with Shared Layout */}
<Route
element={
<PageLayout currentPage="admin-templates" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Outlet />
</PageLayout>
}
>
<Route path="/admin/create-template" element={<CreateTemplate />} />
<Route path="/admin/edit-template/:templateId" element={<CreateTemplate />} />
<Route path="/admin/templates" element={<AdminTemplatesList />} />
</Route>
{/* Create Request from Admin Template (Dedicated Flow) */}
<Route
path="/create-admin-request/:templateId"
element={
<CreateAdminRequest />
}
/>
<Route
path="/admin"
element={
<PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Admin />
</PageLayout>
}
}
/>
{/* Open Requests */}
<Route
path="/open-requests"
<Route
path="/open-requests"
element={
<PageLayout currentPage="open-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<OpenRequests onViewRequest={handleViewRequest} />
</PageLayout>
}
}
/>
{/* Closed Requests */}
<Route
path="/closed-requests"
<Route
path="/closed-requests"
element={
<PageLayout currentPage="closed-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<ClosedRequests onViewRequest={handleViewRequest} />
</PageLayout>
}
}
/>
{/* Shared Summaries */}
<Route
path="/shared-summaries"
<Route
path="/shared-summaries"
element={
<PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<SharedSummaries />
</PageLayout>
}
}
/>
{/* Shared Summary Detail */}
<Route
path="/shared-summaries/:sharedSummaryId"
<Route
path="/shared-summaries/:sharedSummaryId"
element={
<PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<SharedSummaryDetail />
</PageLayout>
}
}
/>
{/* My Requests */}
<Route
path="/my-requests"
<Route
path="/my-requests"
element={
<PageLayout currentPage="my-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<MyRequests onViewRequest={handleViewRequest} dynamicRequests={dynamicRequests} />
</PageLayout>
}
}
/>
{/* Requests - Separate screens for Admin and Regular Users */}
<Route
path="/requests"
<Route
path="/requests"
element={
<PageLayout currentPage="requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<RequestsRoute onViewRequest={handleViewRequest} />
</PageLayout>
}
}
/>
{/* Approver Performance - Detailed Performance Analysis */}
<Route
path="/approver-performance"
<Route
path="/approver-performance"
element={
<PageLayout currentPage="approver-performance" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<ApproverPerformance />
</PageLayout>
}
}
/>
{/* Request Detail - requestId will be read from URL params */}
<Route
path="/request/:requestId"
<Route
path="/request/:requestId"
element={
<PageLayout currentPage="request-detail" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<RequestDetail
requestId=""
<RequestDetail
requestId=""
onBack={handleBack}
dynamicRequests={dynamicRequests}
/>
</PageLayout>
}
}
/>
{/* Work Notes - Dedicated Full-Screen Page */}
<Route
path="/work-notes/:requestId"
element={<WorkNotes />}
<Route
path="/work-notes/:requestId"
element={<WorkNotes />}
/>
{/* New Request (Custom) */}
<Route
path="/new-request"
<Route
path="/new-request"
element={
<CreateRequest
onBack={handleBack}
onSubmit={handleNewRequestSubmit}
/>
}
}
/>
{/* Edit Draft Request */}
<Route
path="/edit-request/:requestId"
<Route
path="/edit-request/:requestId"
element={
<CreateRequest
onBack={handleBack}
@ -808,66 +749,72 @@ function AppRoutes({ onLogout }: AppProps) {
requestId={undefined} // Will be read from URL params
isEditMode={true}
/>
}
}
/>
{/* Claim Management Wizard */}
<Route
path="/claim-management"
<Route
path="/claim-management"
element={
<ClaimManagementWizard
onBack={handleBack}
onSubmit={handleClaimManagementSubmit}
/>
}
}
/>
{/* Profile */}
<Route
path="/profile"
<Route
path="/profile"
element={
<PageLayout currentPage="profile" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Profile />
</PageLayout>
}
}
/>
{/* Settings */}
<Route
path="/settings"
<Route
path="/settings"
element={
<PageLayout currentPage="settings" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Settings />
</PageLayout>
}
}
/>
{/* Notifications */}
<Route
path="/notifications"
<Route
path="/notifications"
element={
<PageLayout currentPage="notifications" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Notifications onNavigate={handleNavigate} />
</PageLayout>
}
}
/>
{/* Detailed Reports */}
<Route
path="/detailed-reports"
<Route
path="/detailed-reports"
element={
<PageLayout currentPage="detailed-reports" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<DetailedReports />
</PageLayout>
}
}
/>
{/* Admin Control Panel */}
<Route
path="/admin"
element={
<PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
<Admin />
</PageLayout>
}
/>
</Routes>
<Toaster
<Toaster
position="top-right"
toastOptions={{
style: {
@ -921,7 +868,7 @@ interface MainAppProps {
export default function App(props?: MainAppProps) {
const { onLogout } = props || {};
return (
<BrowserRouter>
<AppRoutes onLogout={onLogout} />

77
src/components/layout/PageLayout/PageLayout.tsx
View File

@ -36,7 +36,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
const [unreadCount, setUnreadCount] = useState(0);
const [notificationsOpen, setNotificationsOpen] = useState(false);
const { user } = useAuth();
// Check if user is a Dealer
const isDealer = useMemo(() => {
try {
@ -47,7 +47,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
return false;
}
}, []);
// Get user initials for avatar
const getUserInitials = () => {
try {
@ -67,20 +67,19 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
return 'U';
}
};
const menuItems = useMemo(() => {
const items = [
{ id: 'dashboard', label: 'Dashboard', icon: Home },
// Add "All Requests" for all users (admin sees org-level, regular users see their participant requests)
{ id: 'requests', label: 'All Requests', icon: List },
{ id: 'admin/templates', label: 'Admin Templates', icon: Plus, adminOnly: true },
];
// Add remaining menu items (exclude "My Requests" for dealers)
if (!isDealer) {
items.push({ id: 'my-requests', label: 'My Requests', icon: User });
}
items.push(
{ id: 'open-requests', label: 'Open Requests', icon: FileText },
{ id: 'closed-requests', label: 'Closed Requests', icon: CheckCircle },
@ -99,7 +98,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
// Mark as read
if (!notification.isRead) {
await notificationApi.markAsRead(notification.notificationId);
setNotifications(prev =>
setNotifications(prev =>
prev.map(n => n.notificationId === notification.notificationId ? { ...n, isRead: true } : n)
);
setUnreadCount(prev => Math.max(0, prev - 1));
@ -112,14 +111,14 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
if (requestNumber) {
// Determine which tab to open based on notification type
let navigationUrl = `request/${requestNumber}`;
// Work note related notifications should open Work Notes tab
if (notification.notificationType === 'mention' ||
notification.notificationType === 'comment' ||
notification.notificationType === 'worknote') {
if (notification.notificationType === 'mention' ||
notification.notificationType === 'comment' ||
notification.notificationType === 'worknote') {
navigationUrl += '?tab=worknotes';
}
// Navigate to request detail page
onNavigate(navigationUrl);
}
@ -153,7 +152,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
try {
const result = await notificationApi.list({ page: 1, limit: 4, unreadOnly: false });
if (!mounted) return;
const notifs = result.data?.notifications || [];
setNotifications(notifs);
setUnreadCount(result.data?.unreadCount || 0);
@ -174,7 +173,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
// Listen for new notifications
const handleNewNotification = (data: { notification: Notification }) => {
if (!mounted) return;
setNotifications(prev => [data.notification, ...prev].slice(0, 4)); // Keep latest 4 for dropdown
setUnreadCount(prev => prev + 1);
};
@ -215,7 +214,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
<div className="min-h-screen flex w-full bg-background">
{/* Mobile Overlay */}
{sidebarOpen && (
<div
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setSidebarOpen(false)}
/>
@ -239,9 +238,9 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
<div className={`w-64 h-full flex flex-col overflow-hidden ${!sidebarOpen ? 'md:hidden' : ''}`}>
<div className="p-4 border-b border-gray-800 flex-shrink-0">
<div className="flex flex-col items-center justify-center">
<img
src={ReLogo}
alt="Royal Enfield Logo"
<img
src={ReLogo}
alt="Royal Enfield Logo"
className="h-10 w-auto max-w-[168px] object-contain"
/>
<p className="text-xs text-gray-400 text-center mt-1 truncate">RE Flow</p>
@ -249,31 +248,28 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
</div>
<div className="p-3 flex-1 overflow-y-auto">
<div className="space-y-2">
{menuItems.filter(item => !item.adminOnly || (user as any)?.role === 'ADMIN').map((item) => (
{menuItems.map((item) => (
<button
key={item.id}
onClick={() => {
if (item.id === 'admin/templates') {
onNavigate?.('admin/templates');
} else {
onNavigate?.(item.id);
}
onNavigate?.(item.id);
// Close sidebar on mobile after navigation
if (window.innerWidth < 768) {
setSidebarOpen(false);
}
}}
className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${currentPage === item.id
? 'bg-re-green text-white font-medium'
: 'text-gray-300 hover:bg-gray-900 hover:text-white'
}`}
className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
currentPage === item.id
? 'bg-re-green text-white font-medium'
: 'text-gray-300 hover:bg-gray-900 hover:text-white'
}`}
>
<item.icon className="w-4 h-4 shrink-0" />
<span className="truncate">{item.label}</span>
</button>
))}
</div>
{/* Quick Action in Sidebar - Right below menu items */}
{!isDealer && (
<div className="mt-6 pt-6 border-t border-gray-800 px-3">
@ -296,14 +292,14 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
{/* Header */}
<header className="h-16 border-b border-gray-200 bg-white flex items-center justify-between px-6 shrink-0">
<div className="flex items-center gap-4 min-w-0 flex-1">
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
className="shrink-0 h-10 w-10 sidebar-toggle"
>
{sidebarOpen ? <PanelLeftClose className="w-5 h-5 text-gray-600" /> : <PanelLeft className="w-5 h-5 text-gray-600" />}
</Button>
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
className="shrink-0 h-10 w-10 sidebar-toggle"
>
{sidebarOpen ? <PanelLeftClose className="w-5 h-5 text-gray-600" /> : <PanelLeft className="w-5 h-5 text-gray-600" />}
</Button>
{/* Search bar commented out */}
{/* <div className="relative max-w-md flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@ -365,8 +361,9 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
{notifications.map((notif) => (
<div
key={notif.notificationId}
className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${!notif.isRead ? 'bg-blue-50' : ''
}`}
className={`p-3 hover:bg-gray-50 cursor-pointer transition-colors ${
!notif.isRead ? 'bg-blue-50' : ''
}`}
onClick={() => handleNotificationClick(notif)}
>
<div className="flex gap-2">
@ -425,8 +422,8 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
<Settings className="w-4 h-4 mr-2" />
Settings
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setShowLogoutDialog(true)}
<DropdownMenuItem
onClick={() => setShowLogoutDialog(true)}
className="text-red-600 focus:text-red-600"
>
<LogOut className="w-4 h-4 mr-2" />

325
src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
View File

@ -1,19 +1,14 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Check, Clock, Users, Flame, Target, TrendingUp, FolderOpen, ArrowLeft, Info } from 'lucide-react';
import { Check, Clock, Users, Flame, Target, TrendingUp } from 'lucide-react';
import { RequestTemplate } from '@/hooks/useCreateRequestForm';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
interface TemplateSelectionStepProps {
templates: RequestTemplate[];
selectedTemplate: RequestTemplate | null;
onSelectTemplate: (template: RequestTemplate) => void;
adminTemplates?: RequestTemplate[];
}
const getPriorityIcon = (priority: string) => {
@ -25,48 +20,21 @@ const getPriorityIcon = (priority: string) => {
}
};
/**
* Component: TemplateSelectionStep
*
* Purpose: Step 1 - Template selection for request creation
*
* Features:
* - Displays available templates
* - Shows template details when selected
* - Test IDs for testing
*/
export function TemplateSelectionStep({
templates,
selectedTemplate,
onSelectTemplate,
adminTemplates = []
onSelectTemplate
}: TemplateSelectionStepProps) {
const [viewMode, setViewMode] = useState<'main' | 'admin'>('main');
const navigate = useNavigate();
const handleTemplateClick = (template: RequestTemplate) => {
if (template.id === 'admin-templates-category') {
setViewMode('admin');
} else {
if (viewMode === 'admin') {
// If selecting an actual admin template, redirect to dedicated flow
navigate(`/create-admin-request/${template.id}`);
} else {
// Default behavior for standard templates
onSelectTemplate(template);
}
}
};
const displayTemplates = viewMode === 'main'
? [
...templates,
{
id: 'admin-templates-category',
name: 'Admin Templates',
description: 'Browse standardized request workflows created by your organization administrators',
category: 'Organization',
icon: FolderOpen,
estimatedTime: 'Variable',
commonApprovers: [],
suggestedSLA: 0,
priority: 'medium',
fields: {}
} as any
]
: adminTemplates;
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
@ -78,216 +46,101 @@ export function TemplateSelectionStep({
{/* Header Section */}
<div className="text-center mb-12 max-w-3xl" data-testid="template-selection-header">
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4" data-testid="template-selection-title">
{viewMode === 'main' ? 'Choose Your Request Type' : 'Organization Templates'}
Choose Your Request Type
</h1>
<p className="text-lg text-gray-600" data-testid="template-selection-description">
{viewMode === 'main'
? 'Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.'
: 'Select a pre-configured workflow template defined by your organization.'}
Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
</p>
</div>
{viewMode === 'admin' && (
<div className="w-full max-w-6xl mb-6 flex justify-start">
<Button variant="ghost" className="gap-2" onClick={() => setViewMode('main')}>
<ArrowLeft className="w-4 h-4" />
Back to All Types
</Button>
</div>
)}
{/* Template Cards Grid */}
<div
<div
className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
data-testid="template-selection-grid"
>
{displayTemplates.length === 0 && viewMode === 'admin' ? (
<div className="col-span-full text-center py-12 text-gray-500 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
<FolderOpen className="w-12 h-12 mx-auto mb-3 text-gray-300" />
<p>No admin templates available yet.</p>
</div>
) : (
displayTemplates.map((template) => {
const isComingSoon = template.id === 'existing-template' && viewMode === 'main'; // Only show coming soon for placeholder
const isDisabled = isComingSoon;
const isCategoryCard = template.id === 'admin-templates-category';
// const isCustomCard = template.id === 'custom';
const isSelected = selectedTemplate?.id === template.id;
return (
<motion.div
key={template.id}
whileHover={!isDisabled ? { scale: 1.03 } : {}}
whileTap={!isDisabled ? { scale: 0.98 } : {}}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
data-testid={`template-card-${template.id}`}
>
<Card
className={`h-full transition-all duration-300 border-2 ${isDisabled
? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
: isSelected
? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
: isCategoryCard
? 'border-blue-200 bg-blue-50/30 hover:border-blue-400 hover:shadow-lg cursor-pointer'
: 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
}`}
onClick={!isDisabled ? () => handleTemplateClick(template) : undefined}
data-testid={`template-card-${template.id}-clickable`}
>
<CardHeader className="space-y-4 pb-4">
<div className="flex items-start justify-between">
<div
className={`w-14 h-14 rounded-xl flex items-center justify-center ${isSelected
? 'bg-blue-100'
: isCategoryCard
? 'bg-blue-100'
: 'bg-gray-100'
}`}
data-testid={`template-card-${template.id}-icon`}
>
<template.icon
className={`w-7 h-7 ${isSelected
? 'text-blue-600'
: isCategoryCard
? 'text-blue-600'
: 'text-gray-600'
}`}
/>
</div>
{isSelected && (
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 500, damping: 15 }}
data-testid={`template-card-${template.id}-selected-indicator`}
>
<div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
<Check className="w-5 h-5 text-white" />
</div>
</motion.div>
)}
</div>
<div className="text-left">
<div className="flex items-start justify-between gap-2 mb-2">
<CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
{template.name}
</CardTitle>
{isComingSoon && (
<Badge
variant="outline"
className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
data-testid={`template-card-${template.id}-coming-soon-badge`}
>
Coming Soon
</Badge>
)}
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
{template.category}
</Badge>
{getPriorityIcon(template.priority)}
</div>
</div>
</CardHeader>
<CardContent className="pt-0 space-y-4">
<p
className="text-sm text-gray-600 leading-relaxed line-clamp-2"
data-testid={`template-card-${template.id}-description`}
>
{template.description}
</p>
{!isCategoryCard && (
<>
<Separator />
<div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
<div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-estimated-time`}>
<Clock className="w-3.5 h-3.5" />
<span>{template.estimatedTime}</span>
</div>
<div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-approvers-count`}>
<Users className="w-3.5 h-3.5" />
<span>{template.commonApprovers?.length || 0} approvers</span>
</div>
</div>
</>
)}
{isCategoryCard && (
<div className="pt-2">
<p className="text-xs text-blue-600 font-medium flex items-center gap-1">
Click to browse templates &rarr;
</p>
</div>
)}
</CardContent>
</Card>
</motion.div>
);
})
)}
</div>
{/* Template Details Card */}
<AnimatePresence>
{selectedTemplate && (
{templates.map((template) => (
<motion.div
initial={{ opacity: 0, y: 20, height: 0 }}
animate={{ opacity: 1, y: 0, height: 'auto' }}
exit={{ opacity: 0, y: -20, height: 0 }}
transition={{ duration: 0.3 }}
className="w-full max-w-6xl"
data-testid="template-details-card"
key={template.id}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
data-testid={`template-card-${template.id}`}
>
<Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-900" data-testid="template-details-title">
<Info className="w-5 h-5" />
{selectedTemplate.name} - Template Details
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-sla">
<Label className="text-blue-900 font-semibold">Suggested SLA</Label>
<p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} hours</p>
<Card
className={`cursor-pointer h-full transition-all duration-300 border-2 ${
selectedTemplate?.id === template.id
? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
: 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
}`}
onClick={() => onSelectTemplate(template)}
data-testid={`template-card-${template.id}-clickable`}
>
<CardHeader className="space-y-4 pb-4">
<div className="flex items-start justify-between">
<div
className={`w-14 h-14 rounded-xl flex items-center justify-center ${
selectedTemplate?.id === template.id
? 'bg-blue-100'
: 'bg-gray-100'
}`}
data-testid={`template-card-${template.id}-icon`}
>
<template.icon
className={`w-7 h-7 ${
selectedTemplate?.id === template.id
? 'text-blue-600'
: 'text-gray-600'
}`}
/>
</div>
<div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-priority">
<Label className="text-blue-900 font-semibold">Priority Level</Label>
<div className="flex items-center gap-1 mt-1">
{getPriorityIcon(selectedTemplate.priority)}
<span className="text-blue-700 capitalize">{selectedTemplate.priority}</span>
</div>
</div>
<div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-duration">
<Label className="text-blue-900 font-semibold">Estimated Duration</Label>
<p className="text-blue-700 mt-1">{selectedTemplate.estimatedTime}</p>
{selectedTemplate?.id === template.id && (
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 500, damping: 15 }}
data-testid={`template-card-${template.id}-selected-indicator`}
>
<div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
<Check className="w-5 h-5 text-white" />
</div>
</motion.div>
)}
</div>
<div className="text-left">
<CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
{template.name}
</CardTitle>
<div className="flex items-center gap-2">
<Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
{template.category}
</Badge>
{getPriorityIcon(template.priority)}
</div>
</div>
<div className="bg-white/60 p-3 rounded-lg" data-testid="template-details-approvers">
<Label className="text-blue-900 font-semibold">Approvers</Label>
<div className="flex flex-wrap gap-2 mt-2">
{selectedTemplate.commonApprovers?.length > 0 ? (
selectedTemplate.commonApprovers.map((approver, index) => (
<Badge
key={`${selectedTemplate.id}-approver-${index}-${approver}`}
variant="outline"
className="border-blue-300 text-blue-700 bg-white"
data-testid={`template-details-approver-${index}`}
>
{approver}
</Badge>
))
) : (
<span className="text-sm text-gray-500 italic">No specific approvers defined</span>
)}
</CardHeader>
<CardContent className="pt-0 space-y-4">
<p
className="text-sm text-gray-600 leading-relaxed line-clamp-2"
data-testid={`template-card-${template.id}-description`}
>
{template.description}
</p>
<Separator />
<div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
<div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-estimated-time`}>
<Clock className="w-3.5 h-3.5" />
<span>{template.estimatedTime}</span>
</div>
<div className="flex items-center gap-1.5" data-testid={`template-card-${template.id}-approvers-count`}>
<Users className="w-3.5 h-3.5" />
<span>{template.commonApprovers.length} approvers</span>
</div>
</div>
</CardContent>
</Card>
</motion.div>
)}
</AnimatePresence>
))}
</div>
</motion.div>
);
}

50
src/components/workflow/CreateRequest/WizardStepper.tsx
View File

@ -19,20 +19,17 @@ interface WizardStepperProps {
export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStepperProps) {
const progressPercentage = Math.round((currentStep / totalSteps) * 100);
// Use a narrower container for fewer steps to avoid excessive spacing
const containerMaxWidth = stepNames.length <= 3 ? 'max-w-xl' : 'max-w-6xl';
return (
<div
<div
className="bg-white border-b border-gray-200 px-3 sm:px-6 py-2 sm:py-3 flex-shrink-0"
data-testid="wizard-stepper"
>
<div className={`${containerMaxWidth} mx-auto`}>
<div className="max-w-6xl mx-auto">
{/* Mobile: Current step indicator only */}
<div className="block sm:hidden" data-testid="wizard-stepper-mobile">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<div
<div
className="w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center text-xs font-semibold"
data-testid="wizard-stepper-mobile-current-step"
>
@ -54,11 +51,11 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
</div>
</div>
{/* Progress bar */}
<div
<div
className="w-full bg-gray-200 h-1.5 rounded-full overflow-hidden"
data-testid="wizard-stepper-mobile-progress-bar"
>
<div
<div
className="bg-green-600 h-full transition-all duration-300"
style={{ width: `${progressPercentage}%` }}
data-testid="wizard-stepper-mobile-progress-fill"
@ -68,16 +65,17 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
{/* Desktop: Full step indicator */}
<div className="hidden sm:block" data-testid="wizard-stepper-desktop">
<div className="flex items-center justify-center gap-4 mb-2" data-testid="wizard-stepper-desktop-steps">
<div className="flex items-center justify-between mb-2" data-testid="wizard-stepper-desktop-steps">
{stepNames.map((_, index) => (
<div key={index} className="flex items-center flex-1 last:flex-none" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0 ${index + 1 < currentStep
? 'bg-green-500 text-white'
: index + 1 === currentStep
? 'bg-green-500 text-white ring-2 ring-green-500/30 ring-offset-1'
<div key={index} className="flex items-center" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
index + 1 < currentStep
? 'bg-green-600 text-white'
: index + 1 === currentStep
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-600'
}`}
}`}
data-testid={`wizard-stepper-desktop-step-${index + 1}-indicator`}
>
{index + 1 < currentStep ? (
@ -87,24 +85,26 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
)}
</div>
{index < stepNames.length - 1 && (
<div
className={`flex-1 h-0.5 mx-2 ${index + 1 < currentStep ? 'bg-green-500' : 'bg-gray-200'
}`}
<div
className={`w-8 md:w-12 lg:w-16 h-1 mx-1 md:mx-2 ${
index + 1 < currentStep ? 'bg-green-600' : 'bg-gray-200'
}`}
data-testid={`wizard-stepper-desktop-step-${index + 1}-connector`}
/>
)}
</div>
))}
</div>
<div
className="hidden lg:flex justify-between text-xs text-gray-600 mt-2 px-1"
<div
className="hidden lg:flex justify-between text-xs text-gray-600 mt-2"
data-testid="wizard-stepper-desktop-labels"
>
{stepNames.map((step, index) => (
<span
key={index}
className={`${index + 1 === currentStep ? 'font-semibold text-green-600' : ''
}`}
<span
key={index}
className={`${
index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
}`}
data-testid={`wizard-stepper-desktop-label-${index + 1}`}
>
{step}

16
src/custom/components/ClosedRequestsFilters.tsx
View File

@ -31,14 +31,14 @@ export function StandardClosedRequestsFilters({
searchTerm,
priorityFilter,
statusFilter,
// templateTypeFilter,
templateTypeFilter,
sortBy,
sortOrder,
activeFiltersCount,
onSearchChange,
onPriorityChange,
onStatusChange,
// onTemplateTypeChange,
onTemplateTypeChange,
onSortByChange,
onSortOrderChange,
onClearFilters,
@ -77,7 +77,7 @@ export function StandardClosedRequestsFilters({
</div>
</CardHeader>
<CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
<Input
@ -88,7 +88,7 @@ export function StandardClosedRequestsFilters({
data-testid="closed-requests-search"
/>
</div>
<Select value={priorityFilter} onValueChange={onPriorityChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-priority-filter">
<SelectValue placeholder="All Priorities" />
@ -109,7 +109,7 @@ export function StandardClosedRequestsFilters({
</SelectItem>
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={onStatusChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-status-filter">
<SelectValue placeholder="Closure Type" />
@ -130,7 +130,7 @@ export function StandardClosedRequestsFilters({
</SelectItem>
</SelectContent>
</Select>
{/*
<Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-template-type-filter">
<SelectValue placeholder="All Templates" />
@ -140,7 +140,7 @@ export function StandardClosedRequestsFilters({
<SelectItem value="CUSTOM">Non-Templatized</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
<div className="flex gap-2">
<Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
@ -153,7 +153,7 @@ export function StandardClosedRequestsFilters({
<SelectItem value="priority">Priority</SelectItem>
</SelectContent>
</Select>
<Button
variant="outline"
size="sm"

16
src/custom/components/RequestsFilters.tsx
View File

@ -31,13 +31,13 @@ export function StandardRequestsFilters({
searchTerm,
statusFilter,
priorityFilter,
// templateTypeFilter,
templateTypeFilter,
sortBy,
sortOrder,
onSearchChange,
onStatusFilterChange,
onPriorityFilterChange,
// onTemplateTypeFilterChange,
onTemplateTypeFilterChange,
onSortByChange,
onSortOrderChange,
onClearFilters,
@ -77,7 +77,7 @@ export function StandardRequestsFilters({
</CardHeader>
<CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
{/* Standard filters - Search, Status, Priority, Template Type, and Sort */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
<Input
@ -87,7 +87,7 @@ export function StandardRequestsFilters({
className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
/>
</div>
<Select value={priorityFilter} onValueChange={onPriorityFilterChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
<SelectValue placeholder="All Priorities" />
@ -108,7 +108,7 @@ export function StandardRequestsFilters({
</SelectItem>
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={onStatusFilterChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
<SelectValue placeholder="All Statuses" />
@ -120,7 +120,7 @@ export function StandardRequestsFilters({
</SelectContent>
</Select>
{/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
<Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
<SelectValue placeholder="All Templates" />
</SelectTrigger>
@ -129,7 +129,7 @@ export function StandardRequestsFilters({
<SelectItem value="CUSTOM">Non-Templatized</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
<div className="flex gap-2">
<Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
@ -143,7 +143,7 @@ export function StandardRequestsFilters({
<SelectItem value="sla">SLA Progress</SelectItem>
</SelectContent>
</Select>
<Button
variant="outline"
size="sm"

20
src/custom/components/UserAllRequestsFilters.tsx
View File

@ -34,11 +34,11 @@ interface StandardUserAllRequestsFiltersProps {
customStartDate?: Date;
customEndDate?: Date;
showCustomDatePicker: boolean;
// Departments
departments: string[];
loadingDepartments: boolean;
// State for user search
initiatorSearch: {
selectedUser: { userId: string; email: string; displayName?: string } | null;
@ -50,7 +50,7 @@ interface StandardUserAllRequestsFiltersProps {
handleClear: () => void;
setShowResults: (show: boolean) => void;
};
approverSearch: {
selectedUser: { userId: string; email: string; displayName?: string } | null;
searchQuery: string;
@ -61,7 +61,7 @@ interface StandardUserAllRequestsFiltersProps {
handleClear: () => void;
setShowResults: (show: boolean) => void;
};
// Actions
onSearchChange: (value: string) => void;
onStatusChange: (value: string) => void;
@ -78,7 +78,7 @@ interface StandardUserAllRequestsFiltersProps {
onShowCustomDatePickerChange?: (show: boolean) => void;
onApplyCustomDate?: () => void;
onClearFilters: () => void;
// Computed
hasActiveFilters: boolean;
}
@ -87,7 +87,7 @@ export function StandardUserAllRequestsFilters({
searchTerm,
statusFilter,
priorityFilter,
// templateTypeFilter,
templateTypeFilter,
departmentFilter,
slaComplianceFilter,
initiatorFilter: _initiatorFilter,
@ -104,7 +104,7 @@ export function StandardUserAllRequestsFilters({
onSearchChange,
onStatusChange,
onPriorityChange,
// onTemplateTypeChange,
onTemplateTypeChange,
onDepartmentChange,
onSlaComplianceChange,
onInitiatorChange: _onInitiatorChange,
@ -143,7 +143,7 @@ export function StandardUserAllRequestsFilters({
<Separator />
{/* Primary Filters */}
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
<div className="relative md:col-span-3 lg:col-span-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
@ -180,7 +180,7 @@ export function StandardUserAllRequestsFilters({
</SelectContent>
</Select>
{/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<SelectTrigger className="h-10" data-testid="template-type-filter">
<SelectValue placeholder="All Templates" />
</SelectTrigger>
@ -189,7 +189,7 @@ export function StandardUserAllRequestsFilters({
<SelectItem value="CUSTOM">Custom</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
<Select
value={departmentFilter}

3
src/hooks/useCreateRequestForm.ts
View File

@ -10,7 +10,6 @@ export interface RequestTemplate {
icon: React.ComponentType<any>;
estimatedTime: string;
commonApprovers: string[];
workflowApprovers?: any[]; // Full approver objects for Admin Templates
suggestedSLA: number;
priority: 'high' | 'medium' | 'low';
fields: {
@ -200,7 +199,7 @@ export function useCreateRequestForm(
const approvals = Array.isArray(details.approvals) ? details.approvals : [];
const participants = Array.isArray(details.participants) ? details.participants : [];
const documents = Array.isArray(details.documents) ? details.documents.filter((d: any) => !d.isDeleted) : [];
// Store existing documents for tracking
setExistingDocuments(documents);

228
src/pages/Admin/Templates/AdminTemplatesList.tsx
View File

@ -1,228 +0,0 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Pencil, Trash2, Search, FileText, AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { getTemplates, deleteTemplate, WorkflowTemplate, getCachedTemplates } from '@/services/workflowTemplateApi';
import { toast } from 'sonner';
export function AdminTemplatesList() {
const navigate = useNavigate();
const [templates, setTemplates] = useState<WorkflowTemplate[]>(() => getCachedTemplates() || []);
// Only show full loading skeleton if we don't have any data yet
const [loading, setLoading] = useState(() => !getCachedTemplates());
const [searchQuery, setSearchQuery] = useState('');
const [deleteId, setDeleteId] = useState<string | null>(null);
const [deleting, setDeleting] = useState(false);
const fetchTemplates = async () => {
try {
// If we didn't have cache, we are already loading.
// If we HAD cache, we don't want to set loading=true (flashing skeletons),
// we just want to update the data in background.
if (templates.length === 0) setLoading(true);
const data = await getTemplates();
setTemplates(data || []);
} catch (error) {
console.error('Failed to fetch templates:', error);
toast.error('Failed to load templates');
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchTemplates();
}, []);
const handleDelete = async () => {
if (!deleteId) return;
try {
setDeleting(true);
await deleteTemplate(deleteId);
toast.success('Template deleted successfully');
setTemplates(prev => prev.filter(t => t.id !== deleteId));
} catch (error) {
console.error('Failed to delete template:', error);
toast.error('Failed to delete template');
} finally {
setDeleting(false);
setDeleteId(null);
}
};
const filteredTemplates = templates.filter(template =>
template.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
template.category.toLowerCase().includes(searchQuery.toLowerCase())
);
const getPriorityColor = (priority: string) => {
switch (priority.toLowerCase()) {
case 'high': return 'bg-red-100 text-red-700 border-red-200';
case 'medium': return 'bg-orange-100 text-orange-700 border-orange-200';
case 'low': return 'bg-green-100 text-green-700 border-green-200';
default: return 'bg-gray-100 text-gray-700 border-gray-200';
}
};
return (
<div className="max-w-7xl mx-auto space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-gray-900">Admin Templates</h1>
<p className="text-gray-500">Manage workflow templates for your organization</p>
</div>
<Button
onClick={() => navigate('/admin/create-template')}
className="bg-re-green hover:bg-re-green/90"
>
<Plus className="w-4 h-4 mr-2" />
Create New Template
</Button>
</div>
<div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
placeholder="Search templates..."
className="pl-10 border-gray-200"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div>
{loading ? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[1, 2, 3].map(i => (
<Card key={i} className="h-48">
<CardHeader>
<Skeleton className="h-6 w-3/4 mb-2" />
<Skeleton className="h-4 w-1/2" />
</CardHeader>
<CardContent>
<Skeleton className="h-4 w-full mb-2" />
<Skeleton className="h-4 w-2/3" />
</CardContent>
</Card>
))}
</div>
) : filteredTemplates.length === 0 ? (
<div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
<div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
<FileText className="w-8 h-8 text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">No templates found</h3>
<p className="text-gray-500 max-w-sm mx-auto mb-6">
{searchQuery ? 'Try adjusting your search terms' : 'Get started by creating your first workflow template'}
</p>
{!searchQuery && (
<Button onClick={() => navigate('/admin/create-template')} variant="outline">
Create Template
</Button>
)}
</div>
) : (
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{filteredTemplates.map((template) => (
<Card key={template.id} className="hover:shadow-md transition-shadow duration-200 group">
<CardHeader className="pb-3">
<div className="flex justify-between items-start gap-2">
<div className="p-2 bg-blue-50 rounded-lg text-blue-600 mb-2 w-fit">
<FileText className="w-5 h-5" />
</div>
<Badge variant="outline" className={getPriorityColor(template.priority)}>
{template.priority}
</Badge>
</div>
<CardTitle className="line-clamp-1 text-lg">{template.name}</CardTitle>
<CardDescription className="line-clamp-2 h-10">
{template.description}
</CardDescription>
</CardHeader>
<CardContent>
<div className="text-sm text-gray-500 mb-4 space-y-1">
<div className="flex justify-between">
<span>Category:</span>
<span className="font-medium text-gray-900">{template.category}</span>
</div>
<div className="flex justify-between">
<span>SLA:</span>
<span className="font-medium text-gray-900">{template.suggestedSLA} hours</span>
</div>
<div className="flex justify-between">
<span>Approvers:</span>
<span className="font-medium text-gray-900">{template.approvers?.length || 0} levels</span>
</div>
</div>
<div className="flex gap-2 pt-2 border-t mt-2">
<Button
variant="outline"
className="flex-1 text-blue-600 hover:text-blue-700 hover:bg-blue-50 border-blue-100"
onClick={() => navigate(`/admin/edit-template/${template.id}`)}
>
<Pencil className="w-4 h-4 mr-2" />
Edit
</Button>
<Button
variant="outline"
className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50 border-red-100"
onClick={() => setDeleteId(template.id)}
>
<Trash2 className="w-4 h-4 mr-2" />
Delete
</Button>
</div>
</CardContent>
</Card>
))}
</div>
)}
<AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="flex items-center gap-2">
<AlertTriangle className="w-5 h-5 text-red-600" />
Delete Template
</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete this template? This action cannot be undone.
Active requests using this template will not be affected.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault();
handleDelete();
}}
className="bg-red-600 hover:bg-red-700"
disabled={deleting}
>
{deleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}

503
src/pages/Admin/Templates/CreateTemplate.tsx
View File

@ -1,503 +0,0 @@
import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { X, Save, ArrowLeft, Loader2, Clock } from 'lucide-react';
import { useUserSearch } from '@/hooks/useUserSearch';
import { createTemplate, updateTemplate, getTemplates, WorkflowTemplate } from '@/services/workflowTemplateApi';
import { toast } from 'sonner';
export function CreateTemplate() {
const navigate = useNavigate();
const { templateId } = useParams<{ templateId: string }>();
const isEditing = !!templateId;
const [loading, setLoading] = useState(false);
const [fetching, setFetching] = useState(false);
const { searchResults, searchLoading, searchUsersDebounced, clearSearch } = useUserSearch();
const [approverSearchInput, setApproverSearchInput] = useState('');
const [formData, setFormData] = useState({
name: '',
description: '',
category: 'General',
priority: 'medium' as 'low' | 'medium' | 'high',
estimatedTime: '2 days',
suggestedSLA: 24,
approvers: [] as any[]
});
useEffect(() => {
if (isEditing && templateId) {
const fetchTemplate = async () => {
try {
setFetching(true);
const templates = await getTemplates();
const template = templates.find((t: WorkflowTemplate) => t.id === templateId);
if (template) {
setFormData({
name: template.name,
description: template.description,
category: template.category,
priority: template.priority,
estimatedTime: template.estimatedTime,
suggestedSLA: template.suggestedSLA,
approvers: template.approvers || []
});
} else {
toast.error('Template not found');
navigate('/admin/templates');
}
} catch (error) {
console.error('Failed to load template:', error);
toast.error('Failed to load template details');
} finally {
setFetching(false);
}
};
fetchTemplate();
}
}, [isEditing, templateId, navigate]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSelectChange = (name: string, value: string) => {
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleApproverSearch = (val: string) => {
setApproverSearchInput(val);
// Only trigger search if specifically starting with '@'
// This prevents triggering on email addresses like "user@example.com"
if (val.startsWith('@')) {
const query = val.slice(1);
// Search if we have at least 1 character after @
// This allows searching for "L" in "@L"
if (query.length >= 1) {
// Pass the full query starting with @, as useUserSearch expects it
searchUsersDebounced(val, 5);
return;
}
}
// If no @ at start or query too short, clear results
clearSearch();
};
// ... (rest of the component)
// In the return JSX:
<div className="flex gap-2">
<Input
placeholder="Type '@' to search user by name or email..."
value={approverSearchInput}
onChange={(e) => handleApproverSearch(e.target.value)}
className="border-gray-200"
/>
</div>
const addApprover = (user: any) => {
if (formData.approvers.some(a => a.userId === user.userId)) {
toast.error('Approver already added');
return;
}
setFormData(prev => ({
...prev,
approvers: [...prev.approvers, {
userId: user.userId,
name: user.displayName || user.email,
email: user.email,
level: prev.approvers.length + 1,
tat: 24, // Default TAT in hours
tatType: 'hours' // Default unit
}]
}));
setApproverSearchInput('');
clearSearch();
};
const removeApprover = (index: number) => {
const newApprovers = [...formData.approvers];
newApprovers.splice(index, 1);
// Re-index levels
newApprovers.forEach((a, i) => a.level = i + 1);
setFormData(prev => ({ ...prev, approvers: newApprovers }));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.name || !formData.description) {
toast.error('Please fill in required fields');
return;
}
if (formData.approvers.length === 0) {
toast.error('Please add at least one approver');
return;
}
// Prepare payload with TAT conversion
const payload = {
...formData,
approvers: formData.approvers.map(a => ({
...a,
tat: a.tatType === 'days' ? (parseInt(a.tat) * 24) : parseInt(a.tat)
}))
};
try {
setLoading(true);
if (isEditing && templateId) {
await updateTemplate(templateId, payload);
toast.success('Template updated successfully');
} else {
await createTemplate(payload);
toast.success('Template created successfully');
}
navigate('/admin/templates'); // Back to list
} catch (error) {
toast.error(isEditing ? 'Failed to update template' : 'Failed to create template');
console.error(error);
} finally {
setLoading(false);
}
};
if (fetching) {
return (
<div className="flex h-96 items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
</div>
);
}
const isFormValid = formData.name &&
formData.description &&
formData.approvers.length > 0 &&
formData.approvers.every((a: any) => {
const val = parseInt(String(a.tat)) || 0;
const max = a.tatType === 'days' ? 7 : 24;
return val >= 1 && val <= max;
});
return (
<div className="max-w-4xl mx-auto p-6 space-y-6">
<div className="flex items-center gap-4 mb-6">
<Button variant="ghost" size="icon" onClick={() => navigate('/admin/templates')}>
<ArrowLeft className="w-5 h-5" />
</Button>
<div>
<h1 className="text-3xl font-bold text-gray-900">
{isEditing ? 'Edit Workflow Template' : 'Create Workflow Template'}
</h1>
<p className="text-gray-500">
{isEditing ? 'Update existing workflow configuration' : 'Define a new standardized request workflow'}
</p>
</div>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Basic Information</CardTitle>
<CardDescription>General details about the template</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="name">Template Name *</Label>
<Input
id="name"
name="name"
placeholder="e.g., Office Stationery Request"
value={formData.name}
onChange={handleInputChange}
className="border-gray-200"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="category">Category</Label>
<div className="relative">
{/* Simple text input for now, could be select */}
<Input
id="category"
name="category"
placeholder="e.g., Admin, HR, Finance"
value={formData.category}
onChange={handleInputChange}
className="border-gray-200"
/>
</div>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="description">Description *</Label>
<Textarea
id="description"
name="description"
placeholder="Describe what this request is for..."
value={formData.description}
onChange={handleInputChange}
className="border-gray-200"
required
/>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="space-y-2">
<Label htmlFor="priority">Default Priority</Label>
<Select
name="priority"
value={formData.priority}
onValueChange={(val) => handleSelectChange('priority', val)}
>
<SelectTrigger>
<SelectValue placeholder="Select priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="low">Low</SelectItem>
<SelectItem value="medium">Medium</SelectItem>
<SelectItem value="high">High</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="estimatedTime">Estimated Time</Label>
<Input
id="estimatedTime"
name="estimatedTime"
placeholder="e.g., 2 days"
value={formData.estimatedTime}
onChange={handleInputChange}
className="border-gray-200"
/>
</div>
<div className="space-y-2">
<Label htmlFor="suggestedSLA">SLA (Hours)</Label>
<Input
id="suggestedSLA"
name="suggestedSLA"
type="number"
placeholder="24"
value={formData.suggestedSLA}
onChange={handleInputChange}
className="border-gray-200"
/>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Approver Workflow</CardTitle>
<CardDescription>Define static approvers for this template</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-4">
{formData.approvers.map((approver, index) => (
<div key={index} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg border border-gray-100">
<Badge variant="outline" className="bg-white">Level {approver.level}</Badge>
<div className="flex-1">
<div className="font-medium text-gray-900">{approver.name}</div>
<div className="text-sm text-gray-500">{approver.email}</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-col gap-1">
<Label htmlFor={`tat-${index}`} className="text-xs whitespace-nowrap">TAT</Label>
<div className="flex items-center gap-1">
<Input
id={`tat-${index}`}
type="number"
className="h-8 w-16 border-gray-200"
value={approver.tat || ''}
min={1}
max={approver.tatType === 'days' ? 7 : 24}
placeholder={approver.tatType === 'days' ? '1' : '24'}
onChange={(e) => {
const val = parseInt(e.target.value) || 0;
// const max = approver.tatType === 'days' ? 7 : 24;
// Optional: strict clamping or just allow typing and validate later
// For better UX, let's allow typing but validate in isFormValid
// But prevent entering negative numbers
if (val < 0) return;
const newApprovers = [...formData.approvers];
newApprovers[index].tat = e.target.value; // Store as string to allow clearing
setFormData(prev => ({ ...prev, approvers: newApprovers }));
}}
/>
<Select
value={approver.tatType || 'hours'}
onValueChange={(val) => {
const newApprovers = [...formData.approvers];
newApprovers[index].tatType = val;
newApprovers[index].tat = 1; // Reset to 1 on change
setFormData(prev => ({ ...prev, approvers: newApprovers }));
}}
>
<SelectTrigger className="h-8 w-20 text-xs px-2">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="hours">Hours</SelectItem>
<SelectItem value="days">Days</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<Button type="button" variant="ghost" size="sm" onClick={() => removeApprover(index)}>
<X className="w-4 h-4 text-gray-500 hover:text-red-600" />
</Button>
</div>
))}
{formData.approvers.length === 0 && (
<div className="text-center p-8 border-2 border-dashed rounded-lg text-gray-500 text-sm">
No approvers defined. Requests will be auto-approved or require manual assignment.
</div>
)}
</div>
<div className="space-y-2 relative">
<Label>Add Approver</Label>
<div className="flex gap-2">
<Input
placeholder="Type '@' to search user by name or email..."
value={approverSearchInput}
onChange={(e) => handleApproverSearch(e.target.value)}
className="border-gray-200"
/>
</div>
{(searchLoading || searchResults.length > 0) && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto">
{searchLoading && <div className="p-2 text-sm text-gray-500">Searching...</div>}
{searchResults.map(user => (
<div
key={user.userId}
className="p-2 hover:bg-gray-50 cursor-pointer flex items-center gap-3"
onClick={() => addApprover(user)}
>
<Avatar className="h-8 w-8">
<AvatarFallback>{(user.displayName || 'U').substring(0, 2)}</AvatarFallback>
</Avatar>
<div>
<div className="text-sm font-medium">{user.displayName}</div>
<div className="text-xs text-gray-500">{user.email}</div>
</div>
</div>
))}
</div>
)}
</div>
{/* TAT Summary */}
{formData.approvers.length > 0 && (
<div className="mt-6 p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-lg border border-emerald-200">
<div className="flex items-start gap-3">
<Clock className="w-5 h-5 text-emerald-600 mt-0.5" />
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-emerald-900">TAT Summary</h4>
<div className="text-right">
{(() => {
const totalCalendarDays = formData.approvers.reduce((sum: number, a: any) => {
const tat = Number(a.tat || 0);
const tatType = a.tatType || 'hours';
if (tatType === 'days') {
return sum + tat;
} else {
return sum + (tat / 24);
}
}, 0) || 0;
const displayDays = Math.ceil(totalCalendarDays);
return (
<>
<div className="text-lg font-bold text-emerald-800">{displayDays} {displayDays === 1 ? 'Day' : 'Days'}</div>
<div className="text-xs text-emerald-600">Total Duration</div>
</>
);
})()}
</div>
</div>
<div className="space-y-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{formData.approvers.map((approver: any, idx: number) => {
const tat = Number(approver.tat || 0);
const tatType = approver.tatType || 'hours';
const hours = tatType === 'days' ? tat * 24 : tat;
if (!tat) return null;
return (
<div key={idx} className="bg-white/60 p-2 rounded border border-emerald-100">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-emerald-900">Level {idx + 1}</span>
<span className="text-sm text-emerald-700">{hours} {hours === 1 ? 'hour' : 'hours'}</span>
</div>
</div>
);
})}
</div>
{(() => {
const totalHours = formData.approvers.reduce((sum: number, a: any) => {
const tat = Number(a.tat || 0);
const tatType = a.tatType || 'hours';
if (tatType === 'days') {
return sum + (tat * 24);
} else {
return sum + tat;
}
}, 0) || 0;
const workingDays = Math.ceil(totalHours / 8);
if (totalHours === 0) return null;
return (
<div className="bg-white/80 p-3 rounded border border-emerald-200">
<div className="grid grid-cols-2 gap-4 text-center">
<div>
<div className="text-lg font-bold text-emerald-800">{totalHours}h</div>
<div className="text-xs text-emerald-600">Total Hours</div>
</div>
<div>
<div className="text-lg font-bold text-emerald-800">{workingDays}</div>
<div className="text-xs text-emerald-600">Working Days*</div>
</div>
</div>
<p className="text-xs text-emerald-600 mt-2 text-center">*Based on 8-hour working days</p>
</div>
);
})()}
</div>
</div>
</div>
</div>
)}
</CardContent>
</Card>
<div className="flex justify-end gap-3 pt-4">
<Button type="button" variant="outline" onClick={() => navigate('/admin/templates')}>Cancel</Button>
<Button type="submit" disabled={loading || !isFormValid} className="bg-re-green hover:bg-re-green/90">
{loading ? 'Saving...' : (
<>
<Save className="w-4 h-4 mr-2" />
{isEditing ? 'Update Template' : 'Create Template'}
</>
)}
</Button>
</div>
</form>
</div>
);
}

36
src/pages/Auth/Auth.tsx
View File

@ -2,13 +2,13 @@ import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { LogIn } from 'lucide-react';
import { LogIn, Shield } from 'lucide-react';
import { ReLogo, LandingPageImage } from '@/assets';
// import { initiateTanflowLogin } from '@/services/tanflowAuth';
import { initiateTanflowLogin } from '@/services/tanflowAuth';
export function Auth() {
const { login, isLoading, error } = useAuth();
const [tanflowLoading] = useState(false);
const [tanflowLoading, setTanflowLoading] = useState(false);
const [imageLoaded, setImageLoaded] = useState(false);
// Preload the background image
@ -28,7 +28,7 @@ export function Auth() {
// Clear any existing session data
localStorage.clear();
sessionStorage.clear();
try {
await login();
} catch (loginError) {
@ -41,11 +41,11 @@ export function Auth() {
}
};
/* const handleTanflowLogin = () => {
const handleTanflowLogin = () => {
// Clear any existing session data
localStorage.clear();
sessionStorage.clear();
setTanflowLoading(true);
try {
initiateTanflowLogin();
@ -55,7 +55,7 @@ export function Auth() {
console.error('Error details:', loginError);
setTanflowLoading(false);
}
}; */
};
if (error) {
console.error('Auth Error in Auth Component:', {
@ -65,7 +65,7 @@ export function Auth() {
}
return (
<div
<div
className="min-h-screen flex items-center justify-center p-4 relative"
style={{
backgroundImage: imageLoaded ? `url(${LandingPageImage})` : 'none',
@ -81,19 +81,19 @@ export function Auth() {
)}
{/* Overlay for better readability */}
<div className="absolute inset-0 bg-black/40"></div>
<Card className="w-full max-w-md shadow-xl relative z-10 bg-black backdrop-blur-sm border-gray-800">
<CardHeader className="space-y-1 text-center pb-6">
<div className="flex flex-col items-center justify-center mb-4">
<img
src={ReLogo}
alt="Royal Enfield Logo"
<img
src={ReLogo}
alt="Royal Enfield Logo"
className="h-10 w-auto max-w-[168px] object-contain mb-2"
/>
<p className="text-xs text-gray-300 text-center truncate">Approval Portal</p>
</div>
</CardHeader>
<CardContent className="space-y-4">
{error && (
<div className="bg-red-900/50 border border-red-700 text-red-200 px-4 py-3 rounded-lg">
@ -101,7 +101,7 @@ export function Auth() {
<p className="text-sm">{error.message}</p>
</div>
)}
<div className="space-y-3">
<Button
onClick={handleOKTALogin}
@ -111,8 +111,8 @@ export function Auth() {
>
{isLoading ? (
<>
<div
className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
<div
className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
/>
Logging in...
</>
@ -123,7 +123,7 @@ export function Auth() {
</>
)}
</Button>
{/*
<div className="relative">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-gray-700"></span>
@ -152,7 +152,7 @@ export function Auth() {
Dealer Login
</>
)}
</Button> */}
</Button>
</div>
<div className="text-center text-sm text-gray-400 mt-4">

16
src/pages/ClosedRequests/components/ClosedRequestsFilters.tsx
View File

@ -29,14 +29,14 @@ export function ClosedRequestsFilters({
searchTerm,
priorityFilter,
statusFilter,
// templateTypeFilter,
templateTypeFilter,
sortBy,
sortOrder,
activeFiltersCount,
onSearchChange,
onPriorityChange,
onStatusChange,
// onTemplateTypeChange,
onTemplateTypeChange,
onSortByChange,
onSortOrderChange,
onClearFilters,
@ -75,7 +75,7 @@ export function ClosedRequestsFilters({
</div>
</CardHeader>
<CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
<Input
@ -86,7 +86,7 @@ export function ClosedRequestsFilters({
data-testid="closed-requests-search"
/>
</div>
<Select value={priorityFilter} onValueChange={onPriorityChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-priority-filter">
<SelectValue placeholder="All Priorities" />
@ -107,7 +107,7 @@ export function ClosedRequestsFilters({
</SelectItem>
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={onStatusChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-status-filter">
<SelectValue placeholder="Closure Type" />
@ -129,7 +129,7 @@ export function ClosedRequestsFilters({
</SelectContent>
</Select>
{/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white" data-testid="closed-requests-template-type-filter">
<SelectValue placeholder="All Templates" />
</SelectTrigger>
@ -138,7 +138,7 @@ export function ClosedRequestsFilters({
<SelectItem value="CUSTOM">Non-Templatized</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
<div className="flex gap-2">
<Select value={sortBy} onValueChange={(value) => onSortByChange(value as 'created' | 'due' | 'priority')}>
@ -151,7 +151,7 @@ export function ClosedRequestsFilters({
<SelectItem value="priority">Priority</SelectItem>
</SelectContent>
</Select>
<Button
variant="outline"
size="sm"

232
src/pages/CreateAdminRequest/CreateAdminRequest.tsx
View File

@ -1,232 +0,0 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, ChevronRight, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAuth } from '@/contexts/AuthContext';
import { getTemplates, WorkflowTemplate as BackendTemplate } from '@/services/workflowTemplateApi';
import { createWorkflowMultipart, submitWorkflow, CreateWorkflowFromFormPayload } from '@/services/workflowApi';
import { RequestTemplate } from '@/hooks/useCreateRequestForm';
import { FileText } from 'lucide-react';
import { AdminRequestDetailsStep } from './components/AdminRequestDetailsStep';
import { AdminRequestReviewStep } from './components/AdminRequestReviewStep';
import { toast } from 'sonner';
import { WizardStepper } from '@/components/workflow/CreateRequest/WizardStepper';
export function CreateAdminRequest() {
const { templateId } = useParams<{ templateId: string }>();
const navigate = useNavigate();
const { user: _ } = useAuth(); // Keeping hook call but ignoring return if needed for auth check side effect, or just remove destructuring
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [template, setTemplate] = useState<RequestTemplate | null>(null);
const [step, setStep] = useState(1);
const [documents, setDocuments] = useState<File[]>([]);
// Simplified form data
const [formData, setFormData] = useState({
title: '',
description: '',
});
const stepNames = ['Request Details', 'Review & Submit'];
useEffect(() => {
const loadTemplate = async () => {
try {
setLoading(true);
// Ideally we would have a getTemplateById API, but for now we filter from list
// Optimization: In a real app, create a specific endpoint
const templates = await getTemplates();
const found = templates.find((t: BackendTemplate) => t.id === templateId);
if (found) {
const mapped: RequestTemplate = {
id: found.id,
name: found.name,
description: found.description,
category: found.category,
icon: FileText,
estimatedTime: found.estimatedTime,
commonApprovers: found.approvers.map((a: any) => a.name),
workflowApprovers: found.approvers,
suggestedSLA: found.suggestedSLA,
priority: found.priority,
fields: found.fields || {}
};
setTemplate(mapped);
// Pre-fill
setFormData({
title: mapped.name,
description: mapped.description
});
} else {
toast.error('Template not found');
// navigate('/new-request'); // Removed to prevent potential redirect loops
// We will show the "Template not found" UI below since template is null
}
} catch (error) {
console.error('Error loading template:', error);
toast.error('Failed to load template details');
} finally {
setLoading(false);
}
};
if (templateId) {
loadTemplate();
}
}, [templateId, navigate]);
const handleSubmit = async () => {
if (!template) return;
try {
setSubmitting(true);
const formPayload: CreateWorkflowFromFormPayload = {
templateId: template.id,
templateType: 'TEMPLATE',
title: formData.title,
description: formData.description,
priorityUi: template.priority === 'high' ? 'express' : 'standard',
approverCount: template.workflowApprovers?.length || 0,
approvers: (template.workflowApprovers || []).map((a: any) => ({
email: a.email,
name: a.name,
tat: a.tat,
tatType: 'hours'
})),
spectators: [],
ccList: []
};
const response = await createWorkflowMultipart(formPayload, documents);
if (response && response.id) {
await submitWorkflow(response.id);
}
toast.success('Request Submitted Successfully', {
description: `Your request "${formData.title}" has been created.`
});
navigate('/my-requests');
} catch (error) {
console.error('Submission failed:', error);
toast.error('Failed to submit request');
} finally {
setSubmitting(false);
}
};
if (loading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div>
);
}
if (!template) {
return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
<div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full text-center">
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
<FileText className="w-8 h-8 text-red-600" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-2">Template Not Found</h2>
<p className="text-gray-600 mb-6">
The requested template could not be loaded. It may have been deleted or you do not have permission to view it.
</p>
<div className="flex gap-3 justify-center">
<Button variant="outline" onClick={() => navigate('/dashboard')}>
Go to Dashboard
</Button>
<Button onClick={() => navigate('/new-request')}>
Browse Templates
</Button>
</div>
</div>
</div>
);
}
return (
<div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
{/* Header */}
<header className="bg-white border-b flex-shrink-0 z-10">
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={() => navigate('/new-request')}>
<ArrowLeft className="w-5 h-5 text-gray-500" />
</Button>
<div>
<h1 className="text-xl font-bold text-gray-900">New Request</h1>
<p className="text-sm text-gray-500">{template.name}</p>
</div>
</div>
<Button variant="outline" onClick={() => navigate('/dashboard')}>
Cancel Request
</Button>
</div>
{/* Stepper */}
<WizardStepper
currentStep={step}
totalSteps={2}
stepNames={stepNames}
/>
</header>
{/* Content */}
<main className="flex-1 overflow-y-auto py-8 px-6 bg-gray-50/50">
<div className="max-w-4xl mx-auto">
{step === 1 ? (
<AdminRequestDetailsStep
template={template}
formData={formData}
setFormData={setFormData}
documents={documents}
setDocuments={setDocuments}
/>
) : (
<AdminRequestReviewStep
template={template}
formData={formData}
documents={documents}
/>
)}
</div>
</main>
{/* Footer Actions */}
<footer className="bg-white border-t px-6 py-4 flex-shrink-0 z-10">
<div className="max-w-4xl mx-auto flex items-center justify-between">
<Button
variant="outline"
onClick={() => step === 1 ? navigate('/new-request') : setStep(1)}
disabled={submitting}
>
{step === 1 ? 'Cancel' : 'Back to Details'}
</Button>
<Button
onClick={() => step === 1 ? setStep(2) : handleSubmit()}
disabled={submitting}
className={step === 2 ? "bg-re-green hover:bg-re-green/90" : "bg-re-green hover:bg-re-green/90"}
>
{step === 1 ? (
<>Review Request <ChevronRight className="w-4 h-4 ml-1" /></>
) : (
<>{submitting ? 'Submitting...' : 'Submit Request'} <Check className="w-4 h-4 ml-1" /></>
)}
</Button>
</div>
</footer>
</div>
);
}

171
src/pages/CreateAdminRequest/components/AdminRequestDetailsStep.tsx
View File

@ -1,171 +0,0 @@
import { useRef, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Upload, X, FileText, Eye } from 'lucide-react';
import { RequestTemplate } from '@/hooks/useCreateRequestForm';
import { RichTextEditor } from '@/components/ui/rich-text-editor';
import { FilePreview } from '@/components/common/FilePreview/FilePreview';
interface AdminRequestDetailsStepProps {
template: RequestTemplate;
formData: any;
setFormData: (data: any) => void;
documents: File[];
setDocuments: (docs: File[]) => void;
}
export function AdminRequestDetailsStep({
template,
formData,
setFormData,
documents,
setDocuments
}: AdminRequestDetailsStepProps) {
const fileInputRef = useRef<HTMLInputElement>(null);
const [previewFile, setPreviewFile] = useState<{ file: File; url: string } | null>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
setDocuments([...documents, ...Array.from(e.target.files)]);
}
};
const removeDocument = (index: number) => {
const newDocs = [...documents];
newDocs.splice(index, 1);
setDocuments(newDocs);
};
const handlePreview = (file: File) => {
const url = URL.createObjectURL(file);
setPreviewFile({ file, url });
};
const closePreview = () => {
if (previewFile?.url) {
URL.revokeObjectURL(previewFile.url);
}
setPreviewFile(null);
};
const canPreview = (file: File) => {
return file.type.includes('image') || file.type.includes('pdf');
};
return (
<div className="space-y-6 max-w-4xl mx-auto">
<Card className="shadow-sm">
<CardContent className="pt-6">
<div className="mb-4">
<h2 className="text-xl font-bold text-gray-800">{template.name}</h2>
<p className="text-sm text-gray-500 mt-1">{template.description}</p>
</div>
<div className="flex gap-4 text-sm text-gray-600 bg-gray-50 p-3 rounded-lg">
<div className="flex items-center gap-1">
<span className="font-semibold">Category:</span> {template.category}
</div>
<div className="flex items-center gap-1">
<span className="font-semibold">Priority:</span>
<span className="capitalize">{template.priority}</span>
</div>
<div className="flex items-center gap-1">
<span className="font-semibold">SLA:</span> {template.suggestedSLA} Hours
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6 space-y-4">
<div className="space-y-2">
<Label htmlFor="requestTitle">Request Title *</Label>
<Input
id="requestTitle"
value={formData.title}
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
placeholder={`Request for ${template.name}`}
className="border-gray-200"
/>
</div>
<div className="space-y-2">
<Label htmlFor="justification" className="text-base font-semibold">Request Detail *</Label>
<p className="text-sm text-gray-600 mb-2">
Explain what you need approval for, why it's needed, and any relevant details.
</p>
<RichTextEditor
value={formData.description || ''}
onChange={(html) => setFormData({ ...formData, description: html })}
placeholder="Provide comprehensive details about your request..."
className="min-h-[120px] text-base border-gray-200 bg-white shadow-sm"
minHeight="120px"
/>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6 space-y-4">
<Label>Supporting Documents</Label>
<div
className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:bg-gray-50 transition-colors cursor-pointer"
onClick={() => fileInputRef.current?.click()}
>
<Upload className="w-10 h-10 text-gray-400 mx-auto mb-3" />
<p className="text-sm font-medium text-gray-700">Click to upload files</p>
<p className="text-xs text-gray-500 mt-1">PDF, Excel, Images (Max 10MB)</p>
<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={handleFileChange}
/>
</div>
{documents.length > 0 && (
<div className="grid grid-cols-1 gap-2 mt-4">
{documents.map((file, index) => (
<div key={index} className="flex items-center justify-between p-3 bg-white border rounded-lg shadow-sm">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
<FileText className="w-5 h-5 text-blue-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-800 truncate max-w-[200px]">{file.name}</p>
<p className="text-xs text-gray-500">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
</div>
</div>
<div className="flex items-center gap-1">
{canPreview(file) && (
<Button variant="ghost" size="icon" onClick={() => handlePreview(file)}>
<Eye className="w-4 h-4 text-gray-500 hover:text-blue-600" />
</Button>
)}
<Button variant="ghost" size="icon" onClick={() => removeDocument(index)}>
<X className="w-4 h-4 text-gray-500 hover:text-red-500" />
</Button>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{previewFile && (
<FilePreview
fileName={previewFile.file.name}
fileType={previewFile.file.type}
fileUrl={previewFile.url}
fileSize={previewFile.file.size}
open={!!previewFile}
onClose={closePreview}
/>
)}
</div>
);
}

135
src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx
View File

@ -1,135 +0,0 @@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { FileText, AlertCircle } from 'lucide-react';
import { RequestTemplate } from '@/hooks/useCreateRequestForm';
interface AdminRequestReviewStepProps {
template: RequestTemplate;
formData: any;
documents: File[];
}
export function AdminRequestReviewStep({
template,
formData,
documents
}: AdminRequestReviewStepProps) {
// Use template approvers if available, otherwise fallback (though should always be there for admin templates)
const approvers = template.workflowApprovers || [];
return (
<div className="space-y-6 max-w-4xl mx-auto">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
<div>
<h4 className="font-semibold text-blue-900">Ready to Submit?</h4>
<p className="text-sm text-blue-700 mt-1">
Please review the details below. This request will follow the standardized approval workflow defined by the administrator.
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="md:col-span-2 space-y-6">
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-lg">Request Overview</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div>
<span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</span>
<p className="text-base font-medium text-gray-900 mt-1">{formData.title}</p>
</div>
<div>
<span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Request Detail</span>
<div
className="text-sm text-gray-700 mt-1 prose prose-sm max-w-none"
dangerouslySetInnerHTML={{ __html: formData.description }}
/>
</div>
{documents.length > 0 && (
<div>
<span className="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-2">Attachments ({documents.length})</span>
<div className="flex flex-wrap gap-2">
{documents.map((doc, i) => (
<Badge key={i} variant="secondary" className="pl-1 pr-2 py-1 flex items-center gap-1.5 h-auto">
<FileText className="w-3 h-3 text-gray-500" />
<span className="truncate max-w-[150px]">{doc.name}</span>
</Badge>
))}
</div>
</div>
)}
</div>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-lg">Approval Workflow</CardTitle>
</CardHeader>
<CardContent>
<div className="relative pl-6 border-l-2 border-gray-100 space-y-8 py-2">
{approvers.map((approver: any, index: number) => (
<div key={index} className="relative">
{/* Timeline dot */}
<div className="absolute -left-[31px] top-1 w-4 h-4 rounded-full bg-white border-2 border-blue-500 flex items-center justify-center">
<div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
</div>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
<div className="flex justify-between items-start mb-1">
<div>
<h5 className="font-semibold text-gray-800 text-sm">{approver.name || approver.email}</h5>
<p className="text-xs text-gray-500">Level {approver.level} Approver</p>
</div>
<Badge variant="outline" className="bg-white text-xs">
{approver.tat || 24} Hours TAT
</Badge>
</div>
<p className="text-xs text-gray-400">{approver.email}</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
<div className="space-y-6">
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-sm uppercase text-gray-500">Properties</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Template</span>
<span className="text-sm font-medium text-right">{template.name}</span>
</div>
<Separator />
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Priority</span>
<Badge className={
template.priority === 'high' ? 'bg-red-100 text-red-700 hover:bg-red-100' :
template.priority === 'medium' ? 'bg-orange-100 text-orange-700 hover:bg-orange-100' :
'bg-green-100 text-green-700 hover:bg-green-100'
}>
{template.priority.toUpperCase()}
</Badge>
</div>
<Separator />
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Est. Time</span>
<span className="text-sm text-gray-900">{template.estimatedTime}</span>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
);
}

70
src/pages/CreateRequest/CreateRequest.tsx
View File

@ -13,7 +13,7 @@
* - components/ - UI components
*/
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { useState, useRef, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import { TemplateSelectionModal } from '@/components/modals/TemplateSelectionModal';
@ -22,7 +22,7 @@ import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';
import { downloadDocument } from '@/services/workflowApi';
// Custom Hooks
import { useCreateRequestForm, RequestTemplate } from '@/hooks/useCreateRequestForm';
import { useCreateRequestForm } from '@/hooks/useCreateRequestForm';
import { useWizardNavigation } from '@/hooks/useWizardNavigation';
import { useRequestModals } from './hooks/useRequestModals';
import { useCreateRequestSubmission } from './hooks/useCreateRequestSubmission';
@ -31,10 +31,6 @@ import { useCreateRequestHandlers } from './hooks/useCreateRequestHandlers';
// Constants
import { REQUEST_TEMPLATES } from './constants/requestTemplates';
// Services
import { getTemplates, WorkflowTemplate as BackendTemplate } from '@/services/workflowTemplateApi';
import { FileText } from 'lucide-react';
// Components
import { WizardStepper } from '@/components/workflow/CreateRequest/WizardStepper';
import { WizardFooter } from '@/components/workflow/CreateRequest/WizardFooter';
@ -68,35 +64,6 @@ export function CreateRequest({
const isEditing = isEditMode && !!editRequestId;
const { user } = useAuth();
const [adminTemplates, setAdminTemplates] = useState<RequestTemplate[]>([]);
useEffect(() => {
const fetchTemplates = async () => {
try {
const templates = await getTemplates();
const mappedTemplates: RequestTemplate[] = templates.map((t: BackendTemplate) => ({
id: t.id,
name: t.name,
description: t.description,
category: t.category,
icon: FileText,
estimatedTime: t.estimatedTime,
commonApprovers: t.approvers.map((a: any) => a.name),
workflowApprovers: t.approvers,
suggestedSLA: t.suggestedSLA,
priority: t.priority,
fields: t.fields || {}
}));
setAdminTemplates(mappedTemplates);
} catch (error) {
console.error('Failed to fetch admin templates:', error);
}
};
fetchTemplates();
}, []);
const allTemplates = useMemo(() => [...REQUEST_TEMPLATES, ...adminTemplates], [adminTemplates]);
// Form and state management hooks
const {
formData,
@ -108,7 +75,7 @@ export function CreateRequest({
documentPolicy,
existingDocuments,
setExistingDocuments,
} = useCreateRequestForm(isEditing, editRequestId, allTemplates);
} = useCreateRequestForm(isEditing, editRequestId, REQUEST_TEMPLATES);
const {
currentStep,
@ -117,7 +84,6 @@ export function CreateRequest({
isStepValid,
nextStep: wizardNextStep,
prevStep: wizardPrevStep,
goToStep,
} = useWizardNavigation(isEditing, selectedTemplate, formData);
// Document management state
@ -176,37 +142,22 @@ export function CreateRequest({
systemPolicy,
onPolicyViolation: openPolicyViolationModal,
onSubmit,
goToStep,
});
// Handle back button:
// - Steps 1, 3, or 4: Navigate back to previous screen (browser history)
// - Other steps: Go to previous step in wizard
const handleBackButton = useCallback(() => {
// If on the first step (Template Selection), always go back to dashboard
// This prevents infinite loops if the user was redirected here from an error page
if (currentStep === 1) {
navigate('/dashboard', { replace: true });
return;
}
// For other major steps (3=Approval, 4=Participants), we might want to go back to prev screen
// But for consistency and safety against loops, let's treat "Back" as "Previous Step"
// or explicit exit if at the start of a flow.
// Actually, keep the history logic ONLY for later steps if needed, but Step 1 MUST be explicit.
if (currentStep === 3 || currentStep === 4) {
// ... existing logic for these steps if we want to keep it,
// but typically "Back" in a wizard should go to previous wizard step.
// However, the original code had this specific logic.
// Let's defer to prevStep() for wizard navigation, and only use history/dashboard for exit.
if (currentStep === 1 || currentStep === 3 || currentStep === 4) {
// On steps 1, 3, or 4, navigate back to previous screen using browser history
if (onBack) {
onBack();
} else {
// Use window.history.back() as fallback for more reliable navigation
if (window.history.length > 1) {
window.history.back();
} else {
// If no history, navigate to dashboard
navigate('/dashboard', { replace: true });
}
}
@ -219,7 +170,7 @@ export function CreateRequest({
// Sync documents from formData only on initial mount (when loading draft)
const isInitialMount = useRef(true);
const documentsSyncedRef = useRef(false);
useEffect(() => {
// Only sync from formData on initial mount or when loading a draft
if (isInitialMount.current && formData.documents && formData.documents.length > 0 && !documentsSyncedRef.current) {
@ -233,7 +184,7 @@ export function CreateRequest({
// Use a ref to prevent circular updates
const isUpdatingFromFormData = useRef(false);
const prevDocumentsRef = useRef(documents);
useEffect(() => {
// Skip if we're currently syncing from formData
if (isUpdatingFromFormData.current) {
@ -241,7 +192,7 @@ export function CreateRequest({
prevDocumentsRef.current = documents;
return;
}
// Only update if documents actually changed
if (prevDocumentsRef.current !== documents) {
updateFormData('documents', documents);
@ -259,7 +210,6 @@ export function CreateRequest({
templates={REQUEST_TEMPLATES}
selectedTemplate={selectedTemplate}
onSelectTemplate={selectTemplate}
adminTemplates={adminTemplates}
/>
);
case 2:

9
src/pages/CreateRequest/hooks/useCreateRequestHandlers.ts
View File

@ -32,7 +32,6 @@ interface UseHandlersOptions {
systemPolicy?: SystemPolicy;
onPolicyViolation?: (violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>) => void;
onSubmit?: (requestData: any) => void;
goToStep?: (step: number) => void;
}
export function useCreateRequestHandlers({
@ -49,7 +48,6 @@ export function useCreateRequestHandlers({
systemPolicy,
onPolicyViolation,
onSubmit,
// goToStep,
}: UseHandlersOptions) {
const navigate = useNavigate();
const [showTemplateModal, setShowTemplateModal] = useState(false);
@ -66,13 +64,8 @@ export function useCreateRequestHandlers({
const suggestedDate = new Date();
suggestedDate.setDate(suggestedDate.getDate() + template.suggestedSLA);
updateFormData('slaEndDate', suggestedDate);
// Note: For 'existing-template', the modal will open when Next is clicked (handled in nextStep)
if (template.id !== 'custom' && template.id !== 'existing-template') {
// Redirect to dedicated Admin Request flow
navigate(`/create-admin-request/${template.id}`);
}
};
const handleTemplateSelection = (templateId: string) => {

8
src/pages/MyRequests/components/MyRequestsFilters.tsx
View File

@ -22,11 +22,11 @@ export function MyRequestsFilters({
searchTerm,
statusFilter,
priorityFilter,
// templateTypeFilter,
templateTypeFilter,
onSearchChange,
onStatusChange,
onPriorityChange,
// onTemplateTypeChange,
onTemplateTypeChange,
}: MyRequestsFiltersProps) {
return (
<Card className="border-gray-200" data-testid="my-requests-filters">
@ -76,7 +76,7 @@ export function MyRequestsFilters({
</SelectContent>
</Select>
{/* <Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<Select value={templateTypeFilter} onValueChange={onTemplateTypeChange}>
<SelectTrigger
className="flex-1 md:w-28 lg:w-32 text-xs sm:text-sm bg-white border-gray-300 hover:border-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-200 h-9 sm:h-10"
data-testid="template-type-filter"
@ -88,7 +88,7 @@ export function MyRequestsFilters({
<SelectItem value="CUSTOM">Non-Templatized</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
</div>
</div>
</CardContent>

126
src/pages/OpenRequests/OpenRequests.tsx
View File

@ -18,9 +18,9 @@ interface Request {
status: 'pending' | 'approved' | 'rejected' | 'closed' | 'paused';
priority: 'express' | 'standard';
initiator: { name: string; avatar: string };
currentApprover?: {
name: string;
avatar: string;
currentApprover?: {
name: string;
avatar: string;
sla?: any; // Backend-calculated SLA data
};
createdAt: string;
@ -106,13 +106,13 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
const [items, setItems] = useState<Request[]>([]);
const [loading, setLoading] = useState(false);
const [refreshing, setRefreshing] = useState(false);
// Pagination states (currentPage now in Redux)
const [totalPages, setTotalPages] = useState(1);
const [totalRecords, setTotalRecords] = useState(0);
const [itemsPerPage] = useState(10);
const fetchRequestsRef = useRef<any>(null);
// Use Redux for filters with callback (persists during navigation)
const filters = useOpenRequestsFilters();
@ -163,12 +163,12 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
setLoading(true);
setItems([]);
}
// Always use user-scoped endpoint (not organization-wide)
// Backend filters by userId regardless of user role (ADMIN/MANAGEMENT/regular user)
// For organization-wide requests, use the "All Requests" screen (/requests)
const result = await workflowApi.listOpenForMe({
page,
const result = await workflowApi.listOpenForMe({
page,
limit: itemsPerPage,
search: filterParams?.search,
status: filterParams?.status,
@ -177,12 +177,12 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
sortBy: filterParams?.sortBy,
sortOrder: filterParams?.sortOrder
});
// Extract data - workflowApi now returns { data: [], pagination: {} }
const data = Array.isArray((result as any)?.data)
? (result as any).data
const data = Array.isArray((result as any)?.data)
? (result as any).data
: [];
// Set pagination data
const pagination = (result as any)?.pagination;
if (pagination) {
@ -190,10 +190,10 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
setTotalPages(pagination.totalPages || 1);
setTotalRecords(pagination.total || 0);
}
const mapped: Request[] = data.map((r: any) => {
const createdAt = r.submittedAt || r.submitted_at || r.createdAt || r.created_at;
return {
id: r.requestNumber || r.request_number || r.requestId,
requestId: r.requestId,
@ -202,13 +202,13 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
description: r.description,
status: (r.status || '').toString().toLowerCase().replace('_', '-'),
priority: (r.priority || '').toString().toLowerCase(),
initiator: {
name: (r.initiator?.displayName || r.initiator?.email || '—'),
avatar: ((r.initiator?.displayName || r.initiator?.email || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase())
initiator: {
name: (r.initiator?.displayName || r.initiator?.email || '—'),
avatar: ((r.initiator?.displayName || r.initiator?.email || 'NA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase())
},
currentApprover: r.currentApprover ? {
name: (r.currentApprover.name || r.currentApprover.email || '—'),
avatar: ((r.currentApprover.name || r.currentApprover.email || 'CA').split(' ').map((s: string) => s[0]).join('').slice(0, 2).toUpperCase()),
currentApprover: r.currentApprover ? {
name: (r.currentApprover.name || r.currentApprover.email || '—'),
avatar: ((r.currentApprover.name || r.currentApprover.email || 'CA').split(' ').map((s: string) => s[0]).join('').slice(0,2).toUpperCase()),
sla: r.currentApprover.sla // ← Backend-calculated SLA
} : undefined,
createdAt: createdAt || '—',
@ -224,7 +224,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
setRefreshing(false);
}
}, [itemsPerPage, filters]);
fetchRequestsRef.current = fetchRequests;
const handleRefresh = useCallback(() => {
@ -244,21 +244,21 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
const maxPagesToShow = 5;
let startPage = Math.max(1, filters.currentPage - Math.floor(maxPagesToShow / 2));
let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
if (endPage - startPage < maxPagesToShow - 1) {
startPage = Math.max(1, endPage - maxPagesToShow + 1);
}
for (let i = startPage; i <= endPage; i++) {
pages.push(i);
}
return pages;
};
// Track if this is initial mount
const hasInitialFetchRun = useRef(false);
// Initial fetch on mount - use stored page from Redux
useEffect(() => {
if (!hasInitialFetchRun.current) {
@ -268,7 +268,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Only on mount
// Track previous filter values to detect changes
const prevFiltersRef = useRef({
searchTerm: filters.searchTerm,
@ -284,11 +284,11 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
useEffect(() => {
// Skip until initial fetch has completed
if (!hasInitialFetchRun.current) return;
const prev = prevFiltersRef.current;
// Check if any filter actually changed
const hasChanged =
const hasChanged =
prev.searchTerm !== filters.searchTerm ||
prev.statusFilter !== filters.statusFilter ||
prev.priorityFilter !== filters.priorityFilter ||
@ -303,7 +303,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
const timeoutId = setTimeout(() => {
filters.setCurrentPage(1); // Reset to page 1 when filters change (but not on initial mount or back navigation)
fetchRequests(1, getFilterParams(true));
// Update previous filters ref
prevFiltersRef.current = {
searchTerm: filters.searchTerm,
@ -325,7 +325,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
const filteredAndSortedRequests = items;
return (
return (
<div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto">
{/* Enhanced Header */}
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 sm:gap-4 md:gap-6">
@ -340,15 +340,15 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
</div>
</div>
</div>
<div className="flex items-center gap-2 sm:gap-3">
<Badge variant="secondary" className="text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 bg-slate-100 text-slate-800 font-semibold">
{loading ? 'Loading…' : `${totalRecords || items.length} open`}
<span className="hidden sm:inline ml-1">requests</span>
</Badge>
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
className="gap-1 sm:gap-2 h-8 sm:h-9"
onClick={handleRefresh}
disabled={refreshing}
@ -382,10 +382,10 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{filteredAndSortedRequests.map((request) => {
const priorityConfig = getPriorityConfig(request.priority);
const statusConfig = getStatusConfig(request.status);
return (
<Card
key={request.id}
<Card
key={request.id}
className="group hover:shadow-lg transition-all duration-200 cursor-pointer border border-gray-200 hover:border-blue-400 hover:scale-[1.002]"
onClick={() => onViewRequest?.(request.id, request.title)}
>
@ -405,8 +405,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
<h3 className="text-base font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
{(request as any).displayId || request.id}
</h3>
<Badge
variant="outline"
<Badge
variant="outline"
className={`${statusConfig.color} text-xs px-2.5 py-0.5 font-semibold shrink-0`}
>
<statusConfig.icon className="w-3.5 h-3.5 mr-1" />
@ -417,8 +417,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{request.department}
</Badge>
)}
<Badge
variant="outline"
<Badge
variant="outline"
className={`${priorityConfig.color} text-xs px-2.5 py-0.5 capitalize hidden md:inline-flex`}
>
{request.priority}
@ -427,18 +427,18 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{(() => {
const templateType = (request as any)?.templateType || (request as any)?.template_type || '';
const templateTypeUpper = templateType?.toUpperCase() || '';
// Direct mapping from templateType
let templateLabel = 'Non-Templatized';
let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
if (templateTypeUpper === 'DEALER CLAIM') {
templateLabel = 'Dealer Claim';
templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
} else if (templateTypeUpper === 'TEMPLATE') {
templateLabel = 'Template';
}
return (
<Badge
variant="outline"
@ -460,15 +460,15 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{request.currentLevelSLA && (() => {
// Check pause status from isPaused field, pauseInfo, OR status field
const isPaused = Boolean(
request.isPaused ||
request.pauseInfo?.isPaused ||
request.isPaused ||
request.pauseInfo?.isPaused ||
request.status === 'paused'
);
// Use percentage-based colors to match approver SLA tracker
// Green: 0-50%, Amber: 50-75%, Orange: 75-100%, Red: 100%+ (breached)
// Grey: When paused (frozen state)
const percentUsed = request.currentLevelSLA.percentageUsed || 0;
const getSLAColors = () => {
// If paused, always use grey colors (frozen state)
if (isPaused) {
@ -479,7 +479,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
icon: 'text-gray-600'
};
}
if (percentUsed >= 100) {
return {
bg: 'bg-red-50 border border-red-200',
@ -510,9 +510,9 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
};
}
};
const colors = getSLAColors();
return (
<div className={`p-2 rounded-md ${colors.bg}`}>
<div className="flex items-center justify-between mb-1.5">
@ -533,8 +533,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
</span>
</div>
</div>
<Progress
value={percentUsed}
<Progress
value={percentUsed}
className="h-1.5"
indicatorClassName={colors.progress}
/>
@ -552,7 +552,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
</Avatar>
<span className="font-medium text-gray-900">{request.initiator.name}</span>
</div>
{request.currentApprover && (
<div className="flex items-center gap-1.5">
<Avatar className="h-6 w-6 ring-2 ring-yellow-200 shadow-sm">
@ -563,14 +563,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
<span className="font-medium text-gray-900">{request.currentApprover.name}</span>
</div>
)}
{request.approvalStep && (
<div className="flex items-center gap-1.5">
<AlertCircle className="w-3.5 h-3.5 text-blue-500" />
<span className="font-medium">{request.approvalStep}</span>
</div>
)}
<div className="flex items-center gap-1.5">
<Calendar className="w-3.5 h-3.5" />
<span>Created: {request.createdAt !== '—' ? formatDateDDMMYYYY(request.createdAt) : '—'}</span>
@ -604,8 +604,8 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
}
</p>
{filters.activeFiltersCount > 0 && (
<Button
variant="outline"
<Button
variant="outline"
className="mt-4"
onClick={filters.clearFilters}
>
@ -624,7 +624,7 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
<div className="text-xs sm:text-sm text-muted-foreground">
Showing {((filters.currentPage - 1) * itemsPerPage) + 1} to {Math.min(filters.currentPage * itemsPerPage, totalRecords)} of {totalRecords} open requests
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
@ -635,14 +635,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
>
<ArrowRight className="h-4 w-4 rotate-180" />
</Button>
{filters.currentPage > 3 && totalPages > 5 && (
<>
<Button variant="outline" size="sm" onClick={() => handlePageChange(1)} className="h-8 w-8 p-0">1</Button>
<span className="text-muted-foreground">...</span>
</>
)}
{getPageNumbers().map((pageNum) => (
<Button
key={pageNum}
@ -654,14 +654,14 @@ export function OpenRequests({ onViewRequest }: OpenRequestsProps) {
{pageNum}
</Button>
))}
{filters.currentPage < totalPages - 2 && totalPages > 5 && (
<>
<span className="text-muted-foreground">...</span>
<Button variant="outline" size="sm" onClick={() => handlePageChange(totalPages)} className="h-8 w-8 p-0">{totalPages}</Button>
</>
)}
<Button
variant="outline"
size="sm"

144
src/pages/Requests/Requests.tsx
View File

@ -49,10 +49,10 @@ import { CustomDatePicker } from '@/components/ui/date-picker';
export function Requests({ onViewRequest }: RequestsProps) {
const { user } = useAuth();
// Get viewAsUser from Redux store (synced with Dashboard toggle)
const viewAsUser = useAppSelector((state) => state.dashboard.viewAsUser);
// Determine if viewing at organization level:
// - If user is admin/management AND not in "Personal" mode (viewAsUser=false) → show all requests
// - If user is admin/management AND in "Personal" mode (viewAsUser=true) → show only their requests
@ -95,15 +95,15 @@ export function Requests({ onViewRequest }: RequestsProps) {
// Status filter should not affect stats - stats should always show all status counts
// For user-level (Personal mode), stats will only include requests where user is involved
const fetchBackendStats = useCallback(async (
statsDateRange?: DateRange,
statsStartDate?: Date,
statsDateRange?: DateRange,
statsStartDate?: Date,
statsEndDate?: Date,
filtersWithoutStatus?: {
priority?: string;
department?: string;
initiator?: string;
approver?: string;
approverType?: 'current' | 'any';
filtersWithoutStatus?: {
priority?: string;
department?: string;
initiator?: string;
approver?: string;
approverType?: 'current' | 'any';
search?: string;
slaCompliance?: string;
}
@ -112,9 +112,9 @@ export function Requests({ onViewRequest }: RequestsProps) {
// For dynamic SLA statuses (on_track, approaching, critical), we need to fetch and enrich
// because these are calculated dynamically, not stored in DB
const slaCompliance = filtersWithoutStatus?.slaCompliance;
const isDynamicSlaStatus = slaCompliance &&
slaCompliance !== 'all' &&
slaCompliance !== 'breached' &&
const isDynamicSlaStatus = slaCompliance &&
slaCompliance !== 'all' &&
slaCompliance !== 'breached' &&
slaCompliance !== 'compliant';
if (isDynamicSlaStatus) {
@ -141,12 +141,12 @@ export function Requests({ onViewRequest }: RequestsProps) {
// Fetch up to 1000 requests (backend will enrich and filter by SLA)
// Use appropriate API based on org/personal mode
const result = isOrgLevel
const result = isOrgLevel
? await workflowApi.listWorkflows({ page: 1, limit: 1000, ...backendFilters })
: await workflowApi.listParticipantRequests({ page: 1, limit: 1000, ...backendFilters });
const filteredData = Array.isArray(result?.data) ? result.data : [];
// Calculate stats from filtered data
const total = filteredData.length;
const pending = filteredData.filter((r: any) => {
@ -244,7 +244,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
// Use refs to store stable callbacks to prevent infinite loops
const filtersRef = useRef(filters);
const fetchBackendStatsRef = useRef(fetchBackendStats);
// Update refs on each render
useEffect(() => {
filtersRef.current = filters;
@ -254,7 +254,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
// Parse URL search params
useEffect(() => {
const params = new URLSearchParams(window.location.search);
// Approver Filter (from Dashboard TAT Breach Report link)
const approver = params.get('approver');
const approverType = params.get('approverType');
@ -341,35 +341,35 @@ export function Requests({ onViewRequest }: RequestsProps) {
// Total changes when other filters are applied, but stays stable when only status changes
// Stats are fetched for both org-level AND user-level (Personal mode) views
useEffect(() => {
const timeoutId = setTimeout(() => {
const filtersWithoutStatus = {
priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
templateType: filters.templateTypeFilter !== 'all' ? filters.templateTypeFilter : undefined,
department: filters.departmentFilter !== 'all' ? filters.departmentFilter : undefined,
initiator: filters.initiatorFilter !== 'all' ? filters.initiatorFilter : undefined,
approver: filters.approverFilter !== 'all' ? filters.approverFilter : undefined,
approverType: filters.approverFilter !== 'all' ? filters.approverFilterType : undefined,
search: filters.searchTerm || undefined,
slaCompliance: filters.slaComplianceFilter !== 'all' ? filters.slaComplianceFilter : undefined
};
// All Requests (admin/normal user) should always have a date range
// Default to 'all' if no date range is selected
const statsDateRange = filters.dateRange || 'all';
const timeoutId = setTimeout(() => {
const filtersWithoutStatus = {
priority: filters.priorityFilter !== 'all' ? filters.priorityFilter : undefined,
templateType: filters.templateTypeFilter !== 'all' ? filters.templateTypeFilter : undefined,
department: filters.departmentFilter !== 'all' ? filters.departmentFilter : undefined,
initiator: filters.initiatorFilter !== 'all' ? filters.initiatorFilter : undefined,
approver: filters.approverFilter !== 'all' ? filters.approverFilter : undefined,
approverType: filters.approverFilter !== 'all' ? filters.approverFilterType : undefined,
search: filters.searchTerm || undefined,
slaCompliance: filters.slaComplianceFilter !== 'all' ? filters.slaComplianceFilter : undefined
};
// All Requests (admin/normal user) should always have a date range
// Default to 'all' if no date range is selected
const statsDateRange = filters.dateRange || 'all';
fetchBackendStatsRef.current(
statsDateRange,
filters.customStartDate,
filters.customEndDate,
filtersWithoutStatus
);
}, filters.searchTerm ? 500 : 0);
fetchBackendStatsRef.current(
statsDateRange,
filters.customStartDate,
filters.customEndDate,
filtersWithoutStatus
);
}, filters.searchTerm ? 500 : 0);
return () => clearTimeout(timeoutId);
return () => clearTimeout(timeoutId);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
isOrgLevel,
filters.dateRange,
filters.customStartDate,
isOrgLevel,
filters.dateRange,
filters.customStartDate,
filters.customEndDate,
filters.priorityFilter,
filters.templateTypeFilter,
@ -399,7 +399,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
isOrgLevel,
});
const hasInitialFetchRun = useRef(false);
// Initial fetch on mount - use stored page from Redux
useEffect(() => {
const storedPage = filters.currentPage || 1;
@ -407,13 +407,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
hasInitialFetchRun.current = true;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Only on mount
// Fetch when filters change or isOrgLevel changes
useEffect(() => {
if (!hasInitialFetchRun.current) return;
const prev = prevFiltersRef.current;
const hasChanged =
const hasChanged =
prev.searchTerm !== filters.searchTerm ||
prev.statusFilter !== filters.statusFilter ||
prev.priorityFilter !== filters.priorityFilter ||
@ -427,13 +427,13 @@ export function Requests({ onViewRequest }: RequestsProps) {
prev.customStartDate !== filters.customStartDate ||
prev.customEndDate !== filters.customEndDate ||
prev.isOrgLevel !== isOrgLevel;
if (!hasChanged) return;
const timeoutId = setTimeout(() => {
filters.setCurrentPage(1);
fetchRequests(1);
prevFiltersRef.current = {
searchTerm: filters.searchTerm,
statusFilter: filters.statusFilter,
@ -495,7 +495,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
closed: backendStats.closed || 0
};
}
// Fallback: Calculate from paginated data (less accurate, but better than nothing)
return calculateStatsFromFilteredData(
[], // Empty - we'll use backendStats or fallback
@ -521,8 +521,8 @@ export function Requests({ onViewRequest }: RequestsProps) {
/>
{/* Stats */}
<RequestsStats
stats={stats}
<RequestsStats
stats={stats}
onStatusFilter={(status) => {
filters.setStatusFilter(status);
}}
@ -553,7 +553,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
<Separator />
{/* Primary Filters */}
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
<div className="relative md:col-span-3 lg:col-span-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
@ -590,7 +590,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
</SelectContent>
</Select>
{/* <Select value={filters.templateTypeFilter} onValueChange={filters.setTemplateTypeFilter}>
<Select value={filters.templateTypeFilter} onValueChange={filters.setTemplateTypeFilter}>
<SelectTrigger className="h-10" data-testid="template-type-filter">
<SelectValue placeholder="All Templates" />
</SelectTrigger>
@ -599,7 +599,7 @@ export function Requests({ onViewRequest }: RequestsProps) {
<SelectItem value="CUSTOM">Non-Templatized</SelectItem>
<SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
</SelectContent>
</Select> */}
</Select>
<Select
value={filters.departmentFilter}
@ -792,23 +792,23 @@ export function Requests({ onViewRequest }: RequestsProps) {
<div className="space-y-3">
<div className="space-y-2">
<Label htmlFor="start-date">Start Date</Label>
<CustomDatePicker
value={filters.customStartDate || null}
onChange={(dateStr: string | null) => {
const date = dateStr ? new Date(dateStr) : undefined;
if (date) {
filters.setCustomStartDate(date);
if (filters.customEndDate && date > filters.customEndDate) {
filters.setCustomEndDate(date);
<CustomDatePicker
value={filters.customStartDate || null}
onChange={(dateStr: string | null) => {
const date = dateStr ? new Date(dateStr) : undefined;
if (date) {
filters.setCustomStartDate(date);
if (filters.customEndDate && date > filters.customEndDate) {
filters.setCustomEndDate(date);
}
} else {
filters.setCustomStartDate(undefined);
}
} else {
filters.setCustomStartDate(undefined);
}
}}
maxDate={new Date()}
placeholderText="dd/mm/yyyy"
className="w-full"
/>
}}
maxDate={new Date()}
placeholderText="dd/mm/yyyy"
className="w-full"
/>
</div>
<div className="space-y-2">
<Label htmlFor="end-date">End Date</Label>

16
src/pages/Requests/components/RequestCard.tsx
View File

@ -15,23 +15,23 @@ import { formatDateDDMMYYYY } from '@/utils/dateFormatter';
*/
const stripHtmlTags = (html: string): string => {
if (!html) return '';
// Check if we're in a browser environment
if (typeof document === 'undefined') {
// Fallback for SSR: use regex to strip HTML tags
return html.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
}
// Create a temporary div to parse HTML
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// Get text content (automatically strips HTML tags)
let text = tempDiv.textContent || tempDiv.innerText || '';
// Clean up extra whitespace
text = text.replace(/\s+/g, ' ').trim();
return text;
};
@ -100,18 +100,18 @@ export function RequestCard({ request, index, onViewRequest }: RequestCardProps)
{(() => {
const templateType = request?.templateType || (request as any)?.template_type || '';
const templateTypeUpper = templateType?.toUpperCase() || '';
// Direct mapping from templateType
let templateLabel = 'Non-Templatized';
let templateColor = 'bg-purple-100 !text-purple-600 border-purple-200';
if (templateTypeUpper === 'DEALER CLAIM') {
templateLabel = 'Dealer Claim';
templateColor = 'bg-blue-100 !text-blue-700 border-blue-200';
} else if (templateTypeUpper === 'TEMPLATE') {
templateLabel = 'Template';
}
return (
<Badge
variant="outline"

64
src/pages/Settings/Settings.tsx
View File

@ -1,9 +1,9 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
Settings as SettingsIcon,
Bell,
import {
Settings as SettingsIcon,
Bell,
Shield,
Palette,
Lock,
@ -54,7 +54,7 @@ export function Settings() {
const handleEnableNotifications = async () => {
setIsEnablingNotifications(true);
setShowNotificationModal(false);
try {
// Check if notifications are supported
if (!('Notification' in window)) {
@ -67,7 +67,7 @@ export function Settings() {
// Check current permission status BEFORE attempting to enable
let permission = Notification.permission;
// If permission was previously denied, show user-friendly instructions
if (permission === 'denied') {
setNotificationSuccess(false);
@ -87,7 +87,7 @@ export function Settings() {
// If permission is 'default', request it first
if (permission === 'default') {
permission = await Notification.requestPermission();
// If user denied the permission request
if (permission === 'denied') {
setNotificationSuccess(false);
@ -126,13 +126,13 @@ export function Settings() {
// Provide more specific error messages
const errorMessage = error?.message || 'Unknown error occurred';
setNotificationMessage(
errorMessage.includes('permission')
errorMessage.includes('permission')
? 'Notification permission was denied. Please enable notifications in your browser settings and try again.'
: errorMessage.includes('Service worker')
? 'Service worker registration failed. Please refresh the page and try again.'
: errorMessage.includes('token')
? 'Authentication required. Please log in again and try enabling notifications.'
: `Unable to enable push notifications: ${errorMessage}`
? 'Service worker registration failed. Please refresh the page and try again.'
: errorMessage.includes('token')
? 'Authentication required. Please log in again and try enabling notifications.'
: `Unable to enable push notifications: ${errorMessage}`
);
setShowNotificationModal(true);
} finally {
@ -147,7 +147,7 @@ export function Settings() {
<Card className="relative overflow-hidden shadow-2xl border-0 rounded-2xl">
<div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-yellow-400/20 via-transparent to-transparent"></div>
<CardContent className="relative z-10 p-6 sm:p-8 lg:p-12">
<div className="flex items-center gap-4 sm:gap-6">
<div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-2xl flex items-center justify-center shadow-xl transform hover:scale-105 transition-transform">
@ -164,47 +164,47 @@ export function Settings() {
{/* Tabs for Admin, Cards for Non-Admin */}
{isAdmin ? (
<Tabs defaultValue="user" className="w-full">
<TabsList className="grid w-full grid-cols-2 lg:grid-cols-4 mb-8 bg-slate-100 p-1 rounded-xl h-auto gap-1">
<TabsTrigger
value="user"
<TabsList className="grid w-full grid-cols-2 lg:grid-cols-5 mb-8 bg-slate-100 p-1 rounded-xl h-auto gap-1">
<TabsTrigger
value="user"
className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
>
<SettingsIcon className="w-4 h-4" />
<span className="hidden sm:inline">User Settings</span>
<span className="sm:hidden">User</span>
</TabsTrigger>
<TabsTrigger
value="roles"
<TabsTrigger
value="roles"
className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
>
<Shield className="w-4 h-4" />
<span className="hidden sm:inline">User Roles</span>
<span className="sm:hidden">Roles</span>
</TabsTrigger>
<TabsTrigger
value="system"
<TabsTrigger
value="system"
className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
>
<Sliders className="w-4 h-4" />
<span className="hidden sm:inline">Configuration</span>
<span className="sm:hidden">Config</span>
</TabsTrigger>
<TabsTrigger
value="holidays"
<TabsTrigger
value="holidays"
className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
>
<Calendar className="w-4 h-4" />
<span className="hidden sm:inline">Holidays</span>
<span className="sm:hidden">Holidays</span>
</TabsTrigger>
{/* <TabsTrigger
<TabsTrigger
value="templates"
className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
>
<FileText className="w-4 h-4" />
<span className="hidden sm:inline">Templates</span>
<span className="sm:hidden">Templates</span>
</TabsTrigger> */}
</TabsTrigger>
</TabsList>
{/* Fixed width container to prevent layout shifts */}
@ -240,12 +240,12 @@ export function Settings() {
) : (
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
<p className="text-xs text-blue-800">
Click below to register this browser for receiving push notifications.
Click below to register this browser for receiving push notifications.
This needs to be done once per browser/device.
</p>
</div>
)}
<Button
<Button
onClick={handleEnableNotifications}
disabled={isEnablingNotifications || hasSubscription}
className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
@ -315,7 +315,7 @@ export function Settings() {
</div>
</CardHeader>
<CardContent>
<Button
<Button
onClick={() => setShowPreferencesModal(true)}
className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all"
>
@ -362,7 +362,7 @@ export function Settings() {
<CardContent className="pt-6">
<div className="space-y-4">
{/* Dealer Claim Activity Settings Card */}
<Card
<Card
className="shadow-md hover:shadow-lg transition-all duration-300 border border-slate-200 rounded-lg cursor-pointer group"
onClick={() => setShowActivityTypeManager(true)}
>
@ -460,12 +460,12 @@ export function Settings() {
) : (
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
<p className="text-xs text-blue-800">
Click below to register this browser for receiving push notifications.
Click below to register this browser for receiving push notifications.
This needs to be done once per browser/device.
</p>
</div>
)}
<Button
<Button
onClick={handleEnableNotifications}
disabled={isEnablingNotifications || hasSubscription}
className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
@ -535,7 +535,7 @@ export function Settings() {
</div>
</CardHeader>
<CardContent>
<Button
<Button
onClick={() => setShowPreferencesModal(true)}
className="w-full bg-re-green hover:bg-re-green/90 text-white shadow-md hover:shadow-lg transition-all"
>
@ -548,14 +548,14 @@ export function Settings() {
</>
)}
</div>
<NotificationStatusModal
open={showNotificationModal}
onClose={() => setShowNotificationModal(false)}
success={notificationSuccess}
message={notificationMessage}
/>
<NotificationPreferencesModal
open={showPreferencesModal}
onClose={() => setShowPreferencesModal(false)}

95
src/services/workflowTemplateApi.ts
View File

@ -1,95 +0,0 @@
import apiClient from './authApi';
export interface WorkflowTemplate {
id: string;
name: string;
description: string;
category: string;
priority: 'low' | 'medium' | 'high';
estimatedTime: string;
approvers: any[];
suggestedSLA: number;
isActive: boolean;
fields?: any;
}
// Simple in-memory cache
let templatesCache: WorkflowTemplate[] | null = null;
export const getCachedTemplates = () => templatesCache;
export const createTemplate = async (templateData: Partial<WorkflowTemplate>): Promise<WorkflowTemplate> => {
const response = await apiClient.post('/templates', templateData);
const t = response.data.data;
// Map backend response
const mappedTemplate = {
id: t.templateId || t.id,
name: t.templateName || t.name,
description: t.templateDescription || t.description,
category: t.templateCategory || t.category,
priority: t.priority || 'medium',
estimatedTime: t.estimatedTime || 'Variable',
approvers: t.approvalLevelsConfig || t.approvers || [],
suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
isActive: t.isActive,
fields: t.userFieldMappings || t.fields
};
// Invalidate cache or add to it
if (templatesCache) templatesCache.push(mappedTemplate as WorkflowTemplate);
return mappedTemplate as WorkflowTemplate;
};
export const getTemplates = async (): Promise<WorkflowTemplate[]> => {
const response = await apiClient.get('/templates');
const data = response.data?.data || [];
// Map backend response to frontend interface
const mappedData = data.map((t: any) => ({
id: t.templateId || t.id,
name: t.templateName || t.name,
description: t.templateDescription || t.description,
category: t.templateCategory || t.category,
priority: t.priority || 'medium', // Default if missing
estimatedTime: t.estimatedTime || 'Variable',
approvers: t.approvalLevelsConfig || t.approvers || [],
suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
isActive: t.isActive,
fields: t.userFieldMappings || t.fields
}));
templatesCache = mappedData;
return mappedData;
};
export const deleteTemplate = async (id: string): Promise<void> => {
await apiClient.delete(`/templates/${id}`);
if (templatesCache) {
templatesCache = templatesCache.filter(t => t.id !== id);
}
};
export const updateTemplate = async (id: string, templateData: Partial<WorkflowTemplate>): Promise<WorkflowTemplate> => {
const response = await apiClient.put(`/templates/${id}`, templateData);
const t = response.data.data;
// Map backend response
const mappedTemplate = {
id: t.templateId || t.id,
name: t.templateName || t.name,
description: t.templateDescription || t.description,
category: t.templateCategory || t.category,
priority: t.priority || 'medium',
estimatedTime: t.estimatedTime || 'Variable',
approvers: t.approvalLevelsConfig || t.approvers || [],
suggestedSLA: t.defaultTatHours || t.suggestedSLA || 24,
isActive: t.isActive,
fields: t.userFieldMappings || t.fields
};
if (templatesCache) {
templatesCache = templatesCache.map(cacheItem => cacheItem.id === id ? (mappedTemplate as WorkflowTemplate) : cacheItem);
}
return mappedTemplate as WorkflowTemplate;
};