web_plsql 0.18.0 → 1.2.0

package/src/admin/js/ui/views.ts

@@ -0,0 +1,427 @@
+import {typedApi} from '../api.js';
+import {formatDuration, formatDateTime, formatMs} from '../util/format.js';
+import {poolCard} from '../templates/index.js';
+import {renderConfig} from '../templates/config.js';
+import type {State, ServerConfig, SystemMetrics, ErrorLogResponse, TraceEntry} from '../types.js';
+import {DataTable, type TableColumn} from './table.js';
+
+/**
+ * Refresh the error logs view.
+ */
+export async function refreshErrors(): Promise<void> {
+	const filterInput = document.getElementById('error-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('error-limit') as HTMLInputElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	const logs = await typedApi.getErrorLogs(limit, filter);
+
+	const columns: TableColumn<ErrorLogResponse>[] = [
+		{
+			id: 'timestamp',
+			header: 'Timestamp',
+			headerTitle: 'When the error occurred',
+			accessor: (l) => new Date(l.timestamp).toLocaleString(),
+			cellTitle: (l) => new Date(l.timestamp).toLocaleString(),
+		},
+		{
+			id: 'method',
+			header: 'Method',
+			headerTitle: 'HTTP method used',
+			render: (l) => `<code>${l.req?.method ?? '-'}</code>`,
+			cellTitle: (l) => `Method: ${l.req?.method ?? '-'}`,
+		},
+		{
+			id: 'url',
+			header: 'URL',
+			headerTitle: 'Requested URL',
+			accessor: (l) => l.req?.url ?? '-',
+			cellTitle: (l) => `URL: ${l.req?.url ?? '-'}`,
+		},
+		{
+			id: 'message',
+			header: 'Message',
+			headerTitle: 'Error message summary',
+			accessor: (l) => l.message,
+			className: 'break-all',
+			cellTitle: (l) => `Click for details: ${l.details?.fullMessage ?? ''}`,
+		},
+		{
+			id: 'action',
+			header: '',
+			width: '40px',
+			align: 'center',
+			render: () => '<span class="material-symbols-rounded">chevron_right</span>',
+			className: 'text-center text-accent opacity-70',
+		},
+	];
+
+	const table = new DataTable<ErrorLogResponse>('errors-table', {
+		columns,
+		dense: true,
+		onRowClick: (log) => {
+			const modal = document.getElementById('error-modal');
+			const content = document.getElementById('error-detail-content');
+			if (modal && content) {
+				content.textContent = JSON.stringify(log, null, 2);
+				modal.style.display = 'flex';
+			}
+		},
+	});
+
+	table.render(logs);
+
+	// Add class to rows for styling (legacy support if needed, or handled by table component)
+	const tbody = document.querySelector('#errors-table tbody');
+	if (tbody) {
+		tbody.querySelectorAll('tr').forEach((row) => {
+			row.classList.add('errors-table-row');
+		});
+	}
+}
+
+/**
+ * Refresh the statistical history view.
+ *
+ * @param status - The status data.
+ */
+export function refreshStats(status: Partial<State['status']>): void {
+	const tbody = document.querySelector('#stats-table tbody');
+	const limitSelect = document.getElementById('stats-row-limit') as HTMLSelectElement | null;
+	const infoEl = document.getElementById('stats-history-info');
+	if (!tbody || !status.history) return;
+
+	const limit = limitSelect ? parseInt(limitSelect.value) : 50;
+	const history = [...status.history].reverse();
+	const displayed = limit > 0 ? history.slice(0, limit) : history;
+
+	if (infoEl) {
+		infoEl.textContent = `Showing latest ${displayed.length} of ${history.length} data points`;
+	}
+
+	tbody.innerHTML = displayed
+		.map((b) => {
+			const time = new Date(b.timestamp).toLocaleTimeString();
+			const rss = (b.system.rss / 1024 / 1024).toFixed(1);
+			const heap = (b.system.heapUsed / 1024 / 1024).toFixed(1);
+
+			return `
+			<tr>
+				<td class="font-mono text-xs">${time}</td>
+				<td class="text-center font-bold text-bright">${b.requests}</td>
+				<td class="text-center font-bold ${b.errors > 0 ? 'text-danger' : 'text-success'}">${b.errors}</td>
+				<td class="text-right font-mono">${b.durationMin.toFixed(1)}</td>
+				<td class="text-right font-mono text-accent font-bold">${b.durationAvg.toFixed(1)}</td>
+				<td class="text-right font-mono text-warning">${b.durationP95.toFixed(1)}</td>
+				<td class="text-right font-mono text-danger">${b.durationP99.toFixed(1)}</td>
+				<td class="text-right font-mono">${b.durationMax.toFixed(1)}</td>
+				<td class="text-right font-mono">${b.system.cpu.toFixed(1)}%</td>
+				<td class="text-right font-mono">${rss}</td>
+				<td class="text-right font-mono">${heap}</td>
+			</tr>
+		`;
+		})
+		.join('');
+}
+
+/**
+ * Refresh the access logs view.
+ */
+export async function refreshAccess(): Promise<void> {
+	const filterInput = document.getElementById('access-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('access-limit') as HTMLInputElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	const result = await typedApi.getAccessLogs(limit, filter);
+	const el = document.getElementById('access-log-view');
+	const rangeEl = document.getElementById('access-log-range');
+	if (!el) return;
+
+	let logCount = 0;
+	if (Array.isArray(result)) {
+		el.textContent = result.join('\n');
+		logCount = result.length;
+	} else if (result && typeof result === 'object' && 'message' in result) {
+		el.textContent = result.message;
+		logCount = 0;
+	} else {
+		el.textContent = 'No logs available';
+		logCount = 0;
+	}
+
+	if (rangeEl) {
+		rangeEl.textContent = logCount > 0 ? `Showing last ${logCount} log entries` : 'No logs available';
+	}
+
+	if (el.parentElement) {
+		el.parentElement.scrollTop = el.parentElement.scrollHeight;
+	}
+}
+
+/**
+ * Refresh the trace logs view.
+ */
+export async function refreshTrace(): Promise<void> {
+	const filterInput = document.getElementById('trace-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('trace-limit') as HTMLInputElement | null;
+	const statusToggle = document.getElementById('trace-status-toggle') as HTMLButtonElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	// Update status toggle
+	try {
+		const {enabled} = await typedApi.getTraceStatus();
+		if (statusToggle) {
+			statusToggle.textContent = enabled ? 'Tracing: ON' : 'Tracing: OFF';
+			statusToggle.dataset.enabled = String(enabled);
+			statusToggle.className = `px-4 py-2 rounded-lg text-sm font-bold transition-colors ${
+				enabled ? 'bg-success text-black hover:bg-success/80' : 'bg-white/10 text-white hover:bg-white/20'
+			}`;
+		}
+	} catch (err) {
+		console.error('Failed to get trace status', err);
+	}
+
+	const logs = await typedApi.getTraceLogs(limit, filter);
+
+	const columns: TableColumn<TraceEntry>[] = [
+		{
+			id: 'timestamp',
+			header: 'Timestamp',
+			headerTitle: 'Time of request',
+			accessor: (l) => new Date(l.timestamp).toLocaleString(),
+			className: 'font-mono text-xs text-dim',
+		},
+		{
+			id: 'source',
+			header: 'Source',
+			headerTitle: 'Request source (IP/User)',
+			accessor: (l) => l.source,
+			className: 'text-dim text-xs truncate max-w-[150px]',
+			cellTitle: (l) => l.source,
+		},
+		{
+			id: 'method',
+			header: 'Method',
+			headerTitle: 'HTTP Method',
+			accessor: (l) => l.method,
+			className: 'font-mono text-xs',
+		},
+		{
+			id: 'url',
+			header: 'Request URL',
+			headerTitle: 'Request URL',
+			accessor: (l) => l.url,
+			className: 'text-bright font-mono text-xs truncate max-w-[300px]',
+			cellTitle: (l) => l.url,
+		},
+		{
+			id: 'status',
+			header: 'Status',
+			headerTitle: 'HTTP Status Code',
+			width: '80px',
+			accessor: (l) => l.status,
+			className: (l) => `font-bold text-xs uppercase ${l.status === 'success' ? 'text-success' : 'text-danger'}`,
+		},
+		{
+			id: 'duration',
+			header: 'Duration',
+			headerTitle: 'Execution time in ms',
+			align: 'right',
+			accessor: (l) => formatMs(l.duration),
+			className: 'font-mono text-xs text-dim',
+		},
+		{
+			id: 'procedure',
+			header: 'Procedure',
+			headerTitle: 'Executed PL/SQL procedure',
+			accessor: (l) => l.procedure ?? '-',
+			className: 'text-dim text-xs truncate max-w-[200px]',
+			cellTitle: (l) => l.procedure ?? '',
+		},
+	];
+
+	const table = new DataTable<TraceEntry>('trace-table', {
+		columns,
+		dense: true,
+		onRowClick: (log) => {
+			const modal = document.getElementById('trace-modal');
+			const content = document.getElementById('trace-detail-content');
+			if (modal && content) {
+				content.textContent = JSON.stringify(log, null, 2);
+				modal.style.display = 'flex';
+			}
+		},
+	});
+
+	table.render(logs);
+}
+
+/**
+ * Refresh the pools view.
+ *
+ * @param status - The status data.
+ */
+export function refreshPools(status: Partial<State['status']>): void {
+	const poolsCont = document.getElementById('pools-container');
+	if (!poolsCont || !status.pools) return;
+
+	poolsCont.innerHTML = status.pools.map((p) => poolCard(p)).join('');
+}
+
+/**
+ * Refresh the config view.
+ *
+ * @param state - The application state.
+ */
+export function refreshConfig(state: State): void {
+	const config = state.status.config;
+	if (!config) return;
+
+	const cont = document.getElementById('config-view');
+	if (!cont) return;
+
+	// Use type assertion to bypass exactOptionalPropertyTypes check if needed
+	cont.innerHTML = renderConfig(config as Partial<ServerConfig>);
+}
+
+/**
+ * Format bytes to human readable format.
+ *
+ * @param bytes - The number of bytes.
+ * @returns Formatted string.
+ */
+function formatBytes(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+/**
+ * Format microseconds to a human-readable duration.
+ *
+ * @param microseconds - CPU time in microseconds.
+ * @returns Formatted string.
+ */
+function formatCpuTime(microseconds: number): string {
+	return formatMs(microseconds / 1000);
+}
+
+/**
+ * Refresh the system info view.
+ *
+ * @param status - The status data.
+ * @param _state - The application state.
+ */
+export function refreshSystem(status: Partial<State['status']>, _state?: State): void {
+	const middlewareVersion = document.getElementById('middleware-version');
+	if (middlewareVersion && status.version) {
+		middlewareVersion.textContent = `${status.version} (${__BUILD_TIME__})`;
+		middlewareVersion.title = 'The version of the web_plsql gateway and admin console build time';
+	}
+
+	const nodeVersion = document.getElementById('node-version');
+	if (nodeVersion && status.system) {
+		nodeVersion.textContent = status.system.nodeVersion;
+		nodeVersion.title = 'The version of the Node.js runtime';
+	}
+
+	const platform = document.getElementById('platform-info');
+	if (platform && status.system) {
+		platform.textContent = `${status.system.platform} (${status.system.arch})`;
+		platform.title = 'The operating system and architecture';
+	}
+
+	const systemUptime = document.getElementById('system-uptime');
+	if (systemUptime && status.uptime) systemUptime.textContent = formatDuration(status.uptime);
+
+	const systemStartTime = document.getElementById('system-start-time');
+	if (systemStartTime && status.startTime) systemStartTime.textContent = formatDateTime(status.startTime);
+
+	const systemStatusText = document.getElementById('system-status-text');
+	if (systemStatusText) systemStatusText.textContent = status.status?.toUpperCase() ?? '-';
+
+	const totalRequests = document.getElementById('total-requests');
+	if (totalRequests && status.metrics) {
+		totalRequests.textContent = status.metrics.requestCount.toLocaleString();
+		totalRequests.title = 'Cumulative number of requests handled by the server';
+	}
+
+	const totalErrors = document.getElementById('total-errors');
+	if (totalErrors && status.metrics) {
+		totalErrors.textContent = status.metrics.errorCount.toLocaleString();
+		totalErrors.title = 'Cumulative number of failed requests';
+	}
+
+	const activePools = document.getElementById('active-pools');
+	if (activePools && status.pools) {
+		activePools.textContent = status.pools.length.toString();
+		activePools.title = 'Number of database connection pools currently active';
+	}
+
+	// Memory and CPU usage with Server-provided Min/Max
+	if (status.system) {
+		const system = status.system;
+		const metrics = {
+			heapUsed: system.memory.heapUsed,
+			heapTotal: system.memory.heapTotal,
+			rss: system.memory.rss,
+			external: system.memory.external,
+			cpuUser: system.cpu.user,
+			cpuSystem: system.cpu.system,
+		};
+
+		const updateMem = (id: string, key: keyof SystemMetrics, maxKey: keyof typeof system.memory) => {
+			const val = metrics[key];
+			const max = system.memory[maxKey];
+			const el = document.getElementById(id);
+			const maxEl = document.getElementById(`${id}-max`);
+			if (el) el.textContent = formatBytes(val);
+			if (maxEl && typeof max === 'number') maxEl.textContent = formatBytes(max);
+		};
+
+		const updateCpu = (id: string, key: keyof SystemMetrics, maxKey?: 'userMax' | 'systemMax') => {
+			const val = metrics[key];
+			const el = document.getElementById(id);
+			if (el) el.textContent = formatCpuTime(val);
+
+			if (maxKey) {
+				const max = system.cpu[maxKey];
+				const maxEl = document.getElementById(`${id}-max`);
+				if (maxEl && typeof max === 'number') maxEl.textContent = formatCpuTime(max);
+			}
+		};
+
+		updateMem('memory-heap-used', 'heapUsed', 'heapUsedMax');
+		updateMem('memory-heap-total', 'heapTotal', 'heapTotalMax');
+		updateMem('memory-rss', 'rss', 'rssMax');
+		updateMem('memory-external', 'external', 'externalMax');
+		updateCpu('cpu-user', 'cpuUser', 'userMax');
+		updateCpu('cpu-system', 'cpuSystem', 'systemMax');
+
+		const cpuPercentEl = document.getElementById('cpu-percent');
+		if (cpuPercentEl && system.cpu.max !== undefined) {
+			const totalPercent = system.cpu.max;
+			cpuPercentEl.textContent = `${totalPercent.toFixed(1)}%`;
+			cpuPercentEl.title = `Max System CPU usage`;
+		}
+
+		const memoryPercentEl = document.getElementById('memory-percent');
+		if (memoryPercentEl && system.memory.totalMemory) {
+			const pct = (system.memory.rss / system.memory.totalMemory) * 100;
+			memoryPercentEl.textContent = `${pct.toFixed(1)}%`;
+			memoryPercentEl.title = `System Memory Used relative to Total (${formatBytes(system.memory.totalMemory)})`;
+		}
+
+		const cpuCoresInfo = document.getElementById('cpu-cores-info');
+		if (cpuCoresInfo && system.cpuCores) {
+			cpuCoresInfo.textContent = `${system.cpuCores} Cores`;
+		}
+	}
+}

package/src/admin/js/util/format.ts

@@ -0,0 +1,46 @@
+/**
+ * Format a duration in seconds to a human-readable string.
+ * @param seconds - Duration in seconds.
+ * @returns Formatted duration string (e.g., "2d 3h 45m 30s").
+ */
+export function formatDuration(seconds: number): string {
+	if (seconds < 1) return formatMs(seconds * 1000);
+
+	const d = Math.floor(seconds / (3600 * 24));
+	const h = Math.floor((seconds % (3600 * 24)) / 3600);
+	const m = Math.floor((seconds % 3600) / 60);
+	const s = Math.floor(seconds % 60);
+	const parts: string[] = [];
+	if (d > 0) parts.push(`${d}d`);
+	if (h > 0) parts.push(`${h}h`);
+	if (m > 0) parts.push(`${m}m`);
+	if (s > 0 || parts.length === 0) parts.push(`${s}s`);
+	return parts.join(' ');
+}
+
+/**
+ * Format milliseconds to a human-readable string.
+ * @param ms - Duration in milliseconds.
+ * @returns Formatted string (e.g., "1.23 ms" or "450 μs").
+ */
+export function formatMs(ms: number): string {
+	if (ms === 0) return '0 ms';
+	if (ms < 1) {
+		const us = ms * 1000;
+		return `${us.toFixed(0)} μs`;
+	}
+	if (ms < 1000) {
+		return `${ms.toFixed(2)} ms`;
+	}
+	return formatDuration(ms / 1000);
+}
+
+/**
+ * Format an ISO date string to a localized date time string.
+ * @param isoDate - ISO date string.
+ * @returns Formatted date time string or "-" if invalid.
+ */
+export function formatDateTime(isoDate: string): string {
+	if (!isoDate) return '-';
+	return new Date(isoDate).toLocaleString();
+}

package/src/admin/js/util/metrics.ts

@@ -0,0 +1,24 @@
+import type {SystemMetrics} from '../types.js';
+
+/**
+ * Update the minimum and maximum metrics based on the current metrics.
+ *
+ * @param current - The current system metrics.
+ * @param min - The object storing minimum values.
+ * @param max - The object storing maximum values.
+ */
+export function updateMinMaxMetrics(current: SystemMetrics, min: Partial<SystemMetrics>, max: Partial<SystemMetrics>): void {
+	const keys = Object.keys(current) as (keyof SystemMetrics)[];
+	keys.forEach((key) => {
+		const val = current[key];
+		const currentMin = min[key];
+		const currentMax = max[key];
+
+		if (currentMin === undefined || val < currentMin) {
+			min[key] = val;
+		}
+		if (currentMax === undefined || val > currentMax) {
+			max[key] = val;
+		}
+	});
+}

package/src/admin/lib/chart.bundle.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-medium:500;--font-weight-bold:700;--tracking-wider:.05em;--radius-lg:.5rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.w-full{width:100%}.max-w-\[150px\]{max-width:150px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-baseline{align-items:baseline}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.border-white\/5{border-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.bg-success{background-color:var(--color-success)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.pt-4{padding-top:calc(var(--spacing)*4)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.text-black{color:var(--color-black)}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.opacity-30{opacity:.3}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media(hover:hover){.hover\:bg-success\/80:hover{background-color:#10b981cc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-success\/80:hover{background-color:color-mix(in oklab,var(--color-success)80%,transparent)}}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}}@media(min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}body{-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body.dark{--bg-main:#0f172a;--bg-side:#1e293b;--bg-card:#1e293b;--bg-hover:#334155;--text-main:#94a3b8;--text-bright:#f8fafc;--border:#334155}body:not(.dark){--bg-main:#f8fafc;--bg-side:#fff;--bg-card:#fff;--bg-hover:#f1f5f9;--text-main:#475569;--text-bright:#0f172a;--border:#e2e8f0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}