mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-28 11:21:18 +00:00
Rate Matrix Rules user story
This commit is contained in:
hagiye
@@ -0,0 +1,330 @@
|
||||
// components/baselineRatematrix/RateMatrixForm.tsx
|
||||
import React, { useState, useCallback } from 'react';
|
||||
// import { useForm } from 'react-hook-form';
|
||||
// import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Loader2, Save, Send, Shield, AlertTriangle } from 'lucide-react';
|
||||
import { RateTypeSection } from './RateTypeSection';
|
||||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
import { ValidationSummary } from './ValidationSummary';
|
||||
import { LoadingScreen } from '@/ui/LoadingScreen';
|
||||
import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
|
||||
import { useReferenceData } from '@/hooks/useReferenceData';
|
||||
import { queryKeys } from '@/constants/queryKeys';
|
||||
import { API_URLS } from '@/constants/apiUrls';
|
||||
import {
|
||||
RATE_TYPES,
|
||||
RATE_TYPE_LABELS,
|
||||
REQUIRED_RATE_TYPES
|
||||
} from '@/constants/rateMatrixConstants';
|
||||
import { rateMatrixRulesEngine } from '../../ruleEngine/rateMatrixRules';
|
||||
import type { RateEntry } from './types';
|
||||
|
||||
const formSchema = z.object({
|
||||
matrixName: z.string().min(1, 'Matrix name is required').max(200),
|
||||
effectiveDate: z.string().min(1, 'Effective date is required'),
|
||||
expiryDate: z.string().optional(),
|
||||
currency: z.string().min(1, 'Currency is required'),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
const createInitialSections = (): RateEntry[] => {
|
||||
return REQUIRED_RATE_TYPES.map(rateType => ({
|
||||
rateType,
|
||||
entries: [{
|
||||
validFrom: '',
|
||||
validTo: '',
|
||||
}],
|
||||
}));
|
||||
};
|
||||
|
||||
export function RateMatrixForm() {
|
||||
const [rateSections, setRateSections] = useState<RateEntry[]>(createInitialSections());
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
const [savedMatrixId, setSavedMatrixId] = useState<string | null>(null);
|
||||
const [validationErrors, setValidationErrors] = useState<any[]>([]);
|
||||
|
||||
const { isDirector } = useRateMatrixAuth();
|
||||
const { data: referenceData, isLoading: isLoadingReference } = useReferenceData();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
matrixName: '',
|
||||
effectiveDate: '',
|
||||
expiryDate: '',
|
||||
currency: 'USD',
|
||||
},
|
||||
});
|
||||
|
||||
// Save draft mutation
|
||||
const saveDraftMutation = useMutation({
|
||||
mutationFn: async (data: FormData & { rateSections: RateEntry[] }) => {
|
||||
const response = await fetch(API_URLS.RATE_MATRIX.DRAFT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to save draft');
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
setSavedMatrixId(data.id);
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
|
||||
toast.success('Draft saved successfully');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error('Failed to save draft');
|
||||
},
|
||||
});
|
||||
|
||||
// Submit for approval mutation
|
||||
const submitMutation = useMutation({
|
||||
mutationFn: async (matrixId: string) => {
|
||||
const response = await fetch(API_URLS.RATE_MATRIX.SUBMIT(matrixId), {
|
||||
method: 'POST',
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to submit');
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
|
||||
toast.success('Rate matrix submitted for executive approval and locked!');
|
||||
setShowConfirmation(false);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error('Failed to submit for approval');
|
||||
setShowConfirmation(false);
|
||||
},
|
||||
});
|
||||
|
||||
const handleValidate = useCallback(() => {
|
||||
const validation = rateMatrixRulesEngine.validate(rateSections);
|
||||
setValidationErrors([...validation.errors, ...validation.warnings]);
|
||||
|
||||
if (validation.isValid) {
|
||||
toast.success('All validations passed!');
|
||||
}
|
||||
}, [rateSections]);
|
||||
|
||||
const handleSaveDraft = async () => {
|
||||
const formData = form.getValues();
|
||||
await saveDraftMutation.mutateAsync({
|
||||
...formData,
|
||||
rateSections,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitClick = async () => {
|
||||
const isFormValid = await form.trigger();
|
||||
if (!isFormValid) return;
|
||||
|
||||
const validation = rateMatrixRulesEngine.validate(rateSections);
|
||||
setValidationErrors([...validation.errors, ...validation.warnings]);
|
||||
|
||||
if (!validation.isValid) {
|
||||
toast.error('Please fix validation errors before submitting');
|
||||
return;
|
||||
}
|
||||
|
||||
setShowConfirmation(true);
|
||||
};
|
||||
|
||||
const handleConfirmSubmit = async () => {
|
||||
const formData = form.getValues();
|
||||
|
||||
try {
|
||||
let matrixId = savedMatrixId;
|
||||
|
||||
if (!matrixId) {
|
||||
const draftResult = await saveDraftMutation.mutateAsync({
|
||||
...formData,
|
||||
rateSections,
|
||||
});
|
||||
matrixId = draftResult.id;
|
||||
}
|
||||
|
||||
await submitMutation.mutateAsync(matrixId!);
|
||||
} catch (error) {
|
||||
// Error handling done in mutations
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoadingReference) {
|
||||
return <LoadingScreen message="Loading reference data..." />;
|
||||
}
|
||||
|
||||
if (!isDirector) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Alert variant="destructive" className="max-w-md">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>Access Denied</AlertTitle>
|
||||
<AlertDescription>
|
||||
Only Directors can access the rate matrix registration.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Baseline Rate Matrix Registration
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Submit a comprehensive rate matrix for executive approval
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Director Warning */}
|
||||
<Alert variant="warning" className="mb-6 border-amber-500 bg-amber-50">
|
||||
<Shield className="h-4 w-4" />
|
||||
<AlertTitle>Director Notice</AlertTitle>
|
||||
<AlertDescription>
|
||||
Once submitted, this matrix will be locked pending Chief Executive approval.
|
||||
No edits can be made by any user until authorization is granted.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
{/* Matrix Metadata */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Matrix Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="matrixName">Matrix Name *</Label>
|
||||
<Input
|
||||
id="matrixName"
|
||||
{...form.register('matrixName')}
|
||||
placeholder="e.g., Q4 2026 Baseline Matrix"
|
||||
className={form.formState.errors.matrixName ? 'border-destructive' : ''}
|
||||
/>
|
||||
{form.formState.errors.matrixName && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.matrixName.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="effectiveDate">Effective Date *</Label>
|
||||
<Input
|
||||
id="effectiveDate"
|
||||
type="date"
|
||||
{...form.register('effectiveDate')}
|
||||
className={form.formState.errors.effectiveDate ? 'border-destructive' : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expiryDate">Expiry Date</Label>
|
||||
<Input
|
||||
id="expiryDate"
|
||||
type="date"
|
||||
{...form.register('expiryDate')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currency">Currency *</Label>
|
||||
<select
|
||||
id="currency"
|
||||
{...form.register('currency')}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
>
|
||||
{referenceData?.currencies?.map((currency: any) => (
|
||||
<option key={currency.code} value={currency.code}>
|
||||
{currency.code} - {currency.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Rate Type Sections */}
|
||||
<div className="space-y-6">
|
||||
{rateSections.map((section, index) => (
|
||||
<RateTypeSection
|
||||
key={section.rateType}
|
||||
section={section}
|
||||
sectionIndex={index}
|
||||
onUpdate={(updatedSection) => {
|
||||
const newSections = [...rateSections];
|
||||
newSections[index] = updatedSection;
|
||||
setRateSections(newSections);
|
||||
}}
|
||||
referenceData={referenceData}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Validation Errors */}
|
||||
{validationErrors.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<ValidationSummary errors={validationErrors} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="sticky bottom-6 mt-8 p-6 bg-background border rounded-lg shadow-lg flex gap-4 justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleSaveDraft}
|
||||
disabled={saveDraftMutation.isPending}
|
||||
>
|
||||
{saveDraftMutation.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save as Draft
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={handleValidate}
|
||||
>
|
||||
Validate All Rates
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmitClick}
|
||||
disabled={submitMutation.isPending}
|
||||
>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
Submit for Executive Approval
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<ConfirmationDialog
|
||||
open={showConfirmation}
|
||||
onOpenChange={setShowConfirmation}
|
||||
onConfirm={handleConfirmSubmit}
|
||||
isLoading={submitMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
// ruleEngine/rateMatrixRules.ts
|
||||
import { RATE_TYPES, REQUIRED_RATE_TYPES, MATRIX_STATUS } from '@/constants/rateMatrixConstants';
|
||||
|
||||
interface RateEntry {
|
||||
rateType: string;
|
||||
entries: Array<Record<string, any>>;
|
||||
}
|
||||
|
||||
interface ValidationRule {
|
||||
id: string;
|
||||
description: string;
|
||||
severity: 'error' | 'warning';
|
||||
validate: (data: any) => boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export class RateMatrixRulesEngine {
|
||||
private rules: ValidationRule[] = [];
|
||||
|
||||
constructor() {
|
||||
this.initializeRules();
|
||||
}
|
||||
|
||||
private initializeRules() {
|
||||
// Rule 1: All rate types must be present
|
||||
this.rules.push({
|
||||
id: 'ALL_TYPES_REQUIRED',
|
||||
description: 'Verify all 13 rate types are included',
|
||||
severity: 'error',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
const submittedTypes = rateSections.map(s => s.rateType);
|
||||
return REQUIRED_RATE_TYPES.every(type => submittedTypes.includes(type));
|
||||
},
|
||||
message: 'All 13 rate types must be included in the submission',
|
||||
});
|
||||
|
||||
// Rule 2: Each rate type must have at least one entry
|
||||
this.rules.push({
|
||||
id: 'MINIMUM_ENTRIES',
|
||||
description: 'Each rate type requires at least one rate entry',
|
||||
severity: 'error',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
return rateSections.every(section => section.entries.length > 0);
|
||||
},
|
||||
message: 'Each rate type must have at least one rate entry',
|
||||
});
|
||||
|
||||
// Rule 3: Dates must be valid
|
||||
this.rules.push({
|
||||
id: 'VALID_DATES',
|
||||
description: 'Rate entries must have valid date ranges',
|
||||
severity: 'error',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
return rateSections.every(section =>
|
||||
section.entries.every(entry => {
|
||||
if (!entry.validFrom) return false;
|
||||
if (entry.validTo && new Date(entry.validTo) <= new Date(entry.validFrom)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
);
|
||||
},
|
||||
message: 'All rate entries must have valid dates (Valid To must be after Valid From)',
|
||||
});
|
||||
|
||||
// Rule 4: Rates must be non-negative
|
||||
this.rules.push({
|
||||
id: 'NON_NEGATIVE_RATES',
|
||||
description: 'All rate values must be non-negative',
|
||||
severity: 'error',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
const numericFields = ['baseRate', 'ratePerMetricTon', 'ratePerKm',
|
||||
'ratePerTrip', 'ratePerDay', 'ratePerUnit'];
|
||||
|
||||
return rateSections.every(section =>
|
||||
section.entries.every(entry => {
|
||||
return numericFields.every(field => {
|
||||
const value = entry[field];
|
||||
return value === undefined || value === '' || Number(value) >= 0;
|
||||
});
|
||||
})
|
||||
);
|
||||
},
|
||||
message: 'Rate values cannot be negative',
|
||||
});
|
||||
|
||||
// Rule 5: Business rule - Demurrage free days should be reasonable
|
||||
this.rules.push({
|
||||
id: 'DEMURRAGE_FREE_DAYS',
|
||||
description: 'Demurrage free days should be between 0 and 30',
|
||||
severity: 'warning',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
const demurrageSection = rateSections.find(
|
||||
s => s.rateType === RATE_TYPES.DEMURRAGE
|
||||
);
|
||||
if (!demurrageSection) return true;
|
||||
|
||||
return demurrageSection.entries.every(entry => {
|
||||
const freeDays = Number(entry.freeDays);
|
||||
return !freeDays || (freeDays >= 0 && freeDays <= 30);
|
||||
});
|
||||
},
|
||||
message: 'Demurrage free days typically range from 0 to 30 days',
|
||||
});
|
||||
|
||||
// Rule 6: Cancellation fee percentage should be 0-100
|
||||
this.rules.push({
|
||||
id: 'CANCELLATION_FEE_RANGE',
|
||||
description: 'Cancellation fee percentage must be between 0 and 100',
|
||||
severity: 'error',
|
||||
validate: (rateSections: RateEntry[]) => {
|
||||
const cancellationSection = rateSections.find(
|
||||
s => s.rateType === RATE_TYPES.CANCELLATION_FEE
|
||||
);
|
||||
if (!cancellationSection) return true;
|
||||
|
||||
return cancellationSection.entries.every(entry => {
|
||||
const percentage = Number(entry.cancellationFeePercentage);
|
||||
return !percentage || (percentage >= 0 && percentage <= 100);
|
||||
});
|
||||
},
|
||||
message: 'Cancellation fee percentage must be between 0 and 100',
|
||||
});
|
||||
}
|
||||
|
||||
validate(data: RateEntry[]) {
|
||||
const errors: Array<{ ruleId: string; message: string; severity: string }> = [];
|
||||
const warnings: Array<{ ruleId: string; message: string; severity: string }> = [];
|
||||
|
||||
this.rules.forEach(rule => {
|
||||
if (!rule.validate(data)) {
|
||||
const issue = {
|
||||
ruleId: rule.id,
|
||||
message: rule.message,
|
||||
severity: rule.severity,
|
||||
};
|
||||
|
||||
if (rule.severity === 'error') {
|
||||
errors.push(issue);
|
||||
} else {
|
||||
warnings.push(issue);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
isValid: errors.length === 0,
|
||||
errors,
|
||||
warnings,
|
||||
};
|
||||
}
|
||||
|
||||
// Check if matrix can transition to a new status
|
||||
canTransition(fromStatus: string, toStatus: string, userRole: string): boolean {
|
||||
const transitions: Record<string, Array<{ to: string; allowedRoles: string[] }>> = {
|
||||
[MATRIX_STATUS.DRAFT]: [
|
||||
{ to: MATRIX_STATUS.PENDING_APPROVAL, allowedRoles: ['Director'] },
|
||||
],
|
||||
[MATRIX_STATUS.PENDING_APPROVAL]: [
|
||||
{ to: MATRIX_STATUS.ACTIVE, allowedRoles: ['Chief Executive'] },
|
||||
{ to: MATRIX_STATUS.REJECTED, allowedRoles: ['Chief Executive'] },
|
||||
],
|
||||
};
|
||||
|
||||
const allowedTransitions = transitions[fromStatus] || [];
|
||||
const transition = allowedTransitions.find(t => t.to === toStatus);
|
||||
|
||||
return transition ? transition.allowedRoles.includes(userRole) : false;
|
||||
}
|
||||
}
|
||||
|
||||
export const rateMatrixRulesEngine = new RateMatrixRulesEngine();
|
||||
Reference in New Issue
Block a user