GraeJones01/AdPlatform-Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Grae Jones
2026-02-03 15:45:39 -08:00
commit 3647b304a3
74 changed files with 27121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules/

6
Client-Admin/.babelrc Normal file
View File

@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
]
}

72
Client-Admin/README.md Normal file
View File

@@ -0,0 +1,72 @@
# AdPlatform Management Console
React-based admin interface for AdPlatform management.
## Project Structure
```
management-client/
├── src/
│ ├── app/
│ │ └── App.js # Main app routing
│ ├── auth/
│ │ ├── authConfig.js # MSAL + API config
│ │ └── AuthProvider.jsx # Auth context
│ ├── components/
│ │ ├── admin/
│ │ │ ├── ClientsPanel.jsx # Client management
│ │ │ ├── UsersPanel.jsx # User management
│ │ │ └── SessionsPanel.jsx # Session management
│ │ ├── Shell.jsx # Layout wrapper
│ │ ├── SignInOverlay.jsx # Sign in screen
│ │ ├── RegistrationForm.jsx # New org setup
│ │ └── Dashboard.jsx # Main dashboard
│ ├── styles/
│ │ └── app.css
│ └── index.js
├── public/
│ └── index.html
├── package.json
└── webpack.config.js
```
## Features
- **Authentication**: Microsoft Entra External ID (MSAL.js)
- **Onboarding**: New user registration with organization setup
- **Client Management**: Create, list, deactivate clients
- **User Management**: Create, list, link to clients, deactivate users
- **Session Management**: View active sessions, revoke, cleanup
## Setup
```bash
npm install
npm start
```
Opens at http://localhost:3000
## Configuration
Edit `src/auth/authConfig.js`:
```javascript
export const msalConfig = {
auth: {
clientId: 'YOUR_CLIENT_ID',
authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
}
};
export const API_BASE_URL = 'https://your-management-api.com';
export const GATEWAY_API_URL = 'https://your-gateway-api.com';
```
## User Flow
1. User signs in with Microsoft → JWT obtained
2. App checks `/api/onboarding/status`
3. If not registered → Registration form shown
4. After registration → Session created via Gateway
5. Dashboard displayed with admin tabs

2
Client-Admin/dist/bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
Client-Admin/dist/bundle.js.LICENSE.txt vendored Normal file
View File

@@ -0,0 +1,47 @@
/*! @azure/msal-browser v3.30.0 2025-08-05 */
/*! @azure/msal-common v14.16.1 2025-08-05 */
/*! @azure/msal-react v2.2.0 2024-11-05 */
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

1
Client-Admin/dist/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AdPlatform Management</title><link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"></head><body><div id="root"></div><script defer="defer" src="bundle.js"></script></body></html>

7302
Client-Admin/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
Client-Admin/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "adplatform-management",
"version": "1.0.0",
"description": "AdPlatform Management Console",
"scripts": {
"start": "webpack serve --mode development --open",
"build": "webpack --mode production"
},
"dependencies": {
"@azure/msal-browser": "^3.6.0",
"@azure/msal-react": "^2.0.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.23.0",
"@babel/preset-react": "^7.23.0",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.3",
"style-loader": "^3.3.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.2.3"
}
}

13
Client-Admin/public/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdPlatform Management</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>

43
Client-Admin/src/app/App.js Normal file
View File

@@ -0,0 +1,43 @@
import React, { useState } from 'react';
import { useAuth } from '../auth/AuthProvider';
import Shell from '../components/Shell';
import SignInOverlay from '../components/SignInOverlay';
import RegistrationForm from '../components/RegistrationForm';
import Dashboard from '../components/Dashboard';
export default function App() {
const { isLoading, isSignedIn, isRegistered, needsRegistration } = useAuth();
if (isLoading) {
return (
<Shell>
<div className="loading-container">
<div className="spinner"></div>
<p>Loading...</p>
</div>
</Shell>
);
}
if (!isSignedIn) {
return (
<Shell>
<SignInOverlay />
</Shell>
);
}
if (needsRegistration && !isRegistered) {
return (
<Shell>
<RegistrationForm />
</Shell>
);
}
return (
<Shell>
<Dashboard />
</Shell>
);
}

219
Client-Admin/src/auth/AuthProvider.jsx Normal file
View File

