95 lines
4.5 KiB
TypeScript
95 lines
4.5 KiB
TypeScript
import { auth } from "@/auth";
|
|
import { db } from "@/lib/db";
|
|
import { hasPermission } from "@/lib/permissions";
|
|
import { redirect } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { AddSiteButton, EditSiteButton } from "./site-form";
|
|
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
|
|
import { deleteSite } from "./actions";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = { title: "Sites" };
|
|
|
|
export default async function SitesPage() {
|
|
const session = await auth();
|
|
if (!session?.user) redirect("/login");
|
|
if (!hasPermission(session.user.role, "manage_sites")) redirect("/dashboard");
|
|
|
|
const sites = await db.site.findMany({
|
|
orderBy: { name: "asc" },
|
|
include: {
|
|
_count: { select: { vessels: true, inventory: true } },
|
|
},
|
|
});
|
|
|
|
const canEdit = session.user.role === "ADMIN";
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-neutral-900">Sites</h1>
|
|
<p className="text-sm text-neutral-500 mt-0.5">Ports, depots and offices with inventory</p>
|
|
</div>
|
|
{canEdit && <AddSiteButton />}
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-neutral-50 border-b border-neutral-200">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left font-medium text-neutral-600">Name</th>
|
|
<th className="px-4 py-3 text-left font-medium text-neutral-600">Code</th>
|
|
<th className="px-4 py-3 text-left font-medium text-neutral-600">Address</th>
|
|
<th className="px-4 py-3 text-right font-medium text-neutral-600">Cost Centres</th>
|
|
<th className="px-4 py-3 text-right font-medium text-neutral-600">Items tracked</th>
|
|
<th className="px-4 py-3 text-left font-medium text-neutral-600">Location</th>
|
|
<th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
|
|
{canEdit && <th className="px-4 py-3"></th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-neutral-100">
|
|
{sites.length === 0 && (
|
|
<tr>
|
|
<td colSpan={canEdit ? 8 : 7} className="px-4 py-8 text-center text-neutral-400">
|
|
No sites yet. Add your first port, depot or office.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
{sites.map((site) => (
|
|
<tr key={site.id} className="hover:bg-neutral-50">
|
|
<td className="px-4 py-3">
|
|
<Link href={`/admin/sites/${site.id}`} className="font-medium text-primary-600 hover:underline">
|
|
{site.name}
|
|
</Link>
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-neutral-500">{site.code}</td>
|
|
<td className="px-4 py-3 text-neutral-500 max-w-xs truncate">{site.address ?? <span className="italic text-neutral-400">—</span>}</td>
|
|
<td className="px-4 py-3 text-right text-neutral-600">{site._count.vessels || <span className="text-neutral-400">—</span>}</td>
|
|
<td className="px-4 py-3 text-right text-neutral-600">{site._count.inventory || <span className="text-neutral-400">—</span>}</td>
|
|
<td className="px-4 py-3 text-xs text-neutral-500">
|
|
{site.latitude && site.longitude
|
|
? `${site.latitude.toFixed(4)}, ${site.longitude.toFixed(4)}`
|
|
: <span className="italic text-neutral-400">Not set</span>}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${site.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"}`}>
|
|
{site.isActive ? "Active" : "Inactive"}
|
|
</span>
|
|
</td>
|
|
{canEdit && (
|
|
<td className="px-4 py-3">
|
|
<span className="flex items-center gap-3">
|
|
<EditSiteButton site={{ id: site.id, name: site.name, code: site.code, address: site.address, latitude: site.latitude, longitude: site.longitude, isActive: site.isActive }} />
|
|
<ConfirmDeleteButton onDelete={deleteSite.bind(null, site.id)} label={site.name} />
|
|
</span>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|