hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overhaul UI with shadcn components and new pages

Browse Source 
Add shadcn/ui components (badge, button, card, input, select,
separator). Add company context provider. New pages: Activity,
Approvals, Companies, Costs, Org chart. Restyle existing pages
(Dashboard, Agents, Issues, Goals, Projects) with shadcn components
and dark theme. Update layout, sidebar navigation, and routing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-17 09:07:32 -06:00
parent abadd469bc
commit 22e7930d0b
40 changed files with 1555 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ui/src/pages/Dashboard.tsx
View File

@@ -1,8 +1,72 @@
import { useCallback } from "react";
import { dashboardApi } from "../api/dashboard";
import { useCompany } from "../context/CompanyContext";
import { useApi } from "../hooks/useApi";
import { formatCents } from "../lib/utils";
import { Card, CardContent } from "@/components/ui/card";
export function Dashboard() {
const { selectedCompanyId, selectedCompany } = useCompany();
const fetcher = useCallback(() => {
if (!selectedCompanyId) {
return Promise.resolve(null);
}
return dashboardApi.summary(selectedCompanyId);
}, [selectedCompanyId]);
const { data, loading, error } = useApi(fetcher);
if (!selectedCompanyId) {
return <p className="text-muted-foreground">Create or select a company to view the dashboard.</p>;
}
return (
<div>
<h2 className="text-2xl font-bold mb-4">Dashboard</h2>
<p className="text-gray-600">Welcome to Paperclip. Select a section from the sidebar.</p>
<div className="space-y-4">
<div>
<h2 className="text-2xl font-bold">Dashboard</h2>
<p className="text-muted-foreground">{selectedCompany?.name}</p>
</div>
{loading && <p className="text-muted-foreground">Loading...</p>}
{error && <p className="text-destructive">{error.message}</p>}
{data && (
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
<Card>
<CardContent className="p-4">
<p className="text-sm text-muted-foreground">Agents</p>
<p className="mt-2 text-sm">Running: {data.agents.running}</p>
<p className="text-sm">Paused: {data.agents.paused}</p>
<p className="text-sm">Error: {data.agents.error}</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<p className="text-sm text-muted-foreground">Tasks</p>
<p className="mt-2 text-sm">Open: {data.tasks.open}</p>
<p className="text-sm">In Progress: {data.tasks.inProgress}</p>
<p className="text-sm">Blocked: {data.tasks.blocked}</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<p className="text-sm text-muted-foreground">Costs</p>
<p className="mt-2 text-sm">
{formatCents(data.costs.monthSpendCents)} / {formatCents(data.costs.monthBudgetCents)}
</p>
<p className="text-sm">Utilization: {data.costs.monthUtilizationPercent}%</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<p className="text-sm text-muted-foreground">Governance</p>
<p className="mt-2 text-sm">Pending approvals: {data.pendingApprovals}</p>
<p className="text-sm">Stale tasks: {data.staleTasks}</p>
</CardContent>
</Card>
</div>
)}
</div>
);
}