@@ -0,0 +1,219 @@
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
import { PublicClientApplication, InteractionStatus } from '@azure/msal-browser';
import { MsalProvider, useMsal, useIsAuthenticated } from '@azure/msal-react';
import { msalConfig, loginRequest, API_BASE_URL, GATEWAY_API_URL } from './authConfig';
const msalInstance = new PublicClientApplication(msalConfig);
const AuthContext = createContext(null);
export function useAuth() {
return useContext(AuthContext);
}
function AuthProviderInner({ children }) {
const { instance, accounts, inProgress } = useMsal();
const isAuthenticated = useIsAuthenticated();
const [authState, setAuthState] = useState({
isLoading: true,
isSignedIn: false,
isRegistered: false,
needsRegistration: false,
user: null,
session: null,
clients: [],
error: null,
});
const getIdToken = useCallback(async () => {
if (accounts.length === 0) return null;
try {
const response = await instance.acquireTokenSilent({
...loginRequest,
account: accounts[0],
});
return response.idToken;
} catch (error) {
console.error('Token acquisition failed:', error);
return null;
}
}, [instance, accounts]);
const checkRegistration = useCallback(async () => {
const token = await getIdToken();
if (!token) return null;
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/status`, {
headers: { 'Authorization': `Bearer ${token}` }
});
return await response.json();
} catch (error) {
console.error('Registration check failed:', error);
return null;
}
}, [getIdToken]);
const register = useCallback(async (clientName) => {
const token = await getIdToken();
if (!token) throw new Error('Not authenticated');
const response = await fetch(`${API_BASE_URL}/api/onboarding/register`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ clientName }),
});
const data = await response.json();
if (!data.ok) throw new Error(data.error || 'Registration failed');
return data;
}, [getIdToken]);
const createSession = useCallback(async () => {
const token = await getIdToken();
if (!token) throw new Error('Not authenticated');
const response = await fetch(`${GATEWAY_API_URL}/api/auth/session`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({}),
});
const data = await response.json();
if (!data.ok) throw new Error(data.error || 'Session creation failed');
return data.data || data;
}, [getIdToken]);
const signIn = useCallback(async () => {
try {
await instance.loginPopup(loginRequest);
} catch (error) {
console.error('Login failed:', error);
setAuthState(prev => ({ ...prev, error: error.message }));
}
}, [instance]);
const signOut = useCallback(async () => {
await instance.logoutPopup();
setAuthState({
isLoading: false,
isSignedIn: false,
isRegistered: false,
needsRegistration: false,
user: null,
session: null,
clients: [],
error: null,
});
}, [instance]);
useEffect(() => {
if (inProgress !== InteractionStatus.None) return;
const initAuth = async () => {
if (!isAuthenticated || accounts.length === 0) {
setAuthState(prev => ({ ...prev, isLoading: false, isSignedIn: false }));
return;
}
const account = accounts[0];
setAuthState(prev => ({
...prev,
isSignedIn: true,
user: { name: account.name, email: account.username },
}));
const status = await checkRegistration();
if (status?.ok) {
if (status.isRegistered) {
try {
const session = await createSession();
setAuthState(prev => ({
...prev,
isLoading: false,
isRegistered: true,
needsRegistration: false,
session,
clients: status.clients || [],
}));
} catch (error) {
setAuthState(prev => ({
...prev,
isLoading: false,
isRegistered: true,
error: error.message,
}));
}
} else {
setAuthState(prev => ({
...prev,
isLoading: false,
isRegistered: false,
needsRegistration: true,
}));
}
} else {
setAuthState(prev => ({
...prev,
isLoading: false,
error: 'Failed to check registration status',
}));
}
};
initAuth();
}, [isAuthenticated, accounts, inProgress, checkRegistration, createSession]);
const completeRegistration = useCallback(async (clientName) => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
try {
await register(clientName);
const session = await createSession();
setAuthState(prev => ({
...prev,
isLoading: false,
isRegistered: true,
needsRegistration: false,
session,
}));
return true;
} catch (error) {
setAuthState(prev => ({
...prev,
isLoading: false,
error: error.message,
}));
return false;
}
}, [register, createSession]);
const value = {
...authState,
signIn,
signOut,
getIdToken,
completeRegistration,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export function AuthProvider({ children }) {
return (
<MsalProvider instance={msalInstance}>
<AuthProviderInner>{children}</AuthProviderInner>
</MsalProvider>
);
}

25
Client-Admin/src/auth/authConfig.js Normal file
View File

@@ -0,0 +1,25 @@
/**
* MSAL Configuration for Entra External ID
*/
export const msalConfig = {
auth: {
clientId: '154c9111-14a0-4c0f-8132-7bc68254a74e',
authority: 'https://login.microsoftonline.com/891f98f1-ed34-42a1-9b6c-28b0554d92c2',
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false,
},
};
export const loginRequest = {
scopes: ['openid', 'profile', 'email'],
};
// Management API base URL
export const API_BASE_URL = 'https://usim-adp-management.lemonbeach-1e8e273b.westus.azurecontainerapps.io';
// Gateway API base URL
export const GATEWAY_API_URL = 'https://adsapi.usimdev.com';

135
Client-Admin/src/components/Dashboard.jsx Normal file
View File

@@ -0,0 +1,135 @@
import React, { useState, useEffect, useCallback } from 'react';
import { useAuth } from '../auth/AuthProvider';
import { API_BASE_URL } from '../auth/authConfig';
import ClientsPanel from './admin/ClientsPanel';
import UsersPanel from './admin/UsersPanel';
import SessionsPanel from './admin/SessionsPanel';
export default function Dashboard() {
const { session } = useAuth();
const [activeTab, setActiveTab] = useState('overview');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [refreshKey, setRefreshKey] = useState(0);
const fetchData = useCallback(async (endpoint) => {
if (!session?.sessionToken) return null;
setLoading(true);
setError(null);
try {
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
headers: { 'X-Session-Token': session.sessionToken }
});
const result = await response.json();
if (!result.ok) throw new Error(result.error || 'Request failed');
return result;
} catch (err) {
setError(err.message);
return null;
} finally {
setLoading(false);
}
}, [session]);
const refresh = () => setRefreshKey(k => k + 1);
useEffect(() => {
const loadData = async () => {
let result = null;
switch (activeTab) {
case 'overview':
result = await fetchData('/api/monitoring/health');
break;
case 'clients':
result = await fetchData('/api/admin/clients');
break;
case 'users':
result = await fetchData('/api/admin/users');
break;
case 'sessions':
result = await fetchData('/api/admin/sessions');
break;
}
setData(result);
};
loadData();
}, [activeTab, fetchData, refreshKey]);
const tabs = [
{ id: 'overview', label: 'Overview' },
{ id: 'clients', label: 'Clients' },
{ id: 'users', label: 'Users' },
{ id: 'sessions', label: 'Sessions' },
];
return (
<div className="dashboard">
<div className="dashboard-header">
<h1>Management Dashboard</h1>
<div className="dashboard-info">
<span className="info-item"><strong>Client:</strong> {session?.clientName}</span>
<span className="info-item"><strong>Role:</strong> {session?.role}</span>
</div>
</div>
<nav className="dashboard-tabs">
{tabs.map(tab => (
<button
key={tab.id}
className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
onClick={() => setActiveTab(tab.id)}
>
{tab.label}
</button>
))}
</nav>
<div className="dashboard-content">
{loading && (
<div className="loading-container">
<div className="spinner"></div>
<p>Loading...</p>
</div>
)}
{error && <div className="error-message">{error}</div>}
{!loading && !error && data && (
<div className="data-panel">
{activeTab === 'overview' && <OverviewPanel data={data} />}
{activeTab === 'clients' && <ClientsPanel data={data} sessionToken={session?.sessionToken} onRefresh={refresh} />}
{activeTab === 'users' && <UsersPanel data={data} sessionToken={session?.sessionToken} onRefresh={refresh} />}
{activeTab === 'sessions' && <SessionsPanel data={data} sessionToken={session?.sessionToken} onRefresh={refresh} />}
</div>
)}
</div>
</div>
);
}
function OverviewPanel({ data }) {
return (
<div className="overview-panel">
<h2>System Overview</h2>
<div className="stats-grid">
<StatCard label="Active Clients" value={data.activeClients} />
<StatCard label="Active Users" value={data.activeUsers} />
<StatCard label="Active Sessions" value={data.activeSessions} />
<StatCard label="API Calls (24h)" value={data.apiCalls24h} />
</div>
<p className="server-time">Server Time: {new Date(data.serverTimeUtc).toLocaleString()}</p>
</div>
);
}
function StatCard({ label, value }) {
return (
<div className="stat-card">
<div className="stat-value">{value ?? '-'}</div>
<div className="stat-label">{label}</div>
</div>
);
}

57
Client-Admin/src/components/RegistrationForm.jsx Normal file
View File

@@ -0,0 +1,57 @@
import React, { useState } from 'react';
import { useAuth } from '../auth/AuthProvider';
export default function RegistrationForm() {
const { user, completeRegistration, error: authError } = useAuth();
const [clientName, setClientName] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
if (!clientName.trim()) {
setError('Organization name is required');
return;
}
setLoading(true);
setError(null);
const success = await completeRegistration(clientName.trim());
if (!success) setLoading(false);
};
return (
<div className="registration-container">
<div className="registration-card">
<h1>Complete Registration</h1>
<p className="registration-subtitle">
Welcome, {user?.name || user?.email}! Set up your organization to get started.
</p>
{(error || authError) && <div className="error-message">{error || authError}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="clientName">Organization Name</label>
<input
type="text"
id="clientName"
value={clientName}
onChange={(e) => setClientName(e.target.value)}
placeholder="e.g., Acme Corporation"
disabled={loading}
autoFocus
/>
<span className="form-help">This is the name that will appear on your advertising accounts</span>
</div>
<button type="submit" className="btn-primary" disabled={loading}>
{loading ? 'Creating...' : 'Create Organization'}
</button>
</form>
</div>
</div>
);
}

31
Client-Admin/src/components/Shell.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import { useAuth } from '../auth/AuthProvider';
export default function Shell({ children }) {
const { isSignedIn, user, signOut } = useAuth();
return (
<div className="shell">
<header className="shell-header">
<div className="shell-logo">
<span className="logo-icon">◆</span>
<span className="logo-text">AdPlatform</span>
<span className="logo-badge">Management</span>
</div>
{isSignedIn && user && (
<div className="shell-user">
<span className="user-name">{user.name || user.email}</span>
<button onClick={signOut} className="btn-signout">Sign Out</button>
</div>
)}
</header>
<main className="shell-content">{children}</main>
<footer className="shell-footer">
<span>AdPlatform Management Console v1.0</span>
</footer>
</div>
);
}

22
Client-Admin/src/components/SignInOverlay.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import { useAuth } from '../auth/AuthProvider';
export default function SignInOverlay() {
const { signIn, error } = useAuth();
return (
<div className="signin-overlay">
<div className="signin-card">
<div className="signin-icon">◆</div>
<h1>AdPlatform Management</h1>
<p className="signin-subtitle">Sign in to manage your advertising platform</p>
{error && <div className="error-message">{error}</div>}
<button onClick={signIn} className="btn-signin">Sign in with Microsoft</button>
<p className="signin-help">Use your organization account to sign in</p>
</div>
</div>
);
}

147
Client-Admin/src/components/admin/ClientsPanel.jsx Normal file
View File

@@ -0,0 +1,147 @@
import React, { useState } from 'react';
import { API_BASE_URL } from '../../auth/authConfig';
export default function ClientsPanel({ data, sessionToken, onRefresh }) {
const [showForm, setShowForm] = useState(false);
const clients = data.clients || [];
return (
<div className="table-panel">
<div className="panel-header">
<h2>Clients ({data.totalCount})</h2>
<button className="btn-action" onClick={() => setShowForm(!showForm)}>
{showForm ? 'Cancel' : '+ Add Client'}
</button>
</div>
{showForm && (
<CreateClientForm
sessionToken={sessionToken}
onSuccess={() => { setShowForm(false); onRefresh(); }}
onCancel={() => setShowForm(false)}
/>
)}
<table className="data-table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Users</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{clients.map(client => (
<tr key={client.clientId}>
<td>{client.clientName}</td>
<td><StatusBadge status={client.status} /></td>
<td>{client.userCount}</td>
<td>{new Date(client.createdAt).toLocaleDateString()}</td>
<td>
<button
className="btn-small btn-danger"
onClick={() => deleteClient(client.clientId, sessionToken, onRefresh)}
>
Deactivate
</button>
</td>
</tr>
))}
{clients.length === 0 && (
<tr><td colSpan="5" className="empty-row">No clients found</td></tr>
)}
</tbody>
</table>
</div>
);
}
function CreateClientForm({ sessionToken, onSuccess, onCancel }) {
const [clientName, setClientName] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
const response = await fetch(`${API_BASE_URL}/api/admin/clients`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Session-Token': sessionToken,
},
body: JSON.stringify({ clientName }),
});
const data = await response.json();
if (data.ok) {
onSuccess();
} else {
setError(data.error || 'Failed to create client');
}
} catch (err) {
setError('Network error: ' + err.message);
} finally {
setLoading(false);
}
};
return (
<div className="admin-form">
<h3>Create Client</h3>
{error && <div className="error-message">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Client Name</label>
<input
type="text"
value={clientName}
onChange={(e) => setClientName(e.target.value)}
placeholder="e.g., Acme Corporation"
disabled={loading}
required
autoFocus
/>
</div>
<div className="form-buttons">
<button type="button" className="btn-cancel" onClick={onCancel} disabled={loading}>Cancel</button>
<button type="submit" className="btn-primary" disabled={loading || !clientName.trim()}>
{loading ? 'Creating...' : 'Create Client'}
</button>
</div>
</form>
</div>
);
}
async function deleteClient(clientId, sessionToken, onRefresh) {
if (!confirm('Are you sure you want to deactivate this client?')) return;
try {
const response = await fetch(`${API_BASE_URL}/api/admin/clients/${clientId}`, {
method: 'DELETE',
headers: { 'X-Session-Token': sessionToken },
});
const data = await response.json();
if (data.ok) {
onRefresh();
} else {
alert(data.error || 'Failed to deactivate client');
}
} catch (err) {
alert('Network error: ' + err.message);
}
}
function StatusBadge({ status }) {
const statusClass = {
'Active': 'status-active',
'Inactive': 'status-inactive',
}[status] || 'status-default';
return <span className={`status-badge ${statusClass}`}>{status}</span>;
}

94
Client-Admin/src/components/admin/SessionsPanel.jsx Normal file
View File

@@ -0,0 +1,94 @@
import React from 'react';
import { API_BASE_URL } from '../../auth/authConfig';
export default function SessionsPanel({ data, sessionToken, onRefresh }) {
const sessions = data.sessions || [];
return (
<div className="table-panel">
<div className="panel-header">
<h2>Active Sessions</h2>
<button className="btn-action" onClick={() => cleanupSessions(sessionToken, onRefresh)}>
Cleanup Expired
</button>
</div>
<table className="data-table">
<thead>
<tr>
<th>User</th>
<th>Client</th>
<th>Last Activity</th>
<th>Expires</th>
<th>IP Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{sessions.map(session => (
<tr key={session.sessionId}>
<td>
<div>{session.userEmail}</div>
<small className="text-muted">{session.displayName}</small>
</td>
<td>{session.clientName}</td>
<td>{new Date(session.lastActivity).toLocaleString()}</td>
<td>{new Date(session.expiresAt).toLocaleString()}</td>
<td>{session.ipAddress || '-'}</td>
<td>
<button
className="btn-small btn-danger"
onClick={() => revokeSession(session.sessionId, sessionToken, onRefresh)}
>
Revoke
</button>
</td>
</tr>
))}
{sessions.length === 0 && (
<tr><td colSpan="6" className="empty-row">No active sessions</td></tr>
)}
</tbody>
</table>
</div>
);
}
async function revokeSession(sessionId, sessionToken, onRefresh) {
if (!confirm('Are you sure you want to revoke this session?')) return;
try {
const response = await fetch(`${API_BASE_URL}/api/admin/sessions/${sessionId}/revoke`, {
method: 'POST',
headers: { 'X-Session-Token': sessionToken },
});
const data = await response.json();
if (data.ok) {
onRefresh();
} else {
alert(data.error || 'Failed to revoke session');
}
} catch (err) {
alert('Network error: ' + err.message);
}
}
async function cleanupSessions(sessionToken, onRefresh) {
if (!confirm('This will delete all expired sessions older than 30 days. Continue?')) return;
try {
const response = await fetch(`${API_BASE_URL}/api/admin/sessions/cleanup?daysOld=30`, {
method: 'POST',
headers: { 'X-Session-Token': sessionToken },
});
const data = await response.json();
if (data.ok) {
alert(`Cleaned up ${data.rowsDeleted} expired sessions`);
onRefresh();
} else {
alert(data.error || 'Failed to cleanup sessions');
}
} catch (err) {
alert('Network error: ' + err.message);
}
}

209
Client-Admin/src/components/admin/UsersPanel.jsx Normal file
View File

@@ -0,0 +1,209 @@
import React, { useState, useEffect } from 'react';
import { API_BASE_URL } from '../../auth/authConfig';
export default function UsersPanel({ data, sessionToken, onRefresh }) {
const [showForm, setShowForm] = useState(false);
const users = data.users || [];
return (
<div className="table-panel">
<div className="panel-header">
<h2>Users ({data.totalCount})</h2>
<button className="btn-action" onClick={() => setShowForm(!showForm)}>
{showForm ? 'Cancel' : '+ Add User'}
</button>
</div>
{showForm && (
<CreateUserForm
sessionToken={sessionToken}
onSuccess={() => { setShowForm(false); onRefresh(); }}
onCancel={() => setShowForm(false)}
/>
)}
<table className="data-table">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Status</th>
<th>Clients</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{users.map(user => (
<tr key={user.userId}>
<td>{user.email}</td>
<td>{user.displayName || '-'}</td>
<td><StatusBadge status={user.status} /></td>
<td>{user.clients?.map(c => `${c.clientName} (${c.role})`).join(', ') || '-'}</td>
<td>{new Date(user.createdAt).toLocaleDateString()}</td>
<td>
<button
className="btn-small btn-danger"
onClick={() => deleteUser(user.userId, sessionToken, onRefresh)}
>
Deactivate
</button>
</td>
</tr>
))}
{users.length === 0 && (
<tr><td colSpan="6" className="empty-row">No users found</td></tr>
)}
</tbody>
</table>
</div>
);
}
function CreateUserForm({ sessionToken, onSuccess, onCancel }) {
const [email, setEmail] = useState('');
const [displayName, setDisplayName] = useState('');
const [clientId, setClientId] = useState('');
const [role, setRole] = useState('User');
const [clients, setClients] = useState([]);
const [loading, setLoading] = useState(false);
const [loadingClients, setLoadingClients] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const loadClients = async () => {
try {
const response = await fetch(`${API_BASE_URL}/api/admin/clients?pageSize=100`, {
headers: { 'X-Session-Token': sessionToken },
});
const data = await response.json();
if (data.ok) setClients(data.clients || []);
} catch (err) {
console.error('Failed to load clients:', err);
} finally {
setLoadingClients(false);
}
};
loadClients();
}, [sessionToken]);
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
const response = await fetch(`${API_BASE_URL}/api/admin/users`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Session-Token': sessionToken,
},
body: JSON.stringify({
email,
displayName: displayName || null,
clientId: clientId || null,
role
}),
});
const data = await response.json();
if (data.ok) {
onSuccess();
} else {
setError(data.error || 'Failed to create user');
}
} catch (err) {
setError('Network error: ' + err.message);
} finally {
setLoading(false);
}
};
return (
<div className="admin-form">
<h3>Create User</h3>
{error && <div className="error-message">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Email *</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="user@example.com"
disabled={loading}
required
autoFocus
/>
</div>
<div className="form-group">
<label>Display Name</label>
<input
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder="John Smith"
disabled={loading}
/>
</div>
<div className="form-group">
<label>Assign to Client</label>
<select
value={clientId}
onChange={(e) => setClientId(e.target.value)}
disabled={loading || loadingClients}
>
<option value="">-- No client (invite later) --</option>
{clients.filter(c => c.status === 'Active').map(c => (
<option key={c.clientId} value={c.clientId}>{c.clientName}</option>
))}
</select>
</div>
{clientId && (
<div className="form-group">
<label>Role</label>
<select value={role} onChange={(e) => setRole(e.target.value)} disabled={loading}>
<option value="Admin">Admin</option>
<option value="User">User</option>
<option value="ReadOnly">Read Only</option>
</select>
</div>
)}
<div className="form-buttons">
<button type="button" className="btn-cancel" onClick={onCancel} disabled={loading}>Cancel</button>
<button type="submit" className="btn-primary" disabled={loading || !email.trim()}>
{loading ? 'Creating...' : 'Create User'}
</button>
</div>
</form>
</div>
);
}
async function deleteUser(userId, sessionToken, onRefresh) {
if (!confirm('Are you sure you want to deactivate this user?')) return;
try {
const response = await fetch(`${API_BASE_URL}/api/admin/users/${userId}`, {
method: 'DELETE',
headers: { 'X-Session-Token': sessionToken },
});
const data = await response.json();
if (data.ok) {
onRefresh();
} else {
alert(data.error || 'Failed to deactivate user');
}
} catch (err) {
alert('Network error: ' + err.message);
}
}
function StatusBadge({ status }) {
const statusClass = {
'Active': 'status-active',
'Inactive': 'status-inactive',
}[status] || 'status-default';
return <span className={`status-badge ${statusClass}`}>{status}</span>;
}

14
Client-Admin/src/index.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import { AuthProvider } from './auth/AuthProvider';
import App from './app/App';
import './styles/app.css';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>
);

338
Client-Admin/src/styles/app.css Normal file
View File

@@ -0,0 +1,338 @@
/* ============================================================
AdPlatform Management Console Styles
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333;
background: #f5f7fa;
}
/* Shell Layout */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell-header {
background: #1a1a2e;
color: #fff;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
}
.shell-logo { display: flex; align-items: center; gap: 8px; }
.logo-icon { font-size: 24px; color: #4f8cff; }
.logo-text { font-size: 18px; font-weight: 600; }
.logo-badge { font-size: 11px; background: #4f8cff; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.shell-user { display: flex; align-items: center; gap: 16px; }
.user-name { font-size: 13px; opacity: 0.9; }
.btn-signout {
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.btn-signout:hover { background: rgba(255,255,255,0.1); }
.shell-content { flex: 1; padding: 24px; }
.shell-footer {
background: #1a1a2e;
color: rgba(255,255,255,0.5);
padding: 12px 24px;
font-size: 12px;
text-align: center;
}
/* Loading */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px;
color: #666;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #e0e0e0;
border-top-color: #4f8cff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Sign In */
.signin-overlay { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.signin-card {
background: #fff;
border-radius: 12px;
padding: 48px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
max-width: 400px;
width: 100%;
}
.signin-icon { font-size: 48px; color: #4f8cff; margin-bottom: 24px; }
.signin-card h1 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.signin-subtitle { color: #666; margin-bottom: 32px; }
.btn-signin {
background: #0078d4;
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
width: 100%;
}
.btn-signin:hover { background: #006cbd; }
.signin-help { margin-top: 24px; font-size: 12px; color: #888; }
/* Registration */
.registration-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.registration-card {
background: #fff;
border-radius: 12px;
padding: 48px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
max-width: 480px;
width: 100%;
}
.registration-card h1 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.registration-subtitle { color: #666; margin-bottom: 32px; }
/* Forms */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; }
.form-group input, .form-group select {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: #4f8cff; }
.form-help { display: block; margin-top: 8px; font-size: 12px; color: #888; }
.btn-primary {
background: #4f8cff;
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
width: 100%;
}
.btn-primary:hover { background: #3d7be8; }
.btn-primary:disabled { background: #a0c4ff; cursor: not-allowed; }
/* Messages */
.error-message {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 13px;
}
.success-message {
background: #dcfce7;
border: 1px solid #86efac;
color: #16a34a;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 13px;
}
/* Dashboard */
.dashboard { max-width: 1200px; margin: 0 auto; }
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.dashboard-header h1 { font-size: 24px; font-weight: 600; }
.dashboard-info { display: flex; gap: 24px; font-size: 13px; color: #666; }
.dashboard-tabs {
display: flex;
gap: 4px;
background: #fff;
padding: 4px;
border-radius: 8px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tab-btn {
background: transparent;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #666;
cursor: pointer;
}
.tab-btn:hover { color: #333; background: #f5f7fa; }
.tab-btn.active { background: #4f8cff; color: #fff; }
.dashboard-content {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
min-height: 400px;
}
/* Overview Panel */
.overview-panel h2 { font-size: 18px; margin-bottom: 24px; }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.stat-card { background: #f8fafc; border-radius: 8px; padding: 24px; text-align: center; }
.stat-value { font-size: 36px; font-weight: 700; color: #4f8cff; margin-bottom: 8px; }
.stat-label { font-size: 13px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.server-time { font-size: 12px; color: #888; text-align: right; }
/* Table Panel */
.table-panel h2 { font-size: 18px; margin-bottom: 20px; }
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #eee;
}
.data-table th {
background: #f8fafc;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
}
.data-table tr:hover { background: #fafbfc; }
.empty-row { text-align: center !important; color: #888; padding: 40px !important; }
.text-muted { color: #888; font-size: 12px; }
/* Status Badges */
.status-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-active { background: #dcfce7; color: #16a34a; }
.status-inactive { background: #f3f4f6; color: #6b7280; }
.status-default { background: #f3f4f6; color: #6b7280; }
/* Buttons */
.btn-action {
background: #fff;
border: 1px solid #4f8cff;
color: #4f8cff;
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.btn-action:hover { background: #4f8cff; color: #fff; }
.btn-small {
padding: 6px 12px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
border: none;
}
.btn-danger { background: #fef2f2; color: #dc2626; }
.btn-danger:hover { background: #fee2e2; }
.btn-cancel {
background: #fff;
border: 1px solid #ddd;
padding: 12px 20px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.btn-cancel:hover { background: #f5f5f5; }
/* Admin Form */
.admin-form {
background: #f8fafc;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
max-width: 500px;
}
.admin-form h3 { font-size: 16px; margin-bottom: 20px; }
.form-buttons { display: flex; gap: 12px; margin-top: 24px; }
.form-buttons button { flex: 1; }
/* Responsive */
@media (max-width: 768px) {
.shell-header { padding: 0 16px; }
.shell-content { padding: 16px; }
.dashboard-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.dashboard-tabs { overflow-x: auto; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.data-table { font-size: 12px; }
.data-table th, .data-table td { padding: 8px 12px; }
}

38
Client-Admin/webpack.config.js Normal file
View File

@@ -0,0 +1,38 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
inject: 'body',
}),
],
devServer: {
static: './public',
port: 3000,
hot: true,
historyApiFallback: true,
},
};

6
Client-Client/.babelrc Normal file
View File

@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", { "runtime": "automatic" }]
]
}

2
Client-Client/dist/bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
Client-Client/dist/bundle.js.LICENSE.txt vendored Normal file
View File

@@ -0,0 +1,47 @@
/*! @azure/msal-browser v3.30.0 2025-08-05 */
/*! @azure/msal-common v14.16.1 2025-08-05 */
/*! @azure/msal-react v2.2.0 2024-11-05 */
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

1
Client-Client/dist/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AdPlatform</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/><script defer="defer" src="/bundle.js"></script></head><body><div id="root"></div></body></html>

27
Client-Client/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "adplatform-client",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"@azure/msal-browser": "^3.6.0",
"@azure/msal-react": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/preset-env": "^7.24.0",
"@babel/preset-react": "^7.23.0",
"babel-loader": "^9.1.3",
"css-loader": "^6.10.0",
"html-webpack-plugin": "^5.6.0",
"style-loader": "^3.3.4",
"webpack": "^5.90.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.0"
}
}

13
Client-Client/public/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AdPlatform</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
</body>
</html>

40
Client-Client/src/app/App.js Normal file
View File

@@ -0,0 +1,40 @@
import AuthProvider, { useAuth } from '../auth/AuthProvider';
import LandingPage from '../components/LandingPage';
import RegistrationPage from '../components/RegistrationPage';
import AuthErrorPage from '../components/AuthErrorPage';
import Platform from '../components/Platform';
function AppRouter() {
const { authState, error } = useAuth();
switch (authState) {
case 'active':
return <Platform />;
case 'needsRegistration':
return <RegistrationPage />;
case 'error':
return <AuthErrorPage message={error} />;
case 'authenticating':
return (
<div className="loading-screen">
<div className="loading-spinner" />
<p>Signing in…</p>
</div>
);
case 'unauthenticated':
default:
return <LandingPage />;
}
}
export default function App() {
return (
<AuthProvider>
<AppRouter />
</AuthProvider>
);
}

262
Client-Client/src/auth/AuthProvider.jsx Normal file
View File

@@ -0,0 +1,262 @@
import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
import { PublicClientApplication, InteractionStatus } from '@azure/msal-browser';
import { MsalProvider, useMsal } from '@azure/msal-react';
import { msalConfig, loginRequest, GATEWAY_URL } from './authConfig';
// ─── MSAL instance (singleton) ───
const msalInstance = new PublicClientApplication(msalConfig);
const msalReady = msalInstance.initialize();
// ─── Context ───
const AuthContext = createContext(null);
export const useAuth = () => useContext(AuthContext);
// ─── Session storage keys ───
const SK_TOKEN = 'adp_session_token';
const SK_USER = 'adp_session_user';
// ─── Inner provider (needs useMsal) ───
function AuthInner({ children }) {
const { instance, inProgress, accounts } = useMsal();
// States: unauthenticated | authenticating | needsRegistration | active | error
const [authState, setAuthState] = useState('authenticating');
const [sessionToken, setSessionToken] = useState(null);
const [sessionUser, setSessionUser] = useState(null);
const [error, setError] = useState(null);
const exchangingRef = useRef(false);
// ─── Exchange JWT for Gateway session ───
const exchangeForSession = useCallback(async (jwt) => {
if (exchangingRef.current) return;
exchangingRef.current = true;
console.log('[Auth] Exchanging JWT for session at', `${GATEWAY_URL}/api/auth/session`);
try {
const res = await fetch(`${GATEWAY_URL}/api/auth/session`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${jwt}`
}
});
const body = await res.json();
console.log('[Auth] Session response:', res.status, body.ok);
if (body.ok && body.data) {
const d = body.data;
const user = {
sessionId: d.sessionId,
userId: d.userId,
email: d.userEmail,
displayName: d.displayName,
role: d.role,
clientId: d.clientId,
clientName: d.clientName,
expiresAt: d.expiresAt,
availableClients: d.availableClients || []
};
setSessionToken(d.sessionToken);
setSessionUser(user);
sessionStorage.setItem(SK_TOKEN, d.sessionToken);
sessionStorage.setItem(SK_USER, JSON.stringify(user));
setAuthState('active');
console.log('[Auth] Session established for', d.userEmail, '| client:', d.clientName);
} else {
const errMsg = body.error || 'Session creation failed';
console.warn('[Auth] Session exchange error:', errMsg);
if (/no client access|user not found|not registered/i.test(errMsg)) {
setAuthState('needsRegistration');
} else {
setError(errMsg);
setAuthState('error');
}
}
} catch (err) {
console.error('[Auth] Network error during session exchange:', err);
setError('Unable to connect to the server. Please try again.');
setAuthState('error');
} finally {
exchangingRef.current = false;
}
}, []);
// ─── Validate existing session via /api/auth/me ───
const validateSession = useCallback(async (token) => {
try {
const res = await fetch(`${GATEWAY_URL}/api/auth/me`, {
headers: { 'Authorization': `Bearer ${token}` }
});
const body = await res.json();
if (body.ok && body.data) {
const d = body.data;
const user = {
sessionId: d.sessionId,
userId: d.userId,
email: d.userEmail,
displayName: d.displayName,
role: d.role,
clientId: d.clientId,
clientName: d.clientName,
expiresAt: d.expiresAt,
availableClients: d.availableClients || []
};
setSessionToken(token);
setSessionUser(user);
setAuthState('active');
console.log('[Auth] Session restored for', d.userEmail);
return true;
}
} catch (e) {
console.warn('[Auth] Session validation failed:', e.message);
}
return false;
}, []);
// ─── Handle MSAL redirect + session restoration ───
useEffect(() => {
let cancelled = false;
async function init() {
await msalReady;
// 1. Check for MSAL redirect response
try {
const response = await instance.handleRedirectPromise();
if (response && response.idToken && !cancelled) {
console.log('[Auth] MSAL redirect received, exchanging token');
await exchangeForSession(response.idToken);
return;
}
} catch (err) {
console.warn('[Auth] MSAL redirect error:', err);
}
if (cancelled) return;
// 2. Try restoring existing session from storage
const savedToken = sessionStorage.getItem(SK_TOKEN);
if (savedToken) {
const valid = await validateSession(savedToken);
if (valid) return;
// Stored session invalid — clear it
sessionStorage.removeItem(SK_TOKEN);
sessionStorage.removeItem(SK_USER);
}
// 3. If MSAL has an active account, try silent token + session exchange
const account = instance.getActiveAccount() || instance.getAllAccounts()[0];
if (account) {
try {
const silent = await instance.acquireTokenSilent({ ...loginRequest, account });
if (silent?.idToken && !cancelled) {
await exchangeForSession(silent.idToken);
return;
}
} catch (e) {
console.warn('[Auth] Silent token acquisition failed:', e.message);
}
}
if (!cancelled) {
setAuthState('unauthenticated');
}
}
init();
return () => { cancelled = true; };
}, [instance, exchangeForSession, validateSession]);
// ─── Actions ───
const signIn = useCallback(() => {
setAuthState('authenticating');
instance.loginRedirect(loginRequest).catch(err => {
console.error('[Auth] Login redirect error:', err);
setAuthState('unauthenticated');
});
}, [instance]);
const signOut = useCallback(async () => {
// Tell Gateway to invalidate session
if (sessionToken) {
try {
await fetch(`${GATEWAY_URL}/api/auth/signoff`, {
method: 'POST',
headers: { 'Authorization': `Bearer ${sessionToken}` }
});
} catch (e) { /* best effort */ }
}
sessionStorage.removeItem(SK_TOKEN);
sessionStorage.removeItem(SK_USER);
setSessionToken(null);
setSessionUser(null);
setAuthState('unauthenticated');
instance.logoutRedirect({ postLogoutRedirectUri: window.location.origin });
}, [instance, sessionToken]);
const retrySignIn = useCallback(() => {
sessionStorage.clear();
setError(null);
setAuthState('unauthenticated');
instance.logoutRedirect({ postLogoutRedirectUri: window.location.origin }).catch(() => {
setAuthState('unauthenticated');
});
}, [instance]);
const switchClient = useCallback(async (clientId) => {
if (!sessionToken) return;
try {
const res = await fetch(`${GATEWAY_URL}/api/auth/switch-client`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${sessionToken}`
},
body: JSON.stringify({ clientId })
});
const body = await res.json();
if (body.ok && body.data) {
const d = body.data;
setSessionUser(prev => ({
...prev,
clientId: d.clientId || prev.clientId,
clientName: d.clientName || prev.clientName,
role: d.role || prev.role
}));
sessionStorage.setItem(SK_USER, JSON.stringify({ ...sessionUser, ...d }));
}
} catch (e) {
console.error('[Auth] Switch client error:', e);
}
}, [sessionToken, sessionUser]);
// ─── MSAL account info (available even before session) ───
const msalAccount = accounts?.[0] || null;
const value = {
authState,
sessionToken,
sessionUser,
error,
msalAccount,
gatewayUrl: GATEWAY_URL,
signIn,
signOut,
retrySignIn,
switchClient,
clearError: () => { setError(null); setAuthState('unauthenticated'); }
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
// ─── Outer wrapper (provides MsalProvider) ───
export default function AuthProvider({ children }) {
return (
<MsalProvider instance={msalInstance}>
<AuthInner>{children}</AuthInner>
</MsalProvider>
);
}

47
Client-Client/src/auth/authConfig.js Normal file
View File

@@ -0,0 +1,47 @@
// ─── Entra External ID (CIAM for third-party logins) ───
const TENANT_ID = '891f98f1-ed34-42a1-9b6c-28b0554d92c2';
const CLIENT_ID = '154c9111-14a0-4c0f-8132-7bc68254a74e';
const AUTHORITY = `https://USIMClients.ciamlogin.com/${TENANT_ID}`;
// ─── Gateway API ───
export const GATEWAY_URL = 'https://adsapi.usimdev.com';
// ─── Session endpoint ───
export const SESSION_ENDPOINT = `${GATEWAY_URL}/api/auth/session`;
// ─── Registration portal ───
export const REGISTRATION_URL = 'https://adpregist.usimdev.com';
// ─── MSAL configuration ───
export const msalConfig = {
auth: {
clientId: CLIENT_ID,
authority: AUTHORITY,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
knownAuthorities: ['USIMClients.ciamlogin.com'],
navigateToLoginRequestUrl: true
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) return;
switch (level) {
case 0: console.error(message); break;
case 1: console.warn(message); break;
case 2: console.info(message); break;
case 3: console.debug(message); break;
}
},
logLevel: 3
}
}
};
export const loginRequest = {
scopes: ['openid', 'profile', 'email']
};

28
Client-Client/src/components/AuthErrorPage.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { useAuth } from '../auth/AuthProvider';
import { REGISTRATION_URL } from '../auth/authConfig';
export default function AuthErrorPage({ message }) {
const { clearError, retrySignIn } = useAuth();
return (
<div className="status-page">
<div className="status-card">
<div className="status-icon error">✕</div>
<h2>Sign-in Unsuccessful</h2>
<p className="error-text">{message || 'An unexpected error occurred during sign-in.'}</p>
<div className="status-actions">
<button className="btn btn-primary btn-lg" onClick={clearError}>
Try Again
</button>
<button className="btn btn-outline" onClick={retrySignIn}>
Sign in with Different Account
</button>
<a href={REGISTRATION_URL} className="btn btn-outline">
Register for Access
</a>
</div>
</div>
</div>
);
}

50
Client-Client/src/components/LandingPage.jsx Normal file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import { useAuth } from '../auth/AuthProvider';
export default function LandingPage() {
const { signIn } = useAuth();
return (
<div className="landing-page">
<div className="landing-header">
<div className="landing-logo">
<div className="landing-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
</div>
<span className="landing-logo-text">AdPlatform</span>
</div>
<button className="btn btn-primary" onClick={signIn}>Sign In</button>
</div>
<div className="landing-hero">
<h1>Manage Your Google Ads</h1>
<p>A simple, self-service platform for managing your advertising campaigns under expert guidance.</p>
<button className="btn btn-primary btn-lg" onClick={signIn}>Get Started</button>
<div className="landing-features">
<div className="feature-card">
<div className="feature-card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
</div>
<h3>Campaign Management</h3>
<p>Create and manage search, display, and video campaigns with an intuitive interface.</p>
</div>
<div className="feature-card">
<div className="feature-card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
</div>
<h3>Performance Reporting</h3>
<p>Track impressions, clicks, conversions, and spend with real-time reporting dashboards.</p>
</div>
<div className="feature-card">
<div className="feature-card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
</div>
<h3>Managed by Experts</h3>
<p>Your campaigns run under our agency account with professional oversight and support.</p>
</div>
</div>
</div>
</div>
);
}

101
Client-Client/src/components/Platform.jsx Normal file
View File

@@ -0,0 +1,101 @@
import React, { useState } from 'react';
import { useAuth } from '../auth/AuthProvider';
import Sidebar from './Sidebar';
import Dashboard from './views/Dashboard';
import Campaigns from './views/Campaigns';
import Reporting from './views/Reporting';
import Accounts from './views/Accounts';
import Developer from './views/Developer';
import Settings from './views/Settings';
const viewTitles = {
dashboard: 'Dashboard',
campaigns: 'Campaigns',
reporting: 'Reporting',
accounts: 'Accounts',
developer: 'API Testing',
settings: 'Settings'
};
export default function Platform() {
const { sessionUser, sessionToken, signOut } = useAuth();
const [activeView, setActiveView] = useState('dashboard');
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const getInitials = (name) => {
if (!name) return 'U';
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
};
const renderView = () => {
const props = { sessionUser, sessionToken, onNavigate: setActiveView };
switch (activeView) {
case 'campaigns': return <Campaigns {...props} />;
case 'reporting': return <Reporting {...props} />;
case 'accounts': return <Accounts {...props} />;
case 'developer': return <Developer {...props} />;
case 'settings': return <Settings {...props} onSignOut={signOut} />;
default: return <Dashboard {...props} />;
}
};
return (
<div className={`platform ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
<Sidebar
activeView={activeView}
onNavigate={setActiveView}
collapsed={sidebarCollapsed}
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
/>
<div className="main-area">
{/* Top Bar */}
<header className="top-bar">
<nav className="breadcrumb">
<span className="breadcrumb-item">AdPlatform</span>
<span className="breadcrumb-separator">/</span>
<span className="breadcrumb-current">{viewTitles[activeView]}</span>
</nav>
<div className="top-bar-actions">
{sessionUser?.clientName && (
<span className="client-badge">{sessionUser.clientName}</span>
)}
<div className="user-menu">
<button className="user-menu-trigger" onClick={() => setMenuOpen(!menuOpen)}>
<div className="user-avatar">
{getInitials(sessionUser?.name || sessionUser?.email)}
</div>
<span className="user-name">{sessionUser?.name || sessionUser?.email || 'User'}</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
{menuOpen && (
<div className="user-dropdown">
<button className="user-dropdown-item" onClick={() => { setActiveView('settings'); setMenuOpen(false); }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><circle cx="12" cy="12" r="3" /></svg>
Settings
</button>
<div className="user-dropdown-divider" />
<button className="user-dropdown-item danger" onClick={() => { signOut(); setMenuOpen(false); }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
Sign Out
</button>
</div>
)}
</div>
</div>
</header>
{/* Content */}
<main className="content-area">
{renderView()}
</main>
</div>
</div>
);
}

15
Client-Client/src/components/RegistrationPage.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { useEffect } from 'react';
import { REGISTRATION_URL } from '../auth/authConfig';
export default function RegistrationPage() {
useEffect(() => {
window.location.href = REGISTRATION_URL;
}, []);
return (
<div className="loading-screen">
<div className="loading-spinner" />
<p>Redirecting to registration…</p>
</div>
);
}

65
Client-Client/src/components/Sidebar.jsx Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
{ id: 'campaigns', label: 'Campaigns', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
{ id: 'reporting', label: 'Reporting', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
{ id: 'accounts', label: 'Accounts', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' },
{ id: 'developer', label: 'API Testing', icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' },
{ id: 'settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' }
];
export default function Sidebar({ activeView, onNavigate, collapsed, onToggle }) {
return (
<aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<div className="sidebar-header">
<div className="logo">
<div className="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
</div>
{!collapsed && <span className="logo-text">AdPlatform</span>}
</div>
<button className="collapse-btn" onClick={onToggle} title={collapsed ? 'Expand' : 'Collapse'}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
{collapsed ? <path d="M13 5l7 7-7 7M5 5l7 7-7 7" /> : <path d="M11 19l-7-7 7-7M19 19l-7-7 7-7" />}
</svg>
</button>
</div>
<nav className="sidebar-nav">
<div className="nav-section">
{!collapsed && <span className="nav-label">Menu</span>}
<ul className="nav-list">
{navItems.map(item => (
<li key={item.id}>
<button
className={`nav-item ${activeView === item.id ? 'active' : ''}`}
onClick={() => onNavigate(item.id)}
title={item.label}
>
<span className="nav-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d={item.icon} />
</svg>
</span>
{!collapsed && <span>{item.label}</span>}
</button>
</li>
))}
</ul>
</div>
</nav>
<div className="sidebar-footer">
{!collapsed && (
<div className="sidebar-brand">
<span>Powered by</span>
<strong>USIM</strong>
</div>
)}
</div>
</aside>
);
}

125
Client-Client/src/components/views/Accounts.jsx Normal file
View File

@@ -0,0 +1,125 @@
import React, { useState, useEffect } from 'react';
import { callService } from '../../services/apiClient';
export default function Accounts({ sessionToken, sessionUser }) {
const [accounts, setAccounts] = useState([]);
const [loading, setLoading] = useState(true);
const [selected, setSelected] = useState(null);
useEffect(() => {
async function load() {
setLoading(true);
const res = await callService('google', 'ListAccounts', {}, { sessionToken });
if (res.ok && res.data?.data) {
setAccounts(Array.isArray(res.data.data) ? res.data.data : []);
}
setLoading(false);
}
if (sessionToken) load();
}, [sessionToken]);
return (
<div>
<div className="view-header">
<div>
<h1>Accounts</h1>
<p className="view-subtitle">Manage linked advertising accounts</p>
</div>
</div>
{/* User Profile Card */}
<div className="content-card" style={{ marginBottom: '24px' }}>
<div className="content-card-body padded">
<div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
<div style={{ width: '56px', height: '56px', borderRadius: '50%', background: 'var(--color-primary)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px', fontWeight: '600', flexShrink: 0 }}>
{(sessionUser?.name || sessionUser?.email || 'U').charAt(0).toUpperCase()}
</div>
<div>
<div style={{ fontSize: '18px', fontWeight: '600' }}>{sessionUser?.name || 'User'}</div>
<div style={{ fontSize: '14px', color: 'var(--color-text-muted)' }}>{sessionUser?.email || ''}</div>
{sessionUser?.role && <div style={{ fontSize: '13px', color: 'var(--color-primary)', marginTop: '4px' }}>{sessionUser.role}</div>}
</div>
</div>
</div>
</div>
{/* Linked Accounts */}
<div className="content-card">
<div className="content-card-header">
<h3>Linked Accounts</h3>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>
{accounts.length} account{accounts.length !== 1 ? 's' : ''}
</span>
</div>
<div className="content-card-body">
{loading ? (
<div className="loading-placeholder padded">
{[1,2].map(i => <div key={i} className="skeleton skeleton-row" style={{height:'72px', marginBottom:'8px'}} />)}
</div>
) : accounts.length === 0 ? (
<div className="empty-state">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<h3>No linked accounts</h3>
<p>Advertising accounts will appear here once linked to your profile.</p>
</div>
) : (
accounts.map((acct, i) => (
<div key={i} className="campaign-row" onClick={() => setSelected(acct)}>
<div className="campaign-info">
<span className="campaign-name">{acct.descriptiveName || acct.name || `Account ${i+1}`}</span>
<span className="campaign-type mono">{acct.id || acct.customerId || '—'}</span>
</div>
<span className={`status-badge status-${(acct.status || 'active').toLowerCase()}`}>
{(acct.status || 'Active').toLowerCase()}
</span>
</div>
))
)}
</div>
</div>
{/* Detail Panel */}
{selected && (
<div className="detail-panel">
<div className="detail-panel-header">
<h3>Account Details</h3>
<button className="modal-close" onClick={() => setSelected(null)}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<div className="detail-panel-body">
<div className="detail-section">
<h4>Account Information</h4>
<div className="detail-grid">
<div className="detail-item">
<span className="detail-label">Name</span>
<span className="detail-value">{selected.descriptiveName || selected.name || '—'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Account ID</span>
<span className="detail-value mono">{selected.id || selected.customerId || '—'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Status</span>
<span className={`status-badge status-${(selected.status || 'active').toLowerCase()}`}>{selected.status || 'Active'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Currency</span>
<span className="detail-value">{selected.currencyCode || 'USD'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Timezone</span>
<span className="detail-value">{selected.timeZone || '—'}</span>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}

274
Client-Client/src/components/views/Campaigns.jsx Normal file
View File

@@ -0,0 +1,274 @@
import React, { useState, useEffect } from 'react';
import { callService } from '../../services/apiClient';
const formatStatus = (s) => (s || 'enabled').replace('CAMPAIGN_STATUS_', '').toLowerCase();
const formatType = (t) => (t || 'Search').replace('ADVERTISING_CHANNEL_TYPE_', '').replace(/_/g, ' ');
const formatBudget = (b) => {
if (!b?.amountMicros) return '$0.00';
return '$' + (parseInt(b.amountMicros) / 1000000).toFixed(2);
};
const formatNumber = (n) => n != null ? Number(n).toLocaleString() : '—';
export default function Campaigns({ sessionToken }) {
const [campaigns, setCampaigns] = useState([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState('');
const [showCreate, setShowCreate] = useState(false);
const [selected, setSelected] = useState(null);
const [creating, setCreating] = useState(false);
const [createError, setCreateError] = useState(null);
const [form, setForm] = useState({ name: '', type: 'SEARCH', budget: '', status: 'ENABLED' });
const loadCampaigns = async () => {
setLoading(true);
const res = await callService('google', 'ListCampaigns', {}, { sessionToken });
if (res.ok && res.data?.data) {
setCampaigns(Array.isArray(res.data.data) ? res.data.data : []);
}
setLoading(false);
};
useEffect(() => {
if (sessionToken) loadCampaigns();
}, [sessionToken]);
const filtered = campaigns.filter(c =>
!search || (c.name || '').toLowerCase().includes(search.toLowerCase())
);
const handleCreate = async (e) => {
e.preventDefault();
setCreating(true);
setCreateError(null);
const res = await callService('google', 'CreateCampaign', {
name: form.name,
advertisingChannelType: form.type,
budgetAmountMicros: String(parseFloat(form.budget || '0') * 1000000),
status: form.status
}, { sessionToken });
if (res.ok) {
setShowCreate(false);
setForm({ name: '', type: 'SEARCH', budget: '', status: 'ENABLED' });
loadCampaigns();
} else {
setCreateError(res.error || 'Failed to create campaign');
}
setCreating(false);
};
return (
<div>
<div className="view-header">
<div>
<h1>Campaigns</h1>
<p className="view-subtitle">{campaigns.length} campaign{campaigns.length !== 1 ? 's' : ''}</p>
</div>
<button className="btn btn-primary" onClick={() => setShowCreate(true)}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>
New Campaign
</button>
</div>
{/* Search / Filter Bar */}
<div style={{ marginBottom: '20px' }}>
<input
className="form-input"
type="text"
placeholder="Search campaigns…"
value={search}
onChange={(e) => setSearch(e.target.value)}
style={{ maxWidth: '360px' }}
/>
</div>
{/* Campaign List */}
<div className="content-card">
<div className="content-card-body">
{loading ? (
<div className="loading-placeholder padded">
{[1,2,3,4].map(i => <div key={i} className="skeleton skeleton-row" style={{height:'52px', marginBottom:'8px'}} />)}
</div>
) : filtered.length === 0 ? (
<div className="empty-state">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<h3>{search ? 'No matching campaigns' : 'No campaigns yet'}</h3>
<p>{search ? 'Try adjusting your search' : 'Create your first campaign to get started'}</p>
{!search && <button className="btn btn-primary btn-sm" onClick={() => setShowCreate(true)}>Create Campaign</button>}
</div>
) : (
<table className="data-table">
<thead>
<tr>
<th>Campaign Name</th>
<th>Type</th>
<th>Status</th>
<th>Daily Budget</th>
<th>Impressions</th>
<th>Clicks</th>
</tr>
</thead>
<tbody>
{filtered.map((campaign, idx) => (
<tr key={idx} onClick={() => setSelected(campaign)}>
<td style={{ fontWeight: 500 }}>{campaign.name || `Campaign ${idx+1}`}</td>
<td>{formatType(campaign.advertisingChannelType)}</td>
<td>
<span className={`status-badge status-${formatStatus(campaign.status)}`}>
{formatStatus(campaign.status)}
</span>
</td>
<td>{formatBudget(campaign.campaignBudget)}</td>
<td>{formatNumber(campaign.metrics?.impressions)}</td>
<td>{formatNumber(campaign.metrics?.clicks)}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
{/* Create Campaign Modal */}
{showCreate && (
<div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) setShowCreate(false); }}>
<div className="modal">
<div className="modal-header">
<h3>Create Campaign</h3>
<button className="modal-close" onClick={() => setShowCreate(false)}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<form onSubmit={handleCreate}>
<div className="modal-body">
{createError && <div className="error-box">{createError}</div>}
<div className="form-group">
<label>Campaign Name</label>
<input className="form-input" type="text" placeholder="e.g. Summer Sale 2025" value={form.name} onChange={e => setForm({...form, name: e.target.value})} required />
</div>
<div className="form-row">
<div className="form-group">
<label>Channel Type</label>
<select className="form-select" value={form.type} onChange={e => setForm({...form, type: e.target.value})}>
<option value="SEARCH">Search</option>
<option value="DISPLAY">Display</option>
<option value="VIDEO">Video</option>
<option value="SHOPPING">Shopping</option>
<option value="PERFORMANCE_MAX">Performance Max</option>
</select>
</div>
<div className="form-group">
<label>Status</label>
<select className="form-select" value={form.status} onChange={e => setForm({...form, status: e.target.value})}>
<option value="ENABLED">Enabled</option>
<option value="PAUSED">Paused</option>
</select>
</div>
</div>
<div className="form-group">
<label>Daily Budget ($)</label>
<input className="form-input" type="number" step="0.01" min="0" placeholder="50.00" value={form.budget} onChange={e => setForm({...form, budget: e.target.value})} required />
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-outline" onClick={() => setShowCreate(false)}>Cancel</button>
<button type="submit" className="btn btn-primary" disabled={creating || !form.name}>
{creating ? <><span className="btn-spinner" /> Creating...</> : 'Create Campaign'}
</button>
</div>
</form>
</div>
</div>
)}
{/* Detail Panel */}
{selected && (
<div className="detail-panel">
<div className="detail-panel-header">
<h3>Campaign Details</h3>
<button className="modal-close" onClick={() => setSelected(null)}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<div className="detail-panel-body">
<div className="detail-section">
<h4>Overview</h4>
<div className="detail-grid">
<div className="detail-item">
<span className="detail-label">Name</span>
<span className="detail-value">{selected.name}</span>
</div>
<div className="detail-item">
<span className="detail-label">Status</span>
<span className={`status-badge status-${formatStatus(selected.status)}`}>{formatStatus(selected.status)}</span>
</div>
<div className="detail-item">
<span className="detail-label">Type</span>
<span className="detail-value">{formatType(selected.advertisingChannelType)}</span>
</div>
<div className="detail-item">
<span className="detail-label">Daily Budget</span>
<span className="detail-value">{formatBudget(selected.campaignBudget)}</span>
</div>
<div className="detail-item">
<span className="detail-label">Campaign ID</span>
<span className="detail-value mono">{selected.id || selected.resourceName?.split('/').pop() || '—'}</span>
</div>
</div>
</div>
<div className="detail-section">
<h4>Performance</h4>
<div className="detail-grid">
<div className="detail-item">
<span className="detail-label">Impressions</span>
<span className="detail-value">{formatNumber(selected.metrics?.impressions)}</span>
</div>
<div className="detail-item">
<span className="detail-label">Clicks</span>
<span className="detail-value">{formatNumber(selected.metrics?.clicks)}</span>
</div>
<div className="detail-item">
<span className="detail-label">CTR</span>
<span className="detail-value">
{selected.metrics?.ctr
? (parseFloat(selected.metrics.ctr) * 100).toFixed(2) + '%'
: selected.metrics?.impressions && selected.metrics?.clicks
? ((selected.metrics.clicks / selected.metrics.impressions) * 100).toFixed(2) + '%'
: '—'}
</span>
</div>
<div className="detail-item">
<span className="detail-label">Cost</span>
<span className="detail-value">
{selected.metrics?.costMicros
? '$' + (parseInt(selected.metrics.costMicros) / 1000000).toFixed(2)
: '—'}
</span>
</div>
<div className="detail-item">
<span className="detail-label">Conversions</span>
<span className="detail-value">{formatNumber(selected.metrics?.conversions)}</span>
</div>
<div className="detail-item">
<span className="detail-label">Avg CPC</span>
<span className="detail-value">
{selected.metrics?.averageCpc
? '$' + (parseInt(selected.metrics.averageCpc) / 1000000).toFixed(2)
: '—'}
</span>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}

140
Client-Client/src/components/views/Dashboard.jsx Normal file
View File

@@ -0,0 +1,140 @@
import React, { useState, useEffect } from 'react';
import { callService } from '../../services/apiClient';
const formatNumber = (n) => n != null ? Number(n).toLocaleString() : '—';
const formatCurrency = (micros) => micros ? '$' + (parseInt(micros) / 1000000).toFixed(2) : '$0.00';
const formatStatus = (s) => (s || 'enabled').replace('CAMPAIGN_STATUS_', '').toLowerCase();
export default function Dashboard({ sessionToken, onNavigate }) {
const [campaigns, setCampaigns] = useState([]);
const [loading, setLoading] = useState(true);
const [stats, setStats] = useState({ impressions: 0, clicks: 0, conversions: 0, spend: 0 });
useEffect(() => {
async function load() {
setLoading(true);
const res = await callService('google', 'ListCampaigns', {}, { sessionToken });
if (res.ok && res.data?.data) {
const list = Array.isArray(res.data.data) ? res.data.data : [];
setCampaigns(list);
// Aggregate stats
let imp = 0, clk = 0, conv = 0, sp = 0;
list.forEach(c => {
const m = c.metrics || {};
imp += parseInt(m.impressions || 0);
clk += parseInt(m.clicks || 0);
conv += parseInt(m.conversions || 0);
sp += parseInt(m.costMicros || 0);
});
setStats({ impressions: imp, clicks: clk, conversions: conv, spend: sp });
}
setLoading(false);
}
if (sessionToken) load();
}, [sessionToken]);
return (
<div>
<div className="view-header">
<div>
<h1>Dashboard</h1>
<p className="view-subtitle">Overview of your advertising performance</p>
</div>
<button className="btn btn-primary" onClick={() => onNavigate('campaigns')}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>
New Campaign
</button>
</div>
{/* Stats */}
<div className="stats-grid">
<div className="stat-card">
<div className="stat-label">Impressions</div>
<div className="stat-value">{loading ? '—' : formatNumber(stats.impressions)}</div>
</div>
<div className="stat-card">
<div className="stat-label">Clicks</div>
<div className="stat-value text-blue">{loading ? '—' : formatNumber(stats.clicks)}</div>
</div>
<div className="stat-card">
<div className="stat-label">Conversions</div>
<div className="stat-value text-green">{loading ? '—' : formatNumber(stats.conversions)}</div>
</div>
<div className="stat-card">
<div className="stat-label">Total Spend</div>
<div className="stat-value">{loading ? '—' : formatCurrency(stats.spend)}</div>
</div>
</div>
{/* Quick Actions */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '28px' }}>
<div className="content-card">
<div className="content-card-header">
<h3>Quick Actions</h3>
</div>
<div className="content-card-body padded">
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<button className="btn btn-outline" onClick={() => onNavigate('campaigns')}>View All Campaigns</button>
<button className="btn btn-outline" onClick={() => onNavigate('reporting')}>View Reports</button>
<button className="btn btn-outline" onClick={() => onNavigate('accounts')}>Manage Accounts</button>
</div>
</div>
</div>
<div className="content-card">
<div className="content-card-header">
<h3>Getting Started</h3>
</div>
<div className="content-card-body padded">
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
{['Link your Google Ads account', 'Create your first campaign', 'Set a daily budget', 'Review performance metrics'].map((step, i) => (
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '14px' }}>
<div style={{ width: '24px', height: '24px', borderRadius: '50%', background: 'var(--color-primary-light)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: '600', flexShrink: 0 }}>{i + 1}</div>
<span>{step}</span>
</div>
))}
</div>
</div>
</div>
</div>
{/* Recent Campaigns */}
<div className="content-card">
<div className="content-card-header">
<h3>Recent Campaigns</h3>
{campaigns.length > 0 && (
<button className="btn btn-sm btn-outline" onClick={() => onNavigate('campaigns')}>View All</button>
)}
</div>
<div className="content-card-body">
{loading ? (
<div className="loading-placeholder padded">
{[1,2,3].map(i => <div key={i} className="skeleton skeleton-row" style={{width: `${100 - i*15}%`}} />)}
</div>
) : campaigns.length === 0 ? (
<div className="empty-state">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
<h3>No campaigns yet</h3>
<p>Create your first campaign to get started</p>
<button className="btn btn-primary btn-sm" onClick={() => onNavigate('campaigns')}>Create Campaign</button>
</div>
) : (
campaigns.slice(0, 5).map((c, i) => (
<div key={i} className="campaign-row" onClick={() => onNavigate('campaigns')}>
<div className="campaign-info">
<span className="campaign-name">{c.name || `Campaign ${i+1}`}</span>
<span className="campaign-type">{(c.advertisingChannelType || 'Search').replace('ADVERTISING_CHANNEL_TYPE_', '')}</span>
</div>
<span className={`status-badge status-${formatStatus(c.status)}`}>
{formatStatus(c.status)}
</span>
</div>
))
)}
</div>
</div>
</div>
);
}

118
Client-Client/src/components/views/Developer.jsx Normal file
View File

@@ -0,0 +1,118 @@
import React, { useState } from 'react';
import { callService, gatewayHealth } from '../../services/apiClient';
const presets = [
{ label: 'Health Check', provider: '', operation: '' },
{ label: 'List Campaigns', provider: 'google', operation: 'ListCampaigns' },
{ label: 'List Accounts', provider: 'google', operation: 'ListAccounts' },
{ label: 'Get Stats', provider: 'google', operation: 'GetCampaignStats' },
{ label: 'Account Info', provider: 'google', operation: 'GetAccountInfo' },
];
export default function Developer({ sessionToken }) {
const [provider, setProvider] = useState('google');
const [operation, setOperation] = useState('ListCampaigns');
const [params, setParams] = useState('');
const [response, setResponse] = useState(null);
const [loading, setLoading] = useState(false);
const [elapsed, setElapsed] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setResponse(null);
const start = Date.now();
let result;
if (!provider) {
// Health check
result = await gatewayHealth();
} else {
let extra = {};
if (params.trim()) {
try { extra = JSON.parse(params); } catch { extra = { rawParams: params }; }
}
result = await callService(provider, operation, extra, { sessionToken });
}
setElapsed(Date.now() - start);
setResponse(result);
setLoading(false);
};
const applyPreset = (preset) => {
setProvider(preset.provider);
setOperation(preset.operation);
setParams('');
};
return (
<div>
<div className="view-header">
<div>
<h1>API Testing</h1>
<p className="view-subtitle">Test Gateway execution endpoints directly</p>
</div>
</div>
{/* Presets */}
<div className="preset-row">
{presets.map((p, i) => (
<button key={i} className="btn btn-sm btn-outline" onClick={() => applyPreset(p)}>{p.label}</button>
))}
</div>
{/* Request Form */}
<div className="dev-form">
<form onSubmit={handleSubmit}>
<div className="form-row">
<div className="form-group">
<label>Provider</label>
<input className="form-input" type="text" value={provider} onChange={e => setProvider(e.target.value)} placeholder="google" />
</div>
<div className="form-group">
<label>Operation</label>
<input className="form-input" type="text" value={operation} onChange={e => setOperation(e.target.value)} placeholder="ListCampaigns" />
</div>
</div>
<div className="form-group">
<label>Additional Parameters (JSON)</label>
<textarea
className="form-input"
rows="3"
value={params}
onChange={e => setParams(e.target.value)}
placeholder='{"customerId": "123-456-7890"}'
style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', resize: 'vertical' }}
/>
</div>
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<button className="btn btn-primary" type="submit" disabled={loading}>
{loading ? <><span className="btn-spinner" /> Sending...</> : 'Send Request'}
</button>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>
POST /api/execution/request • Authorization: Bearer {'<session_token>'}
</span>
</div>
</form>
</div>
{/* Response */}
{response && (
<div className="dev-response">
<div className="response-header">
<div className={`status-dot ${response.ok ? 'green' : 'red'}`} />
<span>HTTP {response.status}</span>
{response.data?.correlationId && (
<span className="request-id">{response.data.correlationId}</span>
)}
<span className="elapsed">{elapsed}ms</span>
</div>
<pre className="response-body">
{JSON.stringify(response.data || response, null, 2)}
</pre>
</div>
)}
</div>
);
}

151
Client-Client/src/components/views/Reporting.jsx Normal file
View File

@@ -0,0 +1,151 @@
import React, { useState, useEffect } from 'react';
import { callService } from '../../services/apiClient';
const formatNumber = (n) => n != null ? Number(n).toLocaleString() : '—';
const formatCurrency = (micros) => micros ? '$' + (parseInt(micros) / 1000000).toFixed(2) : '$0.00';
const datePresets = [
{ label: 'Last 7 Days', days: 7 },
{ label: 'Last 30 Days', days: 30 },
{ label: 'Last 90 Days', days: 90 },
{ label: 'This Month', days: 'month' },
];
export default function Reporting({ sessionToken }) {
const [campaigns, setCampaigns] = useState([]);
const [loading, setLoading] = useState(true);
const [activePreset, setActivePreset] = useState(1);
const [sortBy, setSortBy] = useState('impressions');
const [sortDir, setSortDir] = useState('desc');
useEffect(() => {
async function load() {
setLoading(true);
const res = await callService('google', 'ListCampaigns', {}, { sessionToken });
if (res.ok && res.data?.data) {
setCampaigns(Array.isArray(res.data.data) ? res.data.data : []);
}
setLoading(false);
}
if (sessionToken) load();
}, [sessionToken]);
const totals = campaigns.reduce((acc, c) => {
const m = c.metrics || {};
acc.impressions += parseInt(m.impressions || 0);
acc.clicks += parseInt(m.clicks || 0);
acc.conversions += parseInt(m.conversions || 0);
acc.cost += parseInt(m.costMicros || 0);
return acc;
}, { impressions: 0, clicks: 0, conversions: 0, cost: 0 });
totals.ctr = totals.impressions > 0 ? ((totals.clicks / totals.impressions) * 100).toFixed(2) : '0.00';
totals.cpc = totals.clicks > 0 ? (totals.cost / totals.clicks / 1000000).toFixed(2) : '0.00';
const sorted = [...campaigns].sort((a, b) => {
const av = parseInt(a.metrics?.[sortBy] || 0);
const bv = parseInt(b.metrics?.[sortBy] || 0);
return sortDir === 'desc' ? bv - av : av - bv;
});
const handleSort = (col) => {
if (sortBy === col) { setSortDir(d => d === 'desc' ? 'asc' : 'desc'); }
else { setSortBy(col); setSortDir('desc'); }
};
const sortIcon = (col) => sortBy === col ? (sortDir === 'desc' ? ' ↓' : ' ↑') : '';
return (
<div>
<div className="view-header">
<div>
<h1>Reporting</h1>
<p className="view-subtitle">Campaign performance overview</p>
</div>
</div>
{/* Date Range Presets */}
<div className="preset-row">
{datePresets.map((preset, i) => (
<button
key={i}
className={`btn btn-sm ${activePreset === i ? 'btn-primary' : 'btn-outline'}`}
onClick={() => setActivePreset(i)}
>
{preset.label}
</button>
))}
</div>
{/* Summary Stats */}
<div className="stats-grid" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
{[
{ label: 'Impressions', value: formatNumber(totals.impressions) },
{ label: 'Clicks', value: formatNumber(totals.clicks) },
{ label: 'CTR', value: totals.ctr + '%' },
{ label: 'Avg CPC', value: '$' + totals.cpc },
{ label: 'Conversions', value: formatNumber(totals.conversions) },
{ label: 'Total Spend', value: formatCurrency(totals.cost) },
].map((stat, i) => (
<div key={i} className="stat-card">
<div className="stat-label">{stat.label}</div>
<div className="stat-value" style={{ fontSize: '22px' }}>{loading ? '—' : stat.value}</div>
</div>
))}
</div>
{/* Campaign Breakdown Table */}
<div className="content-card">
<div className="content-card-header">
<h3>Campaign Breakdown</h3>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>
{campaigns.length} campaign{campaigns.length !== 1 ? 's' : ''}
</span>
</div>
<div className="content-card-body">
{loading ? (
<div className="loading-placeholder padded">
{[1,2,3].map(i => <div key={i} className="skeleton skeleton-row" style={{height:'52px', marginBottom:'8px'}} />)}
</div>
) : campaigns.length === 0 ? (
<div className="empty-state">
<h3>No data available</h3>
<p>Campaign data will appear here once campaigns are running.</p>
</div>
) : (
<table className="data-table">
<thead>
<tr>
<th>Campaign</th>
<th style={{cursor:'pointer'}} onClick={() => handleSort('impressions')}>Impressions{sortIcon('impressions')}</th>
<th style={{cursor:'pointer'}} onClick={() => handleSort('clicks')}>Clicks{sortIcon('clicks')}</th>
<th>CTR</th>
<th style={{cursor:'pointer'}} onClick={() => handleSort('costMicros')}>Cost{sortIcon('costMicros')}</th>
<th style={{cursor:'pointer'}} onClick={() => handleSort('conversions')}>Conv.{sortIcon('conversions')}</th>
</tr>
</thead>
<tbody>
{sorted.map((c, i) => {
const m = c.metrics || {};
const imp = parseInt(m.impressions || 0);
const clk = parseInt(m.clicks || 0);
const ctr = imp > 0 ? ((clk / imp) * 100).toFixed(2) : '0.00';
return (
<tr key={i}>
<td style={{ fontWeight: 500 }}>{c.name || `Campaign ${i+1}`}</td>
<td>{formatNumber(imp)}</td>
<td>{formatNumber(clk)}</td>
<td>{ctr}%</td>
<td>{formatCurrency(m.costMicros)}</td>
<td>{formatNumber(m.conversions)}</td>
</tr>
);
})}
</tbody>
</table>
)}
</div>
</div>
</div>
);
}

199
Client-Client/src/components/views/Settings.jsx Normal file
View File

@@ -0,0 +1,199 @@
import React, { useState } from 'react';
import { gatewayHealth } from '../../services/apiClient';
import { GATEWAY_URL } from '../../auth/authConfig';
const tabs = [
{ id: 'general', label: 'General' },
{ id: 'connection', label: 'Connection' },
{ id: 'notifications', label: 'Notifications' },
{ id: 'security', label: 'Security' },
];
export default function Settings({ sessionUser, sessionToken, onSignOut }) {
const [activeTab, setActiveTab] = useState('general');
const [tenantId, setTenantId] = useState(localStorage.getItem('adplatform_tenantId') || '');
const [healthResult, setHealthResult] = useState(null);
const [testing, setTesting] = useState(false);
const saveTenantId = () => {
if (tenantId.trim()) {
localStorage.setItem('adplatform_tenantId', tenantId.trim());
} else {
localStorage.removeItem('adplatform_tenantId');
}
};
const testConnection = async () => {
setTesting(true);
setHealthResult(null);
const result = await gatewayHealth();
setHealthResult(result);
setTesting(false);
};
return (
<div>
<div className="view-header">
<h1>Settings</h1>
</div>
<div className="settings-layout">
<nav className="settings-nav">
{tabs.map(tab => (
<button
key={tab.id}
className={`settings-nav-item ${activeTab === tab.id ? 'active' : ''}`}
onClick={() => setActiveTab(tab.id)}
>
{tab.label}
</button>
))}
</nav>
<div className="settings-content">
{activeTab === 'general' && (
<>
<div className="settings-section">
<h3>Profile</h3>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Display Name</div>
<div className="setting-desc">{sessionUser?.name || 'Not set'}</div>
</div>
</div>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Email</div>
<div className="setting-desc">{sessionUser?.email || 'Not set'}</div>
</div>
</div>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Role</div>
<div className="setting-desc">{sessionUser?.role || 'User'}</div>
</div>
</div>
</div>
<div className="settings-section">
<h3>Tenant Configuration</h3>
<div className="form-group">
<label>Tenant ID (Google Ads Customer ID)</label>
<div className="input-row">
<input
className="form-input"
type="text"
value={tenantId}
onChange={e => setTenantId(e.target.value)}
placeholder="e.g. 123-456-7890"
/>
<button className="btn btn-primary btn-sm" onClick={saveTenantId}>Save</button>
</div>
<div style={{ fontSize: '13px', color: 'var(--color-text-muted)', marginTop: '-12px' }}>
This ID is sent as X-Tenant-Id header with API requests.
</div>
</div>
</div>
</>
)}
{activeTab === 'connection' && (
<>
<div className="settings-section">
<h3>Gateway Connection</h3>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Gateway URL</div>
<div className="setting-value">{GATEWAY_URL}</div>
</div>
</div>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Connection Test</div>
<div className="setting-desc">Verify the gateway is reachable and responding.</div>
</div>
<button className="btn btn-sm btn-outline" onClick={testConnection} disabled={testing}>
{testing ? 'Testing…' : 'Test Connection'}
</button>
</div>
{healthResult && (
<div className={healthResult.ok ? 'info-box' : 'error-box'} style={{ marginTop: '12px' }}>
{healthResult.ok
? '✓ Gateway is healthy and responding.'
: `✗ Connection failed: ${healthResult.error}`}
</div>
)}
</div>
<div className="settings-section">
<h3>Session Information</h3>
<div className="session-info-detailed">
<div className="detail-item">
<span className="detail-label">Session Token</span>
<span className="detail-value mono" style={{ wordBreak: 'break-all', fontSize: '12px' }}>
{sessionToken ? sessionToken.substring(0, 32) + '…' : 'None'}
</span>
</div>
<div className="detail-item">
<span className="detail-label">User ID</span>
<span className="detail-value mono">{sessionUser?.userId || '—'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Client ID</span>
<span className="detail-value mono">{sessionUser?.clientId || '—'}</span>
</div>
<div className="detail-item">
<span className="detail-label">Session ID</span>
<span className="detail-value mono">{sessionUser?.sessionId || '—'}</span>
</div>
</div>
</div>
</>
)}
{activeTab === 'notifications' && (
<div className="settings-section">
<h3>Notification Preferences</h3>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Campaign Alerts</div>
<div className="setting-desc">Receive alerts when campaigns need attention.</div>
</div>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>Coming soon</span>
</div>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Budget Warnings</div>
<div className="setting-desc">Get notified when budgets are nearly exhausted.</div>
</div>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>Coming soon</span>
</div>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Weekly Summary</div>
<div className="setting-desc">Receive a weekly performance summary email.</div>
</div>
<span style={{ fontSize: '13px', color: 'var(--color-text-muted)' }}>Coming soon</span>
</div>
</div>
)}
{activeTab === 'security' && (
<>
<div className="settings-section">
<h3>Authentication</h3>
<div className="setting-row">
<div className="setting-info">
<div className="setting-label">Sign Out</div>
<div className="setting-desc">End your current session and return to the login page.</div>
</div>
<button className="btn btn-sm btn-danger" onClick={onSignOut}>Sign Out</button>
</div>
</div>
</>
)}
</div>
</div>
</div>
);
}

6
Client-Client/src/index.js Normal file
View File

@@ -0,0 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './app/App';
import './styles/app.css';
createRoot(document.getElementById('root')).render(<App />);

108
Client-Client/src/services/apiClient.js Normal file
View File

@@ -0,0 +1,108 @@
import { GATEWAY_URL } from '../auth/authConfig';
/**
* Generic API fetch helper.
*/
export async function callApi(url, options = {}) {
const fullUrl = url.startsWith('http') ? url : `${GATEWAY_URL}${url}`;
try {
const response = await fetch(fullUrl, {
method: options.method || 'GET',
headers: {
'Content-Type': 'application/json',
...options.headers
},
body: options.body ? JSON.stringify(options.body) : undefined
});
const data = await response.json().catch(() => null);
return {
ok: response.ok,
status: response.status,
data,
error: response.ok ? null : (data?.message || data?.error || `HTTP ${response.status}`)
};
} catch (error) {
return {
ok: false,
status: 0,
data: null,
error: error.message || 'Network error'
};
}
}
/**
* Execute a provider operation through the Gateway.
*
* @param {string} provider - Ad platform provider: google, meta, msads
* @param {string} operation - Operation name: list, get, ping, getStats, etc.
* @param {object} params - Additional params spread into body (tenantId, payload, etc.)
* @param {object} options - { sessionToken, tenantId }
*/
export async function callService(provider, operation, params = {}, options = {}) {
const { sessionToken, tenantId } = options;
console.log('[API] callService:', provider, operation);
const headers = {
'Content-Type': 'application/json'
};
if (sessionToken) {
headers['Authorization'] = `Bearer ${sessionToken}`;
}
const effectiveTenantId = tenantId || localStorage.getItem('adplatform_tenantId');
if (effectiveTenantId) {
headers['X-Tenant-Id'] = effectiveTenantId;
}
const url = `${GATEWAY_URL}/api/execution/request`;
const body = {
provider,
operation,
...params
};
console.log('[API] Request URL:', url);
console.log('[API] Request body:', body);
try {
const response = await fetch(url, {
method: 'POST',
headers,
body: JSON.stringify(body)
});
console.log('[API] Response status:', response.status);
const data = await response.json().catch(() => null);
return {
ok: response.ok && data?.ok !== false,
status: response.status,
data,
error: response.ok ? null : (data?.message || data?.error || `HTTP ${response.status}`)
};
} catch (error) {
console.error('[API] Request error:', error);
return {
ok: false,
status: 0,
data: null,
error: error.message || 'Network error'
};
}
}
/**
* Gateway health check (no auth required).
*/
export async function gatewayHealth() {
return callApi('/health');
}
export default { callApi, callService, gatewayHealth };

266
Client-Client/src/styles/app.css Normal file
View File

@@ -0,0 +1,266 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--color-primary: #2563eb;
--color-primary-dark: #1e40af;
--color-primary-light: #eff6ff;
--color-primary-hover: #1d4ed8;
--color-success: #059669;
--color-success-light: #ecfdf5;
--color-warning: #d97706;
--color-warning-light: #fffbeb;
--color-danger: #dc2626;
--color-danger-light: #fef2f2;
--color-text: #111827;
--color-text-secondary: #374151;
--color-text-muted: #9ca3af;
--color-bg: #f8f9fb;
--color-bg-elevated: #ffffff;
--color-bg-subtle: #f3f4f6;
--color-bg-muted: #e5e7eb;
--color-border: #e5e7eb;
--color-border-light: #f3f4f6;
--sidebar-width: 260px;
--sidebar-collapsed: 72px;
--topbar-height: 56px;
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.5}
.mono{font-family:var(--font-mono);font-size:13px}
/* Landing */
.landing-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8f9fb 0%,#eff6ff 100%)}
.landing-header{padding:20px 40px;display:flex;align-items:center;justify-content:space-between}
.landing-logo{display:flex;align-items:center;gap:12px}
.landing-logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-radius:var(--radius-md);color:white}
.landing-logo-icon svg{width:22px;height:22px}
.landing-logo-text{font-size:20px;font-weight:700;color:var(--color-text)}
.landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px}
.landing-hero h1{font-size:42px;font-weight:700;color:var(--color-text);margin-bottom:16px;letter-spacing:-0.5px}
.landing-hero p{font-size:18px;color:var(--color-text-secondary);max-width:520px;margin-bottom:40px}
.landing-features{display:flex;gap:24px;margin-top:60px;max-width:800px}
.feature-card{flex:1;padding:24px;background:var(--color-bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.feature-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-light);border-radius:var(--radius-md);color:var(--color-primary);margin-bottom:16px}
.feature-card-icon svg{width:22px;height:22px}
.feature-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.feature-card p{font-size:14px;color:var(--color-text-muted);line-height:1.6}
/* Status Pages */
.status-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg);padding:20px}
.status-card{max-width:440px;width:100%;padding:48px 40px;background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center}
.status-icon{font-size:48px;margin-bottom:20px}
.status-icon.error{color:var(--color-danger)}
.status-card h2{font-size:22px;font-weight:700;margin-bottom:12px}
.status-card p{font-size:14px;color:var(--color-text-secondary);margin-bottom:8px;line-height:1.6}
.error-text{color:var(--color-danger);background:var(--color-danger-light);padding:12px 16px;border-radius:var(--radius-md);margin:16px 0;font-size:13px}
.status-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}
/* Loading */
.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--color-text-muted);font-size:14px}
.loading-spinner{width:36px;height:36px;border:3px solid var(--color-bg-muted);border-top-color:var(--color-primary);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Platform Layout */
.platform{display:flex;min-height:100vh}
.platform.sidebar-collapsed .main-area{margin-left:var(--sidebar-collapsed)}
/* Sidebar */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--color-bg-elevated);border-right:1px solid var(--color-border);display:flex;flex-direction:column;transition:width var(--transition-normal);z-index:100}
.sidebar.collapsed{width:var(--sidebar-collapsed)}
.sidebar-header{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border-light)}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,#1e40af 100%);border-radius:var(--radius-md);color:white;flex-shrink:0}
.logo-icon svg{width:22px;height:22px}
.logo-text{font-size:18px;font-weight:600;color:var(--color-text);letter-spacing:-0.3px}
.collapse-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.collapse-btn:hover{background:var(--color-bg-subtle);color:var(--color-text)}
.collapse-btn svg{width:18px;height:18px}
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
.nav-section{margin-bottom:24px}
.nav-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);padding:0 12px;margin-bottom:8px}
.nav-list{list-style:none}
.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-align:left}
.nav-item:hover{background:var(--color-bg-subtle);color:var(--color-text)}
.nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}
.nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-icon svg{width:20px;height:20px}
.sidebar-footer{padding:16px 12px;border-top:1px solid var(--color-border-light)}
.sidebar-brand{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--color-text-muted)}
.sidebar-brand strong{color:var(--color-text-secondary)}
/* Main Area */
.main-area{flex:1;margin-left:var(--sidebar-width);min-height:100%;display:flex;flex-direction:column;transition:margin-left var(--transition-normal)}
/* Top Bar */
.top-bar{height:var(--topbar-height);padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:50}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}
.breadcrumb-item{color:var(--color-text-muted)}
.breadcrumb-separator{color:var(--color-border)}
.breadcrumb-current{color:var(--color-text);font-weight:600}
.top-bar-actions{display:flex;align-items:center;gap:16px}
.client-badge{padding:4px 12px;background:var(--color-primary-light);color:var(--color-primary);border-radius:20px;font-size:12px;font-weight:600}
.user-menu{position:relative}
.user-menu-trigger{display:flex;align-items:center;gap:10px;padding:6px 10px;background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
.user-menu-trigger:hover{background:var(--color-bg-subtle);border-color:var(--color-border)}
.user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:white;border-radius:50%;font-size:13px;font-weight:600}
.user-name{font-size:13px;font-weight:500;color:var(--color-text)}
.user-dropdown{position:absolute;right:0;top:100%;margin-top:8px;width:220px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;z-index:200}
.user-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;background:none;border:none;border-radius:var(--radius-sm);font-size:13px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);text-align:left}
.user-dropdown-item:hover{background:var(--color-bg-subtle);color:var(--color-text)}
.user-dropdown-item.danger{color:var(--color-danger)}
.user-dropdown-item.danger:hover{background:var(--color-danger-light)}
.user-dropdown-divider{height:1px;background:var(--color-border-light);margin:6px 0}
/* Content Area */
.content-area{flex:1;padding:32px}
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.view-header h1{font-size:28px;font-weight:700;letter-spacing:-0.3px}
.view-subtitle{font-size:14px;color:var(--color-text-muted);margin-top:4px}
/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:28px}
.stat-card{padding:24px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.stat-label{font-size:13px;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:700;color:var(--color-text)}
.stat-value.text-green{color:var(--color-success)}
.stat-value.text-red{color:var(--color-danger)}
.stat-value.text-blue{color:var(--color-primary)}
/* Content Cards */
.content-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.content-card-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border-light)}
.content-card-header h3{font-size:16px;font-weight:600}
.content-card-body{padding:0}
.content-card-body.padded{padding:24px}
/* Data Table */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px 20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border)}
.data-table td{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--color-border-light)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--color-bg-subtle);cursor:pointer}
/* Campaign Rows */
.campaign-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--color-border-light);cursor:pointer;transition:background var(--transition-fast)}
.campaign-row:hover{background:var(--color-bg-subtle)}
.campaign-row:last-child{border-bottom:none}
.campaign-info{display:flex;flex-direction:column;gap:2px}
.campaign-name{font-size:14px;font-weight:500;color:var(--color-text)}
.campaign-type{font-size:12px;color:var(--color-text-muted)}
/* Status Badges */
.status-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;text-transform:capitalize}
.status-badge.status-enabled,.status-badge.status-active{background:var(--color-success-light);color:var(--color-success)}
.status-badge.status-paused{background:var(--color-warning-light);color:var(--color-warning)}
.status-badge.status-removed,.status-badge.status-disabled{background:var(--color-danger-light);color:var(--color-danger)}
/* Detail Panel */
.detail-panel{position:fixed;right:0;top:0;bottom:0;width:420px;background:var(--color-bg-elevated);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:150;display:flex;flex-direction:column;animation:slideIn 0.25s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.detail-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border)}
.detail-panel-header h3{font-size:18px;font-weight:600}
.detail-panel-body{flex:1;overflow-y:auto;padding:24px}
.detail-section{margin-bottom:28px}
.detail-section h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);margin-bottom:16px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-item{display:flex;flex-direction:column;gap:4px}
.detail-label{font-size:12px;color:var(--color-text-muted)}
.detail-value{font-size:14px;font-weight:500;color:var(--color-text)}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn 0.15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:520px;max-height:90vh;background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:scaleIn 0.2s ease}
@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border)}
.modal-header h3{font-size:18px;font-weight:600}
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm)}
.modal-close:hover{background:var(--color-bg-subtle);color:var(--color-text)}
.modal-body{padding:24px;overflow-y:auto}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--color-border);background:var(--color-bg-subtle);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
/* Forms */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--color-text-secondary);margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-sans);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.form-input::placeholder{color:var(--color-text-muted)}
.form-row{display:flex;gap:16px}
.form-row .form-group{flex:1}
.input-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:20px}
.input-row .form-input{flex:1}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:1px solid transparent;border-radius:var(--radius-md);font-size:14px;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:white;border-color:var(--color-primary)}
.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}
.btn-outline{background:var(--color-bg-elevated);color:var(--color-text-secondary);border-color:var(--color-border)}
.btn-outline:hover:not(:disabled){background:var(--color-bg-subtle);border-color:var(--color-text-muted)}
.btn-danger{background:var(--color-danger);color:white;border-color:var(--color-danger)}
.btn-danger:hover:not(:disabled){background:#b91c1c}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-icon{padding:8px}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.6s linear infinite}
/* Info/Error Boxes */
.info-box{padding:14px 20px;background:var(--color-primary-light);border:1px solid #bfdbfe;border-radius:var(--radius-md);font-size:14px;color:var(--color-primary-dark);margin-bottom:20px}
.error-box{padding:14px 20px;background:var(--color-danger-light);border:1px solid #fca5a5;border-radius:var(--radius-md);font-size:14px;color:var(--color-danger);margin-bottom:20px}
/* Empty States */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--color-text-muted)}
.empty-state svg{margin-bottom:16px;opacity:0.5}
.empty-state h3{font-size:16px;font-weight:600;color:var(--color-text-secondary);margin-bottom:8px}
.empty-state p{font-size:14px;margin-bottom:20px}
/* Settings */
.settings-layout{display:flex;gap:32px}
.settings-nav{width:200px;flex-shrink:0}
.settings-nav-item{width:100%;display:block;padding:10px 16px;background:none;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;text-align:left;transition:all var(--transition-fast);margin-bottom:4px}
.settings-nav-item:hover{background:var(--color-bg-subtle)}
.settings-nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}
.settings-content{flex:1}
.settings-section{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px}
.settings-section h3{font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--color-border-light)}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--color-border-light)}
.setting-row:last-child{border-bottom:none}
.setting-info{flex:1}
.setting-label{font-size:14px;font-weight:500;color:var(--color-text)}
.setting-desc{font-size:13px;color:var(--color-text-muted);margin-top:2px}
.setting-value{font-size:13px;color:var(--color-text-secondary);font-family:var(--font-mono)}
.session-info-detailed{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* Developer */
.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.dev-form{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}
.dev-response{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.response-header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);font-size:13px;font-weight:500}
.status-dot{width:10px;height:10px;border-radius:50%}
.status-dot.green{background:var(--color-success)}
.status-dot.red{background:var(--color-danger)}
.elapsed{color:var(--color-text-muted);margin-left:auto}
.request-id{color:var(--color-text-muted);font-family:var(--font-mono);font-size:12px}
.response-body{padding:20px;font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow-x:auto;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
/* Skeletons */
.skeleton{background:linear-gradient(90deg,var(--color-bg-subtle) 25%,var(--color-bg-muted) 50%,var(--color-bg-subtle) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-row{height:16px;margin-bottom:12px}
.loading-placeholder{padding:16px 0}
.loading-placeholder.padded{padding:20px}
/* Responsive */
@media(max-width:900px){.settings-layout{flex-direction:column}.settings-nav{width:100%;display:flex;gap:8px;overflow-x:auto}.landing-features{flex-direction:column}}
@media(max-width:768px){.content-area{padding:20px}.view-header{flex-direction:column;gap:16px}.detail-panel{width:100%}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}}

27
Client-Client/webpack.config.js Normal file
View File

@@ -0,0 +1,27 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
clean: true
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
resolve: { extensions: ['.js', '.jsx'] },
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html', favicon: false })
],
devServer: {
port: 8080,
historyApiFallback: true,
hot: true
}
};

1
Client-Registration/.babelrc Normal file
View File

@@ -0,0 +1 @@
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

7302
Client-Registration/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
Client-Registration/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "adplatform-registration",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development --port 3001",
"build": "webpack --mode production"
},
"dependencies": {
"@azure/msal-browser": "^3.6.0",
"@azure/msal-react": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.23.0",
"@babel/preset-react": "^7.22.0",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.0",
"webpack": "^5.88.0",
"webpack-cli": "^5.1.0",
"webpack-dev-server": "^5.2.3"
}
}

2
Client-Registration/public/bundle.js Normal file
View File

File diff suppressed because one or more lines are too long

35
Client-Registration/public/bundle.js.LICENSE.txt Normal file
View File

@@ -0,0 +1,35 @@
/*! @azure/msal-browser v3.30.0 2025-08-05 */
/*! @azure/msal-common v14.16.1 2025-08-05 */
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

1
Client-Registration/public/index.html Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AdPlatform — Get Started</title><link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>"/><script defer="defer" src="/bundle.js"></script></head><body><div id="root"></div></body></html>

321
Client-Registration/src/App.jsx Normal file
View File

@@ -0,0 +1,321 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { PublicClientApplication } from '@azure/msal-browser';
// ─── Config ───
const TENANT_ID = '891f98f1-ed34-42a1-9b6c-28b0554d92c2';
const CLIENT_ID = '154c9111-14a0-4c0f-8132-7bc68254a74e';
const AUTHORITY = `https://USIMClients.ciamlogin.com/${TENANT_ID}`;
const GATEWAY_URL = 'https://adsapi.usimdev.com';
const CLIENT_APP = 'https://adpclient.usimdev.com';
const msalConfig = {
auth: {
clientId: CLIENT_ID,
authority: AUTHORITY,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
knownAuthorities: ['USIMClients.ciamlogin.com'],
navigateToLoginRequestUrl: true
},
cache: { cacheLocation: 'sessionStorage', storeAuthStateInCookie: false },
system: {
loggerOptions: {
loggerCallback: (level, msg, pii) => { if (!pii && level <= 1) console.warn(msg); },
logLevel: 1
}
}
};
const loginRequest = { scopes: ['openid', 'profile', 'email'] };
const msalInstance = new PublicClientApplication(msalConfig);
const msalReady = msalInstance.initialize();
// ─── App ───
export default function App() {
// States: loading | unauthenticated | form | submitting | success | error
const [state, setState] = useState('loading');
const [jwt, setJwt] = useState(null);
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
const [form, setForm] = useState({ companyName: '', industry: '', website: '' });
const initRef = useRef(false);
// ─── Initialize MSAL & authenticate ───
useEffect(() => {
if (initRef.current) return;
initRef.current = true;
(async () => {
try {
await msalReady;
console.log('[Reg] MSAL initialized');
// Handle redirect response first
const redirectResult = await msalInstance.handleRedirectPromise();
if (redirectResult?.accessToken || redirectResult?.idToken) {
const token = redirectResult.accessToken || redirectResult.idToken;
console.log('[Reg] Got token from redirect');
setJwt(token);
setUser({
name: redirectResult.account?.name,
email: redirectResult.account?.username
});
setState('form');
return;
}
// Try silent token acquisition (SSO from client app)
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
try {
const silent = await msalInstance.acquireTokenSilent({
...loginRequest,
account: accounts[0]
});
console.log('[Reg] Silent token acquired');
setJwt(silent.accessToken || silent.idToken);
setUser({ name: accounts[0].name, email: accounts[0].username });
setState('form');
return;
} catch (e) {
console.warn('[Reg] Silent failed, need interaction:', e.message);
}
}
setState('unauthenticated');
} catch (err) {
console.error('[Reg] Init error:', err);
setError(err.message);
setState('error');
}
})();
}, []);
// ─── Sign in ───
const signIn = useCallback(async () => {
try {
setState('loading');
await msalInstance.loginRedirect(loginRequest);
} catch (err) {
setError(err.message);
setState('error');
}
}, []);
// ─── Submit registration ───
const handleSubmit = useCallback(async (e) => {
e.preventDefault();
if (!form.companyName.trim()) return;
setState('submitting');
setError(null);
try {
const res = await fetch(`${GATEWAY_URL}/api/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${jwt}`
},
body: JSON.stringify({
companyName: form.companyName.trim(),
industry: form.industry.trim() || null,
website: form.website.trim() || null
})
});
const body = await res.json();
console.log('[Reg] Register response:', res.status, body);
if (body.ok) {
setState('success');
// Redirect to client app after short delay
setTimeout(() => {
window.location.href = CLIENT_APP;
}, 3000);
} else {
setError(body.error || 'Registration failed');
setState('form');
}
} catch (err) {
console.error('[Reg] Submit error:', err);
setError('Unable to connect to the server. Please try again.');
setState('form');
}
}, [jwt, form]);
const updateField = (field) => (e) => setForm({ ...form, [field]: e.target.value });
// ─── Render ───
return (
<div className="reg-page">
<header className="reg-header">
<div className="reg-logo" onClick={() => window.location.href = CLIENT_APP}>
<div className="reg-logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
</div>
<span>AdPlatform</span>
</div>
</header>
<main className="reg-main">
{/* Loading */}
{state === 'loading' && (
<div className="reg-card center">
<div className="spinner" />
<p className="reg-text-muted">Preparing your account…</p>
</div>
)}
{/* Unauthenticated */}
{state === 'unauthenticated' && (
<div className="reg-card">
<div className="reg-card-header">
<div className="step-badge">Step 1 of 2</div>
<h1>Welcome to AdPlatform</h1>
<p>Sign in with your Microsoft, Google, or Apple account to get started.</p>
</div>
<button className="btn btn-primary btn-lg btn-full" onClick={signIn}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" />
</svg>
Sign In to Continue
</button>
<p className="reg-text-muted small">You'll be redirected to Microsoft's sign-in page. If you already have an account, you'll be signed in automatically.</p>
</div>
)}
{/* Registration Form */}
{state === 'form' && (
<div className="reg-card">
<div className="reg-card-header">
<div className="step-badge">Step 2 of 2</div>
<h1>Set Up Your Account</h1>
<p>Tell us about your organization to complete registration.</p>
</div>
{user && (
<div className="reg-user-info">
<div className="reg-user-avatar">{(user.name || user.email || 'U')[0].toUpperCase()}</div>
<div>
<div className="reg-user-name">{user.name || 'User'}</div>
<div className="reg-user-email">{user.email}</div>
</div>
</div>
)}
{error && (
<div className="reg-error">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
{error}
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Organization / Company Name <span className="required">*</span></label>
<input
type="text"
className="form-input"
placeholder="e.g. Acme Marketing Inc."
value={form.companyName}
onChange={updateField('companyName')}
autoFocus
required
/>
<span className="form-hint">This will be your client name in AdPlatform.</span>
</div>
<div className="form-group">
<label>Industry</label>
<select className="form-input" value={form.industry} onChange={updateField('industry')}>
<option value="">Select an industry (optional)</option>
<option value="Retail / E-commerce">Retail / E-commerce</option>
<option value="Technology / SaaS">Technology / SaaS</option>
<option value="Healthcare">Healthcare</option>
<option value="Finance / Insurance">Finance / Insurance</option>
<option value="Real Estate">Real Estate</option>
<option value="Education">Education</option>
<option value="Travel / Hospitality">Travel / Hospitality</option>
<option value="Food / Restaurant">Food / Restaurant</option>
<option value="Professional Services">Professional Services</option>
<option value="Non-profit">Non-profit</option>
<option value="Other">Other</option>
</select>
</div>
<div className="form-group">
<label>Website</label>
<input
type="url"
className="form-input"
placeholder="https://www.example.com"
value={form.website}
onChange={updateField('website')}
/>
</div>
<button type="submit" className="btn btn-primary btn-lg btn-full" disabled={!form.companyName.trim()}>
Complete Registration
</button>
<p className="reg-text-muted small center-text">
By registering, your advertising account will be managed under the USIM agency umbrella.
</p>
</form>
</div>
)}
{/* Submitting */}
{state === 'submitting' && (
<div className="reg-card center">
<div className="spinner" />
<h2>Creating Your Account</h2>
<p className="reg-text-muted">Setting up {form.companyName}…</p>
</div>
)}
{/* Success */}
{state === 'success' && (
<div className="reg-card center">
<div className="success-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
</div>
<h1>You're All Set!</h1>
<p className="reg-text-muted">
<strong>{form.companyName}</strong> has been registered. Redirecting you to the dashboard…
</p>
<div className="progress-bar"><div className="progress-fill" /></div>
<a href={CLIENT_APP} className="btn btn-outline">Go to Dashboard Now</a>
</div>
)}
{/* Error */}
{state === 'error' && (
<div className="reg-card center">
<div className="error-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
</svg>
</div>
<h2>Something Went Wrong</h2>
<p className="reg-text-muted">{error}</p>
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
<button className="btn btn-primary" onClick={() => { setError(null); setState('unauthenticated'); }}>Try Again</button>
<a href={CLIENT_APP} className="btn btn-outline">Back to Home</a>
</div>
</div>
)}
</main>
<footer className="reg-footer">
<span>Powered by <strong>USIM</strong></span>
</footer>
</div>
);
}

6
Client-Registration/src/index.js Normal file
View File

@@ -0,0 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './styles.css';
createRoot(document.getElementById('root')).render(<App />);

327
Client-Registration/src/styles.css Normal file
View File

@@ -0,0 +1,327 @@
/* ─── Registration Portal Styles ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-light: #eff6ff;
--color-success: #059669;
--color-success-light: #ecfdf5;
--color-error: #dc2626;
--color-error-light: #fef2f2;
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-border: #e2e8f0;
--color-text: #0f172a;
--color-text-secondary: #475569;
--color-text-muted: #94a3b8;
--radius: 12px;
--radius-sm: 8px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
--shadow-lg: 0 4px 24px rgba(0,0,0,0.08), 0 12px 48px rgba(0,0,0,0.04);
}
body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* ─── Page Layout ─── */
.reg-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.reg-header {
padding: 20px 32px;
display: flex;
align-items: center;
}
.reg-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
cursor: pointer;
text-decoration: none;
}
.reg-logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--color-primary), #3b82f6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.reg-logo-icon svg { width: 20px; height: 20px; }
.reg-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.reg-footer {
padding: 20px 32px;
text-align: center;
font-size: 13px;
color: var(--color-text-muted);
}
/* ─── Card ─── */
.reg-card {
width: 100%;
max-width: 480px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 40px;
}
.reg-card.center { text-align: center; }
.reg-card-header {
margin-bottom: 28px;
}
.reg-card-header h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.reg-card-header p {
color: var(--color-text-secondary);
font-size: 15px;
}
.reg-card h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
/* ─── Step Badge ─── */
.step-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* ─── User Info Bar ─── */
.reg-user-info {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: 24px;
}
.reg-user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
flex-shrink: 0;
}
.reg-user-name { font-weight: 600; font-size: 14px; }
.reg-user-email { font-size: 13px; color: var(--color-text-muted); }
/* ─── Forms ─── */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
color: var(--color-text);
}
.required { color: var(--color-error); }
.form-input {
width: 100%;
padding: 10px 14px;
font-size: 15px;
font-family: inherit;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.form-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-input::placeholder { color: var(--color-text-muted); }
select.form-input {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.form-hint {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin-top: 6px;
}
/* ─── Buttons ─── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
padding: 10px 20px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
line-height: 1.4;
}
.btn-primary {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
.btn-outline:hover { background: var(--color-bg); border-color: var(--color-text-muted); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-full { width: 100%; }
/* ─── Error Box ─── */
.reg-error {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--color-error-light);
color: var(--color-error);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
}
/* ─── Success / Error Icons ─── */
.success-icon {
color: var(--color-success);
margin-bottom: 16px;
}
.success-icon svg { width: 64px; height: 64px; }
.error-icon {
color: var(--color-error);
margin-bottom: 16px;
}
.error-icon svg { width: 64px; height: 64px; }
/* ─── Spinner ─── */
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── Progress Bar (success state) ─── */
.progress-bar {
width: 100%;
height: 4px;
background: var(--color-border);
border-radius: 4px;
overflow: hidden;
margin: 20px 0;
}
.progress-fill {
height: 100%;
background: var(--color-success);
border-radius: 4px;
animation: fill-progress 3s linear forwards;
}
@keyframes fill-progress { from { width: 0; } to { width: 100%; } }
/* ─── Text Utilities ─── */
.reg-text-muted { color: var(--color-text-secondary); font-size: 15px; }
.reg-text-muted.small { font-size: 13px; margin-top: 16px; }
.center-text { text-align: center; }
/* ─── Responsive ─── */
@media (max-width: 540px) {
.reg-card { padding: 28px 24px; }
.reg-card-header h1 { font-size: 20px; }
.reg-header { padding: 16px 20px; }
}

15
Client-Registration/webpack.config.js Normal file
View File

@@ -0,0 +1,15 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js', publicPath: '/' },
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
resolve: { extensions: ['.js', '.jsx'] },
plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
devServer: { historyApiFallback: true, port: 3001, hot: true }
};

