400 lines
14 KiB
TypeScript
400 lines
14 KiB
TypeScript
import { Form, Link } from "@remix-run/react";
|
||
import { useState, useEffect } from "react";
|
||
import { DataTable, Pagination } from "~/components/ui/DataTable";
|
||
import { Button } from "~/components/ui/Button";
|
||
import { Flex } from "~/components/layout/Flex";
|
||
import { useSettings } from "~/contexts/SettingsContext";
|
||
import { TRANSMISSION_TYPES, FUEL_TYPES, USE_TYPES, BODY_TYPES } from "~/lib/constants";
|
||
import type { VehicleWithOwner } from "~/types/database";
|
||
|
||
interface VehicleListProps {
|
||
vehicles: VehicleWithOwner[];
|
||
currentPage: number;
|
||
totalPages: number;
|
||
onPageChange: (page: number) => void;
|
||
onEditVehicle: (vehicle: VehicleWithOwner) => void;
|
||
onViewVehicle?: (vehicle: VehicleWithOwner) => void;
|
||
isLoading: boolean;
|
||
actionData?: any;
|
||
}
|
||
|
||
export function VehicleList({
|
||
vehicles,
|
||
currentPage,
|
||
totalPages,
|
||
onPageChange,
|
||
onEditVehicle,
|
||
onViewVehicle,
|
||
isLoading,
|
||
actionData,
|
||
}: VehicleListProps) {
|
||
const { formatDate } = useSettings();
|
||
const [deletingVehicleId, setDeletingVehicleId] = useState<number | null>(null);
|
||
|
||
// Reset deleting state when delete action completes
|
||
useEffect(() => {
|
||
if (actionData?.success && actionData.action === "delete") {
|
||
setDeletingVehicleId(null);
|
||
}
|
||
}, [actionData]);
|
||
|
||
// Helper functions to get display labels
|
||
const getTransmissionLabel = (value: string) => {
|
||
return TRANSMISSION_TYPES.find(t => t.value === value)?.label || value;
|
||
};
|
||
|
||
const getFuelLabel = (value: string) => {
|
||
return FUEL_TYPES.find(f => f.value === value)?.label || value;
|
||
};
|
||
|
||
const getUseTypeLabel = (value: string) => {
|
||
return USE_TYPES.find(u => u.value === value)?.label || value;
|
||
};
|
||
|
||
const getBodyTypeLabel = (value: string) => {
|
||
return BODY_TYPES.find(b => b.value === value)?.label || value;
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
key: "plateNumber",
|
||
header: "رقم اللوحة",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div>
|
||
<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 text-gray-500">
|
||
المركبة رقم: {vehicle.id}
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "vehicle",
|
||
header: "تفاصيل المركبة",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div>
|
||
<div className="font-medium text-gray-900">
|
||
{vehicle.manufacturer} {vehicle.model}
|
||
</div>
|
||
<div className="text-sm text-gray-600">
|
||
{vehicle.year} • {getBodyTypeLabel(vehicle.bodyType)}
|
||
</div>
|
||
{vehicle.trim && (
|
||
<div className="text-sm text-gray-500">
|
||
فئة: {vehicle.trim}
|
||
</div>
|
||
)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "specifications",
|
||
header: "المواصفات",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div className="space-y-1">
|
||
<div className="text-sm text-gray-900">
|
||
{getTransmissionLabel(vehicle.transmission)}
|
||
</div>
|
||
<div className="text-sm text-gray-600">
|
||
{getFuelLabel(vehicle.fuel)}
|
||
</div>
|
||
{vehicle.cylinders && (
|
||
<div className="text-sm text-gray-500">
|
||
{vehicle.cylinders} أسطوانة
|
||
</div>
|
||
)}
|
||
{vehicle.engineDisplacement && (
|
||
<div className="text-sm text-gray-500">
|
||
{vehicle.engineDisplacement}L
|
||
</div>
|
||
)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "owner",
|
||
header: "المالك",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div>
|
||
<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-sm text-gray-500" dir="ltr">
|
||
{vehicle.owner.phone}
|
||
</div>
|
||
)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "useType",
|
||
header: "نوع الاستخدام",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div className="text-sm text-gray-900">
|
||
{getUseTypeLabel(vehicle.useType)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "maintenance",
|
||
header: "الصيانة",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div className="space-y-1">
|
||
{vehicle.lastVisitDate ? (
|
||
<div className="text-sm text-gray-900">
|
||
آخر زيارة: {formatDate(vehicle.lastVisitDate)}
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-gray-400">
|
||
لا توجد زيارات
|
||
</div>
|
||
)}
|
||
{vehicle.suggestedNextVisitDate && (
|
||
<div className="text-sm text-orange-600">
|
||
الزيارة التالية: {formatDate(vehicle.suggestedNextVisitDate)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "createdDate",
|
||
header: "تاريخ التسجيل",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<div className="text-sm text-gray-600">
|
||
{formatDate(vehicle.createdDate)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "actions",
|
||
header: "الإجراءات",
|
||
render: (vehicle: VehicleWithOwner) => (
|
||
<Flex className="flex-wrap gap-2">
|
||
{onViewVehicle ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => onViewVehicle(vehicle)}
|
||
disabled={isLoading}
|
||
>
|
||
عرض
|
||
</Button>
|
||
) : (
|
||
<Link to={`/vehicles/${vehicle.id}`}>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={isLoading}
|
||
>
|
||
عرض
|
||
</Button>
|
||
</Link>
|
||
)}
|
||
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => onEditVehicle(vehicle)}
|
||
disabled={isLoading}
|
||
>
|
||
تعديل
|
||
</Button>
|
||
|
||
<Form method="post" className="inline">
|
||
<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"
|
||
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>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="bg-white rounded-lg shadow-sm border">
|
||
{vehicles.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<div className="text-gray-400 text-lg mb-2">🚗</div>
|
||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||
لا توجد مركبات
|
||
</h3>
|
||
<p className="text-gray-500">
|
||
لم يتم العثور على أي مركبات. قم بإضافة مركبة جديدة للبدء.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* 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>
|
||
|
||
{totalPages > 1 && (
|
||
<div className="flex justify-center">
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
totalPages={totalPages}
|
||
onPageChange={onPageChange}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |