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