6857
Client-TestApi/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
Client-TestApi/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "react-api-test-harness",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"@azure/msal-browser": "^3.27.0",
"@azure/msal-react": "^2.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"@babel/preset-react": "^7.24.5",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.2",
"style-loader": "^4.0.0",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.2.3"
}
}

2
Client-TestApi/public/bundle.js Normal file
View File

File diff suppressed because one or more lines are too long

37
Client-TestApi/public/bundle.js.LICENSE.txt Normal file
View File

@@ -0,0 +1,37 @@
/*! @azure/msal-browser v3.30.0 2025-08-05 */
/*! @azure/msal-common v14.16.1 2025-08-05 */
/*! @azure/msal-react v2.2.0 2024-11-05 */
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

11
Client-TestApi/public/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>API Test Harness</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

38
Client-TestApi/src/app/App.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { AuthProvider, useAuth } from '../auth/AuthProvider';
import SignInOverlay from '../components/SignInOverlay';
import Shell from '../components/Shell';
function AppContent() {
const { isAuthenticated, isLoading } = useAuth();
// Show loading state while checking auth
if (isLoading) {
return (
<div className="app-loading">
<div className="loading-spinner" />
<p>Loading...</p>
</div>
);
}
return (
<div className="app-container">
{/* Dashboard is always rendered but blurred when not authenticated */}
<div className={`dashboard ${!isAuthenticated ? 'dashboard-blurred' : ''}`}>
<Shell />
</div>
{/* Sign-in overlay shown when not authenticated */}
{!isAuthenticated && <SignInOverlay />}
</div>
);
}
export default function App() {
return (
<AuthProvider>
<AppContent />
</AuthProvider>
);
}

