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

- 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
2026-04-01 00:36:10 +00:00
parent 45325b3e1b
commit eaa03c69e0
9 changed files with 759 additions and 0 deletions
--- a/app/(portal)/portal/login/page.tsx
+++ b/app/(portal)/portal/login/page.tsx
@@ -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',
+};