Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions client/src/hooks/use-classification.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,14 @@ export function useUnclassifiedTransactions(limit = 50) {
});
}

export function useReconciledTransactions(limit = 50) {
const tenantId = useTenantId();
return useQuery<UnclassifiedTransaction[]>({
queryKey: ['/api/classification/reconciled', tenantId, limit],
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Send reconciled limit in request URL

This hook takes a limit argument but only stores it in the query key; the shared query function fetches queryKey[0] as the URL, so the request is always /api/classification/reconciled without ?limit=. The backend then uses its default limit (50), so the reconciled tab can silently truncate results/counts when more than 50 rows exist. Include the limit in the URL itself.

Useful? React with 👍 / 👎.

enabled: !!tenantId,
});
Comment on lines +91 to +96
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useReconciledTransactions(limit) currently never sends limit to the server: the default queryFn only fetches queryKey[0] as the URL, so the extra limit element in the key is ignored and the endpoint will always use its default (50). Consider encoding limit into the URL itself (e.g. /api/classification/reconciled?limit=...) and keep the tenantId as a separate queryKey element for cache scoping.

Copilot uses AI. Check for mistakes.
}

export function useClassificationAudit(transactionId: string | null) {
return useQuery<ClassificationAuditEntry[]>({
queryKey: ['/api/classification/audit', transactionId],
Expand Down Expand Up @@ -191,3 +199,16 @@ export function useAiSuggest() {
onSuccess: () => invalidateClassificationCache(qc),
});
}

/** L3 — unlock a reconciled transaction */
export function useUnreconcileTransaction() {
const qc = useQueryClient();
return useMutation({
mutationFn: (data: { transactionId: string }) =>
apiRequest('POST', '/api/classification/unreconcile', data).then((r) => r.json()),
onSuccess: () => {
invalidateClassificationCache(qc);
qc.invalidateQueries({ queryKey: ['/api/classification/reconciled'] });
},
});
}
160 changes: 128 additions & 32 deletions client/src/pages/Classification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ import {
useChartOfAccounts,
useClassificationStats,
useUnclassifiedTransactions,
useReconciledTransactions,
useClassifyTransaction,
useReconcileTransaction,
useUnreconcileTransaction,
useAiSuggest,
useBatchSuggest,
type UnclassifiedTransaction,
type ChartOfAccount,
} from '@/hooks/use-classification';

type TabMode = 'queue' | 'reconciled';

type SortMode = 'date-desc' | 'amount-desc' | 'confidence-asc' | 'confidence-desc';

function formatCurrency(amount: string | number): string {
Expand Down Expand Up @@ -81,12 +85,15 @@ function compareTransactions(a: UnclassifiedTransaction, b: UnclassifiedTransact
export default function Classification() {
const { data: stats } = useClassificationStats();
const { data: txns = [], isLoading } = useUnclassifiedTransactions(100);
const { data: reconciledTxns = [], isLoading: reconciledLoading } = useReconciledTransactions(100);
const { data: coa = [] } = useChartOfAccounts();
const classify = useClassifyTransaction();
const reconcile = useReconcileTransaction();
const unreconcile = useUnreconcileTransaction();
const aiSuggest = useAiSuggest();
const batchSuggest = useBatchSuggest();

const [activeTab, setActiveTab] = useState<TabMode>('queue');
const [sortMode, setSortMode] = useState<SortMode>('date-desc');
const [lastResult, setLastResult] = useState<string | null>(null);

Expand Down Expand Up @@ -203,41 +210,130 @@ export default function Classification() {
</div>
)}

{/* Sort controls */}
<div className="flex items-center gap-3">
<label className="text-xs text-[hsl(var(--cf-text-muted))]">Sort:</label>
<select
value={sortMode}
onChange={(e) => setSortMode(e.target.value as SortMode)}
className="px-3 py-1.5 text-sm bg-[hsl(var(--cf-surface))] border border-[hsl(var(--cf-border))] rounded-md text-[hsl(var(--cf-text))]"
{/* Tab switcher */}
<div className="flex gap-1 p-1 bg-[hsl(var(--cf-raised))] rounded-lg w-fit">
<button
onClick={() => setActiveTab('queue')}
className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${
activeTab === 'queue'
? 'bg-[hsl(var(--cf-surface))] text-[hsl(var(--cf-text))] shadow-sm'
: 'text-[hsl(var(--cf-text-muted))] hover:text-[hsl(var(--cf-text))]'
}`}
>
Queue ({txns.length})
</button>
<button
onClick={() => setActiveTab('reconciled')}
className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${
activeTab === 'reconciled'
? 'bg-[hsl(var(--cf-surface))] text-[hsl(var(--cf-text))] shadow-sm'
: 'text-[hsl(var(--cf-text-muted))] hover:text-[hsl(var(--cf-text))]'
}`}
>
<option value="date-desc">Most recent</option>
<option value="amount-desc">Largest amount</option>
<option value="confidence-asc">Lowest confidence first</option>
<option value="confidence-desc">Highest confidence first</option>
</select>
Reconciled ({reconciledTxns.length})
</button>
</div>

{/* Transaction queue */}
{isLoading ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">Loading...</div>
) : sortedTxns.length === 0 ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">
No unclassified transactions. Nothing to review.
</div>
) : (
<div className="space-y-2">
{sortedTxns.map((tx) => (
<TransactionRow
key={tx.id}
tx={tx}
coaMap={coaMap}
coa={coa}
onClassify={(code) => handleClassify(tx.id, code)}
onReconcile={() => handleReconcile(tx.id)}
/>
))}
</div>
{/* Queue tab */}
{activeTab === 'queue' && (
<>
{/* Sort controls */}
<div className="flex items-center gap-3">
<label className="text-xs text-[hsl(var(--cf-text-muted))]">Sort:</label>
<select
value={sortMode}
onChange={(e) => setSortMode(e.target.value as SortMode)}
className="px-3 py-1.5 text-sm bg-[hsl(var(--cf-surface))] border border-[hsl(var(--cf-border))] rounded-md text-[hsl(var(--cf-text))]"
>
<option value="date-desc">Most recent</option>
<option value="amount-desc">Largest amount</option>
<option value="confidence-asc">Lowest confidence first</option>
<option value="confidence-desc">Highest confidence first</option>
</select>
</div>

{isLoading ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">Loading...</div>
) : sortedTxns.length === 0 ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">
No unclassified transactions. Nothing to review.
</div>
) : (
<div className="space-y-2">
{sortedTxns.map((tx) => (
<TransactionRow
key={tx.id}
tx={tx}
coaMap={coaMap}
coa={coa}
onClassify={(code) => handleClassify(tx.id, code)}
onReconcile={() => handleReconcile(tx.id)}
/>
))}
</div>
)}
</>
)}