197
Client-TestApi/src/auth/AuthProvider.jsx Normal file
View File

@@ -0,0 +1,197 @@
// src/auth/AuthProvider.jsx
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
import { PublicClientApplication, InteractionStatus } from '@azure/msal-browser';
import { MsalProvider, useMsal, useIsAuthenticated } from '@azure/msal-react';
import { msalConfig, loginRequest, SESSION_ENDPOINT } from './authConfig';
// Create MSAL instance
const msalInstance = new PublicClientApplication(msalConfig);
// Initialize MSAL
msalInstance.initialize().then(() => {
// Handle redirect promise on page load
msalInstance.handleRedirectPromise().catch(console.error);
});
// Auth context for session management
const AuthContext = createContext(null);
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}
// Inner provider that has access to MSAL hooks
function AuthProviderInner({ children }) {
const { instance, accounts, inProgress } = useMsal();
const isAuthenticated = useIsAuthenticated();
const [sessionToken, setSessionToken] = useState(null);
const [sessionUser, setSessionUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
// Get the current account
const account = accounts[0] || null;
// Exchange Entra JWT for session token
const exchangeForSession = useCallback(async (accessToken) => {
try {
setError(null);
const response = await fetch(SESSION_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`,
},
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Session exchange failed: ${response.status} - ${errorText}`);
}
const data = await response.json();
// Store session token
setSessionToken(data.sessionToken || data.token);
setSessionUser(data.user || {
email: account?.username,
name: account?.name,
clientId: data.clientId,
});
// Persist to sessionStorage
sessionStorage.setItem('adp_session_token', data.sessionToken || data.token);
sessionStorage.setItem('adp_session_user', JSON.stringify(data.user || {}));
return true;
} catch (err) {
console.error('Session exchange error:', err);
setError(err.message);
return false;
}
}, [account]);
// Acquire token and exchange for session
const initializeSession = useCallback(async () => {
if (!account) {
setIsLoading(false);
return;
}
try {
setIsLoading(true);
setError(null);
// Try to get token silently first
const tokenResponse = await instance.acquireTokenSilent({
...loginRequest,
account,
});
// Exchange ID token for session token (idToken is for our app, accessToken is for Graph API)
await exchangeForSession(tokenResponse.idToken);
} catch (err) {
console.error('Token acquisition error:', err);
// If silent fails, we'll need interactive login
setError('Please sign in again');
} finally {
setIsLoading(false);
}
}, [account, instance, exchangeForSession]);
// Check for existing session on mount
useEffect(() => {
const existingToken = sessionStorage.getItem('adp_session_token');
const existingUser = sessionStorage.getItem('adp_session_user');
if (existingToken && existingUser) {
setSessionToken(existingToken);
try {
setSessionUser(JSON.parse(existingUser));
} catch {
setSessionUser({});
}
setIsLoading(false);
} else if (isAuthenticated && inProgress === InteractionStatus.None) {
initializeSession();
} else if (inProgress === InteractionStatus.None) {
setIsLoading(false);
}
}, [isAuthenticated, inProgress, initializeSession]);
// Sign in handler
const signIn = useCallback(async () => {
try {
setError(null);
setIsLoading(true);
// Use redirect for External ID (more reliable)
await instance.loginRedirect(loginRequest);
} catch (err) {
console.error('Sign in error:', err);
setError(err.message);
setIsLoading(false);
}
}, [instance]);
// Sign out handler
const signOut = useCallback(async () => {
try {
// Clear session storage
sessionStorage.removeItem('adp_session_token');
sessionStorage.removeItem('adp_session_user');
setSessionToken(null);
setSessionUser(null);
// Sign out from MSAL
await instance.logoutRedirect();
} catch (err) {
console.error('Sign out error:', err);
}
}, [instance]);
// Refresh session (re-acquire token and exchange)
const refreshSession = useCallback(async () => {
await initializeSession();
}, [initializeSession]);
const value = {
// Auth state
isAuthenticated: !!sessionToken,
isLoading: isLoading || inProgress !== InteractionStatus.None,
error,
// User info
account,
sessionUser,
sessionToken,
// Actions
signIn,
signOut,
refreshSession,
clearError: () => setError(null),
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
}
// Main provider wrapping MSAL
export function AuthProvider({ children }) {
return (
<MsalProvider instance={msalInstance}>
<AuthProviderInner>
{children}
</AuthProviderInner>
</MsalProvider>
);
}

45
Client-TestApi/src/auth/authConfig.js Normal file
View File

@@ -0,0 +1,45 @@
// src/auth/authConfig.js
// Entra ID Configuration for USIMClients tenant
const TENANT_ID = '891f98f1-ed34-42a1-9b6c-28b0554d92c2';
const CLIENT_ID = '154c9111-14a0-4c0f-8132-7bc68254a74e';
// Gateway API base URL
export const API_BASE = 'https://adsapi.usimdev.com';
export const msalConfig = {
auth: {
clientId: CLIENT_ID,
// Regular Entra ID uses login.microsoftonline.com
authority: `https://login.microsoftonline.com/${TENANT_ID}`,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
navigateToLoginRequestUrl: true,
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false,
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) return;
switch (level) {
case 0: console.error(message); break;
case 1: console.warn(message); break;
case 2: console.info(message); break;
case 3: console.debug(message); break;
}
},
logLevel: 3, // Set to 0 for errors only in production
},
},
};
// Scopes to request during login
export const loginRequest = {
scopes: ['openid', 'profile', 'email'],
};
// Session endpoint on Gateway
export const SESSION_ENDPOINT = `${API_BASE}/api/auth/session`;

