openhands
17847545dd
- Remove .prettierrc (dead config, Biome replaces Prettier) - Rename lighthouserc.json to lighthouserc.cjs with module.exports for ESM compat - Add logger.warn to empty catch blocks in auth, register, site-settings, prisma-cache, redis, security, rate-limit - Unify ActionResult type: action-helper.ts uses 'ok' consistent with safe-action-shared.ts - Add noUnusedLocals + noUnusedParameters to tsconfig + fix 25 pre-existing unused vars - Replace barrel export src/types/index.ts with direct @/types/common imports - Make trustHost conditional (development only) in auth.ts - Add pre-flight URL validation to update-Nitrov3.sh to catch image.library.url misconfigurations - Improve NITRO_IMAGE_LIBRARY_URL content validation in pre-flight & post-compute checks
804 lines
23 KiB
TypeScript
804 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowLeft,
|
|
ChevronDown,
|
|
Crown,
|
|
Loader2,
|
|
Save,
|
|
Search,
|
|
Settings,
|
|
Shield,
|
|
ShieldCheck,
|
|
Terminal,
|
|
UserCheck,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useMemo, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import {
|
|
saveRank as saveRankAction,
|
|
setCmsPermissions,
|
|
} from "@/actions/permissions";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { useServerAction } from "@/hooks/use-server-action";
|
|
import { getAvatarUrl } from "@/lib/imager";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/* ─── Types ──────────────────────────────────────────────── */
|
|
|
|
interface RankData {
|
|
id: number;
|
|
rank_name: string;
|
|
badge: string;
|
|
level: number;
|
|
prefix: string;
|
|
prefix_color: string;
|
|
hidden_rank: string;
|
|
log_commands: string;
|
|
room_effect: number;
|
|
auto_credits_amount: number;
|
|
auto_pixels_amount: number;
|
|
auto_gotw_amount: number;
|
|
auto_points_amount: number;
|
|
permissions: Record<string, string>;
|
|
permissionMaxValues: Record<string, number>;
|
|
}
|
|
|
|
interface RankUser {
|
|
id: number;
|
|
username: string;
|
|
look: string;
|
|
}
|
|
interface CmsRoleData {
|
|
id: number;
|
|
slug: string;
|
|
title: string;
|
|
permissionSlugs: string[];
|
|
}
|
|
interface CmsPermission {
|
|
id: number;
|
|
slug: string;
|
|
title: string;
|
|
}
|
|
interface Props {
|
|
rank: RankData;
|
|
users: RankUser[];
|
|
totalUsers: number;
|
|
cmsRole: CmsRoleData | null;
|
|
allCmsPermissions: CmsPermission[];
|
|
}
|
|
|
|
/* ─── Helpers ────────────────────────────────────────────── */
|
|
|
|
function categorizePerms(keys: string[]) {
|
|
const commands: string[] = [];
|
|
const account: string[] = [];
|
|
const other: string[] = [];
|
|
for (const key of keys.sort()) {
|
|
if (key.startsWith("cmd_") || key === "kiss_cmd") commands.push(key);
|
|
else if (key.startsWith("acc_")) account.push(key);
|
|
else other.push(key);
|
|
}
|
|
return { commands, account, other };
|
|
}
|
|
|
|
/* ─── Tri-state Toggle ───────────────────────────────────── */
|
|
|
|
function PermToggle({
|
|
value,
|
|
maxValue,
|
|
onChange,
|
|
}: {
|
|
value: string;
|
|
maxValue: number;
|
|
onChange: (v: string) => void;
|
|
}) {
|
|
const values = Array.from({ length: Math.max(1, maxValue) + 1 }, (_, i) =>
|
|
String(i),
|
|
);
|
|
return (
|
|
<div className="flex gap-0.5 shrink-0">
|
|
{values.map((v) => (
|
|
<button
|
|
key={v}
|
|
type="button"
|
|
onClick={() => onChange(v)}
|
|
className={cn(
|
|
"w-7 h-6 text-[11px] font-mono rounded transition-all font-medium",
|
|
v === value
|
|
? v === "0"
|
|
? "bg-[var(--admin-text-muted)] text-[var(--color-surface-text-readable)] shadow-sm"
|
|
: v === "1"
|
|
? "bg-[var(--admin-success)] text-[var(--admin-success-foreground)] shadow-sm"
|
|
: "bg-[var(--admin-warning)] text-[var(--admin-warning-foreground)] shadow-sm"
|
|
: "bg-muted/60 text-muted-foreground/40 hover:bg-muted hover:text-muted-foreground",
|
|
)}
|
|
>
|
|
{v}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ─── Main Component ─────────────────────────────────────── */
|
|
|
|
export function RankEditClient({
|
|
rank: initialRank,
|
|
users,
|
|
totalUsers,
|
|
cmsRole: initialCmsRole,
|
|
allCmsPermissions,
|
|
}: Props) {
|
|
const { run, isPending } = useServerAction();
|
|
|
|
const [general, setGeneral] = useState({
|
|
rank_name: initialRank.rank_name,
|
|
badge: initialRank.badge,
|
|
prefix: initialRank.prefix,
|
|
prefix_color: initialRank.prefix_color,
|
|
hidden_rank: initialRank.hidden_rank,
|
|
log_commands: initialRank.log_commands,
|
|
room_effect: initialRank.room_effect,
|
|
auto_credits_amount: initialRank.auto_credits_amount,
|
|
auto_pixels_amount: initialRank.auto_pixels_amount,
|
|
auto_gotw_amount: initialRank.auto_gotw_amount,
|
|
auto_points_amount: initialRank.auto_points_amount,
|
|
});
|
|
|
|
const [perms, setPerms] = useState<Record<string, string>>(
|
|
initialRank.permissions,
|
|
);
|
|
const [cmsPermSlugs, setCmsPermSlugs] = useState<string[]>(
|
|
initialCmsRole?.permissionSlugs ?? [],
|
|
);
|
|
const [permSearch, setPermSearch] = useState("");
|
|
const [cmsSearch, setCmsSearch] = useState("");
|
|
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
|
|
|
|
const cats = useMemo(
|
|
() => categorizePerms(Object.keys(initialRank.permissions)),
|
|
[initialRank.permissions],
|
|
);
|
|
const enabledCount = Object.values(perms).filter((v) => v !== "0").length;
|
|
const totalCount = Object.keys(perms).length;
|
|
|
|
function setNum(field: string, val: string) {
|
|
setGeneral((p) => ({ ...p, [field]: parseInt(val, 10) || 0 }));
|
|
}
|
|
|
|
function saveRank() {
|
|
const fields = Object.fromEntries(
|
|
Object.entries({ ...general, ...perms }).map(([key, value]) => [
|
|
key,
|
|
String(value),
|
|
]),
|
|
);
|
|
run(() => saveRankAction({ id: initialRank.id, fields }), {
|
|
successMessage: "Rank saved",
|
|
});
|
|
}
|
|
|
|
async function toggleCms(slug: string) {
|
|
if (!initialCmsRole) return;
|
|
const prev = cmsPermSlugs;
|
|
const next = prev.includes(slug)
|
|
? prev.filter((s) => s !== slug)
|
|
: [...prev, slug];
|
|
setCmsPermSlugs(next);
|
|
try {
|
|
const r = await setCmsPermissions({
|
|
roleId: initialCmsRole.id,
|
|
permissionSlugs: next,
|
|
});
|
|
if (!r.ok) {
|
|
setCmsPermSlugs(prev);
|
|
toast.error("Failed");
|
|
}
|
|
} catch {
|
|
setCmsPermSlugs(prev);
|
|
toast.error("Failed");
|
|
}
|
|
}
|
|
|
|
function toggle(key: string) {
|
|
setCollapsed((p) => {
|
|
const n = new Set(p);
|
|
if (n.has(key)) n.delete(key);
|
|
else n.add(key);
|
|
return n;
|
|
});
|
|
}
|
|
|
|
/* ── Collapsible perm section ──────────────────────────── */
|
|
|
|
function setSectionAll(keys: string[], value: string) {
|
|
setPerms((p) => {
|
|
const next = { ...p };
|
|
for (const k of keys) next[k] = value;
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function setAllPerms(value: string) {
|
|
setPerms((p) => {
|
|
const next = { ...p };
|
|
for (const k of Object.keys(next)) next[k] = value;
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function PermSection({
|
|
title,
|
|
keys,
|
|
sectionKey,
|
|
}: {
|
|
title: string;
|
|
keys: string[];
|
|
sectionKey: string;
|
|
}) {
|
|
const filtered = permSearch
|
|
? keys.filter((k) => k.toLowerCase().includes(permSearch.toLowerCase()))
|
|
: keys;
|
|
if (permSearch && filtered.length === 0) return null;
|
|
const on = filtered.filter((k) => (perms[k] ?? "0") !== "0").length;
|
|
const _allOn = on === filtered.length;
|
|
void _allOn;
|
|
const open = !collapsed.has(sectionKey);
|
|
|
|
return (
|
|
<div className="border rounded-lg overflow-hidden">
|
|
<div className="flex items-center bg-muted/30">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggle(sectionKey)}
|
|
className="flex flex-1 items-center justify-between px-4 py-3 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<span className="text-sm font-medium">{title}</span>
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant={on > 0 ? "default" : "secondary"}
|
|
className="text-[10px]"
|
|
>
|
|
{on}/{filtered.length}
|
|
</Badge>
|
|
<ChevronDown
|
|
className={cn(
|
|
"h-4 w-4 text-muted-foreground transition-transform",
|
|
!open && "-rotate-90",
|
|
)}
|
|
/>
|
|
</div>
|
|
</button>
|
|
{open && (
|
|
<div className="flex gap-1 pr-3 shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 px-2 text-[10px]"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSectionAll(filtered, "1");
|
|
}}
|
|
>
|
|
All On
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 px-2 text-[10px]"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSectionAll(filtered, "0");
|
|
}}
|
|
>
|
|
All Off
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{open && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-border">
|
|
{filtered.map((key) => (
|
|
<div
|
|
key={key}
|
|
className={cn(
|
|
"flex items-center justify-between px-3 py-2 bg-card",
|
|
(perms[key] ?? "0") !== "0" &&
|
|
"bg-[var(--admin-success-subtle)]",
|
|
)}
|
|
>
|
|
<span className="font-mono text-xs truncate mr-3">{key}</span>
|
|
<PermToggle
|
|
value={perms[key] ?? "0"}
|
|
maxValue={initialRank.permissionMaxValues[key] ?? 1}
|
|
onChange={(v) => setPerms((p) => ({ ...p, [key]: v }))}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const filteredCms = cmsSearch
|
|
? allCmsPermissions.filter(
|
|
(p) =>
|
|
p.slug.toLowerCase().includes(cmsSearch.toLowerCase()) ||
|
|
p.title?.toLowerCase().includes(cmsSearch.toLowerCase()),
|
|
)
|
|
: allCmsPermissions;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/admin/permissions">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
{initialRank.id >= 7 ? (
|
|
<Crown className="h-6 w-6 text-[var(--admin-warning)]" />
|
|
) : initialRank.id >= 5 ? (
|
|
<ShieldCheck className="h-6 w-6 text-[var(--admin-info)]" />
|
|
) : (
|
|
<Shield className="h-6 w-6 text-muted-foreground" />
|
|
)}
|
|
<div>
|
|
<h1 className="text-2xl font-bold">
|
|
{general.rank_name || `Rank ${initialRank.id}`}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Rank #{initialRank.id} · Level {initialRank.level} ·{" "}
|
|
{totalUsers} users
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs defaultValue="general">
|
|
<TabsList>
|
|
<TabsTrigger value="general">
|
|
<Settings className="w-3.5 h-3.5 mr-1" /> General
|
|
</TabsTrigger>
|
|
<TabsTrigger value="emulator">
|
|
<Terminal className="w-3.5 h-3.5 mr-1" /> Emulator ({enabledCount})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="cms">
|
|
<UserCheck className="w-3.5 h-3.5 mr-1" /> CMS (
|
|
{cmsPermSlugs.length})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="users">Users ({totalUsers})</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* ═══ General ═══ */}
|
|
<TabsContent value="general" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Rank Settings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Rank Name</Label>
|
|
<Input
|
|
value={general.rank_name}
|
|
onChange={(e) =>
|
|
setGeneral({ ...general, rank_name: e.target.value })
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Badge</Label>
|
|
<Input
|
|
value={general.badge}
|
|
onChange={(e) =>
|
|
setGeneral({ ...general, badge: e.target.value })
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Prefix</Label>
|
|
<Input
|
|
value={general.prefix}
|
|
onChange={(e) =>
|
|
setGeneral({ ...general, prefix: e.target.value })
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Prefix Color</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={general.prefix_color}
|
|
onChange={(e) =>
|
|
setGeneral({ ...general, prefix_color: e.target.value })
|
|
}
|
|
/>
|
|
{general.prefix_color && (
|
|
<div
|
|
className="w-9 h-9 rounded border shrink-0"
|
|
style={{
|
|
backgroundColor: general.prefix_color.startsWith("#")
|
|
? general.prefix_color
|
|
: `#${general.prefix_color}`,
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|
<div>
|
|
<Label className="text-sm">Hidden Rank</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Hide from public
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={general.hidden_rank === "1"}
|
|
onCheckedChange={(v) =>
|
|
setGeneral({ ...general, hidden_rank: v ? "1" : "0" })
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|
<div>
|
|
<Label className="text-sm">Log Commands</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Record to audit log
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={general.log_commands === "1"}
|
|
onCheckedChange={(v) =>
|
|
setGeneral({ ...general, log_commands: v ? "1" : "0" })
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5 rounded-lg border p-3">
|
|
<Label className="text-xs">Room Effect ID</Label>
|
|
<Input
|
|
type="number"
|
|
value={general.room_effect}
|
|
onChange={(e) => setNum("room_effect", e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Auto Credits</Label>
|
|
<Input
|
|
type="number"
|
|
value={general.auto_credits_amount}
|
|
onChange={(e) =>
|
|
setNum("auto_credits_amount", e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Auto Pixels</Label>
|
|
<Input
|
|
type="number"
|
|
value={general.auto_pixels_amount}
|
|
onChange={(e) =>
|
|
setNum("auto_pixels_amount", e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Auto GOTW</Label>
|
|
<Input
|
|
type="number"
|
|
value={general.auto_gotw_amount}
|
|
onChange={(e) => setNum("auto_gotw_amount", e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Auto Points</Label>
|
|
<Input
|
|
type="number"
|
|
value={general.auto_points_amount}
|
|
onChange={(e) =>
|
|
setNum("auto_points_amount", e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end mt-4">
|
|
<Button onClick={saveRank} disabled={isPending} size="sm">
|
|
{isPending ? (
|
|
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
|
|
) : (
|
|
<Save className="w-4 h-4 mr-1" />
|
|
)}
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Users preview */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">
|
|
Users with this rank
|
|
{totalUsers > users.length && (
|
|
<span className="text-muted-foreground font-normal ml-1 text-sm">
|
|
(showing {users.length} of {totalUsers})
|
|
</span>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{users.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
No users with this rank.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
|
|
{users.map((u) => (
|
|
<Link
|
|
key={u.id}
|
|
href={`/admin/users/show/${u.id}`}
|
|
className="flex items-center gap-2 rounded-lg border p-2 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<img
|
|
src={getAvatarUrl(u.look, {
|
|
size: "s",
|
|
headDirection: 2,
|
|
})}
|
|
alt=""
|
|
className="w-8 h-12 object-cover"
|
|
/>
|
|
<span className="text-xs font-medium truncate">
|
|
{u.username}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* ═══ Emulator Permissions ═══ */}
|
|
<TabsContent value="emulator" className="space-y-4">
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
|
<p className="text-sm text-muted-foreground">
|
|
{enabledCount} of {totalCount} permissions enabled
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={() => setAllPerms("1")}
|
|
>
|
|
Enable All
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={() => setAllPerms("0")}
|
|
>
|
|
Disable All
|
|
</Button>
|
|
</div>
|
|
<div className="flex gap-2 text-[11px] text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<span className="w-3 h-3 rounded bg-[var(--admin-text-muted)] inline-block" />{" "}
|
|
Off
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<span className="w-3 h-3 rounded bg-[var(--admin-success-subtle)] inline-block" />{" "}
|
|
On
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<span className="w-3 h-3 rounded bg-[var(--admin-warning-subtle)] inline-block" />{" "}
|
|
Owner
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search permissions..."
|
|
value={permSearch}
|
|
onChange={(e) => setPermSearch(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
|
|
<PermSection title="Commands" keys={cats.commands} sectionKey="cmd" />
|
|
<PermSection title="Account" keys={cats.account} sectionKey="acc" />
|
|
{cats.other.length > 0 && (
|
|
<PermSection title="Other" keys={cats.other} sectionKey="other" />
|
|
)}
|
|
|
|
<div className="flex justify-end">
|
|
<Button onClick={saveRank} disabled={isPending}>
|
|
{isPending ? (
|
|
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
|
|
) : (
|
|
<Save className="w-4 h-4 mr-1" />
|
|
)}
|
|
Save Rank
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* ═══ CMS Permissions ═══ */}
|
|
<TabsContent value="cms" className="space-y-4">
|
|
{initialRank.id < 4 ? (
|
|
<div className="rounded-lg border bg-card p-6 text-center">
|
|
<p className="text-muted-foreground">
|
|
CMS permissions are available from rank 4 and above.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">
|
|
{cmsPermSlugs.length} of {allCmsPermissions.length} assigned
|
|
</p>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={async () => {
|
|
if (!initialCmsRole) return;
|
|
const all = allCmsPermissions.map((p) => p.slug);
|
|
setCmsPermSlugs(all);
|
|
const r = await setCmsPermissions({
|
|
roleId: initialCmsRole.id,
|
|
permissionSlugs: all,
|
|
});
|
|
if (!r.ok) {
|
|
setCmsPermSlugs(initialCmsRole.permissionSlugs);
|
|
toast.error("Failed");
|
|
}
|
|
}}
|
|
>
|
|
Select All
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={async () => {
|
|
if (!initialCmsRole) return;
|
|
setCmsPermSlugs([]);
|
|
const r = await setCmsPermissions({
|
|
roleId: initialCmsRole.id,
|
|
permissionSlugs: [],
|
|
});
|
|
if (!r.ok) {
|
|
setCmsPermSlugs(initialCmsRole.permissionSlugs);
|
|
toast.error("Failed");
|
|
}
|
|
}}
|
|
>
|
|
Deselect All
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search CMS permissions..."
|
|
value={cmsSearch}
|
|
onChange={(e) => setCmsSearch(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{filteredCms.map((perm) => {
|
|
const on = cmsPermSlugs.includes(perm.slug);
|
|
return (
|
|
<div
|
|
key={perm.id}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg border px-4 py-3 transition-all",
|
|
on
|
|
? "border-[var(--admin-success-border)] bg-[var(--admin-success-subtle)]"
|
|
: "hover:bg-muted/50",
|
|
)}
|
|
>
|
|
<Checkbox
|
|
checked={on}
|
|
onCheckedChange={() => toggleCms(perm.slug)}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-mono">{perm.slug}</span>
|
|
{perm.title && (
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
{perm.title}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{on && (
|
|
<Badge className="bg-[var(--admin-success-subtle)] text-[var(--admin-success)] border-[var(--admin-success-border)] text-[10px]">
|
|
Active
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{filteredCms.length === 0 && (
|
|
<p className="text-sm text-muted-foreground text-center py-4">
|
|
No permissions match your search.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* ═══ Users ═══ */}
|
|
<TabsContent value="users">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">
|
|
Users with this rank
|
|
{totalUsers > users.length && (
|
|
<span className="text-muted-foreground font-normal ml-1 text-sm">
|
|
(showing {users.length} of {totalUsers})
|
|
</span>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{users.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
No users with this rank.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
|
|
{users.map((u) => (
|
|
<Link
|
|
key={u.id}
|
|
href={`/admin/users/show/${u.id}`}
|
|
className="flex items-center gap-2 rounded-lg border p-2 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<img
|
|
src={getAvatarUrl(u.look, {
|
|
size: "s",
|
|
headDirection: 2,
|
|
})}
|
|
alt=""
|
|
className="w-8 h-12 object-cover"
|
|
/>
|
|
<span className="text-xs font-medium truncate">
|
|
{u.username}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|