From dd17bad4c41ae3b291ce267b9143919a89706ddf Mon Sep 17 00:00:00 2001
From: NVWA Code Agent <nvwa@example.com>
Date: Thu, 11 Dec 2025 16:46:18 +0000
Subject: [PATCH] application [cat-admin-web] view page
 [pages/queue-management] development

---
 .../src/pages/queue-management.tsx            | 277 ++++++++++++++++++
 1 file changed, 277 insertions(+)
 create mode 100644 apps/cat-admin-web/src/pages/queue-management.tsx

diff --git a/apps/cat-admin-web/src/pages/queue-management.tsx b/apps/cat-admin-web/src/pages/queue-management.tsx
new file mode 100644
index 0000000..cda6f3b
--- /dev/null
+++ b/apps/cat-admin-web/src/pages/queue-management.tsx
@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from 'react';
+import { entities } from '@/lib/nvwa';
+import { Button } from '@/components/ui/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+interface Cat {
+  id: number;
+  name: string;
+  age: number;
+  gender: string;
+  grade: string;
+  type: string;
+  is_available: boolean;
+  description?: string;
+  image_ids: number[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface Reservation {
+  id: number;
+  user_id: string;
+  cat_id?: number;
+  deposit: string;
+  status: string;
+  queue_order?: number;
+  created_at: string;
+  updated_at: string;
+  user: { name: string };
+  cat?: { name: string };
+}
+
+interface QueueRules {
+  maxQueueLength: number;
+  defaultDeposit: number;
+  ruleType: 'fifo' | 'priority';
+}
+
+export default function QueueManagement() {
+  const [cats, setCats] = useState<Cat[]>([]);
+  const [reservations, setReservations] = useState<Reservation[]>([]);
+  const [rules, setRules] = useState<QueueRules>({
+    maxQueueLength: 10,
+    defaultDeposit: 100,
+    ruleType: 'fifo'
+  });
+
+  useEffect(() => {
+    fetchCats();
+    fetchReservations();
+  }, []);
+
+  const fetchCats = async () => {
+    const { data, error } = await entities.from('cat').select('*');
+    if (error) {
+      console.error(error);
+      return;
+    }
+    setCats(data || []);
+  };
+
+  const fetchReservations = async () => {
+    const { data, error } = await entities
+      .from('reservation')
+      .select('*, user!inner(name), cat(name)')
+      .eq('status', 'queuing')
+      .order('queue_order');
+    if (error) {
+      console.error(error);
+      return;
+    }
+    setReservations(data || []);
+  };
+
+  const toggleQueuing = async (cat: Cat) => {
+    // Assuming enabling queuing sets is_available to true
+    const { error } = await entities.from('cat').update({ is_available: !cat.is_available }).eq('id', cat.id);
+    if (error) {
+      console.error(error);
+      return;
+    }
+    setCats(cats.map(c => c.id === cat.id ? { ...c, is_available: !c.is_available } : c));
+  };
+
+  const updateRules = (key: keyof QueueRules, value: any) => {
+    setRules(prev => ({ ...prev, [key]: value }));
+  };
+
+  const moveQueue = async (reservation: Reservation, direction: 'up' | 'down') => {
+    const currentIndex = reservations.findIndex(r => r.id === reservation.id);
+    if (direction === 'up' && currentIndex > 0) {
+      const prev = reservations[currentIndex - 1];
+      await swapOrder(reservation, prev);
+    } else if (direction === 'down' && currentIndex < reservations.length - 1) {
+      const next = reservations[currentIndex + 1];
+      await swapOrder(reservation, next);
+    }
+    fetchReservations();
+  };
+
+  const swapOrder = async (res1: Reservation, res2: Reservation) => {
+    const { error: error1 } = await entities.from('reservation').update({ queue_order: res2.queue_order }).eq('id', res1.id);
+    const { error: error2 } = await entities.from('reservation').update({ queue_order: res1.queue_order }).eq('id', res2.id);
+    if (error1 || error2) {
+      console.error(error1 || error2);
+    }
+  };
+
+  const changeStatus = async (reservation: Reservation, newStatus: string) => {
+    const { error } = await entities.from('reservation').update({ status: newStatus }).eq('id', reservation.id);
+    if (error) {
+      console.error(error);
+      return;
+    }
+    fetchReservations();
+  };
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">排队管理</h1>
+      <Tabs defaultValue="enable" className="w-full">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="enable">开启排队</TabsTrigger>
+          <TabsTrigger value="rules">设置规则</TabsTrigger>
+          <TabsTrigger value="manage">管理队列</TabsTrigger>
+        </TabsList>
+        <TabsContent value="enable">
+          <Card>
+            <CardHeader>
+              <CardTitle>开启猫咪排队功能</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>名称</TableHead>
+                    <TableHead>年龄</TableHead>
+                    <TableHead>性别</TableHead>
+                    <TableHead>等级</TableHead>
+                    <TableHead>类型</TableHead>
+                    <TableHead>排队开启</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {cats.map(cat => (
+                    <TableRow key={cat.id}>
+                      <TableCell>{cat.name}</TableCell>
+                      <TableCell>{cat.age} 月</TableCell>
+                      <TableCell>
+                        <Badge variant={cat.gender === 'male' ? 'default' : 'secondary'}>
+                          {cat.gender === 'male' ? '雄' : '雌'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{cat.grade}</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          {cat.type === 'breeding_male' ? '种公' : cat.type === 'breeding_female' ? '种母' : '幼猫'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Switch
+                          checked={cat.is_available}
+                          onCheckedChange={() => toggleQueuing(cat)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="rules">
+          <Card>
+            <CardHeader>
+              <CardTitle>设置排队规则</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="maxQueue">最大排队人数</Label>
+                <Input
+                  id="maxQueue"
+                  type="number"
+                  value={rules.maxQueueLength}
+                  onChange={(e) => updateRules('maxQueueLength', parseInt(e.target.value))}
+                />
+              </div>
+              <div>
+                <Label htmlFor="deposit">默认定金</Label>
+                <Input
+                  id="deposit"
+                  type="number"
+                  value={rules.defaultDeposit}
+                  onChange={(e) => updateRules('defaultDeposit', parseFloat(e.target.value))}
+                />
+              </div>
+              <div>
+                <Label>排队规则类型</Label>
+                <Select
+                  value={rules.ruleType}
+                  onValueChange={(value: 'fifo' | 'priority') => updateRules('ruleType', value)}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fifo">先进先出</SelectItem>
+                    <SelectItem value="priority">优先级</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="manage">
+          <Card>
+            <CardHeader>
+              <CardTitle>管理排队队列</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>队列顺序</TableHead>
+                    <TableHead>用户</TableHead>
+                    <TableHead>猫咪</TableHead>
+                    <TableHead>定金</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {reservations.map((res, index) => (
+                    <TableRow key={res.id}>
+                      <TableCell>{res.queue_order}</TableCell>
+                      <TableCell>{res.user.name}</TableCell>
+                      <TableCell>{res.cat?.name || 'N/A'}</TableCell>
+                      <TableCell>{res.deposit}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{res.status}</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex space-x-2">
+                          <Button size="sm" onClick={() => moveQueue(res, 'up')} disabled={index === 0}>
+                            ↑
+                          </Button>
+                          <Button size="sm" onClick={() => moveQueue(res, 'down')} disabled={index === reservations.length - 1}>
+                            ↓
+                          </Button>
+                          <Button size="sm" onClick={() => changeStatus(res, 'reserved')}>
+                            预订
+                          </Button>
+                          <Button size="sm" variant="destructive" onClick={() => changeStatus(res, 'cancelled')}>
+                            取消
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
\ No newline at end of file