mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
Rate Matrix Rules user story
This commit is contained in:
hagiye
@@ -27,6 +27,7 @@
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-router-dom": "^6.27.0",
|
||||
"recharts": "^3.8.1",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"zustand": "^5.0.0"
|
||||
},
|
||||
|
||||
@@ -52,3 +52,10 @@ export interface AuthTokens {
|
||||
export interface LoginResponse extends Partial<AuthTokens> {
|
||||
mfaRequired?: boolean;
|
||||
}
|
||||
|
||||
// Additional types for Matrix form test
|
||||
export interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
role: "ADMIN" | "MANAGER" | "CHIEF_EXECUTIVE";
|
||||
}
|
||||
|
||||
@@ -11,3 +11,5 @@ export const useAuth = () => {
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -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();
|
||||
@@ -16,5 +16,21 @@ export const QUERY_KEYS = {
|
||||
ROOT: "customers",
|
||||
LIST: "list",
|
||||
BY_ID: "by-id"
|
||||
}
|
||||
}
|
||||
},
|
||||
// constants/queryKeys.ts - Add these keys
|
||||
|
||||
rateMatrix: {
|
||||
all: ['rate-matrices'] as const,
|
||||
lists: () => [...QUERY_KEYS.rateMatrix.all, 'list'] as const,
|
||||
list: (filters: Record<string, unknown>) => [...QUERY_KEYS.rateMatrix.lists(), filters] as const,
|
||||
details: () => [...QUERY_KEYS.rateMatrix.all, 'detail'] as const,
|
||||
detail: (id: string) => [...QUERY_KEYS.rateMatrix.details(), id] as const,
|
||||
},
|
||||
referenceData: {
|
||||
all: ['reference-data'] as const,
|
||||
ports: () => [...QUERY_KEYS.referenceData.all, 'ports'] as const,
|
||||
cities: () => [...QUERY_KEYS.referenceData.all, 'cities'] as const,
|
||||
containerTypes: () => [...QUERY_KEYS.referenceData.all, 'container-types'] as const,
|
||||
currencies: () => [...QUERY_KEYS.referenceData.all, 'currencies'] as const,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -121,4 +121,18 @@ export const URL_CONSTANTS = {
|
||||
WEIGHT_LIMIT_RULE_BY_ID: (id: string | number) =>
|
||||
`/weight-limit-rules/${id}`,
|
||||
},
|
||||
RATE_MATRIX: {
|
||||
BASE: '/api/rate-matrices',
|
||||
DRAFT: '/api/rate-matrices/draft',
|
||||
SUBMIT: (id: string) => `/api/rate-matrices/${id}/submit`,
|
||||
AUTHORIZE: (id: string) => `/api/rate-matrices/${id}/authorize`,
|
||||
LIST: '/api/rate-matrices',
|
||||
DETAIL: (id: string) => `/api/rate-matrices/${id}`,
|
||||
},
|
||||
REFERENCE: {
|
||||
PORTS: '/api/reference/ports',
|
||||
CITIES: '/api/reference/cities',
|
||||
CONTAINER_TYPES: '/api/reference/container-types',
|
||||
CURRENCIES: '/api/reference/currencies',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
// constants/rateMatrixConstants.ts
|
||||
export const RATE_TYPES = {
|
||||
CONTAINER_IMPORT: 'container_import',
|
||||
CONTAINER_EXPORT: 'container_export',
|
||||
BULK_IMPORT: 'bulk_import',
|
||||
BULK_EXPORT: 'bulk_export',
|
||||
INTER_CITY_BULK: 'inter_city_bulk',
|
||||
INTER_CITY_CONTAINER: 'inter_city_container',
|
||||
FIRST_MILE: 'first_mile',
|
||||
LAST_MILE: 'last_mile',
|
||||
DEMURRAGE: 'demurrage',
|
||||
LASHING: 'lashing',
|
||||
DOUBLE_HANDLING: 'double_handling',
|
||||
CONTAINER_WITH_RETURN: 'container_with_return',
|
||||
CANCELLATION_FEE: 'cancellation_fee',
|
||||
} as const;
|
||||
|
||||
export const RATE_TYPE_LABELS = {
|
||||
[RATE_TYPES.CONTAINER_IMPORT]: 'Container Import Rates',
|
||||
[RATE_TYPES.CONTAINER_EXPORT]: 'Container Export Rates',
|
||||
[RATE_TYPES.BULK_IMPORT]: 'Bulk Import Rates',
|
||||
[RATE_TYPES.BULK_EXPORT]: 'Bulk Export Rates',
|
||||
[RATE_TYPES.INTER_CITY_BULK]: 'Inter City Bulk Rates',
|
||||
[RATE_TYPES.INTER_CITY_CONTAINER]: 'Inter City Container Rates',
|
||||
[RATE_TYPES.FIRST_MILE]: 'First Mile Cost Rates',
|
||||
[RATE_TYPES.LAST_MILE]: 'Last Mile Cost Rates',
|
||||
[RATE_TYPES.DEMURRAGE]: 'Demurrage Cost Rates',
|
||||
[RATE_TYPES.LASHING]: 'Lashing Cost Rates',
|
||||
[RATE_TYPES.DOUBLE_HANDLING]: 'Double Handling Cost Rates',
|
||||
[RATE_TYPES.CONTAINER_WITH_RETURN]: 'Container With Return Cost Rates',
|
||||
[RATE_TYPES.CANCELLATION_FEE]: 'Cancellation Fee Cost Rates',
|
||||
} as const;
|
||||
|
||||
export const REQUIRED_RATE_TYPES = Object.values(RATE_TYPES);
|
||||
|
||||
export const RATE_FIELDS_CONFIG = {
|
||||
[RATE_TYPES.CONTAINER_IMPORT]: [
|
||||
{ name: 'portOfLoading', label: 'Port of Loading', type: 'text', required: true },
|
||||
{ name: 'portOfDischarge', label: 'Port of Discharge', type: 'text', required: true },
|
||||
{ name: 'containerType', label: 'Container Type', type: 'select', required: true },
|
||||
{ name: 'baseRate', label: 'Base Rate', type: 'number', required: true, min: 0, step: '0.01' },
|
||||
{ name: 'baf', label: 'Bunker Adjustment Factor', type: 'number', required: false, min: 0 },
|
||||
{ name: 'caf', label: 'Currency Adjustment Factor', type: 'number', required: false, min: 0 },
|
||||
],
|
||||
[RATE_TYPES.DEMURRAGE]: [
|
||||
{ name: 'containerType', label: 'Container Type', type: 'select', required: true },
|
||||
{ name: 'freeDays', label: 'Free Days', type: 'number', required: true, min: 0 },
|
||||
{ name: 'ratePerDay', label: 'Rate per Day', type: 'number', required: true, min: 0 },
|
||||
{ name: 'maximumDays', label: 'Maximum Days', type: 'number', required: false, min: 1 },
|
||||
],
|
||||
// ... define for all 13 rate types
|
||||
} as const;
|
||||
|
||||
export const MATRIX_STATUS = {
|
||||
DRAFT: 'draft',
|
||||
PENDING_APPROVAL: 'pending_approval',
|
||||
ACTIVE: 'active',
|
||||
REJECTED: 'rejected',
|
||||
EXPIRED: 'expired',
|
||||
} as const;
|
||||
@@ -0,0 +1,123 @@
|
||||
// pages/admin/rateMatrix/RateMatrixApproval.tsx
|
||||
import React from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { LoadingScreen } from '@/ui/LoadingScreen';
|
||||
import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
|
||||
import { queryKeys } from '../../../constants/QUERY_KEYS';
|
||||
//import { MATRIX_STATUS } from '@/constants/rateMatrixConstants';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const API_URLS = {
|
||||
RATE_MATRIX: {
|
||||
LIST: '/api/rate-matrices',
|
||||
AUTHORIZE: (id: string) => `/api/rate-matrices/${id}/authorize`,
|
||||
},
|
||||
};
|
||||
import { Navigate } from 'react-router-dom';
|
||||
|
||||
export default function RateMatrixApprovalPage() {
|
||||
const { isChiefExecutive } = useRateMatrixAuth();
|
||||
const queryClient = useQueryClient();
|
||||
const pendingMatricesQueryKey = [...queryKeys.rateMatrix.all, 'pending-approval'];
|
||||
|
||||
const { data: pendingMatrices, isLoading } = useQuery({
|
||||
queryKey: pendingMatricesQueryKey,
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${API_URLS.RATE_MATRIX.LIST}?status=pending_approval`);
|
||||
return response.json();
|
||||
},
|
||||
});
|
||||
|
||||
const authorizeMutation = useMutation({
|
||||
mutationFn: async ({ matrixId, signature }: { matrixId: string; signature: string }) => {
|
||||
const response = await fetch(API_URLS.RATE_MATRIX.AUTHORIZE(matrixId), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ digitalSignature: signature }),
|
||||
});
|
||||
if (!response.ok) throw new Error('Authorization failed');
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: pendingMatricesQueryKey });
|
||||
toast.success('Rate matrix authorized successfully!');
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Failed to authorize rate matrix');
|
||||
},
|
||||
});
|
||||
|
||||
if (!isChiefExecutive) {
|
||||
return <Navigate to="/unauthorized" replace />;
|
||||
}
|
||||
|
||||
if (isLoading) return <LoadingScreen />;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8">
|
||||
<h1 className="text-3xl font-bold mb-8">Pending Rate Matrix Approvals</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
{pendingMatrices?.map((matrix: any) => (
|
||||
<Card key={matrix.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>{matrix.matrixName}</span>
|
||||
<Badge variant="secondary">{matrix.status}</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold">Effective Date</p>
|
||||
<p>{matrix.effectiveDate}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">Submitted By</p>
|
||||
<p>{matrix.createdBy}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-semibold mb-2">Rate Types Included:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{matrix.rateEntries?.map((entry: any) => (
|
||||
<Badge key={entry.id} variant="outline">
|
||||
{entry.rateType}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
onClick={() => {
|
||||
// Implement digital signature collection
|
||||
const signature = prompt('Enter digital signature:');
|
||||
if (signature) {
|
||||
authorizeMutation.mutate({
|
||||
matrixId: matrix.id,
|
||||
signature
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={authorizeMutation.isPending}
|
||||
>
|
||||
Authorize & Release
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
Request Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// pages/admin/rateMatrix/RateMatrixRegistration.tsx
|
||||
import React from 'react';
|
||||
import { RateMatrixForm } from '@/components/baselineRatematrix/RateMatrixForm';
|
||||
import { useRateMatrixAuth } from '../../../auth/hooks/useAuth';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
// Local lightweight fallback for LoadingScreen to avoid import errors
|
||||
const LoadingScreen: React.FC<{ message?: string }> = ({ message = 'Loading...' }) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
|
||||
<div>{message}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function RateMatrixRegistrationPage() {
|
||||
const { isDirector, isLoading } = useRateMatrixAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingScreen message="Checking permissions..." />;
|
||||
}
|
||||
|
||||
if (!isDirector) {
|
||||
return <Navigate to="/unauthorized" replace />;
|
||||
}
|
||||
|
||||
return <RateMatrixForm />;
|
||||
}
|
||||
@@ -2,6 +2,18 @@
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
{ "path": "./tsconfig.node.json" },
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "src",
|
||||
"paths": {
|
||||
"@/*": ["*"],
|
||||
|
||||
"@constants/*": ["constants/*"],
|
||||
"@components/*": ["components/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@@ -210,6 +210,9 @@ importers:
|
||||
recharts:
|
||||
specifier: ^3.8.1
|
||||
version: 3.8.1(@types/react@18.3.29)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1)
|
||||
sonner:
|
||||
specifier: ^2.0.7
|
||||
version: 2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
|
||||
tailwind-merge:
|
||||
specifier: ^3.6.0
|
||||
version: 3.6.0
|
||||
|
||||
Reference in New Issue
Block a user