grabowski
7a4ba0537f
Multi-company budget/project tracking tool built with SvelteKit 5, PostgreSQL (Drizzle ORM), and Tailwind CSS v4. Features: - Auth: local (email/password with Argon2) + generic OIDC - 4 roles per company: admin, manager, user, viewer - Multi-company with per-company user membership - Projects with budget allocation from company pool - Expense submission with approval workflow - Categories and tags for expense organization - Reports with spending breakdowns (by category, project, time) - CSV import for Actual Budget migration - Company audit log tracking all budget and admin actions - Remaining budget hero display on overview and budget pages - Admin-only company creation; new users wait for invitation - Deployment configs for systemd + nginx (bare metal/Proxmox) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
87 lines
3.1 KiB
Svelte
87 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import { formatCurrency } from '$lib/utils/currency.js';
|
|
import { budgetPercent, budgetColor } from '$lib/utils/budget.js';
|
|
|
|
let { data } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Dashboard - B4L Budget</title>
|
|
</svelte:head>
|
|
|
|
<div class="mx-auto max-w-6xl">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
|
|
{#if data.user?.isSystemAdmin}
|
|
<a
|
|
href="/companies"
|
|
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
|
|
>
|
|
Manage Companies
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if data.companySummaries.length === 0}
|
|
<div class="rounded-lg border border-gray-200 bg-white p-12 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h2 class="mt-4 text-lg font-medium text-gray-900">Waiting for access</h2>
|
|
<p class="mt-2 text-sm text-gray-500">
|
|
You haven't been assigned to any company yet. Ask an administrator to invite you.
|
|
</p>
|
|
</div>
|
|
{:else}
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#each data.companySummaries as company}
|
|
<a
|
|
href="/companies/{company.id}"
|
|
class="rounded-lg border border-gray-200 bg-white p-6 transition-shadow hover:shadow-md"
|
|
>
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-gray-900">{company.name}</h2>
|
|
<span
|
|
class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700"
|
|
>
|
|
{company.role}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Budget</span>
|
|
<span class="font-medium">{formatCurrency(company.totalBudget, company.currency)}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Spent</span>
|
|
<span class="font-medium">{formatCurrency(company.totalSpent, company.currency)}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Projects</span>
|
|
<span class="font-medium">{company.projectCount}</span>
|
|
</div>
|
|
{#if company.pendingExpenses > 0}
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Pending Approvals</span>
|
|
<span class="font-medium text-amber-600">{company.pendingExpenses}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="h-2 w-full overflow-hidden rounded-full bg-gray-100">
|
|
<div
|
|
class="h-full rounded-full transition-all {budgetColor(budgetPercent(company.totalSpent, company.totalBudget))}"
|
|
style="width: {budgetPercent(company.totalSpent, company.totalBudget)}%"
|
|
></div>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-400">{budgetPercent(company.totalSpent, company.totalBudget).toFixed(1)}% spent</p>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|