9
Client-TestApi/src/components/ResponsePanel.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function ResponsePanel() {
return (
<pre id="response-panel">
Response will appear here
</pre>
);
}

138
Client-TestApi/src/components/ServiceForm.js Normal file
View File

@@ -0,0 +1,138 @@
import React, { useEffect, useMemo, useState } from 'react';
import { useAuth } from '../auth/AuthProvider';
import { providers } from '../services/providerCatalog';
import { getServices, getService } from '../services/serviceCatalog';
import { callApi } from '../services/apiClient';
// localStorage key for persisting tenant ID
const TENANT_STORAGE_KEY = 'adp_tenantId';
export default function ServiceForm() {
const { sessionToken, sessionUser } = useAuth();
const [providerId, setProviderId] = useState(providers[0].id);
const services = useMemo(() => getServices(providerId), [providerId]);
const [serviceId, setServiceId] = useState(services?.[0]?.id || '');
const [input, setInput] = useState('{}');
const [resp, setResp] = useState(null);
const [isBusy, setIsBusy] = useState(false);
// Tenant ID (Google Ads Customer ID) - still persisted for convenience
const [tenantId, setTenantId] = useState(() =>
localStorage.getItem(TENANT_STORAGE_KEY) || ''
);
// Get current service definition for display
const currentService = useMemo(() => getService(providerId, serviceId), [providerId, serviceId]);
// Persist tenant ID changes
useEffect(() => {
localStorage.setItem(TENANT_STORAGE_KEY, tenantId);
}, [tenantId]);
// Keep serviceId valid when provider changes
useEffect(() => {
const newServices = getServices(providerId);
const firstService = newServices?.[0];
setServiceId(firstService?.id || '');
if (firstService?.sample) {
setInput(JSON.stringify(firstService.sample, null, 2));
}
}, [providerId]);
// Update sample input when service changes
useEffect(() => {
const service = getService(providerId, serviceId);
if (service?.sample) {
setInput(JSON.stringify(service.sample, null, 2));
}
}, [serviceId, providerId]);
const submit = async () => {
setIsBusy(true);
setResp(null);
try {
const authConfig = {
sessionToken,
tenantId: tenantId.trim() || undefined,
};
const result = await callApi(providerId, serviceId, input, authConfig);
setResp(result);
} catch (e) {
setResp({ ok: false, error: e?.message || String(e) });
} finally {
setIsBusy(false);
}
};
return (
<div className="card">
{/* Session Info */}
<div className="session-info">
<span className="session-badge">
<span className="session-dot" />
Session Active
</span>
{sessionUser?.clientId && (
<span className="client-badge">Client: {sessionUser.clientId}</span>
)}
</div>
{/* Tenant Configuration */}
<fieldset className="auth-section">
<legend>Target Account</legend>
<div className="row row-inline">
<label>Tenant ID</label>
<input
type="text"
value={tenantId}
onChange={(e) => setTenantId(e.target.value)}
placeholder="Google Ads Customer ID (optional)"
/>
</div>
</fieldset>
{/* Request Configuration Section */}
<div className="row">
<label>Provider</label>
<select value={providerId} onChange={(e) => setProviderId(e.target.value)}>
{providers.map(p => (
<option key={p.id} value={p.id}>{p.label}</option>
))}
</select>
</div>
<div className="row">
<label>Operation</label>
<select value={serviceId} onChange={(e) => setServiceId(e.target.value)}>
{services.map(s => (
<option key={s.id} value={s.id}>{s.label}</option>
))}
</select>
</div>
{/* Service/Action indicator */}
{currentService && !currentService.endpoint && (
<div className="row routing-info">
<span className="route-badge">
<strong>Route:</strong> {providerId} → {currentService.service} → {currentService.action}
</span>
</div>
)}
<div className="row">
<label>Payload (JSON)</label>
<textarea rows={12} value={input} onChange={(e) => setInput(e.target.value)} />
</div>
<button onClick={submit} disabled={!providerId || !serviceId || isBusy}>
{isBusy ? 'Calling…' : 'Submit'}
</button>
{resp && <pre className="response">{JSON.stringify(resp, null, 2)}</pre>}
</div>
);
}

