616 lines
27 KiB
TypeScript
616 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter, useParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import AdminLogo from '../../../../components/AdminLogo';
|
|
import Notification from '../../../../components/Notification';
|
|
|
|
interface JobAction {
|
|
id: number;
|
|
action_type: string;
|
|
part_type: string | null;
|
|
part_id: string | null;
|
|
custom_price: number;
|
|
labour_fee: number;
|
|
created_at: string;
|
|
service_record: number;
|
|
}
|
|
|
|
interface Vehicle {
|
|
id: string;
|
|
make: string;
|
|
model: string;
|
|
capacity: number | null;
|
|
yom: number | null;
|
|
owner: number | null;
|
|
}
|
|
|
|
interface ServiceRecord {
|
|
id: number;
|
|
created_at: string;
|
|
vehicle: string;
|
|
metadata: string | null;
|
|
status: number;
|
|
Vehicles?: Vehicle;
|
|
}
|
|
|
|
export default function EditJobPage() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const jobId = params?.id as string;
|
|
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [serviceRecord, setServiceRecord] = useState<ServiceRecord | null>(null);
|
|
const [jobActions, setJobActions] = useState<JobAction[]>([]);
|
|
|
|
// Form state
|
|
const [status, setStatus] = useState<number>(0);
|
|
const [metadata, setMetadata] = useState('');
|
|
const [mileage, setMileage] = useState('');
|
|
const [showAddAction, setShowAddAction] = useState(false);
|
|
const [editingAction, setEditingAction] = useState<JobAction | null>(null);
|
|
|
|
// Notification state
|
|
const [notification, setNotification] = useState<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);
|
|
|
|
// New action form state
|
|
const [newActionType, setNewActionType] = useState('');
|
|
const [newPartType, setNewPartType] = useState('');
|
|
const [newPartId, setNewPartId] = useState('');
|
|
const [newCustomPrice, setNewCustomPrice] = useState('');
|
|
const [newLabourFee, setNewLabourFee] = useState('');
|
|
|
|
useEffect(() => {
|
|
const adminLoggedIn = sessionStorage.getItem('adminLoggedIn');
|
|
if (adminLoggedIn !== 'true') {
|
|
router.push('/admin');
|
|
return;
|
|
}
|
|
setIsAuthenticated(true);
|
|
if (jobId) {
|
|
loadJobData();
|
|
}
|
|
}, [jobId, router]);
|
|
|
|
const loadJobData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [recordResponse, actionsResponse] = await Promise.all([
|
|
fetch(`/api/admin/jobs/${jobId}`),
|
|
fetch(`/api/admin/jobs/${jobId}/actions`)
|
|
]);
|
|
|
|
if (recordResponse.ok) {
|
|
const recordData = await recordResponse.json();
|
|
setServiceRecord(recordData);
|
|
setStatus(recordData.status);
|
|
setMetadata(recordData.metadata || '');
|
|
setMileage(recordData.mileage ? recordData.mileage.toString() : '');
|
|
}
|
|
|
|
if (actionsResponse.ok) {
|
|
const actionsData = await actionsResponse.json();
|
|
setJobActions(actionsData);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading job data:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveServiceRecord = async () => {
|
|
try {
|
|
setSaving(true);
|
|
const response = await fetch(`/api/admin/jobs/${jobId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
status,
|
|
metadata: metadata || null,
|
|
mileage: mileage ? parseInt(mileage) : null,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Reload data
|
|
await loadJobData();
|
|
setNotification({ message: 'Service record updated successfully!', type: 'success' });
|
|
} else {
|
|
const error = await response.json();
|
|
setNotification({ message: `Failed to update: ${error.error}`, type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving service record:', error);
|
|
setNotification({ message: 'Failed to save changes', type: 'error' });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleAddAction = async () => {
|
|
try {
|
|
setSaving(true);
|
|
const response = await fetch(`/api/admin/jobs/${jobId}/actions`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action_type: newActionType,
|
|
part_type: newPartType || null,
|
|
part_id: newPartId || null,
|
|
custom_price: newCustomPrice ? parseInt(newCustomPrice) : -1,
|
|
labour_fee: newLabourFee ? parseInt(newLabourFee) : 0,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
await loadJobData();
|
|
setShowAddAction(false);
|
|
// Reset form
|
|
setNewActionType('');
|
|
setNewPartType('');
|
|
setNewPartId('');
|
|
setNewCustomPrice('');
|
|
setNewLabourFee('');
|
|
setNotification({ message: 'Job action added successfully!', type: 'success' });
|
|
} else {
|
|
const error = await response.json();
|
|
setNotification({ message: `Failed to add action: ${error.error}`, type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding action:', error);
|
|
setNotification({ message: 'Failed to add action', type: 'error' });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleEditAction = (action: JobAction) => {
|
|
setEditingAction(action);
|
|
setNewActionType(action.action_type);
|
|
setNewPartType(action.part_type || '');
|
|
setNewPartId(action.part_id || '');
|
|
setNewCustomPrice(action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price.toString() : '');
|
|
setNewLabourFee(action.labour_fee > 0 ? action.labour_fee.toString() : '');
|
|
setShowAddAction(true);
|
|
};
|
|
|
|
const handleUpdateAction = async () => {
|
|
if (!editingAction) return;
|
|
|
|
try {
|
|
setSaving(true);
|
|
const response = await fetch(`/api/admin/jobs/${jobId}/actions/${editingAction.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action_type: newActionType,
|
|
part_type: newPartType || null,
|
|
part_id: newPartId || null,
|
|
custom_price: newCustomPrice ? parseInt(newCustomPrice) : -1,
|
|
labour_fee: newLabourFee ? parseInt(newLabourFee) : 0,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
await loadJobData();
|
|
setShowAddAction(false);
|
|
setEditingAction(null);
|
|
// Reset form
|
|
setNewActionType('');
|
|
setNewPartType('');
|
|
setNewPartId('');
|
|
setNewCustomPrice('');
|
|
setNewLabourFee('');
|
|
setNotification({ message: 'Job action updated successfully!', type: 'success' });
|
|
} else {
|
|
const error = await response.json();
|
|
setNotification({ message: `Failed to update action: ${error.error}`, type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating action:', error);
|
|
setNotification({ message: 'Failed to update action', type: 'error' });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAction = async (actionId: number) => {
|
|
if (!confirm('Are you sure you want to delete this job action?')) return;
|
|
|
|
try {
|
|
setSaving(true);
|
|
const response = await fetch(`/api/admin/jobs/${jobId}/actions/${actionId}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
await loadJobData();
|
|
setNotification({ message: 'Job action deleted successfully!', type: 'success' });
|
|
} else {
|
|
const error = await response.json();
|
|
setNotification({ message: `Failed to delete action: ${error.error}`, type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting action:', error);
|
|
setNotification({ message: 'Failed to delete action', type: 'error' });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const cancelEdit = () => {
|
|
setShowAddAction(false);
|
|
setEditingAction(null);
|
|
setNewActionType('');
|
|
setNewPartType('');
|
|
setNewPartId('');
|
|
setNewCustomPrice('');
|
|
setNewLabourFee('');
|
|
};
|
|
|
|
const getStatusLabel = (status: number) => {
|
|
switch (status) {
|
|
case 0: return 'Pending';
|
|
case 1: return 'Active';
|
|
case 2: return 'Waiting for Customer Response';
|
|
case 3: return 'Waiting for Parts';
|
|
case 10: return 'Completed';
|
|
default: return 'Unknown';
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: number) => {
|
|
switch (status) {
|
|
case 0: return 'text-white/60';
|
|
case 1: return 'text-cyan-400';
|
|
case 2: return 'text-yellow-400';
|
|
case 3: return 'text-orange-400';
|
|
case 10: return 'text-green-400';
|
|
default: return 'text-white/60';
|
|
}
|
|
};
|
|
|
|
if (!isAuthenticated) {
|
|
return null;
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<>
|
|
<AdminLogo />
|
|
<div className="relative min-h-screen bg-black tech-grid scanlines">
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse mx-auto mb-4"></div>
|
|
<p className="text-white/60 font-mono uppercase tracking-wider">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AdminLogo />
|
|
<div className="relative min-h-screen bg-black tech-grid scanlines">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-6xl px-4 py-12">
|
|
<div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
|
|
<div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
|
|
<div className="relative">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
|
|
<h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
|
|
Edit Job #{serviceRecord?.id}
|
|
</h1>
|
|
</div>
|
|
<Link
|
|
href="/admin/jobs"
|
|
className="text-sm font-medium text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider border border-white/20 px-3 py-1 rounded hover:border-white/40 hover:bg-white/10"
|
|
>
|
|
← Back to Jobs
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Vehicle Info */}
|
|
{serviceRecord?.Vehicles && (
|
|
<div className="mb-6 rounded-lg border-2 border-white/20 bg-black/50 p-4">
|
|
<div className="mb-2 text-xl font-bold text-white font-mono">
|
|
{serviceRecord.Vehicles.id}
|
|
</div>
|
|
<div className="text-white/80 font-mono">
|
|
{serviceRecord.Vehicles.make} {serviceRecord.Vehicles.model}
|
|
{serviceRecord.Vehicles.capacity && ` (${serviceRecord.Vehicles.capacity}cc)`}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Service Record Edit Section */}
|
|
<div className="mb-8 space-y-4 rounded-lg border-2 border-white/20 bg-black/50 p-6">
|
|
<h2 className="mb-4 text-xl font-bold text-white uppercase tracking-wider">
|
|
Service Record Details
|
|
</h2>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Status <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={status}
|
|
onChange={(e) => setStatus(parseInt(e.target.value))}
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
>
|
|
<option value={0}>Pending</option>
|
|
<option value={1}>Active</option>
|
|
<option value={2}>Waiting for Customer Response</option>
|
|
<option value={3}>Waiting for Parts</option>
|
|
<option value={10}>Completed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Mileage (km)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={mileage}
|
|
onChange={(e) => setMileage(e.target.value)}
|
|
placeholder="Enter vehicle mileage..."
|
|
min="0"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Metadata / Notes
|
|
</label>
|
|
<textarea
|
|
value={metadata}
|
|
onChange={(e) => setMetadata(e.target.value)}
|
|
placeholder="Enter notes or metadata..."
|
|
rows={3}
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSaveServiceRecord}
|
|
disabled={saving}
|
|
className="rounded-lg border border-white/30 bg-white/5 px-6 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] font-mono uppercase tracking-wider disabled:opacity-50"
|
|
>
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Job Actions Section */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-white uppercase tracking-wider">
|
|
Job Actions
|
|
</h2>
|
|
{!showAddAction && (
|
|
<button
|
|
onClick={() => setShowAddAction(true)}
|
|
className="rounded-lg border border-cyan-500/50 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 transition-all hover:bg-cyan-500/20 hover:border-cyan-500 hover:shadow-[0_0_15px_rgba(0,191,255,0.4)] font-mono uppercase tracking-wider"
|
|
>
|
|
+ Add Action
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Add/Edit Action Form */}
|
|
{showAddAction && (
|
|
<div className="rounded-lg border-2 border-white/20 bg-black/50 p-6">
|
|
<h3 className="mb-4 text-lg font-bold text-white uppercase tracking-wider">
|
|
{editingAction ? 'Edit Job Action' : 'Add New Job Action'}
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Action Type <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newActionType}
|
|
onChange={(e) => setNewActionType(e.target.value)}
|
|
placeholder="e.g., Oil Change, Tire Replacement..."
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Part Type
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newPartType}
|
|
onChange={(e) => setNewPartType(e.target.value)}
|
|
placeholder="e.g., Engine Oil, Brake Pad..."
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Part ID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newPartId}
|
|
onChange={(e) => setNewPartId(e.target.value)}
|
|
placeholder="Part identifier..."
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Custom Price (රු.)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={newCustomPrice}
|
|
onChange={(e) => setNewCustomPrice(e.target.value)}
|
|
placeholder="0"
|
|
min="0"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white uppercase tracking-wider">
|
|
Labour Fee (රු.)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={newLabourFee}
|
|
onChange={(e) => setNewLabourFee(e.target.value)}
|
|
placeholder="0"
|
|
min="0"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={editingAction ? handleUpdateAction : handleAddAction}
|
|
disabled={saving || !newActionType.trim()}
|
|
className="rounded-lg border border-cyan-500/50 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 transition-all hover:bg-cyan-500/20 hover:border-cyan-500 hover:shadow-[0_0_15px_rgba(0,191,255,0.4)] font-mono uppercase tracking-wider disabled:opacity-50"
|
|
>
|
|
{saving ? 'Saving...' : editingAction ? 'Update Action' : 'Add Action'}
|
|
</button>
|
|
<button
|
|
onClick={cancelEdit}
|
|
disabled={saving}
|
|
className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 font-mono uppercase tracking-wider disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Job Actions Table */}
|
|
{jobActions.length === 0 ? (
|
|
<div className="rounded-lg border border-white/10 bg-black/50 p-8 text-center">
|
|
<p className="text-white/60 font-mono uppercase tracking-wider">
|
|
No job actions found. Add one to get started.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="border-b-2 border-white/20">
|
|
<th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Action Type</th>
|
|
<th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Part Type</th>
|
|
<th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Part ID</th>
|
|
<th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Labour Fee</th>
|
|
<th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Parts Price</th>
|
|
<th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Total</th>
|
|
<th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{jobActions.map((action, index) => {
|
|
const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
|
|
const rowTotal = action.labour_fee + partsPrice;
|
|
return (
|
|
<tr
|
|
key={action.id}
|
|
className={`border-b border-white/10 hover:bg-white/5 transition-colors ${index % 2 === 0 ? 'bg-black/30' : 'bg-black/50'}`}
|
|
>
|
|
<td className="px-4 py-3 text-white font-mono font-semibold">{action.action_type}</td>
|
|
<td className="px-4 py-3 text-white/80 font-mono">{action.part_type || '-'}</td>
|
|
<td className="px-4 py-3 text-white/80 font-mono">{action.part_id || '-'}</td>
|
|
<td className="px-4 py-3 text-right text-white font-mono">රු.{action.labour_fee || 0}</td>
|
|
<td className="px-4 py-3 text-right text-white font-mono">{partsPrice > 0 ? `රු.${partsPrice}` : '-'}</td>
|
|
<td className="px-4 py-3 text-right text-white font-mono font-semibold">රු.{rowTotal}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleEditAction(action)}
|
|
disabled={saving}
|
|
className="rounded-lg border border-white/30 bg-white/5 px-3 py-1 text-xs font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 font-mono uppercase tracking-wider disabled:opacity-50"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteAction(action.id)}
|
|
disabled={saving}
|
|
className="rounded-lg border border-red-500/50 bg-red-500/10 px-3 py-1 text-xs font-medium text-red-400 transition-all hover:bg-red-500/20 hover:border-red-500 font-mono uppercase tracking-wider disabled:opacity-50"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
<tr className="border-t-2 border-white/30 bg-black/70 font-bold">
|
|
<td colSpan={5} className="px-4 py-4 text-right text-white font-mono uppercase tracking-wider">
|
|
Total Cost:
|
|
</td>
|
|
<td className="px-4 py-4 text-right text-white font-mono text-lg font-bold">
|
|
රු.{jobActions.reduce((sum, action) => {
|
|
const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
|
|
return sum + action.labour_fee + partsPrice;
|
|
}, 0)}
|
|
</td>
|
|
<td className="px-4 py-4"></td>
|
|
</tr>
|
|
<tr className="bg-black/70">
|
|
<td colSpan={7} className="px-4 pb-2 text-right text-white/60 font-mono text-xs">
|
|
<div className="flex justify-end gap-4">
|
|
<span>Labour: රු.{jobActions.reduce((sum, action) => sum + action.labour_fee, 0)}</span>
|
|
<span>Parts: රු.{jobActions.reduce((sum, action) => {
|
|
const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
|
|
return sum + partsPrice;
|
|
}, 0)}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{notification && (
|
|
<Notification
|
|
message={notification.message}
|
|
type={notification.type}
|
|
onClose={() => setNotification(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|