{t('admin.resetDialogTitle')}
-
{t('admin.resetDialogDescription')}
+
{credentialModal.description}
diff --git a/webui/src/pages/AuditLogs/index.tsx b/webui/src/pages/AuditLogs/index.tsx
new file mode 100644
index 000000000..7fe0e0436
--- /dev/null
+++ b/webui/src/pages/AuditLogs/index.tsx
@@ -0,0 +1,569 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Download, Loader2, ShieldCheck } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import PageHeader from '@/components/common/PageHeader';
+import { useAuth } from '@/contexts/AuthContext';
+import { flocksproAuditApi, type AuditEventItem } from '@/api/flocksproAudit';
+import { flocksproUsersApi } from '@/api/flocksproUsers';
+
+const PAGE_SIZE = 20;
+const EXPORT_PAGE_SIZE = 500;
+
+interface AuditFilters {
+ eventType: string;
+ actorId: string;
+ result: string;
+ startAt: string;
+ endAt: string;
+}
+
+const EMPTY_FILTERS: AuditFilters = {
+ eventType: '',
+ actorId: '',
+ result: '',
+ startAt: '',
+ endAt: '',
+};
+
+function toLocalTimestampOrEmpty(value: string): string | undefined {
+ if (!value) return undefined;
+ return value.length === 16 ? `${value}:00` : value;
+}
+
+function formatLocalTime(value: string): string {
+ if (!value) return '-';
+ const normalized = value.includes('T') ? value : value.replace(' ', 'T');
+ const hasTimezone = /(?:Z|[+-]\d{2}:?\d{2})$/.test(normalized);
+ const parsed = new Date(hasTimezone ? normalized : `${normalized}Z`);
+ if (Number.isNaN(parsed.getTime())) return value;
+ const year = parsed.getFullYear();
+ const month = String(parsed.getMonth() + 1).padStart(2, '0');
+ const day = String(parsed.getDate()).padStart(2, '0');
+ const hour = String(parsed.getHours()).padStart(2, '0');
+ const minute = String(parsed.getMinutes()).padStart(2, '0');
+ const second = String(parsed.getSeconds()).padStart(2, '0');
+ return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
+}
+
+function payloadPreview(item: AuditEventItem): string {
+ const data = item.payload ?? item.metadata ?? {};
+ const serialized = JSON.stringify(data, null, 2);
+ if (!serialized || serialized === '{}') return '-';
+ return serialized.length > 260 ? `${serialized.slice(0, 257)}...` : serialized;
+}
+
+function payloadFullText(item: AuditEventItem): string {
+ const data = item.payload ?? item.metadata ?? {};
+ const serialized = JSON.stringify(data, null, 2);
+ return !serialized || serialized === '{}' ? '-' : serialized;
+}
+
+function escapeHtml(value: string): string {
+ return value
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function exportFilename(): string {
+ const stamp = new Date()
+ .toLocaleString('sv-SE', { hour12: false })
+ .replace(/[^\d]/g, '')
+ .slice(0, 14);
+ return `audit_logs_${stamp}.xls`;
+}
+
+function parseAuditTime(value: string): number {
+ if (!value) return 0;
+ const valueTrimmed = value.trim();
+ const mmdd = valueTrimmed.match(
+ /^(\d{2})\/(\d{2})\/(\d{4})(?:,\s*|\s+)(\d{2}):(\d{2}):(\d{2})$/,
+ );
+ if (mmdd) {
+ const [, month, day, year, hour, minute, second] = mmdd;
+ return new Date(
+ Number(year),
+ Number(month) - 1,
+ Number(day),
+ Number(hour),
+ Number(minute),
+ Number(second),
+ ).getTime();
+ }
+ const ymd = valueTrimmed.match(
+ /^(\d{4})\/(\d{2})\/(\d{2})(?:,\s*|\s+)(\d{2}):(\d{2}):(\d{2})$/,
+ );
+ if (ymd) {
+ const [, year, month, day, hour, minute, second] = ymd;
+ return new Date(
+ Number(year),
+ Number(month) - 1,
+ Number(day),
+ Number(hour),
+ Number(minute),
+ Number(second),
+ ).getTime();
+ }
+ const normalized = valueTrimmed.includes('T') ? valueTrimmed : valueTrimmed.replace(' ', 'T');
+ const hasTimezone = /(?:Z|[+-]\d{2}:?\d{2})$/.test(normalized);
+ const parsed = new Date(hasTimezone ? normalized : `${normalized}Z`);
+ return Number.isNaN(parsed.getTime()) ? 0 : parsed.getTime();
+}
+
+function sortByCreatedAtDesc(items: AuditEventItem[]): AuditEventItem[] {
+ return [...items].sort((a, b) => {
+ const delta = parseAuditTime(b.created_at) - parseAuditTime(a.created_at);
+ if (delta !== 0) return delta;
+ return (b.id ?? 0) - (a.id ?? 0);
+ });
+}
+
+function stringFromPayload(item: AuditEventItem, keys: string[]): string | undefined {
+ const data = item.payload ?? item.metadata ?? {};
+ for (const key of keys) {
+ const value = data[key];
+ if (typeof value === 'string' && value.trim()) {
+ return value;
+ }
+ }
+ return undefined;
+}
+
+function actorLabel(item: AuditEventItem): string {
+ return (
+ item.user_name
+ || item.actor_name
+ || stringFromPayload(item, ['user_name', 'username', 'actor_name', 'actor_id'])
+ || item.user_id
+ || item.actor_id
+ || '-'
+ );
+}
+
+function buildAuditQuery(filters: AuditFilters) {
+ return {
+ event_type: filters.eventType || undefined,
+ username: filters.actorId || undefined,
+ result: filters.result || undefined,
+ start_at: toLocalTimestampOrEmpty(filters.startAt),
+ end_at: toLocalTimestampOrEmpty(filters.endAt),
+ sort_by: 'created_at',
+ order: 'desc' as const,
+ };
+}
+
+export default function AuditLogsPage() {
+ const { t } = useTranslation('flockspro');
+ const { user } = useAuth();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState
(null);
+ const [items, setItems] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [offset, setOffset] = useState(0);
+ const [eventType, setEventType] = useState('');
+ const [actorId, setActorId] = useState('');
+ const [result, setResult] = useState('');
+ const [startAt, setStartAt] = useState('');
+ const [endAt, setEndAt] = useState('');
+ const [expandedRowId, setExpandedRowId] = useState(null);
+ const [exporting, setExporting] = useState(false);
+ const [eventTypeOptions, setEventTypeOptions] = useState([]);
+ const [checkingCapability, setCheckingCapability] = useState(true);
+ const [hasFlocksproCapability, setHasFlocksproCapability] = useState(false);
+
+ const page = useMemo(() => Math.floor(offset / PAGE_SIZE) + 1, [offset]);
+ const pageCount = useMemo(() => Math.max(1, Math.ceil(total / PAGE_SIZE)), [total]);
+ const currentFilters: AuditFilters = {
+ eventType,
+ actorId,
+ result,
+ startAt,
+ endAt,
+ };
+ const load = async (nextOffset: number, filters: AuditFilters = currentFilters) => {
+ setLoading(true);
+ setError(null);
+ try {
+ const query = buildAuditQuery(filters);
+ const response = await flocksproAuditApi.listEvents({
+ ...query,
+ limit: PAGE_SIZE,
+ offset: nextOffset,
+ });
+ setItems(sortByCreatedAtDesc(response.items));
+ setTotal(response.total ?? response.count ?? response.items.length);
+ setOffset(nextOffset);
+ } catch (err: any) {
+ const code = err?.response?.status;
+ if (code === 403) {
+ setError(t('audit.errors.forbidden'));
+ } else {
+ setError(err?.response?.data?.message || err?.message || t('audit.errors.fetch'));
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const exportToExcel = async () => {
+ setExporting(true);
+ setError(null);
+ try {
+ const query = buildAuditQuery(currentFilters);
+ const allItems: AuditEventItem[] = [];
+ let nextOffset = 0;
+ let expectedTotal: number | null = null;
+ while (expectedTotal === null || allItems.length < expectedTotal) {
+ const response = await flocksproAuditApi.listEvents({
+ ...query,
+ limit: EXPORT_PAGE_SIZE,
+ offset: nextOffset,
+ });
+ allItems.push(...response.items);
+ expectedTotal = response.total ?? response.count ?? allItems.length;
+ if (response.items.length === 0 || response.items.length < EXPORT_PAGE_SIZE) break;
+ nextOffset += response.items.length;
+ }
+ const sortedItems = sortByCreatedAtDesc(allItems);
+
+ const headers = [
+ t('audit.table.time'),
+ t('audit.table.eventType'),
+ t('audit.table.actor'),
+ t('audit.table.resource'),
+ t('audit.table.result'),
+ t('audit.table.payload'),
+ ];
+ const rows = sortedItems.map((item) => {
+ const resource = item.resource_type ? `${item.resource_type}:${item.resource_id || '-'}` : '-';
+ return [
+ formatLocalTime(item.created_at),
+ item.event_type,
+ actorLabel(item),
+ resource,
+ item.result || item.status || '-',
+ payloadFullText(item),
+ ];
+ });
+ const html = `
+
+
+
+
+
+
+
+ ${headers.map((header) => `| ${escapeHtml(header)} | `).join('')}
+
+ ${rows.map((row) => `${row.map((cell) => `${escapeHtml(String(cell)).replace(/\n/g, '
')} | `).join('')}
`).join('')}
+
+
+
+`;
+ const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = exportFilename();
+ document.body.appendChild(link);
+ link.click();
+ link.remove();
+ URL.revokeObjectURL(url);
+ } catch (err: any) {
+ setError(err?.response?.data?.message || err?.message || t('audit.errors.export'));
+ } finally {
+ setExporting(false);
+ }
+ };
+
+ useEffect(() => {
+ let cancelled = false;
+ setItems([]);
+ setTotal(0);
+ setOffset(0);
+ setEventTypeOptions([]);
+ setHasFlocksproCapability(false);
+ if (user?.role !== 'admin') {
+ setCheckingCapability(false);
+ return () => {
+ cancelled = true;
+ };
+ }
+
+ setCheckingCapability(true);
+ void flocksproUsersApi.hasCapability()
+ .then((ok) => {
+ if (cancelled) return;
+ setHasFlocksproCapability(ok);
+ if (!ok) {
+ setError(t('audit.errors.unavailable'));
+ }
+ })
+ .catch(() => {
+ if (cancelled) return;
+ setHasFlocksproCapability(false);
+ setError(t('audit.errors.unavailable'));
+ })
+ .finally(() => {
+ if (!cancelled) {
+ setCheckingCapability(false);
+ }
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [t, user?.role]);
+
+ useEffect(() => {
+ if (!hasFlocksproCapability) return;
+ void load(0);
+ }, [hasFlocksproCapability]);
+
+ useEffect(() => {
+ if (!hasFlocksproCapability) return;
+ let cancelled = false;
+ void flocksproAuditApi.listEventTypes()
+ .then((types) => {
+ if (!cancelled) {
+ setEventTypeOptions(types);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setEventTypeOptions([]);
+ }
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [hasFlocksproCapability]);
+
+ if (user?.role !== 'admin') {
+ return (
+
+
{t('audit.errors.forbidden')}
+
+
{t('audit.errors.unavailable')}
+
+
}
+ />
+
+
+
+
+ setActorId(e.target.value)}
+ placeholder={t('audit.filters.actor')}
+ className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+ />
+
+ setStartAt(e.target.value)}
+ className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+ />
+ setEndAt(e.target.value)}
+ className="rounded-lg border border-gray-300 px-3 py-2 text-sm"
+ />
+
+
+
+
+
+
+
+ {t('audit.total', { total })}
+
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | {t('audit.table.time')} |
+ {t('audit.table.eventType')} |
+ {t('audit.table.actor')} |
+ {t('audit.table.resource')} |
+ {t('audit.table.result')} |
+ {t('audit.table.payload')} |
+
+
+
+ {items.length === 0 && (
+
+ |
+ {loading ? t('audit.loading') : t('audit.empty')}
+ |
+
+ )}
+ {items.map((item) => {
+ const expanded = expandedRowId === item.id;
+ const actor = actorLabel(item);
+ const resource = item.resource_type ? `${item.resource_type}:${item.resource_id || '-'}` : '-';
+ const payload = payloadPreview(item);
+
+ return (
+ setExpandedRowId(expanded ? null : item.id)}
+ className="border-b border-gray-100 align-top cursor-pointer hover:bg-slate-50"
+ >
+ | {formatLocalTime(item.created_at)} |
+
+ {item.event_type}
+ |
+
+ {actor}
+ |
+
+ {resource}
+ |
+ {item.result || item.status} |
+
+ {payload}
+ |
+
+ );
+ })}
+
+
+
+
+
+
{t('audit.page', { page, pageCount })}
+
+
+
+
+
+
+
+
{t('callback.failedTitle')}
+
{error}
+
+
+
+ {t('callback.processing')}
+
+
+
}
+ />
+
+
+
{t('consoleLogin.title')}
+
+
+
+ {t('consoleLogin.accountLabel')}
+
+ {consoleLoginLoading
+ ? t('consoleLogin.loading')
+ : consoleLoginStatus?.logged_in
+ ? consoleAccountName
+ : t('consoleLogin.unbound')}
+
+
+ {consoleLoginStatus?.logged_in ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {consoleLoginError && (
+
+ {consoleLoginError}
+
+ )}
+ {consoleLoginSuccess && (
+
+ {consoleLoginSuccess}
+
+ )}
+
+
+
+
+
+
+ {isProLoaded ? t('upgrade.installedTitle', { version: proVersion }) : t('upgrade.title')}
+
+
+ {isProLoaded ? t('upgrade.installedDescription') : t('upgrade.description')}
+
+
+ {isProLoaded ? (
+
+
+ {!showCurrentLicenseCard && (
+
+ )}
+
+ ) : (
+
+ )}
+
+
+ {!canApplyUpgrade && (
+
+ {t('upgrade.loginFirst')}
+
+ )}
+ {requestError && (
+
+ {requestError}
+
+ )}
+
+ {showActiveRequestCard && activeRequest ? (
+
+
+
{t('upgrade.currentRequest')}
+
+
{activeRequest.request_id}
+ {showRejectedFeedback && (
+
+ )}
+
+
+
+
{t('upgrade.status')}
+
+ {t(`upgrade.statusLabels.${activeRequest.status}`, { defaultValue: activeRequest.status })}
+
+
+
+
{t('upgrade.updatedAt')}
+
{formatDateTime(activeRequest.updated_at)}
+
+ {showRejectedFeedback && (
+
+
{t('upgrade.rejectedTitle')}
+ {activeRequest.reason &&
{activeRequest.reason}
}
+ {activeRequest.suggestion &&
{activeRequest.suggestion}
}
+
+ )}
+ {!showRejectedFeedback && activeRequest.suggestion && (
+
+ {activeRequest.suggestion}
+
+ )}
+
+
+ {canCancel && (
+
+ )}
+ {showApprovedActions && (
+
+ )}
+
+ {showApprovedActions && (
+
+ {t('upgrade.afterUpgradeHint')}
+
+ )}
+
+ ) : !isProLoaded && !showCurrentLicenseCard ? (
+
+ {t('upgrade.noRequest')}
+
+ ) : (
+ null
+ )}
+
+ {showCurrentLicenseCard && (
+
+ {currentLicenseInvalid && (
+
+ {t('upgrade.revokedOrExpiredHint')}
+
+ )}
+
+
+
+ {proVersion}
+
+ {t(`upgrade.licenseStatusLabels.${displayedLicenseStatus}`, { defaultValue: displayedLicenseStatus })}
+
+
+
+ {t('upgrade.licenseId')}: {compactIdentifier(currentDisplayLicenseId)}
+
+
+
+
+
+
+
{t('upgrade.remainingDays')}
+
+ {remainingDays === null ? '-' : t('upgrade.remainingDaysValue', { count: remainingDays })}
+
+
+
+
{t('upgrade.quota')}
+
{licenseQuotaText}
+
+
+
{t('upgrade.expiresAt')}
+
{formatDateTimeValue(displayedExpiresAt)}
+
+
+
{t('upgrade.lastSyncedAt')}
+
+ {formatDateTimeValue(displayedLastSyncedAt)}
+
+
+
+ {licenseDetailRows.length > 0 && (
+
+
+ {showLicenseDetails && (
+
+ {licenseDetailRows.map((item) => (
+
+
{item.label}
+
{item.value}
+
+ ))}
+
+ )}
+
+ )}
+
+ )}
+
+ {historyRequests.length > 0 && (
+
+
+ {t('upgrade.licenseHistory')}
+
+
+
+
+
+ {[
+ t('upgrade.historyColumns.licenseId'),
+ t('upgrade.historyColumns.licenseType'),
+ t('upgrade.historyColumns.status'),
+ t('upgrade.historyColumns.appliedAt'),
+ t('upgrade.historyColumns.expiresAt'),
+ t('upgrade.historyColumns.durationDays'),
+ t('upgrade.historyColumns.account'),
+ ].map((header) => (
+ |
+ {header}
+ |
+ ))}
+
+
+
+ {historyRequests.map((item) => {
+ const expiresAt = requestExpiresAt(item);
+ const duration = requestDurationDays(item);
+ const account = requestAccountKey(item) || '-';
+ const itemLicenseId = requestLicenseId(item);
+ const historyLicenseType =
+ normalizeLicenseType(item.details?.license_type) ||
+ normalizeLicenseType(item.license_status) ||
+ normalizeLicenseType(item.details?.license_status);
+ const rawLicenseStatus = item.license_status || item.details?.license_status || '';
+ const licenseStatusIsType = Boolean(normalizeLicenseType(rawLicenseStatus));
+ const historyStatus = itemLicenseId === invalidRuntimeLicenseId
+ ? 'revoked'
+ : licenseStatusIsType
+ ? item.status
+ : rawLicenseStatus || item.status;
+ const historyStatusLabelGroup =
+ isInactiveLicenseStatus(historyStatus) || historyStatus === 'active'
+ ? 'licenseStatusLabels'
+ : 'statusLabels';
+ return (
+
+ | {compactIdentifier(itemLicenseId)} |
+
+ {historyLicenseType
+ ? t(`upgrade.licenseTypeLabels.${historyLicenseType}`, { defaultValue: historyLicenseType })
+ : '-'}
+ |
+
+ {t(`upgrade.${historyStatusLabelGroup}.${historyStatus}`, { defaultValue: historyStatus })}
+ |
+ {formatDateTime(item.created_at)} |
+ {formatDateTimeValue(expiresAt)} |
+ {duration ?? '-'} |
+ {account} |
+
+ );
+ })}
+
+
+
+
+ )}
+
+
+
+ {showApplyDialog && (
+
+
+
{t('upgrade.applyDialogTitle')}
+
+
+
{t('upgrade.productLabel')}
+
+
+
+
{t('upgrade.licenseTypeLabel')}
+
+
+
setApplyForm((prev) => ({ ...prev, company: event.target.value }))}
+ placeholder={t('upgrade.companyPlaceholderRequired')}
+ className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-200"
+ />
+
setApplyForm((prev) => ({ ...prev, applicantName: event.target.value }))}
+ placeholder={t('upgrade.applicantNamePlaceholderRequired')}
+ className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-200"
+ />
+
setApplyForm((prev) => ({ ...prev, applicantEmail: event.target.value }))}
+ placeholder={t('upgrade.applicantEmailPlaceholder')}
+ required
+ className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-200"
+ />
+
setApplyForm((prev) => ({ ...prev, applicantPhone: event.target.value }))}
+ placeholder={t('upgrade.applicantPhonePlaceholder')}
+ required
+ className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-200"
+ />
+