28
Client-TestApi/src/components/Shell.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { useAuth } from '../auth/AuthProvider';
import ServiceForm from './ServiceForm';
import ResponsePanel from './ResponsePanel';
export default function Shell() {
const { sessionUser, signOut } = useAuth();
return (
<div className="shell">
<header className="shell-header">
<h2>API Test Harness</h2>
<div className="user-info">
<span className="user-name">
{sessionUser?.name || sessionUser?.email || 'User'}
</span>
<button className="signout-button" onClick={signOut}>
Sign Out
</button>
</div>
</header>
<div className="layout">
<ServiceForm />
<ResponsePanel />
</div>
</div>
);
}

65
Client-TestApi/src/components/SignInOverlay.jsx Normal file
View File

@@ -0,0 +1,65 @@
// src/components/SignInOverlay.jsx
import React from 'react';
import { useAuth } from '../auth/AuthProvider';
export default function SignInOverlay() {
const { signIn, isLoading, error, clearError } = useAuth();
return (
<div className="signin-overlay">
<div className="signin-card">
<div className="signin-header">
<div className="signin-logo">
<svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h1>AdPlatform</h1>
<p className="signin-subtitle">API Test Harness</p>
</div>
<div className="signin-body">
{error && (
<div className="signin-error">
<span>{error}</span>
<button className="error-dismiss" onClick={clearError}>×</button>
</div>
)}
<p className="signin-message">
Sign in with your organization account to access the test dashboard.
</p>
<button
className="signin-button"
onClick={signIn}
disabled={isLoading}
>
{isLoading ? (
<>
<span className="signin-spinner" />
Signing in...
</>
) : (
<>
<svg viewBox="0 0 21 21" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="9" height="9" fill="#f25022"/>
<rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
<rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
<rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
</svg>
Sign in with Microsoft
</>
)}
</button>
</div>
<div className="signin-footer">
<span>Powered by Azure Entra External ID</span>
</div>
</div>
</div>
);
}