{/* Reconciled tab */}
{activeTab === 'reconciled' && (
<>
{reconciledLoading ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">Loading...</div>
) : reconciledTxns.length === 0 ? (
<div className="text-center py-12 text-[hsl(var(--cf-text-muted))]">
No reconciled transactions yet.
</div>
) : (
<div className="space-y-2">
{reconciledTxns.map((tx) => {
const account = tx.coaCode ? coaMap.get(tx.coaCode) : null;
const amount = parseFloat(tx.amount);
return (
<div key={tx.id} className="bg-[hsl(var(--cf-raised))] border border-[hsl(var(--cf-border))] rounded-lg p-4">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-baseline gap-3">
<span className={`text-lg font-display font-semibold ${amount >= 0 ? 'text-green-400' : 'text-[hsl(var(--cf-text))]'}`}>
{formatCurrency(amount)}
</span>
<span className="text-xs text-[hsl(var(--cf-text-muted))]">{formatDate(tx.date)}</span>
<span className="text-xs text-yellow-400">Reconciled</span>
</div>
<div className="text-sm text-[hsl(var(--cf-text))] mt-1 truncate">{tx.description}</div>
{account && (
<div className="mt-1 text-xs text-green-400">
{account.code} — {account.name}
</div>
)}
{tx.reconciledBy && (
<div className="mt-1 text-[10px] text-[hsl(var(--cf-text-muted))]">
by {tx.reconciledBy} on {tx.reconciledAt ? formatDate(tx.reconciledAt) : '—'}
</div>
)}
</div>
<button
onClick={() => {
unreconcile.mutate(
{ transactionId: tx.id },
{
onSuccess: () => setLastResult('Transaction unlocked'),
onError: (err: any) => setLastResult(`Error: ${err.message}`),
},
);
}}
disabled={unreconcile.isPending}
className="px-3 py-1.5 text-xs font-medium bg-[hsl(var(--cf-raised))] border border-[hsl(var(--cf-border))] text-[hsl(var(--cf-text))] rounded hover:bg-[hsl(var(--cf-surface))] transition-colors disabled:opacity-50 shrink-0"
>
Unlock
</button>
</div>
</div>
);
})}
</div>
)}
</>
)}
</div>
);
Expand Down
109 changes: 68 additions & 41 deletions client/src/pages/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
Expand All @@ -25,6 +25,14 @@ export default function Login() {
return err ? (ERROR_MESSAGES[err] || err) : "";
});
const [loading, setLoading] = useState(false);
const [showEmailForm, setShowEmailForm] = useState(false);

