diff --git a/README.md b/README.md index 067270e..2706759 100644 --- a/README.md +++ b/README.md @@ -35,5 +35,6 @@ VITE_KAKAO_REDIRECT_URI=http://localhost:5173/ 현재 연동 범위: - `pg-auth-service`: 카카오 로그인, 약관 동의, 가맹점 가입, 로그아웃 -- `merchant-service`: 로그인 가맹점 기본정보 조회 +- `merchant-service`: 로그인 가맹점 기본정보 조회/수정 +- PG 관리자 웹: 관리자 로그인, 감사로그 조회, 가입 대기 가맹점 조회/승인 - 매출, 거래, 정산: 대응 백엔드 API가 준비될 때까지 목 데이터 사용 diff --git a/src/main.jsx b/src/main.jsx index d2e2791..10c46fe 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -12,7 +12,9 @@ const importPg = () => import("./web-pg/styles.css") .then(() => import("./web-pg/components.jsx")) .then(() => import("./web-pg/layout.jsx")) .then(() => import("./web-pg/data.jsx")) + .then(() => import("./web-pg/api/backend-api.jsx")) .then(() => import("./web-pg/screens/dashboard.jsx")) + .then(() => import("./web-pg/screens/approvals.jsx")) .then(() => import("./web-pg/screens/merchants.jsx")) .then(() => import("./web-pg/screens/transactions.jsx")) .then(() => import("./web-pg/screens/settlements.jsx")) diff --git a/src/web-merchant/api/backend-api.jsx b/src/web-merchant/api/backend-api.jsx index 133ba06..c6cbbb8 100644 --- a/src/web-merchant/api/backend-api.jsx +++ b/src/web-merchant/api/backend-api.jsx @@ -5,6 +5,14 @@ const MERCHANT_API_BASE_URL = import.meta.env.VITE_MERCHANT_API_BASE_URL || "/ba const SESSION_KEY = "erumpay.merchant.session"; const PROFILE_KEY = "erumpay.merchant.profile"; +// Remove tokens left by older builds that used persistent browser storage. +try { + localStorage.removeItem(SESSION_KEY); + localStorage.removeItem(PROFILE_KEY); +} catch { + // Storage may be unavailable in restricted browser contexts. +} + class ApiError extends Error { constructor(message, status, code, details) { super(message); @@ -51,35 +59,96 @@ const request = async (baseUrl, path, options = {}) => { const AuthSession = { get: () => { try { - return JSON.parse(localStorage.getItem(SESSION_KEY)) || {}; + return JSON.parse(sessionStorage.getItem(SESSION_KEY)) || {}; } catch { return {}; } }, - set: (value) => localStorage.setItem(SESSION_KEY, JSON.stringify(value)), + set: (value) => sessionStorage.setItem(SESSION_KEY, JSON.stringify(value)), merge: (value) => AuthSession.set({ ...AuthSession.get(), ...value }), clear: () => { - localStorage.removeItem(SESSION_KEY); - localStorage.removeItem(PROFILE_KEY); + sessionStorage.removeItem(SESSION_KEY); + sessionStorage.removeItem(PROFILE_KEY); + }, + isAuthenticated: () => { + const session = AuthSession.get(); + return Boolean(session.accessToken && session.status === "ACTIVE"); }, - isAuthenticated: () => Boolean(AuthSession.get().accessToken), getProfile: () => { try { - return JSON.parse(localStorage.getItem(PROFILE_KEY)); + return JSON.parse(sessionStorage.getItem(PROFILE_KEY)); } catch { return null; } }, - setProfile: (profile) => localStorage.setItem(PROFILE_KEY, JSON.stringify(profile)), + setProfile: (profile) => sessionStorage.setItem(PROFILE_KEY, JSON.stringify(profile)), }; -let refreshTokenMemory = null; - const getAuthHeaders = () => { const { accessToken } = AuthSession.get(); return accessToken ? { Authorization: `Bearer ${accessToken}` } : {}; }; +const refreshAccessToken = async () => { + const { refreshToken } = AuthSession.get(); + if (!refreshToken) { + throw new ApiError("로그인 세션이 만료되었습니다.", 401, "REFRESH_TOKEN_REQUIRED"); + } + + const response = await request(AUTH_API_BASE_URL, "/api/v1/auth/token/refresh", { + method: "POST", + headers: { Authorization: `Bearer ${refreshToken}` }, + body: JSON.stringify({ refresh_token: refreshToken }), + }); + AuthSession.merge({ + accessToken: response.access_token, + refreshToken: response.refresh_token || refreshToken, + }); + return response.access_token; +}; + +let refreshPromise = null; + +const getRefreshedAccessToken = () => { + if (!refreshPromise) { + refreshPromise = refreshAccessToken() + .catch(error => { + AuthSession.clear(); + throw error; + }) + .finally(() => { + refreshPromise = null; + }); + } + return refreshPromise; +}; + +const authorizedRequest = async (baseUrl, path, options = {}) => { + const accessTokenAtRequest = AuthSession.get().accessToken; + try { + return await request(baseUrl, path, { + ...options, + headers: { ...getAuthHeaders(), ...options.headers }, + }); + } catch (error) { + const currentSession = AuthSession.get(); + if (error.status !== 401 || !currentSession.refreshToken) throw error; + + let accessToken = currentSession.accessToken; + if (!accessToken || accessToken === accessTokenAtRequest) { + accessToken = await getRefreshedAccessToken(); + } + + return request(baseUrl, path, { + ...options, + headers: { + Authorization: `Bearer ${accessToken}`, + ...options.headers, + }, + }); + } +}; + const AuthApi = { getKakaoAuthorizeUrl: () => { const clientId = import.meta.env.VITE_KAKAO_CLIENT_ID; @@ -105,11 +174,12 @@ const AuthApi = { merchantId: response.merchant_id, status: response.status, accessToken: response.access_token, + refreshToken: response.refresh_token, signupToken: response.signup_token, }); - refreshTokenMemory = response.refresh_token || null; return response; }, + refresh: refreshAccessToken, agreeTerms: async ({ serviceTermsAgreed, privacyPolicyAgreed, marketingAgreed }) => { const { signupToken } = AuthSession.get(); return request(AUTH_API_BASE_URL, "/api/v1/auth/merchant/terms/agree", { @@ -146,35 +216,36 @@ const AuthApi = { }, logout: async () => { const session = AuthSession.get(); - const refreshToken = refreshTokenMemory || session.refreshToken; - if (refreshToken) { - await request(AUTH_API_BASE_URL, "/api/v1/auth/merchant/logout", { - method: "POST", - headers: { Authorization: `Bearer ${refreshToken}` }, - body: JSON.stringify({ - refresh_token: refreshToken, - access_token: session.accessToken, - }), - }); + try { + if (session.refreshToken) { + await request(AUTH_API_BASE_URL, "/api/v1/auth/merchant/logout", { + method: "POST", + headers: { Authorization: `Bearer ${session.refreshToken}` }, + body: JSON.stringify({ + refresh_token: session.refreshToken, + access_token: session.accessToken, + }), + }); + } + } finally { + AuthSession.clear(); } - refreshTokenMemory = null; - AuthSession.clear(); }, }; const MerchantBackendApi = { getMerchant: async (merchantId = AuthSession.get().merchantId) => { if (!merchantId) return null; - const profile = await request(MERCHANT_API_BASE_URL, `/api/v1/pg-admin/merchants/${merchantId}`, { - headers: getAuthHeaders(), - }); + const profile = await authorizedRequest( + MERCHANT_API_BASE_URL, + `/api/v1/pg-admin/merchants/${merchantId}` + ); AuthSession.setProfile(profile); return profile; }, updateMerchant: async (merchantId, payload) => { - const profile = await request(MERCHANT_API_BASE_URL, `/api/v1/pg-admin/merchants/${merchantId}`, { + const profile = await authorizedRequest(MERCHANT_API_BASE_URL, `/api/v1/pg-admin/merchants/${merchantId}`, { method: "PUT", - headers: getAuthHeaders(), body: JSON.stringify(payload), }); AuthSession.setProfile(profile); diff --git a/src/web-merchant/screens/auth.jsx b/src/web-merchant/screens/auth.jsx index fa0c861..b0e89fe 100644 --- a/src/web-merchant/screens/auth.jsx +++ b/src/web-merchant/screens/auth.jsx @@ -186,6 +186,7 @@ const SignupInfo = ({ onPrev, onSubmit }) => { serviceName: "", businessAddress: "", businessAddressDetail: "", + businessRegistrationFile: null, }); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(""); @@ -206,7 +207,12 @@ const SignupInfo = ({ onPrev, onSubmit }) => { - + update("businessRegistrationFile", file)} + wide + /> @@ -271,16 +277,54 @@ const AuthInput = ({ name, value, onChange, label, placeholder, type = "text", w ); -const AuthUpload = ({ label, wide }) => ( -
- {label}* -
- - 클릭하여 파일 업로드 - JPG, PNG, PDF 파일만 가능 +const AuthUpload = ({ label, file, onChange, wide }) => { + const inputId = React.useId(); + const [error, setError] = React.useState(""); + const maxSize = 10 * 1024 * 1024; + const allowedTypes = ["image/jpeg", "image/png", "application/pdf"]; + + const selectFile = event => { + const selectedFile = event.target.files?.[0] || null; + setError(""); + + if (!selectedFile) return; + if (!allowedTypes.includes(selectedFile.type)) { + setError("JPG, PNG, PDF 파일만 선택할 수 있습니다."); + event.target.value = ""; + return; + } + if (selectedFile.size > maxSize) { + setError("파일 크기는 최대 10MB까지 가능합니다."); + event.target.value = ""; + return; + } + + onChange(selectedFile); + }; + + return ( +
+ {label}* + + + {error && {error}}
-
-); + ); +}; const ReviewComplete = ({ onEnterMain, onCheckReview = onEnterMain }) => (
diff --git a/src/web-merchant/styles.css b/src/web-merchant/styles.css index fb081a7..2845939 100644 --- a/src/web-merchant/styles.css +++ b/src/web-merchant/styles.css @@ -1883,11 +1883,26 @@ table.tbl { background: #FBFCFD; color: var(--text-secondary); text-align: center; + cursor: pointer; + transition: border-color 0.2s ease, background 0.2s ease; +} + +.upload-box:hover, +.upload-box:focus-within { + border-color: var(--c-main); + background: #F2FBF8; +} + +.upload-box.selected { + border-color: var(--c-main); + background: #F2FBF8; + color: var(--c-main); } .upload-box strong { color: var(--text-secondary); font-size: 12px; + overflow-wrap: anywhere; } .upload-box small { @@ -1895,6 +1910,23 @@ table.tbl { color: var(--text-tertiary); } +.upload-input { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.upload-error { + color: var(--c-danger); + font-size: 10px; +} + .review-complete-copy { text-align: center; } diff --git a/src/web-pg/api/backend-api.jsx b/src/web-pg/api/backend-api.jsx new file mode 100644 index 0000000..d71d866 --- /dev/null +++ b/src/web-pg/api/backend-api.jsx @@ -0,0 +1,130 @@ +/* Backend API clients for PG admin web */ + +const PG_AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_API_BASE_URL || "/backend/auth"; +const PG_MERCHANT_API_BASE_URL = import.meta.env.VITE_MERCHANT_API_BASE_URL || "/backend/merchant"; +const PG_SESSION_KEY = "erumpay.pg.session"; + +class PgApiError extends Error { + constructor(message, status, code) { + super(message); + this.name = "PgApiError"; + this.status = status; + this.code = code; + } +} + +const pgReadBody = async response => { + if (response.status === 204) return null; + const text = await response.text(); + if (!text) return null; + try { + return JSON.parse(text); + } catch { + return response.ok ? text : { message: text }; + } +}; + +const pgRequest = async (baseUrl, path, options = {}) => { + const response = await fetch(`${baseUrl}${path}`, { + ...options, + headers: { + "Content-Type": "application/json", + ...options.headers, + }, + }); + const body = await pgReadBody(response); + if (!response.ok) { + throw new PgApiError( + body?.message || "요청 처리 중 오류가 발생했습니다.", + response.status, + body?.code + ); + } + return body; +}; + +const PgSession = { + get: () => { + try { + return JSON.parse(sessionStorage.getItem(PG_SESSION_KEY)) || {}; + } catch { + return {}; + } + }, + set: value => sessionStorage.setItem(PG_SESSION_KEY, JSON.stringify(value)), + clear: () => sessionStorage.removeItem(PG_SESSION_KEY), + isAuthenticated: () => Boolean(PgSession.get().accessToken), + authHeaders: () => { + const { accessToken } = PgSession.get(); + return accessToken ? { Authorization: `Bearer ${accessToken}` } : {}; + }, +}; + +const PgAdminApi = { + login: async ({ loginId, password, totpCode }) => { + const response = await pgRequest(PG_AUTH_API_BASE_URL, "/api/v1/auth/admin/login", { + method: "POST", + body: JSON.stringify({ + login_id: loginId, + password, + totp_code: totpCode, + }), + }); + PgSession.set({ + loginId, + accessToken: response.access_token, + refreshToken: response.refresh_token, + role: response.role, + }); + return response; + }, + logout: async () => { + const { refreshToken } = PgSession.get(); + try { + if (refreshToken) { + await pgRequest(PG_AUTH_API_BASE_URL, "/api/v1/auth/admin/logout", { + method: "POST", + headers: { Authorization: `Bearer ${refreshToken}` }, + }); + } + } finally { + PgSession.clear(); + } + }, + getPendingMerchants: async () => { + const size = 100; + const pendingMerchants = []; + let page = 0; + let totalPages = 1; + + do { + const response = await pgRequest( + PG_MERCHANT_API_BASE_URL, + `/api/v1/pg-admin/merchants?page=${page}&size=${size}&sort=createdAt,desc`, + { headers: PgSession.authHeaders() } + ); + pendingMerchants.push( + ...(response?.content || []).filter(merchant => merchant.status === "PENDING") + ); + totalPages = response?.totalPages || 0; + page += 1; + } while (page < totalPages); + + return pendingMerchants; + }, + approveMerchant: merchantId => pgRequest( + PG_AUTH_API_BASE_URL, + `/api/v1/pg-admin/merchants/${merchantId}/approve`, + { + method: "PATCH", + headers: PgSession.authHeaders(), + } + ), + getAuditLogs: async (page = 0, size = 20) => pgRequest( + PG_AUTH_API_BASE_URL, + `/api/v1/pg-admin/audit-logs?page=${page}&size=${size}`, + { headers: PgSession.authHeaders() } + ), +}; + +Object.assign(window, { PgApiError, PgSession, PgAdminApi }); diff --git a/src/web-pg/app.jsx b/src/web-pg/app.jsx index 0a1f20c..3b7c773 100644 --- a/src/web-pg/app.jsx +++ b/src/web-pg/app.jsx @@ -2,6 +2,7 @@ const ROUTES = { dashboard: { title: "대시보드", crumbs: ["대시보드"] }, + approvals: { title: "가맹점 가입 대기", crumbs: ["가맹점 가입 대기"] }, merchants: { title: "가맹점 관리", crumbs: ["가맹점 관리"] }, transactions: { title: "결제관리", crumbs: ["결제관리"] }, settlements: { title: "정산관리", crumbs: ["정산관리"] }, @@ -15,7 +16,7 @@ const ROUTES = { const App = () => { const [page, setPage] = React.useState("dashboard"); const [collapsed, setCollapsed] = React.useState(false); - const [authed, setAuthed] = React.useState(true); + const [authed, setAuthed] = React.useState(() => window.PgSession.isAuthenticated()); const [merchant, setMerchant] = React.useState(null); const [tx, setTx] = React.useState(null); @@ -30,15 +31,29 @@ const App = () => { return () => window.removeEventListener("hashchange", onHash); }, []); - const nav = (id) => { - if (id === "login") { setAuthed(false); window.location.hash = "login"; return; } + const nav = async (id) => { + if (id === "login") { + try { + await window.PgAdminApi.logout(); + } catch (error) { + console.error("PG logout failed", error); + } + setAuthed(false); + window.location.hash = "login"; + return; + } setPage(id); setMerchant(null); setTx(null); window.location.hash = id; }; if (!authed) { - return { setAuthed(true); window.location.hash = "dashboard"; }}/>; + return { + await window.PgAdminApi.login(form); + setAuthed(true); + setPage("approvals"); + window.location.hash = "approvals"; + }}/>; } const route = ROUTES[page] || ROUTES.dashboard; @@ -55,6 +70,7 @@ const App = () => { unread={3} /> {page === "dashboard" && } + {page === "approvals" && } {page === "merchants" && } {page === "transactions" && } {page === "settlements" && } diff --git a/src/web-pg/components.jsx b/src/web-pg/components.jsx index d61ba03..58044ba 100644 --- a/src/web-pg/components.jsx +++ b/src/web-pg/components.jsx @@ -4,8 +4,13 @@ const Tag = ({ kind = "neutral", dot = false, children }) => ( {children} ); -const Button = ({ kind = "ghost", size, icon, children, onClick, type = "button" }) => ( - diff --git a/src/web-pg/layout.jsx b/src/web-pg/layout.jsx index dea84b6..d6973d6 100644 --- a/src/web-pg/layout.jsx +++ b/src/web-pg/layout.jsx @@ -2,6 +2,7 @@ const NAV_MAIN = [ { id: "dashboard", label: "대시보드", icon: "Dashboard" }, + { id: "approvals", label: "가맹점 가입 대기", icon: "Users" }, { id: "merchants", label: "가맹점 관리", icon: "Store" }, { id: "transactions", label: "결제관리", icon: "Card" }, { id: "settlements", label: "정산관리", icon: "Calc" }, diff --git a/src/web-pg/screens/approvals.jsx b/src/web-pg/screens/approvals.jsx new file mode 100644 index 0000000..a62ab8e --- /dev/null +++ b/src/web-pg/screens/approvals.jsx @@ -0,0 +1,157 @@ +/* Merchant approval queue */ + +const MerchantApprovals = () => { + const [merchants, setMerchants] = React.useState([]); + const [query, setQuery] = React.useState(""); + const [applicationDate, setApplicationDate] = React.useState(""); + const [loading, setLoading] = React.useState(true); + const [approvingId, setApprovingId] = React.useState(null); + const [error, setError] = React.useState(""); + + const load = React.useCallback(async () => { + setLoading(true); + setError(""); + try { + setMerchants(await window.PgAdminApi.getPendingMerchants()); + } catch (loadError) { + setError(loadError.message); + } finally { + setLoading(false); + } + }, []); + + React.useEffect(() => { + load(); + }, [load]); + + const filtered = merchants.filter(merchant => { + const keyword = query.trim().toLowerCase(); + const matchesDate = !applicationDate + || merchant.createdAt?.slice(0, 10) === applicationDate; + const matchesKeyword = !keyword || [ + merchant.merchantName, + merchant.businessNumber, + merchant.ownerName, + merchant.contactPhone, + ].some(value => String(value || "").toLowerCase().includes(keyword)); + return matchesDate && matchesKeyword; + }); + + const approve = async merchant => { + if (!window.confirm(`${merchant.merchantName} 가맹점을 승인할까요?`)) return; + setApprovingId(merchant.merchantId); + setError(""); + try { + await window.PgAdminApi.approveMerchant(merchant.merchantId); + setMerchants(current => + current.filter(item => item.merchantId !== merchant.merchantId) + ); + } catch (approveError) { + setError(approveError.message); + } finally { + setApprovingId(null); + } + }; + + return ( +
+
+

가맹점 가입 대기

+

가맹점 가입 신청을 확인하고 승인합니다.

+
+ + +
+ + setApplicationDate(event.target.value)} + /> + + + + + + + + + +
+ + + {error &&
{error}
} + + +
+

가입 신청 목록

+ 총 {filtered.length}건 +
+
+ + + + + + + + + + + + + + + + {loading && ( + + )} + {!loading && filtered.length === 0 && ( + + )} + {!loading && filtered.map((merchant, index) => ( + + + + + + + + + + + + ))} + +
순번신청일시가맹점명사업자등록번호대표자명연락처주소상태기능
가입 신청을 불러오는 중입니다.
대기 중인 가입 신청이 없습니다.
{index + 1}{merchant.createdAt?.replace("T", " ").slice(0, 16) || "-"}{merchant.merchantName}{merchant.businessNumber}{merchant.ownerName}{merchant.contactPhone}{merchant.businessAddress}대기 + +
+
+ +
+ ); +}; + +window.MerchantApprovals = MerchantApprovals; diff --git a/src/web-pg/screens/other.jsx b/src/web-pg/screens/other.jsx index dcd15c1..9a7a2ee 100644 --- a/src/web-pg/screens/other.jsx +++ b/src/web-pg/screens/other.jsx @@ -91,84 +91,80 @@ const Notices = () => { /* ============= Audit ============= */ const AuditLog = () => { const [query, setQuery] = React.useState(""); - const [user, setUser] = React.useState("all"); - const [result, setResult] = React.useState("all"); - const filtered = AUDITS.filter(a => - (!query || a.action.includes(query) || (a.target && a.target.includes(query))) && - (user === "all" || a.user === user) && - (result === "all" || a.result === result) + const [logs, setLogs] = React.useState([]); + const [loading, setLoading] = React.useState(true); + const [error, setError] = React.useState(""); + + React.useEffect(() => { + window.PgAdminApi.getAuditLogs() + .then(response => setLogs(response?.content || [])) + .catch(loadError => setError(loadError.message)) + .finally(() => setLoading(false)); + }, []); + + const filtered = logs.filter(log => + !query + || String(log.action ?? "").toLowerCase().includes(query.toLowerCase()) + || String(log.target_id ?? "").toLowerCase().includes(query.toLowerCase()) + || String(log.ip_address ?? "").toLowerCase().includes(query.toLowerCase()) ); - const users = ["all", ...new Set(AUDITS.map(a => a.user))]; return (

감사 로그

-

관리자 행위와 시스템 이벤트의 변경 이력을 추적합니다.

+

관리자 로그인, 로그아웃, 가맹점 승인 이력을 조회합니다.

-
- - - +
- +
- +
-
+ {error &&
{error}
}
- - + - + - {filtered.map((a, i) => ( - - - - - - - - + {loading && } + {!loading && filtered.length === 0 && ( + + )} + {!loading && filtered.map(log => ( + + + + + + + ))}
발생 시각사용자역할관리자 ID 행위 대상 IP결과변경 내용
{a.ts}{a.user}{a.role}{a.action}{a.target}{a.ip} - {a.result === "성공" - ? 성공 - : 실패} -
감사로그를 불러오는 중입니다.
조회된 감사로그가 없습니다.
{log.created_at?.replace("T", " ").slice(0, 19)}{log.admin_id}{log.action}{log.target_id || "-"}{log.ip_address}{log.change_detail || "-"}
-
총 {filtered.length}건 (최근 12건 표시)
- {}}/> +
총 {filtered.length}건
@@ -477,9 +473,25 @@ const DesignSystem = () => { /* ============= Login ============= */ const Login = ({ onLogin }) => { - const [email, setEmail] = React.useState("kim@erumpay.kr"); - const [password, setPassword] = React.useState("••••••••"); - const [remember, setRemember] = React.useState(true); + const [loginId, setLoginId] = React.useState(""); + const [password, setPassword] = React.useState(""); + const [totpCode, setTotpCode] = React.useState(""); + const [loading, setLoading] = React.useState(false); + const [error, setError] = React.useState(""); + + const submit = async event => { + event.preventDefault(); + setLoading(true); + setError(""); + try { + await onLogin({ loginId, password, totpCode }); + } catch (loginError) { + setError(loginError.message); + } finally { + setLoading(false); + } + }; + return (
@@ -493,29 +505,35 @@ const Login = ({ onLogin }) => {
© 2024 ErumPay. All rights reserved.
-
+

로그인

-

슈퍼바이저 계정으로 로그인하세요.

+

PG 관리자 계정과 OTP로 로그인하세요.

- - setEmail(e.target.value)}/> + + setLoginId(e.target.value)} required/> - setPassword(e.target.value)}/> + setPassword(e.target.value)} required/> -
- - 비밀번호 찾기 -
- + + setTotpCode(event.target.value.replace(/\D/g, ""))} + /> + + {error &&
{error}
} +
5회 이상 로그인 실패 시 계정이 일시 잠금됩니다.
-
+
); }; diff --git a/src/web-pg/styles.css b/src/web-pg/styles.css index fc43281..b268e5c 100644 --- a/src/web-pg/styles.css +++ b/src/web-pg/styles.css @@ -570,6 +570,49 @@ table.tbl { padding: var(--s-12); gap: var(--s-5); } +/* ---------- PG merchant approvals ---------- */ +.approval-page { gap: var(--s-5); } +.approval-filter { + display: grid; + grid-template-columns: 180px 180px minmax(280px, 1fr) auto auto; + gap: var(--s-3); + align-items: end; +} +.approval-list-head { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--s-4) var(--s-5); + border-bottom: 1px solid var(--border); +} +.approval-list-head h2 { + margin: 0; + font-size: 15px; +} +.approval-list-head span { + color: var(--text-tertiary); +} +.approval-list-head strong { + color: var(--c-secondary); +} +.pg-api-error { + padding: var(--s-3) var(--s-4); + border: 1px solid #f3b5b3; + border-radius: var(--r-md); + background: var(--c-danger-bg); + color: var(--c-danger); + font-size: 13px; +} + +@media (max-width: 1100px) { + .approval-filter { + grid-template-columns: 1fr 1fr; + } + .approval-filter .field:nth-child(3) { + grid-column: 1 / -1; + } +} + /* ---------- Empty state ---------- */ .empty { padding: var(--s-12) var(--s-4);