7
Client-TestApi/src/index.js Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './app/App';
import './styles/app.css';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

57
Client-TestApi/src/services/apiClient.js Normal file
View File

@@ -0,0 +1,57 @@
// client/src/services/apiClient.js
/**
* Centralized API client
* Enforces auth contract:
* - POST /api/auth/session -> Entra JWT (Authorization: Bearer <entraToken>)
* - All other /api/* -> Session token (Authorization: Bearer <sessionToken>)
*/
export async function callApi({
url,
method = 'GET',
body,
entraToken,
sessionToken
}) {
const headers = {
'Content-Type': 'application/json'
};
// ---- AUTH CONTRACT ----
if (url.startsWith('/api/auth/session')) {
if (!entraToken) {
throw new Error('callApi: entraToken required for /api/auth/session');
}
headers['Authorization'] = `Bearer ${entraToken}`;
}
else if (url.startsWith('/api/')) {
if (!sessionToken) {
throw new Error('callApi: sessionToken required for authenticated API call');
}
headers['Authorization'] = `Bearer ${sessionToken}`;
// Optional but useful for server-side correlation
headers['X-Requested-With'] = 'USIM-AdPlatform-Client';
}
const resp = await fetch(url, {
method,
headers,
body: body ? JSON.stringify(body) : undefined
});
// Handle auth failures centrally
if (resp.status === 401) {
const text = await resp.text();
throw new Error(`API 401: ${text}`);
}
if (!resp.ok) {
const text = await resp.text();
throw new Error(`API ${resp.status}: ${text}`);
}
return resp.json();
}

