kibin/fiberops-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Subscriber portal web — login, dashboard, invoices, tickets (FIBEROPS-243-246)

Browse Source 
- New route group app/(portal)/ separate from admin app
- Minimal portal layout with FiberOps branding, no admin nav
- portal-auth-store.ts: Zustand store with portal_token in localStorage
- portal-api.ts: Axios instance using portal_token + X-Tenant-Slug
- Login page: tenant slug + account number + password form
- Dashboard: account info, subscription details, balance due, quick links
- Invoices page: table with status badges (PAID/PARTIAL/OVERDUE/SENT)
- Tickets page: ticket list + New Ticket modal (POST /portal/tickets)
- Client detail profile tab: Portal Access Enabled/Disabled field
- portalAccessEnabled added to Client type
This commit is contained in:
Nemo (Claude Code)
2026-04-01 00:36:10 +00:00
parent 45325b3e1b
commit eaa03c69e0
9 changed files with 759 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
app/(portal)/portal/invoices/page.tsx Normal file
View File

@@ -0,0 +1,114 @@
'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { usePortalAuthStore } from '@/lib/portal-auth-store';
import portalApi from '@/lib/portal-api';
import { formatCurrency, formatDate } from '@/lib/utils';
interface PortalInvoice {
id: string;
invoiceNumber?: string;
total: number;
balance: number;
dueDate?: string;
status: string;
}
const statusBadge: Record<string, { bg: string; text: string }> = {
PAID: { bg: '#DCFCE7', text: '#16A34A' },
PARTIAL: { bg: '#FEF9C3', text: '#CA8A04' },
OVERDUE: { bg: '#FEE2E2', text: '#DC2626' },
SENT: { bg: '#F1F5F9', text: '#64748B' },
DRAFT: { bg: '#F1F5F9', text: '#64748B' },
VOID: { bg: '#F1F5F9', text: '#94A3B8' },
};
export default function PortalInvoicesPage() {
const router = useRouter();
const { isAuthenticated } = usePortalAuthStore();
const [mounted, setMounted] = useState(false);
const [invoices, setInvoices] = useState<PortalInvoice[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
useEffect(() => { setMounted(true); }, []);
useEffect(() => {
if (!mounted) return;
if (!isAuthenticated) { router.replace('/portal/login'); return; }
portalApi.get('/api/v1/portal/invoices')
.then((res) => {
const data = res.data;
setInvoices(Array.isArray(data) ? data : data.data ?? []);
})
.catch(() => setError('Failed to load invoices.'))
.finally(() => setLoading(false));
}, [mounted, isAuthenticated, router]);
if (!mounted || !isAuthenticated) return null;
return (
<div style={{ maxWidth: 800, margin: '0 auto', padding: '32px 24px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
<Link href="/portal/dashboard" style={{ fontSize: 13, color: '#0891B2', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}>
← Back
</Link>
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#0F172A', margin: 0 }}>Invoice History</h1>
</div>
{error && (
<div style={{ backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 8, padding: '12px 16px', color: '#DC2626', fontSize: 14, marginBottom: 20 }}>
{error}
</div>
)}
<div style={{ backgroundColor: '#ffffff', borderRadius: 12, border: '1px solid #E2E8F0', overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.04)' }}>
{loading ? (
<div style={{ padding: 40, textAlign: 'center', color: '#94A3B8', fontSize: 14 }}>Loading…</div>
) : invoices.length === 0 ? (
<div style={{ padding: 40, textAlign: 'center', color: '#94A3B8', fontSize: 14 }}>No invoices found.</div>
) : (
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ backgroundColor: '#F8FAFC', borderBottom: '1px solid #E2E8F0' }}>
{['Invoice #', 'Amount', 'Balance', 'Due Date', 'Status'].map((h) => (
<th key={h} style={{ padding: '10px 16px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
{h}
</th>
))}
</tr>
</thead>
<tbody>
{invoices.map((inv, i) => {
const badge = statusBadge[inv.status] ?? statusBadge.SENT;
return (
<tr key={inv.id} style={{ borderBottom: i < invoices.length - 1 ? '1px solid #F1F5F9' : 'none' }}>
<td style={{ padding: '12px 16px', fontSize: 13, color: '#0F172A', fontFamily: 'Fira Code, monospace' }}>
{inv.invoiceNumber ?? inv.id.slice(0, 8)}
</td>
<td style={{ padding: '12px 16px', fontSize: 14, color: '#0F172A' }}>
{formatCurrency(Number(inv.total ?? 0))}
</td>
<td style={{ padding: '12px 16px', fontSize: 14, fontWeight: Number(inv.balance) > 0 ? 600 : 400, color: Number(inv.balance) > 0 ? '#DC2626' : '#64748B' }}>
{formatCurrency(Number(inv.balance ?? 0))}
</td>
<td style={{ padding: '12px 16px', fontSize: 14, color: '#64748B' }}>
{inv.dueDate ? formatDate(inv.dueDate) : '—'}
</td>
<td style={{ padding: '12px 16px' }}>
<span style={{ fontSize: 12, fontWeight: 600, padding: '3px 10px', borderRadius: 20, backgroundColor: badge.bg, color: badge.text }}>
{inv.status}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
)}
</div>
</div>
);
}