// If there's a ChittyID-related error, expand email form as fallback
useEffect(() => {
if (error && ['auth_unavailable', 'token_exchange', 'no_account'].some(e => error.includes(e) || window.location.search.includes(e))) {
setShowEmailForm(true);
}
}, [error]);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
Expand Down Expand Up @@ -69,57 +77,76 @@ export default function Login() {
<div className="text-xs text-rose-400 bg-rose-400/10 rounded px-3 py-2">{error}</div>
)}

{/* Primary: ChittyID SSO */}
<a
href="/api/auth/chittyid/authorize"
className="flex items-center justify-center gap-2 w-full h-9 rounded-md bg-[hsl(var(--cf-surface))] border border-[hsl(var(--cf-border-subtle))] text-sm font-medium text-[hsl(var(--cf-text))] hover:bg-[hsl(var(--cf-surface-hover))] transition-colors"
className="flex items-center justify-center gap-2 w-full h-10 rounded-md bg-lime-500 hover:bg-lime-600 text-black text-sm font-medium transition-colors"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
<rect width="16" height="16" rx="3" fill="#667eea"/>
<text x="8" y="12" textAnchor="middle" fontSize="10" fontWeight="700" fill="white">ID</text>
<rect width="16" height="16" rx="3" fill="#1a1a1a"/>
<text x="8" y="12" textAnchor="middle" fontSize="10" fontWeight="700" fill="#84cc16">ID</text>
</svg>
Sign in with ChittyID
</a>

<div className="flex items-center gap-3">
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
<span className="text-[10px] text-[hsl(var(--cf-text-muted))] uppercase tracking-wider">or</span>
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
</div>
<p className="text-[10px] text-[hsl(var(--cf-text-muted))] text-center">
Recommended — single sign-on across all ChittyOS services
</p>

<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5">
<Label htmlFor="email" className="text-xs text-[hsl(var(--cf-text-secondary))]">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="h-9 text-sm"
placeholder="you@example.com"
/>
</div>
{/* Collapsible email/password fallback */}
{!showEmailForm ? (
<button
onClick={() => setShowEmailForm(true)}
className="flex items-center justify-center gap-2 w-full text-[10px] text-[hsl(var(--cf-text-muted))] hover:text-[hsl(var(--cf-text))] transition-colors pt-2"
>
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
<span>Use email &amp; password instead</span>
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
</button>
) : (
<>
<div className="flex items-center gap-3">
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
<span className="text-[10px] text-[hsl(var(--cf-text-muted))] uppercase tracking-wider">or email</span>
<div className="flex-1 h-px bg-[hsl(var(--cf-border-subtle))]" />
</div>

<div className="space-y-1.5">
<Label htmlFor="password" className="text-xs text-[hsl(var(--cf-text-secondary))]">Password</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="h-9 text-sm"
/>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5">
<Label htmlFor="email" className="text-xs text-[hsl(var(--cf-text-secondary))]">Email</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="h-9 text-sm"
placeholder="you@example.com"
/>
</div>

<Button
type="submit"
disabled={loading}
className="w-full bg-lime-500 hover:bg-lime-600 text-black font-medium h-9 text-sm"
>
{loading ? "Signing in..." : "Sign In"}
</Button>
</form>
<div className="space-y-1.5">
<Label htmlFor="password" className="text-xs text-[hsl(var(--cf-text-secondary))]">Password</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="h-9 text-sm"
/>
</div>

<Button
type="submit"
disabled={loading}
className="w-full bg-[hsl(var(--cf-surface))] hover:bg-[hsl(var(--cf-surface-hover))] border border-[hsl(var(--cf-border-subtle))] text-[hsl(var(--cf-text))] font-medium h-9 text-sm"
>
{loading ? "Signing in..." : "Sign In with Email"}
</Button>
</form>
</>
)}
</div>
</div>
</div>
Expand Down
Loading
Loading