7
Client-TestApi/src/services/providerCatalog.js Normal file
View File

@@ -0,0 +1,7 @@
export const providers = [
{ id: 'gateway', label: 'Gateway (direct)' },
{ id: 'google', label: 'Google Ads' }
// later:
// { id: 'microsoft', label: 'Microsoft Ads' },
// { id: 'meta', label: 'Meta Ads' },
];

109
Client-TestApi/src/services/serviceCatalog.js Normal file
View File

@@ -0,0 +1,109 @@
// src/services/serviceCatalog.js
/**
* Service catalog organized by Provider → Service → Action
*
* Structure:
* - provider: Ad platform (google, meta, msads)
* - service: Sub-module/microservice (system, campaigns, reporting, accounts)
* - action: Specific operation (ping, create, list, get, update, delete)
*/
export const servicesByProvider = {
gateway: [
{
id: 'GatewayPing',
service: 'system',
action: 'ping',
label: 'Gateway Ping (SQL test)',
sample: {},
endpoint: '/api/test/ping',
method: 'GET'
}
],
google: [
// System service
{
id: 'Ping',
service: 'system',
action: 'ping',
label: 'System: Ping (GoogleApi round trip)',
sample: {}
},
// Campaigns service
{
id: 'CreateCampaign',
service: 'campaigns',
action: 'create',
label: 'Campaigns: Create',
sample: { name: 'Test Campaign', budgetMicros: 10000000, type: 'Search' }
},
{
id: 'ListCampaigns',
service: 'campaigns',
action: 'list',
label: 'Campaigns: List',
sample: {}
},
{
id: 'GetCampaign',
service: 'campaigns',
action: 'get',
label: 'Campaigns: Get by ID',
sample: { campaignId: 'campaigns/123' }
},
// Reporting service
{
id: 'GetCampaignStats',
service: 'reporting',
action: 'campaignStats',
label: 'Reporting: Campaign Stats',
sample: { campaignId: 'campaigns/123', startDate: '2026-01-01', endDate: '2026-01-26' }
},
{
id: 'GetAccountStats',
service: 'reporting',
action: 'accountStats',
label: 'Reporting: Account Stats',
sample: { startDate: '2026-01-01', endDate: '2026-01-26' }
},
// Accounts service
{
id: 'ListAccounts',
service: 'accounts',
action: 'list',
label: 'Accounts: List Accessible',
sample: {}
},
{
id: 'GetAccount',
service: 'accounts',
action: 'get',
label: 'Accounts: Get Details',
sample: { customerId: '1234567890' }
}
]
};
export function getServices(providerId) {
return servicesByProvider[providerId] || [];
}
export function getService(providerId, serviceId) {
return getServices(providerId).find(s => s.id === serviceId);
}
/**
* Get unique service modules for a provider
*/
export function getServiceModules(providerId) {
const services = getServices(providerId);
const modules = [...new Set(services.map(s => s.service))];
return modules;
}
/**
* Get actions for a specific service module
*/
export function getActionsForModule(providerId, serviceModule) {
return getServices(providerId).filter(s => s.service === serviceModule);
}

456
Client-TestApi/src/styles/app.css Normal file
View File

@@ -0,0 +1,456 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
margin: 0;
}
h2 {
margin-top: 0;
color: #333;
}
/* App Container */
.app-container {
position: relative;
min-height: 100vh;
}
/* App Loading State */
.app-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
color: #666;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #e0e0e0;
border-top-color: #0066cc;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Dashboard States */
.dashboard {
transition: filter 0.3s ease, opacity 0.3s ease;
}
.dashboard-blurred {
filter: blur(8px);
opacity: 0.5;
pointer-events: none;
user-select: none;
}
/* Sign-in Overlay */
.signin-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.signin-card {
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
overflow: hidden;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.signin-header {
background: linear-gradient(135deg, #0066cc 0%, #004c99 100%);
color: white;
padding: 32px;
text-align: center;
}
.signin-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
margin-bottom: 16px;
}
.signin-logo svg {
color: white;
}
.signin-header h1 {
margin: 0 0 4px 0;
font-size: 24px;
font-weight: 600;
}
.signin-subtitle {
margin: 0;
opacity: 0.8;
font-size: 14px;
}
.signin-body {
padding: 32px;
}
.signin-message {
text-align: center;
color: #666;
margin: 0 0 24px 0;
font-size: 14px;
line-height: 1.5;
}
.signin-error {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #991b1b;
font-size: 13px;
margin-bottom: 20px;
}
.error-dismiss {
background: none;
border: none;
color: #991b1b;
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.signin-button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 24px;
background: #2f2f2f;
color: white;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.signin-button:hover:not(:disabled) {
background: #1f1f1f;
}
.signin-button:disabled {
background: #666;
cursor: not-allowed;
}
.signin-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.signin-footer {
padding: 16px 32px;
background: #f9fafb;
text-align: center;
font-size: 12px;
color: #9ca3af;
border-top: 1px solid #e5e7eb;
}
/* Shell Header */
.shell-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.shell-header h2 {
margin: 0;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.user-name {
font-size: 14px;
color: #666;
}
.signout-button {
padding: 6px 12px;
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.signout-button:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
/* Session Info in Form */
.session-info {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.session-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 12px;
font-size: 12px;
color: #166534;
font-weight: 500;
}
.session-dot {
width: 6px;
height: 6px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.client-badge {
font-size: 12px;
color: #666;
}
.shell {
max-width: 1200px;
margin: 0 auto;
}
.layout {
display: flex;
gap: 20px;
}
.card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-width: 400px;
}
/* Auth Section */
.auth-section {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 20px;
background: #fafafa;
}
.auth-section legend {
font-weight: 600;
font-size: 13px;
color: #666;
padding: 0 8px;
}
/* Form Rows */
.row {
margin-bottom: 16px;
}
.row label {
display: block;
font-weight: 500;
margin-bottom: 6px;
color: #444;
font-size: 14px;
}
.row-inline {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.row-inline label {
min-width: 90px;
margin-bottom: 0;
font-size: 13px;
}
.row-inline input {
flex: 1;
}
/* Inputs */
input[type="text"],
select,
textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
}
input[type="text"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #0066cc;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
textarea {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
resize: vertical;
}
/* Button */
button {
background: #0066cc;
color: white;
border: none;
padding: 10px 24px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
button:hover:not(:disabled) {
background: #0052a3;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
/* Warning */
.warning {
margin-top: 12px;
padding: 8px 12px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 4px;
color: #856404;
font-size: 13px;
}
/* Response */
.response {
margin-top: 20px;
padding: 16px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
#response-panel {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-width: 300px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 12px;
color: #666;
margin: 0;
}
/* Routing Info */
.routing-info {
margin-bottom: 16px;
}
.route-badge {
display: inline-block;
padding: 6px 12px;
background: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 4px;
font-size: 12px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
color: #0066cc;
}
.route-badge strong {
color: #004c99;
}

34
Client-TestApi/webpack.config.js Normal file
View File

@@ -0,0 +1,34 @@
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
devServer: {
static: './public',
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};