331 lines
15 KiB
TypeScript
331 lines
15 KiB
TypeScript
import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
|
import { json, redirect } from "@remix-run/node";
|
|
import { Form, useActionData, useLoaderData, useNavigation } from "@remix-run/react";
|
|
import { requireAuthLevel } from "~/utils/auth.server";
|
|
import DashboardLayout from "~/components/DashboardLayout";
|
|
import FormModal from "~/components/FormModal";
|
|
import Toast from "~/components/Toast";
|
|
import { useState, useEffect } from "react";
|
|
import { prisma } from "~/utils/db.server";
|
|
|
|
export const meta: MetaFunction = () => [{ title: "Reclamation Locations Management - Alhaffer Report System" }];
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 2);
|
|
|
|
const reclamationLocations = await prisma.reclamationLocation.findMany({
|
|
orderBy: { name: 'asc' },
|
|
include: {
|
|
_count: {
|
|
select: { reports: true }
|
|
}
|
|
}
|
|
});
|
|
|
|
return json({ user, reclamationLocations });
|
|
};
|
|
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
await requireAuthLevel(request, 2);
|
|
|
|
const formData = await request.formData();
|
|
const intent = formData.get("intent");
|
|
const id = formData.get("id");
|
|
const name = formData.get("name");
|
|
|
|
if (intent === "create") {
|
|
if (typeof name !== "string" || name.length === 0) {
|
|
return json({ errors: { name: "Name is required" } }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await prisma.reclamationLocation.create({
|
|
data: { name }
|
|
});
|
|
return json({ success: "Reclamation location created successfully!" });
|
|
} catch (error) {
|
|
return json({ errors: { form: "Reclamation location name already exists" } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
if (intent === "update") {
|
|
if (typeof name !== "string" || name.length === 0) {
|
|
return json({ errors: { name: "Name is required" } }, { status: 400 });
|
|
}
|
|
if (typeof id !== "string") {
|
|
return json({ errors: { form: "Invalid reclamation location ID" } }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await prisma.reclamationLocation.update({
|
|
where: { id: parseInt(id) },
|
|
data: { name }
|
|
});
|
|
return json({ success: "Reclamation location updated successfully!" });
|
|
} catch (error) {
|
|
return json({ errors: { form: "Reclamation location name already exists" } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
if (intent === "delete") {
|
|
if (typeof id !== "string") {
|
|
return json({ errors: { form: "Invalid reclamation location ID" } }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await prisma.reclamationLocation.delete({
|
|
where: { id: parseInt(id) }
|
|
});
|
|
return json({ success: "Reclamation location deleted successfully!" });
|
|
} catch (error) {
|
|
return json({ errors: { form: "Cannot delete reclamation location with existing reports" } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
return json({ errors: { form: "Invalid action" } }, { status: 400 });
|
|
};
|
|
|
|
export default function ReclamationLocations() {
|
|
const { user, reclamationLocations } = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const navigation = useNavigation();
|
|
const [editingLocation, setEditingLocation] = useState<{ id: number; name: string } | null>(null);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
|
|
|
const isSubmitting = navigation.state === "submitting";
|
|
const isEditing = editingLocation !== null;
|
|
|
|
// Handle success/error messages
|
|
useEffect(() => {
|
|
if (actionData?.success) {
|
|
setToast({ message: actionData.success, type: "success" });
|
|
setShowModal(false);
|
|
setEditingLocation(null);
|
|
} else if (actionData?.errors?.form) {
|
|
setToast({ message: actionData.errors.form, type: "error" });
|
|
}
|
|
}, [actionData]);
|
|
|
|
const handleEdit = (location: { id: number; name: string }) => {
|
|
setEditingLocation(location);
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
setEditingLocation(null);
|
|
setShowModal(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setShowModal(false);
|
|
setEditingLocation(null);
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout user={user}>
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-bold text-gray-900">Reclamation Locations Management</h1>
|
|
<p className="mt-1 text-sm text-gray-600">Manage shoreline reclamation locations</p>
|
|
</div>
|
|
<button
|
|
onClick={handleAdd}
|
|
className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Add New Location
|
|
</button>
|
|
</div>
|
|
|
|
{/* Locations Table - Desktop */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="hidden sm:block">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Location Name
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Reports Count
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{reclamationLocations.map((location) => (
|
|
<tr key={location.id} className="hover:bg-gray-50 transition-colors duration-150">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 h-10 w-10">
|
|
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">{location.name}</div>
|
|
{/* <div className="text-sm text-gray-500">Location #{location.id}</div> */}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
{location._count.reports} reports
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div className="flex justify-end space-x-2">
|
|
<button
|
|
onClick={() => handleEdit(location)}
|
|
className="text-indigo-600 hover:text-indigo-900 transition-colors duration-150"
|
|
>
|
|
Edit
|
|
</button>
|
|
<Form method="post" className="inline">
|
|
<input type="hidden" name="intent" value="delete" />
|
|
<input type="hidden" name="id" value={location.id} />
|
|
<button
|
|
type="submit"
|
|
onClick={(e) => {
|
|
if (!confirm("Are you sure you want to delete this reclamation location?")) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
className="text-red-600 hover:text-red-900 transition-colors duration-150"
|
|
>
|
|
Delete
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Locations Cards - Mobile */}
|
|
<div className="sm:hidden">
|
|
<div className="space-y-4 p-4">
|
|
{reclamationLocations.map((location) => (
|
|
<div key={location.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center">
|
|
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<div className="text-sm font-medium text-gray-900">{location.name}</div>
|
|
</div>
|
|
</div>
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
{location._count.reports} reports
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-2">
|
|
<button
|
|
onClick={() => handleEdit(location)}
|
|
className="w-full text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
|
|
>
|
|
Edit Location
|
|
</button>
|
|
<Form method="post" className="w-full">
|
|
<input type="hidden" name="intent" value="delete" />
|
|
<input type="hidden" name="id" value={location.id} />
|
|
<button
|
|
type="submit"
|
|
onClick={(e) => {
|
|
if (!confirm("Are you sure you want to delete this reclamation location?")) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
className="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
|
|
>
|
|
Delete Location
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{reclamationLocations.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No reclamation locations</h3>
|
|
<p className="mt-1 text-sm text-gray-500">Get started by creating your first reclamation location.</p>
|
|
<div className="mt-6">
|
|
<button
|
|
onClick={handleAdd}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Add Location
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Form Modal */}
|
|
<FormModal
|
|
isOpen={showModal}
|
|
onClose={handleCloseModal}
|
|
title={isEditing ? "Edit Reclamation Location" : "Add New Reclamation Location"}
|
|
isSubmitting={isSubmitting}
|
|
submitText={isEditing ? "Update Location" : "Create Location"}
|
|
>
|
|
<Form method="post" id="modal-form" className="space-y-4">
|
|
<input type="hidden" name="intent" value={isEditing ? "update" : "create"} />
|
|
{isEditing && <input type="hidden" name="id" value={editingLocation?.id} />}
|
|
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Location Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
required
|
|
defaultValue={editingLocation?.name || ""}
|
|
className="block w-full border-gray-300 h-9 p-2 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
placeholder="Enter location name (e.g., Eastern Shoreline)"
|
|
/>
|
|
{actionData?.errors?.name && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.name}</p>
|
|
)}
|
|
</div>
|
|
</Form>
|
|
</FormModal>
|
|
|
|
{/* Toast Notifications */}
|
|
{toast && (
|
|
<Toast
|
|
message={toast.message}
|
|
type={toast.type}
|
|
onClose={() => setToast(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
} |