uup
This commit is contained in:
497
app/routes/vehicles.tsx
Normal file
497
app/routes/vehicles.tsx
Normal file
@@ -0,0 +1,497 @@
|
||||
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
|
||||
import { json } from "@remix-run/node";
|
||||
import { useLoaderData, useActionData, useNavigation, useSearchParams } from "@remix-run/react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { requireUser } from "~/lib/auth.server";
|
||||
import { useDebounce } from "~/hooks/useDebounce";
|
||||
import {
|
||||
getVehicles,
|
||||
createVehicle,
|
||||
updateVehicle,
|
||||
deleteVehicle,
|
||||
getVehicleById
|
||||
} from "~/lib/vehicle-management.server";
|
||||
import { getCustomersForSelect } from "~/lib/customer-management.server";
|
||||
import { validateVehicle } from "~/lib/validation";
|
||||
import { DashboardLayout } from "~/components/layout/DashboardLayout";
|
||||
import { VehicleList } from "~/components/vehicles/VehicleList";
|
||||
import { VehicleForm } from "~/components/vehicles/VehicleForm";
|
||||
import { VehicleDetailsView } from "~/components/vehicles/VehicleDetailsView";
|
||||
import { Modal } from "~/components/ui/Modal";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Input } from "~/components/ui/Input";
|
||||
import { Flex } from "~/components/layout/Flex";
|
||||
import type { VehicleWithOwner, VehicleWithRelations } from "~/types/database";
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const user = await requireUser(request);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const searchQuery = url.searchParams.get("search") || "";
|
||||
const page = parseInt(url.searchParams.get("page") || "1");
|
||||
const limit = parseInt(url.searchParams.get("limit") || "10");
|
||||
const ownerId = url.searchParams.get("ownerId") ? parseInt(url.searchParams.get("ownerId")!) : undefined;
|
||||
const customerId = url.searchParams.get("customerId") ? parseInt(url.searchParams.get("customerId")!) : undefined;
|
||||
const plateNumber = url.searchParams.get("plateNumber") || undefined;
|
||||
|
||||
const [vehiclesResult, customers] = await Promise.all([
|
||||
getVehicles(searchQuery, page, limit, customerId || ownerId, plateNumber),
|
||||
getCustomersForSelect(),
|
||||
]);
|
||||
|
||||
return json({
|
||||
vehicles: vehiclesResult.vehicles,
|
||||
total: vehiclesResult.total,
|
||||
totalPages: vehiclesResult.totalPages,
|
||||
currentPage: page,
|
||||
searchQuery,
|
||||
ownerId: customerId || ownerId,
|
||||
customerId,
|
||||
plateNumber,
|
||||
customers,
|
||||
user,
|
||||
});
|
||||
}
|
||||
|
||||
export async function action({ request }: ActionFunctionArgs) {
|
||||
const user = await requireUser(request);
|
||||
|
||||
const formData = await request.formData();
|
||||
const action = formData.get("_action") as string;
|
||||
|
||||
switch (action) {
|
||||
case "create": {
|
||||
const vehicleData = {
|
||||
plateNumber: formData.get("plateNumber") as string,
|
||||
bodyType: formData.get("bodyType") as string,
|
||||
manufacturer: formData.get("manufacturer") as string,
|
||||
model: formData.get("model") as string,
|
||||
trim: formData.get("trim") as string || undefined,
|
||||
year: parseInt(formData.get("year") as string),
|
||||
transmission: formData.get("transmission") as string,
|
||||
fuel: formData.get("fuel") as string,
|
||||
cylinders: formData.get("cylinders") ? parseInt(formData.get("cylinders") as string) : undefined,
|
||||
engineDisplacement: formData.get("engineDisplacement") ? parseFloat(formData.get("engineDisplacement") as string) : undefined,
|
||||
useType: formData.get("useType") as string,
|
||||
ownerId: parseInt(formData.get("ownerId") as string),
|
||||
};
|
||||
|
||||
// Validate vehicle data
|
||||
const validation = validateVehicle(vehicleData);
|
||||
if (!validation.isValid) {
|
||||
return json({
|
||||
success: false,
|
||||
errors: validation.errors,
|
||||
action: "create"
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const result = await createVehicle(vehicleData);
|
||||
|
||||
if (result.success) {
|
||||
return json({
|
||||
success: true,
|
||||
vehicle: result.vehicle,
|
||||
action: "create",
|
||||
message: "تم إنشاء المركبة بنجاح"
|
||||
});
|
||||
} else {
|
||||
return json({
|
||||
success: false,
|
||||
error: result.error,
|
||||
action: "create"
|
||||
}, { status: 400 });
|
||||
}
|
||||
}
|
||||
|
||||
case "update": {
|
||||
const id = parseInt(formData.get("id") as string);
|
||||
const vehicleData = {
|
||||
plateNumber: formData.get("plateNumber") as string,
|
||||
bodyType: formData.get("bodyType") as string,
|
||||
manufacturer: formData.get("manufacturer") as string,
|
||||
model: formData.get("model") as string,
|
||||
trim: formData.get("trim") as string || undefined,
|
||||
year: parseInt(formData.get("year") as string),
|
||||
transmission: formData.get("transmission") as string,
|
||||
fuel: formData.get("fuel") as string,
|
||||
cylinders: formData.get("cylinders") ? parseInt(formData.get("cylinders") as string) : undefined,
|
||||
engineDisplacement: formData.get("engineDisplacement") ? parseFloat(formData.get("engineDisplacement") as string) : undefined,
|
||||
useType: formData.get("useType") as string,
|
||||
ownerId: parseInt(formData.get("ownerId") as string),
|
||||
};
|
||||
|
||||
// Validate vehicle data
|
||||
const validation = validateVehicle(vehicleData);
|
||||
if (!validation.isValid) {
|
||||
return json({
|
||||
success: false,
|
||||
errors: validation.errors,
|
||||
action: "update"
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const result = await updateVehicle(id, vehicleData);
|
||||
|
||||
if (result.success) {
|
||||
return json({
|
||||
success: true,
|
||||
vehicle: result.vehicle,
|
||||
action: "update",
|
||||
message: "تم تحديث المركبة بنجاح"
|
||||
});
|
||||
} else {
|
||||
return json({
|
||||
success: false,
|
||||
error: result.error,
|
||||
action: "update"
|
||||
}, { status: 400 });
|
||||
}
|
||||
}
|
||||
|
||||
case "delete": {
|
||||
const id = parseInt(formData.get("id") as string);
|
||||
|
||||
const result = await deleteVehicle(id);
|
||||
|
||||
if (result.success) {
|
||||
return json({
|
||||
success: true,
|
||||
action: "delete",
|
||||
message: "تم حذف المركبة بنجاح"
|
||||
});
|
||||
} else {
|
||||
return json({
|
||||
success: false,
|
||||
error: result.error,
|
||||
action: "delete"
|
||||
}, { status: 400 });
|
||||
}
|
||||
}
|
||||
|
||||
case "get": {
|
||||
const id = parseInt(formData.get("id") as string);
|
||||
const vehicle = await getVehicleById(id);
|
||||
|
||||
if (vehicle) {
|
||||
return json({
|
||||
success: true,
|
||||
vehicle,
|
||||
action: "get"
|
||||
});
|
||||
} else {
|
||||
return json({
|
||||
success: false,
|
||||
error: "المركبة غير موجودة",
|
||||
action: "get"
|
||||
}, { status: 404 });
|
||||
}
|
||||
}
|
||||
|
||||
default:
|
||||
return json({
|
||||
success: false,
|
||||
error: "إجراء غير صحيح",
|
||||
action: "unknown"
|
||||
}, { status: 400 });
|
||||
}
|
||||
}
|
||||
|
||||
export default function VehiclesPage() {
|
||||
const { vehicles, total, totalPages, currentPage, searchQuery, ownerId, customerId, plateNumber, customers, user } = useLoaderData<typeof loader>();
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigation = useNavigation();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showViewModal, setShowViewModal] = useState(false);
|
||||
const [selectedVehicle, setSelectedVehicle] = useState<VehicleWithOwner | VehicleWithRelations | null>(null);
|
||||
const [searchValue, setSearchValue] = useState(searchQuery);
|
||||
const [selectedOwnerId, setSelectedOwnerId] = useState(ownerId?.toString() || "");
|
||||
const [isLoadingVehicleDetails, setIsLoadingVehicleDetails] = useState(false);
|
||||
|
||||
const isLoading = navigation.state !== "idle";
|
||||
|
||||
// Debounce search value to avoid too many requests
|
||||
const debouncedSearchValue = useDebounce(searchValue, 300);
|
||||
const debouncedOwnerId = useDebounce(selectedOwnerId, 300);
|
||||
|
||||
// Handle search automatically when debounced values change
|
||||
useEffect(() => {
|
||||
if (debouncedSearchValue !== searchQuery || debouncedOwnerId !== (ownerId?.toString() || "")) {
|
||||
const newSearchParams = new URLSearchParams(searchParams);
|
||||
if (debouncedSearchValue) {
|
||||
newSearchParams.set("search", debouncedSearchValue);
|
||||
} else {
|
||||
newSearchParams.delete("search");
|
||||
}
|
||||
if (debouncedOwnerId) {
|
||||
newSearchParams.set("ownerId", debouncedOwnerId);
|
||||
} else {
|
||||
newSearchParams.delete("ownerId");
|
||||
}
|
||||
newSearchParams.set("page", "1"); // Reset to first page
|
||||
setSearchParams(newSearchParams);
|
||||
}
|
||||
}, [debouncedSearchValue, debouncedOwnerId, searchQuery, ownerId, searchParams, setSearchParams]);
|
||||
|
||||
// Clear search function
|
||||
const clearSearch = () => {
|
||||
setSearchValue("");
|
||||
setSelectedOwnerId("");
|
||||
};
|
||||
|
||||
// Handle pagination
|
||||
const handlePageChange = (page: number) => {
|
||||
const newSearchParams = new URLSearchParams(searchParams);
|
||||
newSearchParams.set("page", page.toString());
|
||||
setSearchParams(newSearchParams);
|
||||
};
|
||||
|
||||
// Handle create vehicle
|
||||
const handleCreateVehicle = () => {
|
||||
setSelectedVehicle(null);
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
// Handle edit vehicle
|
||||
const handleEditVehicle = (vehicle: VehicleWithOwner | VehicleWithRelations) => {
|
||||
setSelectedVehicle(vehicle);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
// Handle view vehicle
|
||||
const handleViewVehicle = async (vehicle: VehicleWithOwner) => {
|
||||
// First show the modal with basic data
|
||||
setSelectedVehicle(vehicle);
|
||||
setShowViewModal(true);
|
||||
setIsLoadingVehicleDetails(true);
|
||||
|
||||
// Then fetch full vehicle details with maintenance visits in the background
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("_action", "get");
|
||||
form.append("id", vehicle.id.toString());
|
||||
|
||||
const response = await fetch(window.location.pathname, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success && result.vehicle) {
|
||||
setSelectedVehicle(result.vehicle);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch full vehicle details:", error);
|
||||
// Keep the basic vehicle data if fetch fails
|
||||
} finally {
|
||||
setIsLoadingVehicleDetails(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Close modals on successful action
|
||||
useEffect(() => {
|
||||
if (actionData?.success && actionData.action === "create") {
|
||||
setShowCreateModal(false);
|
||||
}
|
||||
if (actionData?.success && actionData.action === "update") {
|
||||
setShowEditModal(false);
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
return (
|
||||
<DashboardLayout user={user}>
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<Flex justify="between" align="center" className="flex-wrap gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">إدارة المركبات</h1>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<p className="text-gray-600">
|
||||
إجمالي المركبات: {total}
|
||||
</p>
|
||||
{customerId && (
|
||||
<span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
|
||||
مفلترة حسب العميل
|
||||
</span>
|
||||
)}
|
||||
{plateNumber && (
|
||||
<span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
|
||||
مفلترة حسب رقم اللوحة: {plateNumber}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleCreateVehicle}
|
||||
disabled={isLoading}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
إضافة مركبة جديدة
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border">
|
||||
<Flex gap="md" align="center" className="flex-wrap">
|
||||
<div className="flex-1 min-w-64">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="البحث في المركبات... (البحث تلقائي)"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
startIcon={
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
}
|
||||
endIcon={
|
||||
searchValue && (
|
||||
<button
|
||||
onClick={() => setSearchValue("")}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
type="button"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-w-48">
|
||||
<select
|
||||
value={selectedOwnerId}
|
||||
onChange={(e) => setSelectedOwnerId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">جميع المالكين</option>
|
||||
{customers.map((customer) => (
|
||||
<option key={customer.id} value={customer.id}>
|
||||
{customer.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{(searchQuery || ownerId || debouncedSearchValue !== searchQuery || debouncedOwnerId !== (ownerId?.toString() || "")) && (
|
||||
<div className="flex items-center gap-2">
|
||||
{(debouncedSearchValue !== searchQuery || debouncedOwnerId !== (ownerId?.toString() || "")) && (
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
جاري البحث...
|
||||
</div>
|
||||
)}
|
||||
{(searchQuery || ownerId) && (
|
||||
<Button
|
||||
onClick={clearSearch}
|
||||
disabled={isLoading}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
مسح البحث
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
{/* Action Messages */}
|
||||
{actionData?.success && actionData.message && (
|
||||
<div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
|
||||
{actionData.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{actionData?.error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
|
||||
{actionData.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vehicle List */}
|
||||
<VehicleList
|
||||
vehicles={vehicles}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={handlePageChange}
|
||||
onEditVehicle={handleEditVehicle}
|
||||
onViewVehicle={handleViewVehicle}
|
||||
isLoading={isLoading}
|
||||
actionData={actionData}
|
||||
/>
|
||||
|
||||
{/* Create Vehicle Modal */}
|
||||
<Modal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
title="إضافة مركبة جديدة"
|
||||
size="lg"
|
||||
>
|
||||
<VehicleForm
|
||||
customers={customers}
|
||||
onCancel={() => setShowCreateModal(false)}
|
||||
errors={actionData?.action === "create" ? actionData.errors : undefined}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
{/* Edit Vehicle Modal */}
|
||||
<Modal
|
||||
isOpen={showEditModal}
|
||||
onClose={() => setShowEditModal(false)}
|
||||
title="تعديل المركبة"
|
||||
size="lg"
|
||||
>
|
||||
{selectedVehicle && (
|
||||
<VehicleForm
|
||||
vehicle={selectedVehicle}
|
||||
customers={customers}
|
||||
onCancel={() => setShowEditModal(false)}
|
||||
errors={actionData?.action === "update" ? actionData.errors : undefined}
|
||||
isLoading={isLoading}
|
||||
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* View Vehicle Modal */}
|
||||
<Modal
|
||||
isOpen={showViewModal}
|
||||
onClose={() => {
|
||||
setShowViewModal(false);
|
||||
setIsLoadingVehicleDetails(false);
|
||||
}}
|
||||
title={selectedVehicle ? `تفاصيل المركبة - ${selectedVehicle.plateNumber}` : "تفاصيل المركبة"}
|
||||
size="xl"
|
||||
>
|
||||
{selectedVehicle && (
|
||||
<VehicleDetailsView
|
||||
vehicle={selectedVehicle}
|
||||
onEdit={() => {
|
||||
setShowViewModal(false);
|
||||
handleEditVehicle(selectedVehicle);
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowViewModal(false);
|
||||
setIsLoadingVehicleDetails(false);
|
||||
}}
|
||||
isLoadingVisits={isLoadingVehicleDetails}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user