Initial commit
This commit is contained in:
Grae Jones
6
Client-Client/.babelrc
Normal file
6
Client-Client/.babelrc
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
["@babel/preset-react", { "runtime": "automatic" }]
|
||||
]
|
||||
}
|
||||
2
Client-Client/dist/bundle.js
vendored
Normal file
2
Client-Client/dist/bundle.js
vendored
Normal file
File diff suppressed because one or more lines are too long
47
Client-Client/dist/bundle.js.LICENSE.txt
vendored
Normal file
47
Client-Client/dist/bundle.js.LICENSE.txt
vendored
Normal 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
1
Client-Client/dist/index.html
vendored
Normal 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
27
Client-Client/package.json
Normal 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
13
Client-Client/public/index.html
Normal 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
40
Client-Client/src/app/App.js
Normal 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
262
Client-Client/src/auth/AuthProvider.jsx
Normal 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
47
Client-Client/src/auth/authConfig.js
Normal 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
28
Client-Client/src/components/AuthErrorPage.jsx
Normal 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
50
Client-Client/src/components/LandingPage.jsx
Normal 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
101
Client-Client/src/components/Platform.jsx
Normal 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
15
Client-Client/src/components/RegistrationPage.jsx
Normal 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
65
Client-Client/src/components/Sidebar.jsx
Normal 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
125
Client-Client/src/components/views/Accounts.jsx
Normal 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
274
Client-Client/src/components/views/Campaigns.jsx
Normal 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
140
Client-Client/src/components/views/Dashboard.jsx
Normal 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
118
Client-Client/src/components/views/Developer.jsx
Normal 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
151
Client-Client/src/components/views/Reporting.jsx
Normal 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
199
Client-Client/src/components/views/Settings.jsx
Normal 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
6
Client-Client/src/index.js
Normal 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
108
Client-Client/src/services/apiClient.js
Normal 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
266
Client-Client/src/styles/app.css
Normal 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
27
Client-Client/webpack.config.js
Normal 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
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user