feat(psa): add Post History tab placeholder to Integrations page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield } from 'lucide-react'
|
import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield, History, Ticket } from 'lucide-react'
|
||||||
import { PageMeta } from '@/components/common/PageMeta'
|
import { PageMeta } from '@/components/common/PageMeta'
|
||||||
import { integrationsApi } from '@/api/integrations'
|
import { integrationsApi } from '@/api/integrations'
|
||||||
import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
|
import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
|
||||||
@@ -38,7 +38,10 @@ const emptyForm: ConnectionForm = {
|
|||||||
client_id: '',
|
client_id: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type Tab = 'connection' | 'post-history'
|
||||||
|
|
||||||
export function IntegrationsPage() {
|
export function IntegrationsPage() {
|
||||||
|
const [activeTab, setActiveTab] = useState<Tab>('connection')
|
||||||
const [connection, setConnection] = useState<PsaConnectionResponse | null>(null)
|
const [connection, setConnection] = useState<PsaConnectionResponse | null>(null)
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [error, setError] = useState<string | null>(null)
|
const [error, setError] = useState<string | null>(null)
|
||||||
@@ -224,6 +227,30 @@ export function IntegrationsPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="mb-6 flex gap-1 border-b border-border">
|
||||||
|
{([
|
||||||
|
{ id: 'connection' as Tab, label: 'Connection', icon: Plug },
|
||||||
|
{ id: 'post-history' as Tab, label: 'Post History', icon: History },
|
||||||
|
]).map(({ id, label, icon: Icon }) => (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
onClick={() => setActiveTab(id)}
|
||||||
|
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'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Connection Tab */}
|
||||||
|
{activeTab === 'connection' && (
|
||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
{/* Setup / Edit Form */}
|
{/* Setup / Edit Form */}
|
||||||
{(mode === 'setup' || mode === 'edit') && (
|
{(mode === 'setup' || mode === 'edit') && (
|
||||||
@@ -497,6 +524,24 @@ export function IntegrationsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Post History Tab */}
|
||||||
|
{activeTab === 'post-history' && (
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="glass-card-static 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>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user