Files
juwan-frontend/app/(dashboard)/dashboard/services/page.tsx
T

119 lines
4.3 KiB
TypeScript

"use client"
import { Edit, Plus, Trash2 } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
import { useAuthStore } from "@/store/auth"
import { usePlayerStore } from "@/store/players"
import { useServiceStore } from "@/store/services"
import { useShopStore } from "@/store/shops"
export default function ServicesPage() {
const userId = useAuthStore((state) => state.user?.id)
const currentRole = useAuthStore((state) => state.currentRole)
const shops = useShopStore((state) => state.shops)
const players = usePlayerStore((state) => state.players)
const services = useServiceStore((state) => state.services)
const deleteService = useServiceStore((state) => state.deleteService)
const ownerShop = resolveOwnerShop(userId, shops)
const scopedPlayerIds =
currentRole === "player"
? userId
? [userId]
: []
: currentRole === "owner"
? ownerShop
? players.filter((player) => player.shopId === ownerShop.id).map((player) => player.id)
: []
: []
const scopedPlayerIdSet = new Set(scopedPlayerIds)
const scopedServices = services.filter((service) => scopedPlayerIdSet.has(service.playerId))
return (
<div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold"></h1>
<Button asChild>
<Link href="/dashboard/services/new">
<Plus className="mr-1 h-4 w-4" />
</Link>
</Button>
</div>
<Card className="hover:shadow-[var(--shadow-card)]">
<CardHeader>
<CardTitle className="text-base"></CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="text-right"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{scopedServices.map((service) => (
<TableRow key={service.id}>
<TableCell className="font-medium">{service.title}</TableCell>
<TableCell>
<Badge variant="secondary">{service.gameName}</Badge>
</TableCell>
<TableCell>
¥{service.price}/{service.unit}
</TableCell>
<TableCell>{service.rankRange ?? "-"}</TableCell>
<TableCell>
<div className="text-xs text-muted-foreground">
{service.availability.map((a) => (
<div key={a}>{a}</div>
))}
</div>
</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-1">
<Button variant="ghost" size="icon" asChild>
<Link href={`/dashboard/services/new?serviceId=${service.id}`}>
<Edit className="h-4 w-4" />
</Link>
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => {
if (!scopedPlayerIdSet.has(service.playerId)) return
deleteService(service.id)
}}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
)
}