1 line
12 KiB
HTML
1 line
12 KiB
HTML
<div class="space-y-6"><header class="flex flex-wrap items-center justify-between gap-4 border-b border-border/50 pb-4"><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5"><h1 class="font-heading text-title-lg font-bold tracking-tight text-ink-1 sm:text-2xl">Activity</h1><span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-semibold text-blue-600 dark:bg-blue-950/60 dark:text-blue-400 border border-blue-200/60 dark:border-blue-800/40"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>Live System</span></div><p class="text-body-sm text-ink-3 font-normal">Monitor workforce operations, user actions and system events.</p></div></header><div class="grid gap-3.5 grid-cols-2 sm:grid-cols-4"><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Total events</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">0</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Last 24 hours</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-amber-600 dark:text-amber-400">0</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-amber-500 to-orange-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Privileged actions</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-amber-600 dark:text-amber-400">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">hires and position changes</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-amber-500 to-orange-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Distinct users</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">0</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div></div><section aria-labelledby="timeline" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="timeline" class="font-heading text-body font-semibold text-ink-1">Operational timeline</h2><span class="text-caption text-ink-4">Most recent 0 events</span></div></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-0 overflow-hidden"><p class="px-4 py-8 text-center text-body-sm text-ink-3">No activity has been logged yet.</p></div></section><section aria-labelledby="audit" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="audit" class="font-heading text-body font-semibold text-ink-1">Audit log</h2><span class="text-caption text-ink-4">0 of 0 events</span></div></div><div class="space-y-2"><div class="flex flex-col gap-2 lg:flex-row lg:items-center"><div class="min-w-0 lg:max-w-xs lg:flex-1"><div class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute top-1/2 -translate-y-1/2 w-4 h-4 text-ink-4 pointer-events-none left-2.5" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input type="search" role="searchbox" placeholder="Search events" class="flex w-full bg-surface text-ink-1 transition-all duration-base ease-out border border-border shadow-xs placeholder:text-ink-4 outline-none focus-visible:border-krow-blue focus-visible:ring-2 focus-visible:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/20 file:border-0 file:bg-transparent file:text-body-sm file:font-medium file:text-ink-2 h-8 px-2.5 text-body-sm rounded-lg pl-8 pr-9 [&::-webkit-search-cancel-button]:hidden" value=""/></div></div><div class="flex flex-wrap items-center gap-2"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="User"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Action"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Severity"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Date"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div></div><div class="transition-all duration-base ease-out glass-card border border-white/60 shadow-sm rounded-2xl p-0 overflow-hidden"><div class="flex flex-col items-center justify-center text-center py-14 px-6"><span class="grid place-items-center rounded-full mb-4 bg-krow-blue-tint text-krow-blue w-14 h-14"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-inbox w-6 h-6" aria-hidden="true"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></span><h3 class="font-heading text-ink-1 text-title">Nothing here yet</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Rows will appear here once there is data.</p></div></div></section></div> |