uat and production merged after adding admim template activiy type in the admin setting and soe bug fixes
This commit is contained in:
commit
6c5398f433
81
src/App.tsx
81
src/App.tsx
@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
|
||||
import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-dom';
|
||||
import { PageLayout } from '@/components/layout/PageLayout';
|
||||
import { Dashboard } from '@/pages/Dashboard';
|
||||
import { OpenRequests } from '@/pages/OpenRequests';
|
||||
@ -21,6 +21,9 @@ 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';
|
||||
@ -290,10 +293,6 @@ function AppRoutes({ onLogout }: AppProps) {
|
||||
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) => {
|
||||
@ -638,6 +637,66 @@ function AppRoutes({ onLogout }: AppProps) {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 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"
|
||||
@ -803,15 +862,9 @@ function AppRoutes({ onLogout }: AppProps) {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Admin Control Panel */}
|
||||
<Route
|
||||
path="/admin"
|
||||
element={
|
||||
<PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
|
||||
<Admin />
|
||||
</PageLayout>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</Routes>
|
||||
|
||||
<Toaster
|
||||
|
||||
@ -73,6 +73,7 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
|
||||
{ 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)
|
||||
@ -114,8 +115,8 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
|
||||
|
||||
// Work note related notifications should open Work Notes tab
|
||||
if (notification.notificationType === 'mention' ||
|
||||
notification.notificationType === 'comment' ||
|
||||
notification.notificationType === 'worknote') {
|
||||
notification.notificationType === 'comment' ||
|
||||
notification.notificationType === 'worknote') {
|
||||
navigationUrl += '?tab=worknotes';
|
||||
}
|
||||
|
||||
@ -248,21 +249,24 @@ export function PageLayout({ children, currentPage = 'dashboard', onNavigate, on
|
||||
</div>
|
||||
<div className="p-3 flex-1 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
{menuItems.map((item) => (
|
||||
{menuItems.filter(item => !item.adminOnly || (user as any)?.role === 'ADMIN').map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
onNavigate?.(item.id);
|
||||
if (item.id === 'admin/templates') {
|
||||
onNavigate?.('admin/templates');
|
||||
} else {
|
||||
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>
|
||||
@ -292,14 +296,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" />
|
||||
@ -361,9 +365,8 @@ 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">
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } 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 } from 'lucide-react';
|
||||
import { Check, Clock, Users, Flame, Target, TrendingUp, FolderOpen, ArrowLeft, Info } 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) => {
|
||||
@ -20,21 +25,48 @@ 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
|
||||
onSelectTemplate,
|
||||
adminTemplates = []
|
||||
}: 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 }}
|
||||
@ -46,101 +78,216 @@ 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">
|
||||
Choose Your Request Type
|
||||
{viewMode === 'main' ? 'Choose Your Request Type' : 'Organization Templates'}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600" data-testid="template-selection-description">
|
||||
Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
|
||||
{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.'}
|
||||
</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
|
||||
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"
|
||||
>
|
||||
{templates.map((template) => (
|
||||
<motion.div
|
||||
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={`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'
|
||||
{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'
|
||||
}`}
|
||||
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>
|
||||
{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>
|
||||
</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`}
|
||||
onClick={!isDisabled ? () => handleTemplateClick(template) : undefined}
|
||||
data-testid={`template-card-${template.id}-clickable`}
|
||||
>
|
||||
{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>
|
||||
<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 →
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Template Details Card */}
|
||||
<AnimatePresence>
|
||||
{selectedTemplate && (
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</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 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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,12 +19,15 @@ 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
|
||||
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="max-w-6xl mx-auto">
|
||||
<div className={`${containerMaxWidth} 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">
|
||||
@ -65,17 +68,16 @@ 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-between mb-2" data-testid="wizard-stepper-desktop-steps">
|
||||
<div className="flex items-center justify-center gap-4 mb-2" data-testid="wizard-stepper-desktop-steps">
|
||||
{stepNames.map((_, index) => (
|
||||
<div key={index} className="flex items-center" data-testid={`wizard-stepper-desktop-step-${index + 1}`}>
|
||||
<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 ${
|
||||
index + 1 < currentStep
|
||||
? 'bg-green-600 text-white'
|
||||
: index + 1 === currentStep
|
||||
? 'bg-blue-600 text-white'
|
||||
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'
|
||||
: 'bg-gray-200 text-gray-600'
|
||||
}`}
|
||||
}`}
|
||||
data-testid={`wizard-stepper-desktop-step-${index + 1}-indicator`}
|
||||
>
|
||||
{index + 1 < currentStep ? (
|
||||
@ -86,9 +88,8 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
|
||||
</div>
|
||||
{index < stepNames.length - 1 && (
|
||||
<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'
|
||||
}`}
|
||||
className={`flex-1 h-0.5 mx-2 ${index + 1 < currentStep ? 'bg-green-500' : 'bg-gray-200'
|
||||
}`}
|
||||
data-testid={`wizard-stepper-desktop-step-${index + 1}-connector`}
|
||||
/>
|
||||
)}
|
||||
@ -96,15 +97,14 @@ export function WizardStepper({ currentStep, totalSteps, stepNames }: WizardStep
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="hidden lg:flex justify-between text-xs text-gray-600 mt-2"
|
||||
className="hidden lg:flex justify-between text-xs text-gray-600 mt-2 px-1"
|
||||
data-testid="wizard-stepper-desktop-labels"
|
||||
>
|
||||
{stepNames.map((step, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`${
|
||||
index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
|
||||
}`}
|
||||
className={`${index + 1 === currentStep ? 'font-semibold text-green-600' : ''
|
||||
}`}
|
||||
data-testid={`wizard-stepper-desktop-label-${index + 1}`}
|
||||
>
|
||||
{step}
|
||||
|
||||
@ -10,6 +10,7 @@ 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: {
|
||||
|
||||
228
src/pages/Admin/Templates/AdminTemplatesList.tsx
Normal file
228
src/pages/Admin/Templates/AdminTemplatesList.tsx
Normal file
@ -0,0 +1,228 @@
|
||||
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
Normal file
503
src/pages/Admin/Templates/CreateTemplate.tsx
Normal file
@ -0,0 +1,503 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
232
src/pages/CreateAdminRequest/CreateAdminRequest.tsx
Normal file
232
src/pages/CreateAdminRequest/CreateAdminRequest.tsx
Normal file
@ -0,0 +1,232 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,171 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { FileText, CheckCircle2, 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>
|
||||
);
|
||||
}
|
||||
@ -13,7 +13,7 @@
|
||||
* - components/ - UI components
|
||||
*/
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } 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 } from '@/hooks/useCreateRequestForm';
|
||||
import { useCreateRequestForm, RequestTemplate } from '@/hooks/useCreateRequestForm';
|
||||
import { useWizardNavigation } from '@/hooks/useWizardNavigation';
|
||||
import { useRequestModals } from './hooks/useRequestModals';
|
||||
import { useCreateRequestSubmission } from './hooks/useCreateRequestSubmission';
|
||||
@ -31,6 +31,10 @@ 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';
|
||||
@ -64,6 +68,35 @@ 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,
|
||||
@ -75,7 +108,7 @@ export function CreateRequest({
|
||||
documentPolicy,
|
||||
existingDocuments,
|
||||
setExistingDocuments,
|
||||
} = useCreateRequestForm(isEditing, editRequestId, REQUEST_TEMPLATES);
|
||||
} = useCreateRequestForm(isEditing, editRequestId, allTemplates);
|
||||
|
||||
const {
|
||||
currentStep,
|
||||
@ -84,6 +117,7 @@ export function CreateRequest({
|
||||
isStepValid,
|
||||
nextStep: wizardNextStep,
|
||||
prevStep: wizardPrevStep,
|
||||
goToStep,
|
||||
} = useWizardNavigation(isEditing, selectedTemplate, formData);
|
||||
|
||||
// Document management state
|
||||
@ -142,22 +176,37 @@ 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 (currentStep === 1 || currentStep === 3 || currentStep === 4) {
|
||||
// On steps 1, 3, or 4, navigate back to previous screen using browser history
|
||||
// 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 (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 });
|
||||
}
|
||||
}
|
||||
@ -210,6 +259,7 @@ export function CreateRequest({
|
||||
templates={REQUEST_TEMPLATES}
|
||||
selectedTemplate={selectedTemplate}
|
||||
onSelectTemplate={selectTemplate}
|
||||
adminTemplates={adminTemplates}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
|
||||
@ -32,6 +32,7 @@ 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({
|
||||
@ -48,6 +49,7 @@ export function useCreateRequestHandlers({
|
||||
systemPolicy,
|
||||
onPolicyViolation,
|
||||
onSubmit,
|
||||
goToStep,
|
||||
}: UseHandlersOptions) {
|
||||
const navigate = useNavigate();
|
||||
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
||||
@ -66,6 +68,11 @@ export function useCreateRequestHandlers({
|
||||
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) => {
|
||||
|
||||
95
src/services/workflowTemplateApi.ts
Normal file
95
src/services/workflowTemplateApi.ts
Normal file
@ -0,0 +1,95 @@
|
||||
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;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user