chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/pages/account/BrandingSettingsPage.tsx
View File

@@ -75,7 +75,7 @@ export function BrandingSettingsPage() {
<>
<PageMeta title="Branding Settings" />
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
</div>
</>
)
@@ -103,27 +103,27 @@ export function BrandingSettingsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<Palette className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
<Palette className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">
Branding Settings
</h1>
</div>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
Customize your account branding — logo, accent color, and company name.
</p>
</div>
<div className="max-w-2xl space-y-6">
{/* Branding Form */}
<div className="glass-card-static p-6">
<h2 className="text-lg font-semibold text-foreground mb-6">Custom Branding</h2>
<div className="card-flat p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb] mb-6">Custom Branding</h2>
<div className="space-y-5">
{/* Company Name */}
<div>
<label
htmlFor="company-name"
className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
>
Company Name
</label>
@@ -135,12 +135,12 @@ export function BrandingSettingsPage() {
placeholder="Your Company Name"
maxLength={200}
className={cn(
'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground',
'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-xs text-[#848b9b]">
Displayed in the sidebar and exported documents.
</p>
</div>
@@ -149,7 +149,7 @@ export function BrandingSettingsPage() {
<div>
<label
htmlFor="logo-url"
className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
>
Logo URL
</label>
@@ -161,16 +161,16 @@ export function BrandingSettingsPage() {
placeholder="https://example.com/logo.png"
maxLength={500}
className={cn(
'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground font-mono',
'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-xs text-[#848b9b]">
Publicly accessible URL to your logo image (PNG, SVG, or JPEG).
</p>
{logoUrl && (
<div className="mt-3 inline-flex items-center rounded-lg border border-border bg-card/50 p-3">
<div className="mt-3 inline-flex items-center rounded-lg border border-[#1e2130] bg-[#14161d]/50 p-3">
<img
src={logoUrl}
alt="Logo preview"
@@ -187,7 +187,7 @@ export function BrandingSettingsPage() {
<div>
<label
htmlFor="primary-color"
className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
>
Accent Color
</label>
@@ -197,7 +197,7 @@ export function BrandingSettingsPage() {
type="color"
value={previewColor}
onChange={(e) => setPrimaryColor(e.target.value)}
className="h-9 w-14 cursor-pointer rounded-lg border border-border bg-card p-0.5"
className="h-9 w-14 cursor-pointer rounded-lg border border-[#1e2130] bg-[#14161d] p-0.5"
title="Pick accent color"
/>
<input
@@ -210,20 +210,20 @@ export function BrandingSettingsPage() {
placeholder="#06b6d4"
maxLength={7}
className={cn(
'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground font-mono',
'w-32 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<button
type="button"
onClick={() => setPrimaryColor(DEFAULT_COLOR)}
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Reset to default
</button>
</div>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-xs text-[#848b9b]">
Hex color code for the primary accent color (e.g. #06b6d4).
</p>
</div>
@@ -236,9 +236,9 @@ export function BrandingSettingsPage() {
onClick={handleSave}
disabled={isSaving || !isDirty}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
'hover:opacity-90 active:scale-[0.97] transition-all',
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
@@ -250,15 +250,15 @@ export function BrandingSettingsPage() {
Save Branding
</button>
{!isDirty && !isSaving && (
<span className="text-xs text-muted-foreground">No changes</span>
<span className="text-xs text-[#848b9b]">No changes</span>
)}
</div>
</div>
{/* Preview Section */}
<div className="glass-card-static p-6">
<h2 className="text-lg font-semibold text-foreground mb-4">Preview</h2>
<p className="text-sm text-muted-foreground mb-4">
<div className="card-flat p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb] mb-4">Preview</h2>
<p className="text-sm text-[#848b9b] mb-4">
This is how your accent color will appear on interactive elements.
</p>
@@ -274,7 +274,7 @@ export function BrandingSettingsPage() {
style={{ backgroundColor: previewColor }}
/>
<div
className="h-8 rounded-lg px-4 flex items-center text-sm font-semibold text-[#101114]"
className="h-8 rounded-lg px-4 flex items-center text-sm font-semibold text-white"
style={{
background: `linear-gradient(135deg, ${previewColor} 0%, ${previewColor}cc 100%)`,
}}
@@ -293,7 +293,7 @@ export function BrandingSettingsPage() {
</div>
{companyName && (
<p className="text-sm text-foreground">
<p className="text-sm text-[#e2e5eb]">
Company: <span className="font-medium">{companyName}</span>
</p>
)}

24
frontend/src/pages/account/ChatRetentionSettingsPage.tsx
View File

@@ -45,7 +45,7 @@ export default function ChatRetentionSettingsPage() {
if (loading) {
return (
<div className="flex items-center justify-center py-20">
<Loader2 className="animate-spin text-primary" size={24} />
<Loader2 className="animate-spin text-[#22d3ee]" size={24} />
</div>
)
}
@@ -53,18 +53,18 @@ export default function ChatRetentionSettingsPage() {
return (
<div className="max-w-2xl mx-auto py-8 px-6">
<div className="flex items-center gap-3 mb-6">
<Clock size={20} className="text-primary" />
<h1 className="text-xl font-heading font-bold text-foreground">Chat Retention</h1>
<Clock size={20} className="text-[#22d3ee]" />
<h1 className="text-xl font-heading font-bold text-[#e2e5eb]">Chat Retention</h1>
</div>
<div className="glass-card-static rounded-2xl p-6 space-y-6">
<p className="text-sm text-muted-foreground">
<div className="card-flat rounded-2xl p-6 space-y-6">
<p className="text-sm text-[#848b9b]">
Configure how long AI assistant conversations are retained. Pinned chats are never automatically deleted.
</p>
<div className="space-y-4">
<div>
<label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
Retention Period (days)
</label>
<input
@@ -73,16 +73,16 @@ export default function ChatRetentionSettingsPage() {
onChange={e => setRetentionDays(e.target.value)}
min={1}
max={365}
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
/>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-xs text-[#848b9b] mt-1">
Chats older than this will be automatically deleted (1-365 days)
</p>
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
Max Conversations
</label>
<input
@@ -91,10 +91,10 @@ export default function ChatRetentionSettingsPage() {
onChange={e => setMaxCount(e.target.value)}
min={10}
max={10000}
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
/>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-xs text-[#848b9b] mt-1">
When this limit is exceeded, oldest unpinned chats are deleted
</p>
</div>
@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
<button
onClick={handleSave}
disabled={saving}
className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40 flex items-center gap-2"
className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
>
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
Save Settings

206
frontend/src/pages/account/IntegrationsPage.tsx
View File

@@ -197,7 +197,7 @@ export function IntegrationsPage() {
<>
<PageMeta title="Integrations" />
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
</div>
</>
)
@@ -223,16 +223,16 @@ export function IntegrationsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<Plug className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Integrations</h1>
<Plug className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Integrations</h1>
</div>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
Connect your PSA to post session documentation directly to tickets.
</p>
</div>
{/* Tabs */}
<div className="mb-6 flex gap-1 border-b border-border">
<div className="mb-6 flex gap-1 border-b border-[#1e2130]">
{([
{ id: 'connection' as Tab, label: 'Connection', icon: Plug },
{ id: 'member-mapping' as Tab, label: 'Member Mapping', icon: Users },
@@ -246,8 +246,8 @@ export function IntegrationsPage() {
className={cn(
'inline-flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors -mb-px',
activeTab === id
? 'border-primary text-foreground'
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
? 'border-primary text-[#e2e5eb]'
: 'border-transparent text-[#848b9b] hover:text-[#e2e5eb] hover:border-[#1e2130]'
)}
>
<Icon className="h-4 w-4" />
@@ -261,7 +261,7 @@ export function IntegrationsPage() {
<div className="max-w-3xl">
{/* PSA Provider Grid */}
<div className="mb-6">
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">
Available PSA Integrations
</p>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
@@ -270,43 +270,43 @@ export function IntegrationsPage() {
'rounded-xl border p-4 flex flex-col gap-2',
connection
? 'border-primary/40 bg-primary/5'
: 'border-border bg-card/30'
: 'border-[#1e2130] bg-[#14161d]/30'
)}>
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground">ConnectWise PSA</span>
<span className="text-sm font-medium text-[#e2e5eb]">ConnectWise PSA</span>
{connection ? (
<span className="inline-flex items-center rounded-full bg-emerald-400/10 px-2 py-0.5 text-[0.625rem] font-label text-emerald-400">
<span className="inline-flex items-center rounded-full bg-emerald-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-emerald-400">
Connected
</span>
) : (
<span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-[0.625rem] font-label text-primary">
<span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] font-sans text-xs text-[#22d3ee]">
Available
</span>
)}
</div>
<p className="text-xs text-muted-foreground">Manage, ticket linking, time entries</p>
<p className="text-xs text-[#848b9b]">Manage, ticket linking, time entries</p>
</div>
{/* Autotask — coming soon */}
<div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground">Autotask PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-label text-amber-400">
<span className="text-sm font-medium text-[#e2e5eb]">Autotask PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
Coming Soon
</span>
</div>
<p className="text-xs text-muted-foreground">Datto / Kaseya integration</p>
<p className="text-xs text-[#848b9b]">Datto / Kaseya integration</p>
</div>
{/* Halo PSA — coming soon */}
<div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground">Halo PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-label text-amber-400">
<span className="text-sm font-medium text-[#e2e5eb]">Halo PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
Coming Soon
</span>
</div>
<p className="text-xs text-muted-foreground">HaloPSA / HaloITSM integration</p>
<p className="text-xs text-[#848b9b]">HaloPSA / HaloITSM integration</p>
</div>
</div>
</div>
@@ -325,17 +325,17 @@ export function IntegrationsPage() {
{/* Setup / Edit Form */}
{(mode === 'setup' || mode === 'edit') && (
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center gap-2 mb-6">
<Shield className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">
<Shield className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">
{mode === 'setup' ? 'Connect to ConnectWise PSA' : 'Edit Connection'}
</h2>
</div>
<form onSubmit={mode === 'setup' ? handleCreate : handleUpdate} className="space-y-4">
<div>
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Display Name
</label>
<Input
@@ -349,7 +349,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Site URL
</label>
<Input
@@ -363,7 +363,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Company ID
</label>
<Input
@@ -377,7 +377,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Public Key
</label>
<Input
@@ -391,7 +391,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Private Key
</label>
<Input
@@ -416,9 +416,9 @@ export function IntegrationsPage() {
type="submit"
disabled={isSaving}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
'hover:opacity-90 active:scale-[0.97] transition-all',
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
@@ -430,7 +430,7 @@ export function IntegrationsPage() {
<button
type="button"
onClick={cancelEdit}
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Cancel
</button>
@@ -444,13 +444,13 @@ export function IntegrationsPage() {
{mode === 'view' && connection && (
<div className="space-y-4">
{/* Status Card */}
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-label font-medium text-primary">
<span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-[#22d3ee]">
ConnectWise
</span>
<h2 className="text-lg font-semibold text-foreground">{connection.display_name}</h2>
<h2 className="text-lg font-semibold text-[#e2e5eb]">{connection.display_name}</h2>
</div>
<div className="flex items-center gap-2">
<span
@@ -460,7 +460,7 @@ export function IntegrationsPage() {
)}
/>
<span className={cn(
'text-xs font-label',
'text-xs font-sans text-xs',
connection.is_active ? 'text-emerald-400' : 'text-amber-400'
)}>
{connection.is_active ? 'Connected' : 'Not validated'}
@@ -470,24 +470,24 @@ export function IntegrationsPage() {
<div className="grid gap-4 sm:grid-cols-2">
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Site URL</p>
<p className="mt-1 text-sm text-foreground">{connection.site_url}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Site URL</p>
<p className="mt-1 text-sm text-[#e2e5eb]">{connection.site_url}</p>
</div>
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Company ID</p>
<p className="mt-1 text-sm text-foreground">{connection.company_id}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Company ID</p>
<p className="mt-1 text-sm text-[#e2e5eb]">{connection.company_id}</p>
</div>
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Public Key</p>
<p className="mt-1 text-sm text-foreground font-mono">{connection.public_key_hint}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Public Key</p>
<p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.public_key_hint}</p>
</div>
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Private Key</p>
<p className="mt-1 text-sm text-foreground font-mono">{connection.private_key_hint}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Private Key</p>
<p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.private_key_hint}</p>
</div>
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Last Validated</p>
<p className="mt-1 text-sm text-foreground">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Last Validated</p>
<p className="mt-1 text-sm text-[#e2e5eb]">
{connection.last_validated_at ? formatRelativeTime(connection.last_validated_at) : 'Never'}
</p>
</div>
@@ -511,7 +511,7 @@ export function IntegrationsPage() {
)}
<span>{testResult.message}</span>
{testResult.server_version && (
<span className="ml-auto text-xs text-muted-foreground">
<span className="ml-auto text-xs text-[#848b9b]">
v{testResult.server_version}
</span>
)}
@@ -524,8 +524,8 @@ export function IntegrationsPage() {
onClick={handleTest}
disabled={isTesting}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'hover:border-[rgba(255,255,255,0.12)] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -541,8 +541,8 @@ export function IntegrationsPage() {
<button
onClick={startEdit}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'hover:border-[rgba(255,255,255,0.12)] transition-all'
)}
>
@@ -552,18 +552,18 @@ export function IntegrationsPage() {
{showDeleteConfirm ? (
<div className="flex items-center gap-2 ml-auto">
<span className="text-sm text-muted-foreground">Disconnect?</span>
<span className="text-sm text-[#848b9b]">Disconnect?</span>
<button
onClick={handleDelete}
disabled={isDeleting}
className="inline-flex items-center gap-1.5 rounded-[10px] px-3 py-2 text-sm font-medium text-red-400 hover:bg-red-400/10 transition-colors"
className="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-red-400 hover:bg-red-400/10 transition-colors"
>
{isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
Confirm
</button>
<button
onClick={() => setShowDeleteConfirm(false)}
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Cancel
</button>
@@ -591,12 +591,12 @@ export function IntegrationsPage() {
{/* Post History Tab */}
{activeTab === 'post-history' && (
<div className="max-w-3xl">
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Ticket className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Post History</h2>
<Ticket className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Post History</h2>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
View post history from individual sessions by clicking on linked tickets.
When a session has a ConnectWise ticket linked, use the Update button to post
session documentation and view previous posts.
@@ -727,12 +727,12 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
if (!connection) {
return (
<div className="max-w-3xl">
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
<Users className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
Set up a PSA connection first to map team members to ConnectWise members.
</p>
</div>
@@ -743,19 +743,19 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
return (
<div className="max-w-3xl space-y-4">
{/* Header + Auto-Match */}
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-3">
<Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
<Users className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
</div>
<button
type="button"
onClick={handleAutoMatch}
disabled={isAutoMatching || isLoadingData}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'hover:border-[rgba(255,255,255,0.12)] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -768,7 +768,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
Auto-Match by Email
</button>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
Map your ResolutionFlow users to ConnectWise members so session posts are attributed correctly.
</p>
</div>
@@ -776,25 +776,25 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
{/* Loading state */}
{isLoadingData && (
<div className="flex justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
</div>
)}
{/* Mapping Table */}
{hasLoaded && !isLoadingData && (
<div className="glass-card-static overflow-hidden">
<div className="card-flat overflow-hidden">
{uniqueUsers.length === 0 ? (
<div className="p-6 text-center text-sm text-muted-foreground">
<div className="p-6 text-center text-sm text-[#848b9b]">
No users found. Use Auto-Match to discover and map users.
</div>
) : (
<>
{/* Table header */}
<div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-border px-6 py-3">
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">User</span>
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</span>
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Mapped To</span>
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground w-20 text-center">Method</span>
<div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-[#1e2130] px-6 py-3">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">User</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Email</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Mapped To</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] w-20 text-center">Method</span>
</div>
{/* Rows */}
@@ -803,18 +803,18 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
return (
<div
key={user.user_id}
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-border/50 px-6 py-3 last:border-b-0"
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-[#1e2130]/50 px-6 py-3 last:border-b-0"
>
<span className="text-sm text-foreground truncate">{user.user_name}</span>
<span className="text-sm text-muted-foreground truncate">{user.user_email}</span>
<span className="text-sm text-[#e2e5eb] truncate">{user.user_name}</span>
<span className="text-sm text-[#848b9b] truncate">{user.user_email}</span>
<select
title={`Map ${user.user_name} to a ConnectWise member`}
value={currentMapping?.external_member_id || ''}
onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
className={cn(
'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
!currentMapping && 'text-muted-foreground'
'w-full rounded-lg border bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb]',
'border-[#1e2130] focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
!currentMapping && 'text-[#848b9b]'
)}
>
<option value="">-- Unmapped --</option>
@@ -827,19 +827,19 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
<span className="w-20 text-center">
{currentMapping && !isDirty && user.matched_by ? (
<span className={cn(
'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label',
'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs',
user.matched_by === 'auto_email'
? 'bg-primary/10 text-primary'
: 'bg-card border border-border text-muted-foreground'
? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
: 'bg-[#14161d] border border-[#1e2130] text-[#848b9b]'
)}>
{user.matched_by === 'auto_email' ? 'auto' : 'manual'}
</span>
) : currentMapping ? (
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label bg-card border border-border text-muted-foreground">
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs bg-[#14161d] border border-[#1e2130] text-[#848b9b]">
manual
</span>
) : (
<span className="text-[0.625rem] text-muted-foreground/50">—</span>
<span className="text-[0.625rem] text-[#848b9b]/50">—</span>
)}
</span>
</div>
@@ -858,9 +858,9 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
onClick={handleSave}
disabled={isSavingMappings}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
'hover:opacity-90 active:scale-[0.97] transition-all',
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
@@ -914,8 +914,8 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
if (!connection) {
return (
<div className="max-w-3xl">
<div className="glass-card-static p-6 text-center">
<p className="text-sm text-muted-foreground">Connect your PSA first to configure FlowPilot settings.</p>
<div className="card-flat p-6 text-center">
<p className="text-sm text-[#848b9b]">Connect your PSA first to configure FlowPilot settings.</p>
</div>
</div>
)
@@ -924,7 +924,7 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
if (isLoading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
<Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
</div>
)
}
@@ -933,12 +933,12 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
return (
<div className="max-w-3xl space-y-4">
<div className="glass-card-static p-6">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Zap className="h-5 w-5 text-primary" />
<h2 className="text-lg font-semibold text-foreground">FlowPilot Settings</h2>
<Zap className="h-5 w-5 text-[#22d3ee]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">FlowPilot Settings</h2>
</div>
<p className="text-sm text-muted-foreground mb-6">
<p className="text-sm text-[#848b9b] mb-6">
Configure how FlowPilot integrates with your ConnectWise PSA when sessions are resolved or escalated.
</p>
@@ -1039,8 +1039,8 @@ function SettingToggle({
return (
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm font-medium text-foreground">{label}</p>
<p className="text-xs text-muted-foreground mt-0.5">{description}</p>
<p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
<p className="text-xs text-[#848b9b] mt-0.5">{description}</p>
</div>
<button
onClick={() => onChange(!checked)}
@@ -1078,13 +1078,13 @@ function SettingSelect({
}) {
return (
<div>
<p className="text-sm font-medium text-foreground">{label}</p>
<p className="text-xs text-muted-foreground mt-0.5 mb-2">{description}</p>
<p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
<p className="text-xs text-[#848b9b] mt-0.5 mb-2">{description}</p>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
className="w-full max-w-xs rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>

34
frontend/src/pages/account/ProfileSettingsPage.tsx
View File

@@ -8,8 +8,8 @@ import { toast } from '@/lib/toast'
import type { UserUpdate } from '@/types'
const inputClass = cn(
'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)
@@ -67,52 +67,52 @@ export function ProfileSettingsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<UserIcon className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Profile Settings</h1>
<UserIcon className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Profile Settings</h1>
</div>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
Update your name, email, and personal details
</p>
</div>
<div className="max-w-xl">
<form onSubmit={handleSave} className="glass-card-static p-6 space-y-5">
<form onSubmit={handleSave} className="card-flat p-6 space-y-5">
{/* Name */}
<div>
<label htmlFor="profile-name" className="block text-sm font-medium text-foreground">Name</label>
<label htmlFor="profile-name" className="block text-sm font-medium text-[#e2e5eb]">Name</label>
<input id="profile-name" type="text" value={name} onChange={(e) => setName(e.target.value)} required className={inputClass} />
</div>
{/* Email */}
<div>
<label htmlFor="profile-email" className="block text-sm font-medium text-foreground">Email</label>
<label htmlFor="profile-email" className="block text-sm font-medium text-[#e2e5eb]">Email</label>
<input id="profile-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className={inputClass} />
</div>
{/* Password confirmation for email change */}
{emailChanged && (
<div>
<label htmlFor="profile-password" className="block text-sm font-medium text-foreground">Current Password</label>
<p className="text-xs text-muted-foreground">Required to change your email address</p>
<label htmlFor="profile-password" className="block text-sm font-medium text-[#e2e5eb]">Current Password</label>
<p className="text-xs text-[#848b9b]">Required to change your email address</p>
<input id="profile-password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required className={inputClass} />
</div>
)}
{/* Phone */}
<div>
<label htmlFor="profile-phone" className="block text-sm font-medium text-foreground">Phone</label>
<label htmlFor="profile-phone" className="block text-sm font-medium text-[#e2e5eb]">Phone</label>
<input id="profile-phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Optional" className={inputClass} />
</div>
{/* Job Title */}
<div>
<label htmlFor="profile-job-title" className="block text-sm font-medium text-foreground">Job Title</label>
<label htmlFor="profile-job-title" className="block text-sm font-medium text-[#e2e5eb]">Job Title</label>
<input id="profile-job-title" type="text" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} placeholder="e.g. Network Engineer" className={inputClass} />
</div>
{/* Timezone */}
<div>
<label htmlFor="profile-timezone" className="block text-sm font-medium text-foreground">Timezone</label>
<label htmlFor="profile-timezone" className="block text-sm font-medium text-[#e2e5eb]">Timezone</label>
<select id="profile-timezone" value={timezone} onChange={(e) => setTimezone(e.target.value)} className={inputClass}>
{COMMON_TIMEZONES.map((tz) => (
<option key={tz} value={tz}>{tz}</option>
@@ -132,8 +132,8 @@ export function ProfileSettingsPage() {
type="submit"
disabled={isSaving || !hasChanges}
className={cn(
'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-brand-dark',
'shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-brand-dark',
'hover:brightness-110 active:scale-[0.98]',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
@@ -144,8 +144,8 @@ export function ProfileSettingsPage() {
<Link
to="/change-password"
className={cn(
'inline-flex items-center rounded-[10px] px-4 py-2 text-sm font-medium',
'bg-white/[0.04] border border-brand-border text-foreground',
'inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium',
'bg-white/[0.04] border border-brand-border text-[#e2e5eb]',
'hover:border-white/[0.12]'
)}
>

30
frontend/src/pages/account/TargetListsPage.tsx
View File

@@ -114,7 +114,7 @@ export default function TargetListsPage() {
action={(
<button
onClick={() => openEditor()}
className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110"
>
<Plus className="h-4 w-4" />
New List
@@ -137,14 +137,14 @@ export default function TargetListsPage() {
{lists.map(list => (
<div
key={list.id}
className="flex items-center justify-between rounded-xl border border-border bg-card px-5 py-4"
className="flex items-center justify-between rounded-xl border border-[#1e2130] bg-[#14161d] px-5 py-4"
>
<div>
<p className="font-medium text-foreground">{list.name}</p>
<p className="font-medium text-[#e2e5eb]">{list.name}</p>
{list.description && (
<p className="text-[0.8125rem] text-muted-foreground">{list.description}</p>
<p className="text-[0.8125rem] text-[#848b9b]">{list.description}</p>
)}
<p className="mt-0.5 font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
<p className="mt-0.5 font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
{list.targets.length} target{list.targets.length !== 1 ? 's' : ''}
{list.targets.length > 0 && (
<> &middot; {list.targets.slice(0, 3).map(t => t.label).join(', ')}{list.targets.length > 3 ? '\u2026' : ''}</>
@@ -154,14 +154,14 @@ export default function TargetListsPage() {
<div className="flex items-center gap-1">
<button
onClick={() => openEditor(list)}
className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
title="Edit"
>
<Pencil className="h-4 w-4" />
</button>
<button
onClick={() => setDeleteTarget(list)}
className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-red-400"
title="Delete"
>
<Trash2 className="h-4 w-4" />
@@ -182,14 +182,14 @@ export default function TargetListsPage() {
<div className="flex justify-end gap-2">
<button
onClick={() => setShowEditor(false)}
className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-lg border border-[#1e2130] px-4 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
Cancel
</button>
<button
onClick={handleSave}
disabled={isSaving}
className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
className="rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
>
{isSaving ? 'Saving\u2026' : 'Save'}
</button>
@@ -198,38 +198,38 @@ export default function TargetListsPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
Name
</label>
<input
type="text"
value={editorName}
onChange={e => setEditorName(e.target.value)}
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder="e.g. RDS Farm A"
/>
</div>
<div>
<label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
Description (optional)
</label>
<input
type="text"
value={editorDescription}
onChange={e => setEditorDescription(e.target.value)}
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder="e.g. Production RDS servers"
/>
</div>
<div>
<label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
Targets &mdash; one per line (add notes after #)
</label>
<textarea
value={editorTargets}
onChange={e => setEditorTargets(e.target.value)}
rows={6}
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
/>
</div>

34
frontend/src/pages/account/TeamCategoriesPage.tsx
View File

@@ -99,26 +99,26 @@ export function TeamCategoriesPage() {
))}
</div>
) : categories.length === 0 ? (
<div className="flex flex-col items-center justify-center bg-card border border-border rounded-xl py-16">
<FolderTree className="h-12 w-12 text-muted-foreground" />
<h3 className="mt-4 font-medium text-foreground">No team categories</h3>
<p className="mt-1 text-sm text-muted-foreground">Create categories to organize your team's trees.</p>
<div className="flex flex-col items-center justify-center bg-[#14161d] border border-[#1e2130] rounded-xl py-16">
<FolderTree className="h-12 w-12 text-[#848b9b]" />
<h3 className="mt-4 font-medium text-[#e2e5eb]">No team categories</h3>
<p className="mt-1 text-sm text-[#848b9b]">Create categories to organize your team's trees.</p>
</div>
) : (
<div className="space-y-2">
{categories.map((cat) => (
<div key={cat.id} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
<div key={cat.id} className="flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3">
<div>
<span className="font-medium text-foreground">{cat.name}</span>
<span className="ml-3 text-sm text-muted-foreground">{cat.slug}</span>
{cat.description && <span className="ml-3 text-sm text-muted-foreground">- {cat.description}</span>}
<span className="ml-3 text-xs text-muted-foreground">{cat.tree_count} trees</span>
<span className="font-medium text-[#e2e5eb]">{cat.name}</span>
<span className="ml-3 text-sm text-[#848b9b]">{cat.slug}</span>
{cat.description && <span className="ml-3 text-sm text-[#848b9b]">- {cat.description}</span>}
<span className="ml-3 text-xs text-[#848b9b]">{cat.tree_count} trees</span>
</div>
<div className="flex items-center gap-1">
<button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
<button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
<Pencil className="h-4 w-4" />
</button>
<button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-muted-foreground hover:bg-red-400/10 hover:text-red-400">
<button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400">
<Trash2 className="h-4 w-4" />
</button>
</div>
@@ -138,15 +138,15 @@ export function TeamCategoriesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Name</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
<Input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
<Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Description</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
<Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
</div>
</div>
@@ -163,15 +163,15 @@ export function TeamCategoriesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Name</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
<Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
<Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Description</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
<Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
</div>
</div>