mirror of
https://github.com/fosrl/pangolin.git
synced 2026-01-28 22:00:51 +00:00
add view user device page with fingerprint and actions
This commit is contained in:
miloschwartz
@@ -29,9 +29,11 @@ import { ListSitesResponse } from "@server/routers/site";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import ActionBanner from "@app/components/ActionBanner";
|
||||
import { Shield, ShieldOff } from "lucide-react";
|
||||
|
||||
const GeneralFormSchema = z.object({
|
||||
name: z.string().nonempty("Name is required"),
|
||||
@@ -45,7 +47,9 @@ export default function GeneralPage() {
|
||||
const { client, updateClient } = useClientContext();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const router = useRouter();
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(GeneralFormSchema),
|
||||
@@ -109,8 +113,54 @@ export default function GeneralPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleUnblock = async () => {
|
||||
if (!client?.clientId) return;
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await api.post(`/client/${client.clientId}/unblock`);
|
||||
// Optimistically update the client context
|
||||
updateClient({ blocked: false, approvalState: null });
|
||||
toast({
|
||||
title: t("unblockClient"),
|
||||
description: t("unblockClientDescription")
|
||||
});
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("error"),
|
||||
description: formatAxiosError(e, t("error"))
|
||||
});
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
{/* Blocked Device Banner */}
|
||||
{client?.blocked && (
|
||||
<ActionBanner
|
||||
variant="destructive"
|
||||
title={t("blocked")}
|
||||
titleIcon={<Shield className="w-5 h-5" />}
|
||||
description={t("deviceBlockedDescription")}
|
||||
actions={
|
||||
<Button
|
||||
onClick={handleUnblock}
|
||||
disabled={isRefreshing}
|
||||
loading={isRefreshing}
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
>
|
||||
<ShieldOff className="size-4" />
|
||||
{t("unblock")}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
|
||||
507
src/app/[orgId]/settings/clients/user/[niceId]/general/page.tsx
Normal file
507
src/app/[orgId]/settings/clients/user/[niceId]/general/page.tsx
Normal file
@@ -0,0 +1,507 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionFooter,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { useClientContext } from "@app/hooks/useClientContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { build } from "@server/build";
|
||||
import {
|
||||
InfoSection,
|
||||
InfoSectionContent,
|
||||
InfoSections,
|
||||
InfoSectionTitle
|
||||
} from "@app/components/InfoSection";
|
||||
import { Badge } from "@app/components/ui/badge";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import ActionBanner from "@app/components/ActionBanner";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useEffect, useTransition } from "react";
|
||||
import { Check, Ban, Shield, ShieldOff, Clock } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
|
||||
import { SiAndroid } from "react-icons/si";
|
||||
|
||||
function formatTimestamp(timestamp: number | null | undefined): string {
|
||||
if (!timestamp) return "-";
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
function formatPlatform(platform: string | null | undefined): string {
|
||||
if (!platform) return "-";
|
||||
const platformMap: Record<string, string> = {
|
||||
macos: "macOS",
|
||||
windows: "Windows",
|
||||
linux: "Linux",
|
||||
ios: "iOS",
|
||||
android: "Android",
|
||||
unknown: "Unknown"
|
||||
};
|
||||
return platformMap[platform.toLowerCase()] || platform;
|
||||
}
|
||||
|
||||
function getPlatformIcon(platform: string | null | undefined) {
|
||||
if (!platform) return null;
|
||||
const normalizedPlatform = platform.toLowerCase();
|
||||
switch (normalizedPlatform) {
|
||||
case "macos":
|
||||
case "ios":
|
||||
return <FaApple className="h-4 w-4" />;
|
||||
case "windows":
|
||||
return <FaWindows className="h-4 w-4" />;
|
||||
case "linux":
|
||||
return <FaLinux className="h-4 w-4" />;
|
||||
case "android":
|
||||
return <SiAndroid className="h-4 w-4" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
type FieldConfig = {
|
||||
show: boolean;
|
||||
labelKey: string;
|
||||
};
|
||||
|
||||
function getPlatformFieldConfig(
|
||||
platform: string | null | undefined
|
||||
): Record<string, FieldConfig> {
|
||||
const normalizedPlatform = platform?.toLowerCase() || "unknown";
|
||||
|
||||
const configs: Record<string, Record<string, FieldConfig>> = {
|
||||
macos: {
|
||||
osVersion: { show: true, labelKey: "macosVersion" },
|
||||
kernelVersion: { show: false, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
},
|
||||
windows: {
|
||||
osVersion: { show: true, labelKey: "windowsVersion" },
|
||||
kernelVersion: { show: true, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
},
|
||||
linux: {
|
||||
osVersion: { show: true, labelKey: "osVersion" },
|
||||
kernelVersion: { show: true, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
},
|
||||
ios: {
|
||||
osVersion: { show: true, labelKey: "iosVersion" },
|
||||
kernelVersion: { show: false, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
},
|
||||
android: {
|
||||
osVersion: { show: true, labelKey: "androidVersion" },
|
||||
kernelVersion: { show: true, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
},
|
||||
unknown: {
|
||||
osVersion: { show: true, labelKey: "osVersion" },
|
||||
kernelVersion: { show: true, labelKey: "kernelVersion" },
|
||||
arch: { show: true, labelKey: "architecture" },
|
||||
deviceModel: { show: true, labelKey: "deviceModel" },
|
||||
serialNumber: { show: true, labelKey: "serialNumber" },
|
||||
username: { show: true, labelKey: "username" },
|
||||
hostname: { show: true, labelKey: "hostname" }
|
||||
}
|
||||
};
|
||||
|
||||
return configs[normalizedPlatform] || configs.unknown;
|
||||
}
|
||||
|
||||
export default function GeneralPage() {
|
||||
const { client, updateClient } = useClientContext();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const orgId = params.orgId as string;
|
||||
const [approvalId, setApprovalId] = useState<number | null>(null);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
const showApprovalFeatures = build !== "oss" && isPaidUser;
|
||||
|
||||
// Fetch approval ID for this client if pending
|
||||
useEffect(() => {
|
||||
if (showApprovalFeatures && client.approvalState === "pending" && client.clientId) {
|
||||
api.get(`/org/${orgId}/approvals?approvalState=pending`)
|
||||
.then((res) => {
|
||||
const approval = res.data.data.approvals.find(
|
||||
(a: any) => a.clientId === client.clientId
|
||||
);
|
||||
if (approval) {
|
||||
setApprovalId(approval.approvalId);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Silently fail - approval might not exist
|
||||
});
|
||||
}
|
||||
}, [showApprovalFeatures, client.approvalState, client.clientId, orgId, api]);
|
||||
|
||||
const handleApprove = async () => {
|
||||
if (!approvalId) return;
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await api.put(`/org/${orgId}/approvals/${approvalId}`, {
|
||||
decision: "approved"
|
||||
});
|
||||
// Optimistically update the client context
|
||||
updateClient({ approvalState: "approved" });
|
||||
toast({
|
||||
title: t("accessApprovalUpdated"),
|
||||
description: t("accessApprovalApprovedDescription")
|
||||
});
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("accessApprovalErrorUpdate"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("accessApprovalErrorUpdateDescription")
|
||||
)
|
||||
});
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeny = async () => {
|
||||
if (!approvalId) return;
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await api.put(`/org/${orgId}/approvals/${approvalId}`, {
|
||||
decision: "denied"
|
||||
});
|
||||
// Optimistically update the client context
|
||||
updateClient({ approvalState: "denied", blocked: true });
|
||||
toast({
|
||||
title: t("accessApprovalUpdated"),
|
||||
description: t("accessApprovalDeniedDescription")
|
||||
});
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("accessApprovalErrorUpdate"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("accessApprovalErrorUpdateDescription")
|
||||
)
|
||||
});
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlock = async () => {
|
||||
if (!client.clientId) return;
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await api.post(`/client/${client.clientId}/block`);
|
||||
// Optimistically update the client context
|
||||
updateClient({ blocked: true, approvalState: "denied" });
|
||||
toast({
|
||||
title: t("blockClient"),
|
||||
description: t("blockClientMessage")
|
||||
});
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("error"),
|
||||
description: formatAxiosError(e, t("error"))
|
||||
});
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnblock = async () => {
|
||||
if (!client.clientId) return;
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
await api.post(`/client/${client.clientId}/unblock`);
|
||||
// Optimistically update the client context
|
||||
updateClient({ blocked: false, approvalState: null });
|
||||
toast({
|
||||
title: t("unblockClient"),
|
||||
description: t("unblockClientDescription")
|
||||
});
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("error"),
|
||||
description: formatAxiosError(e, t("error"))
|
||||
});
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
{/* Pending Approval Banner */}
|
||||
{showApprovalFeatures && client.approvalState === "pending" && (
|
||||
<ActionBanner
|
||||
variant="warning"
|
||||
title={t("pendingApproval")}
|
||||
titleIcon={<Clock className="w-5 h-5" />}
|
||||
description={t("devicePendingApprovalBannerDescription")}
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
onClick={handleApprove}
|
||||
disabled={isRefreshing || !approvalId}
|
||||
loading={isRefreshing}
|
||||
className="gap-2"
|
||||
>
|
||||
<Check className="size-4" />
|
||||
{t("approve")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDeny}
|
||||
disabled={isRefreshing || !approvalId}
|
||||
loading={isRefreshing}
|
||||
variant="destructive"
|
||||
className="gap-2"
|
||||
>
|
||||
<Ban className="size-4" />
|
||||
{t("deny")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Blocked Device Banner */}
|
||||
{client.blocked && client.approvalState !== "pending" && (
|
||||
<ActionBanner
|
||||
variant="destructive"
|
||||
title={t("blocked")}
|
||||
titleIcon={<Shield className="w-5 h-5" />}
|
||||
description={t("deviceBlockedDescription")}
|
||||
actions={
|
||||
<Button
|
||||
onClick={handleUnblock}
|
||||
disabled={isRefreshing}
|
||||
loading={isRefreshing}
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
>
|
||||
<ShieldOff className="size-4" />
|
||||
{t("unblock")}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Device Information Section */}
|
||||
{(client.fingerprint ||
|
||||
(client.agent && client.olmVersion)) && (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("deviceInformation")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("deviceInformationDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
|
||||
<SettingsSectionBody>
|
||||
{client.agent && client.olmVersion && (
|
||||
<div className="mb-6">
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("agent")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<Badge variant="secondary">
|
||||
{client.agent + " v" + client.olmVersion}
|
||||
</Badge>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{client.fingerprint && (() => {
|
||||
const platform = client.fingerprint.platform;
|
||||
const fieldConfig = getPlatformFieldConfig(platform);
|
||||
|
||||
return (
|
||||
<InfoSections cols={3}>
|
||||
{platform && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("platform")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<div className="flex items-center gap-2">
|
||||
{getPlatformIcon(platform)}
|
||||
<span>{formatPlatform(platform)}</span>
|
||||
</div>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.osVersion &&
|
||||
fieldConfig.osVersion.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t(fieldConfig.osVersion.labelKey)}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.osVersion}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.kernelVersion &&
|
||||
fieldConfig.kernelVersion.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("kernelVersion")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.kernelVersion}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.arch &&
|
||||
fieldConfig.arch.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("architecture")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.arch}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.deviceModel &&
|
||||
fieldConfig.deviceModel.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("deviceModel")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.deviceModel}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.serialNumber &&
|
||||
fieldConfig.serialNumber.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("serialNumber")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.serialNumber}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.username &&
|
||||
fieldConfig.username.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("username")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.username}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.hostname &&
|
||||
fieldConfig.hostname.show && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("hostname")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{client.fingerprint.hostname}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.firstSeen && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("firstSeen")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{formatTimestamp(
|
||||
client.fingerprint.firstSeen
|
||||
)}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
|
||||
{client.fingerprint.lastSeen && (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("lastSeen")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{formatTimestamp(
|
||||
client.fingerprint.lastSeen
|
||||
)}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
)}
|
||||
</InfoSections>
|
||||
);
|
||||
})()}
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
)}
|
||||
</SettingsContainer>
|
||||
);
|
||||
}
|
||||
57
src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
Normal file
57
src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import ClientInfoCard from "@app/components/ClientInfoCard";
|
||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import ClientProvider from "@app/providers/ClientProvider";
|
||||
import { GetClientResponse } from "@server/routers/client";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
type SettingsLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ niceId: number | string; orgId: string }>;
|
||||
};
|
||||
|
||||
export default async function SettingsLayout(props: SettingsLayoutProps) {
|
||||
const params = await props.params;
|
||||
|
||||
const { children } = props;
|
||||
|
||||
let client = null;
|
||||
try {
|
||||
const res = await internal.get<AxiosResponse<GetClientResponse>>(
|
||||
`/org/${params.orgId}/client/${params.niceId}`,
|
||||
await authCookieHeader()
|
||||
);
|
||||
client = res.data.data;
|
||||
} catch (error) {
|
||||
redirect(`/${params.orgId}/settings/clients/user`);
|
||||
}
|
||||
|
||||
const t = await getTranslations();
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
title: t("general"),
|
||||
href: `/${params.orgId}/settings/clients/user/${params.niceId}/general`
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSectionTitle
|
||||
title={`${client?.name} Settings`}
|
||||
description={t("deviceSettingsDescription")}
|
||||
/>
|
||||
|
||||
<ClientProvider client={client}>
|
||||
<div className="space-y-6">
|
||||
<ClientInfoCard />
|
||||
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
||||
</div>
|
||||
</ClientProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
10
src/app/[orgId]/settings/clients/user/[niceId]/page.tsx
Normal file
10
src/app/[orgId]/settings/clients/user/[niceId]/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function ClientPage(props: {
|
||||
params: Promise<{ orgId: string; niceId: number | string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
redirect(
|
||||
`/${params.orgId}/settings/clients/user/${params.niceId}/general`
|
||||
);
|
||||
}
|
||||
91
src/components/ActionBanner.tsx
Normal file
91
src/components/ActionBanner.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import React, { type ReactNode } from "react";
|
||||
import { Card, CardContent } from "@app/components/ui/card";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
const actionBannerVariants = cva(
|
||||
"mb-6 relative overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
warning: "border-yellow-500/30 bg-gradient-to-br from-yellow-500/10 via-background to-background",
|
||||
info: "border-blue-500/30 bg-gradient-to-br from-blue-500/10 via-background to-background",
|
||||
success: "border-green-500/30 bg-gradient-to-br from-green-500/10 via-background to-background",
|
||||
destructive: "border-red-500/30 bg-gradient-to-br from-red-500/10 via-background to-background",
|
||||
default: "border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const titleVariants = "text-lg font-semibold flex items-center gap-2";
|
||||
|
||||
const iconVariants = cva(
|
||||
"w-5 h-5",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
warning: "text-yellow-600 dark:text-yellow-500",
|
||||
info: "text-blue-600 dark:text-blue-500",
|
||||
success: "text-green-600 dark:text-green-500",
|
||||
destructive: "text-red-600 dark:text-red-500",
|
||||
default: "text-primary"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
type ActionBannerProps = {
|
||||
title: string;
|
||||
titleIcon?: ReactNode;
|
||||
description: string;
|
||||
actions?: ReactNode;
|
||||
className?: string;
|
||||
} & VariantProps<typeof actionBannerVariants>;
|
||||
|
||||
export function ActionBanner({
|
||||
title,
|
||||
titleIcon,
|
||||
description,
|
||||
actions,
|
||||
variant = "default",
|
||||
className
|
||||
}: ActionBannerProps) {
|
||||
return (
|
||||
<Card className={cn(actionBannerVariants({ variant }), className)}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-6">
|
||||
<div className="flex-1 space-y-2 min-w-0">
|
||||
<h3 className={titleVariants}>
|
||||
{titleIcon && (
|
||||
<span className={cn(iconVariants({ variant }))}>
|
||||
{titleIcon}
|
||||
</span>
|
||||
)}
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-4xl">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
{actions && (
|
||||
<div className="flex flex-wrap gap-3 lg:shrink-0 lg:justify-end">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ActionBanner;
|
||||
@@ -19,7 +19,11 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
|
||||
return (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
<InfoSections cols={3}>
|
||||
<InfoSections cols={4}>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("name")}</InfoSectionTitle>
|
||||
<InfoSectionContent>{client.name}</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
|
||||
<InfoSectionContent>{client.niceId}</InfoSectionContent>
|
||||
|
||||
@@ -11,7 +11,7 @@ export function InfoSections({
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`grid md:grid-cols-(--columns) md:gap-4 gap-2 md:items-start grid-cols-1`}
|
||||
className={`grid grid-cols-2 md:grid-cols-(--columns) md:gap-4 gap-2 md:items-start`}
|
||||
style={{
|
||||
// @ts-expect-error dynamic props don't work with tailwind, but we can set the
|
||||
// value of a CSS variable at runtime and tailwind will just reuse that value
|
||||
|
||||
@@ -59,7 +59,6 @@ export default function MachineClientsTable({
|
||||
const t = useTranslations();
|
||||
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
|
||||
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
|
||||
null
|
||||
);
|
||||
@@ -152,8 +151,6 @@ export default function MachineClientsTable({
|
||||
.then(() => {
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
setIsBlockModalOpen(false);
|
||||
setSelectedClient(null);
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -421,8 +418,7 @@ export default function MachineClientsTable({
|
||||
if (clientRow.blocked) {
|
||||
unblockClient(clientRow.id);
|
||||
} else {
|
||||
setSelectedClient(clientRow);
|
||||
setIsBlockModalOpen(true);
|
||||
blockClient(clientRow.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -482,28 +478,6 @@ export default function MachineClientsTable({
|
||||
title="Delete Client"
|
||||
/>
|
||||
)}
|
||||
{selectedClient && (
|
||||
<ConfirmDeleteDialog
|
||||
open={isBlockModalOpen}
|
||||
setOpen={(val) => {
|
||||
setIsBlockModalOpen(val);
|
||||
if (!val) {
|
||||
setSelectedClient(null);
|
||||
}
|
||||
}}
|
||||
dialog={
|
||||
<div className="space-y-2">
|
||||
<p>{t("blockClientQuestion")}</p>
|
||||
<p>{t("blockClientMessage")}</p>
|
||||
</div>
|
||||
}
|
||||
buttonText={t("blockClientConfirm")}
|
||||
onConfirm={async () => blockClient(selectedClient!.id)}
|
||||
string={selectedClient.name}
|
||||
title={t("blockClient")}
|
||||
/>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={machineClients || []}
|
||||
|
||||
@@ -60,7 +60,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
|
||||
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
|
||||
null
|
||||
);
|
||||
@@ -152,8 +151,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
|
||||
.then(() => {
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
setIsBlockModalOpen(false);
|
||||
setSelectedClient(null);
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -457,8 +454,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
|
||||
if (clientRow.blocked) {
|
||||
unblockClient(clientRow.id);
|
||||
} else {
|
||||
setSelectedClient(clientRow);
|
||||
setIsBlockModalOpen(true);
|
||||
blockClient(clientRow.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -484,7 +480,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Link
|
||||
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
|
||||
href={`/${clientRow.orgId}/settings/clients/user/${clientRow.niceId}`}
|
||||
>
|
||||
<Button variant={"outline"}>
|
||||
View
|
||||
@@ -520,28 +516,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
|
||||
title="Delete Client"
|
||||
/>
|
||||
)}
|
||||
{selectedClient && (
|
||||
<ConfirmDeleteDialog
|
||||
open={isBlockModalOpen}
|
||||
setOpen={(val) => {
|
||||
setIsBlockModalOpen(val);
|
||||
if (!val) {
|
||||
setSelectedClient(null);
|
||||
}
|
||||
}}
|
||||
dialog={
|
||||
<div className="space-y-2">
|
||||
<p>{t("blockClientQuestion")}</p>
|
||||
<p>{t("blockClientMessage")}</p>
|
||||
</div>
|
||||
}
|
||||
buttonText={t("blockClientConfirm")}
|
||||
onConfirm={async () => blockClient(selectedClient!.id)}
|
||||
string={selectedClient.name}
|
||||
title={t("blockClient")}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ClientDownloadBanner />
|
||||
|
||||
<DataTable
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import ClientContext from "@app/contexts/clientContext";
|
||||
import { GetClientResponse } from "@server/routers/client/getClient";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface ClientProviderProps {
|
||||
children: React.ReactNode;
|
||||
@@ -15,6 +15,11 @@ export function ClientProvider({
|
||||
}: ClientProviderProps) {
|
||||
const [client, setClient] = useState<GetClientResponse>(serverClient);
|
||||
|
||||
// Sync client state when server client changes (e.g., after router.refresh())
|
||||
useEffect(() => {
|
||||
setClient(serverClient);
|
||||
}, [serverClient]);
|
||||
|
||||
const updateClient = (updatedClient: Partial<GetClientResponse>) => {
|
||||
if (!client) {
|
||||
throw new Error("No client to update");
|
||||
|
||||
Reference in New Issue
Block a user