fix: remove public COPY from Dockerfile, add public/.gitkeep

- Delete app/(portal)/ route group (login, dashboard, invoices, tickets)
- Delete lib/portal-api.ts and lib/portal-auth-store.ts
- Remove Phase 9 portal tests (17–22) from business-flow E2E spec
- Keep portalAccessEnabled in Client type and admin client profile view

.dockerignore

@@ -0,0 +1,9 @@
+.next
+node_modules
+.git
+.env.local
+.env.*.local
+npm-debug.log*
+*.log
+test-results
+playwright-report

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+ENV NODE_ENV=development
+COPY package*.json ./
+RUN npm ci
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node_modules/.bin/next", "start"]

app/(app)/accounting/reports/page.tsx

@@ -1,4 +1,7 @@
 "use client";
+export const dynamic = "force-dynamic";
+
+
 
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";

app/(app)/dashboard/page.tsx

@@ -1,4 +1,7 @@
 "use client";
+export const dynamic = "force-dynamic";
+
+
 
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";

app/(app)/layout.tsx

@@ -1,4 +1,5 @@
 'use client';
+export const dynamic = 'force-dynamic';
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';

app/(app)/reports/page.tsx

@@ -1,4 +1,7 @@
 "use client";
+export const dynamic = "force-dynamic";
+
+
 
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";

app/(portal)/layout.tsx

@@ -1,19 +0,0 @@
-'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>
-  );
-}

app/(portal)/portal/dashboard/page.tsx

@@ -1,206 +0,0 @@
-'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,
-};

app/(portal)/portal/invoices/page.tsx

@@ -1,114 +0,0 @@
-'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>
-  );
-}

app/(portal)/portal/login/page.tsx

@@ -1,118 +0,0 @@
-'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',
-};

app/(portal)/portal/tickets/page.tsx

@@ -1,206 +0,0 @@
-'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 &quot;New Ticket&quot; 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',
-};

app/layout.tsx

@@ -6,6 +6,8 @@ import Providers from '@/components/providers';
 // Fonts are loaded via CSS @import in globals.css (runtime CDN load).
 // CSS vars are set directly in globals.css :root — no JS injection needed.
 
