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

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>