feat: add frontend ownership-costs feature (refs #29)
Milestone 4: Complete frontend with: - Types aligned with backend schema - API client for CRUD operations - React Query hooks with optimistic updates - OwnershipCostForm with all 6 cost types - OwnershipCostsList with edit/delete actions - Mobile-friendly (44px touch targets) - Full dark mode support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
@@ -1,60 +1,28 @@
|
|||||||
/**
|
/**
|
||||||
* @ai-summary API calls for ownership-costs feature
|
* @ai-summary API client for ownership-costs feature
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { apiClient } from '../../../core/api/client';
|
import { apiClient } from '../../../core/api/client';
|
||||||
import {
|
import type { CreateOwnershipCostRequest, OwnershipCost, UpdateOwnershipCostRequest } from '../types/ownership-costs.types';
|
||||||
OwnershipCost,
|
|
||||||
CreateOwnershipCostRequest,
|
|
||||||
UpdateOwnershipCostRequest,
|
|
||||||
OwnershipCostStats
|
|
||||||
} from '../types/ownership-costs.types';
|
|
||||||
|
|
||||||
export const ownershipCostsApi = {
|
export const ownershipCostsApi = {
|
||||||
/**
|
async list(filters?: { vehicleId?: string }) {
|
||||||
* Get all ownership costs for a vehicle
|
const res = await apiClient.get<OwnershipCost[]>('/ownership-costs', { params: filters });
|
||||||
*/
|
return res.data;
|
||||||
getByVehicle: async (vehicleId: string): Promise<OwnershipCost[]> => {
|
|
||||||
const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}`);
|
|
||||||
return response.data;
|
|
||||||
},
|
},
|
||||||
|
async get(id: string) {
|
||||||
/**
|
const res = await apiClient.get<OwnershipCost>(`/ownership-costs/${id}`);
|
||||||
* Get a single ownership cost by ID
|
return res.data;
|
||||||
*/
|
|
||||||
getById: async (id: string): Promise<OwnershipCost> => {
|
|
||||||
const response = await apiClient.get(`/ownership-costs/${id}`);
|
|
||||||
return response.data;
|
|
||||||
},
|
},
|
||||||
|
async create(payload: CreateOwnershipCostRequest) {
|
||||||
/**
|
const res = await apiClient.post<OwnershipCost>('/ownership-costs', payload);
|
||||||
* Create a new ownership cost
|
return res.data;
|
||||||
*/
|
|
||||||
create: async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
|
|
||||||
const response = await apiClient.post('/ownership-costs', data);
|
|
||||||
return response.data;
|
|
||||||
},
|
},
|
||||||
|
async update(id: string, payload: UpdateOwnershipCostRequest) {
|
||||||
/**
|
const res = await apiClient.put<OwnershipCost>(`/ownership-costs/${id}`, payload);
|
||||||
* Update an existing ownership cost
|
return res.data;
|
||||||
*/
|
|
||||||
update: async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
|
|
||||||
const response = await apiClient.put(`/ownership-costs/${id}`, data);
|
|
||||||
return response.data;
|
|
||||||
},
|
},
|
||||||
|
async remove(id: string) {
|
||||||
/**
|
|
||||||
* Delete an ownership cost
|
|
||||||
*/
|
|
||||||
delete: async (id: string): Promise<void> => {
|
|
||||||
await apiClient.delete(`/ownership-costs/${id}`);
|
await apiClient.delete(`/ownership-costs/${id}`);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Get aggregated cost stats for a vehicle
|
|
||||||
*/
|
|
||||||
getVehicleStats: async (vehicleId: string): Promise<OwnershipCostStats> => {
|
|
||||||
const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}/stats`);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,214 +1,235 @@
|
|||||||
/**
|
/**
|
||||||
* @ai-summary Form component for adding/editing ownership costs
|
* @ai-summary Form component for creating/editing ownership costs
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
import React from 'react';
|
||||||
import { Button } from '../../../shared-minimal/components/Button';
|
import { Button } from '../../../shared-minimal/components/Button';
|
||||||
import {
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||||
OwnershipCost,
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||||
OwnershipCostType,
|
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
|
||||||
CostInterval,
|
import dayjs from 'dayjs';
|
||||||
COST_TYPE_LABELS,
|
import { useCreateOwnershipCost } from '../hooks/useOwnershipCosts';
|
||||||
INTERVAL_LABELS
|
import type { OwnershipCostType } from '../types/ownership-costs.types';
|
||||||
} from '../types/ownership-costs.types';
|
import { useVehicles } from '../../vehicles/hooks/useVehicles';
|
||||||
|
import type { Vehicle } from '../../vehicles/types/vehicles.types';
|
||||||
|
import { useDocumentsList } from '../../documents/hooks/useDocuments';
|
||||||
|
import type { DocumentRecord } from '../../documents/types/documents.types';
|
||||||
|
|
||||||
interface OwnershipCostFormProps {
|
interface OwnershipCostFormProps {
|
||||||
vehicleId: string;
|
onSuccess?: () => void;
|
||||||
initialData?: OwnershipCost;
|
onCancel?: () => void;
|
||||||
onSubmit: (data: {
|
|
||||||
costType: OwnershipCostType;
|
|
||||||
description?: string;
|
|
||||||
amount: number;
|
|
||||||
interval: CostInterval;
|
|
||||||
startDate: string;
|
|
||||||
endDate?: string;
|
|
||||||
}) => Promise<void>;
|
|
||||||
onCancel: () => void;
|
|
||||||
loading?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({
|
export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({ onSuccess, onCancel }) => {
|
||||||
initialData,
|
const [vehicleID, setVehicleID] = React.useState<string>('');
|
||||||
onSubmit,
|
const [costType, setCostType] = React.useState<OwnershipCostType>('insurance');
|
||||||
onCancel,
|
const [amount, setAmount] = React.useState<string>('');
|
||||||
loading,
|
const [description, setDescription] = React.useState<string>('');
|
||||||
}) => {
|
const [periodStart, setPeriodStart] = React.useState<string>('');
|
||||||
const [costType, setCostType] = useState<OwnershipCostType>(initialData?.costType || 'insurance');
|
const [periodEnd, setPeriodEnd] = React.useState<string>('');
|
||||||
const [description, setDescription] = useState(initialData?.description || '');
|
const [notes, setNotes] = React.useState<string>('');
|
||||||
const [amount, setAmount] = useState(initialData?.amount?.toString() || '');
|
const [documentID, setDocumentID] = React.useState<string>('');
|
||||||
const [interval, setInterval] = useState<CostInterval>(initialData?.interval || 'monthly');
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
const [startDate, setStartDate] = useState(initialData?.startDate || new Date().toISOString().split('T')[0]);
|
|
||||||
const [endDate, setEndDate] = useState(initialData?.endDate || '');
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const { data: vehicles } = useVehicles();
|
||||||
if (initialData) {
|
const { data: documents } = useDocumentsList({ vehicleId: vehicleID });
|
||||||
setCostType(initialData.costType);
|
const create = useCreateOwnershipCost();
|
||||||
setDescription(initialData.description || '');
|
|
||||||
setAmount(initialData.amount.toString());
|
const resetForm = () => {
|
||||||
setInterval(initialData.interval);
|
setVehicleID('');
|
||||||
setStartDate(initialData.startDate);
|
setCostType('insurance');
|
||||||
setEndDate(initialData.endDate || '');
|
setAmount('');
|
||||||
}
|
setDescription('');
|
||||||
}, [initialData]);
|
setPeriodStart('');
|
||||||
|
setPeriodEnd('');
|
||||||
|
setNotes('');
|
||||||
|
setDocumentID('');
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
// Validate amount
|
if (!vehicleID) {
|
||||||
|
setError('Please select a vehicle.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const parsedAmount = parseFloat(amount);
|
const parsedAmount = parseFloat(amount);
|
||||||
if (isNaN(parsedAmount) || parsedAmount < 0) {
|
if (isNaN(parsedAmount) || parsedAmount <= 0) {
|
||||||
setError('Please enter a valid amount');
|
setError('Please enter a valid positive amount.');
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate dates
|
|
||||||
if (!startDate) {
|
|
||||||
setError('Start date is required');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (endDate && new Date(endDate) < new Date(startDate)) {
|
|
||||||
setError('End date must be after start date');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await onSubmit({
|
await create.mutateAsync({
|
||||||
costType,
|
vehicleId: vehicleID,
|
||||||
description: description.trim() || undefined,
|
documentId: documentID || undefined,
|
||||||
|
costType: costType,
|
||||||
amount: parsedAmount,
|
amount: parsedAmount,
|
||||||
interval,
|
description: description.trim() || undefined,
|
||||||
startDate,
|
periodStart: periodStart || undefined,
|
||||||
endDate: endDate || undefined,
|
periodEnd: periodEnd || undefined,
|
||||||
|
notes: notes.trim() || undefined,
|
||||||
});
|
});
|
||||||
} catch (err: unknown) {
|
|
||||||
const message = err instanceof Error ? err.message : 'Failed to save cost';
|
resetForm();
|
||||||
setError(message);
|
onSuccess?.();
|
||||||
|
} catch (err: any) {
|
||||||
|
setError(err?.message || 'Failed to create ownership cost');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const isEditMode = !!initialData;
|
const vehicleLabel = (v: Vehicle) => {
|
||||||
|
if (v.nickname && v.nickname.trim().length > 0) return v.nickname.trim();
|
||||||
|
const parts = [v.year, v.make, v.model, v.trimLevel].filter(Boolean);
|
||||||
|
const primary = parts.join(' ').trim();
|
||||||
|
if (primary.length > 0) return primary;
|
||||||
|
if (v.vin && v.vin.length > 0) return v.vin;
|
||||||
|
return v.id.slice(0, 8) + '...';
|
||||||
|
};
|
||||||
|
|
||||||
|
const documentLabel = (doc: DocumentRecord) => {
|
||||||
|
return doc.title || `Document ${doc.id.slice(0, 8)}`;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||||
{error && (
|
<form onSubmit={handleSubmit} className="w-full">
|
||||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md text-sm">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
|
||||||
{error}
|
<div className="flex flex-col">
|
||||||
</div>
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Vehicle</label>
|
||||||
)}
|
<select
|
||||||
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
|
value={vehicleID}
|
||||||
|
onChange={(e) => setVehicleID(e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Select vehicle...</option>
|
||||||
|
{(vehicles || []).map((v: Vehicle) => (
|
||||||
|
<option key={v.id} value={v.id}>{vehicleLabel(v)}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="flex flex-col">
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Cost Type</label>
|
||||||
Cost Type
|
<select
|
||||||
</label>
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
<select
|
value={costType}
|
||||||
value={costType}
|
onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
|
||||||
onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
|
>
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
|
<option value="insurance">Insurance</option>
|
||||||
style={{ fontSize: '16px' }}
|
<option value="registration">Registration</option>
|
||||||
>
|
<option value="tax">Tax</option>
|
||||||
{(Object.entries(COST_TYPE_LABELS) as [OwnershipCostType, string][]).map(([value, label]) => (
|
<option value="inspection">Inspection</option>
|
||||||
<option key={value} value={value}>
|
<option value="parking">Parking</option>
|
||||||
{label}
|
<option value="other">Other</option>
|
||||||
</option>
|
</select>
|
||||||
))}
|
</div>
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div className="flex flex-col md:col-span-2">
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Amount</label>
|
||||||
Description (optional)
|
<div className="relative">
|
||||||
</label>
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-titanio">$</span>
|
||||||
<input
|
<input
|
||||||
type="text"
|
className="h-11 min-h-[44px] w-full rounded-lg border pl-7 pr-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
value={description}
|
type="number"
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
step="0.01"
|
||||||
placeholder="e.g., Geico Full Coverage"
|
min="0.01"
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
|
value={amount}
|
||||||
style={{ fontSize: '16px' }}
|
placeholder="0.00"
|
||||||
/>
|
onChange={(e) => setAmount(e.target.value)}
|
||||||
</div>
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="flex flex-col md:col-span-2">
|
||||||
<div>
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Description (optional)</label>
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
<input
|
||||||
Amount
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
</label>
|
type="text"
|
||||||
<input
|
value={description}
|
||||||
type="number"
|
placeholder="e.g., State Farm Full Coverage"
|
||||||
value={amount}
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
onChange={(e) => setAmount(e.target.value)}
|
/>
|
||||||
placeholder="0.00"
|
</div>
|
||||||
inputMode="decimal"
|
|
||||||
step="0.01"
|
<div className="flex flex-col">
|
||||||
min="0"
|
<DatePicker
|
||||||
required
|
label="Period Start (optional)"
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
|
value={periodStart ? dayjs(periodStart) : null}
|
||||||
style={{ fontSize: '16px' }}
|
onChange={(newValue) => setPeriodStart(newValue?.format('YYYY-MM-DD') || '')}
|
||||||
/>
|
format="MM/DD/YYYY"
|
||||||
|
slotProps={{
|
||||||
|
textField: {
|
||||||
|
fullWidth: true,
|
||||||
|
sx: {
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
minHeight: 44,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<DatePicker
|
||||||
|
label="Period End (optional)"
|
||||||
|
value={periodEnd ? dayjs(periodEnd) : null}
|
||||||
|
onChange={(newValue) => setPeriodEnd(newValue?.format('YYYY-MM-DD') || '')}
|
||||||
|
format="MM/DD/YYYY"
|
||||||
|
slotProps={{
|
||||||
|
textField: {
|
||||||
|
fullWidth: true,
|
||||||
|
sx: {
|
||||||
|
'& .MuiOutlinedInput-root': {
|
||||||
|
minHeight: 44,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:col-span-2">
|
||||||
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Notes (optional)</label>
|
||||||
|
<textarea
|
||||||
|
className="min-h-[88px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:col-span-2">
|
||||||
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Link to Document (optional)</label>
|
||||||
|
<select
|
||||||
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
||||||
|
value={documentID}
|
||||||
|
onChange={(e) => setDocumentID(e.target.value)}
|
||||||
|
disabled={!vehicleID}
|
||||||
|
>
|
||||||
|
<option value="">No document</option>
|
||||||
|
{(documents || []).map((doc: DocumentRecord) => (
|
||||||
|
<option key={doc.id} value={doc.id}>{documentLabel(doc)}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
{error && (
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
<div className="text-red-600 dark:text-red-400 text-sm mt-3">{error}</div>
|
||||||
Payment Interval
|
)}
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={interval}
|
|
||||||
onChange={(e) => setInterval(e.target.value as CostInterval)}
|
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
|
|
||||||
style={{ fontSize: '16px' }}
|
|
||||||
>
|
|
||||||
{(Object.entries(INTERVAL_LABELS) as [CostInterval, string][]).map(([value, label]) => (
|
|
||||||
<option key={value} value={value}>
|
|
||||||
{label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||||
<div>
|
<Button type="submit" className="min-h-[44px]">Create Ownership Cost</Button>
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
<Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
|
||||||
Start Date
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
value={startDate}
|
|
||||||
onChange={(e) => setStartDate(e.target.value)}
|
|
||||||
required
|
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
|
|
||||||
style={{ fontSize: '16px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
<div>
|
</LocalizationProvider>
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
|
|
||||||
End Date (optional)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
value={endDate}
|
|
||||||
onChange={(e) => setEndDate(e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
|
|
||||||
style={{ fontSize: '16px' }}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-gray-500 dark:text-titanio mt-1">
|
|
||||||
Leave blank for ongoing costs
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 justify-end pt-4">
|
|
||||||
<Button variant="secondary" onClick={onCancel} type="button">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" loading={loading}>
|
|
||||||
{isEditMode ? 'Update Cost' : 'Add Cost'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default OwnershipCostForm;
|
||||||
|
|||||||
@@ -2,65 +2,38 @@
|
|||||||
* @ai-summary List component for displaying ownership costs
|
* @ai-summary List component for displaying ownership costs
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import {
|
import type { OwnershipCost, OwnershipCostType } from '../types/ownership-costs.types';
|
||||||
OwnershipCost,
|
import { useOwnershipCostsList, useDeleteOwnershipCost } from '../hooks/useOwnershipCosts';
|
||||||
CreateOwnershipCostRequest,
|
|
||||||
COST_TYPE_LABELS,
|
|
||||||
INTERVAL_LABELS
|
|
||||||
} from '../types/ownership-costs.types';
|
|
||||||
import { OwnershipCostForm } from './OwnershipCostForm';
|
|
||||||
import { useOwnershipCosts } from '../hooks/useOwnershipCosts';
|
|
||||||
import { Button } from '../../../shared-minimal/components/Button';
|
|
||||||
|
|
||||||
interface OwnershipCostsListProps {
|
interface OwnershipCostsListProps {
|
||||||
vehicleId: string;
|
vehicleId?: string;
|
||||||
|
onEdit?: (cost: OwnershipCost) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
|
const COST_TYPE_LABELS: Record<OwnershipCostType, string> = {
|
||||||
vehicleId,
|
insurance: 'Insurance',
|
||||||
}) => {
|
registration: 'Registration',
|
||||||
const { costs, isLoading, error, createCost, updateCost, deleteCost } = useOwnershipCosts(vehicleId);
|
tax: 'Tax',
|
||||||
const [showForm, setShowForm] = useState(false);
|
inspection: 'Inspection',
|
||||||
const [editingCost, setEditingCost] = useState<OwnershipCost | null>(null);
|
parking: 'Parking',
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
other: 'Other',
|
||||||
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
};
|
||||||
|
|
||||||
const handleSubmit = async (data: Omit<CreateOwnershipCostRequest, 'vehicleId'>) => {
|
export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({ vehicleId, onEdit }) => {
|
||||||
setIsSubmitting(true);
|
const { data: costs, isLoading, error } = useOwnershipCostsList(vehicleId ? { vehicleId } : undefined);
|
||||||
try {
|
const deleteMutation = useDeleteOwnershipCost();
|
||||||
if (editingCost) {
|
const [deleteConfirm, setDeleteConfirm] = React.useState<string | null>(null);
|
||||||
await updateCost(editingCost.id, data);
|
|
||||||
} else {
|
|
||||||
await createCost({ ...data, vehicleId });
|
|
||||||
}
|
|
||||||
setShowForm(false);
|
|
||||||
setEditingCost(null);
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = (cost: OwnershipCost) => {
|
|
||||||
setEditingCost(cost);
|
|
||||||
setShowForm(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async (id: string) => {
|
const handleDelete = async (id: string) => {
|
||||||
try {
|
try {
|
||||||
await deleteCost(id);
|
await deleteMutation.mutateAsync(id);
|
||||||
setDeleteConfirm(null);
|
setDeleteConfirm(null);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Failed to delete cost:', err);
|
console.error('Failed to delete cost:', err);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
setShowForm(false);
|
|
||||||
setEditingCost(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Format currency
|
|
||||||
const formatCurrency = (value: number): string => {
|
const formatCurrency = (value: number): string => {
|
||||||
return value.toLocaleString(undefined, {
|
return value.toLocaleString(undefined, {
|
||||||
minimumFractionDigits: 2,
|
minimumFractionDigits: 2,
|
||||||
@@ -68,7 +41,6 @@ export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// Format date
|
|
||||||
const formatDate = (dateString: string): string => {
|
const formatDate = (dateString: string): string => {
|
||||||
return new Date(dateString).toLocaleDateString();
|
return new Date(dateString).toLocaleDateString();
|
||||||
};
|
};
|
||||||
@@ -84,127 +56,95 @@ export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
// Show a subtle message if the feature isn't set up yet, don't block the page
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="text-sm text-gray-500 dark:text-titanio p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
|
||||||
<div className="flex justify-between items-center">
|
<p>Unable to load ownership costs.</p>
|
||||||
<h3 className="text-lg font-medium text-gray-900 dark:text-avus">
|
</div>
|
||||||
Recurring Costs
|
);
|
||||||
</h3>
|
}
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500 dark:text-titanio p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
|
if (!costs || costs.length === 0) {
|
||||||
<p>Recurring costs tracking is being set up.</p>
|
return (
|
||||||
<p className="text-xs mt-1 text-gray-400 dark:text-canna">Run migrations to enable this feature.</p>
|
<div className="text-center py-8 text-gray-500 dark:text-titanio">
|
||||||
</div>
|
<p>No ownership costs recorded yet.</p>
|
||||||
|
<p className="text-sm mt-1">Track insurance, registration, taxes, and other recurring vehicle costs.</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-3">
|
||||||
<div className="flex justify-between items-center">
|
{costs.map((cost) => (
|
||||||
<h3 className="text-lg font-medium text-gray-900 dark:text-avus">
|
<div
|
||||||
Recurring Costs
|
key={cost.id}
|
||||||
</h3>
|
className="p-4 bg-white dark:bg-jet rounded-lg border border-gray-200 dark:border-silverstone"
|
||||||
{!showForm && (
|
>
|
||||||
<Button
|
<div className="flex justify-between items-start">
|
||||||
variant="secondary"
|
<div className="flex-1">
|
||||||
onClick={() => setShowForm(true)}
|
<div className="flex items-center gap-2">
|
||||||
className="text-sm"
|
<span className="font-medium text-gray-900 dark:text-avus">
|
||||||
>
|
{COST_TYPE_LABELS[cost.costType]}
|
||||||
Add Cost
|
</span>
|
||||||
</Button>
|
</div>
|
||||||
)}
|
{cost.description && (
|
||||||
</div>
|
<p className="text-sm text-gray-500 dark:text-titanio mt-1">
|
||||||
|
{cost.description}
|
||||||
{showForm && (
|
</p>
|
||||||
<div className="p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
|
)}
|
||||||
<h4 className="text-md font-medium text-gray-900 dark:text-avus mb-4">
|
{(cost.periodStart || cost.periodEnd) && (
|
||||||
{editingCost ? 'Edit Cost' : 'Add New Cost'}
|
<p className="text-xs text-gray-400 dark:text-canna mt-2">
|
||||||
</h4>
|
{cost.periodStart && formatDate(cost.periodStart)}
|
||||||
<OwnershipCostForm
|
{cost.periodStart && cost.periodEnd && ' - '}
|
||||||
vehicleId={vehicleId}
|
{cost.periodEnd && formatDate(cost.periodEnd)}
|
||||||
initialData={editingCost || undefined}
|
</p>
|
||||||
onSubmit={handleSubmit}
|
)}
|
||||||
onCancel={handleCancel}
|
{cost.notes && (
|
||||||
loading={isSubmitting}
|
<p className="text-xs text-gray-500 dark:text-titanio mt-2">
|
||||||
/>
|
{cost.notes}
|
||||||
</div>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
{costs.length === 0 && !showForm ? (
|
<div className="text-right ml-4">
|
||||||
<div className="text-center py-8 text-gray-500 dark:text-titanio">
|
<div className="text-lg font-semibold text-gray-900 dark:text-avus">
|
||||||
<p>No recurring costs added yet.</p>
|
${formatCurrency(cost.amount)}
|
||||||
<p className="text-sm mt-1">Track insurance, registration, and other recurring vehicle costs.</p>
|
</div>
|
||||||
</div>
|
<div className="flex gap-2 mt-2">
|
||||||
) : (
|
{onEdit && (
|
||||||
<div className="space-y-3">
|
<button
|
||||||
{costs.map((cost) => (
|
onClick={() => onEdit(cost)}
|
||||||
<div
|
className="text-sm text-primary-600 dark:text-abudhabi hover:underline min-h-[44px] px-2"
|
||||||
key={cost.id}
|
>
|
||||||
className="p-4 bg-white dark:bg-jet rounded-lg border border-gray-200 dark:border-silverstone"
|
Edit
|
||||||
>
|
</button>
|
||||||
<div className="flex justify-between items-start">
|
)}
|
||||||
<div>
|
{deleteConfirm === cost.id ? (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex gap-1">
|
||||||
<span className="font-medium text-gray-900 dark:text-avus">
|
|
||||||
{COST_TYPE_LABELS[cost.costType]}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs px-2 py-0.5 bg-gray-100 dark:bg-silverstone text-gray-600 dark:text-titanio rounded">
|
|
||||||
{INTERVAL_LABELS[cost.interval]}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{cost.description && (
|
|
||||||
<p className="text-sm text-gray-500 dark:text-titanio mt-1">
|
|
||||||
{cost.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<p className="text-xs text-gray-400 dark:text-canna mt-2">
|
|
||||||
{formatDate(cost.startDate)}
|
|
||||||
{cost.endDate ? ` - ${formatDate(cost.endDate)}` : ' - Ongoing'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-lg font-semibold text-gray-900 dark:text-avus">
|
|
||||||
${formatCurrency(cost.amount)}
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2 mt-2">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => handleEdit(cost)}
|
onClick={() => handleDelete(cost.id)}
|
||||||
className="text-sm text-primary-600 dark:text-abudhabi hover:underline"
|
className="text-sm text-red-600 hover:underline min-h-[44px] px-2"
|
||||||
>
|
>
|
||||||
Edit
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeleteConfirm(null)}
|
||||||
|
className="text-sm text-gray-500 hover:underline min-h-[44px] px-2"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
{deleteConfirm === cost.id ? (
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => handleDelete(cost.id)}
|
|
||||||
className="text-sm text-red-600 hover:underline"
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeleteConfirm(null)}
|
|
||||||
className="text-sm text-gray-500 hover:underline"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => setDeleteConfirm(cost.id)}
|
|
||||||
className="text-sm text-red-600 hover:underline"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setDeleteConfirm(cost.id)}
|
||||||
|
className="text-sm text-red-600 hover:underline min-h-[44px] px-2"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,75 +1,150 @@
|
|||||||
/**
|
/**
|
||||||
* @ai-summary React hook for ownership costs management
|
* @ai-summary React Query hooks for ownership-costs feature
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { ownershipCostsApi } from '../api/ownership-costs.api';
|
import { ownershipCostsApi } from '../api/ownership-costs.api';
|
||||||
import {
|
import type { CreateOwnershipCostRequest, UpdateOwnershipCostRequest, OwnershipCost } from '../types/ownership-costs.types';
|
||||||
OwnershipCost,
|
|
||||||
CreateOwnershipCostRequest,
|
|
||||||
UpdateOwnershipCostRequest
|
|
||||||
} from '../types/ownership-costs.types';
|
|
||||||
|
|
||||||
interface UseOwnershipCostsResult {
|
export function useOwnershipCostsList(filters?: { vehicleId?: string }) {
|
||||||
costs: OwnershipCost[];
|
const queryKey = ['ownership-costs', filters];
|
||||||
isLoading: boolean;
|
const query = useQuery({
|
||||||
error: string | null;
|
queryKey,
|
||||||
refresh: () => Promise<void>;
|
queryFn: () => ownershipCostsApi.list(filters),
|
||||||
createCost: (data: CreateOwnershipCostRequest) => Promise<OwnershipCost>;
|
networkMode: 'offlineFirst',
|
||||||
updateCost: (id: string, data: UpdateOwnershipCostRequest) => Promise<OwnershipCost>;
|
});
|
||||||
deleteCost: (id: string) => Promise<void>;
|
return query;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useOwnershipCosts(vehicleId: string): UseOwnershipCostsResult {
|
export function useOwnershipCost(id?: string) {
|
||||||
const [costs, setCosts] = useState<OwnershipCost[]>([]);
|
const query = useQuery({
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
queryKey: ['ownership-cost', id],
|
||||||
const [error, setError] = useState<string | null>(null);
|
queryFn: () => ownershipCostsApi.get(id!),
|
||||||
|
enabled: !!id,
|
||||||
const fetchCosts = useCallback(async () => {
|
networkMode: 'offlineFirst',
|
||||||
if (!vehicleId) return;
|
});
|
||||||
|
return query;
|
||||||
setIsLoading(true);
|
}
|
||||||
setError(null);
|
|
||||||
try {
|
export function useCreateOwnershipCost() {
|
||||||
const data = await ownershipCostsApi.getByVehicle(vehicleId);
|
const qc = useQueryClient();
|
||||||
setCosts(data);
|
return useMutation({
|
||||||
} catch (err: unknown) {
|
mutationFn: (payload: CreateOwnershipCostRequest) => ownershipCostsApi.create(payload),
|
||||||
const message = err instanceof Error ? err.message : 'Failed to load ownership costs';
|
onMutate: async (newCost) => {
|
||||||
setError(message);
|
await qc.cancelQueries({ queryKey: ['ownership-costs'] });
|
||||||
console.error('Failed to fetch ownership costs:', err);
|
|
||||||
} finally {
|
const previousCosts = qc.getQueryData(['ownership-costs']);
|
||||||
setIsLoading(false);
|
|
||||||
}
|
const optimisticCost: OwnershipCost = {
|
||||||
}, [vehicleId]);
|
id: `temp-${Date.now()}`,
|
||||||
|
vehicleId: newCost.vehicleId,
|
||||||
useEffect(() => {
|
documentId: newCost.documentId || null,
|
||||||
fetchCosts();
|
costType: newCost.costType,
|
||||||
}, [fetchCosts]);
|
amount: newCost.amount,
|
||||||
|
description: newCost.description || null,
|
||||||
const createCost = useCallback(async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
|
periodStart: newCost.periodStart || null,
|
||||||
const newCost = await ownershipCostsApi.create(data);
|
periodEnd: newCost.periodEnd || null,
|
||||||
setCosts(prev => [newCost, ...prev]);
|
notes: newCost.notes || null,
|
||||||
return newCost;
|
createdAt: new Date().toISOString(),
|
||||||
}, []);
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
const updateCost = useCallback(async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
|
|
||||||
const updated = await ownershipCostsApi.update(id, data);
|
qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
|
||||||
setCosts(prev => prev.map(cost => cost.id === id ? updated : cost));
|
return old ? [optimisticCost, ...old] : [optimisticCost];
|
||||||
return updated;
|
});
|
||||||
}, []);
|
|
||||||
|
return { previousCosts };
|
||||||
const deleteCost = useCallback(async (id: string): Promise<void> => {
|
},
|
||||||
await ownershipCostsApi.delete(id);
|
onError: (_err, _newCost, context) => {
|
||||||
setCosts(prev => prev.filter(cost => cost.id !== id));
|
if (context?.previousCosts) {
|
||||||
}, []);
|
qc.setQueryData(['ownership-costs'], context.previousCosts);
|
||||||
|
}
|
||||||
return {
|
},
|
||||||
costs,
|
onSettled: () => {
|
||||||
isLoading,
|
qc.invalidateQueries({ queryKey: ['ownership-costs'] });
|
||||||
error,
|
},
|
||||||
refresh: fetchCosts,
|
networkMode: 'offlineFirst',
|
||||||
createCost,
|
});
|
||||||
updateCost,
|
}
|
||||||
deleteCost,
|
|
||||||
};
|
export function useUpdateOwnershipCost(id: string) {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (payload: UpdateOwnershipCostRequest) => ownershipCostsApi.update(id, payload),
|
||||||
|
onMutate: async (updateData) => {
|
||||||
|
await qc.cancelQueries({ queryKey: ['ownership-cost', id] });
|
||||||
|
await qc.cancelQueries({ queryKey: ['ownership-costs'] });
|
||||||
|
|
||||||
|
const previousCost = qc.getQueryData(['ownership-cost', id]);
|
||||||
|
const previousCosts = qc.getQueryData(['ownership-costs']);
|
||||||
|
|
||||||
|
qc.setQueryData(['ownership-cost', id], (old: OwnershipCost | undefined) => {
|
||||||
|
if (!old) return old;
|
||||||
|
return {
|
||||||
|
...old,
|
||||||
|
...updateData,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
|
||||||
|
if (!old) return old;
|
||||||
|
return old.map(cost =>
|
||||||
|
cost.id === id
|
||||||
|
? { ...cost, ...updateData, updatedAt: new Date().toISOString() }
|
||||||
|
: cost
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return { previousCost, previousCosts };
|
||||||
|
},
|
||||||
|
onError: (_err, _updateData, context) => {
|
||||||
|
if (context?.previousCost) {
|
||||||
|
qc.setQueryData(['ownership-cost', id], context.previousCost);
|
||||||
|
}
|
||||||
|
if (context?.previousCosts) {
|
||||||
|
qc.setQueryData(['ownership-costs'], context.previousCosts);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['ownership-cost', id] });
|
||||||
|
qc.invalidateQueries({ queryKey: ['ownership-costs'] });
|
||||||
|
},
|
||||||
|
networkMode: 'offlineFirst',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteOwnershipCost() {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (id: string) => ownershipCostsApi.remove(id),
|
||||||
|
onMutate: async (id) => {
|
||||||
|
await qc.cancelQueries({ queryKey: ['ownership-costs'] });
|
||||||
|
await qc.cancelQueries({ queryKey: ['ownership-cost', id] });
|
||||||
|
|
||||||
|
const previousCosts = qc.getQueryData(['ownership-costs']);
|
||||||
|
const previousCost = qc.getQueryData(['ownership-cost', id]);
|
||||||
|
|
||||||
|
qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
|
||||||
|
if (!old) return old;
|
||||||
|
return old.filter(cost => cost.id !== id);
|
||||||
|
});
|
||||||
|
|
||||||
|
qc.removeQueries({ queryKey: ['ownership-cost', id] });
|
||||||
|
|
||||||
|
return { previousCosts, previousCost, deletedId: id };
|
||||||
|
},
|
||||||
|
onError: (_err, _id, context) => {
|
||||||
|
if (context?.previousCosts) {
|
||||||
|
qc.setQueryData(['ownership-costs'], context.previousCosts);
|
||||||
|
}
|
||||||
|
if (context?.previousCost && context.deletedId) {
|
||||||
|
qc.setQueryData(['ownership-cost', context.deletedId], context.previousCost);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['ownership-costs'] });
|
||||||
|
},
|
||||||
|
networkMode: 'offlineFirst',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* @ai-summary Public API for ownership-costs frontend feature
|
* @ai-summary Public API for ownership-costs feature
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Export components
|
// Export components
|
||||||
@@ -7,7 +7,13 @@ export { OwnershipCostForm } from './components/OwnershipCostForm';
|
|||||||
export { OwnershipCostsList } from './components/OwnershipCostsList';
|
export { OwnershipCostsList } from './components/OwnershipCostsList';
|
||||||
|
|
||||||
// Export hooks
|
// Export hooks
|
||||||
export { useOwnershipCosts } from './hooks/useOwnershipCosts';
|
export {
|
||||||
|
useOwnershipCostsList,
|
||||||
|
useOwnershipCost,
|
||||||
|
useCreateOwnershipCost,
|
||||||
|
useUpdateOwnershipCost,
|
||||||
|
useDeleteOwnershipCost,
|
||||||
|
} from './hooks/useOwnershipCosts';
|
||||||
|
|
||||||
// Export API
|
// Export API
|
||||||
export { ownershipCostsApi } from './api/ownership-costs.api';
|
export { ownershipCostsApi } from './api/ownership-costs.api';
|
||||||
@@ -17,9 +23,5 @@ export type {
|
|||||||
OwnershipCost,
|
OwnershipCost,
|
||||||
CreateOwnershipCostRequest,
|
CreateOwnershipCostRequest,
|
||||||
UpdateOwnershipCostRequest,
|
UpdateOwnershipCostRequest,
|
||||||
OwnershipCostStats,
|
|
||||||
OwnershipCostType,
|
OwnershipCostType,
|
||||||
CostInterval
|
|
||||||
} from './types/ownership-costs.types';
|
} from './types/ownership-costs.types';
|
||||||
|
|
||||||
export { COST_TYPE_LABELS, INTERVAL_LABELS } from './types/ownership-costs.types';
|
|
||||||
|
|||||||
@@ -2,23 +2,18 @@
|
|||||||
* @ai-summary Type definitions for ownership-costs feature
|
* @ai-summary Type definitions for ownership-costs feature
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Cost types supported by ownership-costs feature
|
export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'inspection' | 'parking' | 'other';
|
||||||
export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'other';
|
|
||||||
|
|
||||||
// Cost interval types
|
|
||||||
export type CostInterval = 'monthly' | 'semi_annual' | 'annual' | 'one_time';
|
|
||||||
|
|
||||||
export interface OwnershipCost {
|
export interface OwnershipCost {
|
||||||
id: string;
|
id: string;
|
||||||
userId: string;
|
|
||||||
vehicleId: string;
|
vehicleId: string;
|
||||||
documentId?: string;
|
documentId?: string | null;
|
||||||
costType: OwnershipCostType;
|
costType: OwnershipCostType;
|
||||||
description?: string;
|
|
||||||
amount: number;
|
amount: number;
|
||||||
interval: CostInterval;
|
description?: string | null;
|
||||||
startDate: string;
|
periodStart?: string | null;
|
||||||
endDate?: string;
|
periodEnd?: string | null;
|
||||||
|
notes?: string | null;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
}
|
}
|
||||||
@@ -27,44 +22,19 @@ export interface CreateOwnershipCostRequest {
|
|||||||
vehicleId: string;
|
vehicleId: string;
|
||||||
documentId?: string;
|
documentId?: string;
|
||||||
costType: OwnershipCostType;
|
costType: OwnershipCostType;
|
||||||
description?: string;
|
|
||||||
amount: number;
|
amount: number;
|
||||||
interval: CostInterval;
|
description?: string;
|
||||||
startDate: string;
|
periodStart?: string;
|
||||||
endDate?: string;
|
periodEnd?: string;
|
||||||
|
notes?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UpdateOwnershipCostRequest {
|
export interface UpdateOwnershipCostRequest {
|
||||||
documentId?: string | null;
|
documentId?: string | null;
|
||||||
costType?: OwnershipCostType;
|
costType?: OwnershipCostType;
|
||||||
description?: string | null;
|
|
||||||
amount?: number;
|
amount?: number;
|
||||||
interval?: CostInterval;
|
description?: string | null;
|
||||||
startDate?: string;
|
periodStart?: string | null;
|
||||||
endDate?: string | null;
|
periodEnd?: string | null;
|
||||||
|
notes?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aggregated cost statistics
|
|
||||||
export interface OwnershipCostStats {
|
|
||||||
insuranceCosts: number;
|
|
||||||
registrationCosts: number;
|
|
||||||
taxCosts: number;
|
|
||||||
otherCosts: number;
|
|
||||||
totalCosts: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Display labels for cost types
|
|
||||||
export const COST_TYPE_LABELS: Record<OwnershipCostType, string> = {
|
|
||||||
insurance: 'Insurance',
|
|
||||||
registration: 'Registration',
|
|
||||||
tax: 'Tax',
|
|
||||||
other: 'Other',
|
|
||||||
};
|
|
||||||
|
|
||||||
// Display labels for intervals
|
|
||||||
export const INTERVAL_LABELS: Record<CostInterval, string> = {
|
|
||||||
monthly: 'Monthly',
|
|
||||||
semi_annual: 'Semi-Annual (6 months)',
|
|
||||||
annual: 'Annual',
|
|
||||||
one_time: 'One-Time',
|
|
||||||
};
|
|
||||||
|
|||||||
Reference in New Issue
Block a user