+
+
+
+
+
-
Create Credential
+
+
+
Create Credential
+
{#if submitError}
-
+
{/if}
- ();
@@ -39,10 +47,12 @@
let moniker = "";
let monikerEdited = false;
let selectedPermissions = new Set();
- let permissionSearch = "";
let expandedCategories = new Set();
let isSubmitting = false;
let submitError = "";
+ let customPermNode = "";
+ let customPermError = "";
+ let customNodes: string[] = [];
$: if (!monikerEdited) {
moniker = title
@@ -51,27 +61,10 @@
.replace(/[^a-z0-9-]/g, "");
}
- $: filteredEntries = (() => {
- const entries = Object.entries(permissionNodes) as [
- string,
- PermissionCategory,
- ][];
- if (!permissionSearch.trim()) return entries;
- const q = permissionSearch.toLowerCase();
- return entries
- .map(([key, cat]): [string, PermissionCategory] => [
- key,
- {
- ...cat,
- permissions: cat.permissions.filter(
- (p: PermissionNode) =>
- p.node.toLowerCase().includes(q) ||
- p.description.toLowerCase().includes(q),
- ),
- },
- ])
- .filter(([, cat]) => cat.permissions.length > 0);
- })();
+ $: permissionEntries = Object.entries(permissionNodes ?? {}) as [
+ string,
+ PermissionCategory,
+ ][];
$: isValid = title.trim().length > 0 && moniker.trim().length > 0;
$: selectedCount = selectedPermissions.size;
@@ -97,15 +90,52 @@
selectedPermissions = next;
}
+ function addCustomPermission() {
+ const node = customPermNode.trim();
+ customPermError = "";
+ if (!node) return;
+ // Validate permission node format per PERMISSIONS.md:
+ // - dot-separated tokens of lowercase alphanumeric + underscores
+ // - special tokens: * (wildcard), ? (single-char wildcard)
+ // - inclusive list [a,b,c] or exclusive list
+ // - standalone * for full access
+ if (
+ !/^(?:\*|(?:(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>)(?:\.(?:[a-z0-9_]+|\*|\?|\[[a-z0-9_]+(?:,[a-z0-9_]+)*\]|<[a-z0-9_]+(?:,[a-z0-9_]+)*>))*))$/.test(
+ node,
+ )
+ ) {
+ customPermError =
+ "Use dot-separated tokens (e.g. resource.action). Supports: a-z, 0-9, underscores, * ? wildcards, [a,b] or lists.";
+ return;
+ }
+ if (selectedPermissions.has(node)) {
+ customPermError = "This permission is already selected.";
+ return;
+ }
+ // Add to custom list if not from the categorized set
+ const catalogued = Object.values(permissionNodes).flatMap((cat) =>
+ (cat as PermissionCategory).permissions.map((p) => p.node),
+ );
+ if (!catalogued.includes(node)) {
+ customNodes = [...customNodes, node];
+ }
+ const next = new Set(selectedPermissions);
+ next.add(node);
+ selectedPermissions = next;
+ customPermNode = "";
+ }
+
function reset() {
title = "";
moniker = "";
monikerEdited = false;
selectedPermissions = new Set();
- permissionSearch = "";
expandedCategories = new Set();
isSubmitting = false;
submitError = "";
+ customPermNode = "";
+ customPermError = "";
+ customNodes = [];
}
function handleClose() {
@@ -113,9 +143,8 @@
onClose();
}
- function handleBackdropClick(e: MouseEvent) {
- if ((e.target as HTMLElement).classList.contains("modal-backdrop"))
- handleClose();
+ function handleBackdropClick() {
+ handleClose();
}
function handleBackdropKeydown(e: KeyboardEvent) {
@@ -130,12 +159,15 @@
on:click={handleBackdropClick}
on:keydown={handleBackdropKeydown}
>
+
+
= {};
if (options?.includeAddress) params.includeAddress = "true";
+ if (options?.includePrimaryContact) params.includePrimaryContact = "true";
+ if (options?.includeAllContacts) params.includeAllContacts = "true";
const company = await api.get(`/v1/company/companies/${id}`, {
params,
diff --git a/src/lib/optima-api/modules/credentialTypes.ts b/src/lib/optima-api/modules/credentialTypes.ts
index b43b0cd..69362b8 100644
--- a/src/lib/optima-api/modules/credentialTypes.ts
+++ b/src/lib/optima-api/modules/credentialTypes.ts
@@ -5,7 +5,8 @@ export interface CredentialTypeField {
name: string;
required: boolean;
secure: boolean;
- valueType: "plain_text" | "password" | "number" | "email" | "url";
+ valueType: string;
+ subFields?: CredentialTypeField[];
}
export interface CredentialType {
diff --git a/src/lib/optima-api/modules/credentials.ts b/src/lib/optima-api/modules/credentials.ts
index e2a610a..1e8b396 100644
--- a/src/lib/optima-api/modules/credentials.ts
+++ b/src/lib/optima-api/modules/credentials.ts
@@ -2,15 +2,20 @@ import api from "../axios";
export interface CredentialField {
id: string;
- fieldId: string;
+ name: string;
+ secure: boolean;
+ required: boolean;
+ valueType: string;
value: string;
}
export interface Credential {
id: string;
name: string;
+ notes?: string;
typeId: string;
companyId: string;
+ subCredentialOfId?: string;
fields: CredentialField[];
type?: {
id: string;
@@ -45,6 +50,7 @@ export const credential = {
Authorization: `Bearer ${accessToken}`,
},
});
+
return response.data;
},
@@ -62,7 +68,11 @@ export const credential = {
return response.data;
},
- async update(accessToken: string, id: string, data: { name: string }) {
+ async update(
+ accessToken: string,
+ id: string,
+ data: { name?: string; notes?: string },
+ ) {
const response = await api.patch(`/v1/credential/credentials/${id}`, data, {
headers: {
Authorization: `Bearer ${accessToken}`,
@@ -96,4 +106,79 @@ export const credential = {
});
return response.data;
},
+
+ async fetchSecureValue(
+ accessToken: string,
+ credentialId: string,
+ fieldId: string,
+ ) {
+ const response = await api.get(
+ `/v1/credential/credentials/${credentialId}/secure-values/${fieldId}`,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+
+ return response.data;
+ },
+
+ async fetchValueTypes(accessToken: string) {
+ const response = await api.get("/v1/credential/valuetypes", {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ async fetchSubCredentials(accessToken: string, credentialId: string) {
+ const response = await api.get(
+ `/v1/credential/credentials/${credentialId}/sub-credentials`,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+ return response.data;
+ },
+
+ async addSubCredential(
+ accessToken: string,
+ credentialId: string,
+ data: {
+ fieldId: string;
+ name: string;
+ fields: Array<{ fieldId: string; value: string }>;
+ },
+ ) {
+ const response = await api.post(
+ `/v1/credential/credentials/${credentialId}/sub-credentials`,
+ data,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+ return response.data;
+ },
+
+ async removeSubCredential(
+ accessToken: string,
+ credentialId: string,
+ subId: string,
+ ) {
+ const response = await api.delete(
+ `/v1/credential/credentials/${credentialId}/sub-credentials/${subId}`,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+ return response.data;
+ },
};
diff --git a/src/lib/optima-api/modules/unifi.ts b/src/lib/optima-api/modules/unifi.ts
new file mode 100644
index 0000000..c47bcf2
--- /dev/null
+++ b/src/lib/optima-api/modules/unifi.ts
@@ -0,0 +1,383 @@
+import api from "../axios";
+
+export interface UnifiSite {
+ id: string;
+ name: string;
+ siteId: string;
+ companyId: string | null;
+ company?: {
+ id: string;
+ name: string;
+ };
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface UnifiSiteOverview {
+ health: Array<{
+ subsystem: string;
+ status: string;
+ numAdopted?: number;
+ numGateway?: number;
+ [key: string]: unknown;
+ }>;
+ sysInfo: {
+ timezone?: string;
+ hostname?: string;
+ version?: string;
+ [key: string]: unknown;
+ };
+ siteInfo: {
+ description?: string;
+ name?: string;
+ [key: string]: unknown;
+ };
+}
+
+export interface UnifiDevice {
+ id: string;
+ mac: string;
+ model: string;
+ name: string;
+ type: string;
+ state: string | number;
+ ip: string;
+ version: string;
+ uptime: number;
+ radios?: unknown[];
+ uplink?: unknown;
+ [key: string]: unknown;
+}
+
+export interface UnifiWifiNetwork {
+ id: string;
+ name?: string;
+ siteId?: string;
+ enabled?: boolean;
+ security?: string;
+ wpaMode?: string;
+ wpaEnc?: string;
+ wpa3Support?: boolean;
+ wpa3Transition?: boolean;
+ wpa3FastRoaming?: boolean;
+ wpa3Enhanced192?: boolean;
+ passphrase?: string;
+ passphraseAutogenerated?: boolean;
+ hideSSID?: boolean;
+ isGuest?: boolean;
+ band?: string;
+ bands?: string[];
+ networkconfId?: string;
+ usergroupId?: string;
+ apGroupIds?: string[];
+ apGroupMode?: string;
+ pmfMode?: string;
+ groupRekey?: number;
+ dtimMode?: string;
+ dtimNg?: number;
+ dtimNa?: number;
+ dtim6e?: number;
+ l2Isolation?: boolean;
+ fastRoamingEnabled?: boolean;
+ bssTransition?: boolean;
+ uapsdEnabled?: boolean;
+ iappEnabled?: boolean;
+ proxyArp?: boolean;
+ mcastenhanceEnabled?: boolean;
+ macFilterEnabled?: boolean;
+ macFilterPolicy?: string;
+ macFilterList?: string[];
+ radiusDasEnabled?: boolean;
+ radiusMacAuthEnabled?: boolean;
+ radiusMacaclFormat?: string;
+ minrateSettingPreference?: string;
+ minrateNgEnabled?: boolean;
+ minrateNgDataRateKbps?: number;
+ minrateNgAdvertisingRates?: boolean;
+ minrateNaEnabled?: boolean;
+ minrateNaDataRateKbps?: number;
+ minrateNaAdvertisingRates?: boolean;
+ settingPreference?: string;
+ no2ghzOui?: boolean;
+ privatePreSharedKeysEnabled?: boolean;
+ privatePreSharedKeys?: unknown[];
+ saeGroups?: unknown[];
+ saePsk?: unknown[];
+ schedule?: unknown[];
+ scheduleWithDuration?: unknown[];
+ bcFilterList?: unknown[];
+ externalId?: string;
+ [key: string]: unknown;
+}
+
+export interface UnifiNetwork {
+ id: string;
+ name: string;
+ purpose: string;
+ subnet: string;
+ vlanId: number | null;
+ dhcpEnabled: boolean;
+ dhcpStart: string;
+ dhcpStop: string;
+ domainName: string;
+ isNat: boolean;
+ enabled: boolean;
+}
+
+export interface UnifiWlanGroup {
+ id: string;
+ name: string;
+ siteId: string;
+ noDelete: boolean;
+ noEdit: boolean;
+ hidden: boolean;
+}
+
+export interface UnifiApGroup {
+ id: string;
+ name: string;
+ deviceMacs: string[];
+ noDelete: boolean;
+}
+
+export interface UnifiAccessPoint {
+ id: string;
+ mac: string;
+ model: string;
+ type: string;
+ name: string;
+ state: number;
+ adopted: boolean;
+ ip: string;
+ version: string;
+}
+
+export interface UnifiSpeedProfile {
+ id: string;
+ name: string;
+ siteId: string;
+ noDelete: boolean;
+ downloadLimitKbps: number;
+ uploadLimitKbps: number;
+}
+
+export interface UnifiPPSK {
+ key: string;
+ name: string;
+ mac: string | null;
+ vlanId: number | null;
+}
+
+export const unifi = {
+ /** Fetch all UniFi sites */
+ async fetchSites(accessToken: string) {
+ const response = await api.get("/v1/unifi/sites", {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Sync sites from UniFi controller */
+ async syncSites(accessToken: string) {
+ const response = await api.post(
+ "/v1/unifi/sites/sync",
+ {},
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Create a new UniFi site */
+ async createSite(accessToken: string, description: string) {
+ const response = await api.post(
+ "/v1/unifi/sites/create",
+ { description },
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Fetch a single UniFi site */
+ async fetchSite(accessToken: string, id: string) {
+ const response = await api.get(`/v1/unifi/site/${id}`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Fetch UniFi sites linked to a company */
+ async fetchCompanySites(accessToken: string, companyId: string) {
+ const response = await api.get(
+ `/v1/company/companies/${companyId}/unifi/sites`,
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Link a site to a company */
+ async linkSite(accessToken: string, siteId: string, companyId: string) {
+ const response = await api.post(
+ `/v1/unifi/site/${siteId}/link`,
+ { companyId },
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Unlink a site from its company */
+ async unlinkSite(accessToken: string, siteId: string) {
+ const response = await api.post(
+ `/v1/unifi/site/${siteId}/unlink`,
+ {},
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Get site overview (health, sysInfo, siteInfo) */
+ async fetchSiteOverview(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/overview`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get site devices */
+ async fetchSiteDevices(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/devices`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get site WiFi networks */
+ async fetchSiteWifi(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/wifi`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Update a WiFi network */
+ async updateWifi(
+ accessToken: string,
+ siteId: string,
+ wlanId: string,
+ data: Record,
+ ) {
+ const response = await api.patch(
+ `/v1/unifi/site/${siteId}/wifi/${wlanId}`,
+ data,
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Get site networks */
+ async fetchSiteNetworks(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/networks`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get WLAN groups */
+ async fetchWlanGroups(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/wlan-groups`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get AP groups (collections of access points for broadcasting) */
+ async fetchApGroups(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/ap-groups`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get access points */
+ async fetchAccessPoints(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/access-points`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Get speed profiles (user groups) */
+ async fetchSpeedProfiles(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/speed-profiles`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+
+ /** Create a speed profile */
+ async createSpeedProfile(
+ accessToken: string,
+ siteId: string,
+ data: {
+ name: string;
+ downloadLimitKbps?: number;
+ uploadLimitKbps?: number;
+ },
+ ) {
+ const response = await api.post(
+ `/v1/unifi/site/${siteId}/speed-profiles`,
+ data,
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Get private PSKs for a WLAN */
+ async fetchPPSKs(accessToken: string, siteId: string, wlanId: string) {
+ const response = await api.get(
+ `/v1/unifi/site/${siteId}/wifi/${wlanId}/ppsk`,
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Create a private PSK on a WLAN */
+ async createPPSK(
+ accessToken: string,
+ siteId: string,
+ wlanId: string,
+ data: { key: string; name: string; mac?: string; vlanId?: number },
+ ) {
+ const response = await api.post(
+ `/v1/unifi/site/${siteId}/wifi/${wlanId}/ppsk`,
+ data,
+ {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ },
+ );
+ return response.data;
+ },
+
+ /** Get WiFi limits per AP per radio */
+ async fetchWifiLimits(accessToken: string, siteId: string) {
+ const response = await api.get(`/v1/unifi/site/${siteId}/wifi-limits`, {
+ headers: { Authorization: `Bearer ${accessToken}` },
+ });
+ return response.data;
+ },
+};
diff --git a/src/lib/optima-api/modules/user.ts b/src/lib/optima-api/modules/user.ts
index 0b97d08..3a5f29b 100644
--- a/src/lib/optima-api/modules/user.ts
+++ b/src/lib/optima-api/modules/user.ts
@@ -89,8 +89,8 @@ export const user = {
} catch {}
reject(new Error("Timed out waiting for auth callback"));
},
- 2 * 60 * 1000,
- ); // 2 minutes
+ 5 * 60 * 1000,
+ ); // 5 minutes
const handlePayload = (payload: any) => {
try {
diff --git a/src/lib/optima-api/modules/users.ts b/src/lib/optima-api/modules/users.ts
new file mode 100644
index 0000000..0b718e6
--- /dev/null
+++ b/src/lib/optima-api/modules/users.ts
@@ -0,0 +1,126 @@
+import api from "../axios";
+import type { Role } from "./roles";
+
+export interface User {
+ id: string;
+ name: string;
+ email: string;
+ login: string;
+ image?: string;
+ roles: string[];
+ permissions?: string[];
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface PermissionCheckResult {
+ permission: string;
+ hasPermission: boolean;
+}
+
+export const users = {
+ /**
+ * Fetch all users.
+ * Requires: user.read.other, user.list.other
+ */
+ async fetchAll(accessToken: string): Promise<{ data: User[] }> {
+ const response = await api.get("/v1/user/users", {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ /**
+ * Fetch a specific user by their ID.
+ * Requires: user.read.other
+ */
+ async fetch(
+ accessToken: string,
+ identifier: string,
+ ): Promise<{ data: User }> {
+ const response = await api.get(`/v1/user/users/${identifier}`, {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ /**
+ * Update a specific user's information.
+ * Requires: user.write.other
+ * Conditional: user.roles.other (if roles included), user.permissions.other (if permissions included)
+ */
+ async update(
+ accessToken: string,
+ identifier: string,
+ updates: {
+ name?: string;
+ image?: string;
+ roles?: string[];
+ permissions?: string[];
+ },
+ ): Promise<{ data: User }> {
+ const response = await api.patch(`/v1/user/users/${identifier}`, updates, {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ /**
+ * Delete a specific user.
+ * Requires: user.delete.other
+ */
+ async delete(
+ accessToken: string,
+ identifier: string,
+ ): Promise<{ data: User }> {
+ const response = await api.delete(`/v1/user/users/${identifier}`, {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ /**
+ * Fetch all roles assigned to a specific user.
+ * Requires: user.read.other, role.read
+ */
+ async fetchRoles(
+ accessToken: string,
+ identifier: string,
+ ): Promise<{ data: Role[] }> {
+ const response = await api.get(`/v1/user/users/${identifier}/roles`, {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ });
+ return response.data;
+ },
+
+ /**
+ * Check if a specific user has certain permissions.
+ * Requires: user.read.other
+ */
+ async checkPermissions(
+ accessToken: string,
+ identifier: string,
+ permissions: string[],
+ ): Promise<{ data: { results: PermissionCheckResult[] } }> {
+ const response = await api.post(
+ `/v1/user/users/${identifier}/check-permission`,
+ { permissions },
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+ return response.data;
+ },
+};
diff --git a/src/routes/admin/credential-types/+page.server.ts b/src/routes/admin/credential-types/+page.server.ts
new file mode 100644
index 0000000..dfea1a5
--- /dev/null
+++ b/src/routes/admin/credential-types/+page.server.ts
@@ -0,0 +1,184 @@
+import { optima } from "$lib";
+import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
+import { fail } from "@sveltejs/kit";
+import type { Actions, PageServerLoad } from "./$types";
+import { AxiosError } from "axios";
+
+export const load: PageServerLoad = async ({ locals }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return { credentialTypes: [], permissions: {}, valueTypes: [] };
+ }
+
+ try {
+ const [typesResult, permissions, valueTypesResult] = await Promise.all([
+ optima.credentialType.fetchMany(accessToken),
+ checkPermissions(accessToken, [
+ "admin.credential-types.view",
+ "admin.credential-types.create",
+ "admin.credential-types.edit",
+ "admin.credential-types.delete",
+ ]),
+ optima.credential.fetchValueTypes(accessToken).catch((err) => {
+ console.error(
+ "Failed to fetch value types:",
+ err?.response?.data ?? err?.message ?? err,
+ );
+ return { data: [] };
+ }),
+ ]);
+
+ const credentialTypes = typesResult?.data ?? [];
+ const valueTypes: string[] = valueTypesResult?.data ?? [];
+
+ return {
+ credentialTypes,
+ permissions,
+ valueTypes,
+ };
+ } catch (err) {
+ handleApiError(err);
+ }
+};
+
+export const actions: Actions = {
+ createCredentialType: async ({ locals, request }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return fail(401, { message: "Not authenticated." });
+ }
+
+ const formData = await request.formData();
+ const name = (formData.get("name") as string)?.trim();
+ const permissionScope = (formData.get("permissionScope") as string)?.trim();
+ const icon = (formData.get("icon") as string)?.trim() || undefined;
+ const fieldsJson = (formData.get("fields") as string)?.trim();
+
+ if (!name || !permissionScope) {
+ return fail(400, { message: "Name and permission scope are required." });
+ }
+
+ let fields: Array<
+ import("$lib/optima-api/modules/credentialTypes").CredentialTypeField
+ > = [];
+ if (fieldsJson) {
+ try {
+ fields = JSON.parse(fieldsJson);
+ } catch {
+ return fail(400, { message: "Invalid fields data." });
+ }
+ }
+
+ try {
+ await optima.credentialType.create(accessToken, {
+ name,
+ permissionScope,
+ icon,
+ fields,
+ });
+ return {};
+ } catch (err: unknown) {
+ console.log(
+ "Error creating credential type:",
+ (err as AxiosError<{ error?: string }>)?.response?.data?.error,
+ );
+
+ const data = (err as AxiosError)?.response?.data as
+ | Record
+ | undefined;
+ const message =
+ (data?.message as string) ??
+ (err instanceof Error
+ ? err.message
+ : "Failed to create credential type.");
+ const status = (data?.status as number) ?? 500;
+ return fail(status, { message });
+ }
+ },
+
+ updateCredentialType: async ({ locals, request }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return fail(401, { message: "Not authenticated." });
+ }
+
+ const formData = await request.formData();
+ const id = (formData.get("id") as string)?.trim();
+ const name = (formData.get("name") as string)?.trim();
+ const permissionScope = (formData.get("permissionScope") as string)?.trim();
+ const icon = (formData.get("icon") as string)?.trim() || undefined;
+ const fieldsJson = (formData.get("fields") as string)?.trim();
+
+ if (!id || !name || !permissionScope) {
+ return fail(400, { message: "Required fields are missing." });
+ }
+
+ let fields:
+ | Array<
+ Omit<
+ import("$lib/optima-api/modules/credentialTypes").CredentialTypeField,
+ "id"
+ >
+ >
+ | undefined;
+ if (fieldsJson) {
+ try {
+ fields = JSON.parse(fieldsJson);
+ } catch {
+ return fail(400, { message: "Invalid fields data." });
+ }
+ }
+
+ try {
+ await optima.credentialType.update(accessToken, id, {
+ name,
+ permissionScope,
+ icon,
+ fields: fields as any,
+ });
+ return {};
+ } catch (err: unknown) {
+ const data = (err as AxiosError)?.response?.data as
+ | Record
+ | undefined;
+ const message =
+ (data?.message as string) ??
+ (err instanceof Error
+ ? err.message
+ : "Failed to update credential type.");
+ const status = (data?.status as number) ?? 500;
+ return fail(status, { message });
+ }
+ },
+
+ deleteCredentialType: async ({ locals, request }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return fail(401, { message: "Not authenticated." });
+ }
+
+ const formData = await request.formData();
+ const id = (formData.get("id") as string)?.trim();
+
+ if (!id) {
+ return fail(400, { message: "Credential type ID is required." });
+ }
+
+ try {
+ await optima.credentialType.delete(accessToken, id);
+ return {};
+ } catch (err: unknown) {
+ const data = (err as AxiosError)?.response?.data as
+ | Record
+ | undefined;
+ const message =
+ (data?.message as string) ??
+ (err instanceof Error
+ ? err.message
+ : "Failed to delete credential type.");
+ const status = (data?.status as number) ?? 500;
+ return fail(status, { message });
+ }
+ },
+};
diff --git a/src/routes/admin/credential-types/+page.svelte b/src/routes/admin/credential-types/+page.svelte
index 8406c8d..ba9fac3 100644
--- a/src/routes/admin/credential-types/+page.svelte
+++ b/src/routes/admin/credential-types/+page.svelte
@@ -1,11 +1,141 @@
+ (openMenuId = null)} />
+
{#if !hasAccess}
-{:else}
+{:else if credentialTypes.length === 0}
+ {
+ isCreateModalOpen = false;
+ typeToEdit = null;
+ }}
+ onSuccess={() => {
+ isCreateModalOpen = false;
+ typeToEdit = null;
+ }}
+ />
{
+ isCreateModalOpen = false;
+ typeToEdit = null;
+ }}
+ onSuccess={() => {
+ isCreateModalOpen = false;
+ typeToEdit = null;
+ }}
+ />
+
+ {#if typeToDelete}
+
+
{/if}
-
-
diff --git a/src/routes/admin/users/+page.server.ts b/src/routes/admin/users/+page.server.ts
new file mode 100644
index 0000000..b0b9a43
--- /dev/null
+++ b/src/routes/admin/users/+page.server.ts
@@ -0,0 +1,143 @@
+import { optima } from "$lib";
+import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
+import { fail } from "@sveltejs/kit";
+import type { Actions, PageServerLoad } from "./$types";
+import { AxiosError } from "axios";
+
+export const load: PageServerLoad = async ({ locals }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return { users: [], roles: [], permissions: {} };
+ }
+
+ try {
+ const [usersResult, rolesResult, permissions, permNodesResult] =
+ await Promise.all([
+ optima.users.fetchAll(accessToken),
+ optima.role.fetchMany(accessToken),
+ checkPermissions(accessToken, [
+ "admin.users.view",
+ "admin.users.edit",
+ "admin.users.delete",
+ "user.roles.other",
+ "user.permissions.other",
+ ]),
+ optima.permission
+ .fetchCategorized(accessToken)
+ .catch(() => ({ data: {} })),
+ ]);
+
+ const allUsers = usersResult?.data ?? [];
+ const allRoles = rolesResult?.data ?? [];
+
+ // Fetch roles for each user in parallel
+ const usersWithRoles = await Promise.all(
+ allUsers.map(async (user) => {
+ try {
+ const rolesResult = await optima.users.fetchRoles(
+ accessToken,
+ user.id,
+ );
+ return { ...user, roleDetails: rolesResult?.data ?? [] };
+ } catch {
+ return { ...user, roleDetails: [] };
+ }
+ }),
+ );
+
+ return {
+ users: usersWithRoles,
+ roles: allRoles,
+ permissions,
+ permissionNodes: permNodesResult?.data ?? {},
+ };
+ } catch (err) {
+ handleApiError(err);
+ }
+};
+
+export const actions: Actions = {
+ updateUser: async ({ locals, request }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return fail(401, { message: "Not authenticated." });
+ }
+
+ const formData = await request.formData();
+ const id = (formData.get("id") as string)?.trim();
+ const name = (formData.get("name") as string)?.trim();
+ const image = (formData.get("image") as string)?.trim() || undefined;
+ const rolesJson = (formData.get("roles") as string)?.trim();
+ const permissionsJson = (formData.get("permissions") as string)?.trim();
+
+ if (!id || !name) {
+ return fail(400, { message: "User ID and name are required." });
+ }
+
+ const updates: {
+ name: string;
+ image?: string;
+ roles?: string[];
+ permissions?: string[];
+ } = { name, image };
+
+ if (rolesJson) {
+ try {
+ updates.roles = JSON.parse(rolesJson);
+ } catch {
+ return fail(400, { message: "Invalid roles data." });
+ }
+ }
+
+ if (permissionsJson) {
+ try {
+ updates.permissions = JSON.parse(permissionsJson);
+ } catch {
+ return fail(400, { message: "Invalid permissions data." });
+ }
+ }
+
+ try {
+ await optima.users.update(accessToken, id, updates);
+ return {};
+ } catch (err: unknown) {
+ const data = (err as AxiosError)?.response?.data as
+ | Record
+ | undefined;
+ const message =
+ (data?.message as string) ??
+ (err instanceof Error ? err.message : "Failed to update user.");
+ const status = (data?.status as number) ?? 500;
+ return fail(status, { message });
+ }
+ },
+
+ deleteUser: async ({ locals, request }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ return fail(401, { message: "Not authenticated." });
+ }
+
+ const formData = await request.formData();
+ const id = (formData.get("id") as string)?.trim();
+
+ if (!id) {
+ return fail(400, { message: "User ID is required." });
+ }
+
+ try {
+ await optima.users.delete(accessToken, id);
+ return {};
+ } catch (err: unknown) {
+ const data = (err as AxiosError)?.response?.data as
+ | Record
+ | undefined;
+ const message =
+ (data?.message as string) ??
+ (err instanceof Error ? err.message : "Failed to delete user.");
+ const status = (data?.status as number) ?? 500;
+ return fail(status, { message });
+ }
+ },
+};
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
index 52bea7d..a86b1b3 100644
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@@ -1,11 +1,148 @@
+ (openMenuId = null)} />
+
{#if !hasAccess}
-{:else}
+{:else if users.length === 0}
-
-
-
-
-
-
- {#if isLoadingTypes}
-
-
- {#if selectedType && selectedType.fields}
- Loading credential types...
- {:else} - - {/if} -
-
@@ -219,179 +569,593 @@
{/if}
diff --git a/src/components/CreateCredentialTypeModal.svelte b/src/components/CreateCredentialTypeModal.svelte
new file mode 100644
index 0000000..a09bc8b
--- /dev/null
+++ b/src/components/CreateCredentialTypeModal.svelte
@@ -0,0 +1,1299 @@
+
+
+{#if isOpen}
+
+ Credential Fields
- {#each selectedType.fields as field (field.id)} -
-
-
+
@@ -199,19 +549,19 @@
+
+
+
+
+
+
+
+
+ {#if isLoadingTypes}
+
+
+
+ Loading types…
- {/each}
+ {:else}
+
+ {/if}
+
+
+
+
+
+ {#if selectedType && selectedType.fields && selectedType.fields.length > 0}
+
+
{/if}
+ Credential Fields
+
+ {selectedType.fields.length} field{selectedType.fields
+ .length === 1
+ ? ""
+ : "s"}
+
+
+
+ {#each selectedType.fields as field (field.id)}
+
+
+ {/each}
+
+ {field.name}
+
+
+ {#if field.valueType === "multi_credential"}
+
+
+ Multi
+
+ {/if}
+ {#if field.required}
+ Required
+ {/if}
+ {#if field.secure}
+
+
+ Secure
+
+ {/if}
+
+
+ {#if field.valueType === "multi_credential" && field.subFields}
+
+
+
+ {#if (subCredentials[field.id] ?? []).length === 0}
+
+ {:else}
+
+ {/if}
+ + No entries yet. Add an entry to define + sub-credentials for this field. +
+ {:else} + {#each subCredentials[field.id] as entry, entryIdx} +
+
+ {/each}
+ {/if}
+
+
+ #{entryIdx + 1}
+
+
+
+
+
+
+
+
+ {#each field.subFields as subField (subField.id)}
+
+
+
+
+ {/each}
+
+
+
+
+{/if}
+
+
diff --git a/src/components/CreateRoleModal.svelte b/src/components/CreateRoleModal.svelte
index 32d28d8..7802c4f 100644
--- a/src/components/CreateRoleModal.svelte
+++ b/src/components/CreateRoleModal.svelte
@@ -21,6 +21,14 @@
monikerEdited = true;
selectedPermissions = new Set(roleToEdit.permissions);
+ // Identify permissions not in the categorized list → show as custom
+ const catalogued = new Set(
+ Object.values(permissionNodes).flatMap((cat) =>
+ (cat as PermissionCategory).permissions.map((p) => p.node),
+ ),
+ );
+ customNodes = roleToEdit.permissions.filter((p) => !catalogued.has(p));
+
// Auto-expand categories that contain selected permissions
const sel = new Set(roleToEdit.permissions);
const expanded = new Set
+
+
+
+
+
+
+
+
+
+ + {isEditMode ? "Edit Credential Type" : "Create Credential Type"} +
+
@@ -174,7 +206,11 @@
-
-
-
- {#if permissionSearch}
-
- {/if}
-
-
{#if Object.keys(permissionNodes).length === 0}
+
+
+
@@ -659,58 +736,81 @@
color: #fff;
}
- /* ── Search ── */
- .search-wrap {
- position: relative;
+ /* ── Custom permission input ── */
+ .custom-perm-wrap {
display: flex;
- align-items: center;
+ gap: 6px;
+ margin-top: 8px;
}
- .search-icon {
- position: absolute;
- left: 9px;
- color: var(--text-muted);
- pointer-events: none;
- }
-
- .search-input {
- width: 100%;
- padding: 7px 10px 7px 29px;
- background: var(--bg-inset);
+ .custom-perm-input {
+ flex: 1;
+ padding: 7px 10px;
border: 1px solid var(--border-subtle);
border-radius: 7px;
- font-size: 13px;
+ background: var(--bg-inset);
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
color: var(--text-primary);
outline: none;
box-sizing: border-box;
- transition: border-color 0.15s;
+ transition:
+ border-color 0.15s,
+ box-shadow 0.15s;
}
- .search-input::placeholder {
+ .custom-perm-input::placeholder {
color: var(--text-muted);
+ font-family: inherit;
}
- .search-input:focus {
+ .custom-perm-input:focus {
border-color: var(--accent-color, #0066cc);
+ box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}
- .search-clear {
- position: absolute;
- right: 8px;
- background: none;
+ .custom-perm-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 7px 14px;
+ background: var(--accent-color, #0066cc);
+ color: #fff;
border: none;
- padding: 3px;
+ border-radius: 7px;
+ font-size: 12px;
+ font-weight: 500;
cursor: pointer;
- color: var(--text-muted);
- border-radius: 4px;
+ white-space: nowrap;
+ transition: filter 0.15s;
+ }
+
+ .custom-perm-btn:hover:not(:disabled) {
+ filter: brightness(1.1);
+ }
+
+ .custom-perm-btn:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+ }
+
+ .custom-perm-error {
+ margin: 4px 0 0;
+ font-size: 11.5px;
+ color: #dc2626;
+ }
+
+ .custom-cat-label {
+ cursor: default;
display: flex;
align-items: center;
- justify-content: center;
- transition: color 0.1s;
+ gap: 6px;
+ padding: 7px 10px;
}
- .search-clear:hover {
- color: var(--text-primary);
+ .custom-cat-label svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
}
/* ── Permission list ── */
diff --git a/src/components/EditUserModal.svelte b/src/components/EditUserModal.svelte
new file mode 100644
index 0000000..fa4f33e
--- /dev/null
+++ b/src/components/EditUserModal.svelte
@@ -0,0 +1,724 @@
+
+
+
+No permission data available.
- {:else if filteredEntries.length === 0} -No permissions match your search.
{:else} - {#each filteredEntries as [catKey, category] (catKey)} - {@const catPerms = category.permissions} + {#each permissionEntries as [catKey, category] (catKey)} + {@const catPerms = category.permissions ?? []} {@const allSel = catPerms.length > 0 && catPerms.every((p) => selectedPermissions.has(p.node))} {@const someSel = !allSel && catPerms.some((p) => selectedPermissions.has(p.node))} - {@const isExpanded = - permissionSearch.trim().length > 0 || - expandedCategories.has(catKey)} + {@const isExpanded = expandedCategories.has(catKey)}
+
+ e.key === "Enter" &&
+ (e.preventDefault(), addCustomPermission())}
+ />
+
+
+ {#if customPermError}
+ {customPermError}
+ {/if} e.key === "Escape" && onClose()}
+>
+
+
+
diff --git a/src/components/LinkUnifiSiteModal.svelte b/src/components/LinkUnifiSiteModal.svelte
new file mode 100644
index 0000000..80163a2
--- /dev/null
+++ b/src/components/LinkUnifiSiteModal.svelte
@@ -0,0 +1,999 @@
+
+
+{#if isOpen}
+
+
+
+{/if}
+
+
diff --git a/src/components/NewUnifiSiteModal.svelte b/src/components/NewUnifiSiteModal.svelte
new file mode 100644
index 0000000..d2e6b0a
--- /dev/null
+++ b/src/components/NewUnifiSiteModal.svelte
@@ -0,0 +1,303 @@
+
+
+{#if isOpen}
+
+
+
+{/if}
+
+
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0d66291..ff0b6d0 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -11,6 +11,8 @@ export const optima = {
role: (await import("./optima-api/modules/roles")).role,
permission: (await import("./optima-api/modules/permissions")).permission,
user,
+ users: (await import("./optima-api/modules/users")).users,
+ unifi: (await import("./optima-api/modules/unifi")).unifi,
};
/**
* @TODO
diff --git a/src/lib/optima-api/modules/companies.ts b/src/lib/optima-api/modules/companies.ts
index 60604aa..8d6f14a 100644
--- a/src/lib/optima-api/modules/companies.ts
+++ b/src/lib/optima-api/modules/companies.ts
@@ -4,10 +4,16 @@ export const company = {
async fetch(
accessToken: string,
id: string,
- options?: { includeAddress?: boolean },
+ options?: {
+ includeAddress?: boolean;
+ includePrimaryContact?: boolean;
+ includeAllContacts?: boolean;
+ },
) {
const params: Record
+
+Edit User
++ Update information for {user.name} +
+ {#if editError} +{editError}
+ {/if} + +
-
+{:else}
+ Credential Type Management
+No Credential Types Found
- Credential type definitions and configuration will be wired up here. - Connect an API module to populate this view. + There are no credential types configured yet. Create your first credential + type to get started.
+ {#if canCreate} + + {/if} e.key === "Escape" && cancelDelete()}
+ >
+
+ {/if}
+
+
+
+
+ Delete Credential Type
++ Are you sure you want to delete + {typeToDelete.name}? + {#if typeToDelete.credentialCount > 0} + This type has {typeToDelete.credentialCount} + credential{typeToDelete.credentialCount === 1 ? "" : "s"} associated + with it. + {/if} + This action cannot be undone. +
+ {#if deleteError} +{deleteError}
+ {/if} +
+
+
+
+
+
+
+ + Credential Types + {filteredTypes.length} type{filteredTypes.length === 1 + ? "" + : "s"}{#if searchQuery.trim()} (filtered){/if} +
+
+
+
+
+
+
+ {#if canCreate}
+
+ {/if}
+
+
+
+
+
+
+ {#if filteredTypes.length === 0 && searchQuery.trim()}
+ | Name | +Permission Scope | +Fields | +Credentials | +Created | +Updated | ++ |
|---|---|---|---|---|---|---|
|
+
+
+ {ct.name}
+
+ |
+ + {ct.permissionScope} + | ++ + {ct.fields.length} field{ct.fields.length === 1 ? "" : "s"} + + | ++ + + {ct.credentialCount} credential{ct.credentialCount === 1 + ? "" + : "s"} + + | +{formatDate(ct.createdAt)} | +{formatDate(ct.updatedAt)} | +
+
+ {#if canEdit || canDelete}
+
+ {/if}
+
+
+ |
+
|
+
+
+
+
+
+
+
+
+
+ + + Details ++
+
+
+ ID
+ {ct.id}
+
+
+ Permission Scope
+ {ct.permissionScope}
+
+ {#if ct.icon}
+
+ Icon
+ {ct.icon}
+
+ {/if}
+
+ Credentials
+ {ct.credentialCount} credential{ct.credentialCount ===
+ 1
+ ? ""
+ : "s"}
+
+
+ Created
+ {formatDate(ct.createdAt)}
+
+
+ Updated
+ {formatDate(ct.updatedAt)}
+
+
+
+ + + Fields + {ct.fields.length} ++ {#if ct.fields.length === 0} +No fields defined + {:else} +
+ {#each ct.fields as field (field.id)}
+
+ {/if}
+
+
+
+ {#if field.valueType === "multi_credential" && field.subFields && field.subFields.length > 0}
+
+ {field.name}
+
+
+
+
+
+ {/if}
+ {/each}
+
+ {#each field.subFields as subField (subField.id)}
+
+
+
+
+ {/each}
+
+ {subField.name}
+
+
+ |
+ ||||||
+
+
+ {/if}
{/if}
diff --git a/src/routes/admin/roles/+page.svelte b/src/routes/admin/roles/+page.svelte
index 73c3ab3..1585484 100644
--- a/src/routes/admin/roles/+page.svelte
+++ b/src/routes/admin/roles/+page.svelte
@@ -5,6 +5,7 @@
import type { Role } from "$lib/optima-api/modules/roles";
import type { PermissionsCategorized } from "$lib/optima-api/modules/permissions";
import CreateRoleModal from "../../../components/CreateRoleModal.svelte";
+ import "../../../styles/admin/roles.css";
interface RoleUser {
id: string;
@@ -555,473 +556,3 @@
No Results
++ No credential types match “{searchQuery}”. Try a different + search. +
+
-
+{:else}
+
+ {#if editingUser}
+ User Management
-- User listing and editing will be wired up here. Connect an API module to - populate this view. -
+No Users Found
+There are no users in the system yet.
e.key === "Escape" && cancelDelete()}
+ >
+
+ {/if}
+
+
+
+
+ Delete User
++ Are you sure you want to delete + {userToDelete.name}? This action cannot be undone. +
+ {#if deleteError} +{deleteError}
+ {/if} +
+
+
+
+
+
+
+ + Users + {filteredUsers.length} user{filteredUsers.length === 1 + ? "" + : "s"}{#if searchQuery.trim()} + (filtered){/if} +
+
+
+
+
+
+
+
+
+
+
+ {#if filteredUsers.length === 0 && searchQuery.trim()}
+ | User | +Login | +Roles | +Created | ++ | |
|---|---|---|---|---|---|
|
+
+ {#if user.image}
+
+
+ {initials(user.name)}
+
+ {/if}
+ {user.name}
+ |
+ + {user.email} + | ++ {user.login} + | ++ + {user.roleDetails.length} role{user.roleDetails.length === 1 + ? "" + : "s"} + + | +{formatDate(user.createdAt)} | +
+
+ {#if canEdit || canDelete}
+
+ {/if}
+
+
+ |
+
|
+
+
+
+
+
+
+
+
+
+ + + Details ++
+
+
+ ID
+ {user.id}
+
+
+ Email
+ {user.email}
+
+
+ Login
+ {user.login}
+
+
+ Created
+ {formatDate(user.createdAt)}
+
+
+ Updated
+ {formatDate(user.updatedAt)}
+
+
+
+
+
+ + + Roles + {user.roleDetails.length} ++ {#if user.roleDetails.length === 0} +No roles assigned + {:else} +
+ {#each user.roleDetails as role (role.id)}
+
+ {/if}
+
+
+ {/each}
+
+
+ {role.title}
+ {role.moniker}
+
+ {#if role.permissions.length > 0}
+
+ {/if}
+
+
+ + + Additional Permissions + {#if user.permissions?.length} + {user.permissions.length} + {/if} ++ {#if !user.permissions?.length} ++ No additional permissions assigned + + {:else} + + {/if} + |
+ |||||
+
+
+ {/if}
{/if}
diff --git a/src/routes/companies/+page.server.ts b/src/routes/companies/+page.server.ts
index 5655ca0..e06aed4 100644
--- a/src/routes/companies/+page.server.ts
+++ b/src/routes/companies/+page.server.ts
@@ -1,5 +1,6 @@
import { optima } from "$lib";
import { handleApiError } from "$lib/optima-api/errorHandler";
+import { checkPermissions } from "$lib/permissions";
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async ({ locals, url }) => {
@@ -11,6 +12,7 @@ export const load: PageServerLoad = async ({ locals, url }) => {
currentPage: 1,
totalRecords: 0,
search: "",
+ permissions: {},
};
}
@@ -18,7 +20,21 @@ export const load: PageServerLoad = async ({ locals, url }) => {
const search = url.searchParams.get("search") || "";
try {
- const result = await optima.company.fetchMany(accessToken, page, search);
+ const [result, permissions] = await Promise.all([
+ optima.company.fetchMany(accessToken, page, search).catch((err) => {
+ console.error(
+ "Failed to fetch companies:",
+ err?.response?.data ?? err?.message ?? err,
+ );
+ return {
+ data: [],
+ meta: {
+ pagination: { totalPages: 1, currentPage: 1, totalRecords: 0 },
+ },
+ };
+ }),
+ checkPermissions(accessToken, ["companies.view"]),
+ ]);
return {
companies: result?.data ?? [],
@@ -27,6 +43,7 @@ export const load: PageServerLoad = async ({ locals, url }) => {
totalRecords:
result?.meta?.pagination?.totalRecords ?? result?.data?.length ?? 0,
search,
+ permissions,
};
} catch (err) {
handleApiError(err);
diff --git a/src/routes/companies/+page.svelte b/src/routes/companies/+page.svelte
index acfa5bf..316f52c 100644
--- a/src/routes/companies/+page.svelte
+++ b/src/routes/companies/+page.svelte
@@ -1,10 +1,12 @@
@@ -172,192 +69,195 @@
No Results
+No users match “{searchQuery}”. Try a different search.
+
-
-
-
+ {/if}
-
+ {
+ openCredMenuId = null;
+ isUnifiSiteMenuOpen = false;
+ }}
+/>
+
+
+ {company?.name ?? "Company"} — Project Optima
+
+
+ {
+ openCredMenuId = null;
+ }}
+/>
+
+ {
+ isCreateCredentialOpen = false;
+ invalidateAll();
+ }}
+/>
+
+
+{#if credToDelete}
+
+
+
+{/if}
+
+{#if credentials.length === 0}
+ {
+ isUnifiSiteMenuOpen = false;
+ }}
+/>
+
+ s.id)}
+ onSuccess={() => {
+ isLinkUnifiOpen = false;
+ invalidateAll();
+ }}
+/>
+
+{#if selectedUnifiSite}
+
+
+
+ {#if isMobile && mobileActiveTab !== null}
+
diff --git a/src/routes/companies/[id]/+page.svelte.bak b/src/routes/companies/[id]/+page.svelte.bak
new file mode 100644
index 0000000..1d78678
--- /dev/null
+++ b/src/routes/companies/[id]/+page.svelte.bak
@@ -0,0 +1,6134 @@
+
+
+
+
+
+ {/if}
+
{mobileActiveTab}
+ {#if mobileActiveTab === "Credentials"} + + {/if} + {#if mobileActiveTab === "UniFi"} + + {/if} +
- {#if activeTab === "Credentials"}
-
Credentials content
+ {#if activeTab === "Overview"} +
-
-
- {:else}
- No configurations found
-
-
-
- {/if}
- {:else if activeTab === "Users"}
-
- {#each configurations as config (config.id)}
-
- {/each}
-
-
-
- {#if selectedConfig}
-
- {#key configFadeKey}
-
- {/if}
-
-
- {/key}
-
-
-
- {#if selectedConfig.serialNumber}
-
-
-
- - {selectedConfig.name} -
- -
- Serial #
- {selectedConfig.serialNumber}
-
- {/if}
-
-
- {#if selectedConfig.notes}
-
-
- {/if}
-
-
- {#if selectedConfig.questions && selectedConfig.questions.length > 0}
- - - Notes -
-{selectedConfig.notes}
-
-
- {:else if !selectedConfig.notes}
- - - Configuration Details -
-
- {#each selectedConfig.questions as q (q.id)}
-
-
- {q.question}
-
- {/each}
-
- {#if q.fieldType === "Password"}
-
- {#if revealedPasswords[q.id]}
- {q.answer || "—"}
- {:else}
- {q.answer ? "••••••••" : "—"}
- {/if}
-
- {#if q.answer}
-
- {/if}
- {:else if q.fieldType === "TextArea"}
- {q.answer || "—"}
- {:else}
- {q.answer || "—"}
- {/if}
-
-
-
-
- {/if}
-
-
- {#if selectedConfig.info}
-
- {/if}
- No configuration fields available
-Users content
+Activity content
+
+
+
diff --git a/src/routes/companies/[id]/components/ActivityTab.svelte b/src/routes/companies/[id]/components/ActivityTab.svelte
new file mode 100644
index 0000000..c48bf40
--- /dev/null
+++ b/src/routes/companies/[id]/components/ActivityTab.svelte
@@ -0,0 +1,5 @@
+
+
+
+
+
+
+ {#if isMobile && mobileActiveTab === null}
+
+ {/if}
+
+
+
+
+ {#if company}
+
+
+
+
+
+
+
+ {companyInitials(company.name)}
+
+ {company.name}
+ {#if company.status} + {company.status} + {/if} +
+ {#if company.cw_Data?.primaryContact}
+ {@const contact = company.cw_Data.primaryContact}
+
+
+ {#if company.identifier || company.id}
+
+
+ {/if}
+
+ {#if company.type}
+
+
+ Primary Contact
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+ {#if contact.inactive}
+ Inactive
+ {/if}
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+ {#if contact.email}
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+
+ {/if}
+
+ {#if company.contactEmail}
+
+ Type
+ {company.type}
+
+
+
+
+ {/if}
+
+ {#if company.contactPhone}
+
+ Email
+ {company.contactEmail}
+
+
+
+
+ {/if}
+
+ {#if permissions["company.fetch.address"] && formatAddress(company).length > 0}
+
+ Phone
+ {formatPhone(company.contactPhone)}
+
+
+
+
+ {/if}
+
+ {#if formatDate(company.createdAt)}
+
+ Address
+
+ {#each formatAddress(company) as line}
+ {line}
+ {/each} + +
+ + {/each} + +
+
+
+ {/if}
+
+ {#if formatDate(company.updatedAt)}
+
+ Created
+ {formatDate(company.createdAt)}
+
+
+
+
+ {/if}
+
+ Updated
+ {formatDate(company.updatedAt)}
+
+
+ {company.identifier || company.id}
+
+ {/if}
+ {:else}
+
+
+ {/if}
+ Company not found.
+
+
+ {#if isMobile && mobileActiveTab !== null}
+
+
+
+
+ {/if}
+
+
+ {mobileActiveTab}
+ {#if mobileActiveTab === "Credentials"} + + {/if} + {#if mobileActiveTab === "UniFi"} + + {/if} +
+ {#if activeTab === "Overview"}
+ {
+ isCreateCredentialOpen = false;
+ invalidateAll();
+ }}
+ />
+
+
+ {#if credToDelete}
+
+
+
+ {/if}
+ {#if credentials.length === 0}
+ s.id)}
+ onSuccess={() => {
+ isLinkUnifiOpen = false;
+ invalidateAll();
+ }}
+ />
+
+ {#if selectedUnifiSite}
+
+
+
+
+ {:else if activeTab === "Credentials"}
+
+
+
+ + + Company Details +
+
+
+
+ Name
+ {company?.name ?? "—"}
+
+
+ ID
+ {company?.id ?? "—"}
+
+
+
+
+ + + At a Glance +
+
+
+
+ {credentials.length}
+ Credentials
+
+
+ {configurations.length}
+ Configurations
+
+
+ {unifiSites.length}
+ UniFi Sites
+
+
+
+ + + Recent Activity +
+Activity feed coming soon.
+
+
+
+ {:else}
+ No credentials found for this company
+ +
+
+
+ {/if}
+ {:else if activeTab === "Configurations"}
+ {#if configurations.length === 0}
+
+ {#each credentials as cred (cred.id)}
+
+
+
+
+ {#if selectedCredential}
+
+
+
+ {/if}
+ selectCredential(cred)}
+ on:keydown={(e) =>
+ e.key === "Enter" && selectCredential(cred)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/each}
+
+
+ {#if !selectedCredential || isMobile}
+ {#if cred.type?.name}
+
+
+ {cred.name}
+
+
+ {#if cred.type?.name && (!selectedCredential || isMobile)}
+ {cred.type.name}
+ {/if}
+ {#if !selectedCredential || isMobile}
+
+ {/if}
+
+ {cred.type.name}
+ {/if} + {#if cred.fields.length > 0} + + {cred.fields.length} field{cred.fields.length === 1 + ? "" + : "s"} + + {/if} + {#if formatDate(cred.updatedAt) || formatDate(cred.createdAt)} + + {#if formatDate(cred.updatedAt)} + Updated {formatDate(cred.updatedAt)} + {:else} + Created {formatDate(cred.createdAt)} + {/if} + + {/if} + {/if} +
+
+
+ {:else}
+ No configurations found
+
+
+
+ {/if}
+ {:else if activeTab === "Contacts"}
+ {#if !company?.cw_Data?.allContacts || company.cw_Data.allContacts.length === 0}
+
+ {#each configurations as config (config.id)}
+
+ {/each}
+
+
+
+ {#if selectedConfig}
+
+
+
+ {/if}
+
+
+
+ {:else}
+ {@const activeContacts = company.cw_Data.allContacts.filter(
+ (c) => !c.inactive,
+ )}
+ {@const inactiveContacts = company.cw_Data.allContacts.filter(
+ (c) => c.inactive,
+ )}
+
+
+ {#if activeContacts.length > 0}
+ No contacts found
+
+
+ {/if}
+
+
+ {#if inactiveContacts.length > 0}
+
+
+ + + Active +
+ {activeContacts.length} +
+ {#each activeContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+
+
+
+ {/each}
+
+
+
+
+ {contact.firstName?.[0] ?? ""}{contact
+ .lastName?.[0] ?? ""}
+
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+
+ {#if contact.email}
+
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+ {/if}
+ {/if}
+ {:else if activeTab === "UniFi"}
+
+
+ + + Inactive +
+ {inactiveContacts.length} +
+ {#each inactiveContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+
+
+
+ {/each}
+
+
+
+
+ {contact.firstName?.[0] ?? ""}{contact
+ .lastName?.[0] ?? ""}
+
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+ Inactive
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+
+ {#if contact.email}
+
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+ {:else}
+
+ {#if unifiSites.length === 0}
+
+
+
+
+
+
+
+
+ {selectedUnifiSite.name}
+ {selectedUnifiSite.siteId} +
+
+
+ {#if permissions["unifi.site.wifi"] && permissions["unifi.site.wifi.read.name"]}
+
+ {/if}
+
+
+
+
+ {#if unifiManagementTab === "overview"}
+ {#if isLoadingUnifiOverview}
+
+
+
+ Loading overview…
+
+ {:else if unifiSiteOverview}
+
+
+ {#if unifiSiteOverview.health && unifiSiteOverview.health.length > 0}
+
+ {:else}
+
+
+ {/if}
+
+
+ {#if unifiSiteOverview.sysInfo}
+ + + Health +
+
+ {#each unifiSiteOverview.health as h}
+
+
+
+ {h.status === "ok" ? "●" : "○"}
+
+ {h.subsystem}
+ {h.status}
+
+ {/each}
+
+
+ {/if}
+ + + System Info +
+
+ {#if unifiSiteOverview.sysInfo.hostname}
+
+
+ Hostname
+ {unifiSiteOverview.sysInfo.hostname}
+
+ {/if}
+ {#if unifiSiteOverview.sysInfo.version}
+
+ Version
+ {unifiSiteOverview.sysInfo.version}
+
+ {/if}
+ {#if unifiSiteOverview.sysInfo.timezone}
+
+ Timezone
+ {unifiSiteOverview.sysInfo.timezone}
+
+ {/if}
+
+
+ {/if}
+ {:else if unifiManagementTab === "devices"}
+ {#if isLoadingUnifiDevices}
+ No overview data available
+
+
+ Loading devices…
+
+ {:else if unifiSiteDevices.length === 0}
+
+
+
+ {:else}
+ No devices found
+
+
+
+
+
+ {/if}
+ {:else if unifiManagementTab === "wifi"}
+ {#if isLoadingUnifiWifi}
+ | Status | +Name | +Model | +IP | +MAC | +Version | +Uptime | +
|---|---|---|---|---|---|---|
| + + | ++ {device.name || device.mac} + | +{device.model} | +{device.ip || "—"} | +{device.mac} | +{device.version || "—"} | ++ {#if device.uptime} + {formatUptime(device.uptime)} + {:else} + — + {/if} + | +
+
+ Loading WiFi networks…
+
+ {:else if unifiSiteWifi.length === 0}
+
+
+
+ {:else}
+ No WiFi networks found
+
+
+
+ {/if}
+ {:else if unifiManagementTab === "networks"}
+ {#if isLoadingUnifiNetworks}
+
+
+
+
+
+ WiFi Networks
+ {unifiSiteWifi.length}
+
+
+
+ Name
+ Network
+ Broadcasting AP's
+ Radio Band
+ Clients
+ Security
+
+
+ {#each unifiSiteWifi as wifi, i (wifi.id ?? `wifi-${i}`)}
+
+ {/each}
+
+
+ {#if selectedWifi}
+
+
+
+ {#if canEditWifi}
+
+
+ {#if wifiSaveError}
+
+ {#if isWifiDirty}
+
+ {/if}
+
+
+ {/if}
+ {wifiSaveError}
+ {/if}
+
+
+ {#if showPmfWarning}
+
+ {/if}
+
+
+ {#if showSpeedProfileModal}
+
+ {/if}
+
+
+
+ {#if canEditWifi}
+
+ {:else}
+
+ Configuration Mode
+
+ {/if}
+
+
+
+
+
+
+
+
+
+ {wifiAdvancedMode === "auto"
+ ? "Only general settings are sent. Security and behavior controls are locked."
+ : "All settings are editable. Changes are saved when you click Save."}
+
+
+
+
+
+
+
+
+
+
+
+
+ General
+ Network name, password, and broadcasting +
+
+
+
+
+
+
+ {#if wifiEditState.security !== "open"}
+
+ Name (SSID)
+
+ {#if canEditWifi}
+
+ updateWifiField(
+ "name",
+ e.currentTarget.value,
+ )}
+ />
+ {:else}
+ {wifiEditState.name ?? "—"}
+ {/if}
+
+
+ {/if}
+
+
+
+ Password
+
+
+ {#if canEditWifi}
+
+ updateWifiField(
+ "passphrase",
+ e.currentTarget.value,
+ )}
+ />
+ {:else}
+ {revealedWifiPassphrases["detail"]
+ ? wifiEditState.passphrase
+ : "••••••••"}
+ {/if}
+
+
+
+
+
+
+
+ Network
+ VLAN / network assignment for this SSID
+
+ {#if canEditWifi}
+
+ {:else}
+ {@const net = unifiSiteNetworks.find(
+ (n) =>
+ n.id ===
+ String(wifiEditState.networkconfId),
+ )}
+ {net
+ ? `${net.name}${net.vlanId ? ` (VLAN ${net.vlanId})` : ""}`
+ : "—"}
+ {/if}
+
+
+
+
+
+ Broadcasting APs
+ Which access points broadcast this network
+
+ {#if canEditWifi}
+
+
+
+
+
+ {:else}
+ {wifiEditState.apGroupMode === "all"
+ ? "All APs"
+ : wifiEditState.apGroupMode === "group"
+ ? "Group"
+ : "Specific Devices"}
+ {/if}
+
+
+
+
+
+ Application
+ Network purpose
+
+ {#if canEditWifi}
+
+
+
+
+ {:else}
+ {wifiEditState.isGuest
+ ? "Guest / IoT"
+ : "Standard"}
+ {/if}
+
+
+
+ Radio Band
+ Which frequencies to broadcast on
+
+ {#if canEditWifi}
+
+
+
+
+
+ {:else}
+ {wifiEditState.band === "both"
+ ? "2.4 / 5 GHz"
+ : wifiEditState.band === "2g"
+ ? "2.4 GHz"
+ : wifiEditState.band === "5g"
+ ? "5 GHz"
+ : String(wifiEditState.band)}
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ Security
+ Authentication, encryption, and access + control +
+
+
+
+
+
+
+ {#if wifiEditState.security !== "open"}
+
+ Security Protocol
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.security === "wpapsk"
+ ? "WPA Personal"
+ : wifiEditState.security === "wpaeap"
+ ? "WPA Enterprise"
+ : wifiEditState.security === "open"
+ ? "Open"
+ : String(
+ wifiEditState.security,
+ )}
+ {/if}
+
+
+ {/if}
+
+
+ {#if wifiEditState.security !== "open"}
+
+ WPA Version
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.wpaMode === "wpa2"
+ ? "WPA2"
+ : wifiEditState.wpaMode === "wpa3"
+ ? "WPA3"
+ : "WPA2/WPA3"}
+ {/if}
+
+
+ {/if}
+
+
+ {#if wifiEditState.security === "wpapsk"}
+
+ PMF (Protected Management Frames)
+ Protects management frames from forgery
+
+ {#if canEditWifi}
+
+
+
+
+
+ {:else}
+ {wifiEditState.pmfMode === "required"
+ ? "Required"
+ : wifiEditState.pmfMode === "optional"
+ ? "Optional"
+ : "Disabled"}
+ {/if}
+
+
+ {#if wifiEditState.privatePreSharedKeysEnabled}
+
+ Private Pre-Shared Keys
+ Unique per-device passwords
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.privatePreSharedKeysEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+ {#if isLoadingPPSKs}
+
+ {/if}
+ {/if}
+
+
+
+ Loading keys…
+
+ {:else if wifiPPSKs.length === 0}
+
+ No private PSKs configured
+
+ {:else}
+
+ {#each wifiPPSKs as psk, i (psk.name + i)}
+
+ {/if}
+ {#if canEditWifi}
+
+
+ {/each}
+
+ {psk.name}
+ {#if psk.vlanId}
+ VLAN {psk.vlanId}
+ {/if}
+ {#if psk.mac}
+ {psk.mac}
+ {/if}
+
+
+ {revealedWifiPassphrases[
+ `ppsk-${i}`
+ ]
+ ? psk.key
+ : "••••••••"}
+
+
+
+
+
+
+
+
+ {/if}
+
+
+
+
+
+ Hide WiFi Name
+ Network won't appear in scan results
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.hideSSID
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+ Client Device Isolation
+ Prevent clients from communicating with
+ each other
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.l2Isolation
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+
+
+
+
+ + Behavior Controls +
+ Advanced wireless features and optimizations +
+
+
+
+
+
+
+
+ Band Steering
+ Prefer 5 GHz for dual-band clients
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.no2ghzOui
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+
+
+ Proxy ARP
+ AP answers ARP requests on behalf of
+ clients
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.proxyArp
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+
+
+ BSS Transition (802.11v)
+ Helps clients find a better AP
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.bssTransition
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+
+
+ U-APSD (Power Save)
+ Reduces power consumption on mobile devices
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.uapsdEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+
+
+ Fast Roaming (802.11r)
+ Faster transitions between access points
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.fastRoamingEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+ {#if wifiEditState.macFilterEnabled}
+
+ MAC Address Filter
+ Allow or deny specific devices
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.macFilterEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+ {/if}
+
+
+
+
+
+ {#if canEditWifi}
+
+ Filter Type
+
+ {#if canEditWifi}
+
+
+
+
+ {:else}
+ {wifiEditState.macFilterPolicy ===
+ "allow"
+ ? "Allow List"
+ : "Deny List"}
+ {/if}
+
+ {
+ if (e.key === "Enter")
+ addMacToFilterList();
+ }}
+ />
+
+
+ {/if}
+ {#if Array.isArray(wifiEditState.macFilterList) && (wifiEditState.macFilterList as string[]).length > 0}
+
+ {#each wifiEditState.macFilterList as string[] as mac}
+
+ {:else}
+
+ {mac}
+ {#if canEditWifi}
+
+ {/if}
+
+ {/each}
+
+ No MAC addresses added
+
+ {/if}
+
+
+ {#if wifiEditState.radiusMacAuthEnabled}
+
+ RADIUS MAC Authentication
+ Authenticate clients by MAC address via
+ RADIUS
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.radiusMacAuthEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+ {/if}
+
+
+
+
+
+ MAC Address Format
+ Format used when sending MAC to RADIUS
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.radiusMacaclFormat ??
+ "—"}
+ {/if}
+
+
+ {#if wifiEditState.usergroupId && wifiEditState.usergroupId !== unifiSpeedProfiles.find((p) => p.downloadLimitKbps === -1)?.id}
+
+ WiFi Speed Limit
+ Apply a bandwidth profile to clients on
+ this network
+
+ {#if canEditWifi}
+
+ {:else}
+ {@const profile = unifiSpeedProfiles.find(
+ (p) =>
+ p.id ===
+ String(wifiEditState.usergroupId),
+ )}
+ {profile &&
+ profile.downloadLimitKbps !== -1
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+ {/if}
+
+
+
+
+
+ Speed Profile
+
+ {#if canEditWifi}
+
+
+
+
+ {:else}
+ {@const profile = unifiSpeedProfiles.find(
+ (p) =>
+ p.id ===
+ String(wifiEditState.usergroupId),
+ )}
+ {profile ? profile.name : "—"}
+ {/if}
+
+
+ {#if wifiEditState.dtimMode !== "default"}
+
+ Auto DTIM Period
+ When enabled, DTIM is automatically managed
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.dtimMode === "default"
+ ? "Auto"
+ : "Custom"}
+ {/if}
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+ Group Key Interval
+ Periodic group key rotation for enhanced
+ security
+
+ {#if canEditWifi}
+ {@const gkiValue =
+ Number(wifiEditState.groupRekey) || 0}
+
+ {#if gkiValue > 0}
+
+ {:else}
+ {@const gkiValue =
+ Number(wifiEditState.groupRekey) || 0}
+ 0}
+ >{gkiValue > 0
+ ? `${wifiEditState.groupRekey}s`
+ : "Off"}
+ {/if}
+
+
+ updateWifiField(
+ "groupRekey",
+ Number(e.currentTarget.value),
+ )}
+ min="1"
+ />
+ sec
+
+ {/if}
+
+
+
+
+
+
+ Multicast Enhancement
+ Converts multicast to unicast for better
+ performance
+
+ {#if canEditWifi}
+
+ {:else}
+ {wifiEditState.mcastenhanceEnabled
+ ? "Yes"
+ : "No"}
+ {/if}
+
+
+
+ WiFi Blackout Schedule
+
+ Schedule times when this network is disabled
+ ℹ️
+
+
+
+ TODO
+
+
+
+ {/if}
+ Select a network to view and edit settings
+
+
+ Loading networks…
+
+ {:else if unifiSiteNetworks.length === 0}
+
+
+
+ {:else}
+ No networks found
+
+ {#each unifiSiteNetworks as network (network.id)}
+
+ {/if}
+ {/if}
+
+
+ {/each}
+
+ {network.name}
+
+
+ {network.purpose}
+ {#if network.vlanId}
+ VLAN {network.vlanId}
+ {/if}
+ {#if !network.enabled}
+ Disabled
+ {/if}
+
+
+ {#if network.subnet}
+
+
+ Subnet
+ {network.subnet}
+
+ {/if}
+ {#if network.dhcpEnabled}
+
+ DHCP Range
+ {network.dhcpStart} – {network.dhcpStop}
+
+ {/if}
+
+
+
+ {:else}
+ No UniFi sites linked to this company
+ +
+ {#each unifiSites as site (site.id)}
+
+
+ {/if}
+ {/if}
+ {:else if activeTab === "Activity"}
+ selectUnifiSite(site)}
+ on:keydown={(e) => e.key === "Enter" && selectUnifiSite(site)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/each}
+
+
+
+ {site.name}
+ {site.siteId}
+
+ {#if siteOverviews[site.id]}
+ {@const health = getCardHealthStatus(site.id)}
+
+
+ {health === "ok"
+ ? "Healthy"
+ : health === "warn"
+ ? "Warning"
+ : health === "error"
+ ? "Error"
+ : "Unknown"}
+
+ {:else}
+
+
+
+ {/if}
+
+ {#if siteOverviews[site.id]}
+
+
+ {getCardDeviceCount(site.id)}
+ Devices
+
+
+ {getCardGatewayCount(site.id)}
+ Gateways
+
+
+ {siteOverviews[site.id]?.health?.length ?? 0}
+ Subsystems
+
+ {:else}
+
+
+
+
+
+ {/if}
+
+
+
+ Activity content
+ {/if} +Activity content
diff --git a/src/routes/companies/[id]/components/CompanySidebar.svelte b/src/routes/companies/[id]/components/CompanySidebar.svelte new file mode 100644 index 0000000..84cf98a --- /dev/null +++ b/src/routes/companies/[id]/components/CompanySidebar.svelte @@ -0,0 +1,260 @@ + + +
+
diff --git a/src/routes/companies/[id]/components/ConfigurationsTab.svelte b/src/routes/companies/[id]/components/ConfigurationsTab.svelte
new file mode 100644
index 0000000..d85d7f6
--- /dev/null
+++ b/src/routes/companies/[id]/components/ConfigurationsTab.svelte
@@ -0,0 +1,376 @@
+
+
+{#if configurations.length === 0}
+
+
+ {#if company}
+
+
+
+
+
+
+
+ {companyInitials(company.name)}
+
+ {company.name}
+ {#if company.status} + {company.status} + {/if} +
+ {#if company.cw_Data?.primaryContact}
+ {@const contact = company.cw_Data.primaryContact}
+
+
+ {#if company.identifier || company.id}
+
+
+ {/if}
+
+ {#if company.type}
+
+
+ Primary Contact
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+ {#if contact.inactive}
+ Inactive
+ {/if}
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+ {#if contact.email}
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+
+ {/if}
+
+ {#if company.contactEmail}
+
+ Type
+ {company.type}
+
+
+
+
+ {/if}
+
+ {#if company.contactPhone}
+
+ Email
+ {company.contactEmail}
+
+
+
+
+ {/if}
+
+ {#if permissions["company.fetch.address"] && formatAddress(company).length > 0}
+
+ Phone
+ {formatPhone(company.contactPhone)}
+
+
+
+
+ {/if}
+
+ {#if formatDate(company.createdAt)}
+
+ Address
+
+ {#each formatAddress(company) as line}
+ {line}
+ {/each} + +
+ + {/each} + +
+
+
+ {/if}
+
+ {#if formatDate(company.updatedAt)}
+
+ Created
+ {formatDate(company.createdAt)}
+
+
+
+
+ {/if}
+
+ Updated
+ {formatDate(company.updatedAt)}
+
+
+ {company.identifier || company.id}
+
+ {/if}
+ {:else}
+
+
+ {/if}
+ Company not found.
+
+
+
+{:else}
+ No configurations found
+
+
+
+{/if}
diff --git a/src/routes/companies/[id]/components/ContactsTab.svelte b/src/routes/companies/[id]/components/ContactsTab.svelte
new file mode 100644
index 0000000..185e48b
--- /dev/null
+++ b/src/routes/companies/[id]/components/ContactsTab.svelte
@@ -0,0 +1,211 @@
+
+
+{#if !company?.cw_Data?.allContacts || company.cw_Data.allContacts.length === 0}
+
+ {#each configurations as config (config.id)}
+
+ {/each}
+
+
+
+ {#if selectedConfig}
+
+
+
+ {/if}
+
+
+
+{:else}
+ {@const activeContacts = company.cw_Data.allContacts.filter(
+ (c) => !c.inactive,
+ )}
+ {@const inactiveContacts = company.cw_Data.allContacts.filter(
+ (c) => c.inactive,
+ )}
+
+
+ {#if activeContacts.length > 0}
+ No contacts found
+
+
+ {/if}
+
+
+ {#if inactiveContacts.length > 0}
+
+
+ + + Active +
+ {activeContacts.length} +
+ {#each activeContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+
+
+
+ {/each}
+
+
+
+
+ {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
+
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+
+ {#if contact.email}
+
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+ {/if}
+{/if}
diff --git a/src/routes/companies/[id]/components/CredentialsTab.svelte b/src/routes/companies/[id]/components/CredentialsTab.svelte
new file mode 100644
index 0000000..f9c2451
--- /dev/null
+++ b/src/routes/companies/[id]/components/CredentialsTab.svelte
@@ -0,0 +1,1544 @@
+
+
+
+
+ + + Inactive +
+ {inactiveContacts.length} +
+ {#each inactiveContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
+
+
+
+ {/each}
+
+
+
+
+ {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
+
+
+
+
+
+ {[contact.firstName, contact.lastName]
+ .filter(Boolean)
+ .join(" ")}
+ Inactive
+
+ {#if contact.title}
+ {contact.title}
+ {/if}
+
+ {#if contact.email}
+
+
+
+ {contact.email}
+
+ {/if}
+ {#if contact.phone}
+
+
+ {formatPhone(contact.phone)}
+
+ {/if}
+
+
+
+{:else}
+ No credentials found for this company
+ +
+
+
+{/if}
diff --git a/src/routes/companies/[id]/components/OverviewTab.svelte b/src/routes/companies/[id]/components/OverviewTab.svelte
new file mode 100644
index 0000000..324b09b
--- /dev/null
+++ b/src/routes/companies/[id]/components/OverviewTab.svelte
@@ -0,0 +1,87 @@
+
+
+
+ {#each credentials as cred (cred.id)}
+
+
+
+
+ {#if selectedCredential}
+
+
+
+ {/if}
+ selectCredential(cred)}
+ on:keydown={(e) => e.key === "Enter" && selectCredential(cred)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/each}
+
+
+ {#if !selectedCredential || isMobile}
+ {#if cred.type?.name}
+
+
+ {cred.name}
+
+
+ {#if cred.type?.name && (!selectedCredential || isMobile)}
+ {cred.type.name}
+ {/if}
+ {#if !selectedCredential || isMobile}
+
+ {/if}
+
+ {cred.type.name}
+ {/if} + {#if cred.fields.length > 0} + + {cred.fields.length} field{cred.fields.length === 1 ? "" : "s"} + + {/if} + {#if formatDate(cred.updatedAt) || formatDate(cred.createdAt)} + + {#if formatDate(cred.updatedAt)} + Updated {formatDate(cred.updatedAt)} + {:else} + Created {formatDate(cred.createdAt)} + {/if} + + {/if} + {/if} +
+
diff --git a/src/routes/companies/[id]/components/UniFiTab.svelte b/src/routes/companies/[id]/components/UniFiTab.svelte
new file mode 100644
index 0000000..d928a23
--- /dev/null
+++ b/src/routes/companies/[id]/components/UniFiTab.svelte
@@ -0,0 +1,3017 @@
+
+
+
+
+
+ + + Company Details +
+
+
+
+ Name
+ {company?.name ?? "—"}
+
+
+ ID
+ {company?.id ?? "—"}
+
+
+
+
+ + + At a Glance +
+
+
+
+ {credentials.length}
+ Credentials
+
+
+ {configurations.length}
+ Configurations
+
+
+ {unifiSites.length}
+ UniFi Sites
+
+
+
++ + Recent Activity +
+Activity feed coming soon.
+
+
+{:else}
+
+ {#if unifiSites.length === 0}
+
+
+
+
+
+
+
+
+ {selectedUnifiSite.name}
+ {selectedUnifiSite.siteId} +
+
+
+ {#if permissions["unifi.site.wifi"] && permissions["unifi.site.wifi.read.name"]}
+
+ {/if}
+
+
+
+
+ {#if unifiManagementTab === "overview"}
+ {#if isLoadingUnifiOverview}
+
+ {/if}
+ {:else if unifiManagementTab === "devices"}
+ {#if isLoadingUnifiDevices}
+
+
+
+ Loading overview…
+
+ {:else if unifiSiteOverview}
+
+ {#if unifiSiteOverview.health && unifiSiteOverview.health.length > 0}
+
+ {:else}
+
+
+ {/if}
+ {#if unifiSiteOverview.sysInfo}
+ + + Health +
+
+ {#each unifiSiteOverview.health as h}
+
+
+
+ {h.status === "ok" ? "●" : "○"}
+
+ {h.subsystem}
+ {h.status}
+
+ {/each}
+
+
+ {/if}
+ + + System Info +
+
+ {#if unifiSiteOverview.sysInfo.hostname}
+
+
+ Hostname{unifiSiteOverview.sysInfo.hostname}
+
+ {/if}
+ {#if unifiSiteOverview.sysInfo.version}
+
+ Version{unifiSiteOverview.sysInfo.version}
+
+ {/if}
+ {#if unifiSiteOverview.sysInfo.timezone}
+
+ Timezone{unifiSiteOverview.sysInfo.timezone}
+
+ {/if}
+ No overview data available
+
+ Loading devices…
+
+ {:else if unifiSiteDevices.length === 0}
+
+
+
+ {:else}
+ No devices found
+
+
+
+
+ {/if}
+ {:else if unifiManagementTab === "wifi"}
+ {#if isLoadingUnifiWifi}
+ | Status | Name | Model | IP | MAC | Version | Uptime |
|---|---|---|---|---|---|---|
| + | {device.name || device.mac} | +{device.model} | +{device.ip || "—"} | +{device.mac} | +{device.version || "—"} | +{#if device.uptime}{formatUptime( + device.uptime, + )}{:else}—{/if} | +
+
+ Loading WiFi networks…
+
+ {:else if unifiSiteWifi.length === 0}
+
+
+
+ {:else}
+ No WiFi networks found
+
+
+
+ {/if}
+ {:else if unifiManagementTab === "networks"}
+ {#if isLoadingUnifiNetworks}
+
+
+
+
+
+ WiFi Networks{unifiSiteWifi.length}
+
+
+
+ Name
+ Network
+ Broadcasting AP's
+ Radio Band
+ Clients
+ Security
+
+
+ {#each unifiSiteWifi as wifi, i (wifi.id ?? `wifi-${i}`)}
+
+ {/each}
+
+
+ {#if selectedWifi}
+
+
+
+ {#if canEditWifi}
+
+
+ {#if wifiSaveError}
+
+ {#if isWifiDirty}
+
+ {/if}
+
+
+ {/if}
+ {wifiSaveError}
+ {/if}
+
+
+ {#if showPmfWarning}
+
+ {/if}
+
+
+ {#if showSpeedProfileModal}
+
+ {/if}
+
+
+
+ {#if canEditWifi}
+
+ {:else}
+
+ Configuration Mode
+
+ {/if}
+
+
+
+
+
+
+ {wifiAdvancedMode === "auto"
+ ? "Only general settings are sent. Security and behavior controls are locked."
+ : "All settings are editable. Changes are saved when you click Save."}
+
+
+
+
+
+
+
+
+
+ General
+ Network name, password, and broadcasting +
+
+
+
+
+
+ {#if wifiEditState.security !== "open"}
+
+ Name (SSID)
+
+ {#if canEditWifi}
+ updateWifiField("name", e.currentTarget.value)}
+ />{:else}{wifiEditState.name ?? "—"}{/if}
+
+
+ {/if}
+
+
+ Password
+
+
+ {#if canEditWifi}
+ updateWifiField(
+ "passphrase",
+ e.currentTarget.value,
+ )}
+ />{:else}{revealedWifiPassphrases["detail"]
+ ? wifiEditState.passphrase
+ : "••••••••"}{/if}
+
+
+
+
+
+
+ NetworkVLAN / network assignment for this SSID
+
+ {#if canEditWifi}{:else}{@const net = unifiSiteNetworks.find(
+ (n) => n.id === String(wifiEditState.networkconfId),
+ )}{net
+ ? `${net.name}${net.vlanId ? ` (VLAN ${net.vlanId})` : ""}`
+ : "—"}{/if}
+
+
+
+
+ Broadcasting APsWhich access points broadcast this network
+
+ {#if canEditWifi}
+
+
{:else}{wifiEditState.apGroupMode === "all"
+ ? "All APs"
+ : wifiEditState.apGroupMode === "groups"
+ ? "Groups"
+ : "Specific Devices"}{/if}
+ {#if wifiEditState.apGroupMode === "groups"}
+
+ {#if isLoadingApGroups}
+
+
+
+ {/if}
+
+ {:else if wifiEditState.apGroupMode === "devices"}
+
+
+ Loading AP groups…
+
+ {:else if unifiApGroups.length === 0}
+
+ No AP groups found
+
+ {:else}
+ | + | Group Name | +APs | +
|---|---|---|
| + {#if canEditWifi} + { + const validIds = new Set( + unifiApGroups.map((g) => g.id), + ); + const current = Array.isArray( + wifiEditState.apGroupIds, + ) + ? ( + wifiEditState.apGroupIds as string[] + ).filter((id) => + validIds.has(id), + ) + : []; + if (isChecked) { + updateWifiField( + "apGroupIds", + current.filter( + (id) => id !== group.id, + ), + ); + } else { + updateWifiField("apGroupIds", [ + ...current, + group.id, + ]); + } + }} + /> + {:else} + + {/if} + | +{group.name} | +{group.deviceMacs.length} + {group.deviceMacs.length === 1 + ? "AP" + : "APs"} | +
+ {#if isLoadingAccessPoints}
+
+
+
+ {/if}
+
+ {/if}
+
+
+ Loading access points…
+
+ {:else if unifiAccessPoints.length === 0}
+
+ No access points found
+
+ {:else}
+ | + | Access Point | +Model | +IP | +
|---|---|---|---|
| + {#if canEditWifi} + { + const validMacs = new Set( + unifiAccessPoints.map( + (a) => a.mac, + ), + ); + const current = Array.isArray( + wifiEditState.deviceMacs, + ) + ? ( + wifiEditState.deviceMacs as string[] + ).filter((mac) => + validMacs.has(mac), + ) + : []; + if (isChecked) { + updateWifiField( + "deviceMacs", + current.filter( + (mac) => mac !== ap.mac, + ), + ); + } else { + updateWifiField("deviceMacs", [ + ...current, + ap.mac, + ]); + } + }} + /> + {:else} + + {/if} + | ++ {ap.name || ap.mac} + {#if ap.name}{ap.mac}{/if} + | +{ap.model} | +{ap.ip} | +
+
+
+
+ ApplicationNetwork purpose
+
+ {#if canEditWifi}
+
+
{:else}{wifiEditState.isGuest
+ ? "Guest / IoT"
+ : "Standard"}{/if}
+
+
+
+ Radio BandWhich frequencies to broadcast on
+
+ {#if canEditWifi}
+
+
{:else}{wifiEditState.band === "both"
+ ? "2.4 / 5 GHz"
+ : wifiEditState.band === "2g"
+ ? "2.4 GHz"
+ : wifiEditState.band === "5g"
+ ? "5 GHz"
+ : String(wifiEditState.band)}{/if}
+
+
+
+
+
+
+
+
+
+ Security
+ Authentication, encryption, and access control +
+
+
+
+
+
+ {#if wifiEditState.security !== "open"}
+ Security Protocol
+
+ {#if canEditWifi}{:else}{wifiEditState.security === "wpapsk"
+ ? "WPA Personal"
+ : wifiEditState.security === "wpaeap"
+ ? "WPA Enterprise"
+ : wifiEditState.security === "open"
+ ? "Open"
+ : String(wifiEditState.security)}{/if}
+
+
{/if}
+
+ {#if wifiEditState.security !== "open"}
+ WPA Version
+
+ {#if canEditWifi}{:else}{wifiEditState.wpaMode === "wpa2"
+ ? "WPA2"
+ : wifiEditState.wpaMode === "wpa3"
+ ? "WPA3"
+ : "WPA2/WPA3"}{/if}
+
+
{/if}
+
+ {#if wifiEditState.security === "wpapsk"}
+
+ PMF (Protected Management Frames)Protects management frames from forgery
+
+ {#if canEditWifi}
+
+
{:else}{wifiEditState.pmfMode === "required"
+ ? "Required"
+ : wifiEditState.pmfMode === "optional"
+ ? "Optional"
+ : "Disabled"}{/if}
+
+
+ {#if wifiEditState.privatePreSharedKeysEnabled}
+
+ Private Pre-Shared KeysUnique per-device passwords
+
+ {#if canEditWifi}{:else}{wifiEditState.privatePreSharedKeysEnabled
+ ? "Yes"
+ : "No"}{/if}
+
+ {#if isLoadingPPSKs}
+ {/if}
+ {/if}
+
+
+ Loading keys…
+
{:else if wifiPPSKs.length === 0}
+ No private PSKs configured
+
{:else}
+ {#each wifiPPSKs as psk, i (psk.name + i)}
{/if}
+ {#if canEditWifi}
+
{/each}
+
+ {psk.name}{#if psk.vlanId}VLAN {psk.vlanId}{/if}{#if psk.mac}{psk.mac}{/if}
+
+
+ {revealedWifiPassphrases[`ppsk-${i}`]
+ ? psk.key
+ : "••••••••"}
+
+
+
+
{/if}
+
+
+
+
+ Hide WiFi NameNetwork won't appear in scan results
+
+ {#if canEditWifi}{:else}{wifiEditState.hideSSID ? "Yes" : "No"}{/if}
+
+
+
+ Client Device IsolationPrevent clients from communicating with each other
+
+ {#if canEditWifi}{:else}{wifiEditState.l2Isolation ? "Yes" : "No"}{/if}
+
+
+
+
+
+
+
+ Behavior Controls
+ Advanced wireless features and optimizations +
+
+
+
+
+ Band Steering{wifiEditState.band !== "both"
+ ? "Requires both 2.4 GHz and 5 GHz bands"
+ : "Prefer 5 GHz for dual-band clients"}
+
+ {#if canEditWifi}{:else}{wifiEditState.no2ghzOui ? "Yes" : "No"}{/if}
+
+
+
+ Proxy ARPAP answers ARP requests on behalf of clients
+
+ {#if canEditWifi}{:else}{wifiEditState.proxyArp ? "Yes" : "No"}{/if}
+
+
+
+ BSS Transition (802.11v)Helps clients find a better AP
+
+ {#if canEditWifi}{:else}{wifiEditState.bssTransition ? "Yes" : "No"}{/if}
+
+
+
+ U-APSD (Power Save)Reduces power consumption on mobile devices
+
+ {#if canEditWifi}{:else}{wifiEditState.uapsdEnabled ? "Yes" : "No"}{/if}
+
+
+
+
+ Fast Roaming (802.11r)Faster transitions between access points
+
+ {#if canEditWifi}{:else}{wifiEditState.fastRoamingEnabled
+ ? "Yes"
+ : "No"}{/if}
+
+
+ {#if wifiEditState.macFilterEnabled}
+
+ MAC Address FilterAllow or deny specific devices
+
+ {#if canEditWifi}{:else}{wifiEditState.macFilterEnabled
+ ? "Yes"
+ : "No"}{/if}
+
+
+ {/if}
+
+
+
+ {#if canEditWifi}
+ Filter Type
+
+ {#if canEditWifi}
+
+
{:else}{wifiEditState.macFilterPolicy === "allow"
+ ? "Allow List"
+ : "Deny List"}{/if}
+
+ {
+ if (e.key === "Enter") addMacToFilterList();
+ }}
+ />
+
{/if}
+ {#if Array.isArray(wifiEditState.macFilterList) && (wifiEditState.macFilterList as string[]).length > 0}
+ {#each wifiEditState.macFilterList as string[] as mac}
{:else}
+ {mac}{#if canEditWifi}{/if}
+
{/each}
+
+ No MAC addresses added
+
{/if}
+
+
+ {#if wifiEditState.radiusMacAuthEnabled}
+ RADIUS MAC AuthenticationAuthenticate clients by MAC address via RADIUS
+
+ {#if canEditWifi}{:else}{wifiEditState.radiusMacAuthEnabled
+ ? "Yes"
+ : "No"}{/if}
+
+
{/if}
+
+
+
+
+ MAC Address FormatFormat used when sending MAC to RADIUS
+
+ {#if canEditWifi}{:else}{wifiEditState.radiusMacaclFormat ?? "—"}{/if}
+
+
+ {#if wifiEditState.usergroupId && wifiEditState.usergroupId !== unifiSpeedProfiles.find((p) => p.downloadLimitKbps === -1)?.id}
+ WiFi Speed LimitApply a bandwidth profile to clients on this
+ network
+
+ {#if canEditWifi}{:else}{@const profile = unifiSpeedProfiles.find(
+ (p) => p.id === String(wifiEditState.usergroupId),
+ )}{profile && profile.downloadLimitKbps !== -1
+ ? "Yes"
+ : "No"}{/if}
+
+
{/if}
+
+
+
+
+ Speed Profile
+
+ {#if canEditWifi}
+
+
{:else}{@const profile =
+ unifiSpeedProfiles.find(
+ (p) =>
+ p.id === String(wifiEditState.usergroupId),
+ )}{profile ? profile.name : "—"}{/if}
+
+
+ {#if wifiEditState.dtimMode !== "default"}
+ Auto DTIM PeriodWhen enabled, DTIM is automatically managed
+
+ {#if canEditWifi}{:else}{wifiEditState.dtimMode === "default"
+ ? "Auto"
+ : "Custom"}{/if}
+
+
{/if}
+
+
+
+
+
+
+
+
+ Group Key IntervalPeriodic group key rotation for enhanced security
+
+ {#if canEditWifi}{@const gkiValue =
+ Number(wifiEditState.groupRekey) || 0}
+
+ {#if gkiValue > 0}
{:else}{@const gkiValue =
+ Number(wifiEditState.groupRekey) || 0} 0}
+ >{gkiValue > 0
+ ? `${wifiEditState.groupRekey}s`
+ : "Off"}{/if}
+
+
+ updateWifiField(
+ "groupRekey",
+ Number(e.currentTarget.value),
+ )}
+ min="1"
+ />sec
+
{/if}
+
+
+
+
+ Multicast EnhancementConverts multicast to unicast for better
+ performance
+
+ {#if canEditWifi}{:else}{wifiEditState.mcastenhanceEnabled
+ ? "Yes"
+ : "No"}{/if}
+
+
+
+ WiFi Blackout ScheduleSchedule times when this network is disabled ℹ️
+
+ TODO
+
+
+
+ {/if}
+ Select a network to view and edit settings
+
+
+ Loading networks…
+
+ {:else if unifiSiteNetworks.length === 0}
+
+
+
+ {:else}
+ No networks found
+
+ {#each unifiSiteNetworks as network (network.id)}
+
+ {/if}
+ {/if}
+
+
+ {/each}
+
+ {network.name}
+
+
+ {network.purpose}
+ {#if network.vlanId}VLAN {network.vlanId}{/if}
+ {#if !network.enabled}Disabled{/if}
+
+
+ {#if network.subnet}
+
+ Subnet{network.subnet}
+
{/if}
+ {#if network.dhcpEnabled}
+ DHCP Range{network.dhcpStart} – {network.dhcpStop}
+
{/if}
+
+
+
+ {:else}
+ No UniFi sites linked to this company
+ +
+ {#each unifiSites as site (site.id)}
+
+
+ {/if}
+{/if}
diff --git a/src/routes/companies/[id]/secure-value/+server.ts b/src/routes/companies/[id]/secure-value/+server.ts
new file mode 100644
index 0000000..47cfd1b
--- /dev/null
+++ b/src/routes/companies/[id]/secure-value/+server.ts
@@ -0,0 +1,32 @@
+import { optima } from "$lib";
+import { json, error } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+ const accessToken = locals.session?.accessToken;
+ if (!accessToken) {
+ throw error(401, "Unauthorized");
+ }
+
+ const credentialId = url.searchParams.get("credentialId");
+ const fieldId = url.searchParams.get("fieldId");
+ if (!credentialId || !fieldId) {
+ throw error(400, "Missing credentialId or fieldId");
+ }
+
+ try {
+ const result = await optima.credential.fetchSecureValue(
+ accessToken,
+ credentialId,
+ fieldId,
+ );
+ return json(result);
+ } catch (err: unknown) {
+ console.error("Failed to fetch secure value:", err);
+ const status =
+ err && typeof err === "object" && "status" in err
+ ? (err as { status: number }).status
+ : 500;
+ throw error(status, "Failed to fetch secure value");
+ }
+};
diff --git a/src/routes/companies/[id]/types.ts b/src/routes/companies/[id]/types.ts
new file mode 100644
index 0000000..2ebbe9a
--- /dev/null
+++ b/src/routes/companies/[id]/types.ts
@@ -0,0 +1,187 @@
+import type { Credential } from "$lib/optima-api/modules/credentials";
+import type { CredentialType } from "$lib/optima-api/modules/credentialTypes";
+import type { UnifiSite } from "$lib/optima-api/modules/unifi";
+import type { PermissionMap } from "$lib/permissions";
+
+export interface CompanyData {
+ id: string;
+ name: string;
+ status?: string;
+ type?: string;
+ createdAt?: string;
+ updatedAt?: string;
+ identifier?: string;
+ contactEmail?: string;
+ contactPhone?: string;
+ address?: string;
+ city?: string;
+ state?: string;
+ zip?: string;
+ country?: string;
+ cw_Data?: {
+ address?: {
+ line1?: string;
+ line2?: string | null;
+ city?: string;
+ state?: string;
+ zip?: string;
+ country?: string;
+ };
+ primaryContact?: {
+ firstName?: string;
+ lastName?: string;
+ cwId?: number;
+ inactive?: boolean;
+ title?: string;
+ phone?: string;
+ email?: string;
+ };
+ allContacts?: Array<{
+ firstName?: string;
+ lastName?: string;
+ cwId?: number;
+ inactive?: boolean;
+ title?: string;
+ phone?: string;
+ email?: string;
+ }>;
+ [key: string]: unknown;
+ };
+ [key: string]: unknown;
+}
+
+export interface ConfigurationData {
+ id: string | number;
+ name: string;
+ active?: boolean;
+ serialNumber?: string;
+ status?: {
+ id: number;
+ name: string;
+ };
+ type?: {
+ id: number;
+ name: string;
+ _info?: { type_href?: string };
+ };
+ notes?: string;
+ questions?: Array<{
+ id: number;
+ question: string;
+ answer?: string;
+ fieldType: string;
+ }> | null;
+ info?: {
+ lastUpdated?: string;
+ updatedBy?: string;
+ dateEntered?: string;
+ enteredBy?: string;
+ };
+ key?: string;
+ value?: string;
+ description?: string;
+ createdAt?: string;
+ updatedAt?: string;
+ [key: string]: unknown;
+}
+
+export interface PageData {
+ company: CompanyData | null;
+ configurations: ConfigurationData[];
+ credentials: Credential[];
+ credentialTypes: CredentialType[];
+ unifiSites: UnifiSite[];
+ accessToken: string | null;
+ permissions: PermissionMap;
+}
+
+// Shared utility functions
+export function companyInitials(name: string): string {
+ return name
+ .split(/\s+/)
+ .slice(0, 2)
+ .map((w) => w[0])
+ .join("")
+ .toUpperCase();
+}
+
+export function statusClass(status?: string): string {
+ if (!status) return "neutral";
+ const s = status.toLowerCase();
+ if (s === "active") return "active";
+ if (s === "inactive" || s === "disabled") return "inactive";
+ if (s === "pending") return "pending";
+ return "neutral";
+}
+
+export function configStatusClass(statusName?: string): string {
+ if (!statusName) return "neutral";
+ const s = statusName.toLowerCase();
+ if (s === "active") return "active";
+ if (s === "inactive" || s === "automate inactive") return "inactive";
+ if (s === "reserved") return "reserved";
+ if (s === "provisioning" || s === "pending approval") return "pending";
+ return "neutral";
+}
+
+export function formatDate(dateStr?: string): string {
+ if (!dateStr) return "";
+ try {
+ return new Date(dateStr).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+ } catch {
+ return "";
+ }
+}
+
+export function formatPhone(phone?: string): string {
+ if (!phone) return "";
+ const digits = phone.replace(/\D/g, "");
+ if (digits.length === 10) {
+ return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+ }
+ if (digits.length === 11 && digits.startsWith("1")) {
+ return `+1 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+ }
+ return phone;
+}
+
+export function formatValueTypeLabel(vt: string): string {
+ return vt
+ .split("_")
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+ .join(" ");
+}
+
+export function formatAddress(c: CompanyData): string[] {
+ const addr = c.cw_Data?.address;
+ if (addr) {
+ const lines: string[] = [];
+ if (addr.line1) lines.push(addr.line1);
+ if (addr.line2) lines.push(addr.line2);
+ const cityStateZip = [addr.city, addr.state, addr.zip]
+ .filter(Boolean)
+ .join(", ");
+ if (cityStateZip) lines.push(cityStateZip);
+ if (addr.country) lines.push(addr.country);
+ return lines;
+ }
+ const lines: string[] = [];
+ if (c.address) lines.push(c.address);
+ const cityStateZip = [c.city, c.state, c.zip].filter(Boolean).join(", ");
+ if (cityStateZip) lines.push(cityStateZip);
+ if (c.country) lines.push(c.country);
+ return lines;
+}
+
+export function formatUptime(seconds: number): string {
+ const days = Math.floor(seconds / 86400);
+ const hours = Math.floor((seconds % 86400) / 3600);
+ const mins = Math.floor((seconds % 3600) / 60);
+ if (days > 0) return `${days}d ${hours}h`;
+ if (hours > 0) return `${hours}h ${mins}m`;
+ return `${mins}m`;
+}
diff --git a/src/styles/admin/credential-types.css b/src/styles/admin/credential-types.css
new file mode 100644
index 0000000..578f120
--- /dev/null
+++ b/src/styles/admin/credential-types.css
@@ -0,0 +1,591 @@
+/* ── Credential Types Admin Page ── */
+
+/* ── Table header layout ── */
+:global(.admin-table-header) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.create-ct-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 7px 14px;
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+ border: none;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: filter 0.15s;
+ flex-shrink: 0;
+}
+
+.create-ct-btn:hover {
+ filter: brightness(1.1);
+}
+
+/* ── Search bar ── */
+.ct-search-wrap {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.ct-search-icon {
+ position: absolute;
+ left: 10px;
+ color: var(--text-muted);
+ pointer-events: none;
+}
+
+.ct-search-input {
+ padding: 7px 12px 7px 30px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+ background: var(--bg-inset);
+ font-size: 13px;
+ color: var(--text-primary);
+ width: 220px;
+ transition:
+ border-color 0.15s,
+ box-shadow 0.15s;
+}
+
+.ct-search-input::placeholder {
+ color: var(--text-muted);
+}
+
+.ct-search-input:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+/* ── Credential Type row ── */
+.ct-row {
+ cursor: pointer;
+}
+
+.ct-row.expanded {
+ background: var(--card-hover-bg);
+}
+
+.ct-name-cell {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.ct-icon {
+ width: 18px;
+ height: 18px;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.ct-name {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.ct-scope {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
+ color: var(--text-secondary);
+ background: var(--bg-inset);
+ padding: 2px 8px;
+ border-radius: 4px;
+}
+
+.ct-field-count {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+.ct-cred-count {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+.ct-cred-count svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+/* ── Expanded detail row ── */
+.ct-detail-row td {
+ padding: 0 !important;
+ border-bottom: 1px solid var(--border-subtle);
+}
+
+.ct-detail-content {
+ padding: 16px 24px 20px;
+ background: var(--bg-inset);
+ animation: ctDetailFadeIn 0.15s ease;
+}
+
+@keyframes ctDetailFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.ct-detail-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+.ct-detail-section {
+ margin-bottom: 0;
+}
+
+.ct-detail-heading {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0 0 10px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.ct-detail-empty {
+ margin: 0;
+ font-size: 13px;
+ color: var(--text-muted);
+}
+
+/* ── Field cards in detail view ── */
+.ct-field-list {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.ct-field-card {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+}
+
+.ct-field-icon {
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ background: var(--status-neutral-bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--text-muted);
+}
+
+.ct-field-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ flex: 1;
+}
+
+.ct-field-name {
+ font-size: 12.5px;
+ font-weight: 600;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ct-field-meta {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 11px;
+ color: var(--text-muted);
+}
+
+.ct-field-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ font-size: 10px;
+ font-weight: 500;
+ padding: 1px 6px;
+ border-radius: 4px;
+ background: var(--status-neutral-bg);
+ color: var(--text-secondary);
+ border: 1px solid var(--border-subtle);
+}
+
+.ct-field-badge.required {
+ background: rgba(0, 102, 204, 0.08);
+ color: var(--accent-color, #0066cc);
+ border-color: rgba(0, 102, 204, 0.2);
+}
+
+.ct-field-badge.secure {
+ background: rgba(220, 38, 38, 0.06);
+ color: #dc2626;
+ border-color: rgba(220, 38, 38, 0.15);
+}
+
+/* ── Sub-field display in detail view ── */
+.ct-subfield-group {
+ display: flex;
+ gap: 0;
+ padding-left: 14px;
+ position: relative;
+}
+
+.ct-subfield-connector {
+ width: 16px;
+ flex-shrink: 0;
+ position: relative;
+}
+
+.ct-subfield-connector::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: -3px;
+ bottom: 50%;
+ width: 1px;
+ background: var(--border-subtle);
+}
+
+.ct-subfield-connector::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ width: 12px;
+ height: 1px;
+ background: var(--border-subtle);
+ display: none;
+}
+
+.ct-subfield-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+}
+
+.ct-subfield-card {
+ padding: 6px 10px;
+ border-style: dashed;
+ background: var(--bg-inset);
+}
+
+.ct-subfield-icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 5px;
+}
+
+/* ── Detail info fields ── */
+.ct-detail-fields {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.ct-detail-field {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.detail-label {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+}
+
+.detail-value {
+ font-size: 13px;
+ color: var(--text-primary);
+}
+
+.detail-mono {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
+}
+
+/* ── Three-dot menu ── */
+.ct-menu {
+ position: fixed;
+ z-index: 200;
+ min-width: 130px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ padding: 4px;
+ animation: menuIn 0.1s ease;
+}
+
+.ct-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 6px 10px;
+ background: none;
+ border: none;
+ border-radius: 5px;
+ font-size: 13px;
+ font-weight: 400;
+ color: var(--text-primary);
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.1s;
+}
+
+.ct-menu-item:hover {
+ background: var(--card-hover-bg);
+}
+
+.ct-menu-item svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.ct-menu-item-danger {
+ color: #dc2626;
+}
+
+.ct-menu-item-danger svg {
+ color: #dc2626;
+}
+
+.ct-menu-item-danger:hover {
+ background: rgba(220, 38, 38, 0.08);
+}
+
+.ct-menu-sep {
+ height: 1px;
+ background: var(--border-subtle);
+ margin: 3px 4px;
+}
+
+/* ── Delete confirmation overlay ── */
+.confirm-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.45);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.confirm-dialog {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 12px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+ width: 90%;
+ max-width: 380px;
+ padding: 28px 24px 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ animation: modalIn 0.15s ease;
+}
+
+.confirm-icon-wrap {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: rgba(220, 38, 38, 0.1);
+ border: 1px solid rgba(220, 38, 38, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #dc2626;
+ margin-bottom: 14px;
+}
+
+.confirm-title {
+ margin: 0 0 8px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.confirm-body {
+ margin: 0 0 16px;
+ font-size: 13.5px;
+ color: var(--text-secondary);
+ line-height: 1.5;
+}
+
+.confirm-error {
+ margin: 0 0 12px;
+ font-size: 13px;
+ color: #dc2626;
+}
+
+.confirm-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ justify-content: center;
+}
+
+.confirm-actions form {
+ display: contents;
+}
+
+.btn-cancel {
+ padding: 7px 16px;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ background: var(--bg-inset);
+ border: 1px solid var(--border-subtle);
+ color: var(--text-secondary);
+ transition:
+ background 0.15s,
+ border-color 0.15s;
+}
+
+.btn-cancel:hover:not(:disabled) {
+ background: var(--card-hover-bg);
+ border-color: var(--border-default);
+ color: var(--text-primary);
+}
+
+.btn-cancel:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.btn-delete-confirm {
+ padding: 7px 16px;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ background: #dc2626;
+ border: 1px solid transparent;
+ color: #fff;
+ transition: filter 0.15s;
+}
+
+.btn-delete-confirm:hover:not(:disabled) {
+ filter: brightness(1.1);
+}
+
+.btn-delete-confirm:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+/* ── Shared ── */
+.detail-count {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ padding: 1px 6px;
+ border-radius: 8px;
+ margin-left: 2px;
+}
+
+.row-end-cell {
+ width: 1%;
+ white-space: nowrap;
+}
+
+.row-end-content {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 6px;
+}
+
+.row-chevron {
+ transition: transform 0.2s ease;
+ color: var(--text-muted);
+}
+
+.row-chevron.open {
+ transform: rotate(180deg);
+}
+
+.menu-wrap {
+ position: relative;
+}
+
+.menu-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 26px;
+ height: 26px;
+ padding: 0;
+ background: none;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ cursor: pointer;
+ color: var(--text-muted);
+ transition:
+ background 0.12s,
+ border-color 0.12s,
+ color 0.12s;
+}
+
+.menu-btn:hover {
+ background: var(--card-hover-bg);
+ border-color: var(--border-subtle);
+ color: var(--text-primary);
+}
+
+@keyframes menuIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px) scale(0.97);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+@keyframes modalIn {
+ from {
+ opacity: 0;
+ transform: translateY(8px) scale(0.97);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
diff --git a/src/styles/admin/roles.css b/src/styles/admin/roles.css
new file mode 100644
index 0000000..58ea91b
--- /dev/null
+++ b/src/styles/admin/roles.css
@@ -0,0 +1,481 @@
+/* ── Roles Admin Page ── */
+
+/* ── Table header layout ── */
+:global(.admin-table-header) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.create-role-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 7px 14px;
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+ border: none;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: filter 0.15s;
+ flex-shrink: 0;
+}
+
+.create-role-btn:hover {
+ filter: brightness(1.1);
+}
+
+/* ── Role-specific styles ── */
+.role-row {
+ cursor: pointer;
+}
+
+.role-row.expanded {
+ background: var(--card-hover-bg);
+}
+
+.role-title-cell {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.role-icon {
+ width: 18px;
+ height: 18px;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.role-title {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.role-moniker {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
+ color: var(--text-secondary);
+ background: var(--bg-inset);
+ padding: 2px 8px;
+ border-radius: 4px;
+}
+
+.role-perm-count {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+.role-user-count {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+.role-user-count svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+/* Expanded detail row */
+.role-detail-row td {
+ padding: 0 !important;
+ border-bottom: 1px solid var(--border-subtle);
+}
+
+.role-detail-content {
+ padding: 16px 24px 20px;
+ background: var(--bg-inset);
+ animation: roleDetailFadeIn 0.15s ease;
+}
+
+@keyframes roleDetailFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.role-detail-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+.role-detail-section {
+ margin-bottom: 0;
+}
+
+.role-detail-heading {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0 0 10px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.role-detail-empty {
+ margin: 0;
+ font-size: 13px;
+ color: var(--text-muted);
+}
+
+/* Permission tags */
+.permission-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.permission-tag {
+ display: inline-block;
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 11px;
+ font-weight: 500;
+ padding: 3px 8px;
+ border-radius: 5px;
+ background: var(--status-neutral-bg);
+ color: var(--text-secondary);
+ border: 1px solid var(--border-subtle);
+}
+
+/* User list in role detail */
+.user-list {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.user-card {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 10px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+}
+
+.user-avatar {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+ font-size: 10.5px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ letter-spacing: 0.02em;
+}
+
+.user-info {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+}
+
+.user-name {
+ font-size: 12.5px;
+ font-weight: 600;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.user-login {
+ font-size: 11px;
+ color: var(--text-muted);
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* ── Three-dot menu ── */
+.role-menu {
+ position: fixed;
+ z-index: 200;
+ min-width: 130px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ padding: 4px;
+ animation: menuIn 0.1s ease;
+}
+
+.role-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 6px 10px;
+ background: none;
+ border: none;
+ border-radius: 5px;
+ font-size: 13px;
+ font-weight: 400;
+ color: var(--text-primary);
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.1s;
+}
+
+.role-menu-item:hover {
+ background: var(--card-hover-bg);
+}
+
+.role-menu-item svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.role-menu-item-danger {
+ color: #dc2626;
+}
+
+.role-menu-item-danger svg {
+ color: #dc2626;
+}
+
+.role-menu-item-danger:hover {
+ background: rgba(220, 38, 38, 0.08);
+}
+
+.role-menu-sep {
+ height: 1px;
+ background: var(--border-subtle);
+ margin: 3px 4px;
+}
+
+/* ── System badge ── */
+.system-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 11px;
+ font-weight: 500;
+ padding: 2px 8px;
+ border-radius: 5px;
+ background: var(--bg-inset);
+ color: var(--text-muted);
+ border: 1px solid var(--border-subtle);
+ white-space: nowrap;
+}
+
+/* ── Delete confirmation overlay ── */
+.confirm-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.45);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.confirm-dialog {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 12px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+ width: 90%;
+ max-width: 380px;
+ padding: 28px 24px 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ animation: modalIn 0.15s ease;
+}
+
+.confirm-icon-wrap {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: rgba(220, 38, 38, 0.1);
+ border: 1px solid rgba(220, 38, 38, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #dc2626;
+ margin-bottom: 14px;
+}
+
+.confirm-title {
+ margin: 0 0 8px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.confirm-body {
+ margin: 0 0 16px;
+ font-size: 13.5px;
+ color: var(--text-secondary);
+ line-height: 1.5;
+}
+
+.confirm-error {
+ margin: 0 0 12px;
+ font-size: 13px;
+ color: #dc2626;
+}
+
+.confirm-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ justify-content: center;
+}
+
+.confirm-actions form {
+ display: contents;
+}
+
+.btn-cancel {
+ padding: 7px 16px;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ background: var(--bg-inset);
+ border: 1px solid var(--border-subtle);
+ color: var(--text-secondary);
+ transition:
+ background 0.15s,
+ border-color 0.15s;
+}
+
+.btn-cancel:hover:not(:disabled) {
+ background: var(--card-hover-bg);
+ border-color: var(--border-default);
+ color: var(--text-primary);
+}
+
+.btn-cancel:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.btn-delete-confirm {
+ padding: 7px 16px;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ background: #dc2626;
+ border: 1px solid transparent;
+ color: #fff;
+ transition: filter 0.15s;
+}
+
+.btn-delete-confirm:hover:not(:disabled) {
+ filter: brightness(1.1);
+}
+
+.btn-delete-confirm:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+/* ── Shared ── */
+.detail-count {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ padding: 1px 6px;
+ border-radius: 8px;
+ margin-left: 2px;
+}
+
+.row-end-cell {
+ width: 1%;
+ white-space: nowrap;
+}
+
+.row-end-content {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 6px;
+}
+
+.row-chevron {
+ transition: transform 0.2s ease;
+ color: var(--text-muted);
+}
+
+.row-chevron.open {
+ transform: rotate(180deg);
+}
+
+.menu-wrap {
+ position: relative;
+}
+
+.menu-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 26px;
+ height: 26px;
+ padding: 0;
+ background: none;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ cursor: pointer;
+ color: var(--text-muted);
+ transition:
+ background 0.12s,
+ border-color 0.12s,
+ color 0.12s;
+}
+
+.menu-btn:hover {
+ background: var(--card-hover-bg);
+ border-color: var(--border-subtle);
+ color: var(--text-primary);
+}
+
+@keyframes menuIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px) scale(0.97);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+@keyframes modalIn {
+ from {
+ opacity: 0;
+ transform: translateY(8px) scale(0.97);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
diff --git a/src/styles/admin/users.css b/src/styles/admin/users.css
new file mode 100644
index 0000000..b752f85
--- /dev/null
+++ b/src/styles/admin/users.css
@@ -0,0 +1,575 @@
+/* ── Users Admin Page ── */
+
+/* ── Search bar ── */
+.user-search-wrap {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.user-search-icon {
+ position: absolute;
+ left: 10px;
+ color: var(--text-muted);
+ pointer-events: none;
+}
+
+.user-search-input {
+ padding: 7px 12px 7px 30px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+ background: var(--bg-inset);
+ font-size: 13px;
+ color: var(--text-primary);
+ width: 220px;
+ transition:
+ border-color 0.15s,
+ box-shadow 0.15s;
+}
+
+.user-search-input::placeholder {
+ color: var(--text-muted);
+}
+
+.user-search-input:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+/* ── User row ── */
+.user-row {
+ cursor: pointer;
+}
+
+.user-row.expanded {
+ background: var(--card-hover-bg);
+}
+
+.user-name-cell {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.user-table-avatar {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ object-fit: cover;
+}
+
+.user-table-avatar-initials {
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ letter-spacing: 0.02em;
+}
+
+.user-table-name {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.user-email {
+ font-size: 12.5px;
+ color: var(--text-secondary);
+}
+
+.user-login-mono {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
+ color: var(--text-secondary);
+ background: var(--bg-inset);
+ padding: 2px 8px;
+ border-radius: 4px;
+}
+
+.user-role-count {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+/* ── Expanded detail row ── */
+.user-detail-row td {
+ padding: 0 !important;
+ border-bottom: 1px solid var(--border-subtle);
+}
+
+.user-detail-content {
+ padding: 16px 24px 20px;
+ background: var(--bg-inset);
+ animation: userDetailFadeIn 0.15s ease;
+}
+
+@keyframes userDetailFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.user-detail-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+.user-detail-section {
+ margin-bottom: 0;
+}
+
+.user-detail-heading {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0 0 10px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.user-detail-empty {
+ margin: 0;
+ font-size: 13px;
+ color: var(--text-muted);
+}
+
+/* Detail fields */
+.user-detail-fields {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.user-detail-field {
+ display: flex;
+ align-items: baseline;
+ gap: 10px;
+}
+
+.detail-label {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-muted);
+ min-width: 60px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.detail-value {
+ font-size: 13px;
+ color: var(--text-primary);
+ word-break: break-all;
+}
+
+.detail-mono {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 12px;
+}
+
+/* ── Role cards in expanded row ── */
+.user-role-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.user-role-card {
+ padding: 10px 12px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+}
+
+.user-role-card-header {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-bottom: 6px;
+}
+
+.user-role-card-header svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.user-role-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.user-role-moniker {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 11px;
+ color: var(--text-muted);
+ background: var(--bg-inset);
+ padding: 1px 6px;
+ border-radius: 4px;
+ margin-left: auto;
+}
+
+/* Permission tags */
+.permission-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+}
+
+.permission-tag {
+ display: inline-block;
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 10.5px;
+ font-weight: 500;
+ padding: 2px 7px;
+ border-radius: 5px;
+ background: var(--status-neutral-bg);
+ color: var(--text-secondary);
+ border: 1px solid var(--border-subtle);
+}
+
+.permission-tag-more {
+ background: var(--bg-inset);
+ color: var(--text-muted);
+ font-style: italic;
+ font-family: inherit;
+}
+
+/* ── Three-dot menu ── */
+.user-menu {
+ position: fixed;
+ z-index: 200;
+ min-width: 130px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ padding: 4px;
+ animation: menuIn 0.1s ease;
+}
+
+.user-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 6px 10px;
+ background: none;
+ border: none;
+ border-radius: 5px;
+ font-size: 13px;
+ font-weight: 400;
+ color: var(--text-primary);
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.1s;
+}
+
+.user-menu-item:hover {
+ background: var(--card-hover-bg);
+}
+
+.user-menu-item svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.user-menu-item-danger {
+ color: #dc2626;
+}
+
+.user-menu-item-danger svg {
+ color: #dc2626;
+}
+
+.user-menu-item-danger:hover {
+ background: rgba(220, 38, 38, 0.08);
+}
+
+.user-menu-sep {
+ height: 1px;
+ background: var(--border-subtle);
+ margin: 3px 4px;
+}
+
+/* ── Edit dialog ── */
+.edit-dialog {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 12px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+ width: 90%;
+ max-width: 520px;
+ max-height: 85vh;
+ overflow-y: auto;
+ padding: 28px 24px 22px;
+ animation: modalIn 0.15s ease;
+}
+
+.edit-dialog-title {
+ margin: 0 0 4px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.edit-dialog-sub {
+ margin: 0 0 18px;
+ font-size: 13px;
+ color: var(--text-secondary);
+}
+
+.edit-field {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ margin-bottom: 14px;
+}
+
+.edit-field label {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.edit-field input {
+ padding: 8px 12px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 7px;
+ background: var(--bg-inset);
+ font-size: 13px;
+ color: var(--text-primary);
+ transition:
+ border-color 0.15s,
+ box-shadow 0.15s;
+}
+
+.edit-field input:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+.btn-save {
+ padding: 7px 16px;
+ border-radius: 7px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ background: var(--accent-color, #0066cc);
+ border: 1px solid transparent;
+ color: #fff;
+ transition: filter 0.15s;
+}
+
+.btn-save:hover:not(:disabled) {
+ filter: brightness(1.1);
+}
+
+.btn-save:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+/* ── Edit modal sections (roles & permissions) ── */
+.edit-section {
+ margin-bottom: 16px;
+ border-top: 1px solid var(--border-subtle);
+ padding-top: 14px;
+}
+
+.edit-section-label {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ margin-bottom: 10px;
+}
+
+.edit-section-label svg {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.edit-section-count {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+ text-transform: none;
+ letter-spacing: normal;
+ margin-left: auto;
+}
+
+/* ── Role chips ── */
+.edit-role-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ max-height: 160px;
+ overflow-y: auto;
+ padding-right: 4px;
+}
+
+.edit-role-chip {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 10px;
+ background: var(--bg-inset);
+ border: 1px solid var(--border-subtle);
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 13px;
+ color: var(--text-primary);
+ text-align: left;
+ transition:
+ background 0.12s,
+ border-color 0.12s;
+}
+
+.edit-role-chip:hover {
+ background: var(--card-hover-bg);
+}
+
+.edit-role-chip.selected {
+ background: rgba(0, 102, 204, 0.08);
+ border-color: var(--accent-color, #0066cc);
+}
+
+.edit-role-check {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ border-radius: 4px;
+ border: 1.5px solid var(--border-subtle);
+ flex-shrink: 0;
+ color: var(--accent-color, #0066cc);
+ transition: border-color 0.12s;
+}
+
+.edit-role-chip.selected .edit-role-check {
+ border-color: var(--accent-color, #0066cc);
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+}
+
+.edit-role-chip-title {
+ font-weight: 600;
+ font-size: 13px;
+}
+
+.edit-role-chip-moniker {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 11px;
+ color: var(--text-muted);
+ margin-left: auto;
+}
+
+/* ── Permission list ── */
+.edit-perm-search-wrap {
+ margin-bottom: 8px;
+}
+
+.edit-perm-search {
+ width: 100%;
+ padding: 6px 10px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 6px;
+ background: var(--bg-inset);
+ font-size: 12.5px;
+ color: var(--text-primary);
+ transition:
+ border-color 0.15s,
+ box-shadow 0.15s;
+}
+
+.edit-perm-search::placeholder {
+ color: var(--text-muted);
+}
+
+.edit-perm-search:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+ box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+}
+
+.edit-perm-list {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ max-height: 180px;
+ overflow-y: auto;
+ padding-right: 4px;
+}
+
+.edit-perm-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 4px 8px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.1s;
+}
+
+.edit-perm-item:hover {
+ background: var(--card-hover-bg);
+}
+
+.edit-perm-item input[type="checkbox"] {
+ accent-color: var(--accent-color, #0066cc);
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+ cursor: pointer;
+}
+
+.edit-perm-node {
+ font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+ font-size: 11.5px;
+ color: var(--text-primary);
+}
+
+.edit-perm-empty {
+ margin: 0;
+ padding: 8px;
+ font-size: 12.5px;
+ color: var(--text-muted);
+ text-align: center;
+}
+
+/* Scrollbars for edit lists */
+.edit-role-list::-webkit-scrollbar,
+.edit-perm-list::-webkit-scrollbar {
+ width: 5px;
+}
+
+.edit-role-list::-webkit-scrollbar-track,
+.edit-perm-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.edit-role-list::-webkit-scrollbar-thumb,
+.edit-perm-list::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb);
+ border-radius: 3px;
+}
diff --git a/src/styles/app.css b/src/styles/app.css
index a54263c..acff644 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -26,10 +26,11 @@
--text-primary: #2c3e50;
--text-secondary: #666666;
--text-muted: #8492a6;
- --text-faint: #9ca3af;
+ --text-faint: #6b7280;
--text-inverse: #ffffff;
- /* Nav */
+ /* Accent */
+ --accent: #3498db;
--nav-hover-bg: rgba(0, 0, 0, 0.04);
--nav-active-bg: rgba(52, 152, 219, 0.08);
--nav-active-color: #3498db;
@@ -137,6 +138,9 @@
--text-faint: #525252;
--text-inverse: #0e0e0e;
+ /* Accent */
+ --accent: #333333;
+
/* Nav */
--nav-hover-bg: rgba(255, 255, 255, 0.04);
--nav-active-bg: rgba(255, 255, 255, 0.06);
diff --git a/src/styles/companies/companydetail.css b/src/styles/companies/companydetail.css
index 3103270..201b989 100644
--- a/src/styles/companies/companydetail.css
+++ b/src/styles/companies/companydetail.css
@@ -153,13 +153,124 @@
font-size: 14px;
}
+/* ═══════════════════════════════════════════════════
+ Overview Tab
+ ═══════════════════════════════════════════════════ */
+
+.overview-tab {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.overview-section {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.overview-section-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.overview-details-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 10px;
+}
+
+.overview-detail-item {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ padding: 10px 14px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+}
+
+.overview-detail-label {
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ color: var(--text-muted);
+}
+
+.overview-detail-value {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ word-break: break-all;
+}
+
+.overview-detail-value.mono {
+ font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+ font-size: 11px;
+}
+
+.overview-stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+ gap: 14px;
+}
+
+.overview-stat-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 22px 16px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 10px;
+ text-align: center;
+}
+
+.overview-stat-value {
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--text-primary);
+ line-height: 1;
+}
+
+.overview-stat-label {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-muted);
+}
+
+.overview-placeholder {
+ margin: 0;
+ padding: 12px 14px;
+ font-size: 12px;
+ color: var(--text-muted);
+ background: var(--bg-base);
+ border: 1px dashed var(--border-default);
+ border-radius: 8px;
+}
+
/* ── Pane body (reusable for both panes) ── */
.detail-pane-body {
position: relative;
flex: 1;
+ display: flex;
+ flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 24px;
+ min-height: 0;
+}
+
+.company-detail-left .detail-pane-body {
+ display: flex;
+ flex-direction: column;
}
/* ═══════════════════════════════════════════════════
@@ -263,7 +374,8 @@
width: 16px;
height: 16px;
flex-shrink: 0;
- color: var(--text-faint);
+ color: var(--text-muted);
+ stroke: var(--text-muted);
margin-top: 2px;
}
@@ -277,7 +389,7 @@
.info-label {
font-size: 11px;
font-weight: 500;
- color: var(--text-faint);
+ color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
@@ -299,6 +411,98 @@
line-height: 1.6;
}
+/* Primary contact section */
+.primary-contact-section {
+ margin-top: 8px;
+ padding-top: 4px;
+}
+
+.primary-contact-header {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 0 8px 8px;
+ color: var(--text-muted);
+}
+
+.primary-contact-label {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.primary-contact-card {
+ padding: 10px 12px;
+ border-radius: 8px;
+ background: var(--nav-hover-bg);
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.primary-contact-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.primary-contact-inactive {
+ font-size: 10px;
+ font-weight: 500;
+ padding: 1px 6px;
+ border-radius: 4px;
+ background: var(--status-neutral-bg);
+ color: var(--status-neutral-color);
+}
+
+.primary-contact-title {
+ font-size: 12px;
+ color: var(--text-secondary);
+ font-weight: 400;
+}
+
+.primary-contact-detail {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--text-secondary);
+ margin-top: 2px;
+}
+
+.primary-contact-detail svg {
+ flex-shrink: 0;
+ color: var(--text-muted);
+ stroke: var(--text-muted);
+}
+
+.primary-contact-link {
+ color: var(--accent);
+ text-decoration: none;
+ word-break: break-all;
+}
+
+.primary-contact-link:hover {
+ text-decoration: underline;
+}
+
+/* Side pane bottom identifier */
+.side-pane-identifier {
+ margin-top: auto;
+ padding: 12px 16px;
+ font-size: 11px;
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ color: var(--text-faint);
+ text-align: center;
+ letter-spacing: -0.02em;
+ opacity: 0.6;
+ user-select: all;
+}
+
/* Empty state */
.profile-empty {
display: flex;
@@ -335,6 +539,37 @@
color: var(--text-faint);
}
+/* ── Tab bar spacer (pushes action button to the right) ── */
+.tab-bar-spacer {
+ flex: 1;
+}
+
+/* ── Create Credential button (sits inside tab bar) ── */
+.create-credential-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 5px 12px;
+ margin: auto 0;
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ background-color 0.15s,
+ filter 0.15s;
+ flex-shrink: 0;
+ white-space: nowrap;
+ line-height: 1;
+}
+
+.create-credential-btn:hover {
+ filter: brightness(1.12);
+}
+
/* ═══════════════════════════════════════════════════
Tab Content — Configurations
═══════════════════════════════════════════════════ */
@@ -368,6 +603,7 @@
}
.config-item {
+ position: relative;
display: flex;
flex-direction: column;
gap: 8px;
@@ -645,6 +881,129 @@
border-color: var(--input-focus-border);
}
+/* ── Detail header actions group ── */
+.config-detail-header-actions {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+}
+
+/* ── Credential action buttons (edit/delete in detail header) ── */
+.cred-action-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 6px;
+ background: var(--bg-surface);
+ color: var(--text-secondary);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: all 0.15s;
+}
+
+.cred-action-edit:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ border-color: var(--input-focus-border);
+}
+
+.cred-action-delete:hover {
+ background: rgba(220, 38, 38, 0.08);
+ color: #dc2626;
+ border-color: rgba(220, 38, 38, 0.3);
+}
+
+/* ── Three-dot menu on credential cards ── */
+.cred-menu-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ border: 1px solid transparent;
+ border-radius: 5px;
+ background: none;
+ color: var(--text-muted);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: all 0.12s;
+}
+
+.cred-menu-btn:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ border-color: var(--border-subtle);
+}
+
+.cred-menu-wrap {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.cred-dropdown-menu {
+ position: absolute;
+ right: 0;
+ top: calc(100% + 4px);
+ min-width: 140px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ z-index: 50;
+ padding: 4px;
+ animation: credMenuIn 0.1s ease;
+}
+
+@keyframes credMenuIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.cred-dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 7px 10px;
+ border: none;
+ border-radius: 5px;
+ background: none;
+ color: var(--text-secondary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ background 0.1s,
+ color 0.1s;
+}
+
+.cred-dropdown-item:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+}
+
+.cred-dropdown-item-danger:hover {
+ background: rgba(220, 38, 38, 0.08);
+ color: #dc2626;
+}
+
+.cred-dropdown-sep {
+ height: 1px;
+ margin: 3px 6px;
+ background: var(--border-subtle);
+}
+
.config-detail-json {
margin: 0;
padding: 16px;
@@ -817,6 +1176,45 @@
letter-spacing: 0.04em;
}
+/* Credential field label row with inline indicators */
+.cred-field-label-row {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+}
+
+.cred-required-star {
+ color: #dc2626;
+ font-size: 9px;
+ font-weight: 700;
+ line-height: 1;
+ flex-shrink: 0;
+ align-self: flex-start;
+ margin-top: -1px;
+}
+
+.cred-lock-icon {
+ color: #4a9a6b;
+ flex-shrink: 0;
+ margin-left: 1px;
+ opacity: 0.7;
+}
+
+/* URL and email value links */
+.cred-url-value,
+.cred-email-value {
+ color: var(--accent-color, #0066cc);
+ text-decoration: none;
+ transition: color 0.12s;
+ word-break: break-all;
+}
+
+.cred-url-value:hover,
+.cred-email-value:hover {
+ text-decoration: underline;
+ color: var(--accent-color-hover, #0055aa);
+}
+
.question-value-wrap {
display: flex;
align-items: flex-start;
@@ -856,6 +1254,18 @@
letter-spacing: 0.05em;
}
+.question-value.mono {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12.5px;
+ letter-spacing: 0.03em;
+}
+
+.cred-revealed-value.mono {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12.5px;
+ letter-spacing: 0.03em;
+}
+
/* Password toggle */
.password-toggle {
display: inline-flex;
@@ -923,3 +1333,3141 @@
font-weight: 600;
color: var(--text-secondary);
}
+
+/* Secure value inline loading spinner */
+.cred-secure-spinner {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-faint);
+}
+
+.cred-secure-spinner .spin-icon {
+ animation: cred-spin 0.8s linear infinite;
+}
+
+.spin-icon {
+ animation: cred-spin 0.8s linear infinite;
+}
+
+@keyframes cred-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* Countdown ring (30s auto-hide indicator) */
+.cred-countdown-wrap {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.cred-countdown-ring {
+ transform: rotate(-90deg);
+ color: var(--input-focus-border, #0066cc);
+}
+
+.cred-countdown-arc {
+ animation: cred-countdown 30s linear forwards;
+}
+
+@keyframes cred-countdown {
+ from {
+ stroke-dashoffset: 0;
+ }
+ to {
+ stroke-dashoffset: 50.265;
+ }
+}
+
+/* Delete confirmation dialog */
+.delete-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(2px);
+ animation: deleteOverlayIn 0.15s ease;
+}
+
+@keyframes deleteOverlayIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.delete-dialog {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 14px;
+ padding: 28px 32px 24px;
+ max-width: 400px;
+ width: 90vw;
+ text-align: center;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+ animation: deleteDialogIn 0.2s ease;
+}
+
+@keyframes deleteDialogIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95) translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+.delete-dialog-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 52px;
+ height: 52px;
+ margin: 0 auto 16px;
+ border-radius: 50%;
+ background: rgba(220, 38, 38, 0.1);
+ color: #dc2626;
+}
+
+.delete-dialog-title {
+ font-size: 17px;
+ font-weight: 700;
+ color: var(--text-primary);
+ margin: 0 0 8px;
+}
+
+.delete-dialog-msg {
+ font-size: 13.5px;
+ color: var(--text-secondary);
+ margin: 0 0 20px;
+ line-height: 1.5;
+}
+
+.delete-dialog-msg strong {
+ color: var(--text-primary);
+ font-weight: 600;
+}
+
+.delete-dialog-error {
+ font-size: 13px;
+ color: #dc2626;
+ background: rgba(220, 38, 38, 0.08);
+ border: 1px solid rgba(220, 38, 38, 0.2);
+ border-radius: 8px;
+ padding: 8px 12px;
+ margin: 0 0 16px;
+}
+
+.delete-dialog-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+}
+
+.delete-dialog-btn {
+ padding: 8px 20px;
+ border-radius: 8px;
+ font-size: 13.5px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.15s;
+ border: 1px solid var(--border-subtle);
+}
+
+.delete-dialog-btn.cancel {
+ background: var(--bg-surface);
+ color: var(--text-secondary);
+}
+
+.delete-dialog-btn.cancel:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+}
+
+.delete-dialog-btn.confirm {
+ background: #dc2626;
+ color: white;
+ border-color: #dc2626;
+}
+
+.delete-dialog-btn.confirm:hover {
+ background: #b91c1c;
+ border-color: #b91c1c;
+}
+
+.delete-dialog-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+/* Edit credential mode */
+.cred-edit-name-input {
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--text-primary);
+ background: var(--nav-hover-bg);
+ border: 1.5px solid var(--border-subtle);
+ border-radius: 8px;
+ padding: 6px 10px;
+ width: 100%;
+ outline: none;
+ transition: border-color 0.15s;
+}
+
+.cred-edit-name-input:focus {
+ border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-field-input {
+ width: 100%;
+ padding: 7px 10px;
+ font-size: 13px;
+ color: var(--text-primary);
+ background: var(--nav-hover-bg);
+ border: 1.5px solid var(--border-subtle);
+ border-radius: 6px;
+ outline: none;
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ transition: border-color 0.15s;
+}
+
+.cred-edit-field-input:focus {
+ border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-field-input::placeholder {
+ color: var(--text-muted);
+ font-family: inherit;
+ font-style: italic;
+}
+
+.cred-edit-error {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 12px;
+ padding: 8px 12px;
+ font-size: 13px;
+ color: #dc2626;
+ background: rgba(220, 38, 38, 0.08);
+ border: 1px solid rgba(220, 38, 38, 0.2);
+ border-radius: 8px;
+}
+
+/* ── Credential notes ── */
+.cred-notes-section {
+ margin-bottom: 20px;
+}
+
+.cred-notes-text {
+ margin: 0;
+ padding: 10px 14px;
+ border-radius: 8px;
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ font-size: 13px;
+ line-height: 1.6;
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+.cred-notes-empty {
+ margin: 0;
+ font-size: 13px;
+ color: var(--text-muted);
+ font-style: italic;
+}
+
+.cred-edit-notes-input {
+ width: 100%;
+ padding: 7px 10px;
+ font-size: 13px;
+ color: var(--text-primary);
+ background: var(--nav-hover-bg);
+ border: 1.5px solid var(--border-subtle);
+ border-radius: 6px;
+ outline: none;
+ font-family: inherit;
+ resize: vertical;
+ min-height: 60px;
+ box-sizing: border-box;
+ transition: border-color 0.15s;
+}
+
+.cred-edit-notes-input:focus {
+ border-color: var(--input-focus-border, #0066cc);
+}
+
+.cred-edit-notes-input::placeholder {
+ color: var(--text-muted);
+ font-style: italic;
+}
+
+.cred-action-btn.cred-action-save {
+ color: #16a34a;
+}
+
+.cred-action-btn.cred-action-save:hover {
+ background: rgba(22, 163, 74, 0.1);
+ border-color: rgba(22, 163, 74, 0.3);
+}
+
+.cred-action-btn.cred-action-cancel {
+ color: var(--text-muted);
+}
+
+.cred-action-btn.cred-action-cancel:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+}
+
+.cred-action-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════
+ Bottom Sheet (iOS-style slide-up panel)
+ ═══════════════════════════════════════════════════ */
+
+/* Desktop: the overlay wrapper is invisible; detail panel renders inline */
+.bottom-sheet-overlay {
+ display: contents;
+}
+
+.bottom-sheet-handle {
+ display: none;
+}
+
+.bottom-sheet-panel {
+ display: contents;
+}
+
+.bottom-sheet-body {
+ display: contents;
+}
+
+/* ═══════════════════════════════════════════════════
+ Contacts Tab
+ ═══════════════════════════════════════════════════ */
+
+.contacts-section {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.contacts-section + .contacts-section {
+ margin-top: 24px;
+ padding-top: 20px;
+ border-top: 1px solid var(--border-subtle);
+}
+
+.contacts-section-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.contacts-section-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+}
+
+.contacts-section-title svg {
+ color: var(--text-muted);
+ stroke: var(--text-muted);
+}
+
+.contacts-section-inactive .contacts-section-title {
+ color: var(--text-secondary);
+}
+
+.contacts-section-count {
+ font-size: 11px;
+ font-weight: 600;
+ padding: 1px 7px;
+ border-radius: 10px;
+ background: var(--accent);
+ color: #fff;
+}
+
+.contacts-section-count.inactive {
+ background: var(--status-neutral-bg);
+ color: var(--status-neutral-color);
+}
+
+.contact-avatar-inactive {
+ background: var(--text-faint);
+}
+
+.contacts-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 12px;
+}
+
+.contact-card {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 14px 16px;
+ border-radius: 10px;
+ border: 1px solid var(--border-subtle);
+ background: var(--bg-surface);
+ transition:
+ box-shadow 0.15s,
+ border-color 0.15s;
+}
+
+.contact-card:hover {
+ border-color: var(--input-focus-border);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.contact-card.contact-inactive {
+ opacity: 0.55;
+}
+
+.contact-card-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.contact-avatar {
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ background: var(--accent);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.contact-initials {
+ font-size: 12px;
+ font-weight: 600;
+ color: #fff;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+}
+
+.contact-card-info {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+}
+
+.contact-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.contact-inactive-badge {
+ font-size: 10px;
+ font-weight: 500;
+ padding: 1px 6px;
+ border-radius: 4px;
+ background: var(--status-neutral-bg);
+ color: var(--status-neutral-color);
+}
+
+.contact-title {
+ font-size: 12px;
+ color: var(--text-secondary);
+}
+
+.contact-card-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-left: 44px;
+}
+
+.contact-detail-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--text-secondary);
+}
+
+.contact-detail-row svg {
+ flex-shrink: 0;
+ color: var(--text-secondary);
+ stroke: var(--text-secondary);
+ width: 13px;
+ height: 13px;
+ min-width: 13px;
+ min-height: 13px;
+}
+
+.contact-link {
+ color: var(--accent);
+ text-decoration: none;
+ word-break: break-all;
+}
+
+.contact-link:hover {
+ text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+ .bottom-sheet-overlay {
+ display: flex;
+ position: fixed;
+ inset: 0;
+ bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+ z-index: 150;
+ align-items: flex-end;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0);
+ transition: background 0.3s ease;
+ pointer-events: none;
+ }
+
+ .bottom-sheet-overlay.active {
+ background: rgba(0, 0, 0, 0.5);
+ pointer-events: auto;
+ }
+
+ .bottom-sheet-panel {
+ display: flex;
+ width: 100%;
+ height: calc(75vh - 56px - env(safe-area-inset-bottom, 0px));
+ max-height: calc(75vh - 56px - env(safe-area-inset-bottom, 0px));
+ background: var(--bg-surface);
+ border-radius: 16px 16px 0 0;
+ box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
+ flex-direction: column;
+ overflow: hidden;
+ transform: translateY(100%);
+ transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+ will-change: transform;
+ }
+
+ .bottom-sheet-overlay.active .bottom-sheet-panel {
+ transform: translateY(0);
+ }
+
+ /* Drag handle */
+ .bottom-sheet-handle {
+ display: flex;
+ justify-content: center;
+ padding: 10px 0 6px;
+ flex-shrink: 0;
+ cursor: grab;
+ }
+
+ .bottom-sheet-handle::after {
+ content: "";
+ width: 36px;
+ height: 5px;
+ border-radius: 3px;
+ background: var(--text-faint);
+ opacity: 0.4;
+ }
+
+ .bottom-sheet-body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+ padding: 0;
+ }
+
+ /* Show the detail panel inside the bottom sheet */
+ .bottom-sheet-body .config-detail-panel {
+ display: flex !important;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ .bottom-sheet-body .config-detail-content {
+ flex: 1;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+}
+
+/* ═══════════════════════════════════════════════════
+ Mobile — Company Detail Responsive
+ ═══════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+ /* Stack the two panes vertically */
+ .company-detail-page {
+ flex-direction: column;
+ gap: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ /* Left pane becomes a compact card at the top */
+ .company-detail-left {
+ flex: 0 0 auto;
+ border-radius: 10px;
+ }
+
+ .company-detail-left .detail-pane-body {
+ padding: 12px 16px;
+ }
+
+ .profile-header {
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+ padding-bottom: 12px;
+ margin-bottom: 12px;
+ margin-top: 8px;
+ }
+
+ .profile-avatar {
+ width: 44px;
+ height: 44px;
+ border-radius: 12px;
+ }
+
+ .profile-initials {
+ font-size: 16px;
+ }
+
+ .profile-name {
+ font-size: 16px;
+ text-align: left;
+ }
+
+ .profile-info {
+ gap: 0;
+ }
+
+ .info-row {
+ padding: 6px 4px;
+ }
+
+ /* Right pane fills remaining space */
+ .company-detail-right {
+ flex: 1;
+ min-height: 0;
+ border-radius: 10px;
+ }
+
+ .detail-pane-header {
+ padding: 12px 16px 10px;
+ gap: 8px;
+ }
+
+ .detail-pane-title {
+ font-size: 16px;
+ }
+
+ /* Tab bar: scrollable on mobile */
+ .tab-bar {
+ padding: 0 12px;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .tab-btn {
+ padding: 10px 12px 8px;
+ font-size: 12px;
+ }
+
+ .detail-pane-body {
+ padding: 12px 14px;
+ }
+
+ /* Config split: full-width list, no side-by-side on mobile */
+ .config-split {
+ flex-direction: column;
+ }
+
+ .config-split.expanded {
+ gap: 0;
+ }
+
+ .config-list {
+ flex: none !important;
+ max-width: none !important;
+ width: 100%;
+ }
+
+ .config-list.collapsed {
+ flex: none;
+ max-width: none;
+ }
+
+ /* Hide the inline detail panel on mobile — the bottom sheet is used instead */
+ .config-detail-panel {
+ display: none;
+ }
+
+ /* Collapsed config items still show full info on mobile */
+ .config-list.collapsed .config-item {
+ padding: 14px 16px;
+ gap: 8px;
+ }
+
+ .config-list.collapsed .config-name {
+ font-size: 14px;
+ }
+
+ /* Card items */
+ .config-item {
+ padding: 12px 14px;
+ }
+
+ /* Create credential button: tighter on mobile */
+ .create-credential-btn {
+ padding: 5px 10px;
+ font-size: 11px;
+ }
+
+ /* Bottom sheet detail content overrides */
+ .bottom-sheet-body .config-detail-content {
+ animation: none;
+ padding: 8px 16px 24px;
+ }
+
+ .bottom-sheet-body .config-detail-header {
+ margin-bottom: 16px;
+ padding-bottom: 12px;
+ }
+
+ .bottom-sheet-body .config-detail-title {
+ font-size: 15px;
+ }
+
+ /* Bottom sheet footer spacing */
+ .bottom-sheet-body .config-info-footer {
+ padding-bottom: 8px;
+ }
+
+ /* Credential dropdown menus in collapsed list: full width items on mobile */
+ .cred-dropdown-menu {
+ min-width: 120px;
+ }
+
+ /* Delete overlay adapts for safe areas */
+ .delete-overlay {
+ align-items: flex-end;
+ padding-bottom: env(safe-area-inset-bottom, 0);
+ }
+
+ .delete-dialog {
+ border-radius: 14px 14px 0 0;
+ max-width: 100%;
+ width: 100%;
+ padding: 24px 20px 20px;
+ animation: deleteSheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+ }
+
+ @keyframes deleteSheetIn {
+ from {
+ transform: translateY(100%);
+ }
+ to {
+ transform: translateY(0);
+ }
+ }
+}
+
+/* Desktop: hide mobile-only elements */
+.mobile-nav-menu,
+.mobile-content-header {
+ display: none;
+}
+
+/* Small phones */
+@media (max-width: 480px) {
+ .company-detail-left .detail-pane-body {
+ padding: 8px 12px;
+ }
+
+ .profile-avatar {
+ width: 38px;
+ height: 38px;
+ border-radius: 10px;
+ }
+
+ .profile-initials {
+ font-size: 14px;
+ }
+
+ .profile-name {
+ font-size: 14px;
+ }
+
+ .tab-btn {
+ padding: 8px 10px 6px;
+ font-size: 11px;
+ }
+
+ .detail-pane-body {
+ padding: 10px 10px;
+ }
+
+ .config-item {
+ padding: 10px 12px;
+ }
+
+ .bottom-sheet-body .config-detail-content {
+ padding: 6px 12px 20px;
+ }
+}
+
+/* ═══════════════════════════════════════════════════
+ Mobile — Vertical Nav, Collapsible Header, Transitions
+ ═══════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+ /* ── Left pane collapse transition ── */
+ .company-detail-left {
+ transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+ overflow: hidden;
+ }
+
+ .company-detail-left.mobile-collapsed .detail-pane-body {
+ padding: 8px 16px;
+ }
+
+ .company-detail-left.mobile-collapsed .profile-header {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ border-bottom: none;
+ }
+
+ .company-detail-left.mobile-collapsed .profile-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ }
+
+ .company-detail-left.mobile-collapsed .profile-initials {
+ font-size: 13px;
+ }
+
+ .company-detail-left.mobile-collapsed .profile-name {
+ font-size: 15px;
+ }
+
+ .company-detail-left.mobile-collapsed .profile-status,
+ .company-detail-left.mobile-collapsed .profile-info,
+ .company-detail-left.mobile-collapsed .back-btn {
+ display: none;
+ }
+
+ /* ── Mobile vertical nav menu ── */
+ .mobile-nav-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 0 6px;
+ animation: mobileNavIn 0.3s ease-out;
+ }
+
+ @keyframes mobileNavIn {
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .mobile-nav-item {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ width: 100%;
+ padding: 14px 16px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 12px;
+ background: var(--card-bg);
+ color: var(--text-primary);
+ font-size: 15px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.15s;
+ text-align: left;
+ }
+
+ .mobile-nav-item:active {
+ background: var(--nav-hover-bg);
+ transform: scale(0.98);
+ }
+
+ .mobile-nav-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 10px;
+ background: var(--nav-hover-bg);
+ color: var(--text-secondary);
+ flex-shrink: 0;
+ }
+
+ .mobile-nav-label {
+ flex: 1;
+ }
+
+ .mobile-nav-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 22px;
+ height: 22px;
+ padding: 0 6px;
+ border-radius: 11px;
+ background: var(--accent-color, #0066cc);
+ color: white;
+ font-size: 12px;
+ font-weight: 700;
+ flex-shrink: 0;
+ }
+
+ .mobile-nav-chevron {
+ color: var(--text-faint);
+ flex-shrink: 0;
+ }
+
+ /* ── Hide right pane when showing mobile nav ── */
+ .company-detail-right.mobile-hidden {
+ display: none;
+ }
+
+ /* ── Hide desktop tab bar on mobile ── */
+ .company-detail-right .tab-bar {
+ display: none;
+ }
+
+ /* ── Mobile content header (back + title + action) ── */
+ .mobile-content-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--border-subtle);
+ flex-shrink: 0;
+ animation: mobileContentIn 0.3s ease-out;
+ }
+
+ @keyframes mobileContentIn {
+ from {
+ opacity: 0;
+ transform: translateX(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+
+ .mobile-back-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 34px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ background: var(--bg-surface);
+ color: var(--text-secondary);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: all 0.15s;
+ }
+
+ .mobile-back-btn:active {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ }
+
+ .mobile-content-title {
+ flex: 1;
+ margin: 0;
+ font-size: 17px;
+ font-weight: 700;
+ color: var(--text-primary);
+ }
+
+ .mobile-create-btn {
+ padding: 6px 12px;
+ font-size: 12px;
+ border-radius: 8px;
+ }
+
+ /* ── Right pane grows when tab is active ── */
+ .company-detail-right {
+ transition: flex 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+ }
+}
+
+/* Safe area insets for bottom sheet */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+ @media (max-width: 768px) {
+ .bottom-sheet-panel {
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+ }
+}
+
+/* ═══════════════════════════════════════════════════
+ Sub-Credentials — Table Layout
+ ═══════════════════════════════════════════════════ */
+
+.sub-creds-section {
+ margin-top: 16px;
+ padding: 12px 16px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+}
+
+.sub-creds-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.sub-creds-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.sub-creds-count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ padding: 0 5px;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 9px;
+ background: var(--nav-active-bg);
+ color: var(--text-secondary);
+}
+
+.sub-creds-loading {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 0;
+ font-size: 11px;
+ color: var(--text-muted);
+}
+
+.sub-creds-empty {
+ margin: 0;
+ padding: 4px 0;
+ font-size: 11px;
+ color: var(--text-muted);
+}
+
+/* ── Table ── */
+.sub-creds-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+ font-size: 11px;
+}
+
+.sub-creds-table thead th {
+ padding: 4px 8px;
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ color: var(--text-muted);
+ text-align: left;
+ border-bottom: 1px solid var(--border-subtle);
+ white-space: nowrap;
+}
+
+.sub-creds-table thead th {
+ display: table-cell;
+}
+
+.sub-creds-table thead th .cred-lock-icon {
+ display: inline;
+ vertical-align: -1px;
+ margin-left: 2px;
+}
+
+.sub-creds-th-actions {
+ width: 32px;
+}
+
+.sub-creds-table tbody td {
+ padding: 5px 8px;
+ color: var(--text-primary);
+ border-bottom: 1px solid var(--border-subtle);
+ vertical-align: middle;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.sub-creds-table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+.sub-cred-row:hover td {
+ background: var(--bg-hover);
+}
+
+.sub-cred-name-cell {
+ font-weight: 600;
+ white-space: nowrap;
+ width: 20%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+td.mono {
+ font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+ font-size: 10px;
+}
+
+.sub-cred-secure-cell {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ max-width: 100%;
+ overflow: hidden;
+}
+
+.sub-cred-eye-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ background: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ color: var(--text-muted);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: all 0.15s ease;
+}
+
+.sub-cred-eye-btn:hover {
+ color: var(--accent-blue);
+ background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
+ border-color: color-mix(in srgb, var(--accent-blue) 20%, transparent);
+}
+
+.sub-cred-spinner {
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+.sub-cred-revealed {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+}
+
+.sub-cred-masked {
+ color: var(--text-muted);
+ letter-spacing: 1px;
+}
+
+.sub-cred-actions-cell {
+ width: 32px;
+ text-align: center;
+ padding: 2px 4px;
+}
+
+.sub-cred-remove-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ background: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ color: var(--text-muted);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sub-cred-remove-btn:hover:not(:disabled) {
+ color: var(--status-error);
+ background: color-mix(in srgb, var(--status-error) 8%, transparent);
+ border-color: color-mix(in srgb, var(--status-error) 20%, transparent);
+}
+
+.sub-cred-remove-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* ── Add button (header) ── */
+.sub-cred-add-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 3px 10px;
+ font-size: 11px;
+ font-weight: 500;
+ border: 1px dashed var(--border-default);
+ border-radius: 6px;
+ background: none;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sub-cred-add-btn:hover {
+ border-color: var(--accent-blue);
+ color: var(--accent-blue);
+ background: color-mix(in srgb, var(--accent-blue) 6%, transparent);
+}
+
+/* ── Inline add row ── */
+.sub-cred-add-row {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 8px;
+ padding: 10px;
+ border: 1px solid var(--accent-blue);
+ border-radius: 6px;
+ background: color-mix(in srgb, var(--accent-blue) 4%, var(--bg-surface));
+}
+
+.sub-cred-add-row-fields {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.sub-cred-add-input {
+ flex: 1 1 120px;
+ min-width: 0;
+ padding: 5px 8px;
+ font-size: 11px;
+ border: 1px solid var(--border-default);
+ border-radius: 4px;
+ background: var(--bg-base);
+ color: var(--text-primary);
+ outline: none;
+ transition: border-color 0.15s ease;
+}
+
+.sub-cred-add-input:focus {
+ border-color: var(--accent-blue);
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 12%, transparent);
+}
+
+.sub-cred-add-input:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.sub-cred-add-row-actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 6px;
+}
+
+.sub-cred-add-error {
+ color: var(--status-error);
+ display: inline-flex;
+ align-items: center;
+}
+
+.sub-cred-btn-cancel {
+ padding: 4px 10px;
+ font-size: 11px;
+ font-weight: 500;
+ border: 1px solid var(--border-default);
+ border-radius: 4px;
+ background: var(--bg-surface);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sub-cred-btn-cancel:hover:not(:disabled) {
+ background: var(--bg-hover);
+}
+
+.sub-cred-btn-cancel:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.sub-cred-btn-save {
+ padding: 4px 10px;
+ font-size: 11px;
+ font-weight: 600;
+ border: none;
+ border-radius: 4px;
+ background: var(--accent-blue);
+ color: #fff;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sub-cred-btn-save:hover:not(:disabled) {
+ filter: brightness(1.08);
+}
+
+.sub-cred-btn-save:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════
+ UniFi Tab — Sites Cards
+ ═══════════════════════════════════════════════════ */
+
+.unifi-sites-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+ gap: 28px;
+ padding: 8px 0;
+}
+
+.unifi-site-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ padding: 24px 20px 20px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 10px;
+ cursor: pointer;
+ transition:
+ border-color 0.18s,
+ box-shadow 0.18s;
+}
+
+.unifi-site-card:hover {
+ border-color: var(--input-focus-border);
+ box-shadow: 0 2px 12px
+ color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+}
+
+.unifi-site-card:focus-visible {
+ outline: 2px solid var(--input-focus-border);
+ outline-offset: 2px;
+}
+
+.unifi-site-card-top {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.unifi-site-card-info {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+}
+
+.unifi-site-card-name {
+ font-size: 17px;
+ font-weight: 700;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.unifi-site-card-id {
+ font-size: 12px;
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ color: var(--text-muted);
+ letter-spacing: -0.02em;
+}
+
+.unifi-site-card-stats {
+ display: flex;
+ gap: 20px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border-subtle);
+}
+
+.unifi-card-stat {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.unifi-card-stat-value {
+ font-size: 13px;
+ font-weight: 700;
+ color: var(--text-primary);
+ font-variant-numeric: tabular-nums;
+}
+
+.unifi-card-stat-label {
+ font-size: 11px;
+ color: var(--text-muted);
+}
+
+.unifi-card-stats-loading {
+ display: flex;
+ gap: 16px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border-subtle);
+}
+
+.unifi-card-stat-placeholder {
+ width: 40px;
+ height: 12px;
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+.unifi-site-card-arrow {
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ opacity: 0;
+ transition: opacity 0.18s;
+}
+
+.unifi-site-card:hover .unifi-site-card-arrow {
+ opacity: 0.7;
+ color: var(--input-focus-border);
+}
+
+/* Health status badge (reused from cards) */
+.unifi-site-card-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 3px 10px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.01em;
+}
+
+.unifi-site-card-status .status-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+}
+
+.unifi-site-card-status.status-ok {
+ background: color-mix(
+ in srgb,
+ var(--status-success, #22c55e) 12%,
+ transparent
+ );
+ color: var(--status-success, #22c55e);
+}
+.unifi-site-card-status.status-ok .status-dot {
+ background: var(--status-success, #22c55e);
+}
+
+.unifi-site-card-status.status-warn {
+ background: color-mix(
+ in srgb,
+ var(--status-warning, #f59e0b) 12%,
+ transparent
+ );
+ color: var(--status-warning, #f59e0b);
+}
+.unifi-site-card-status.status-warn .status-dot {
+ background: var(--status-warning, #f59e0b);
+}
+
+.unifi-site-card-status.status-error {
+ background: color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent);
+ color: var(--status-error, #ef4444);
+}
+.unifi-site-card-status.status-error .status-dot {
+ background: var(--status-error, #ef4444);
+}
+
+.unifi-site-card-status.status-unknown {
+ background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+ color: var(--text-muted);
+}
+.unifi-site-card-status.status-unknown .status-dot {
+ background: var(--text-muted);
+}
+
+.unifi-site-card-status.status-loading {
+ background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+ color: var(--text-muted);
+ padding: 5px 10px;
+}
+
+/* ═══════════════════════════════════════════════════
+ UniFi Tab — Management View
+ ═══════════════════════════════════════════════════ */
+
+.unifi-management {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ /* Fill the pane body: viewport minus page header, tab bar, and pane padding */
+ height: calc(100vh - 160px);
+}
+
+.unifi-management-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--border-subtle);
+ margin-bottom: 0;
+}
+
+.unifi-back-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ background: var(--bg-surface);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s;
+ flex-shrink: 0;
+}
+
+.unifi-back-btn:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ border-color: var(--input-focus-border);
+}
+
+.unifi-management-title-group {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ flex: 1;
+ min-width: 0;
+}
+
+.unifi-management-title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.unifi-management-site-id {
+ font-size: 11px;
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ color: var(--text-muted);
+}
+
+.unifi-site-menu-wrap {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.unifi-site-menu-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ background: none;
+ color: var(--text-muted);
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: all 0.12s;
+}
+
+.unifi-site-menu-btn:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+ border-color: var(--border-subtle);
+}
+
+.unifi-site-dropdown-menu {
+ position: absolute;
+ right: 0;
+ top: calc(100% + 4px);
+ min-width: 150px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ z-index: 50;
+ padding: 4px;
+ animation: credMenuIn 0.1s ease;
+}
+
+.unifi-site-dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 7px 10px;
+ border: none;
+ border-radius: 5px;
+ background: none;
+ color: var(--text-secondary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition:
+ background 0.1s,
+ color 0.1s;
+}
+
+.unifi-site-dropdown-item:hover {
+ background: var(--nav-hover-bg);
+ color: var(--text-primary);
+}
+
+.unifi-site-dropdown-item-danger:hover {
+ background: rgba(220, 38, 38, 0.08);
+ color: #dc2626;
+}
+
+.unifi-site-dropdown-item:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Management sub-tabs */
+.unifi-mgmt-tabs {
+ display: flex;
+ gap: 0;
+ border-bottom: 1px solid var(--border-subtle);
+ flex-shrink: 0;
+}
+
+.unifi-mgmt-tab {
+ position: relative;
+ padding: 10px 16px 8px;
+ border: none;
+ background: none;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: color 0.15s;
+}
+
+.unifi-mgmt-tab::after {
+ content: "";
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ right: 0;
+ height: 2px;
+ border-radius: 2px 2px 0 0;
+ background: transparent;
+ transition: background 0.15s;
+}
+
+.unifi-mgmt-tab:hover {
+ color: var(--text-primary);
+}
+
+.unifi-mgmt-tab.active {
+ color: var(--text-primary);
+ font-weight: 600;
+}
+
+.unifi-mgmt-tab.active::after {
+ background: var(--input-focus-border);
+}
+
+.unifi-mgmt-content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ padding-top: 16px;
+}
+
+/* Loading & Empty states */
+.unifi-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding: 48px;
+ color: var(--text-secondary);
+ font-size: 13px;
+}
+
+.unifi-empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding: 48px 16px;
+ color: var(--text-secondary);
+ font-size: 13px;
+}
+
+.unifi-empty-state p {
+ margin: 0;
+}
+
+/* Overview */
+.unifi-overview-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.unifi-overview-section {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.unifi-section-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin: 0;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+}
+
+.unifi-health-cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.unifi-health-card {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ font-size: 13px;
+}
+
+.unifi-health-status {
+ font-size: 10px;
+ line-height: 1;
+}
+
+.unifi-health-status.healthy {
+ color: var(--status-active-color, #22c55e);
+}
+
+.unifi-health-status.unhealthy {
+ color: var(--status-error, #ef4444);
+}
+
+.unifi-health-subsystem {
+ font-weight: 600;
+ color: var(--text-primary);
+ text-transform: uppercase;
+ font-size: 11px;
+ letter-spacing: 0.02em;
+}
+
+.unifi-health-status-text {
+ color: var(--text-muted);
+ font-size: 12px;
+}
+
+.unifi-info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 8px;
+}
+
+.unifi-info-item {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ padding: 10px 14px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+}
+
+.unifi-info-label {
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ color: var(--text-muted);
+}
+
+.unifi-info-value {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ word-break: break-all;
+}
+
+.unifi-info-value.mono {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12px;
+ letter-spacing: -0.02em;
+}
+
+/* Devices */
+.unifi-devices-table-wrap {
+ overflow-x: auto;
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+}
+
+.unifi-devices-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+}
+
+.unifi-devices-table thead th {
+ text-align: left;
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--border-subtle);
+ background: color-mix(in srgb, var(--bg-base) 50%, transparent);
+ white-space: nowrap;
+}
+
+.unifi-devices-table tbody tr {
+ border-bottom: 1px solid var(--border-subtle);
+ transition: background 0.15s ease;
+}
+
+.unifi-devices-table tbody tr:last-child {
+ border-bottom: none;
+}
+
+.unifi-devices-table tbody tr:hover {
+ background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+}
+
+.unifi-devices-table td {
+ padding: 10px 14px;
+ color: var(--text-primary);
+ white-space: nowrap;
+ vertical-align: middle;
+}
+
+.unifi-device-status-cell {
+ width: 42px;
+ text-align: center;
+}
+
+.unifi-device-status-dot {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+
+.unifi-device-status-dot.online {
+ background: var(--status-active-color, #22c55e);
+ box-shadow: 0 0 4px var(--status-active-color, #22c55e);
+}
+
+.unifi-device-status-dot.offline {
+ background: var(--text-muted);
+}
+
+.unifi-device-name-cell {
+ font-weight: 600;
+}
+
+.unifi-device-model-cell {
+ color: var(--text-secondary, var(--text-primary));
+}
+
+.unifi-device-mono-cell {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12px;
+ letter-spacing: -0.02em;
+ color: var(--text-secondary, var(--text-primary));
+}
+
+.unifi-device-uptime-cell {
+ color: var(--text-secondary, var(--text-primary));
+}
+
+/* WiFi Split-View */
+.wifi-split-view {
+ display: flex;
+ gap: 0;
+ flex: 1;
+ min-height: 0;
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+ overflow: hidden;
+ background: var(--bg-base);
+ overscroll-behavior: contain;
+}
+
+.wifi-list-panel {
+ flex: 1;
+ border-right: 1px solid var(--border-subtle);
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ transition: flex 0.25s ease;
+}
+
+.wifi-split-view.detail-open .wifi-list-panel {
+ flex: 0 0 240px;
+}
+
+.wifi-list-count {
+ font-size: 11px;
+ color: var(--text-muted);
+ background: color-mix(in srgb, var(--text-muted) 15%, transparent);
+ padding: 1px 7px;
+ border-radius: 10px;
+ font-weight: 500;
+}
+
+/* WiFi Table Layout */
+.wifi-table-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--border-subtle);
+ background: color-mix(in srgb, var(--bg-base), var(--bg-raised) 50%);
+ position: sticky;
+ top: 0;
+ z-index: 3;
+}
+
+.wifi-table-title {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.wifi-table-head {
+ display: flex;
+ align-items: center;
+ padding: 6px 14px;
+ background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+ border-bottom: 1px solid var(--border-subtle);
+ position: sticky;
+ top: 39px;
+ z-index: 2;
+}
+
+.wifi-table-head .wifi-col {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.wifi-table-body {
+ display: flex;
+ flex-direction: column;
+}
+
+.wifi-table-row {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 9px 14px;
+ background: none;
+ border: none;
+ border-bottom: 1px solid var(--border-subtle);
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.12s;
+}
+
+.wifi-table-row:last-child {
+ border-bottom: none;
+}
+
+.wifi-table-row:hover {
+ background: color-mix(in srgb, var(--text-primary) 4%, transparent);
+}
+
+.wifi-table-row.active {
+ background: color-mix(in srgb, var(--input-focus-border) 10%, transparent);
+ box-shadow: inset 2px 0 0 var(--input-focus-border);
+}
+
+/* Column sizing */
+.wifi-col {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: var(--text-primary);
+ min-width: 0;
+}
+
+.wifi-col-status {
+ flex: 0 0 28px;
+ justify-content: center;
+}
+
+.wifi-col-name {
+ flex: 1.6;
+ min-width: 0;
+}
+
+.wifi-col-vlan {
+ flex: 1;
+ min-width: 0;
+}
+
+.wifi-col-aps {
+ flex: 1;
+ justify-content: center;
+}
+
+.wifi-col-band {
+ flex: 1;
+ justify-content: center;
+}
+
+.wifi-col-clients {
+ flex: 0.7;
+ justify-content: center;
+}
+
+.wifi-col-security {
+ flex: 1.3;
+}
+
+.wifi-status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-muted);
+ opacity: 0.25;
+ flex-shrink: 0;
+}
+
+.wifi-status-dot.enabled {
+ background: #22c55e;
+ opacity: 1;
+}
+
+.wifi-network-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wifi-table-tag {
+ font-size: 9px;
+ color: var(--text-muted);
+ background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+ padding: 1px 5px;
+ border-radius: 3px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ flex-shrink: 0;
+}
+
+.wifi-table-tag-guest {
+ color: color-mix(in srgb, var(--input-focus-border) 80%, var(--text-primary));
+ background: color-mix(in srgb, var(--input-focus-border) 12%, transparent);
+}
+
+.wifi-band-badge {
+ font-size: 11px;
+ color: var(--text-muted);
+}
+
+/* Detail Panel */
+.wifi-detail-panel {
+ flex: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition:
+ flex 0.25s ease,
+ opacity 0.2s ease;
+}
+
+.wifi-split-view.detail-open .wifi-detail-panel {
+ flex: 1;
+ min-height: 0;
+ opacity: 1;
+ overflow-y: auto;
+}
+
+.wifi-detail-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--border-subtle);
+ background: var(--bg-surface, var(--bg-base));
+ gap: 12px;
+ position: sticky;
+ top: 0;
+ z-index: 5;
+}
+
+.wifi-detail-back {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 12px;
+ color: var(--text-muted);
+ padding: 4px 8px;
+ border-radius: 6px;
+ transition:
+ color 0.15s,
+ background 0.15s;
+}
+
+.wifi-detail-back:hover {
+ color: var(--text-primary);
+ background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+.wifi-detail-actions {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wifi-btn {
+ font-size: 12px;
+ padding: 5px 14px;
+ border-radius: 6px;
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ transition:
+ background 0.15s,
+ opacity 0.15s;
+}
+
+.wifi-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.wifi-btn-ghost {
+ background: none;
+ color: var(--text-muted);
+ border: 1px solid var(--border-subtle);
+}
+
+.wifi-btn-ghost:hover:not(:disabled) {
+ background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+ color: var(--text-primary);
+}
+
+.wifi-btn-primary {
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+}
+
+.wifi-btn-primary:hover:not(:disabled) {
+ opacity: 0.85;
+}
+
+.wifi-save-error {
+ padding: 8px 16px;
+ font-size: 12px;
+ color: var(--status-error, #ef4444);
+ background: color-mix(in srgb, var(--status-error, #ef4444) 8%, transparent);
+ border-bottom: 1px solid var(--border-subtle);
+}
+
+/* Detail Form */
+.wifi-detail-form {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+/* Group card */
+.wifi-group-card {
+ border: 1px solid var(--border-subtle);
+ border-radius: 10px;
+ overflow: hidden;
+ background: var(--bg-surface);
+}
+
+.wifi-group-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--border-subtle);
+ background: color-mix(in srgb, var(--bg-base) 50%, var(--bg-surface));
+}
+
+.wifi-group-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ background: color-mix(in srgb, var(--accent-color, #0066cc) 10%, transparent);
+ color: var(--accent-color, #0066cc);
+ flex-shrink: 0;
+}
+
+.wifi-group-title-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+}
+
+.wifi-group-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+ line-height: 1.3;
+}
+
+.wifi-group-desc {
+ font-size: 11px;
+ color: var(--text-muted);
+ line-height: 1.3;
+}
+
+.wifi-group-fields {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ padding: 4px 0;
+}
+
+/* Unified field rows inside group cards */
+.wifi-group-fields .wifi-field {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 8px 14px;
+ transition: background 0.1s;
+}
+
+.wifi-group-fields .wifi-field:hover {
+ background: color-mix(in srgb, var(--text-primary) 2%, transparent);
+}
+
+.wifi-group-fields .wifi-field-inline {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.wifi-field-label-row {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+ flex: 1;
+}
+
+.wifi-field-label {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-primary);
+ letter-spacing: 0;
+ text-transform: none;
+}
+
+.wifi-field-hint {
+ font-size: 11px;
+ color: var(--text-muted);
+ line-height: 1.3;
+}
+
+.wifi-field-input {
+ padding: 6px 10px;
+ border: 1px solid var(--border-default);
+ border-radius: 6px;
+ background: var(--bg-base);
+ color: var(--text-primary);
+ font-size: 13px;
+ transition: border-color 0.15s;
+}
+
+.wifi-field-input:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+}
+
+.wifi-field-input.mono {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12px;
+ letter-spacing: -0.02em;
+}
+
+.wifi-field-select {
+ padding: 6px 10px;
+ border: 1px solid var(--border-default);
+ border-radius: 6px;
+ background: var(--bg-base);
+ color: var(--text-primary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: border-color 0.15s;
+}
+
+.wifi-field-select:focus {
+ outline: none;
+ border-color: var(--input-focus-border);
+}
+
+.wifi-field-value {
+ font-size: 13px;
+ color: var(--text-primary);
+}
+
+.wifi-field-value.mono {
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+ font-size: 12px;
+ letter-spacing: -0.02em;
+}
+
+.wifi-field-value.wifi-bool {
+ color: var(--text-muted);
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.wifi-field-value.wifi-bool.yes {
+ color: var(--status-success);
+}
+
+/* Toggle switch */
+.wifi-toggle {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ flex-shrink: 0;
+}
+
+.wifi-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ position: absolute;
+}
+
+.wifi-toggle-slider {
+ width: 34px;
+ height: 18px;
+ background: var(--text-muted);
+ opacity: 0.35;
+ border-radius: 9px;
+ position: relative;
+ transition:
+ background 0.2s,
+ opacity 0.2s;
+}
+
+.wifi-toggle-slider::after {
+ content: "";
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background: #fff;
+ top: 2px;
+ left: 2px;
+ transition: transform 0.2s;
+}
+
+.wifi-toggle input:checked + .wifi-toggle-slider {
+ background: var(--accent-color, #0066cc);
+ opacity: 1;
+}
+
+.wifi-toggle input:checked + .wifi-toggle-slider::after {
+ transform: translateX(16px);
+}
+
+/* Passphrase */
+.wifi-passphrase-wrap {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wifi-passphrase-wrap .wifi-field-input {
+ flex: 1;
+}
+
+.wifi-reveal-btn {
+ background: none;
+ border: none;
+ padding: 4px;
+ cursor: pointer;
+ color: var(--text-muted);
+ display: inline-flex;
+ align-items: center;
+ border-radius: 4px;
+ transition: color 0.15s;
+ flex-shrink: 0;
+}
+
+.wifi-reveal-btn:hover {
+ color: var(--text-primary);
+}
+
+/* Manual / Auto mode toggle */
+.wifi-mode-toggle-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 0 0 4px;
+}
+
+.wifi-mode-label {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.wifi-mode-toggle {
+ display: inline-flex;
+ border: 1px solid var(--border-default);
+ border-radius: 8px;
+ overflow: hidden;
+ flex-shrink: 0;
+ align-self: flex-start;
+}
+
+.wifi-mode-toggle button {
+ padding: 5px 18px;
+ border: none;
+ background: none;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s;
+ position: relative;
+}
+
+.wifi-mode-toggle button + button {
+ border-left: 1px solid var(--border-default);
+}
+
+.wifi-mode-toggle button.active {
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+}
+
+.wifi-mode-toggle button:not(.active):hover {
+ background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+.wifi-mode-hint {
+ font-size: 11px;
+ color: var(--text-muted);
+ line-height: 1.4;
+}
+
+/* Placeholder */
+.wifi-detail-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 280px;
+ gap: 12px;
+ color: var(--text-muted);
+ padding: 40px;
+}
+
+.wifi-detail-placeholder svg {
+ opacity: 0.3;
+}
+
+.wifi-detail-placeholder p {
+ font-size: 13px;
+ margin: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* Bubble Select (horizontal pill) */
+/* ═══════════════════════════════════ */
+.wifi-bubble-select {
+ display: inline-flex;
+ border: 1px solid var(--border-default);
+ border-radius: 8px;
+ overflow: hidden;
+ flex-shrink: 0;
+ align-self: flex-start;
+}
+
+.wifi-bubble {
+ padding: 5px 16px;
+ border: none;
+ background: none;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s;
+ position: relative;
+}
+
+.wifi-bubble + .wifi-bubble {
+ border-left: 1px solid var(--border-default);
+}
+
+.wifi-bubble.active {
+ background: var(--accent-color, #0066cc);
+ color: #fff;
+}
+
+.wifi-bubble:not(.active):hover {
+ background: color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+
+/* ═══════════════════════════════════ */
+/* Broadcast Group Checklist */
+/* ═══════════════════════════════════ */
+.wifi-group-checklist {
+ margin-top: 8px;
+ border: 1px solid var(--border-default);
+ border-radius: 8px;
+ overflow: hidden;
+ max-height: 220px;
+ overflow-y: auto;
+}
+
+.wifi-group-checklist-loading {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 14px;
+ font-size: 12px;
+ color: var(--text-secondary);
+}
+
+.wifi-group-checklist-empty {
+ padding: 12px 14px;
+ font-size: 12px;
+ color: var(--text-tertiary);
+}
+
+.wifi-group-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 12px;
+}
+
+.wifi-group-table thead {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}
+
+.wifi-group-th-check,
+.wifi-group-th-name {
+ padding: 6px 12px;
+ text-align: left;
+ font-weight: 600;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--text-secondary);
+ background: var(--bg-secondary);
+ border-bottom: 1px solid var(--border-default);
+}
+
+.wifi-group-th-check {
+ width: 36px;
+ padding-right: 0;
+}
+
+.wifi-group-row {
+ transition: background 0.1s;
+}
+
+.wifi-group-row:not(:last-child) td {
+ border-bottom: 1px solid
+ color-mix(in srgb, var(--border-default) 50%, transparent);
+}
+
+.wifi-group-row:hover {
+ background: color-mix(in srgb, var(--text-primary) 4%, transparent);
+}
+
+.wifi-group-row.checked {
+ background: color-mix(in srgb, var(--accent-color, #0066cc) 6%, transparent);
+}
+
+.wifi-group-row-disabled {
+ opacity: 0.4;
+}
+
+.wifi-group-row-disabled .wifi-group-td-check input {
+ cursor: not-allowed;
+}
+
+.wifi-group-td-check,
+.wifi-group-td-name {
+ padding: 8px 12px;
+ vertical-align: middle;
+}
+
+.wifi-group-td-check {
+ width: 36px;
+ padding-right: 0;
+}
+
+.wifi-group-td-check input[type="checkbox"] {
+ width: 15px;
+ height: 15px;
+ accent-color: var(--accent-color, #0066cc);
+ cursor: pointer;
+}
+
+.wifi-group-td-check input[type="checkbox"]:disabled {
+ cursor: default;
+}
+
+.wifi-group-td-name {
+ font-weight: 500;
+ color: var(--text-primary);
+}
+
+.wifi-group-td-name span {
+ display: block;
+}
+
+.wifi-group-ap-mac {
+ font-size: 10px;
+ font-weight: 400;
+ color: var(--text-tertiary);
+ font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+ margin-top: 1px;
+}
+
+.wifi-group-th-meta {
+ padding: 6px 12px;
+ text-align: left;
+ font-weight: 600;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--text-secondary);
+ background: var(--bg-secondary);
+ border-bottom: 1px solid var(--border-default);
+}
+
+.wifi-group-td-meta {
+ padding: 8px 12px;
+ vertical-align: middle;
+ font-size: 11px;
+ color: var(--text-secondary);
+}
+
+.wifi-group-td-meta.mono {
+ font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+ font-size: 11px;
+}
+
+/* ═══════════════════════════════════ */
+/* Radio Band Checkboxes */
+/* ═══════════════════════════════════ */
+.wifi-radio-band-checks {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.wifi-radio-check {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-primary);
+ cursor: pointer;
+}
+
+.wifi-radio-check input[type="checkbox"] {
+ width: 15px;
+ height: 15px;
+ accent-color: var(--accent-color, #0066cc);
+ cursor: pointer;
+}
+
+.wifi-radio-check.wifi-radio-disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.wifi-radio-check.wifi-radio-disabled input {
+ cursor: not-allowed;
+}
+
+.wifi-todo-badge {
+ font-size: 9px;
+ font-weight: 700;
+ color: #f59e0b;
+ background: color-mix(in srgb, #f59e0b 12%, transparent);
+ padding: 1px 5px;
+ border-radius: 3px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* PPSK Section */
+/* ═══════════════════════════════════ */
+.wifi-ppsk-section {
+ padding: 0 14px 10px;
+}
+
+.wifi-ppsk-loading,
+.wifi-ppsk-empty {
+ font-size: 12px;
+ color: var(--text-muted);
+ padding: 8px 0;
+}
+
+.wifi-ppsk-list {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ margin-bottom: 10px;
+}
+
+.wifi-ppsk-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 6px 10px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 6px;
+}
+
+.wifi-ppsk-info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ flex: 1;
+}
+
+.wifi-ppsk-name {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wifi-ppsk-vlan,
+.wifi-ppsk-mac {
+ font-size: 10px;
+ color: var(--text-muted);
+ background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+ padding: 1px 5px;
+ border-radius: 3px;
+ flex-shrink: 0;
+}
+
+.wifi-ppsk-add {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.wifi-ppsk-add .wifi-field-input {
+ flex: 1;
+ min-width: 120px;
+}
+
+/* ═══════════════════════════════════ */
+/* Sub-sections (for MAC, RADIUS etc) */
+/* ═══════════════════════════════════ */
+.wifi-sub-section {
+ padding: 0 14px 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.wifi-sub-section .wifi-field {
+ padding: 6px 0;
+}
+
+/* ═══════════════════════════════════ */
+/* MAC Address List */
+/* ═══════════════════════════════════ */
+.wifi-mac-add {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.wifi-mac-add .wifi-field-input {
+ flex: 1;
+}
+
+.wifi-mac-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.wifi-mac-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 3px 8px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 4px;
+ font-size: 11px;
+}
+
+.wifi-mac-remove {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--text-muted);
+ font-size: 14px;
+ line-height: 1;
+ padding: 0 2px;
+ transition: color 0.15s;
+}
+
+.wifi-mac-remove:hover {
+ color: var(--status-error, #ef4444);
+}
+
+/* ═══════════════════════════════════ */
+/* Speed Limit Row */
+/* ═══════════════════════════════════ */
+.wifi-speed-row {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+}
+
+.wifi-speed-row .wifi-field-select {
+ flex: 1;
+}
+
+/* ═══════════════════════════════════ */
+/* Inline Number + Unit */
+/* ═══════════════════════════════════ */
+.wifi-inline-number {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wifi-inline-number .wifi-field-input {
+ width: 100px;
+}
+
+.wifi-inline-unit {
+ font-size: 12px;
+ color: var(--text-muted);
+}
+
+/* ═══════════════════════════════════ */
+/* DTIM Inline Fields */
+/* ═══════════════════════════════════ */
+.wifi-dtim-inline {
+ display: flex;
+ gap: 12px;
+ align-items: flex-end;
+}
+
+.wifi-dtim-field {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ flex: 1;
+ min-width: 0;
+}
+
+.wifi-dtim-field span {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-muted);
+}
+
+.wifi-dtim-field .wifi-field-input {
+ width: 100%;
+}
+
+/* ═══════════════════════════════════ */
+/* Group Key Interval row */
+/* ═══════════════════════════════════ */
+.wifi-gki-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════ */
+/* Disabled Field */
+/* ═══════════════════════════════════ */
+.wifi-field-disabled {
+ opacity: 0.45;
+ pointer-events: none;
+}
+
+/* Greyed-out section (auto mode) */
+.wifi-section-disabled {
+ opacity: 0.4;
+ pointer-events: none;
+ filter: grayscale(30%);
+}
+
+.wifi-info-bubble {
+ cursor: help;
+ font-size: 12px;
+}
+
+/* ═══════════════════════════════════ */
+/* Modal Overlay */
+/* ═══════════════════════════════════ */
+.wifi-modal-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.4);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.wifi-modal {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-default);
+ border-radius: 12px;
+ padding: 20px;
+ width: 380px;
+ max-width: 90vw;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.wifi-modal-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin-bottom: 12px;
+}
+
+.wifi-modal-body {
+ font-size: 13px;
+ color: var(--text-secondary);
+ line-height: 1.5;
+ margin: 0 0 16px;
+}
+
+.wifi-modal-form {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.wifi-modal-field {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-primary);
+}
+
+.wifi-modal-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+}
+
+/* ═══════════════════════════════════ */
+/* Split-view scroll & sticky sidebar */
+/* ═══════════════════════════════════ */
+
+/* Hide extra columns when detail panel is open */
+.wifi-split-view.detail-open .wifi-col-vlan,
+.wifi-split-view.detail-open .wifi-col-aps,
+.wifi-split-view.detail-open .wifi-col-band,
+.wifi-split-view.detail-open .wifi-col-clients,
+.wifi-split-view.detail-open .wifi-col-security,
+.wifi-split-view.detail-open .wifi-table-head {
+ display: none;
+}
+
+.wifi-split-view.detail-open .wifi-table-tag {
+ display: none;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+ .wifi-split-view.detail-open .wifi-list-panel {
+ display: none;
+ }
+ .wifi-split-view.detail-open .wifi-detail-panel {
+ flex: 1;
+ border-left: none;
+ }
+ .wifi-split-view .wifi-list-panel {
+ flex: 1;
+ border-right: none;
+ }
+ .wifi-detail-grid {
+ grid-template-columns: 1fr;
+ }
+ .wifi-col-aps,
+ .wifi-col-clients {
+ display: none;
+ }
+}
+
+/* Networks */
+.unifi-networks-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.unifi-network-card {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 12px 14px;
+ background: var(--bg-base);
+ border: 1px solid var(--border-subtle);
+ border-radius: 8px;
+}
+
+.unifi-network-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.unifi-network-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.unifi-network-badges {
+ display: flex;
+ gap: 4px;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+}
+
+.unifi-network-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
selectUnifiSite(site)}
+ on:keydown={(e) => e.key === "Enter" && selectUnifiSite(site)}
+ role="button"
+ tabindex="0"
+ >
+
+ {/each}
+
+
+
+ {site.name}{site.siteId}
+
+ {#if siteOverviews[site.id]}
+ {@const health = getCardHealthStatus(site.id)}
+
+
+ {health === "ok"
+ ? "Healthy"
+ : health === "warn"
+ ? "Warning"
+ : health === "error"
+ ? "Error"
+ : "Unknown"}
+
+ {:else}
+
+ {/if}
+
+ {#if siteOverviews[site.id]}
+
+
+ {getCardDeviceCount(site.id)}Devices
+
+
+ {getCardGatewayCount(site.id)}Gateways
+
+
+ {siteOverviews[site.id]?.health?.length ?? 0}Subsystems
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+