336 lines
11 KiB
TypeScript
336 lines
11 KiB
TypeScript
import { Badge } from "@workspace/ui/components/badge";
|
|
import { Button } from "@workspace/ui/components/button";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@workspace/ui/components/sheet";
|
|
import { Skeleton } from "@workspace/ui/components/skeleton";
|
|
import { Switch } from "@workspace/ui/components/switch";
|
|
import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
|
|
import { ProTable } from "@workspace/ui/composed/pro-table/pro-table";
|
|
import {
|
|
getUserSubscribeById,
|
|
getUserSubscribeDevices,
|
|
kickOfflineByUserDevice,
|
|
} from "@workspace/ui/services/admin/user";
|
|
import { deviceIdToHash } from "@workspace/ui/utils/device";
|
|
import { AlertCircle, AlertTriangle, Gauge } from "lucide-react";
|
|
import { type ReactNode, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
import { IpLink } from "@/components/ip-link";
|
|
import { formatDate } from "@/utils/common";
|
|
|
|
function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
|
|
const { t } = useTranslation("user");
|
|
const [detail, setDetail] = useState<API.UserSubscribeDetail | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isError, setIsError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let ignore = false;
|
|
|
|
setIsLoading(true);
|
|
setIsError(false);
|
|
getUserSubscribeById({ id: subscriptionId })
|
|
.then(({ data }) => {
|
|
if (!ignore) setDetail(data.data || null);
|
|
})
|
|
.catch(() => {
|
|
if (!ignore) {
|
|
setDetail(null);
|
|
setIsError(true);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
if (!ignore) setIsLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
ignore = true;
|
|
};
|
|
}, [subscriptionId]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="mb-4 rounded-lg border bg-muted/30 p-3">
|
|
<Skeleton className="mb-3 h-5 w-40" />
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Skeleton className="h-16" />
|
|
<Skeleton className="h-16" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="mb-4 flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/5 p-3 text-destructive text-sm">
|
|
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
|
<span>
|
|
{t("subscriptionDetailLoadFailed", "Failed to load speed settings.")}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!detail) {
|
|
return (
|
|
<div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
|
|
{t("subscriptionDetailEmpty", "No subscription details found.")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (detail.status !== 1) return null;
|
|
|
|
const baseSpeed = detail.subscribe?.speed_limit ?? 0;
|
|
const userSpeed = detail.speed_limit ?? 0;
|
|
const effectiveSpeed = detail.effective_speed ?? 0;
|
|
const isThrottled = detail.is_throttled;
|
|
const rules = detail.traffic_limit || [];
|
|
const hasLimitConfig =
|
|
baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;
|
|
|
|
if (!(hasLimitConfig || isThrottled)) {
|
|
return (
|
|
<div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
|
|
{t("speedLimitEmpty", "No user-level speed limit rules configured.")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`mb-4 flex items-start gap-3 rounded-lg border p-3 text-sm ${
|
|
isThrottled
|
|
? "border-destructive/40 bg-destructive/5 text-destructive"
|
|
: "border-border bg-muted/40 text-foreground"
|
|
}`}
|
|
>
|
|
{isThrottled ? (
|
|
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
|
|
) : (
|
|
<Gauge className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
)}
|
|
<div className="min-w-0 flex-1 space-y-3">
|
|
<div className="flex flex-wrap items-center gap-2 font-medium">
|
|
{isThrottled ? (
|
|
<>
|
|
<span>{t("throttled", "Speed Throttled")}</span>
|
|
<Badge className="text-xs" variant="destructive">
|
|
{effectiveSpeed} Mbps
|
|
</Badge>
|
|
{baseSpeed > 0 && (
|
|
<span className="text-muted-foreground text-xs line-through">
|
|
{t("subscriptionDefault", "Subscription Default")}:{" "}
|
|
{baseSpeed} Mbps
|
|
</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-muted-foreground">
|
|
{t("speedLimit", "Speed Limit")}
|
|
</span>
|
|
<Badge className="text-xs" variant="secondary">
|
|
{effectiveSpeed > 0
|
|
? `${effectiveSpeed} Mbps`
|
|
: t("unlimited", "Unlimited")}
|
|
</Badge>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="grid gap-2 sm:grid-cols-3">
|
|
<SpeedMetric
|
|
label={t("subscriptionDefault", "Subscription Default")}
|
|
value={baseSpeed}
|
|
/>
|
|
<SpeedMetric
|
|
label={t("userOverride", "User Override")}
|
|
value={userSpeed}
|
|
/>
|
|
<SpeedMetric
|
|
label={t("effectiveSpeed", "Effective Speed")}
|
|
value={effectiveSpeed}
|
|
/>
|
|
</div>
|
|
{isThrottled && detail.throttle_rule && (
|
|
<p className="text-muted-foreground text-xs">
|
|
{detail.throttle_rule}
|
|
</p>
|
|
)}
|
|
{isThrottled && detail.throttle_start && detail.throttle_end && (
|
|
<p className="text-muted-foreground text-xs">
|
|
{formatDate(detail.throttle_start)} ~{" "}
|
|
{formatDate(detail.throttle_end)}
|
|
</p>
|
|
)}
|
|
{rules.length > 0 && (
|
|
<div className="space-y-2">
|
|
<p className="font-medium text-foreground text-xs">
|
|
{t("trafficLimitRules", "Traffic Limit Rules")}
|
|
</p>
|
|
<div className="grid gap-2">
|
|
{rules.map((rule, index) => (
|
|
<div
|
|
className="rounded-md border bg-background/60 px-3 py-2 text-muted-foreground text-xs"
|
|
key={`${rule.stat_type}-${rule.stat_value}-${index}`}
|
|
>
|
|
{t("trafficLimitRuleSummary", {
|
|
defaultValue:
|
|
"{{traffic}} GB in {{value}} {{type}} -> {{speed}} Mbps",
|
|
traffic: rule.traffic_usage,
|
|
value: rule.stat_value,
|
|
type:
|
|
rule.stat_type === "hour"
|
|
? t("hour", "Hour")
|
|
: t("day", "Day"),
|
|
speed: rule.speed_limit,
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SpeedMetric({ label, value }: { label: string; value: number }) {
|
|
const { t } = useTranslation("user");
|
|
|
|
return (
|
|
<div className="rounded-md border bg-background/60 p-2">
|
|
<div className="text-muted-foreground text-xs">{label}</div>
|
|
<div className="font-medium text-foreground">
|
|
{value > 0 ? `${value} Mbps` : t("unlimited", "Unlimited")}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SubscriptionDetail({
|
|
trigger,
|
|
userId,
|
|
subscriptionId,
|
|
}: {
|
|
trigger: ReactNode;
|
|
userId: number;
|
|
subscriptionId: number;
|
|
}) {
|
|
const { t } = useTranslation("user");
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Sheet onOpenChange={setOpen} open={open}>
|
|
<SheetTrigger asChild>{trigger}</SheetTrigger>
|
|
<SheetContent
|
|
className="w-[700px] max-w-full md:max-w-screen-md"
|
|
side="right"
|
|
>
|
|
<SheetHeader>
|
|
<SheetTitle>{t("onlineDevices", "Online Devices")}</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="mt-4 max-h-[calc(100dvh-120px)] overflow-y-auto">
|
|
{open && <SpeedLimitCard subscriptionId={subscriptionId} />}
|
|
<ProTable<API.UserDevice, Record<string, unknown>>
|
|
actions={{
|
|
render: (row) => {
|
|
if (!row.identifier) return [];
|
|
return [
|
|
<ConfirmButton
|
|
cancelText={t("cancel", "Cancel")}
|
|
confirmText={t("confirm", "Confirm")}
|
|
description={t(
|
|
"kickOfflineConfirm",
|
|
`Kick device ${row.ip} offline?`
|
|
)}
|
|
key="offline"
|
|
onConfirm={async () => {
|
|
await kickOfflineByUserDevice({ id: row.id });
|
|
toast.success(
|
|
t("kickOfflineSuccess", "Device kicked offline")
|
|
);
|
|
}}
|
|
title={t("confirmOffline", "Confirm Offline")}
|
|
trigger={
|
|
<Button variant="destructive">
|
|
{t("confirmOffline", "Confirm Offline")}
|
|
</Button>
|
|
}
|
|
/>,
|
|
];
|
|
},
|
|
}}
|
|
columns={[
|
|
{
|
|
accessorKey: "enabled",
|
|
header: t("enable", "Enable"),
|
|
cell: ({ row }) => (
|
|
<Switch checked={row.getValue("enabled")} disabled />
|
|
),
|
|
},
|
|
{ accessorKey: "id", header: "ID" },
|
|
{
|
|
accessorKey: "identifier",
|
|
header: t("deviceNo", "Device No."),
|
|
cell: ({ row }) => {
|
|
const id = row.original.id;
|
|
return (
|
|
<span className="font-mono" title={row.original.identifier}>
|
|
{deviceIdToHash(id)}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "user_agent",
|
|
header: t("userAgent", "User Agent"),
|
|
},
|
|
{
|
|
accessorKey: "ip",
|
|
header: "IP",
|
|
cell: ({ row }) => <IpLink ip={row.getValue("ip")} />,
|
|
},
|
|
{
|
|
accessorKey: "online",
|
|
header: t("loginStatus", "Login Status"),
|
|
cell: ({ row }) => (
|
|
<Badge
|
|
variant={row.getValue("online") ? "default" : "destructive"}
|
|
>
|
|
{row.getValue("online")
|
|
? t("online", "Online")
|
|
: t("offline", "Offline")}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "updated_at",
|
|
header: t("lastSeen", "Last Seen"),
|
|
cell: ({ row }) => formatDate(row.getValue("updated_at")),
|
|
},
|
|
]}
|
|
request={async (pagination) => {
|
|
const { data } = await getUserSubscribeDevices({
|
|
user_id: userId,
|
|
subscribe_id: subscriptionId,
|
|
...pagination,
|
|
});
|
|
return {
|
|
list: data.data?.list || [],
|
|
total: data.data?.total || 0,
|
|
};
|
|
}}
|
|
/>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|