yazan/car_mms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo2

Browse Source
This commit is contained in:
yznahmad
2026-03-08 14:27:16 +03:00
parent 66c151653e
commit 11b58b68c3
22 changed files with 4652 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
app/components/vehicles/VehicleList.tsx
View File

@@ -249,12 +249,140 @@ export function VehicleList({
</p>
</div>
) : (
<DataTable
data={vehicles}
columns={columns}
loading={isLoading}
emptyMessage="لم يتم العثور على أي مركبات"
/>
<>
{/* Desktop Table View */}
<div className="hidden lg:block">
<DataTable
data={vehicles}
columns={columns}
loading={isLoading}
emptyMessage="لم يتم العثور على أي مركبات"
/>
</div>
{/* Mobile Card View */}
<div className="lg:hidden divide-y divide-gray-200">
{vehicles.map((vehicle) => (
<div key={vehicle.id} className="p-4 hover:bg-gray-50">
<div className="space-y-3">
<div className="flex justify-between items-start">
<div className="flex-1">
<Link
to={`/vehicles/${vehicle.id}`}
className="font-mono text-lg font-medium text-blue-600 hover:text-blue-800"
>
{vehicle.plateNumber}
</Link>
<div className="text-sm font-medium text-gray-900 mt-1">
{vehicle.manufacturer} {vehicle.model} ({vehicle.year})
</div>
{vehicle.trim && (
<div className="text-sm text-gray-500">
فئة: {vehicle.trim}
</div>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>
<span className="text-gray-600">النوع: </span>
<span className="text-gray-900">{getBodyTypeLabel(vehicle.bodyType)}</span>
</div>
<div>
<span className="text-gray-600">الوقود: </span>
<span className="text-gray-900">{getFuelLabel(vehicle.fuel)}</span>
</div>
<div>
<span className="text-gray-600">ناقل الحركة: </span>
<span className="text-gray-900">{getTransmissionLabel(vehicle.transmission)}</span>
</div>
<div>
<span className="text-gray-600">الاستخدام: </span>
<span className="text-gray-900">{getUseTypeLabel(vehicle.useType)}</span>
</div>
</div>
<div className="text-sm">
<Link
to={`/customers/${vehicle.owner.id}`}
className="font-medium text-blue-600 hover:text-blue-800"
>
المالك: {vehicle.owner.name}
</Link>
{vehicle.owner.phone && (
<div className="text-gray-500 mt-1" dir="ltr">
{vehicle.owner.phone}
</div>
)}
</div>
{vehicle.lastVisitDate && (
<div className="text-sm text-gray-600">
آخر زيارة: {formatDate(vehicle.lastVisitDate)}
</div>
)}
<Flex className="flex-wrap gap-2 pt-2">
{onViewVehicle ? (
<Button
size="sm"
variant="outline"
onClick={() => onViewVehicle(vehicle)}
disabled={isLoading}
className="flex-1 min-w-[80px]"
>
عرض
</Button>
) : (
<Link to={`/vehicles/${vehicle.id}`} className="flex-1 min-w-[80px]">
<Button
size="sm"
variant="outline"
disabled={isLoading}
className="w-full"
>
عرض
</Button>
</Link>
)}
<Button
size="sm"
variant="outline"
onClick={() => onEditVehicle(vehicle)}
disabled={isLoading}
className="flex-1 min-w-[80px]"
>
تعديل
</Button>
<Form method="post" className="flex-1 min-w-[80px]">
<input type="hidden" name="_action" value="delete" />
<input type="hidden" name="id" value={vehicle.id} />
<Button
type="submit"
size="sm"
variant="outline"
className="text-red-600 border-red-300 hover:bg-red-50 w-full"
disabled={isLoading || deletingVehicleId === vehicle.id}
onClick={(e) => {
e.preventDefault();
if (window.confirm("هل أنت متأكد من حذف هذه المركبة؟")) {
setDeletingVehicleId(vehicle.id);
(e.target as HTMLButtonElement).form?.submit();
}
}}
>
{deletingVehicleId === vehicle.id ? "جاري الحذف..." : "حذف"}
</Button>
</Form>
</Flex>
</div>
</div>
))}
</div>
</>
)}
</div>