141 lines
3.3 KiB
TypeScript
141 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Eye, Pencil, Sofa, Wifi } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { DataTable } from "@/components/admin/data-table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { DataTableColumn, PaginatedResult } from "@/types";
|
|
|
|
interface RoomRow {
|
|
id: number;
|
|
name: string;
|
|
ownerName: string;
|
|
ownerId: number;
|
|
state: string;
|
|
users: number;
|
|
usersMax: number;
|
|
description: string;
|
|
}
|
|
|
|
const stateVariants: Record<
|
|
string,
|
|
"default" | "secondary" | "destructive" | "outline"
|
|
> = {
|
|
open: "default",
|
|
locked: "secondary",
|
|
password: "destructive",
|
|
invisible: "outline",
|
|
};
|
|
|
|
function getColumns(canEdit: boolean): DataTableColumn<RoomRow>[] {
|
|
return [
|
|
{ key: "id", label: "ID", sortable: true },
|
|
{
|
|
key: "name",
|
|
label: "Room",
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<Link href={`/admin/rooms/show/${row.id}`} className="hover:opacity-80">
|
|
<div className="min-w-0">
|
|
<span className="font-medium block">{row.name}</span>
|
|
{row.description && (
|
|
<span className="text-xs text-muted-foreground truncate block max-w-[250px]">
|
|
{row.description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "ownerName",
|
|
label: "Owner",
|
|
render: (_, row) => (
|
|
<Link
|
|
href={`/admin/users/show/${row.ownerId}`}
|
|
className="text-sm text-primary hover:underline"
|
|
>
|
|
{row.ownerName}
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: "state",
|
|
label: "State",
|
|
sortable: true,
|
|
filterKey: "filter_state",
|
|
filterOptions: [
|
|
{ label: "Open", value: "open" },
|
|
{ label: "Locked", value: "locked" },
|
|
{ label: "Password", value: "password" },
|
|
{ label: "Invisible", value: "invisible" },
|
|
],
|
|
render: (value) => (
|
|
<Badge variant={stateVariants[String(value)] || "outline"}>
|
|
{String(value)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: "users",
|
|
label: "Users",
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<span className="flex items-center gap-1.5 text-sm">
|
|
{row.users > 0 && (
|
|
<Wifi className="h-3 w-3 text-[var(--admin-success)]" />
|
|
)}
|
|
<span
|
|
className={row.users > 0 ? "font-medium" : "text-muted-foreground"}
|
|
>
|
|
{row.users}
|
|
</span>
|
|
<span className="text-muted-foreground">/ {row.usersMax}</span>
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "actions",
|
|
label: "",
|
|
render: (_, row) => (
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/admin/rooms/show/${row.id}`}>
|
|
<Eye className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/admin/rooms/${row.id}/furni`}>
|
|
<Sofa className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
{canEdit && (
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/admin/rooms/edit/${row.id}`}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
}
|
|
|
|
interface RoomsTableProps {
|
|
data: PaginatedResult<RoomRow>;
|
|
canEdit: boolean;
|
|
}
|
|
|
|
export function RoomsTable({ data, canEdit }: RoomsTableProps) {
|
|
return (
|
|
<DataTable
|
|
data={data}
|
|
columns={getColumns(canEdit)}
|
|
searchPlaceholder="Search by room name or owner..."
|
|
exportUrl={canEdit ? "/api/admin/export?type=rooms" : undefined}
|
|
/>
|
|
);
|
|
}
|