Skip to content

Commit 0ad910a

Browse files
dreynowclaude
dreynow
and
claude
committed
fix: add Clients and Settings pages for new nav items
Clients page shows empty state with Connect QuickBooks CTA. Settings page shows account info, API connection, and placeholders. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e3548e9 commit 0ad910a

3 files changed

Lines changed: 128 additions & 0 deletions

File tree

‎apps/observatory/src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { ToolsPage } from './pages/ToolsPage';
1010
import { VerifyPage } from './pages/VerifyPage';
1111
import { EscalationsPage } from './pages/EscalationsPage';
1212
import { AuditPage } from './pages/AuditPage';
13+
import { ClientsPage } from './pages/ClientsPage';
14+
import { SettingsPage } from './pages/SettingsPage';
1315
import { LoginPage } from './pages/LoginPage';
1416
import { SignupPage } from './pages/SignupPage';
1517
import { ConnectPage } from './pages/ConnectPage';
@@ -32,6 +34,8 @@ export const App: React.FC = () => (
3234
{/* Protected routes */}
3335
<Route element={<ProtectedRoute><Layout /></ProtectedRoute>}>
3436
<Route path="/" element={<DashboardPage />} />
37+
<Route path="/clients" element={<ClientsPage />} />
38+
<Route path="/settings" element={<SettingsPage />} />
3539
<Route path="/agents" element={<AgentsPage />} />
3640
<Route path="/agents/:name" element={<AgentDetailPage />} />
3741
<Route path="/tools" element={<ToolsPage />} />

‎apps/observatory/src/pages/ClientsPage.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { motion } from 'framer-motion';
2+
import { Building2, Plus, ArrowRight } from 'lucide-react';
3+
import { useNavigate } from 'react-router-dom';
4+
5+
export const ClientsPage: React.FC = () => {
6+
const navigate = useNavigate();
7+
8+
return (
9+
<motion.div
10+
className="p-6 max-w-5xl mx-auto"
11+
initial={{ opacity: 0, y: 8 }}
12+
animate={{ opacity: 1, y: 0 }}
13+
transition={{ duration: 0.2 }}
14+
>
15+
<div className="mb-8">
16+
<p className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1">Firm Management</p>
17+
<h1 className="text-2xl font-display text-[#1A1814]">Clients</h1>
18+
<p className="text-[13px] text-[#6B6760] mt-1">QuickBooks connections and client firms</p>
19+
</div>
20+
21+
<div className="flex flex-col items-center justify-center py-16">
22+
<motion.div
23+
initial={{ scale: 0 }}
24+
animate={{ scale: 1 }}
25+
transition={{ type: 'spring', stiffness: 300, damping: 15 }}
26+
className="w-14 h-14 rounded-lg bg-[#FAF6ED] border border-[#E8DCC4] flex items-center justify-center mb-4"
27+
>
28+
<Building2 className="w-7 h-7 text-[#B08D3E]" />
29+
</motion.div>
30+
<p className="text-sm font-medium text-[#1A1814] mb-1">No clients connected</p>
31+
<p className="text-xs text-[#9C978E] mb-6 text-center max-w-sm">
32+
Connect your first QuickBooks account to start managing AI agent authorizations for your clients.
33+
</p>
34+
<button
35+
onClick={() => navigate('/connect')}
36+
className="bg-[#B08D3E] hover:bg-[#C5A572] text-white font-semibold text-sm rounded-md px-5 py-2.5 transition-colors flex items-center gap-2"
37+
>
38+
<Plus className="w-4 h-4" />
39+
Connect QuickBooks
40+
<ArrowRight className="w-3.5 h-3.5" />
41+
</button>
42+
</div>
43+
</motion.div>
44+
);
45+
};

‎apps/observatory/src/pages/SettingsPage.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { motion } from 'framer-motion';
2+
import { Settings, Globe, Key, Bell, Shield } from 'lucide-react';
3+
import { useAuth } from '../hooks/useAuth';
4+
5+
export const SettingsPage: React.FC = () => {
6+
const { user, logout } = useAuth();
7+
8+
return (
9+
<motion.div
10+
className="p-6 max-w-3xl mx-auto"
11+
initial={{ opacity: 0, y: 8 }}
12+
animate={{ opacity: 1, y: 0 }}
13+
transition={{ duration: 0.2 }}
14+
>
15+
<div className="mb-8">
16+
<p className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1">Configuration</p>
17+
<h1 className="text-2xl font-display text-[#1A1814]">Settings</h1>
18+
</div>
19+
20+
<div className="space-y-4">
21+
{/* Account */}
22+
<div className="bg-white border border-[#E8E5DE] rounded-lg p-5 shadow-[0_1px_2px_rgba(26,24,20,0.04)]">
23+
<div className="flex items-center gap-2 mb-4">
24+
<Shield className="w-4 h-4 text-[#B08D3E]" />
25+
<span className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E]">Account</span>
26+
</div>
27+
<div className="space-y-3">
28+
<div>
29+
<label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1 block">Email</label>
30+
<p className="text-sm text-[#1A1814]">{user?.email || 'Not set'}</p>
31+
</div>
32+
{user?.tenant_id && (
33+
<div>
34+
<label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1 block">Company ID</label>
35+
<p className="text-sm font-mono text-[#6B6760]">{user.tenant_id}</p>
36+
</div>
37+
)}
38+
</div>
39+
</div>
40+
41+
{/* API Connection */}
42+
<div className="bg-white border border-[#E8E5DE] rounded-lg p-5 shadow-[0_1px_2px_rgba(26,24,20,0.04)]">
43+
<div className="flex items-center gap-2 mb-4">
44+
<Globe className="w-4 h-4 text-[#B08D3E]" />
45+
<span className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E]">API Connection</span>
46+
</div>
47+
<div className="space-y-3">
48+
<div>
49+
<label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1 block">Observatory API</label>
50+
<p className="text-sm font-mono text-[#6B6760]">{window.location.origin}/v1</p>
51+
</div>
52+
<div>
53+
<label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E] mb-1 block">Control Plane</label>
54+
<p className="text-sm font-mono text-[#6B6760]">https://control.kanoniv.com</p>
55+
</div>
56+
</div>
57+
</div>
58+
59+
{/* Notifications */}
60+
<div className="bg-white border border-[#E8E5DE] rounded-lg p-5 shadow-[0_1px_2px_rgba(26,24,20,0.04)]">
61+
<div className="flex items-center gap-2 mb-4">
62+
<Bell className="w-4 h-4 text-[#B08D3E]" />
63+
<span className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E]">Notifications</span>
64+
</div>
65+
<p className="text-xs text-[#9C978E]">Email notifications for escalations and daily spend reports coming soon.</p>
66+
</div>
67+
68+
{/* API Keys */}
69+
<div className="bg-white border border-[#E8E5DE] rounded-lg p-5 shadow-[0_1px_2px_rgba(26,24,20,0.04)]">
70+
<div className="flex items-center gap-2 mb-4">
71+
<Key className="w-4 h-4 text-[#B08D3E]" />
72+
<span className="text-[10px] font-bold uppercase tracking-[0.1em] text-[#9C978E]">API Keys</span>
73+
</div>
74+
<p className="text-xs text-[#9C978E]">Delegation tokens are generated per-agent from the Agents page. API key management coming soon.</p>
75+
</div>
76+
</div>
77+
</motion.div>
78+
);
79+
};

0 commit comments

Comments
 (0)