332 lines
12 KiB
TypeScript
332 lines
12 KiB
TypeScript
/**
|
||
* DeptLeadIOApprovalModal Component
|
||
* Modal for Step 3: Dept Lead Approval and IO Organization
|
||
* Allows department lead to approve request and organize IO details
|
||
*/
|
||
|
||
import { useState, useMemo } from 'react';
|
||
import * as React from 'react';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog';
|
||
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 { Badge } from '@/components/ui/badge';
|
||
import { CircleCheckBig, CircleX, Receipt, TriangleAlert } from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
import './DeptLeadIOApprovalModal.css';
|
||
|
||
interface DeptLeadIOApprovalModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onApprove: (data: {
|
||
ioNumber: string;
|
||
comments: string;
|
||
}) => Promise<void>;
|
||
onReject: (comments: string) => Promise<void>;
|
||
requestTitle?: string;
|
||
requestId?: string;
|
||
// Pre-filled IO data from IO table
|
||
preFilledIONumber?: string;
|
||
preFilledBlockedAmount?: number;
|
||
preFilledRemainingBalance?: number;
|
||
}
|
||
|
||
export function DeptLeadIOApprovalModal({
|
||
isOpen,
|
||
onClose,
|
||
onApprove,
|
||
onReject,
|
||
requestTitle,
|
||
requestId: _requestId,
|
||
preFilledIONumber,
|
||
preFilledBlockedAmount,
|
||
preFilledRemainingBalance,
|
||
}: DeptLeadIOApprovalModalProps) {
|
||
const [actionType, setActionType] = useState<'approve' | 'reject'>('approve');
|
||
const [comments, setComments] = useState('');
|
||
const [submitting, setSubmitting] = useState(false);
|
||
|
||
// Get IO number from props (read-only, from IO table)
|
||
const ioNumber = preFilledIONumber || '';
|
||
|
||
// Reset form when modal opens/closes
|
||
React.useEffect(() => {
|
||
if (isOpen) {
|
||
setComments('');
|
||
setActionType('approve');
|
||
}
|
||
}, [isOpen]);
|
||
|
||
const commentsChars = comments.length;
|
||
const maxCommentsChars = 500;
|
||
|
||
// Validate form
|
||
const isFormValid = useMemo(() => {
|
||
if (actionType === 'reject') {
|
||
return comments.trim().length > 0;
|
||
}
|
||
// For approve, need IO number (from table) and comments
|
||
return (
|
||
ioNumber.trim().length > 0 && // IO number must exist from IO table
|
||
comments.trim().length > 0
|
||
);
|
||
}, [actionType, ioNumber, comments]);
|
||
|
||
const handleSubmit = async () => {
|
||
if (!isFormValid) {
|
||
if (actionType === 'approve') {
|
||
if (!ioNumber.trim()) {
|
||
toast.error('IO number is required. Please block amount from IO tab first.');
|
||
return;
|
||
}
|
||
}
|
||
if (!comments.trim()) {
|
||
toast.error('Please provide comments');
|
||
return;
|
||
}
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
|
||
if (actionType === 'approve') {
|
||
await onApprove({
|
||
ioNumber: ioNumber.trim(),
|
||
comments: comments.trim(),
|
||
});
|
||
} else {
|
||
await onReject(comments.trim());
|
||
}
|
||
|
||
handleReset();
|
||
onClose();
|
||
} catch (error) {
|
||
console.error(`Failed to ${actionType} request:`, error);
|
||
toast.error(`Failed to ${actionType} request. Please try again.`);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleReset = () => {
|
||
setActionType('approve');
|
||
setComments('');
|
||
};
|
||
|
||
const handleClose = () => {
|
||
if (!submitting) {
|
||
handleReset();
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||
<DialogContent className="dept-lead-io-modal overflow-hidden flex flex-col">
|
||
<DialogHeader className="flex-shrink-0 px-6 pt-6 pb-3">
|
||
<div className="flex items-center gap-2 lg:gap-3 mb-2">
|
||
<div className="p-1.5 lg:p-2 rounded-lg bg-green-100">
|
||
<CircleCheckBig className="w-5 h-5 lg:w-6 lg:h-6 text-green-600" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<DialogTitle className="font-semibold text-lg lg:text-xl">
|
||
Approve and Organise IO
|
||
</DialogTitle>
|
||
<DialogDescription className="text-xs lg:text-sm mt-1">
|
||
Review IO details and provide your approval comments
|
||
</DialogDescription>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Request Info Card */}
|
||
<div className="space-y-2 lg:space-y-3 p-3 lg:p-4 bg-gray-50 rounded-lg border">
|
||
<div className="flex items-center justify-between">
|
||
<span className="font-medium text-sm lg:text-base text-gray-900">Workflow Step:</span>
|
||
<Badge variant="outline" className="font-mono text-xs">Step 3</Badge>
|
||
</div>
|
||
<div>
|
||
<span className="font-medium text-sm lg:text-base text-gray-900">Title:</span>
|
||
<p className="text-xs lg:text-sm text-gray-700 mt-1">{requestTitle || '—'}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-medium text-sm lg:text-base text-gray-900">Action:</span>
|
||
<Badge className="bg-green-100 text-green-800 border-green-200 text-xs">
|
||
<CircleCheckBig className="w-3 h-3 mr-1" />
|
||
APPROVE
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
</DialogHeader>
|
||
|
||
<div className="flex-1 overflow-y-auto overflow-x-hidden py-3 lg:py-4 px-6">
|
||
<div className="space-y-3 lg:space-y-4">
|
||
{/* Action Toggle Buttons */}
|
||
<div className="flex gap-2 p-1 bg-gray-100 rounded-lg">
|
||
<Button
|
||
type="button"
|
||
onClick={() => setActionType('approve')}
|
||
className={`flex-1 text-sm lg:text-base ${
|
||
actionType === 'approve'
|
||
? 'bg-green-600 text-white shadow-sm'
|
||
: 'text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
variant={actionType === 'approve' ? 'default' : 'ghost'}
|
||
>
|
||
<CircleCheckBig className="w-4 h-4 mr-1" />
|
||
Approve
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => setActionType('reject')}
|
||
className={`flex-1 text-sm lg:text-base ${
|
||
actionType === 'reject'
|
||
? 'bg-red-600 text-white shadow-sm'
|
||
: 'text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
variant={actionType === 'reject' ? 'destructive' : 'ghost'}
|
||
>
|
||
<CircleX className="w-4 h-4 mr-1" />
|
||
Reject
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Main Content Area - Two Column Layout on Large Screens */}
|
||
<div className="space-y-3 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-6">
|
||
{/* Left Column - IO Organisation Details (Only shown when approving) */}
|
||
{actionType === 'approve' && (
|
||
<div className="p-3 lg:p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-3">
|
||
<div className="flex items-center gap-2">
|
||
<Receipt className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
|
||
<h4 className="font-semibold text-sm lg:text-base text-blue-900">IO Organisation Details</h4>
|
||
</div>
|
||
|
||
{/* IO Number - Read-only from IO table */}
|
||
<div className="space-y-1">
|
||
<Label htmlFor="ioNumber" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
|
||
IO Number <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="ioNumber"
|
||
value={ioNumber || '—'}
|
||
disabled
|
||
readOnly
|
||
className="bg-gray-100 h-8 lg:h-9 cursor-not-allowed text-xs lg:text-sm"
|
||
/>
|
||
{!ioNumber && (
|
||
<p className="text-xs text-red-600 mt-1">
|
||
⚠️ IO number not found. Please block amount from IO tab first.
|
||
</p>
|
||
)}
|
||
{ioNumber && (
|
||
<p className="text-xs text-blue-600 mt-1">
|
||
✓ Loaded from IO table
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* IO Balance Information - Read-only */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{/* Blocked Amount Display */}
|
||
{preFilledBlockedAmount !== undefined && preFilledBlockedAmount > 0 && (
|
||
<div className="p-2 bg-green-50 border border-green-200 rounded">
|
||
<div className="flex flex-col">
|
||
<span className="text-xs font-semibold text-gray-700">Blocked Amount:</span>
|
||
<span className="text-xs lg:text-sm font-bold text-green-700 mt-1">
|
||
₹{preFilledBlockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Remaining Balance Display */}
|
||
{preFilledRemainingBalance !== undefined && preFilledRemainingBalance !== null && (
|
||
<div className="p-2 bg-blue-50 border border-blue-200 rounded">
|
||
<div className="flex flex-col">
|
||
<span className="text-xs font-semibold text-gray-700">Remaining Balance:</span>
|
||
<span className="text-xs lg:text-sm font-bold text-blue-700 mt-1">
|
||
₹{preFilledRemainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
)}
|
||
|
||
{/* Right Column - Comments & Remarks */}
|
||
<div className={`space-y-1.5 ${actionType === 'approve' ? '' : 'lg:col-span-2'}`}>
|
||
<Label htmlFor="comment" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
|
||
Comments & Remarks <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="comment"
|
||
placeholder={
|
||
actionType === 'approve'
|
||
? 'Enter your approval comments and any conditions or notes...'
|
||
: 'Enter detailed reasons for rejection...'
|
||
}
|
||
value={comments}
|
||
onChange={(e) => {
|
||
const value = e.target.value;
|
||
if (value.length <= maxCommentsChars) {
|
||
setComments(value);
|
||
}
|
||
}}
|
||
rows={4}
|
||
className="text-xs lg:text-sm min-h-[80px] lg:min-h-[100px] resize-none"
|
||
/>
|
||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||
<div className="flex items-center gap-1">
|
||
<TriangleAlert className="w-3 h-3" />
|
||
Required and visible to all
|
||
</div>
|
||
<span>{commentsChars}/{maxCommentsChars}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter className="flex-shrink-0 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pb-6 pt-3 border-t">
|
||
<Button
|
||
variant="outline"
|
||
onClick={handleClose}
|
||
disabled={submitting}
|
||
className="text-sm lg:text-base"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
onClick={handleSubmit}
|
||
disabled={!isFormValid || submitting}
|
||
className={`text-sm lg:text-base ${
|
||
actionType === 'approve'
|
||
? 'bg-green-600 hover:bg-green-700'
|
||
: 'bg-red-600 hover:bg-red-700'
|
||
} text-white`}
|
||
>
|
||
{submitting ? (
|
||
`${actionType === 'approve' ? 'Approving' : 'Rejecting'}...`
|
||
) : (
|
||
<>
|
||
<CircleCheckBig className="w-4 h-4 mr-2" />
|
||
{actionType === 'approve' ? 'Approve Request' : 'Reject Request'}
|
||
</>
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|