+export const dynamic = 'force-dynamic';
+
 export const metadata: Metadata = {
   title: 'FiberOps Admin',
   description: 'ISP Management Platform',

e2e/business-flow.spec.ts

@@ -2,7 +2,7 @@ import { test, expect, Page } from '@playwright/test';
 
 /**
  * FIBEROPS-248: Full business flow E2E
- * Simulates complete ISP business day — admin ops + subscriber portal
+ * Simulates complete ISP business day — admin ops (tests 1–16)
  *
  * Seed data (pre-created via API):
  *   Plan:   Basic 25Mbps (₱999, POSTPAID)
@@ -11,15 +11,14 @@ import { test, expect, Page } from '@playwright/test';
  *   Invoice: INV-2026-000015
  *   Ticket: "No internet connection"
  *   Lead:   Maria Reyes
- *   Portal: ACC-000029 / Portal123!
+ *
+ * Note: Subscriber portal tests (17–22) live in the fiberops-portal repo.
  */
 
 const BASE = 'http://192.168.1.167:3002';
 const TENANT_SLUG = 'demo-isp';
 const ADMIN_EMAIL = 'admin@demo-isp.com';
 const ADMIN_PASSWORD = 'Admin123!';
-const PORTAL_ACCOUNT = 'ACC-000029';
-const PORTAL_PASSWORD = 'Portal123!';
 
 async function adminLogin(page: Page) {
   await page.goto(`${BASE}/login`);
@@ -281,108 +280,3 @@ test('16. Audit Log — page renders', async ({ page }) => {
   await expect(page.locator('body')).toBeVisible();
 });
 
-// ─── Phase 9: Subscriber Portal ──────────────────────────────────────────────
-
-test('17. Portal — login page renders with FiberOps branding', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-  await expect(page.locator('text=FiberOps').first()).toBeVisible();
-  await expect(page.locator('input[type="password"]')).toBeVisible();
-});
-
-test('18. Portal — rejects wrong credentials', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-
-  await page.locator('input[placeholder*="demo-isp"], input').nth(0).fill(TENANT_SLUG);
-  await page.locator('input[placeholder*="ACC"], input').nth(1).fill(PORTAL_ACCOUNT);
-  await page.locator('input[type="password"]').fill('wrongpassword');
-  await page.locator('button:has-text("Sign In")').click();
-  await page.waitForTimeout(3000);
-
-  // Should stay on login, show error
-  expect(page.url()).toContain('portal');
-  await expect(page.locator('text=failed, text=invalid, text=error').first()).toBeVisible({ timeout: 5000 }).catch(() => {
-    // Error may appear differently — just check no dashboard redirect
-    expect(page.url()).not.toContain('dashboard');
-  });
-});
-
-test('19. Portal — login succeeds with correct credentials', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-
-  // 3 inputs: ISP Code, Account Number, Password
-  const inputs = page.locator('input');
-  await inputs.nth(0).fill(TENANT_SLUG);
-  await inputs.nth(1).fill(PORTAL_ACCOUNT);
-  await inputs.nth(2).fill(PORTAL_PASSWORD);
-  await page.locator('button:has-text("Sign In")').click();
-
-  await expect(page).toHaveURL(/portal\/dashboard/, { timeout: 15000 });
-});
-
-test('20. Portal dashboard — shows account info', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-  const inputs = page.locator('input');
-  await inputs.nth(0).fill(TENANT_SLUG);
-  await inputs.nth(1).fill(PORTAL_ACCOUNT);
-  await inputs.nth(2).fill(PORTAL_PASSWORD);
-  await page.locator('button:has-text("Sign In")').click();
-  await page.waitForURL(/portal\/dashboard/, { timeout: 15000 });
-  await page.waitForTimeout(2000);
-
-  // Should show subscriber name or account
-  await expect(page.locator('text=Juan, text=ACC-000029, text=Basic 25Mbps').first()).toBeVisible({ timeout: 8000 }).catch(() => {
-    // At least the dashboard rendered
-    expect(page.url()).toContain('dashboard');
-  });
-});
-
-test('21. Portal invoices — page loads while authenticated', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-  const inputs = page.locator('input');
-  await inputs.nth(0).fill(TENANT_SLUG);
-  await inputs.nth(1).fill(PORTAL_ACCOUNT);
-  await inputs.nth(2).fill(PORTAL_PASSWORD);
-  await page.locator('button:has-text("Sign In")').click();
-  await page.waitForURL(/portal\/dashboard/, { timeout: 15000 });
-
-  await page.goto(`${BASE}/portal/invoices`);
-  await page.waitForTimeout(2000);
-  // Should not redirect back to login
-  expect(page.url()).not.toContain('/portal/login');
-  await expect(page.locator('body')).toBeVisible();
-});
-
-test('22. Portal tickets — page loads and can raise new ticket', async ({ page }) => {
-  await page.goto(`${BASE}/portal/login`);
-  await page.waitForTimeout(2000);
-  const inputs = page.locator('input');
-  await inputs.nth(0).fill(TENANT_SLUG);
-  await inputs.nth(1).fill(PORTAL_ACCOUNT);
-  await inputs.nth(2).fill(PORTAL_PASSWORD);
-  await page.locator('button:has-text("Sign In")').click();
-  await page.waitForURL(/portal\/dashboard/, { timeout: 15000 });
-
-  await page.goto(`${BASE}/portal/tickets`);
-  await page.waitForTimeout(2000);
-  expect(page.url()).not.toContain('/portal/login');
-
-  // Try raising a ticket
-  const newBtn = page.locator('button:has-text("New"), button:has-text("Raise"), button:has-text("Create")').first();
-  if (await newBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
-    await newBtn.click();
-    await page.waitForTimeout(1000);
-    const subjectField = page.getByLabel('Subject').first();
-    if (await subjectField.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await subjectField.fill('Internet slow today');
-      await page.locator('button:has-text("Submit"), button:has-text("Create"), button[type=submit]').last().click();
-      await page.waitForTimeout(2000);
-    }
-  }
-
-  await expect(page.locator('body')).toBeVisible();
-});

lib/portal-api.ts

@@ -1,33 +0,0 @@
-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;

lib/portal-auth-store.ts

@@ -1,53 +0,0 @@
-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' }
-  )
-);

pages/_document.tsx

@@ -0,0 +1,12 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

pages/_error.tsx

@@ -0,0 +1,14 @@
+// Custom error page — prevents Html import issue in Next.js pages router
+export default function Error({ statusCode }: { statusCode?: number }) {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
+      <h1>{statusCode || 'Error'}</h1>
+      <p>{statusCode === 404 ? 'Page not found' : 'An error occurred'}</p>
+    </div>
+  );
+}
+
+Error.getInitialProps = ({ res, err }: any) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};