feat: Subscriber portal web (FIBEROPS-243-246) #12
@@ -547,6 +547,15 @@ export default function ClientDetailPage() {
|
|||||||
<dd className="mt-0.5 text-sm text-gray-900">{value}</dd>
|
<dd className="mt-0.5 text-sm text-gray-900">{value}</dd>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
<div>
|
||||||
|
<dt className="text-xs font-medium text-gray-400 uppercase tracking-wide">Portal Access</dt>
|
||||||
|
<dd className="mt-0.5 text-sm">
|
||||||
|
{client.portalAccessEnabled
|
||||||
|
? <span className="text-green-600 font-medium">Enabled</span>
|
||||||
|
: <span className="text-gray-400">Disabled</span>
|
||||||
|
}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
19
app/(portal)/layout.tsx
Normal file
19
app/(portal)/layout.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
export default function PortalLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div style={{ minHeight: '100vh', backgroundColor: '#F8FAFC', fontFamily: 'Fira Sans, sans-serif' }}>
|
||||||
|
<header style={{ backgroundColor: '#ffffff', borderBottom: '1px solid #E2E8F0', padding: '0 24px' }}>
|
||||||
|
<div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', height: 56 }}>
|
||||||
|
<span style={{ fontSize: 20, fontWeight: 700, color: '#0891B2', letterSpacing: '-0.02em' }}>
|
||||||
|
FiberOps
|
||||||
|
</span>
|
||||||
|
<span style={{ marginLeft: 8, fontSize: 13, color: '#64748B', fontWeight: 500 }}>
|
||||||
|
Subscriber Portal
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>{children}</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
206
app/(portal)/portal/dashboard/page.tsx
Normal file
206
app/(portal)/portal/dashboard/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
'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 } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface AccountData {
|
||||||
|
accountNumber: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
email?: string;
|
||||||
|
phone?: string;
|
||||||
|
subscription?: {
|
||||||
|
planName: string;
|
||||||
|
downloadMbps: number;
|
||||||
|
uploadMbps: number;
|
||||||
|
monthlyRate: number;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
balanceDue: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusColors: Record<string, { bg: string; text: string }> = {
|
||||||
|
ACTIVE: { bg: '#DCFCE7', text: '#16A34A' },
|
||||||
|
SUSPENDED: { bg: '#FEF9C3', text: '#CA8A04' },
|
||||||
|
CANCELLED: { bg: '#FEE2E2', text: '#DC2626' },
|
||||||
|
PENDING: { bg: '#F1F5F9', text: '#64748B' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PortalDashboardPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { isAuthenticated, subscriber, logout } = usePortalAuthStore();
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const [account, setAccount] = useState<AccountData | null>(null);
|
||||||
|
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/account')
|
||||||
|
.then((res) => setAccount(res.data))
|
||||||
|
.catch(() => setError('Failed to load account info.'))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [mounted, isAuthenticated, router]);
|
||||||
|
|
||||||
|
if (!mounted || !isAuthenticated) return null;
|
||||||
|
|
||||||
|
const handleLogout = () => { logout(); router.replace('/portal/login'); };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: 800, margin: '0 auto', padding: '32px 24px' }}>
|
||||||
|
{/* Header row */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
|
||||||
|
<div>
|
||||||
|
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#0F172A', marginBottom: 2 }}>
|
||||||
|
Welcome, {subscriber?.firstName ?? 'Subscriber'}
|
||||||
|
</h1>
|
||||||
|
<p style={{ fontSize: 14, color: '#64748B' }}>Account #{subscriber?.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
style={{ fontSize: 13, color: '#64748B', background: 'none', border: '1px solid #E2E8F0', borderRadius: 8, padding: '7px 14px', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div style={{ backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 8, padding: '12px 16px', color: '#DC2626', fontSize: 14, marginBottom: 20 }}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
{[1, 2, 3].map((i) => (
|
||||||
|
<div key={i} style={{ backgroundColor: '#ffffff', borderRadius: 12, border: '1px solid #E2E8F0', padding: 24, height: 100, animation: 'pulse 1.5s infinite' }} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : account && (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
{/* Account Info */}
|
||||||
|
<div style={cardStyle}>
|
||||||
|
<h2 style={cardTitleStyle}>Account Information</h2>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', marginTop: 12 }}>
|
||||||
|
{[
|
||||||
|
{ label: 'Full Name', value: `${account.firstName} ${account.lastName}` },
|
||||||
|
{ label: 'Account Number', value: account.accountNumber },
|
||||||
|
{ label: 'Email', value: account.email || '—' },
|
||||||
|
{ label: 'Phone', value: account.phone || '—' },
|
||||||
|
].map(({ label, value }) => (
|
||||||
|
<div key={label}>
|
||||||
|
<p style={{ fontSize: 11, fontWeight: 600, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>{label}</p>
|
||||||
|
<p style={{ fontSize: 14, color: '#0F172A' }}>{value}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subscription */}
|
||||||
|
<div style={cardStyle}>
|
||||||
|
<h2 style={cardTitleStyle}>Active Subscription</h2>
|
||||||
|
{account.subscription ? (
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', marginTop: 12 }}>
|
||||||
|
<div>
|
||||||
|
<p style={labelStyle}>Plan</p>
|
||||||
|
<p style={{ fontSize: 14, color: '#0F172A', fontWeight: 600 }}>{account.subscription.planName}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p style={labelStyle}>Speed</p>
|
||||||
|
<p style={{ fontSize: 14, color: '#0F172A', fontFamily: 'Fira Code, monospace' }}>
|
||||||
|
{account.subscription.downloadMbps}↓ / {account.subscription.uploadMbps}↑ Mbps
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p style={labelStyle}>Monthly Rate</p>
|
||||||
|
<p style={{ fontSize: 14, color: '#0F172A', fontWeight: 600 }}>{formatCurrency(account.subscription.monthlyRate)}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p style={labelStyle}>Status</p>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: '3px 10px',
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: (statusColors[account.subscription.status] ?? statusColors.PENDING).bg,
|
||||||
|
color: (statusColors[account.subscription.status] ?? statusColors.PENDING).text,
|
||||||
|
}}>
|
||||||
|
{account.subscription.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p style={{ fontSize: 14, color: '#94A3B8', marginTop: 12 }}>No active subscription.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Balance Due */}
|
||||||
|
<div style={{ ...cardStyle, border: account.balanceDue > 0 ? '1px solid #FECACA' : '1px solid #E2E8F0' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<h2 style={cardTitleStyle}>Balance Due</h2>
|
||||||
|
<span style={{
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 700,
|
||||||
|
fontFamily: 'Fira Code, monospace',
|
||||||
|
color: account.balanceDue > 0 ? '#DC2626' : '#16A34A',
|
||||||
|
}}>
|
||||||
|
{formatCurrency(account.balanceDue)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{account.balanceDue > 0 && (
|
||||||
|
<p style={{ fontSize: 13, color: '#DC2626', marginTop: 8 }}>
|
||||||
|
You have an outstanding balance. Please settle your invoices to avoid service interruption.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<Link href="/portal/invoices" style={{ ...cardStyle, textDecoration: 'none', display: 'block', textAlign: 'center', padding: '20px 16px' }}>
|
||||||
|
<div style={{ fontSize: 28, marginBottom: 8 }}>🧾</div>
|
||||||
|
<p style={{ fontSize: 15, fontWeight: 600, color: '#0891B2' }}>View Invoices</p>
|
||||||
|
<p style={{ fontSize: 13, color: '#64748B', marginTop: 2 }}>See your billing history</p>
|
||||||
|
</Link>
|
||||||
|
<Link href="/portal/tickets" style={{ ...cardStyle, textDecoration: 'none', display: 'block', textAlign: 'center', padding: '20px 16px' }}>
|
||||||
|
<div style={{ fontSize: 28, marginBottom: 8 }}>🎫</div>
|
||||||
|
<p style={{ fontSize: 15, fontWeight: 600, color: '#0891B2' }}>Support Tickets</p>
|
||||||
|
<p style={{ fontSize: 13, color: '#64748B', marginTop: 2 }}>View or raise a ticket</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cardStyle: React.CSSProperties = {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
borderRadius: 12,
|
||||||
|
border: '1px solid #E2E8F0',
|
||||||
|
padding: 24,
|
||||||
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
|
||||||
|
};
|
||||||
|
|
||||||
|
const cardTitleStyle: React.CSSProperties = {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: '#0F172A',
|
||||||
|
margin: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelStyle: React.CSSProperties = {
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: '#94A3B8',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
marginBottom: 2,
|
||||||
|
};
|
||||||
114
app/(portal)/portal/invoices/page.tsx
Normal file
114
app/(portal)/portal/invoices/page.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
118
app/(portal)/portal/login/page.tsx
Normal file
118
app/(portal)/portal/login/page.tsx
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { usePortalAuthStore } from '@/lib/portal-auth-store';
|
||||||
|
|
||||||
|
export default function PortalLoginPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const login = usePortalAuthStore((s) => s.login);
|
||||||
|
const [form, setForm] = useState({ tenantSlug: '', accountNumber: '', password: '' });
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await login(form.tenantSlug, form.accountNumber, form.password);
|
||||||
|
router.replace('/portal/dashboard');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const msg = (err as any)?.response?.data?.message ?? 'Login failed. Check your credentials.';
|
||||||
|
setError(msg);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 'calc(100vh - 56px)', padding: '24px' }}>
|
||||||
|
<div style={{ width: '100%', maxWidth: 400 }}>
|
||||||
|
<div style={{ backgroundColor: '#ffffff', borderRadius: 12, border: '1px solid #E2E8F0', padding: 32, boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
|
||||||
|
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#0F172A', marginBottom: 4 }}>Sign in to your account</h1>
|
||||||
|
<p style={{ fontSize: 14, color: '#64748B', marginBottom: 24 }}>Enter your ISP code and account details to continue.</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div style={{ backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 8, padding: '10px 14px', marginBottom: 16, color: '#DC2626', fontSize: 14 }}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: '#374151', marginBottom: 6 }}>
|
||||||
|
ISP Code (Tenant Slug)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={form.tenantSlug}
|
||||||
|
onChange={(e) => setForm({ ...form, tenantSlug: e.target.value })}
|
||||||
|
placeholder="e.g. demo-isp"
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: '#374151', marginBottom: 6 }}>
|
||||||
|
Account Number
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={form.accountNumber}
|
||||||
|
onChange={(e) => setForm({ ...form, accountNumber: e.target.value })}
|
||||||
|
placeholder="e.g. ACC-2025-0001"
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: '#374151', marginBottom: 6 }}>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
value={form.password}
|
||||||
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||||
|
placeholder="••••••••"
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
style={{
|
||||||
|
backgroundColor: loading ? '#67C5DD' : '#0891B2',
|
||||||
|
color: '#ffffff',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: '11px 16px',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
cursor: loading ? 'not-allowed' : 'pointer',
|
||||||
|
marginTop: 4,
|
||||||
|
transition: 'background-color 0.15s',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? 'Signing in…' : 'Sign In'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputStyle: React.CSSProperties = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '9px 12px',
|
||||||
|
border: '1px solid #D1D5DB',
|
||||||
|
borderRadius: 8,
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#0F172A',
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
outline: 'none',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
};
|
||||||
206
app/(portal)/portal/tickets/page.tsx
Normal file
206
app/(portal)/portal/tickets/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
'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 { formatDate } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface PortalTicket {
|
||||||
|
id: string;
|
||||||
|
subject: string;
|
||||||
|
status: string;
|
||||||
|
type?: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusBadge: Record<string, { bg: string; text: string }> = {
|
||||||
|
OPEN: { bg: '#DBEAFE', text: '#1D4ED8' },
|
||||||
|
IN_PROGRESS: { bg: '#FEF9C3', text: '#CA8A04' },
|
||||||
|
RESOLVED: { bg: '#DCFCE7', text: '#16A34A' },
|
||||||
|
CLOSED: { bg: '#F1F5F9', text: '#64748B' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PortalTicketsPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { isAuthenticated } = usePortalAuthStore();
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const [tickets, setTickets] = useState<PortalTicket[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [form, setForm] = useState({ subject: '', description: '' });
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [submitError, setSubmitError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => { setMounted(true); }, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!mounted) return;
|
||||||
|
if (!isAuthenticated) { router.replace('/portal/login'); return; }
|
||||||
|
loadTickets();
|
||||||
|
}, [mounted, isAuthenticated, router]);
|
||||||
|
|
||||||
|
const loadTickets = () => {
|
||||||
|
setLoading(true);
|
||||||
|
portalApi.get('/api/v1/portal/tickets')
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data;
|
||||||
|
setTickets(Array.isArray(data) ? data : data.data ?? []);
|
||||||
|
})
|
||||||
|
.catch(() => setError('Failed to load tickets.'))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitTicket = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitError('');
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
await portalApi.post('/api/v1/portal/tickets', form);
|
||||||
|
setShowModal(false);
|
||||||
|
setForm({ subject: '', description: '' });
|
||||||
|
loadTickets();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
setSubmitError((err as any)?.response?.data?.message ?? 'Failed to submit ticket.');
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!mounted || !isAuthenticated) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: 800, margin: '0 auto', padding: '32px 24px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<Link href="/portal/dashboard" style={{ fontSize: 13, color: '#0891B2', textDecoration: 'none' }}>
|
||||||
|
← Back
|
||||||
|
</Link>
|
||||||
|
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#0F172A', margin: 0 }}>Support Tickets</h1>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
style={{ backgroundColor: '#059669', color: '#ffffff', border: 'none', borderRadius: 8, padding: '9px 18px', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
+ New Ticket
|
||||||
|
</button>
|
||||||
|
</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>
|
||||||
|
) : tickets.length === 0 ? (
|
||||||
|
<div style={{ padding: 40, textAlign: 'center', color: '#94A3B8', fontSize: 14 }}>
|
||||||
|
No tickets yet. Click "New Ticket" to raise a support request.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ backgroundColor: '#F8FAFC', borderBottom: '1px solid #E2E8F0' }}>
|
||||||
|
{['Subject', 'Type', 'Status', 'Date'].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>
|
||||||
|
{tickets.map((t, i) => {
|
||||||
|
const badge = statusBadge[t.status] ?? statusBadge.CLOSED;
|
||||||
|
return (
|
||||||
|
<tr key={t.id} style={{ borderBottom: i < tickets.length - 1 ? '1px solid #F1F5F9' : 'none' }}>
|
||||||
|
<td style={{ padding: '12px 16px', fontSize: 14, color: '#0F172A', fontWeight: 500 }}>{t.subject}</td>
|
||||||
|
<td style={{ padding: '12px 16px', fontSize: 13, color: '#64748B' }}>{t.type ?? '—'}</td>
|
||||||
|
<td style={{ padding: '12px 16px' }}>
|
||||||
|
<span style={{ fontSize: 12, fontWeight: 600, padding: '3px 10px', borderRadius: 20, backgroundColor: badge.bg, color: badge.text }}>
|
||||||
|
{t.status.replace('_', ' ')}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td style={{ padding: '12px 16px', fontSize: 13, color: '#64748B' }}>{formatDate(t.createdAt)}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New Ticket Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 24 }}>
|
||||||
|
<div style={{ backgroundColor: '#ffffff', borderRadius: 12, padding: 28, width: '100%', maxWidth: 480, boxShadow: '0 20px 60px rgba(0,0,0,0.15)' }}>
|
||||||
|
<h2 style={{ fontSize: 18, fontWeight: 700, color: '#0F172A', marginBottom: 4 }}>New Support Ticket</h2>
|
||||||
|
<p style={{ fontSize: 13, color: '#64748B', marginBottom: 20 }}>Describe your issue and our team will get back to you.</p>
|
||||||
|
|
||||||
|
{submitError && (
|
||||||
|
<div style={{ backgroundColor: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 8, padding: '10px 14px', color: '#DC2626', fontSize: 13, marginBottom: 16 }}>
|
||||||
|
{submitError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmitTicket} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: '#374151', marginBottom: 6 }}>Subject</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={form.subject}
|
||||||
|
onChange={(e) => setForm({ ...form, subject: e.target.value })}
|
||||||
|
placeholder="e.g. Internet not working"
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: '#374151', marginBottom: 6 }}>Description</label>
|
||||||
|
<textarea
|
||||||
|
required
|
||||||
|
value={form.description}
|
||||||
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||||
|
placeholder="Please describe your issue in detail…"
|
||||||
|
rows={4}
|
||||||
|
style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => { setShowModal(false); setSubmitError(''); setForm({ subject: '', description: '' }); }}
|
||||||
|
style={{ fontSize: 14, color: '#64748B', background: 'none', border: '1px solid #E2E8F0', borderRadius: 8, padding: '9px 18px', cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={submitting}
|
||||||
|
style={{ backgroundColor: submitting ? '#67C5DD' : '#0891B2', color: '#ffffff', border: 'none', borderRadius: 8, padding: '9px 18px', fontSize: 14, fontWeight: 600, cursor: submitting ? 'not-allowed' : 'pointer' }}
|
||||||
|
>
|
||||||
|
{submitting ? 'Submitting…' : 'Submit Ticket'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputStyle: React.CSSProperties = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '9px 12px',
|
||||||
|
border: '1px solid #D1D5DB',
|
||||||
|
borderRadius: 8,
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#0F172A',
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
outline: 'none',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
};
|
||||||
33
lib/portal-api.ts
Normal file
33
lib/portal-api.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const portalApi = axios.create({
|
||||||
|
baseURL: process.env.NEXT_PUBLIC_API_URL || 'https://fiberops-api.juankibin.space',
|
||||||
|
});
|
||||||
|
|
||||||
|
portalApi.interceptors.request.use((config) => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const token = localStorage.getItem('portal_token');
|
||||||
|
const authRaw = localStorage.getItem('portal_auth');
|
||||||
|
const tenantSlug = authRaw ? JSON.parse(authRaw)?.state?.tenantSlug : null;
|
||||||
|
if (token) config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
if (tenantSlug) {
|
||||||
|
config.headers['x-tenant-slug'] = tenantSlug;
|
||||||
|
config.headers['X-Tenant-Slug'] = tenantSlug;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
portalApi.interceptors.response.use(
|
||||||
|
(res) => res,
|
||||||
|
(err) => {
|
||||||
|
if (err.response?.status === 401 && typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('portal_token');
|
||||||
|
localStorage.removeItem('portal_auth');
|
||||||
|
window.location.href = '/portal/login';
|
||||||
|
}
|
||||||
|
return Promise.reject(err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default portalApi;
|
||||||
53
lib/portal-auth-store.ts
Normal file
53
lib/portal-auth-store.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { persist } from 'zustand/middleware';
|
||||||
|
import portalApi from './portal-api';
|
||||||
|
|
||||||
|
interface PortalSubscriber {
|
||||||
|
accountNumber: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PortalAuthState {
|
||||||
|
subscriber: PortalSubscriber | null;
|
||||||
|
portalToken: string | null;
|
||||||
|
tenantSlug: string | null;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
login: (tenantSlug: string, accountNumber: string, password: string) => Promise<void>;
|
||||||
|
logout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const usePortalAuthStore = create<PortalAuthState>()(
|
||||||
|
persist(
|
||||||
|
(set) => ({
|
||||||
|
subscriber: null,
|
||||||
|
portalToken: null,
|
||||||
|
tenantSlug: null,
|
||||||
|
isAuthenticated: false,
|
||||||
|
login: async (tenantSlug, accountNumber, password) => {
|
||||||
|
const res = await portalApi.post('/api/v1/portal/auth/login', {
|
||||||
|
tenantSlug,
|
||||||
|
accountNumber,
|
||||||
|
password,
|
||||||
|
});
|
||||||
|
const { token, subscriber } = res.data;
|
||||||
|
localStorage.setItem('portal_token', token);
|
||||||
|
set({
|
||||||
|
portalToken: token,
|
||||||
|
tenantSlug,
|
||||||
|
subscriber: {
|
||||||
|
accountNumber: subscriber.accountNumber,
|
||||||
|
firstName: subscriber.firstName,
|
||||||
|
lastName: subscriber.lastName,
|
||||||
|
},
|
||||||
|
isAuthenticated: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
logout: () => {
|
||||||
|
localStorage.removeItem('portal_token');
|
||||||
|
set({ subscriber: null, portalToken: null, tenantSlug: null, isAuthenticated: false });
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{ name: 'portal_auth' }
|
||||||
|
)
|
||||||
|
);
|
||||||
@@ -52,6 +52,7 @@ export interface Client {
|
|||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
area?: { id: string; name: string };
|
area?: { id: string; name: string };
|
||||||
subscriptions?: Subscription[];
|
subscriptions?: Subscription[];
|
||||||
|
portalAccessEnabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Subscription {
|
export interface Subscription {
|
||||||
|
|||||||
Reference in New Issue
Block a user