Reapply "Add missing admin action files and navigation links"

This reverts commit 4d515bc400.
2026-07-11 20:52:56 +02:00
1 parent 96ed768f14
commit 5b4228261a
@@ -0,0 +1,166 @@
+'use client'
+
+import { Ban, ShieldOff } from 'lucide-react'
+import { useState } from 'react'
+import { banUser, unbanUser } from '@/actions/users'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface BanInfo {
+  id: number
+  reason: string
+  type: string
+  staffName: string
+  timestamp: number
+  banExpire: number
+}
+
+interface UserBanSectionProps {
+  userId: number
+  username: string
+  bans: BanInfo[]
+}
+
+export function UserBanSection({ userId, username, bans }: UserBanSectionProps) {
+  const { isPending, run } = useServerAction()
+  const [showBanForm, setShowBanForm] = useState(false)
+  const [reason, setReason] = useState('')
+  const [duration, setDuration] = useState('24')
+  const [banType, setBanType] = useState('account')
+
+  const activeBan = bans.find((b) => {
+    const now = Math.floor(Date.now() / 1000)
+    return b.banExpire === 0 || b.banExpire > now
+  })
+
+  function handleBan() {
+    run(
+      () =>
+        banUser({
+          userId,
+          reason,
+          duration: parseInt(duration, 10),
+          type: banType as 'account' | 'ip' | 'machine',
+        }),
+      {
+        successMessage: `${username} has been banned.`,
+        onSuccess: () => {
+          setShowBanForm(false)
+          setReason('')
+        },
+      },
+    )
+  }
+
+  function handleUnban() {
+    run(() => unbanUser({ userId }), {
+      successMessage: `${username} has been unbanned.`,
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Bans</CardTitle>
+        <div className="flex gap-2">
+          {activeBan ? (
+            <Button variant="outline" size="sm" onClick={handleUnban} disabled={isPending}>
+              <ShieldOff className="mr-2 h-4 w-4" />
+              Unban
+            </Button>
+          ) : (
+            <Button variant="destructive" size="sm" onClick={() => setShowBanForm(!showBanForm)}>
+              <Ban className="mr-2 h-4 w-4" />
+              Ban
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {activeBan && (
+          <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
+            <p className="text-sm font-medium text-destructive">Active Ban</p>
+            <p className="text-sm">{activeBan.reason}</p>
+            <p className="text-xs text-muted-foreground">
+              By {activeBan.staffName} &middot;{' '}
+              {activeBan.banExpire === 0
+                ? 'Permanent'
+                : `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
+            </p>
+          </div>
+        )}
+
+        {showBanForm && !activeBan && (
+          <div className="space-y-3 rounded-md border p-3">
+            <div className="space-y-2">
+              <Label>Reason</Label>
+              <Textarea
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Ban reason..."
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label>Duration (hours)</Label>
+                <Input
+                  type="number"
+                  value={duration}
+                  onChange={(e) => setDuration(e.target.value)}
+                  placeholder="0 = permanent"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Type</Label>
+                <Select value={banType} onValueChange={setBanType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="account">Account</SelectItem>
+                    <SelectItem value="ip">IP</SelectItem>
+                    <SelectItem value="machine">Machine</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <Button variant="destructive" onClick={handleBan} disabled={isPending || !reason}>
+              {isPending ? 'Banning...' : 'Confirm Ban'}
+            </Button>
+          </div>
+        )}
+
+        {bans.length > 0 && (
+          <div className="space-y-2">
+            <p className="text-sm font-medium">History</p>
+            {bans.map((ban) => (
+              <div key={ban.id} className="flex items-center justify-between text-sm">
+                <div>
+                  <span>{ban.reason}</span>
+                  <span className="ml-2">
+                    <Badge variant="outline">{ban.type}</Badge>
+                  </span>
+                </div>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(ban.timestamp * 1000).toLocaleDateString()}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}