Redesign company overview: 4 compact KPIs, side-by-side projects + recent expenses
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import type { PageData } from './$types';
|
||||
import { formatCurrency } from '$lib/utils/currency.js';
|
||||
|
||||
let { data } = $props();
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
const currency = $derived(data.company.currency);
|
||||
const allocated = $derived(data.projects.reduce((s, p) => s + parseFloat(p.allocatedBudget), 0));
|
||||
@@ -10,51 +10,101 @@
|
||||
const total = $derived(parseFloat(data.company.totalBudget));
|
||||
const remaining = $derived(total - spent);
|
||||
const remainingPct = $derived(total > 0 ? (remaining / total) * 100 : 0);
|
||||
|
||||
const tone = $derived(remaining < 0 ? 'red' : remainingPct < 20 ? 'amber' : 'green');
|
||||
|
||||
const toneRing: Record<string, string> = {
|
||||
green: 'border-green-300 dark:border-green-700',
|
||||
amber: 'border-amber-300 dark:border-amber-700',
|
||||
red: 'border-red-300 dark:border-red-700'
|
||||
};
|
||||
const toneText: Record<string, string> = {
|
||||
green: 'text-green-700 dark:text-green-400',
|
||||
amber: 'text-amber-700 dark:text-amber-400',
|
||||
red: 'text-red-700 dark:text-red-400'
|
||||
};
|
||||
const toneBar: Record<string, string> = {
|
||||
green: 'bg-green-500',
|
||||
amber: 'bg-amber-500',
|
||||
red: 'bg-red-500'
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.company.name} - {data.appName}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- Budget Summary -->
|
||||
<div class="rounded-lg border-2 {remaining < 0 ? 'border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/30' : remainingPct < 20 ? 'border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/30' : 'border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900/30'} p-5">
|
||||
<h2 class="mb-1 text-sm font-semibold uppercase tracking-wider {remaining < 0 ? 'text-red-400' : remainingPct < 20 ? 'text-amber-400' : 'text-green-400'}">Remaining Budget</h2>
|
||||
<div class="text-3xl font-bold {remaining < 0 ? 'text-red-700 dark:text-red-400' : remainingPct < 20 ? 'text-amber-700 dark:text-amber-400' : 'text-green-700 dark:text-green-400'}">
|
||||
<div class="space-y-6">
|
||||
<!-- KPI row -->
|
||||
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
||||
<div class="rounded-lg border-2 {toneRing[tone]} bg-white p-4 dark:bg-gray-800">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
|
||||
Remaining
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-bold {toneText[tone]}">
|
||||
{formatCurrency(remaining, currency)}
|
||||
</div>
|
||||
<div class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-white/60 dark:bg-gray-700/60">
|
||||
</p>
|
||||
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div
|
||||
class="h-full rounded-full transition-all {remaining < 0 ? 'bg-red-500' : remainingPct < 20 ? 'bg-amber-500' : 'bg-green-500'}"
|
||||
class="h-full transition-all {toneBar[tone]}"
|
||||
style="width: {Math.max(0, Math.min(remainingPct, 100))}%"
|
||||
></div>
|
||||
</div>
|
||||
<p class="mt-2 text-xs {remaining < 0 ? 'text-red-500' : remainingPct < 20 ? 'text-amber-500' : 'text-green-500'}">{remainingPct.toFixed(1)}% remaining</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{remainingPct.toFixed(1)}% of total
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-1.5 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="{remaining < 0 ? 'text-red-400' : remainingPct < 20 ? 'text-amber-400' : 'text-green-600/60'}">Total budget</span>
|
||||
<span class="font-medium {remaining < 0 ? 'text-red-600 dark:text-red-400' : remainingPct < 20 ? 'text-amber-600 dark:text-amber-400' : 'text-green-700 dark:text-green-400'}">{formatCurrency(total, currency)}</span>
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
|
||||
Total Budget
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{formatCurrency(total, currency)}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Company-wide</p>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="{remaining < 0 ? 'text-red-400' : remainingPct < 20 ? 'text-amber-400' : 'text-green-600/60'}">Total spent</span>
|
||||
<span class="font-medium {remaining < 0 ? 'text-red-600 dark:text-red-400' : remainingPct < 20 ? 'text-amber-600 dark:text-amber-400' : 'text-green-700 dark:text-green-400'}">{formatCurrency(spent, currency)}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="{remaining < 0 ? 'text-red-400' : remainingPct < 20 ? 'text-amber-400' : 'text-green-600/60'}">Allocated</span>
|
||||
<span class="font-medium {remaining < 0 ? 'text-red-600 dark:text-red-400' : remainingPct < 20 ? 'text-amber-600 dark:text-amber-400' : 'text-green-700 dark:text-green-400'}">{formatCurrency(allocated, currency)}</span>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
|
||||
Spent
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{formatCurrency(spent, currency)}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Across {data.projects.length} {data.projects.length === 1 ? 'project' : 'projects'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
|
||||
Allocated
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{formatCurrency(allocated, currency)}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{total > 0 ? ((allocated / total) * 100).toFixed(1) : '0'}% of total
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- Projects -->
|
||||
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Projects</h2>
|
||||
{#if data.companyRoles.some(r => r === 'admin' || r === 'manager' || r === 'user' || r === 'hr')}
|
||||
<h2
|
||||
class="text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
Projects
|
||||
</h2>
|
||||
{#if data.companyRoles.some((r) => r === 'admin' || r === 'manager' || r === 'user' || r === 'hr')}
|
||||
<a
|
||||
href="/companies/{data.company.id}/projects/new"
|
||||
class="text-sm font-medium text-blue-600 hover:text-blue-700"
|
||||
class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
|
||||
>
|
||||
+ New Project
|
||||
</a>
|
||||
@@ -65,7 +115,7 @@
|
||||
<p class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">No projects yet.</p>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each data.projects as project}
|
||||
{#each data.projects as project (project.id)}
|
||||
{@const budgetNum = parseFloat(project.allocatedBudget)}
|
||||
{@const spentNum = parseFloat(project.spent)}
|
||||
{@const pct = budgetNum > 0 ? Math.min((spentNum / budgetNum) * 100, 100) : 0}
|
||||
@@ -73,12 +123,21 @@
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="font-medium text-gray-900 dark:text-white">{project.name}</span>
|
||||
<span class="text-gray-500 dark:text-gray-400">
|
||||
{formatCurrency(project.spent, currency)} / {formatCurrency(project.allocatedBudget, currency)}
|
||||
{formatCurrency(project.spent, currency)} / {formatCurrency(
|
||||
project.allocatedBudget,
|
||||
currency
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
|
||||
<div
|
||||
class="h-full rounded-full {pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-blue-500'}"
|
||||
class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full {pct > 90
|
||||
? 'bg-red-500'
|
||||
: pct > 70
|
||||
? 'bg-amber-500'
|
||||
: 'bg-blue-500'}"
|
||||
style="width: {pct}%"
|
||||
></div>
|
||||
</div>
|
||||
@@ -92,32 +151,43 @@
|
||||
</div>
|
||||
|
||||
<!-- Recent Expenses -->
|
||||
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 lg:col-span-2">
|
||||
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Recent Expenses</h2>
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h2
|
||||
class="text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
Recent Expenses
|
||||
</h2>
|
||||
<a
|
||||
href="/companies/{data.company.id}/expenses"
|
||||
class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
|
||||
>
|
||||
View all →
|
||||
</a>
|
||||
</div>
|
||||
{#if data.recentExpenses.length === 0}
|
||||
<p class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">No expenses yet.</p>
|
||||
{:else}
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-100 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400">
|
||||
<th class="pb-2 font-medium">Title</th>
|
||||
<th class="pb-2 font-medium">Project</th>
|
||||
<th class="pb-2 font-medium">Amount</th>
|
||||
<th class="pb-2 font-medium">Date</th>
|
||||
<th class="pb-2 font-medium">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.recentExpenses as expense}
|
||||
<tr class="border-b border-gray-50 dark:border-gray-700/50">
|
||||
<td class="py-2 font-medium text-gray-900 dark:text-white">{expense.title}</td>
|
||||
<td class="py-2 text-gray-500 dark:text-gray-400">{expense.projectName}</td>
|
||||
<td class="py-2 dark:text-white">{formatCurrency(expense.amount, currency)}</td>
|
||||
<td class="py-2 text-gray-500 dark:text-gray-400">{expense.expenseDate}</td>
|
||||
<td class="py-2">
|
||||
<ul class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
{#each data.recentExpenses as expense (expense.id)}
|
||||
<li class="flex items-center justify-between gap-3 py-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-gray-900 dark:text-white">
|
||||
{expense.title}
|
||||
</p>
|
||||
<p class="truncate text-xs text-gray-500 dark:text-gray-400">
|
||||
{expense.projectName} · {expense.expenseDate}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{formatCurrency(expense.amount, currency)}
|
||||
</span>
|
||||
<span
|
||||
class="rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{expense.status === 'approved'
|
||||
class="rounded-full px-2 py-0.5 text-xs font-medium {expense.status ===
|
||||
'approved'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
|
||||
: expense.status === 'rejected'
|
||||
? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
||||
@@ -125,11 +195,11 @@
|
||||
>
|
||||
{expense.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user