Compare commits
9
Commits
dev
..
e5b19ff639
| Author | SHA1 | Date | |
|---|---|---|---|
 Inamul-hasan-tec
|
e5b19ff639 | ||
|
Inamul-hasan-tec
|
c74328b519 | ||
|
Inamul-hasan-tec
|
5032fb3046 | ||
|
Inamul-hasan-tec
|
1d6e96d5af | ||
|
Inamul-hasan-tec
|
b16018cdd0 | ||
|
Inamul-hasan-tec
|
4401683197 | ||
|
Inamul-hasan-tec
|
cc9807b70d | ||
|
Inamul-hasan-tec
|
0f8e7cebc1 | ||
|
Inamul-hasan-tec
|
136365a05e |
@@ -0,0 +1,6 @@
|
||||
# Public browser configuration. Do not place SSO module secrets here.
|
||||
VITE_API_URL=http://localhost:5002
|
||||
|
||||
# Use / for a dedicated PIM hostname, or /pim_frontend/ when hosted below
|
||||
# https://id-ms.maskantech.in/pim_frontend/.
|
||||
VITE_BASE_PATH=/
|
||||
Generated
+42
-21
@@ -86,7 +86,6 @@
|
||||
"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.29.7",
|
||||
"@babel/generator": "^7.29.7",
|
||||
@@ -302,6 +301,27 @@
|
||||
"integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
|
||||
"integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/wasi-threads": "1.2.3",
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/runtime": {
|
||||
"version": "1.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
|
||||
"integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/wasi-threads": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
|
||||
@@ -625,6 +645,7 @@
|
||||
"integrity": "sha512-h5LUOzGArYemnW1NMz/DuuQhBi96J6JL2Bk8zE4kvqxB5Sg3jxmCiH4uyOWHDkiKSt5vWlG4FIwCR/DbstcNRQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/Boshen"
|
||||
}
|
||||
@@ -1361,6 +1382,7 @@
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1378,6 +1400,7 @@
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1395,6 +1418,7 @@
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1412,6 +1436,7 @@
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1429,6 +1454,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1446,6 +1472,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1463,6 +1490,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1480,6 +1508,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1497,6 +1526,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1514,6 +1544,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1531,6 +1562,7 @@
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1548,6 +1580,7 @@
|
||||
"os": [
|
||||
"openharmony"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1562,6 +1595,7 @@
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emnapi/core": "1.11.2",
|
||||
"@emnapi/runtime": "1.11.2",
|
||||
@@ -1578,6 +1612,7 @@
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emnapi/wasi-threads": "1.2.2",
|
||||
"tslib": "^2.4.0"
|
||||
@@ -1590,6 +1625,7 @@
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
@@ -1601,6 +1637,7 @@
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
@@ -1618,6 +1655,7 @@
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1635,6 +1673,7 @@
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
@@ -1645,7 +1684,6 @@
|
||||
"integrity": "sha512-+zEk16yGlz1F9STiRr6uG9hmIXb6nprjLczV/htGptYuLoCuxb+itZ03RKCEeOhBpDDd1NU7qF6x1VLMUp62bw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"picomatch": "^4.0.4"
|
||||
},
|
||||
@@ -2121,7 +2159,6 @@
|
||||
"integrity": "sha512-fRa09kZTgu8o71KFcDjUFuc7F+dEbZYZmkI0mg5YBTRs0yMKjYHsq/c0urDKeDb+D5qVgXOdFcuu+DZPKOITwA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.18.0"
|
||||
}
|
||||
@@ -2131,7 +2168,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
|
||||
"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
@@ -2142,7 +2178,6 @@
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
@@ -2198,7 +2233,6 @@
|
||||
"integrity": "sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.61.1",
|
||||
"@typescript-eslint/types": "8.61.1",
|
||||
@@ -2429,7 +2463,6 @@
|
||||
"integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2512,7 +2545,6 @@
|
||||
"integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.26.0"
|
||||
}
|
||||
@@ -2573,7 +2605,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.10.12",
|
||||
"caniuse-lite": "^1.0.30001782",
|
||||
@@ -3025,7 +3056,6 @@
|
||||
"integrity": "sha512-1y+7C+vi12bUK1IpZeaV3gsH9fHLBmPvYmPx42pvT/E9yG0IC8g3PUZZgp0+JLJl7ZDK0flc2gc+Aw9dpCvIsQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
@@ -4289,7 +4319,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
|
||||
"integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -4325,7 +4354,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
|
||||
"integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@@ -4344,7 +4372,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.81.0.tgz",
|
||||
"integrity": "sha512-ocbmr2p5KBMoAfj4WCUvped33lVi1Kd5DuDUvQDnB6VEAacOjPI/jMbtDdbhco4y9ct4xUuCmMY0b/C9L0QHjw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
@@ -4360,15 +4387,13 @@
|
||||
"version": "19.2.7",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
|
||||
"integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
|
||||
"integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
@@ -4557,8 +4582,7 @@
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
@@ -4822,7 +4846,6 @@
|
||||
"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -4982,7 +5005,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
|
||||
"integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"lightningcss": "^1.32.0",
|
||||
"picomatch": "^4.0.4",
|
||||
@@ -5463,7 +5485,6 @@
|
||||
"integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
||||
@@ -31,7 +31,8 @@ axiosInstance.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error: { config?: { url?: string }; response?: { status?: number } }) => {
|
||||
const isLoginEndpoint = error.config?.url?.includes('/auth/login');
|
||||
if (error.response?.status === 401 && !isLoginEndpoint) {
|
||||
const isSsoExchangeEndpoint = error.config?.url?.includes('/auth/sso/exchange');
|
||||
if (error.response?.status === 401 && !isLoginEndpoint && !isSsoExchangeEndpoint) {
|
||||
localStorage.removeItem('accessToken');
|
||||
if (window.location.pathname !== '/login') {
|
||||
window.location.href = '/login';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/authentication/components/ProtectedRoute.tsx
|
||||
import React from 'react';
|
||||
import { Navigate, useLocation } from 'react-router-dom';
|
||||
import { Navigate, Outlet, useLocation } from 'react-router-dom';
|
||||
import { useAppSelector } from '../../store';
|
||||
import { usePermissions } from '../../hooks/usePermission';
|
||||
import { AccessDenied } from '../../components/customs/AccessDenied';
|
||||
@@ -47,4 +47,20 @@ export const PlatformGuard: React.FC<{ children: React.ReactNode }> = ({ childre
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Prevents Global SaaS administrators from opening tenant operational modules.
|
||||
* A platform administrator must explicitly enter audited Support Mode first.
|
||||
*/
|
||||
export const TenantWorkspaceGuard: React.FC = () => {
|
||||
const { user } = useAppSelector((state) => state.auth);
|
||||
const isPlatformUser = user?.type === 'platform' || user?.user_type === 'platform';
|
||||
const isSupportMode = Boolean(localStorage.getItem('impersonatedTenantId'));
|
||||
|
||||
if (isPlatformUser && !isSupportMode) {
|
||||
return <Navigate to="/platform/overview" replace />;
|
||||
}
|
||||
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default AuthGuard;
|
||||
|
||||
@@ -7,6 +7,24 @@ import { Eye, EyeOff, Lock, Mail, ArrowRight } from "lucide-react";
|
||||
import { AuthLayout } from "../components/AuthLayout";
|
||||
import { notify } from "../../services/toast";
|
||||
|
||||
const GoogleIcon = () => (
|
||||
<svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
|
||||
<path fill="#4285F4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4a4.6 4.6 0 0 1-2 3v2.5h3.3c1.9-1.8 2.9-4.4 2.9-7.4Z" />
|
||||
<path fill="#34A853" d="M12 22c2.7 0 5-.9 6.7-2.4l-3.3-2.5c-.9.6-2.1 1-3.4 1a5.9 5.9 0 0 1-5.5-4.1H3.1v2.6A10 10 0 0 0 12 22Z" />
|
||||
<path fill="#FBBC05" d="M6.5 14a6 6 0 0 1 0-3.9V7.4H3.1a10 10 0 0 0 0 9.2L6.5 14Z" />
|
||||
<path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.9-2.8A9.7 9.7 0 0 0 3.1 7.4l3.4 2.7A5.9 5.9 0 0 1 12 5.9Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const MicrosoftIcon = () => (
|
||||
<svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden="true">
|
||||
<path fill="#F25022" d="M2 2h9.5v9.5H2z" />
|
||||
<path fill="#7FBA00" d="M12.5 2H22v9.5h-9.5z" />
|
||||
<path fill="#00A4EF" d="M2 12.5h9.5V22H2z" />
|
||||
<path fill="#FFB900" d="M12.5 12.5H22V22h-9.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Login = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
@@ -175,11 +193,11 @@ export const Login = () => {
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<button className="w-full inline-flex justify-center py-2 px-4 border border-border rounded-xl shadow-sm bg-surface text-sm font-medium text-muted-foreground hover:bg-background transition-colors">
|
||||
<img className="h-4 w-4" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" />
|
||||
<GoogleIcon />
|
||||
<span className="ml-2">Google</span>
|
||||
</button>
|
||||
<button className="w-full inline-flex justify-center py-2 px-4 border border-border rounded-xl shadow-sm bg-surface text-sm font-medium text-muted-foreground hover:bg-background transition-colors">
|
||||
<img className="h-4 w-4" src="https://www.svgrepo.com/show/475662/microsoft.svg" alt="Microsoft" />
|
||||
<MicrosoftIcon />
|
||||
<span className="ml-2">Microsoft</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,55 +1,89 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Package } from 'lucide-react';
|
||||
import './Login.css';
|
||||
import { AlertCircle, Loader2, ShieldCheck } from 'lucide-react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { authService } from '../services/authService';
|
||||
import { setCredentials } from '../../store/slices/authSlice';
|
||||
import { AuthLayout } from '../components/AuthLayout';
|
||||
|
||||
type SSOExchangeResponse = {
|
||||
data?: { user: unknown; accessToken: string; refreshToken?: string; permissions?: Record<string, unknown> };
|
||||
user?: unknown;
|
||||
accessToken?: string;
|
||||
refreshToken?: string;
|
||||
permissions?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
let activeGrant: string | null = null;
|
||||
let activeExchange: Promise<unknown> | null = null;
|
||||
|
||||
function exchangeGrantOnce(grant: string) {
|
||||
if (activeGrant !== grant || !activeExchange) {
|
||||
activeGrant = grant;
|
||||
activeExchange = authService.exchangeSaaSToken(grant);
|
||||
}
|
||||
return activeExchange;
|
||||
}
|
||||
|
||||
export const SSOCallback = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const initialError = searchParams.get('error');
|
||||
const initialGrant = searchParams.get('grant');
|
||||
const validInitialGrant = Boolean(initialGrant && /^[a-f0-9]{32}$/i.test(initialGrant));
|
||||
const navigate = useNavigate();
|
||||
const [error, setError] = useState<string>('');
|
||||
const [status, setStatus] = useState<string>('Processing SSO login...');
|
||||
const dispatch = useDispatch();
|
||||
const [error, setError] = useState<string>(() => initialError
|
||||
? `SSO Error: ${initialError}`
|
||||
: validInitialGrant ? '' : 'The SSO link is missing, invalid, or already used. Please open PIM again from the SaaS portal.');
|
||||
const [status, setStatus] = useState<string>(() => initialError || !validInitialGrant ? 'SSO login failed' : 'Processing SSO login...');
|
||||
|
||||
useEffect(() => {
|
||||
const errorParam = searchParams.get('error');
|
||||
if (errorParam) {
|
||||
setError(`SSO Error: ${errorParam}`);
|
||||
const grant = searchParams.get('grant');
|
||||
const callbackPath = `${import.meta.env.BASE_URL.replace(/\/$/, '')}/sso/callback`;
|
||||
window.history.replaceState({}, document.title, callbackPath);
|
||||
if (searchParams.get('error') || !grant || !/^[a-f0-9]{32}$/i.test(grant)) return;
|
||||
let cancelled = false;
|
||||
exchangeGrantOnce(grant).then((response) => {
|
||||
if (cancelled) return;
|
||||
const result = response as SSOExchangeResponse;
|
||||
const session = result.data ?? result;
|
||||
const { user, accessToken, refreshToken, permissions } = session;
|
||||
if (!accessToken) throw new Error('PIM session token was not returned');
|
||||
localStorage.removeItem('impersonatedTenantId');
|
||||
localStorage.setItem('accessToken', accessToken);
|
||||
if (refreshToken) localStorage.setItem('refreshToken', refreshToken);
|
||||
dispatch(setCredentials({ user, accessToken, refreshToken, permissions: permissions ?? {} }));
|
||||
const tenantName = (user as { tenant?: { name?: string } } | undefined)?.tenant?.name;
|
||||
setStatus(`Welcome to ${tenantName || 'PIM'}. Redirecting...`);
|
||||
navigate('/dashboard', { replace: true });
|
||||
}).catch((requestError: unknown) => {
|
||||
if (cancelled) return;
|
||||
const message = (requestError as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
setError(message || 'SSO login failed. Please open PIM again from the SaaS portal.');
|
||||
setStatus('SSO login failed');
|
||||
setTimeout(() => navigate('/login'), 3000);
|
||||
return;
|
||||
}
|
||||
setStatus('Login successful! Redirecting...');
|
||||
setTimeout(() => navigate('/dashboard'), 1000);
|
||||
}, [searchParams, navigate]);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [searchParams, navigate, dispatch]);
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-background" />
|
||||
<div className="login-right-panel" style={{ width: '100%', maxWidth: '500px', margin: '0 auto' }}>
|
||||
<div className="login-card">
|
||||
<div className="login-card-header" style={{ textAlign: 'center' }}>
|
||||
<div className="login-logo-badge" style={{ margin: '0 auto 1rem' }}>
|
||||
<Package className="login-logo-icon" />
|
||||
</div>
|
||||
<h2 className="login-card-title">SSO Authentication</h2>
|
||||
<p className="login-card-subtitle">{status}</p>
|
||||
</div>
|
||||
{error ? (
|
||||
<div className="error-message" style={{ marginTop: '1rem' }}>
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: '2rem 0' }}>
|
||||
<div style={{
|
||||
border: '3px solid #f3f3f3', borderTop: '3px solid #3498db',
|
||||
borderRadius: '50%', width: '40px', height: '40px',
|
||||
animation: 'spin 1s linear infinite', margin: '0 auto'
|
||||
}} />
|
||||
<style>{`@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`}</style>
|
||||
</div>
|
||||
)}
|
||||
<AuthLayout>
|
||||
<div className="flex flex-col items-center text-center py-8">
|
||||
<div className={`w-14 h-14 rounded-full flex items-center justify-center mb-4 ${error ? 'bg-danger/10' : 'bg-primary/10'}`}>
|
||||
{error
|
||||
? <AlertCircle className="w-7 h-7 text-danger" />
|
||||
: <ShieldCheck className="w-7 h-7 text-primary" />}
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-foreground">Secure SaaS Sign-in</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">{status}</p>
|
||||
{error ? (
|
||||
<div className="w-full mt-6 p-4 rounded-xl bg-danger/10 border border-danger/20 text-danger text-sm text-left">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<Loader2 className="w-8 h-8 text-primary animate-spin mt-8" aria-label="Completing secure sign-in" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -40,8 +40,9 @@ export const authService = {
|
||||
return response;
|
||||
},
|
||||
|
||||
exchangeSaaSToken: async (_code: string): Promise<LoginResponse> => {
|
||||
throw new Error('SSO not implemented');
|
||||
exchangeSaaSToken: async (grant: string): Promise<LoginResponse> => {
|
||||
const response = await apiClient.post<LoginResponse>('/api/v1/auth/sso/exchange', { grant });
|
||||
return response;
|
||||
},
|
||||
|
||||
acceptInvite: async (email: string, tempPassword: string, newPassword: string): Promise<LoginResponse> => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Bell, ChevronDown, Building2, Globe, LogOut, Shield, User, Settings, CheckCircle2, ChevronRight, Menu, ShieldAlert } from "lucide-react";
|
||||
import { Bell, ChevronDown, Building2, Globe, LogOut, Shield, User, Settings, CheckCircle2, ChevronRight, Menu, ShieldAlert, Home } from "lucide-react";
|
||||
import { useLanguage, type Language } from "../../contexts/LanguageContext";
|
||||
import { useHeader } from "../../contexts/HeaderContext";
|
||||
import { useSidebar } from "../../contexts/SidebarContext";
|
||||
@@ -9,6 +9,7 @@ import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { notificationService } from "../../features/notifications";
|
||||
import { tenantService } from "../../features/tenants/services/tenant.service";
|
||||
import { notify } from "../../services/toast";
|
||||
import { hasPermission } from "../../utils/permissionUtils";
|
||||
|
||||
export function Header() {
|
||||
const { title, subtitle } = useHeader();
|
||||
@@ -16,7 +17,7 @@ export function Header() {
|
||||
const { language, setLanguage } = useLanguage();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useAppDispatch();
|
||||
const { user } = useAppSelector((state) => state.auth);
|
||||
const { user, permissions } = useAppSelector((state) => state.auth);
|
||||
|
||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||
const [headerUnread, setHeaderUnread] = useState(0);
|
||||
@@ -27,6 +28,7 @@ export function Header() {
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const isPlatformUser = user?.type === 'platform' || user?.user_type === 'platform';
|
||||
const canViewNotifications = hasPermission(permissions, 'notifications', 'view', user);
|
||||
|
||||
// Derive real-time display values from Redux user state
|
||||
const userName = user?.name || user?.user_name || (user?.email ? user.email.split('@')[0] : "User");
|
||||
@@ -38,7 +40,7 @@ export function Header() {
|
||||
|
||||
// Load platform tenants if superadmin
|
||||
const loadPlatformTenants = useCallback(async () => {
|
||||
if (isPlatformUser) {
|
||||
if (isPlatformUser && impersonatedTenantId) {
|
||||
try {
|
||||
const tenants = await tenantService.getPlatformTenants();
|
||||
if (Array.isArray(tenants)) {
|
||||
@@ -48,51 +50,42 @@ export function Header() {
|
||||
// Fallback silently if not available
|
||||
}
|
||||
}
|
||||
}, [isPlatformUser]);
|
||||
}, [isPlatformUser, impersonatedTenantId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadPlatformTenants();
|
||||
}, [loadPlatformTenants]);
|
||||
|
||||
useEffect(() => {
|
||||
const syncImpersonation = (event: Event) => {
|
||||
const tenantId = (event as CustomEvent<string | null>).detail;
|
||||
setImpersonatedTenantId(tenantId || localStorage.getItem('impersonatedTenantId'));
|
||||
};
|
||||
window.addEventListener('pim:impersonation-changed', syncImpersonation);
|
||||
return () => window.removeEventListener('pim:impersonation-changed', syncImpersonation);
|
||||
}, []);
|
||||
|
||||
const activeTenantObj = platformTenants.find(t => String(t.id) === String(impersonatedTenantId));
|
||||
|
||||
const tenantName = impersonatedTenantId
|
||||
? `${activeTenantObj?.name || 'Tenant'} (#${impersonatedTenantId}) [Support Mode]`
|
||||
? `${activeTenantObj?.name || activeTenantObj?.tenant_name || 'Tenant'} (#${impersonatedTenantId}) [Support Mode]`
|
||||
: (user?.tenant?.name || user?.tenant_name || (isPlatformUser ? "Platform Core" : `Tenant #${user?.tenant_id}`));
|
||||
|
||||
const handleWorkspaceChange = async (targetTenantId: string) => {
|
||||
if (!targetTenantId) {
|
||||
// Switch back to Global Platform Control
|
||||
localStorage.removeItem('impersonatedTenantId');
|
||||
setImpersonatedTenantId(null);
|
||||
notify.info("Switched to Global SaaS Control Tower");
|
||||
navigate("/platform/overview");
|
||||
window.location.reload();
|
||||
} else {
|
||||
// Impersonate selected tenant
|
||||
try {
|
||||
await tenantService.impersonateTenant(targetTenantId);
|
||||
localStorage.setItem('impersonatedTenantId', targetTenantId);
|
||||
setImpersonatedTenantId(targetTenantId);
|
||||
const selected = platformTenants.find(t => String(t.id) === String(targetTenantId));
|
||||
notify.success(`Entered Support Mode: ${selected?.name || `Tenant #${targetTenantId}`}`);
|
||||
navigate("/products");
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
notify.error("Unable to switch workspace context.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleExitSupportMode = () => {
|
||||
localStorage.removeItem('impersonatedTenantId');
|
||||
setImpersonatedTenantId(null);
|
||||
window.dispatchEvent(new CustomEvent('pim:impersonation-changed', { detail: null }));
|
||||
notify.info("Support impersonation session ended");
|
||||
navigate("/platform/overview");
|
||||
navigate("/platform/tenants");
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!canViewNotifications) {
|
||||
setHeaderUnread(0);
|
||||
return;
|
||||
}
|
||||
|
||||
let mounted = true;
|
||||
const sync = async () => {
|
||||
const count = await notificationService.getUnreadCount();
|
||||
@@ -116,7 +109,7 @@ export function Header() {
|
||||
socketService.off("notification:unread-count", handleUnreadCount);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
}, [canViewNotifications]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
@@ -143,7 +136,7 @@ export function Header() {
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldAlert className="w-4 h-4 text-amber-950 animate-bounce" />
|
||||
<span>
|
||||
SUPPORT IMPERSONATION ACTIVE: You are viewing and operating inside workspace <strong>"{activeTenantObj?.name || 'Selected Tenant'}"</strong> (Tenant #{impersonatedTenantId}).
|
||||
SUPPORT IMPERSONATION ACTIVE: You are viewing and operating inside workspace <strong>"{activeTenantObj?.name || activeTenantObj?.tenant_name || 'Selected Tenant'}"</strong> (Tenant #{impersonatedTenantId}).
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@@ -180,33 +173,14 @@ export function Header() {
|
||||
|
||||
{/* Right Side Controls */}
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{/* Platform SuperAdmin Workspace Switcher */}
|
||||
{isPlatformUser && (
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl text-xs font-semibold border border-primary/30 bg-primary/5 text-primary shadow-2xs">
|
||||
<Building2 className="w-4 h-4 text-primary shrink-0" />
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="text-[9px] font-black uppercase text-primary/70 tracking-wider">Active Workspace</span>
|
||||
<select
|
||||
value={impersonatedTenantId || ''}
|
||||
onChange={(e) => handleWorkspaceChange(e.target.value)}
|
||||
className="bg-transparent outline-none cursor-pointer font-bold text-foreground text-xs pr-1"
|
||||
aria-label="Select workspace context"
|
||||
>
|
||||
<option value="" className="bg-surface text-foreground font-semibold">
|
||||
🌐 Global Platform Console
|
||||
</option>
|
||||
<optgroup label="Tenants / Organizations">
|
||||
{platformTenants.map(t => (
|
||||
<option key={t.id} value={t.id} className="bg-surface text-foreground font-medium">
|
||||
🏢 {t.name} (#{t.id})
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => window.location.assign(`${import.meta.env.VITE_SAAS_BASE_URL || 'http://localhost:3000'}/dashboard`)}
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-semibold text-primary bg-primary/10 hover:bg-primary/15 transition-colors"
|
||||
title="Return to SaaS home"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
<span className="hidden lg:inline">SaaS Home</span>
|
||||
</button>
|
||||
{/* Standard Non-Platform Tenant Badge */}
|
||||
{!isPlatformUser && (
|
||||
<div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium border border-border bg-surface-muted text-foreground">
|
||||
@@ -234,7 +208,7 @@ export function Header() {
|
||||
</div>
|
||||
|
||||
{/* Notifications Bell */}
|
||||
<div className="relative">
|
||||
{canViewNotifications && <div className="relative">
|
||||
<button
|
||||
onClick={() => navigate("/notifications")}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-muted transition-colors relative cursor-pointer"
|
||||
@@ -247,7 +221,7 @@ export function Header() {
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{/* Profile Card Trigger & Popover */}
|
||||
<div className="relative" ref={menuRef}>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { AccessDenied } from '../customs/AccessDenied';
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
node: PermissionNodes | string;
|
||||
action?: 'view' | 'create' | 'edit' | 'delete' | 'alter' | 'import' | 'export';
|
||||
children: React.ReactNode;
|
||||
fallback?: React.ReactNode; // Optional custom fallback
|
||||
}
|
||||
@@ -22,12 +23,22 @@ interface ProtectedRouteProps {
|
||||
*/
|
||||
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
|
||||
node,
|
||||
action = 'view',
|
||||
children,
|
||||
fallback = <AccessDenied />
|
||||
}) => {
|
||||
const { canView } = usePermissions(node);
|
||||
const permissions = usePermissions(node);
|
||||
const allowed = {
|
||||
view: permissions.canView,
|
||||
create: permissions.canCreate,
|
||||
edit: permissions.canEdit,
|
||||
delete: permissions.canDelete,
|
||||
alter: permissions.canAlter,
|
||||
import: permissions.canImport,
|
||||
export: permissions.canExport,
|
||||
}[action];
|
||||
|
||||
if (!canView) {
|
||||
if (!allowed) {
|
||||
return <>{fallback}</>;
|
||||
}
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ interface NavItem {
|
||||
children?: NavItem[];
|
||||
}
|
||||
|
||||
import { sidebarConfig as navItems } from "../../routes/sidebar.config";
|
||||
import { sidebarConfig as tenantNavItems, platformSidebarConfig } from "../../routes/sidebar.config";
|
||||
|
||||
export function Sidebar() {
|
||||
const navigate = useNavigate();
|
||||
@@ -65,6 +65,18 @@ export function Sidebar() {
|
||||
const permissions = useSelector((state: RootState) => state.auth.permissions);
|
||||
const user = useSelector((state: RootState) => state.auth.user);
|
||||
const isPlatformUser = user?.type === 'platform' || user?.user_type === 'platform';
|
||||
const [impersonatedTenantId, setImpersonatedTenantId] = useState<string | null>(
|
||||
localStorage.getItem('impersonatedTenantId')
|
||||
);
|
||||
const isSupportMode = isPlatformUser && Boolean(impersonatedTenantId);
|
||||
|
||||
React.useEffect(() => {
|
||||
const syncImpersonation = (event: Event) => {
|
||||
setImpersonatedTenantId((event as CustomEvent<string | null>).detail || localStorage.getItem('impersonatedTenantId'));
|
||||
};
|
||||
window.addEventListener('pim:impersonation-changed', syncImpersonation);
|
||||
return () => window.removeEventListener('pim:impersonation-changed', syncImpersonation);
|
||||
}, []);
|
||||
|
||||
const toggleSection = (href: string) => {
|
||||
setExpandedSections(prev =>
|
||||
@@ -107,7 +119,10 @@ export function Sidebar() {
|
||||
}, []);
|
||||
};
|
||||
|
||||
const filteredNavItems = filterNavItems(navItems);
|
||||
const navigationSource = isPlatformUser && !isSupportMode
|
||||
? platformSidebarConfig
|
||||
: tenantNavItems.filter(item => !item.platformOnly);
|
||||
const filteredNavItems = filterNavItems(navigationSource);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -226,10 +241,10 @@ export function Sidebar() {
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-semibold text-foreground truncate">
|
||||
{isPlatformUser ? 'Platform Super Admin' : (user?.tenant?.name || 'Tenant Workspace')}
|
||||
{isSupportMode ? `Tenant #${impersonatedTenantId}` : isPlatformUser ? 'Platform Super Admin' : (user?.tenant?.name || 'Tenant Workspace')}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{isPlatformUser ? 'Global SaaS Mode' : `${user?.tenant?.plan_name || 'Active'} Plan`}
|
||||
{isSupportMode ? 'Audited Support Mode' : isPlatformUser ? 'Global SaaS Mode' : `${user?.tenant?.plan_name || 'Active'} Plan`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
|
||||
import { useFormik } from "formik";
|
||||
import {
|
||||
X, Image as ImageIcon, Video, FileText, Award, Megaphone,
|
||||
HelpCircle, Plus, AlertCircle, Check, Loader2, Save
|
||||
HelpCircle, Plus, Check, Save
|
||||
} from "lucide-react";
|
||||
import { Input } from "../../../components/customs/Input";
|
||||
import { TextArea } from "../../../components/customs/TextArea";
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import AssetList from '../pages/AssetList';
|
||||
import NewAsset from '../pages/NewAsset';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const AssetRoutes = () => (
|
||||
<Routes>
|
||||
<Route index element={<AssetList />} />
|
||||
<Route path="new" element={<NewAsset />} />
|
||||
<Route path=":id/edit" element={<NewAsset />} />
|
||||
<Route path="new" element={<ProtectedRoute node="media.assets" action="create"><NewAsset /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="media.assets" action="edit"><NewAsset /></ProtectedRoute>} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -28,6 +28,8 @@ export interface AssetAnalytics {
|
||||
export interface AssetMapping {
|
||||
id: string;
|
||||
asset_id: string;
|
||||
product_id?: string;
|
||||
productId?: string;
|
||||
role: string;
|
||||
display_order: number;
|
||||
is_primary: boolean;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import { useFormik } from "formik";
|
||||
import { Plus, Save, Info, Check } from "lucide-react";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import { useFormik } from "formik";
|
||||
import { Check, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
@@ -201,7 +201,7 @@ export default function NewAttribute() {
|
||||
}
|
||||
}, [isEdit, isView]);
|
||||
|
||||
const isGeneralValid = Boolean(formik.values.name?.trim() && formik.values.code?.trim() && formik.values.type && !formik.errors.name && !formik.errors.code && !formik.errors.type);
|
||||
const isGeneralValid = Boolean(formik.values.name?.trim() && formik.values.code?.trim() && formik.values.dataType && !formik.errors.name && !formik.errors.code && !formik.errors.dataType);
|
||||
|
||||
const isStepAccessible = useCallback((stepNum: number) => {
|
||||
if (isEdit || isView) return true;
|
||||
|
||||
@@ -2,14 +2,15 @@ import { Routes, Route } from 'react-router-dom';
|
||||
import AttributeList from '../pages/AttributeList';
|
||||
import NewAttribute from '../pages/NewAttribute';
|
||||
import AttributeGroupList from '../../attribute-groups/pages/AttributeGroupList';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const AttributeRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<AttributeList />} />
|
||||
<Route path="groups" element={<AttributeGroupList />} />
|
||||
<Route path="new" element={<NewAttribute />} />
|
||||
<Route path=":id/edit" element={<NewAttribute />} />
|
||||
<Route path="new" element={<ProtectedRoute node="products.attributes" action="create"><NewAttribute /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="products.attributes" action="edit"><NewAttribute /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<NewAttribute />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,8 @@ import type { Brand } from '../types/brand.types';
|
||||
interface BrandTableProps {
|
||||
brands: Brand[];
|
||||
onView: (row: Brand) => void;
|
||||
onEdit: (row: Brand) => void;
|
||||
onDelete: (row: Brand) => void;
|
||||
onEdit?: (row: Brand) => void;
|
||||
onDelete?: (row: Brand) => void;
|
||||
onRowClick?: (row: Brand) => void;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import BrandList from '../pages/BrandList';
|
||||
import NewBrandForm from '../pages/NewBrandForm';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const BrandRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<BrandList />} />
|
||||
<Route path="new" element={<NewBrandForm />} />
|
||||
<Route path=":id/edit" element={<NewBrandForm />} />
|
||||
<Route path="new" element={<ProtectedRoute node="masters.brands" action="create"><NewBrandForm /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="masters.brands" action="edit"><NewBrandForm /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<NewBrandForm />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -101,6 +101,7 @@ function TreeNodeRow({
|
||||
const hasChildren = node.children.length > 0;
|
||||
const isRoot = node.depth === 0;
|
||||
const isActive = node.category.status === "active";
|
||||
const isSharedBaseline = node.category.tenant_id == null;
|
||||
const linePrefix = node.depth === 0 ? "" : prefix + (isLast ? "└── " : "├── ");
|
||||
const childPrefix = node.depth === 0 ? "" : prefix + (isLast ? " " : "│ ");
|
||||
const descendants = countDescendants(node);
|
||||
@@ -220,22 +221,26 @@ function TreeNodeRow({
|
||||
>
|
||||
<Plus className="w-4 h-4 md:w-3.5 md:h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEdit(node.category)}
|
||||
className="p-2 md:p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors flex items-center justify-center min-h-[32px] min-w-[32px] md:min-h-0 md:min-w-0"
|
||||
title="Edit"
|
||||
>
|
||||
<Pencil className="w-4 h-4 md:w-3.5 md:h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(node.category)}
|
||||
className="p-2 md:p-1 rounded hover:bg-red-50 text-muted-foreground hover:text-red-500 transition-colors flex items-center justify-center min-h-[32px] min-w-[32px] md:min-h-0 md:min-w-0"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 md:w-3.5 md:h-3.5" />
|
||||
</button>
|
||||
{!isSharedBaseline && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEdit(node.category)}
|
||||
className="p-2 md:p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors flex items-center justify-center min-h-[32px] min-w-[32px] md:min-h-0 md:min-w-0"
|
||||
title="Edit"
|
||||
>
|
||||
<Pencil className="w-4 h-4 md:w-3.5 md:h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(node.category)}
|
||||
className="p-2 md:p-1 rounded hover:bg-red-50 text-muted-foreground hover:text-red-500 transition-colors flex items-center justify-center min-h-[32px] min-w-[32px] md:min-h-0 md:min-w-0"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 md:w-3.5 md:h-3.5" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,12 +2,13 @@ import { Routes, Route } from 'react-router-dom';
|
||||
import CategoryList from '../pages/CategoryList';
|
||||
import NewCategory from '../pages/NewCategory';
|
||||
import CategoryView from '../pages/CategoryView';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const CategoryRoutes = () => (
|
||||
<Routes>
|
||||
<Route index element={<CategoryList />} />
|
||||
<Route path="new" element={<NewCategory />} />
|
||||
<Route path=":id/edit" element={<NewCategory />} />
|
||||
<Route path="new" element={<ProtectedRoute node="products.categories" action="create"><NewCategory /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="products.categories" action="edit"><NewCategory /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<CategoryView />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,9 @@ export interface Category {
|
||||
lastUpdated: string;
|
||||
createdBy: string;
|
||||
path?: string;
|
||||
tenant_id?: string | number | null;
|
||||
productCount?: number;
|
||||
familyCount?: number;
|
||||
}
|
||||
|
||||
export type CategoryCreateRequest = Omit<Category, 'id' | 'lastUpdated' | 'createdBy' | 'parentName'>;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Plus,
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
RefreshCw,
|
||||
Layers2,
|
||||
CheckCircle,
|
||||
@@ -17,7 +16,6 @@ import {
|
||||
Monitor
|
||||
} from "lucide-react";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PageWrapper } from "../../../components/layouts/PageWrapper";
|
||||
import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
@@ -25,7 +23,6 @@ import { DataTable } from "../../../components/customs/DataTable";
|
||||
import { StatusBadge } from "../../../components/customs/StatusBadge";
|
||||
import { useChannelType } from "../hook/useChannelType";
|
||||
import type { ChannelType } from "../types/channel-types.types";
|
||||
import { ConfirmationModal } from "../../../components/modals/ConfirmationModal";
|
||||
import { StatsCard } from "../../../components/customs/StatsCard";
|
||||
|
||||
const ICON_MAP: Record<string, any> = {
|
||||
@@ -41,15 +38,7 @@ const ICON_MAP: Record<string, any> = {
|
||||
};
|
||||
|
||||
export default function ChannelTypeList() {
|
||||
const navigate = useNavigate();
|
||||
const { items, fetchItems, loading, deleteItem } = useChannelType();
|
||||
|
||||
const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; id: string; name: string }>({
|
||||
isOpen: false,
|
||||
id: "",
|
||||
name: "",
|
||||
});
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const { items, fetchItems, loading } = useChannelType();
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
@@ -112,19 +101,6 @@ export default function ChannelTypeList() {
|
||||
},
|
||||
];
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteModal.id) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteItem(deleteModal.id);
|
||||
setDeleteModal({ isOpen: false, id: "", name: "" });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Breadcrumb
|
||||
@@ -139,10 +115,6 @@ export default function ChannelTypeList() {
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button onClick={() => navigate("new")} className="bg-primary hover:bg-primary-hover text-white">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Channel Type
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@@ -185,20 +157,6 @@ export default function ChannelTypeList() {
|
||||
rowIdKey="id"
|
||||
resultLabel="channel types"
|
||||
statusKey="status"
|
||||
actionConfig={{
|
||||
onEdit: (row) => navigate(`${row.id}/edit`),
|
||||
onDelete: (row) => setDeleteModal({ isOpen: true, id: row.id, name: row.name }),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
isOpen={deleteModal.isOpen}
|
||||
title="Delete Channel Type"
|
||||
description="Are you sure you want to delete this channel type? Channels using this type may be affected."
|
||||
itemName={deleteModal.name}
|
||||
loading={isDeleting}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => setDeleteModal({ isOpen: false, id: "", name: "" })}
|
||||
/>
|
||||
</PageWrapper>
|
||||
);
|
||||
|
||||
@@ -1,68 +1,34 @@
|
||||
import apiClient from '../../../api/axiosInstance';
|
||||
import type { ChannelType, ChannelTypeCreateRequest, ChannelTypeUpdateRequest } from '../types/channel-types.types';
|
||||
|
||||
const STORAGE_KEY = 'pim_channel_types';
|
||||
|
||||
const INITIAL_DATA: ChannelType[] = [
|
||||
{ id: '1', name: 'E-Commerce', code: 'ecommerce', description: 'Online retail storefronts and shopping platforms', icon: 'ShoppingCart', status: 'active', channelCount: 4, createdAt: '2025-01-10', author: 'Admin User' },
|
||||
{ id: '2', name: 'Marketplace', code: 'marketplace', description: 'Third-party marketplace listings like Amazon and eBay', icon: 'ShoppingBag', status: 'active', channelCount: 3, createdAt: '2025-01-12', author: 'Sarah Chen' },
|
||||
{ id: '3', name: 'ERP System', code: 'erp', description: 'Enterprise resource planning system integrations', icon: 'Server', status: 'active', channelCount: 2, createdAt: '2025-01-15', author: 'Michael Torres' },
|
||||
{ id: '4', name: 'Warehouse (WMS)', code: 'wms', description: 'Warehouse management system for stock and logistics', icon: 'Warehouse', status: 'active', channelCount: 1, createdAt: '2025-01-18', author: 'Emma Wilson' },
|
||||
{ id: '5', name: 'Point of Sale', code: 'pos', description: 'In-store point of sale and retail terminal systems', icon: 'Store', status: 'active', channelCount: 2, createdAt: '2025-02-01', author: 'Admin User' },
|
||||
{ id: '6', name: 'B2B Portal', code: 'b2b_portal', description: 'Business-to-business buyer portals and wholesale platforms', icon: 'Globe', status: 'active', channelCount: 1, createdAt: '2025-02-10', author: 'Sarah Chen' },
|
||||
{ id: '7', name: 'Mobile App', code: 'mobile_app', description: 'Native mobile applications for iOS and Android', icon: 'Smartphone', status: 'inactive', channelCount: 0, createdAt: '2025-02-20', author: 'Michael Torres' },
|
||||
{ id: '8', name: 'Corporate Website', code: 'website', description: 'Company marketing websites and product catalogues', icon: 'Monitor', status: 'active', channelCount: 2, createdAt: '2025-03-01', author: 'Emma Wilson' },
|
||||
];
|
||||
|
||||
const getStored = (): ChannelType[] => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (!stored) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(INITIAL_DATA));
|
||||
return INITIAL_DATA;
|
||||
}
|
||||
return JSON.parse(stored);
|
||||
};
|
||||
|
||||
const setStored = (items: ChannelType[]) => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
|
||||
};
|
||||
interface ApiResponse<T> { success: boolean; data: T; message?: string }
|
||||
const base = '/api/v1/channel-types';
|
||||
const normalize = (raw: any): ChannelType => ({
|
||||
...raw,
|
||||
createdAt: raw.createdAt || raw.created_at,
|
||||
updatedAt: raw.updatedAt || raw.updated_at,
|
||||
channelCount: raw.channelCount ?? raw.channels?.length ?? 0
|
||||
});
|
||||
|
||||
export const channelTypesService = {
|
||||
getAll: async (): Promise<ChannelType[]> =>
|
||||
new Promise((resolve) => setTimeout(() => resolve(getStored()), 300)),
|
||||
|
||||
getById: async (id: string): Promise<ChannelType | undefined> =>
|
||||
new Promise((resolve) => setTimeout(() => resolve(getStored().find(p => p.id === id)), 200)),
|
||||
|
||||
create: async (req: ChannelTypeCreateRequest): Promise<ChannelType> =>
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const list = getStored();
|
||||
const newItem: ChannelType = { ...req, id: String(Date.now()), createdAt: new Date().toISOString() };
|
||||
list.push(newItem);
|
||||
setStored(list);
|
||||
resolve(newItem);
|
||||
}, 300);
|
||||
}),
|
||||
|
||||
update: async (id: string, req: ChannelTypeUpdateRequest): Promise<ChannelType> =>
|
||||
new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const list = getStored();
|
||||
const index = list.findIndex(p => p.id === id);
|
||||
if (index === -1) { reject(new Error('Not found')); return; }
|
||||
const updated = { ...list[index], ...req };
|
||||
list[index] = updated;
|
||||
setStored(list);
|
||||
resolve(updated);
|
||||
}, 300);
|
||||
}),
|
||||
|
||||
delete: async (id: string): Promise<boolean> =>
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const list = getStored().filter(p => p.id !== id);
|
||||
setStored(list);
|
||||
resolve(true);
|
||||
}, 300);
|
||||
}),
|
||||
getAll: async (): Promise<ChannelType[]> => {
|
||||
const response = await apiClient.get<ApiResponse<any[]>>(base);
|
||||
return (response.data || []).map(normalize);
|
||||
},
|
||||
getById: async (id: string): Promise<ChannelType | undefined> => {
|
||||
const response = await apiClient.get<ApiResponse<any>>(`${base}/${id}`);
|
||||
return response.data ? normalize(response.data) : undefined;
|
||||
},
|
||||
create: async (req: ChannelTypeCreateRequest): Promise<ChannelType> => {
|
||||
const response = await apiClient.post<ApiResponse<any>>(base, req);
|
||||
return normalize(response.data);
|
||||
},
|
||||
update: async (id: string, req: ChannelTypeUpdateRequest): Promise<ChannelType> => {
|
||||
const response = await apiClient.put<ApiResponse<any>>(`${base}/${id}`, req);
|
||||
return normalize(response.data);
|
||||
},
|
||||
delete: async (id: string): Promise<boolean> => {
|
||||
const response = await apiClient.delete<ApiResponse<unknown>>(`${base}/${id}`);
|
||||
return response.success;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import apiClient from '../../../api/axiosInstance';
|
||||
import apiClient, { axiosInstance } from '../../../api/axiosInstance';
|
||||
import type { Channel, ChannelCreateRequest, ChannelUpdateRequest } from '../types/channels.types';
|
||||
|
||||
interface ApiResponse<T> {
|
||||
@@ -8,26 +8,33 @@ interface ApiResponse<T> {
|
||||
}
|
||||
|
||||
const BASE_URL = '/api/v1/channels';
|
||||
const normalizeChannel = (raw: any): Channel => ({
|
||||
...raw,
|
||||
channelType: raw.channelType || raw.type_id || '',
|
||||
allowPublishing: raw.allowPublishing ?? raw.metadata?.allowPublishing ?? true,
|
||||
createdAt: raw.createdAt || raw.created_at,
|
||||
updatedAt: raw.updatedAt || raw.updated_at
|
||||
});
|
||||
|
||||
export const channelsApi = {
|
||||
getAll: async (): Promise<Channel[]> => {
|
||||
const res = await apiClient.get<ApiResponse<Channel[]>>(BASE_URL);
|
||||
return res.data || [];
|
||||
return (res.data || []).map(normalizeChannel);
|
||||
},
|
||||
|
||||
getById: async (id: string): Promise<Channel | undefined> => {
|
||||
const res = await apiClient.get<ApiResponse<Channel>>(`${BASE_URL}/${id}`);
|
||||
return res.data;
|
||||
return res.data ? normalizeChannel(res.data) : undefined;
|
||||
},
|
||||
|
||||
create: async (req: ChannelCreateRequest): Promise<Channel> => {
|
||||
const res = await apiClient.post<ApiResponse<Channel>>(BASE_URL, req);
|
||||
return res.data;
|
||||
return normalizeChannel(res.data);
|
||||
},
|
||||
|
||||
update: async (id: string, req: ChannelUpdateRequest): Promise<Channel> => {
|
||||
const res = await apiClient.put<ApiResponse<Channel>>(`${BASE_URL}/${id}`, req);
|
||||
return res.data;
|
||||
return normalizeChannel(res.data);
|
||||
},
|
||||
|
||||
remove: async (id: string): Promise<boolean> => {
|
||||
@@ -69,6 +76,43 @@ export const channelsApi = {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`${BASE_URL}/${channelId}/test-connection`);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
getAllJobs: async (): Promise<any[]> => {
|
||||
const res = await apiClient.get<ApiResponse<any[]>>(`${BASE_URL}/operations/jobs`);
|
||||
return res.data || [];
|
||||
},
|
||||
|
||||
getErrors: async (): Promise<any[]> => {
|
||||
const res = await apiClient.get<ApiResponse<any[]>>(`${BASE_URL}/operations/errors?includeRetrying=true`);
|
||||
return res.data || [];
|
||||
},
|
||||
|
||||
getQueueHealth: async (): Promise<any> => {
|
||||
const res = await apiClient.get<ApiResponse<any>>(`${BASE_URL}/queue/health`);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
getOperationsAudit: async (): Promise<any[]> => {
|
||||
const res = await apiClient.get<ApiResponse<any[]>>(`${BASE_URL}/operations/audit`);
|
||||
return res.data || [];
|
||||
},
|
||||
|
||||
cancelJob: async (jobId: string): Promise<any> => {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`${BASE_URL}/jobs/${jobId}/cancel`);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
retryJob: async (jobId: string): Promise<any> => {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`${BASE_URL}/jobs/${jobId}/retry`);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
downloadCsv: async (channelId: string): Promise<{ blob: Blob; filename: string }> => {
|
||||
const response = await axiosInstance.get(`${BASE_URL}/${channelId}/export.csv`, { responseType: 'blob' });
|
||||
const disposition = String(response.headers['content-disposition'] || '');
|
||||
const filename = disposition.match(/filename="?([^";]+)"?/i)?.[1] || 'channel-products.csv';
|
||||
return { blob: response.data, filename };
|
||||
},
|
||||
};
|
||||
|
||||
export default channelsApi;
|
||||
|
||||
@@ -13,15 +13,6 @@ const COMMON_PIM_ATTRIBUTES = [
|
||||
{ code: "created_at", label: "Creation Timestamp (created_at)" },
|
||||
];
|
||||
|
||||
export const COMMON_CHANNEL_FIELDS = [
|
||||
{ code: "title", label: "Storefront Title (title)" },
|
||||
{ code: "body_html", label: "HTML Body Description (body_html)" },
|
||||
{ code: "variant_sku", label: "Variant SKU (variant_sku)" },
|
||||
{ code: "price", label: "Variant Price (price)" },
|
||||
{ code: "vendor", label: "Brand / Vendor (vendor)" },
|
||||
{ code: "product_type", label: "Product Category / Type (product_type)" },
|
||||
];
|
||||
|
||||
const TRANSFORMATION_RULES = [
|
||||
{ value: "none", label: "Direct Pass-through" },
|
||||
{ value: "uppercase", label: "UPPERCASE" },
|
||||
|
||||
@@ -35,7 +35,7 @@ export function SyndicationHistoryTab({ channelId }: { channelId: string }) {
|
||||
setSyncing(true);
|
||||
try {
|
||||
await channelsApi.triggerSyndication(channelId);
|
||||
notify.success("Syndication job triggered and processed successfully!");
|
||||
notify.success("Syndication job queued successfully");
|
||||
await loadJobs();
|
||||
} catch {
|
||||
notify.error("Failed to trigger syndication job");
|
||||
@@ -52,6 +52,13 @@ export function SyndicationHistoryTab({ channelId }: { channelId: string }) {
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-danger/10 text-danger border border-danger/20"><AlertCircle className="w-3.5 h-3.5" /> Failed</span>;
|
||||
case 'running':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-warning/10 text-warning border border-warning/20 animate-pulse"><Clock className="w-3.5 h-3.5" /> Running</span>;
|
||||
case 'retrying':
|
||||
case 'queued':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-warning/10 text-warning border border-warning/20"><Clock className="w-3.5 h-3.5" /> {status}</span>;
|
||||
case 'partial':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-danger/10 text-danger border border-danger/20"><AlertCircle className="w-3.5 h-3.5" /> Partial</span>;
|
||||
case 'cancelled':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-muted text-muted-foreground">Cancelled</span>;
|
||||
default:
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-muted text-muted-foreground">Pending</span>;
|
||||
}
|
||||
@@ -141,8 +148,8 @@ export function SyndicationHistoryTab({ channelId }: { channelId: string }) {
|
||||
<div className="max-h-80 overflow-y-auto space-y-2">
|
||||
{selectedErrorLog.map((err, idx) => (
|
||||
<div key={idx} className="p-3 bg-danger/5 border border-danger/20 rounded-lg text-xs font-mono">
|
||||
<div className="font-semibold text-danger">Product SKU: {err.sku || 'N/A'} (ID: {err.productId})</div>
|
||||
<div className="text-muted-foreground mt-1">{err.error}</div>
|
||||
<div className="font-semibold text-danger">Product: {err.sku || err.product_code || 'N/A'} (ID: {err.productId || err.product_id || 'N/A'})</div>
|
||||
<div className="text-muted-foreground mt-1">{err.error || err.error_message || err.message}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Plus, RefreshCw, Radio, CheckCircle, Layers, TrendingUp, ShoppingCart, ShoppingBag, Server, Warehouse, Store, Smartphone, Globe, Monitor, Play } from "lucide-react";
|
||||
import { Plus, RefreshCw, Radio, CheckCircle, Clock, TrendingUp, ShoppingCart, ShoppingBag, Server, Warehouse, Store, Smartphone, Globe, Monitor, Play, CircleHelp, Download } from "lucide-react";
|
||||
import { PageWrapper } from "../../../components/layouts/PageWrapper";
|
||||
import { ProtectedRoute } from "../../../components/layouts/ProtectedRoute";
|
||||
import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
|
||||
@@ -16,6 +16,7 @@ import { notify } from "../../../services/toast";
|
||||
|
||||
import { Can } from "../../../components/customs/Can";
|
||||
import { usePermissions } from "../../../hooks/usePermission";
|
||||
import { useChannelType } from "../../channel-types/hook/useChannelType";
|
||||
|
||||
const CHANNEL_TYPES_META: Record<string, { label: string, icon: any, typeColor: string, typeBg: string }> = {
|
||||
ecommerce: { label: "Ecommerce", icon: ShoppingCart, typeColor: "text-blue-600", typeBg: "bg-blue-50" },
|
||||
@@ -32,12 +33,20 @@ export default function ChannelList() {
|
||||
const { canEdit, canDelete } = usePermissions("channels.syndication");
|
||||
const navigate = useNavigate();
|
||||
const { items, fetchItems, loading, deleteItem } = useChannel();
|
||||
const { items: channelTypes, fetchItems: fetchChannelTypes } = useChannelType();
|
||||
const [deleteModal, setDeleteModal] = useState({ isOpen: false, id: "", name: "" });
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [operations, setOperations] = useState<{ ready: number; published: number }>({ ready: 0, published: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, [fetchItems]);
|
||||
fetchChannelTypes();
|
||||
Promise.all([channelsApi.getQueueHealth(), channelsApi.getAllJobs()])
|
||||
.then(([health, jobs]) => setOperations({ ready: health.ready || 0, published: jobs.reduce((sum, job) => sum + Number(job.success_count || 0), 0) }))
|
||||
.catch(() => setOperations({ ready: 0, published: 0 }));
|
||||
}, [fetchItems, fetchChannelTypes]);
|
||||
|
||||
const typeCodeFor = (value?: string) => channelTypes.find(type => type.id === value)?.code || value || '';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@@ -45,7 +54,7 @@ export default function ChannelList() {
|
||||
label: "Channel Name",
|
||||
sortable: true,
|
||||
render: (_: any, row: Channel) => {
|
||||
const meta = CHANNEL_TYPES_META[row.channelType || ""] || CHANNEL_TYPES_META.website;
|
||||
const meta = CHANNEL_TYPES_META[typeCodeFor(row.channelType)] || { label: "Unassigned", icon: CircleHelp, typeColor: "text-muted-foreground", typeBg: "bg-surface-muted" };
|
||||
const Icon = meta.icon;
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -69,7 +78,7 @@ export default function ChannelList() {
|
||||
key: "channelType",
|
||||
label: "Type",
|
||||
render: (val: string) => {
|
||||
const meta = CHANNEL_TYPES_META[val] || CHANNEL_TYPES_META.website;
|
||||
const meta = CHANNEL_TYPES_META[typeCodeFor(val)] || { label: "Unassigned", icon: CircleHelp, typeColor: "text-muted-foreground", typeBg: "bg-surface-muted" };
|
||||
const Icon = meta.icon;
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border border-transparent ${meta.typeBg} ${meta.typeColor}`}>
|
||||
@@ -88,19 +97,15 @@ export default function ChannelList() {
|
||||
{ key: "products", label: "Products", render: (val: any) => val ? val.toLocaleString() : 0 },
|
||||
{
|
||||
key: "syndicate",
|
||||
label: "Syndication",
|
||||
label: "Actions",
|
||||
render: (_: any, row: Channel) => (
|
||||
<button
|
||||
<div className="flex items-center gap-1.5"><button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
notify.info(`Triggering syndication for ${row.name}...`);
|
||||
const res = await channelsApi.triggerSyndication(row.id);
|
||||
if (res.status === 'completed') {
|
||||
notify.success(`Syndication for ${row.name} completed! (${res.success_count} synced)`);
|
||||
} else {
|
||||
notify.warning(`Syndication for ${row.name} completed with ${res.failed_count} errors`);
|
||||
}
|
||||
notify.success(`Syndication for ${row.name} queued (${res.total_products || 0} products)`);
|
||||
} catch {
|
||||
notify.error("Failed to trigger syndication");
|
||||
}
|
||||
@@ -108,7 +113,20 @@ export default function ChannelList() {
|
||||
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-primary bg-primary/10 hover:bg-primary/20 rounded transition-colors"
|
||||
>
|
||||
<Play className="w-3 h-3" /> Trigger Sync
|
||||
</button>
|
||||
</button><button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const { blob, filename } = await channelsApi.downloadCsv(row.id);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url; anchor.download = filename; anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
notify.success(`Downloaded ${filename}`);
|
||||
} catch { notify.error("Configure Channel mappings before downloading CSV"); }
|
||||
}}
|
||||
className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-foreground bg-surface-muted hover:bg-border rounded transition-colors"
|
||||
><Download className="w-3 h-3"/> Download CSV</button></div>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -153,7 +171,7 @@ export default function ChannelList() {
|
||||
try {
|
||||
notify.info("Triggering bulk syndication across all active channels...");
|
||||
const results = await channelsApi.syndicateAll();
|
||||
notify.success(`Bulk syndication complete! Triggered sync for ${results.length} active channels.`);
|
||||
notify.success(`Queued syndication for ${results.length} active channels.`);
|
||||
} catch {
|
||||
notify.error("Failed to trigger bulk channel syndication");
|
||||
}
|
||||
@@ -179,29 +197,29 @@ export default function ChannelList() {
|
||||
{/* Stats Cards */}
|
||||
<StatsCard
|
||||
title="Total Channels"
|
||||
value="9"
|
||||
value={items.length}
|
||||
subtitle="Active and inactive"
|
||||
color="purple"
|
||||
icon={<Radio className="w-5 h-5" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Channels"
|
||||
value="8"
|
||||
value={items.filter(item => item.status === 'active').length}
|
||||
subtitle="Serving traffic"
|
||||
color="green"
|
||||
icon={<CheckCircle className="w-5 h-5" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Families Assigned"
|
||||
value="183"
|
||||
subtitle="Across all storefronts"
|
||||
title="Ready Queue Items"
|
||||
value={operations.ready}
|
||||
subtitle="Awaiting worker execution"
|
||||
color="blue"
|
||||
icon={<Layers className="w-5 h-5" />}
|
||||
icon={<Clock className="w-5 h-5" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Products Published"
|
||||
value="69,905"
|
||||
subtitle="Synced items"
|
||||
value={operations.published}
|
||||
subtitle="Persisted successful deliveries"
|
||||
color="orange"
|
||||
icon={<TrendingUp className="w-5 h-5" />}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import ChannelList from '../pages/ChannelList';
|
||||
import NewChannel from '../pages/NewChannel';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const ChannelRoutes = () => (
|
||||
<Routes>
|
||||
<Route index element={<ChannelList />} />
|
||||
<Route path="new" element={<NewChannel />} />
|
||||
<Route path=":id/edit" element={<NewChannel />} />
|
||||
<Route path="new" element={<ProtectedRoute node="channels.syndication" action="create"><NewChannel /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="channels.syndication" action="edit"><NewChannel /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<NewChannel />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -93,7 +93,7 @@ export default function Dashboard() {
|
||||
<PageWrapper>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-bold text-foreground mb-1">
|
||||
Welcome back, {user?.first_name || user?.user_name || (user?.user_type === 'platform' ? 'Platform Super Admin' : 'Tenant Administrator')}
|
||||
Welcome back, {user?.first_name || user?.user_name || user?.name || (user?.user_type === 'platform' || user?.type === 'platform' ? 'Platform Super Admin' : 'Tenant Administrator')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">Here's what's happening with your product catalog today.</p>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@ export default function NewFamily() {
|
||||
const { items: attributeGroupsList, fetchItems: fetchAttributeGroups } = useAttributeGroup();
|
||||
const { items: channelsList, fetchItems: fetchChannels, loading: channelsLoading } = useChannel();
|
||||
const { items: assetFamiliesList, fetchItems: fetchAssetFamilies, loading: assetFamiliesLoading } = useAssetFamily();
|
||||
const { items: assetTypesList, fetchItems: fetchAssetTypes, loading: assetTypesLoading } = useAssetType();
|
||||
const { items: assetTypesList, fetchItems: fetchAssetTypes } = useAssetType();
|
||||
const { items: workflowsList, fetchItems: fetchWorkflows, loading: workflowsLoading } = useWorkflow();
|
||||
|
||||
const { items: attributeSetsList, fetchItems: fetchAttributeSets, loading: setsLoading } = useAttributeSet();
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import FamilyList from '../pages/FamilyList';
|
||||
import NewFamily from '../pages/NewFamily';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const FamilyRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<FamilyList />} />
|
||||
<Route path="new" element={<NewFamily />} />
|
||||
<Route path=":id/edit" element={<NewFamily />} />
|
||||
<Route path="new" element={<ProtectedRoute node="products.families" action="create"><NewFamily /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="products.families" action="edit"><NewFamily /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<NewFamily />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,283 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Copy, Check, KeyRound, Plus, ShieldCheck, Trash2, AlertTriangle, Key } from 'lucide-react';
|
||||
import apiClient from '../../../api/axiosInstance';
|
||||
import { useAppSelector } from '../../../store';
|
||||
|
||||
type ApiKeyRecord = {
|
||||
id: string;
|
||||
name: string;
|
||||
prefix: string;
|
||||
scopes: string[];
|
||||
status: string;
|
||||
expiresAt: string;
|
||||
lastUsedAt?: string | null;
|
||||
createdAt: string;
|
||||
apiKey?: string;
|
||||
};
|
||||
|
||||
export default function ApiAccessTab() {
|
||||
const user = useAppSelector((state) => state.auth.user);
|
||||
const isPlatformUser = user?.type === 'platform' || user?.user_type === 'platform';
|
||||
const isSupportMode = isPlatformUser && Boolean(localStorage.getItem('impersonatedTenantId'));
|
||||
const [keys, setKeys] = useState<ApiKeyRecord[]>([]);
|
||||
const [name, setName] = useState('');
|
||||
const [expiresInDays, setExpiresInDays] = useState(90);
|
||||
const [createdKey, setCreatedKey] = useState<ApiKeyRecord | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const response: any = await apiClient.get('/api/v1/api-keys');
|
||||
const rawList = Array.isArray(response) ? response : (Array.isArray(response?.data) ? response.data : []);
|
||||
setKeys(rawList);
|
||||
} catch (cause: any) {
|
||||
const msg = typeof cause?.response?.data?.message === 'string'
|
||||
? cause.response.data.message
|
||||
: (typeof cause?.message === 'string' ? cause.message : 'Could not load API keys.');
|
||||
setError(msg);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSupportMode) {
|
||||
load();
|
||||
}
|
||||
}, [isSupportMode]);
|
||||
|
||||
if (isSupportMode) {
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-5 text-sm text-amber-200">
|
||||
<div className="flex items-center gap-2 font-semibold"><ShieldCheck className="h-5 w-5 text-amber-400" />API-key management is protected in Support Mode</div>
|
||||
<p className="mt-2 text-muted-foreground">Platform support can inspect tenant data for troubleshooting, but cannot create, view, or revoke credentials on the tenant's behalf.</p>
|
||||
<p className="mt-2 text-muted-foreground">A real tenant administrator must sign in to this workspace and open <strong>Integration Hub → API Access</strong> to manage product API keys.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const createKey = async () => {
|
||||
setBusy(true);
|
||||
setError('');
|
||||
try {
|
||||
const response: any = await apiClient.post('/api/v1/api-keys', { name, expiresInDays });
|
||||
const record = response?.data || response;
|
||||
if (record && typeof record === 'object' && !Array.isArray(record)) {
|
||||
setCreatedKey(record);
|
||||
}
|
||||
setName('');
|
||||
setCopied(false);
|
||||
await load();
|
||||
} catch (cause: any) {
|
||||
const msg = typeof cause?.response?.data?.message === 'string'
|
||||
? cause.response.data.message
|
||||
: (typeof cause?.message === 'string' ? cause.message : 'Could not create API key.');
|
||||
setError(msg);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = (text: string) => {
|
||||
if (!text) return;
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 3000);
|
||||
};
|
||||
|
||||
const revoke = async (id: string) => {
|
||||
if (!window.confirm('Revoke this API key? Applications using it will immediately lose access.')) return;
|
||||
try {
|
||||
await apiClient.delete('/api/v1/api-keys/' + id);
|
||||
await load();
|
||||
} catch (cause: any) {
|
||||
const msg = typeof cause?.response?.data?.message === 'string'
|
||||
? cause.response.data.message
|
||||
: (typeof cause?.message === 'string' ? cause.message : 'Could not revoke API key.');
|
||||
setError(msg);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Information Banner */}
|
||||
<div className="rounded-xl border border-blue-500/20 bg-blue-500/10 p-4 text-sm text-blue-300">
|
||||
<div className="flex items-center gap-2 font-semibold text-blue-200">
|
||||
<ShieldCheck className="h-4 w-4 text-blue-400" />
|
||||
What this key can do
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-blue-300/80 leading-relaxed">
|
||||
Keys generated here grant read-only access to your tenant catalog via <code>GET /api/v1/external/products</code>. They are strictly isolated to your tenant data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Creation Form */}
|
||||
<div className="rounded-xl border border-border/60 bg-card p-5 shadow-sm">
|
||||
<h3 className="font-semibold text-foreground text-sm flex items-center gap-2">
|
||||
<Key className="h-4 w-4 text-primary" />
|
||||
Generate New API Key
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Create secure tokens for external integrations like Inventory, Mobile Apps, or Storefronts.</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-3">
|
||||
<input
|
||||
aria-label="API key name"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g., Inventory Sync Integration"
|
||||
maxLength={120}
|
||||
className="min-w-[280px] flex-1 rounded-lg border border-border/80 bg-background px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/40"
|
||||
/>
|
||||
<select
|
||||
aria-label="API key expiry"
|
||||
value={expiresInDays}
|
||||
onChange={(event) => setExpiresInDays(Number(event.target.value))}
|
||||
className="rounded-lg border border-border/80 bg-background px-3.5 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40"
|
||||
>
|
||||
<option value={30}>Expires in 30 days</option>
|
||||
<option value={90}>Expires in 90 days</option>
|
||||
<option value={180}>Expires in 180 days</option>
|
||||
<option value={365}>Expires in 1 year</option>
|
||||
</select>
|
||||
<button
|
||||
disabled={busy || !name.trim()}
|
||||
onClick={createKey}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-primary hover:bg-primary/90 px-4 py-2 text-sm font-medium text-white transition-all disabled:opacity-50 shadow-sm"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Generate Key
|
||||
</button>
|
||||
</div>
|
||||
{error ? <p className="mt-2 text-xs font-medium text-red-400">{String(error)}</p> : null}
|
||||
</div>
|
||||
|
||||
{/* Pop-up / Reveal Card when key is created */}
|
||||
{createdKey && typeof createdKey.apiKey === 'string' && (
|
||||
<div className="rounded-xl border border-amber-500/40 bg-amber-950/30 p-5 backdrop-blur-sm shadow-md animate-in fade-in duration-200">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<AlertTriangle className="h-5 w-5 text-amber-400 shrink-0 mt-0.5" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-semibold text-amber-200">Save this API key immediately</h4>
|
||||
<p className="text-xs text-amber-300/80 mt-0.5">For security reasons, this secret key will <strong>never be shown again</strong>. Copy and store it securely.</p>
|
||||
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<div className="flex-1 min-w-0 overflow-x-auto rounded-lg border border-amber-500/30 bg-black/40 px-3.5 py-2.5 text-xs font-mono text-amber-100 selection:bg-amber-500 selection:text-black">
|
||||
{createdKey.apiKey}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCopy(createdKey.apiKey!)}
|
||||
className={copied ? 'inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2.5 text-xs font-medium transition-all shadow-sm shrink-0 bg-emerald-600 text-white' : 'inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2.5 text-xs font-medium transition-all shadow-sm shrink-0 bg-amber-500 hover:bg-amber-400 text-black'}
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy Key
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex justify-end">
|
||||
<button
|
||||
onClick={() => setCreatedKey(null)}
|
||||
className="text-xs font-medium text-amber-400 hover:text-amber-300 underline underline-offset-2 transition-colors"
|
||||
>
|
||||
I have saved it securely (Dismiss)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active Keys Table */}
|
||||
<div className="overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm">
|
||||
<div className="px-5 py-3.5 border-b border-border/60 bg-muted/30 flex items-center justify-between">
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Active API Keys</h4>
|
||||
<span className="text-xs text-muted-foreground">{keys.length} key{keys.length === 1 ? '' : 's'}</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-muted/40 text-xs font-medium text-muted-foreground border-b border-border/60">
|
||||
<tr>
|
||||
<th className="py-3 px-5">Key Name</th>
|
||||
<th className="py-3 px-5">Key Prefix</th>
|
||||
<th className="py-3 px-5">Scope</th>
|
||||
<th className="py-3 px-5">Expires</th>
|
||||
<th className="py-3 px-5">Last Used</th>
|
||||
<th className="py-3 px-5">Status</th>
|
||||
<th className="py-3 px-5 text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/40">
|
||||
{keys.map((key) => (
|
||||
<tr key={key.id} className="hover:bg-muted/20 transition-colors">
|
||||
<td className="py-3 px-5 font-medium text-foreground">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<KeyRound className="h-3.5 w-3.5 text-primary" />
|
||||
{String(key.name || '')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-5 font-mono text-xs text-muted-foreground">
|
||||
<span className="bg-muted/50 px-2 py-0.5 rounded border border-border/40">
|
||||
{String(key.prefix || '')}…
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-5 text-xs text-muted-foreground">
|
||||
<span className="bg-primary/10 text-primary px-2 py-0.5 rounded-full font-medium">
|
||||
products:read
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-5 text-xs text-muted-foreground">
|
||||
{key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : '—'}
|
||||
</td>
|
||||
<td className="py-3 px-5 text-xs text-muted-foreground">
|
||||
{key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : 'Never'}
|
||||
</td>
|
||||
<td className="py-3 px-5 text-xs">
|
||||
<span className="inline-flex items-center gap-1.5 font-medium text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full capitalize">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
||||
{String(key.status || 'active')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-5 text-right">
|
||||
{key.status === 'active' && (
|
||||
<button
|
||||
title="Revoke key"
|
||||
aria-label={'Revoke ' + String(key.name || '')}
|
||||
onClick={() => revoke(key.id)}
|
||||
className="inline-flex items-center justify-center h-8 w-8 rounded-lg text-muted-foreground hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{keys.length === 0 && (
|
||||
<div className="p-8 text-center">
|
||||
<KeyRound className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">No API keys generated yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Code Snippet */}
|
||||
<div className="rounded-xl border border-border/60 bg-card p-5 text-sm shadow-sm">
|
||||
<h4 className="font-semibold text-foreground text-xs uppercase tracking-wider text-muted-foreground mb-2">Example Usage</h4>
|
||||
<pre className="overflow-x-auto rounded-lg bg-black/60 border border-border/40 p-3.5 text-xs font-mono text-emerald-400">
|
||||
curl http://localhost:5002/api/v1/external/products -H "X-API-Key: pim_live_your_key_here"
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,115 +1,19 @@
|
||||
import { useState } from "react";
|
||||
import { Download, Filter, Clock } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Clock, RefreshCw } from "lucide-react";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { SearchBar } from "../../../components/customs/SearchBar";
|
||||
|
||||
const MOCK_LOGS = [
|
||||
{
|
||||
time: "2025-06-09 14:35",
|
||||
event: "Started Sync",
|
||||
integration: "Amazon India",
|
||||
description: "Manual full catalogue sync initiated — 4,240 products by Sarah Chen",
|
||||
user: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
time: "2025-06-09 12:00",
|
||||
event: "Scheduled Sync",
|
||||
integration: "Retail POS Network",
|
||||
description: "Daily catalogue sync triggered by schedule",
|
||||
user: "System"
|
||||
},
|
||||
{
|
||||
time: "2025-06-08 16:22",
|
||||
event: "Updated Credentials",
|
||||
integration: "Shopify Main Store",
|
||||
description: "Access token rotated. Previous token expires 2025-07-01",
|
||||
user: "Michael Torres"
|
||||
},
|
||||
{
|
||||
time: "2025-06-08 09:00",
|
||||
event: "Created Integration",
|
||||
integration: "WooCommerce EU",
|
||||
description: "New integration created in staging environment",
|
||||
user: "Admin User"
|
||||
},
|
||||
];
|
||||
import { channelsApi } from "../../channels/api/channels.api";
|
||||
import { notify } from "../../../services/toast";
|
||||
|
||||
export default function AuditLogsList() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// Optional: Filter logs based on search
|
||||
const filteredLogs = MOCK_LOGS.filter(log =>
|
||||
log.event.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
log.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
log.integration.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-6">
|
||||
{/* SearchBar + Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<SearchBar
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder="Search logs..."
|
||||
className="flex-1"
|
||||
/>
|
||||
|
||||
<Button variant="outline" className="border-border bg-surface px-4">
|
||||
<Filter className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="outline" className="border-border bg-surface px-4">
|
||||
<Download className="w-4 h-4" /> Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Vertical Timeline */}
|
||||
<div className="bg-surface rounded-2xl border border-border shadow-sm overflow-hidden">
|
||||
<div className="divide-y divide-border">
|
||||
{filteredLogs.length > 0 ? (
|
||||
filteredLogs.map((log, index) => (
|
||||
<div key={index} className="p-6 flex gap-5 hover:bg-background transition-colors group">
|
||||
{/* Purple Dot */}
|
||||
<div className="mt-1.5 w-3 h-3 rounded-full bg-primary flex-shrink-0 ring-4 ring-primary/10" />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="font-semibold text-foreground text-[15px]">{log.event}</div>
|
||||
<span className="px-3 py-0.5 text-xs font-medium bg-primary-light text-primary-dark rounded-full">
|
||||
{log.integration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-sm text-muted-foreground leading-relaxed">
|
||||
{log.description}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
{log.time}
|
||||
</div>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span>by {log.user}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-12 text-center text-muted-foreground">
|
||||
No matching logs found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-5 border-t border-border bg-background text-center">
|
||||
<button className="text-sm text-primary font-medium hover:text-primary-dark flex items-center gap-1.5 mx-auto">
|
||||
Load More Activity
|
||||
<span className="text-base leading-none">↓</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
const [logs, setLogs] = useState<any[]>([]); const [search, setSearch] = useState(""); const [loading, setLoading] = useState(false);
|
||||
const load = useCallback(async () => { setLoading(true); try { setLogs(await channelsApi.getOperationsAudit()); } catch { notify.error("Unable to load operations audit"); } finally { setLoading(false); } }, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
const shown = logs.filter(log => `${log.action} ${log.resource} ${JSON.stringify(log.details || {})}`.toLowerCase().includes(search.toLowerCase()));
|
||||
return <div className="space-y-4">
|
||||
<div className="flex gap-3"><SearchBar value={search} onChange={setSearch} placeholder="Search audit events..." className="flex-1"/><Button variant="outline" onClick={load} disabled={loading}><RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`}/>Refresh</Button></div>
|
||||
<div className="border border-border rounded-xl divide-y divide-border bg-surface">
|
||||
{shown.length ? shown.map(log => <div key={log.id} className="p-5 flex gap-4"><div className="mt-1.5 w-2.5 h-2.5 rounded-full bg-primary shrink-0"/><div><div className="font-semibold">{log.action}</div><div className="text-sm text-muted-foreground mt-1">{log.resource}{log.resource_id ? ` · ${log.resource_id}` : ""}</div><div className="flex items-center gap-1 text-xs text-muted-foreground mt-2"><Clock className="w-3.5 h-3.5"/>{new Date(log.createdAt || log.created_at).toLocaleString()}</div></div></div>) : <div className="p-10 text-center text-sm text-muted-foreground">No tenant-owned channel or integration audit events found.</div>}
|
||||
</div>
|
||||
);
|
||||
</div>;
|
||||
}
|
||||
|
||||
@@ -1,171 +1,23 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { DataTable } from "../../../components/customs/DataTable";
|
||||
import { StatusBadge, type BadgeVariant } from "../../../components/customs/StatusBadge";
|
||||
|
||||
const MOCK_ERRORS = [
|
||||
{
|
||||
id: "1",
|
||||
product: "Samsung Galaxy S25 Ultra",
|
||||
variant: "256GB Black",
|
||||
sku: "P-8841",
|
||||
integration: "Amazon India",
|
||||
errorType: "Validation Error",
|
||||
message: "Required attribute 'bullet_points' missing for Amazon listing compliance",
|
||||
date: "2025-06-09 14:32",
|
||||
severity: "High",
|
||||
status: "Open"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
product: "Sony WH-1000XM5",
|
||||
variant: "Black",
|
||||
sku: "P-6621",
|
||||
integration: "Amazon India",
|
||||
errorType: "Image Rejected",
|
||||
message: "Primary image does not meet Amazon image guidelines (minimum 1000px)",
|
||||
date: "2025-06-09 14:28",
|
||||
severity: "High",
|
||||
status: "Open"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
product: "Nike Air Max 270",
|
||||
variant: "UK 8 White",
|
||||
sku: "P-4412",
|
||||
integration: "Shopify Main Store",
|
||||
errorType: "SKU Conflict",
|
||||
message: "SKU 'NAM270-W8' already exists in Shopify with different product ID",
|
||||
date: "2025-06-09 14:01",
|
||||
severity: "Critical",
|
||||
status: "Retrying"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
product: "Adidas Ultraboost 24",
|
||||
variant: "UK 9 Blue",
|
||||
sku: "P-4520",
|
||||
integration: "Shopify Main Store",
|
||||
errorType: "Rate Limit",
|
||||
message: "Shopify API rate limit exceeded (40/s). Request queued for retry.",
|
||||
date: "2025-06-09 13:58",
|
||||
severity: "Medium",
|
||||
status: "Resolved"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
product: "WMS Inventory Batch",
|
||||
variant: "-",
|
||||
sku: "BATCH-284",
|
||||
integration: "Warehouse WMS",
|
||||
errorType: "Connection Timeout",
|
||||
message: "Connection to warehouse endpoint timed out after 30s. Host: wms.internal:8080",
|
||||
date: "2025-06-08 08:03",
|
||||
severity: "Critical",
|
||||
status: "Open"
|
||||
},
|
||||
];
|
||||
import { StatusBadge } from "../../../components/customs/StatusBadge";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { channelsApi } from "../../channels/api/channels.api";
|
||||
import { notify } from "../../../services/toast";
|
||||
|
||||
export default function ErrorCenterList() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [items, setItems] = useState<any[]>([]); const [loading, setLoading] = useState(false);
|
||||
const load = useCallback(async () => { setLoading(true); try { setItems(await channelsApi.getErrors()); } catch { notify.error("Unable to load syndication errors"); } finally { setLoading(false); } }, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
const columns = [
|
||||
{
|
||||
key: "product",
|
||||
label: "PRODUCT",
|
||||
render: (_: any, row: any) => (
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{row.product}</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">{row.sku}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "variant", label: "VARIANT" },
|
||||
{ key: "integration", label: "INTEGRATION" },
|
||||
{
|
||||
key: "errorType",
|
||||
label: "ERROR TYPE",
|
||||
render: (val: string) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-500" />
|
||||
<span className="font-medium text-foreground">{val}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "message",
|
||||
label: "MESSAGE",
|
||||
render: (val: string) => <div className="text-sm text-muted-foreground line-clamp-2 max-w-md">{val}</div>
|
||||
},
|
||||
{ key: "date", label: "DATE" },
|
||||
{
|
||||
key: "severity",
|
||||
label: "SEVERITY",
|
||||
render: (val: string) => {
|
||||
let variant: BadgeVariant = "neutral";
|
||||
if (val === "Critical") variant = "error";
|
||||
if (val === "High") variant = "warning";
|
||||
if (val === "Medium") variant = "approval";
|
||||
|
||||
return <StatusBadge status={variant} label={val} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "STATUS",
|
||||
render: (val: string) => {
|
||||
let variant: BadgeVariant = "neutral";
|
||||
if (val === "Open") variant = "error"; // red
|
||||
if (val === "Retrying") variant = "warning"; // orange
|
||||
if (val === "Resolved") variant = "success"; // green
|
||||
|
||||
return <StatusBadge status={variant} label={val} />;
|
||||
},
|
||||
},
|
||||
{ key: "product", label: "PRODUCT", render: (_: any, r: any) => <div><div className="font-medium">{r.product?.name || "Unknown product"}</div><div className="text-xs text-muted-foreground">{r.product?.code || r.product_id}</div></div> },
|
||||
{ key: "channel", label: "CHANNEL", render: (_: any, r: any) => r.channel?.name || "—" },
|
||||
{ key: "error_code", label: "ERROR", render: (v: string) => <span className="font-mono text-xs">{v || "UNKNOWN"}</span> },
|
||||
{ key: "error_message", label: "MESSAGE" },
|
||||
{ key: "attempt_count", label: "ATTEMPTS" },
|
||||
{ key: "status", label: "STATUS", render: (v: string) => <StatusBadge status={v === "retrying" ? "warning" : "error"} label={v} /> },
|
||||
{ key: "updated_at", label: "UPDATED", render: (v: string) => new Date(v).toLocaleString() }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Summary Banner */}
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-center gap-4">
|
||||
<div className="p-3 bg-surface rounded-lg">
|
||||
<AlertTriangle className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-amber-900">5 Active Errors • 3 require immediate attention</div>
|
||||
<div className="text-sm text-amber-700 mt-0.5">Review and resolve to maintain sync health</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={MOCK_ERRORS}
|
||||
actionConfig={{
|
||||
onView: (row) => navigate(`${row.id}/view`),
|
||||
}}
|
||||
searchPlaceholder="Search errors..."
|
||||
toolbarLeft={
|
||||
<div className="flex gap-2">
|
||||
<select className="h-9 px-3 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
<option>All Integrations</option>
|
||||
<option>Amazon India</option>
|
||||
<option>Shopify Main Store</option>
|
||||
</select>
|
||||
<select className="h-9 px-3 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
<option>All Severities</option>
|
||||
<option>Critical</option>
|
||||
<option>High</option>
|
||||
<option>Medium</option>
|
||||
</select>
|
||||
<select className="h-9 px-3 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
<option>All Statuses</option>
|
||||
<option>Open</option>
|
||||
<option>Retrying</option>
|
||||
<option>Resolved</option>
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return <DataTable columns={columns} data={items} rowIdKey="id" resultLabel="errors" searchPlaceholder="Search errors..." toolbarLeft={<Button variant="outline" onClick={load} disabled={loading}><RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`}/>Refresh Errors</Button>} />;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Layers, RefreshCw, Save, Check, Plus, ArrowRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Layers, RefreshCw, Save, Plus, ArrowRight } from 'lucide-react';
|
||||
import { notify } from '../../../services/toast/index';
|
||||
|
||||
interface MappingRow {
|
||||
@@ -77,7 +77,7 @@ export default function FieldMappingsTab() {
|
||||
<tr className="bg-background border-b border-border text-muted-foreground font-semibold">
|
||||
<th className="py-3 px-4">Canonical Source Path (PIM)</th>
|
||||
<th className="py-3 px-2 text-center">Transform</th>
|
||||
<th className="py-3 px-4">Channel Target Path (Shopify)</th>
|
||||
<th className="py-3 px-4">Destination Field / JSON Path</th>
|
||||
<th className="py-3 px-4">Transformation Type</th>
|
||||
<th className="py-3 px-4">Default Value</th>
|
||||
<th className="py-3 px-4 text-center">Required</th>
|
||||
|
||||
@@ -100,7 +100,7 @@ export const IntegrationTemplateGallery: React.FC<IntegrationTemplateGalleryProp
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Custom API Card */}
|
||||
{/* Outbound Custom API Card */}
|
||||
<div className="bg-surface border border-border hover:border-primary/50 rounded-xl p-4 transition-all shadow-2xs group flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
@@ -111,9 +111,9 @@ export const IntegrationTemplateGallery: React.FC<IntegrationTemplateGalleryProp
|
||||
Custom Wizard
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-bold text-foreground text-sm group-hover:text-primary transition-colors">Custom API / Webhook</h3>
|
||||
<h3 className="font-bold text-foreground text-sm group-hover:text-primary transition-colors">External API / Webhook</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
Configure multi-step generic REST/GraphQL endpoints with custom headers and transformations.
|
||||
Send PIM products outward to a website or application endpoint using its credentials.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -121,7 +121,7 @@ export const IntegrationTemplateGallery: React.FC<IntegrationTemplateGalleryProp
|
||||
onClick={onSelectCustomApi}
|
||||
className="mt-4 w-full py-2 px-3 bg-surface border border-border hover:bg-background text-foreground rounded-lg text-xs font-semibold shadow-2xs flex items-center justify-center gap-1.5 cursor-pointer transition-colors"
|
||||
>
|
||||
Custom Wizard <ArrowRight className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
Configure Outbound API <ArrowRight className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,169 +1,25 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Plus, Download } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { DataTable } from "../../../components/customs/DataTable";
|
||||
import { StatusBadge } from "../../../components/customs/StatusBadge";
|
||||
import { ConfirmationModal } from "../../../components/modals/ConfirmationModal";
|
||||
|
||||
const MOCK_RULES = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Electronics to Amazon",
|
||||
integration: "Amazon India",
|
||||
family: "Consumer Electronics",
|
||||
category: "All Categories",
|
||||
workflowState: "Approved",
|
||||
products: 2840,
|
||||
status: "active",
|
||||
lastEvaluated: "2025-06-09 14:32"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Fashion to Shopify",
|
||||
integration: "Shopify Main Store",
|
||||
family: "Apparel & Fashion",
|
||||
category: "Clothing",
|
||||
workflowState: "Published",
|
||||
products: 5120,
|
||||
status: "active",
|
||||
lastEvaluated: "2025-06-09 14:00"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Retail Products to POS",
|
||||
integration: "Retail POS Network",
|
||||
family: "All Families",
|
||||
category: "All Categories",
|
||||
workflowState: "Approved",
|
||||
products: 3240,
|
||||
status: "active",
|
||||
lastEvaluated: "2025-06-09 12:00"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Warehouse Items to WMS",
|
||||
integration: "Warehouse WMS",
|
||||
family: "All Families",
|
||||
category: "All Categories",
|
||||
workflowState: "Any",
|
||||
products: 0,
|
||||
status: "inactive",
|
||||
lastEvaluated: "2025-06-08 08:00"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "UAE Electronics",
|
||||
integration: "Amazon UAE",
|
||||
family: "Consumer Electronics",
|
||||
category: "Smartphones",
|
||||
workflowState: "Published",
|
||||
products: 840,
|
||||
status: "active",
|
||||
lastEvaluated: "2025-06-09 13:15"
|
||||
},
|
||||
];
|
||||
import { channelsApi } from "../../channels/api/channels.api";
|
||||
import { notify } from "../../../services/toast";
|
||||
|
||||
export default function PublishingRulesList() {
|
||||
const navigate = useNavigate();
|
||||
const [deleteModal, setDeleteModal] = useState({ isOpen: false, id: "", name: "" });
|
||||
|
||||
const [rows, setRows] = useState<any[]>([]); const [loading, setLoading] = useState(false);
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const channels = await channelsApi.getAll();
|
||||
const mappings = await Promise.all(channels.map(async channel => ({ channel, mappings: await channelsApi.getMappings(channel.id) })));
|
||||
setRows(mappings.map(({ channel, mappings }) => ({ id: channel.id, name: channel.name, code: channel.code, status: channel.status, mappedFields: mappings.length, requiredFields: mappings.filter((m:any) => m.is_required).length, transformations: [...new Set(mappings.map((m:any) => m.transformation_rule).filter((v:string) => v && v !== 'none'))].join(', ') || 'None' })));
|
||||
} catch { notify.error("Unable to load channel mapping rules"); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
const columns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "RULE NAME",
|
||||
sortable: true,
|
||||
render: (val: string, row: any) => (
|
||||
<div>
|
||||
<div className="font-semibold text-foreground">{val}</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5">{row.integration}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "family", label: "FAMILY" },
|
||||
{ key: "category", label: "CATEGORY" },
|
||||
{
|
||||
key: "workflowState",
|
||||
label: "WORKFLOW STATE",
|
||||
render: (val: string) => {
|
||||
let variant: any = "neutral";
|
||||
let label = val;
|
||||
|
||||
if (val === "Approved") variant = "success";
|
||||
if (val === "Published") variant = "published";
|
||||
if (val === "Any") variant = "warning";
|
||||
|
||||
return <StatusBadge status={variant} label={label} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "products",
|
||||
label: "PRODUCTS",
|
||||
render: (val: number) => <span className="font-semibold text-foreground">{val.toLocaleString()}</span>
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "STATUS",
|
||||
render: (val: string) => {
|
||||
const variant = val === "active" ? "active" : "error"; // active = green, inactive = red
|
||||
const label = val === "active" ? "Active" : "Inactive";
|
||||
return <StatusBadge status={variant} label={label} />;
|
||||
},
|
||||
},
|
||||
{ key: "lastEvaluated", label: "LAST EVALUATED" },
|
||||
{ key: "name", label: "CHANNEL" }, { key: "code", label: "CODE" }, { key: "mappedFields", label: "MAPPED FIELDS" },
|
||||
{ key: "requiredFields", label: "REQUIRED" }, { key: "transformations", label: "TRANSFORMATIONS" }, { key: "status", label: "STATUS" }
|
||||
];
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
console.log("Deleted rule:", deleteModal.id);
|
||||
setDeleteModal({ isOpen: false, id: "", name: "" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={MOCK_RULES}
|
||||
actionConfig={{
|
||||
onView: (row) => navigate(`${row.id}/view`),
|
||||
onEdit: (row) => navigate(`${row.id}/edit`),
|
||||
onDelete: (row) => setDeleteModal({ isOpen: true, id: row.id, name: row.name })
|
||||
}}
|
||||
searchPlaceholder="Search rules..."
|
||||
toolbarLeft={
|
||||
<div className="flex gap-2">
|
||||
<select className="h-9 px-3 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary bg-surface">
|
||||
<option>All Integrations</option>
|
||||
<option>Amazon India</option>
|
||||
<option>Shopify Main Store</option>
|
||||
<option>Warehouse WMS</option>
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
toolbarRight={
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export Rules
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-primary hover:bg-primary-hover text-white"
|
||||
onClick={() => navigate("/integrations/new-rule")}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create New Rule
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<ConfirmationModal
|
||||
isOpen={deleteModal.isOpen}
|
||||
title="Delete Publishing Rule"
|
||||
description="Are you sure you want to delete this publishing rule? This action cannot be undone."
|
||||
itemName={deleteModal.name}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => setDeleteModal({ isOpen: false, id: "", name: "" })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return <DataTable columns={columns} data={rows} rowIdKey="id" resultLabel="channel rule sets" searchPlaceholder="Search channel rules..." toolbarLeft={<Button variant="outline" onClick={load} disabled={loading}><RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`}/>Refresh Rules</Button>} />;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, ShoppingCart, Zap, Key, Globe, Loader2, CheckCircle2, AlertCircle, Eye, EyeOff, ExternalLink, ArrowLeft } from 'lucide-react';
|
||||
import { X, ShoppingCart, Zap, Globe, Loader2, CheckCircle2, AlertCircle, Eye, EyeOff, ExternalLink, ArrowLeft } from 'lucide-react';
|
||||
import { useIntegration } from '../hook/useIntegration';
|
||||
import { integrationsService } from '../services/integrations.service';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
@@ -77,7 +77,7 @@ export const ShopifyTemplateModal: React.FC<ShopifyTemplateModalProps> = ({
|
||||
const created = await createItem({
|
||||
name,
|
||||
channel: 'shopify',
|
||||
integration_type: 'ecommerce',
|
||||
integrationType: 'shopify',
|
||||
sync_mode: syncMode,
|
||||
sync_frequency: syncMode === 'auto' ? 'realtime' : 'manual',
|
||||
status: 'pending'
|
||||
|
||||
@@ -1,27 +1,10 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { RefreshCw, Download, Layers } from "lucide-react";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { DataTable } from "../../../components/customs/DataTable";
|
||||
import { StatusBadge, type BadgeVariant } from "../../../components/customs/StatusBadge";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { useIntegration } from "../hook/useIntegration";
|
||||
import { SyncJobStatusModal } from "./SyncJobStatusModal";
|
||||
import type { SyncJob } from "../types/integrations.types";
|
||||
|
||||
const MOCK_JOBS = [
|
||||
{
|
||||
id: "JOB-2892",
|
||||
integration: "Shopify Main Store",
|
||||
type: "Realtime Sync",
|
||||
records: "128",
|
||||
success: "128",
|
||||
failed: "0",
|
||||
status: "Completed",
|
||||
started: "2026-08-30 04:30",
|
||||
completed: "2026-08-30 04:31",
|
||||
duration: "1m 02s",
|
||||
triggered: "Outbox Trigger"
|
||||
}
|
||||
];
|
||||
|
||||
export default function SyncJobsList() {
|
||||
const [jobs, setJobs] = useState<any[]>([]);
|
||||
|
||||
@@ -38,8 +38,10 @@ import PublishingRulesList from "../components/PublishingRulesTab";
|
||||
import SyncJobsList from "../components/SyncJobsTab";
|
||||
import ErrorCenterList from "../components/ErrorCenterTab";
|
||||
import AuditLogsList from "../components/AuditLogsTab";
|
||||
import ApiAccessTab from "../components/ApiAccessTab";
|
||||
|
||||
const INTEGRATION_META: Record<string, { label: string; icon: any; color: string; bg: string }> = {
|
||||
shopify: { label: "Shopify", icon: ShoppingCart, color: "text-green-600", bg: "bg-green-50" },
|
||||
ecommerce: { label: "E-Commerce", icon: ShoppingCart, color: "text-blue-600", bg: "bg-blue-50" },
|
||||
marketplace: { label: "Marketplace", icon: ShoppingBag, color: "text-orange-600", bg: "bg-orange-50" },
|
||||
erp: { label: "ERP", icon: Server, color: "text-red-600", bg: "bg-red-50" },
|
||||
@@ -54,7 +56,7 @@ const INTEGRATION_META: Record<string, { label: string; icon: any; color: string
|
||||
export default function IntegrationList() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [activeTab, setActiveTab] = useState<"Connections" | "Field Mappings" | "Publishing Rules" | "Sync Jobs" | "Error Center" | "Audit & Logs">("Connections");
|
||||
const [activeTab, setActiveTab] = useState<"Connections" | "Field Mappings" | "Publishing Rules" | "Sync Jobs" | "Error Center" | "Audit & Logs" | "API Access">("Connections");
|
||||
const [statusFilter, setStatusFilter] = useState("All Status");
|
||||
const [typeFilter, setTypeFilter] = useState("All Types");
|
||||
|
||||
@@ -126,8 +128,8 @@ export default function IntegrationList() {
|
||||
label: "Integration Name",
|
||||
sortable: true,
|
||||
render: (_: any, row: Integration) => {
|
||||
const metaType = row.integrationType || 'ecommerce';
|
||||
const meta = INTEGRATION_META[metaType] || INTEGRATION_META.ecommerce;
|
||||
const metaType = row.integrationType || 'custom_api';
|
||||
const meta = INTEGRATION_META[metaType] || INTEGRATION_META.custom_api;
|
||||
const Icon = meta.icon;
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -147,7 +149,7 @@ export default function IntegrationList() {
|
||||
label: "Channel",
|
||||
render: (val: string) => {
|
||||
const chan = channels.find(c => c.code === val || c.id === val);
|
||||
return <span className="font-semibold text-xs uppercase px-2 py-0.5 rounded bg-surface border border-border">{chan ? chan.name : val || 'Shopify'}</span>;
|
||||
return <span className="font-semibold text-xs uppercase px-2 py-0.5 rounded bg-surface border border-border">{chan ? chan.name : val || 'Not assigned'}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -201,8 +203,10 @@ export default function IntegrationList() {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCredentialModal({ isOpen: true, integrationId: row.id, name: row.name })}
|
||||
title="Configure Credentials"
|
||||
onClick={() => row.integrationType === 'shopify'
|
||||
? setCredentialModal({ isOpen: true, integrationId: row.id, name: row.name })
|
||||
: navigate(`${row.id}/edit`)}
|
||||
title={row.integrationType === 'shopify' ? "Configure Shopify Credentials" : "Configure API Endpoint & Credentials"}
|
||||
className="p-1.5 rounded-lg border border-border bg-surface hover:bg-background text-foreground cursor-pointer"
|
||||
>
|
||||
<Key className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
@@ -243,6 +247,9 @@ export default function IntegrationList() {
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setActiveTab("API Access")}>
|
||||
<Key className="w-4 h-4 mr-2" />Generate PIM API Key
|
||||
</Button>
|
||||
<Button onClick={() => setShopifyModalOpen(true)} className="bg-emerald-600 hover:bg-emerald-700 text-white">
|
||||
<Plus className="w-4 h-4 mr-2" />Setup Shopify
|
||||
</Button>
|
||||
@@ -251,9 +258,9 @@ export default function IntegrationList() {
|
||||
/>
|
||||
|
||||
{/* Quick Pre-Built Template Gallery */}
|
||||
<IntegrationTemplateGallery
|
||||
onSelectShopify={() => setShopifyModalOpen(true)}
|
||||
onSelectCustomApi={() => navigate("new")}
|
||||
<IntegrationTemplateGallery
|
||||
onSelectShopify={() => setShopifyModalOpen(true)}
|
||||
onSelectCustomApi={() => navigate("new?type=custom_api")}
|
||||
/>
|
||||
|
||||
{/* Stats Cards */}
|
||||
@@ -297,7 +304,8 @@ export default function IntegrationList() {
|
||||
{ id: "Publishing Rules", count: 1 },
|
||||
{ id: "Sync Jobs", count: null },
|
||||
{ id: "Error Center", count: 0 },
|
||||
{ id: "Audit & Logs", count: null }
|
||||
{ id: "Audit & Logs", count: null },
|
||||
{ id: "API Access", count: null }
|
||||
].map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
@@ -345,6 +353,15 @@ export default function IntegrationList() {
|
||||
<option>Pending</option>
|
||||
<option>Disconnected</option>
|
||||
</select>
|
||||
<select
|
||||
className="h-9 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-foreground bg-surface"
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
>
|
||||
<option>All Types</option>
|
||||
<option value="custom_api">Custom API</option>
|
||||
<option value="shopify">Shopify</option>
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
@@ -355,6 +372,7 @@ export default function IntegrationList() {
|
||||
{activeTab === "Sync Jobs" && <SyncJobsList />}
|
||||
{activeTab === "Error Center" && <ErrorCenterList />}
|
||||
{activeTab === "Audit & Logs" && <AuditLogsList />}
|
||||
{activeTab === "API Access" && <ApiAccessTab />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate, useParams, useLocation, useSearchParams } from "react-router-dom";
|
||||
import { useFormik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import {
|
||||
Zap, ShoppingCart, ShoppingBag, Server, Warehouse, Check,
|
||||
Store, Globe, Smartphone, Monitor, Code2, Eye, EyeOff, Settings2,
|
||||
Calendar, Clock, Wifi, ChevronDown, Info
|
||||
Zap, ShoppingCart, Check, Code2, Eye, EyeOff, Settings2,
|
||||
Info
|
||||
} from "lucide-react";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { useIntegration } from "../hook/useIntegration";
|
||||
@@ -23,21 +22,13 @@ const STEPS = [
|
||||
];
|
||||
|
||||
const INTEGRATION_TYPES = [
|
||||
{ id: "ecommerce", label: "E-Commerce", sub: "Shopify, WooCommerce, Magento", icon: ShoppingCart },
|
||||
{ id: "marketplace", label: "Marketplace", sub: "Amazon, eBay, Flipkart, Noon", icon: ShoppingBag },
|
||||
{ id: "erp", label: "ERP", sub: "SAP, Oracle, Microsoft Dynamics", icon: Server },
|
||||
{ id: "wms", label: "WMS", sub: "Warehouse management systems", icon: Warehouse },
|
||||
{ id: "pos", label: "POS", sub: "Retail point-of-sale systems", icon: Store },
|
||||
{ id: "b2b_portal", label: "B2B Portal", sub: "B2B client storefronts and portals", icon: Globe },
|
||||
{ id: "mobile_app", label: "Mobile App", sub: "iOS/Android application platforms", icon: Smartphone },
|
||||
{ id: "website", label: "Website", sub: "Marketing and catalog websites", icon: Monitor },
|
||||
{ id: "custom_api", label: "Custom API", sub: "Any REST or GraphQL endpoint", icon: Code2 },
|
||||
{ id: "custom_api", label: "Generic REST API", sub: "Send mapped products to any HTTPS website or application", icon: Code2 },
|
||||
{ id: "shopify", label: "Shopify", sub: "Separate Shopify credential flow; publishing is the next phase", icon: ShoppingCart },
|
||||
];
|
||||
|
||||
function IntegrationSummary({ name, channel, channelName, type, environment, syncDirection, syncFrequency, disabled }: {
|
||||
function IntegrationSummary({ name, channel, channelName, type, environment, syncDirection, syncFrequency }: {
|
||||
name: string; channel: string; channelName: string; type: string;
|
||||
environment: string; syncDirection: string; syncFrequency: string;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="w-60 shrink-0">
|
||||
@@ -75,9 +66,9 @@ function IntegrationSummary({ name, channel, channelName, type, environment, syn
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 pt-5 border-t border-border">
|
||||
<button type="button" disabled={disabled} className="w-full flex items-center justify-center gap-2 py-2.5 px-4 border border-warning/20 bg-warning/10 text-warning rounded-lg text-sm font-medium hover:bg-warning/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<button type="button" disabled className="w-full flex items-center justify-center gap-2 py-2.5 px-4 border border-warning/20 bg-warning/10 text-warning rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<Zap className="w-4 h-4" />
|
||||
Test Connection
|
||||
Use Test Connection above
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,17 +87,27 @@ const integrationSchema = Yup.object({
|
||||
syncFrequency: Yup.string().required(),
|
||||
autoRetry: Yup.boolean(),
|
||||
retryAttempts: Yup.number().min(1).max(10),
|
||||
storeUrl: Yup.string().when('integrationType', { is: 'shopify', then: schema => schema.required('Permanent .myshopify.com domain is required').matches(/^https:\/\/[a-z0-9][a-z0-9-]*\.myshopify\.com\/?$/i, 'Use https://your-store.myshopify.com') }),
|
||||
clientId: Yup.string().when('integrationType', { is: 'shopify', then: schema => schema.required('Shopify Client ID is required') }),
|
||||
clientSecret: Yup.string(),
|
||||
endpoint: Yup.string().when('integrationType', { is: 'custom_api', then: schema => schema.required('Delivery endpoint is required').url('Enter a valid URL').matches(/^(https:\/\/|http:\/\/(localhost|127\.0\.0\.1))/i, 'Endpoints must use HTTPS (or http://localhost for local testing)') }),
|
||||
testEndpoint: Yup.string().url('Enter a valid URL').matches(/^(https:\/\/|http:\/\/(localhost|127\.0\.0\.1)|$)/i, 'Endpoints must use HTTPS (or http://localhost for local testing)'),
|
||||
customApiHeaderName: Yup.string().matches(/^[A-Za-z0-9-]*$/, 'Header names may contain letters, numbers and hyphens only'),
|
||||
});
|
||||
|
||||
export default function NewIntegration() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id?: string }>();
|
||||
const { pathname } = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const isView = pathname.includes('/view');
|
||||
const isEdit = Boolean(id) && !isView;
|
||||
const requestedType = searchParams.get('type') === 'shopify' ? 'shopify' : 'custom_api';
|
||||
const [activeStep, setActiveStep] = useState('general');
|
||||
const [showToken, setShowToken] = useState(false);
|
||||
const [loadingItem, setLoadingItem] = useState(false);
|
||||
const [testingConnection, setTestingConnection] = useState(false);
|
||||
const [connectionMessage, setConnectionMessage] = useState("");
|
||||
|
||||
const { createItem, updateItem } = useIntegration();
|
||||
const { items: channels, fetchItems: fetchChannels } = useChannel();
|
||||
@@ -119,17 +120,17 @@ export default function NewIntegration() {
|
||||
initialValues: {
|
||||
name: "",
|
||||
channel: "",
|
||||
integrationType: "ecommerce",
|
||||
integrationType: requestedType,
|
||||
environment: "production",
|
||||
status: "Connected",
|
||||
status: "Pending",
|
||||
description: "",
|
||||
storeUrl: "",
|
||||
accessToken: "",
|
||||
apiVersion: "2025-01",
|
||||
apiVersion: "2026-07",
|
||||
webhookSecret: "",
|
||||
shopIdentifier: "",
|
||||
syncDirection: "pim_to_channel",
|
||||
syncFrequency: "hourly",
|
||||
syncFrequency: "manual",
|
||||
autoRetry: true,
|
||||
retryAttempts: 3,
|
||||
|
||||
@@ -142,7 +143,7 @@ export default function NewIntegration() {
|
||||
clientSecret: "",
|
||||
|
||||
// ERP/WMS specific
|
||||
authMethod: "bearer",
|
||||
authMethod: "apikey",
|
||||
authToken: "",
|
||||
username: "",
|
||||
password: "",
|
||||
@@ -159,17 +160,35 @@ export default function NewIntegration() {
|
||||
gatewayUrl: "",
|
||||
|
||||
// Custom API specific
|
||||
customApiUrl: "",
|
||||
customApiHeaderKey: "",
|
||||
endpoint: "",
|
||||
testEndpoint: "",
|
||||
method: "POST",
|
||||
customApiHeaderName: "X-API-Key",
|
||||
customApiHeaderValue: "",
|
||||
},
|
||||
validationSchema: integrationSchema,
|
||||
onSubmit: async (values, { setSubmitting }) => {
|
||||
onSubmit: async (values, { setSubmitting, setFieldError }) => {
|
||||
if (!isEdit && values.integrationType === 'shopify' && !values.clientSecret) {
|
||||
setFieldError('clientSecret', 'Shopify Client Secret is required');
|
||||
setActiveStep('connection');
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
if (!isEdit && values.integrationType === 'custom_api' && values.authMethod === 'bearer' && !values.authToken) {
|
||||
setFieldError('authToken', 'Bearer token is required'); setActiveStep('connection'); setSubmitting(false); return;
|
||||
}
|
||||
if (!isEdit && values.integrationType === 'custom_api' && values.authMethod === 'apikey' && !values.customApiHeaderValue) {
|
||||
setFieldError('customApiHeaderValue', 'API key value is required'); setActiveStep('connection'); setSubmitting(false); return;
|
||||
}
|
||||
const submission = values.integrationType === 'custom_api' ? {
|
||||
...values,
|
||||
clearSecretFields: values.authMethod === 'none' ? ['authToken', 'customApiHeaderValue'] : values.authMethod === 'bearer' ? ['customApiHeaderValue'] : ['authToken']
|
||||
} : values;
|
||||
try {
|
||||
if (isEdit && id) {
|
||||
await updateItem(id, values as any);
|
||||
await updateItem(id, submission as any);
|
||||
} else {
|
||||
await createItem(values as any);
|
||||
await createItem(submission as any);
|
||||
}
|
||||
navigate("..");
|
||||
} catch {
|
||||
@@ -188,19 +207,19 @@ export default function NewIntegration() {
|
||||
formik.setValues({
|
||||
name: item.name,
|
||||
channel: item.channel,
|
||||
integrationType: item.integrationType,
|
||||
environment: item.environment,
|
||||
integrationType: item.integrationType || "custom_api",
|
||||
environment: item.environment || "production",
|
||||
status: item.status,
|
||||
description: item.description || "",
|
||||
storeUrl: item.storeUrl || "",
|
||||
accessToken: item.accessToken || "",
|
||||
apiVersion: item.apiVersion || "2025-01",
|
||||
apiVersion: item.apiVersion || "2026-07",
|
||||
webhookSecret: item.webhookSecret || "",
|
||||
shopIdentifier: item.shopIdentifier || "",
|
||||
syncDirection: item.syncDirection,
|
||||
syncFrequency: item.syncFrequency,
|
||||
autoRetry: item.autoRetry,
|
||||
retryAttempts: item.retryAttempts,
|
||||
syncDirection: item.syncDirection || "pim_to_channel",
|
||||
syncFrequency: item.syncFrequency || "manual",
|
||||
autoRetry: item.autoRetry ?? true,
|
||||
retryAttempts: item.retryAttempts ?? 3,
|
||||
|
||||
// Other credentials
|
||||
sellerId: item.sellerId || "",
|
||||
@@ -220,8 +239,10 @@ export default function NewIntegration() {
|
||||
appId: item.appId || "",
|
||||
bundleIdentifier: item.bundleIdentifier || "",
|
||||
gatewayUrl: item.gatewayUrl || "",
|
||||
customApiUrl: item.customApiUrl || "",
|
||||
customApiHeaderKey: item.customApiHeaderKey || "",
|
||||
endpoint: item.endpoint || item.customApiUrl || "",
|
||||
testEndpoint: item.testEndpoint || "",
|
||||
method: item.method || "POST",
|
||||
customApiHeaderName: item.customApiHeaderName || item.customApiHeaderKey || "X-API-Key",
|
||||
customApiHeaderValue: item.customApiHeaderValue || "",
|
||||
});
|
||||
}
|
||||
@@ -233,11 +254,19 @@ export default function NewIntegration() {
|
||||
const handleChannelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const val = e.target.value;
|
||||
formik.setFieldValue("channel", val);
|
||||
|
||||
// Auto-match integrationType to channelType from Channel Registry
|
||||
const selectedChan = channels.find(c => c.code === val || c.id === val);
|
||||
if (selectedChan && selectedChan.channelType) {
|
||||
formik.setFieldValue("integrationType", selectedChan.channelType);
|
||||
};
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
if (!id) return;
|
||||
setTestingConnection(true);
|
||||
setConnectionMessage("");
|
||||
try {
|
||||
const result = await integrationsService.testConnection(id);
|
||||
setConnectionMessage(result.message || (result.connected ? "Connection successful" : "Connection failed"));
|
||||
} catch (error: any) {
|
||||
setConnectionMessage(error?.response?.data?.message || "Connection test failed");
|
||||
} finally {
|
||||
setTestingConnection(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -316,10 +345,12 @@ export default function NewIntegration() {
|
||||
{!isView && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTestConnection}
|
||||
disabled={!id || testingConnection}
|
||||
className="flex items-center gap-2 py-2 px-4 border border-warning/20 bg-warning/10 text-warning rounded-lg text-sm font-medium hover:bg-warning/20 transition-colors"
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
Test Connection
|
||||
{testingConnection ? "Testing…" : id ? "Test Connection" : "Save Before Testing"}
|
||||
</button>
|
||||
)}
|
||||
<Button variant="outline" type="button" onClick={() => navigate('..')}>
|
||||
@@ -396,6 +427,18 @@ export default function NewIntegration() {
|
||||
<CardHeader title="General Information" subtitle="Name, channel, environment and status" />
|
||||
<div className="p-6 space-y-5">
|
||||
|
||||
<div>
|
||||
<label className={labelClass}>How will products leave the PIM? *</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{INTEGRATION_TYPES.map((type) => {
|
||||
const Icon = type.icon;
|
||||
const selected = formik.values.integrationType === type.id;
|
||||
return <button key={type.id} type="button" onClick={() => formik.setFieldValue('integrationType', type.id)} className={`rounded-xl border-2 p-4 text-left transition-colors ${selected ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'}`}><div className="flex items-center gap-2"><Icon className={`h-5 w-5 ${selected ? 'text-primary' : 'text-muted-foreground'}`} /><span className="font-semibold">{type.label}</span></div><p className="mt-2 text-xs text-muted-foreground">{type.sub}</p></button>;
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-3 rounded-lg bg-surface-muted p-3 text-xs text-muted-foreground"><strong>Channel</strong> decides which fields and transformations are sent. <strong>Integration</strong> stores where to send them and how the destination authenticates PIM.</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={labelClass}>Integration Name *</label>
|
||||
<input
|
||||
@@ -403,7 +446,7 @@ export default function NewIntegration() {
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder="e.g. Amazon India Production"
|
||||
placeholder="e.g. Main Website REST API"
|
||||
className={inputClass(formik.touched.name && Boolean(formik.errors.name))}
|
||||
/>
|
||||
{formik.touched.name && formik.errors.name && (
|
||||
@@ -423,7 +466,7 @@ export default function NewIntegration() {
|
||||
>
|
||||
<option value="">Select a channel from Channel Registry...</option>
|
||||
{channels.map((chan) => (
|
||||
<option key={chan.id} value={chan.code || chan.id}>
|
||||
<option key={chan.id} value={chan.id}>
|
||||
{chan.name} ({chan.code})
|
||||
</option>
|
||||
))}
|
||||
@@ -448,21 +491,7 @@ export default function NewIntegration() {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Status</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
name="status"
|
||||
value={formik.values.status}
|
||||
onChange={formik.handleChange}
|
||||
className={inputClass()}
|
||||
>
|
||||
<option value="Connected">Connected</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="Disconnected">Disconnected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div><label className={labelClass}>Connection Status</label><div className="rounded-lg border border-border bg-surface-muted px-3 py-2.5 text-sm">Pending until credentials are tested successfully</div></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -481,8 +510,8 @@ export default function NewIntegration() {
|
||||
<div className="flex items-start gap-3 p-4 bg-blue-50 border border-blue-100 rounded-xl text-sm text-blue-700">
|
||||
<Info className="w-4 h-4 text-blue-500 mt-0.5 shrink-0" />
|
||||
<p>
|
||||
{formik.values.integrationType === "ecommerce" || formik.values.integrationType === "website" || formik.values.integrationType === "b2b_portal" ? (
|
||||
"Provide your platform URL, access credentials, and store configuration identifiers."
|
||||
{formik.values.integrationType === "shopify" ? (
|
||||
"Enter the permanent .myshopify.com domain plus the Client ID and Client Secret from Shopify Dev Dashboard → Apps → your app → Settings. The PIM obtains short-lived access tokens automatically."
|
||||
) : formik.values.integrationType === "marketplace" ? (
|
||||
"Marketplace connection requires Seller ID, Marketplace ID, and Selling Partner API credentials."
|
||||
) : formik.values.integrationType === "erp" || formik.values.integrationType === "wms" ? (
|
||||
@@ -492,16 +521,16 @@ export default function NewIntegration() {
|
||||
) : formik.values.integrationType === "mobile_app" ? (
|
||||
"Enter application identifiers, bundle settings, and push sync settings."
|
||||
) : (
|
||||
"Set up custom REST or GraphQL webhook integrations using key-value headers."
|
||||
"Your website or application must provide an HTTPS product endpoint and tell you how it authenticates requests. The PIM will send mapped product JSON to that endpoint; it does not host or create the destination API."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Ecommerce / Website / B2B Portal Fields */}
|
||||
{(formik.values.integrationType === "ecommerce" || formik.values.integrationType === "website" || formik.values.integrationType === "b2b_portal") && (
|
||||
{/* Shopify Fields */}
|
||||
{formik.values.integrationType === "shopify" && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Store / Website URL *</label>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Permanent Shopify Store Domain *</label>
|
||||
<input
|
||||
name="storeUrl"
|
||||
value={formik.values.storeUrl}
|
||||
@@ -509,18 +538,25 @@ export default function NewIntegration() {
|
||||
placeholder="https://your-store.myshopify.com"
|
||||
className={inputClass()}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">Use the permanent <strong>.myshopify.com</strong> domain—not the storefront domain and not the PIM URL.</p>
|
||||
{formik.touched.storeUrl && formik.errors.storeUrl && <p className="mt-1 text-xs text-red-500">{formik.errors.storeUrl}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Access Token *</label>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Shopify Client ID *</label>
|
||||
<input name="clientId" value={formik.values.clientId} onChange={formik.handleChange} placeholder="Dev Dashboard → App → Settings" className={inputClass()} />
|
||||
{formik.touched.clientId && formik.errors.clientId && <p className="mt-1 text-xs text-red-500">{formik.errors.clientId}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Shopify Client Secret *</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
name="accessToken"
|
||||
name="clientSecret"
|
||||
type={showToken ? "text" : "password"}
|
||||
value={formik.values.accessToken}
|
||||
value={formik.values.clientSecret}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="shpat_xxxxxxxxxxx"
|
||||
placeholder="Dev Dashboard → App → Settings"
|
||||
className={inputClass() + " pr-10"}
|
||||
/>
|
||||
<button
|
||||
@@ -531,44 +567,11 @@ export default function NewIntegration() {
|
||||
{showToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">API Version / Edition</label>
|
||||
<select
|
||||
name="apiVersion"
|
||||
value={formik.values.apiVersion}
|
||||
onChange={formik.handleChange}
|
||||
className={inputClass()}
|
||||
>
|
||||
<option value="2025-01">2025-01 (Latest)</option>
|
||||
<option value="2024-10">2024-10</option>
|
||||
<option value="2024-07">2024-07</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Webhook Secret Key</label>
|
||||
<input
|
||||
name="webhookSecret"
|
||||
value={formik.values.webhookSecret}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="Optional webhook secret"
|
||||
className={inputClass()}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Shop Identifier</label>
|
||||
<input
|
||||
name="shopIdentifier"
|
||||
value={formik.values.shopIdentifier}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="e.g., store_main"
|
||||
className={inputClass()}
|
||||
/>
|
||||
{formik.errors.clientSecret && <p className="mt-1 text-xs text-red-500">{formik.errors.clientSecret}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-surface-muted p-3 text-sm"><strong>Admin API version:</strong> 2026-07, managed by the PIM. No access token, separate webhook secret, or shop identifier is required for the first connection test.</div>
|
||||
{connectionMessage && <div className="rounded-lg border border-border p-3 text-sm">{connectionMessage}</div>}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -849,40 +852,38 @@ export default function NewIntegration() {
|
||||
{/* Custom API Fields */}
|
||||
{formik.values.integrationType === "custom_api" && (
|
||||
<>
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">
|
||||
<p className="font-semibold">Before filling this form, ask your website developer for:</p>
|
||||
<ol className="mt-2 list-decimal space-y-1 pl-5"><li>The HTTPS URL that accepts one product as JSON.</li><li>Whether it needs no authentication, a Bearer token, or an API-key header.</li><li>A safe test URL if testing must not create a real product.</li></ol>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Base API Gateway URL *</label>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Product Delivery URL *</label>
|
||||
<input
|
||||
name="customApiUrl"
|
||||
value={formik.values.customApiUrl}
|
||||
name="endpoint"
|
||||
value={formik.values.endpoint}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="https://api.externalpartner.com/v2"
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder="https://your-site.com/api/pim/products"
|
||||
className={inputClass()}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">PIM sends one mapped product to this URL during a syndication job.</p>
|
||||
{formik.touched.endpoint && formik.errors.endpoint && <p className="mt-1 text-xs text-red-500">{formik.errors.endpoint}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Custom Header Name</label>
|
||||
<input
|
||||
name="customApiHeaderKey"
|
||||
value={formik.values.customApiHeaderKey}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="X-Partner-Token"
|
||||
className={inputClass()}
|
||||
/>
|
||||
<label className={labelClass}>HTTP Method</label>
|
||||
<select name="method" value={formik.values.method} onChange={formik.handleChange} className={inputClass()}><option value="POST">POST — create/upsert</option><option value="PUT">PUT — replace/upsert</option><option value="PATCH">PATCH — partial update</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Custom Header Value</label>
|
||||
<input
|
||||
name="customApiHeaderValue"
|
||||
type="password"
|
||||
value={formik.values.customApiHeaderValue}
|
||||
onChange={formik.handleChange}
|
||||
placeholder="token-value"
|
||||
className={inputClass()}
|
||||
/>
|
||||
<label className={labelClass}>Authentication</label>
|
||||
<select name="authMethod" value={formik.values.authMethod} onChange={formik.handleChange} className={inputClass()}><option value="apikey">API-key header</option><option value="bearer">Bearer token</option><option value="none">No authentication</option></select>
|
||||
</div>
|
||||
</div>
|
||||
{formik.values.authMethod === 'apikey' && <div className="grid grid-cols-2 gap-4"><div><label className={labelClass}>API-key Header Name *</label><input name="customApiHeaderName" value={formik.values.customApiHeaderName} onChange={formik.handleChange} placeholder="X-API-Key" className={inputClass()} />{formik.errors.customApiHeaderName && <p className="mt-1 text-xs text-red-500">{formik.errors.customApiHeaderName}</p>}</div><div><label className={labelClass}>API-key Value *</label><input name="customApiHeaderValue" type={showToken ? 'text' : 'password'} value={formik.values.customApiHeaderValue} onChange={formik.handleChange} placeholder={isEdit ? 'Leave blank to keep current secret' : 'Provided by your website developer'} className={inputClass()} />{formik.errors.customApiHeaderValue && <p className="mt-1 text-xs text-red-500">{formik.errors.customApiHeaderValue}</p>}</div></div>}
|
||||
{formik.values.authMethod === 'bearer' && <div><label className={labelClass}>Bearer Token *</label><input name="authToken" type={showToken ? 'text' : 'password'} value={formik.values.authToken} onChange={formik.handleChange} placeholder={isEdit ? 'Leave blank to keep current token' : 'Provided by your website developer'} className={inputClass()} />{formik.errors.authToken && <p className="mt-1 text-xs text-red-500">{formik.errors.authToken}</p>}</div>}
|
||||
<div><label className={labelClass}>Safe Connection-Test URL <span className="font-normal text-muted-foreground">(optional)</span></label><input name="testEndpoint" value={formik.values.testEndpoint} onChange={formik.handleChange} onBlur={formik.handleBlur} placeholder="https://your-site.com/api/pim/test" className={inputClass()} /><p className="mt-1 text-xs text-muted-foreground">Test Connection sends a small <code>pim.connection.test</code> JSON request here. If blank, it uses the Product Delivery URL.</p>{formik.touched.testEndpoint && formik.errors.testEndpoint && <p className="mt-1 text-xs text-red-500">{formik.errors.testEndpoint}</p>}</div>
|
||||
<div className="rounded-lg border border-border bg-surface-muted p-4 text-sm"><p className="font-semibold">What happens after Save</p><ol className="mt-2 list-decimal space-y-1 pl-5"><li>The secret is encrypted and the Integration stays Pending.</li><li>Test Connection verifies the URL and credentials.</li><li>Your Channel mapping builds the JSON body.</li><li>Trigger Sync queues products; the worker sends them with retries and idempotency.</li><li>Jobs and Error Center show every product result.</li></ol></div>
|
||||
{connectionMessage && <div className="rounded-lg border border-border p-3 text-sm">{connectionMessage}</div>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -896,59 +897,12 @@ export default function NewIntegration() {
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-3">Sync Direction</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ id: "pim_to_channel", label: "PIM → Channel", sub: "Publish product data to the external system", icon: "↑" },
|
||||
{ id: "channel_to_pim", label: "Channel → PIM", sub: "Import data from external system into PIM", icon: "↓" },
|
||||
{ id: "bidirectional", label: "Bidirectional", sub: "Sync data in both directions", icon: "↕" },
|
||||
].map((d) => {
|
||||
const isSelected = formik.values.syncDirection === d.id;
|
||||
return (
|
||||
<button
|
||||
key={d.id}
|
||||
type="button"
|
||||
onClick={() => formik.setFieldValue("syncDirection", d.id)}
|
||||
className={`flex flex-col items-center text-center p-4 rounded-xl border-2 transition-all gap-2 ${
|
||||
isSelected ? "border-primary bg-primary/5" : "border-border hover:border-border"
|
||||
}`}
|
||||
>
|
||||
<span className={`text-xl font-bold ${isSelected ? "text-primary" : "text-muted-foreground"}`}>{d.icon}</span>
|
||||
<div>
|
||||
<div className={`text-sm font-semibold ${isSelected ? "text-primary-dark" : "text-foreground"}`}>{d.label}</div>
|
||||
<div className="text-[11px] text-muted-foreground mt-1">{d.sub}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="rounded-xl border-2 border-primary bg-primary/5 p-4"><div className="text-sm font-semibold text-primary-dark">PIM → External System</div><div className="mt-1 text-xs text-muted-foreground">This implemented flow publishes PIM products outward. Import and bidirectional sync will appear only after their conflict and ownership rules exist.</div></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-3">Sync Frequency</label>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{[
|
||||
{ id: "manual", label: "Manual", icon: Settings2 },
|
||||
{ id: "hourly", label: "Hourly", icon: Clock },
|
||||
{ id: "daily", label: "Daily", icon: Calendar },
|
||||
{ id: "realtime", label: "Realtime", icon: Wifi },
|
||||
].map((f) => {
|
||||
const Icon = f.icon;
|
||||
const isSelected = formik.values.syncFrequency === f.id;
|
||||
return (
|
||||
<button
|
||||
key={f.id}
|
||||
type="button"
|
||||
onClick={() => formik.setFieldValue("syncFrequency", f.id)}
|
||||
className={`flex flex-col items-center text-center py-4 px-2 rounded-xl border-2 transition-all gap-2 ${
|
||||
isSelected ? "border-primary bg-primary/5" : "border-border hover:border-border"
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${isSelected ? "text-primary" : "text-muted-foreground"}`} />
|
||||
<span className={`text-sm font-medium ${isSelected ? "text-primary-dark" : "text-foreground"}`}>{f.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="rounded-xl border-2 border-primary bg-primary/5 p-4"><div className="flex items-center gap-2 text-sm font-semibold text-primary-dark"><Settings2 className="h-4 w-4" />Manual trigger</div><div className="mt-1 text-xs text-muted-foreground">Use Trigger Sync from Channel Registry. Hourly, daily and realtime schedules are hidden until a scheduler is implemented.</div></div>
|
||||
</div>
|
||||
|
||||
<div className="border border-border rounded-xl p-4 space-y-4">
|
||||
@@ -995,37 +949,9 @@ export default function NewIntegration() {
|
||||
|
||||
{activeStep === 'advanced' && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-surface rounded-xl border border-border shadow-sm overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-background transition-colors"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Localisation & Defaults</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Configure default locale, currency, and timezone for this integration</p>
|
||||
</div>
|
||||
<ChevronDown className="w-4 h-4 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{[
|
||||
{ label: "Field Mapping", desc: "Map PIM attribute fields to external system field schemas" },
|
||||
{ label: "Category Mapping", desc: "Map PIM category taxonomy to external system categories" },
|
||||
{ label: "Transformation Rules", desc: "Define data transformation and enrichment rules during sync" },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="bg-surface rounded-xl border border-border shadow-sm p-5 flex items-center gap-4">
|
||||
<div className="w-9 h-9 bg-surface-muted rounded-lg flex items-center justify-center">
|
||||
<Settings2 className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-foreground">{item.label}</p>
|
||||
<span className="px-2 py-0.5 text-[10px] font-bold uppercase bg-amber-50 text-amber-600 border border-amber-200 rounded">Coming Soon</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="rounded-xl border border-green-200 bg-green-50 p-5"><p className="font-medium text-green-900">Field mapping and transformations are available now</p><p className="mt-1 text-xs text-green-800">Configure them on the selected Channel. Saved mappings are already used by CSV export and syndication payload generation.</p><button type="button" onClick={() => navigate('/channels')} className="mt-3 text-sm font-semibold text-green-900 underline">Open Channel Registry</button></div>
|
||||
<div className="rounded-xl border border-border bg-surface p-5"><p className="font-medium">Localisation defaults — later</p><p className="mt-1 text-xs text-muted-foreground">Not required to verify Shopify credentials or publish a first basic product. Add locale, currency and Shopify Markets behavior afterward.</p></div>
|
||||
<div className="rounded-xl border border-border bg-surface p-5"><p className="font-medium">Category mapping — later</p><p className="mt-1 text-xs text-muted-foreground">Not required for the first product. Shopify collections and taxonomy mapping belong in the next publishing phase.</p></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1044,7 +970,6 @@ export default function NewIntegration() {
|
||||
|
||||
{/* Right: Integration Summary */}
|
||||
<IntegrationSummary
|
||||
disabled={isView}
|
||||
name={formik.values.name}
|
||||
channel={formik.values.channel}
|
||||
channelName={selectedChanName}
|
||||
|
||||
@@ -1,98 +1,95 @@
|
||||
import type {
|
||||
Integration,
|
||||
IntegrationCreateRequest,
|
||||
IntegrationUpdateRequest,
|
||||
TestConnectionResult,
|
||||
SyncJob,
|
||||
SyncItem
|
||||
} from '../types/integrations.types';
|
||||
import apiClient from '../../../api/axiosInstance';
|
||||
import type { Integration, IntegrationCreateRequest, IntegrationUpdateRequest, TestConnectionResult, SyncJob, SyncItem } from '../types/integrations.types';
|
||||
|
||||
interface ApiResponse<T> {
|
||||
type ApiResponse<T> = {
|
||||
success: boolean;
|
||||
data: T;
|
||||
message?: string;
|
||||
}
|
||||
data: T;
|
||||
};
|
||||
|
||||
export const integrationsService = {
|
||||
getAll: async (): Promise<Integration[]> => {
|
||||
const res = await apiClient.get<ApiResponse<Integration[]>>('/api/v1/integrations');
|
||||
const raw: any = res.data;
|
||||
export const integrationService = {
|
||||
getAll: async (params?: Record<string, any>): Promise<Integration[]> => {
|
||||
const res = await apiClient.get<ApiResponse<Integration[]>>('/api/v1/integrations', params);
|
||||
const raw: any = res;
|
||||
return (Array.isArray(raw) ? raw : raw?.data || []) as Integration[];
|
||||
},
|
||||
|
||||
getById: async (id: string): Promise<Integration | undefined> => {
|
||||
const res = await apiClient.get<ApiResponse<Integration>>(`/api/v1/integrations/${id}`);
|
||||
const raw: any = res.data;
|
||||
getById: async (id: string): Promise<Integration> => {
|
||||
const res = await apiClient.get<ApiResponse<Integration>>('/api/v1/integrations/' + id);
|
||||
const raw: any = res;
|
||||
return (raw?.data || raw) as Integration;
|
||||
},
|
||||
|
||||
create: async (req: IntegrationCreateRequest): Promise<Integration> => {
|
||||
const res = await apiClient.post<ApiResponse<Integration>>('/api/v1/integrations', req);
|
||||
const raw: any = res.data;
|
||||
create: async (data: IntegrationCreateRequest): Promise<Integration> => {
|
||||
const res = await apiClient.post<ApiResponse<Integration>>('/api/v1/integrations', data);
|
||||
const raw: any = res;
|
||||
return (raw?.data || raw) as Integration;
|
||||
},
|
||||
|
||||
update: async (id: string, req: IntegrationUpdateRequest): Promise<Integration> => {
|
||||
const res = await apiClient.put<ApiResponse<Integration>>(`/api/v1/integrations/${id}`, req);
|
||||
const raw: any = res.data;
|
||||
update: async (id: string, data: IntegrationUpdateRequest): Promise<Integration> => {
|
||||
const res = await apiClient.put<ApiResponse<Integration>>('/api/v1/integrations/' + id, data);
|
||||
const raw: any = res;
|
||||
return (raw?.data || raw) as Integration;
|
||||
},
|
||||
|
||||
delete: async (id: string): Promise<boolean> => {
|
||||
const res = await apiClient.delete<ApiResponse<any>>(`/api/v1/integrations/${id}`);
|
||||
return res.success || true;
|
||||
const res = await apiClient.delete<ApiResponse<any>>('/api/v1/integrations/' + id);
|
||||
const raw: any = res;
|
||||
return raw?.success !== undefined ? raw.success : true;
|
||||
},
|
||||
|
||||
getCredentials: async (id: string): Promise<Record<string, string>> => {
|
||||
const res = await apiClient.get<ApiResponse<Record<string, string>>>(`/api/v1/integrations/${id}/credentials`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.get<ApiResponse<Record<string, string>>>('/api/v1/integrations/' + id + '/credentials');
|
||||
const raw: any = res;
|
||||
return (raw?.data || raw) as Record<string, string>;
|
||||
},
|
||||
|
||||
setCredentials: async (id: string, credentialType: string, secretValue: string, expiresAt?: string): Promise<any> => {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`/api/v1/integrations/${id}/credentials`, {
|
||||
const res = await apiClient.post<ApiResponse<any>>('/api/v1/integrations/' + id + '/credentials', {
|
||||
credential_type: credentialType,
|
||||
secret_value: secretValue,
|
||||
expires_at: expiresAt
|
||||
});
|
||||
const raw: any = res.data;
|
||||
const raw: any = res;
|
||||
return raw?.data || raw;
|
||||
},
|
||||
|
||||
testConnection: async (id: string): Promise<TestConnectionResult> => {
|
||||
const res = await apiClient.post<ApiResponse<TestConnectionResult>>(`/api/v1/integrations/${id}/test-connection`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.post<ApiResponse<TestConnectionResult>>('/api/v1/integrations/' + id + '/test-connection');
|
||||
const raw: any = res;
|
||||
return (raw?.data || raw) as TestConnectionResult;
|
||||
},
|
||||
|
||||
triggerSync: async (id: string, options?: { productId?: string; productIds?: string[] }): Promise<any> => {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`/api/v1/integrations/${id}/sync`, options || {});
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.post<ApiResponse<any>>('/api/v1/integrations/' + id + '/sync', options || {});
|
||||
const raw: any = res;
|
||||
return raw?.data || raw;
|
||||
},
|
||||
|
||||
getSyncJobs: async (id: string): Promise<SyncJob[]> => {
|
||||
const res = await apiClient.get<ApiResponse<SyncJob[]>>(`/api/v1/integrations/${id}/jobs`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.get<ApiResponse<SyncJob[]>>('/api/v1/integrations/' + id + '/jobs');
|
||||
const raw: any = res;
|
||||
return (Array.isArray(raw) ? raw : raw?.data || []) as SyncJob[];
|
||||
},
|
||||
|
||||
getAllSyncJobs: async (): Promise<SyncJob[]> => {
|
||||
const res = await apiClient.get<ApiResponse<SyncJob[]>>(`/api/v1/integrations/jobs/all`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.get<ApiResponse<SyncJob[]>>('/api/v1/integrations/jobs/all');
|
||||
const raw: any = res;
|
||||
return (Array.isArray(raw) ? raw : raw?.data || []) as SyncJob[];
|
||||
},
|
||||
|
||||
getSyncItems: async (jobId: string): Promise<SyncItem[]> => {
|
||||
const res = await apiClient.get<ApiResponse<SyncItem[]>>(`/api/v1/integrations/jobs/${jobId}/items`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.get<ApiResponse<SyncItem[]>>('/api/v1/integrations/jobs/' + jobId + '/items');
|
||||
const raw: any = res;
|
||||
return (Array.isArray(raw) ? raw : raw?.data || []) as SyncItem[];
|
||||
},
|
||||
|
||||
startShopifyOAuth: async (id: string): Promise<{ authorizationUrl: string; state: string }> => {
|
||||
const res = await apiClient.post<ApiResponse<any>>(`/api/v1/integrations/${id}/shopify/oauth/start`);
|
||||
const raw: any = res.data;
|
||||
const res = await apiClient.post<ApiResponse<any>>('/api/v1/integrations/' + id + '/shopify/oauth/start');
|
||||
const raw: any = res;
|
||||
return raw?.data || raw;
|
||||
}
|
||||
};
|
||||
|
||||
export const integrationsService = integrationService;
|
||||
export default integrationService;
|
||||
|
||||
@@ -2,15 +2,15 @@ export interface Integration {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
channel: string; // e.g. shopify, amazon, custom_api
|
||||
integrationType?: string; // e.g. ecommerce, marketplace, erp
|
||||
channel: string;
|
||||
integrationType?: string;
|
||||
environment?: string;
|
||||
status: string; // active, inactive, pending, error
|
||||
health_status?: string; // healthy, degraded, error
|
||||
status: string;
|
||||
health_status?: string;
|
||||
healthStatus?: string;
|
||||
sync_mode?: string; // auto, manual, scheduled
|
||||
sync_mode?: string;
|
||||
syncMode?: string;
|
||||
sync_frequency?: string; // realtime, hourly, daily
|
||||
sync_frequency?: string;
|
||||
syncFrequency?: string;
|
||||
last_synced_at?: string;
|
||||
lastSync?: string;
|
||||
@@ -18,9 +18,55 @@ export interface Integration {
|
||||
// E-commerce connection credentials & details
|
||||
storeUrl?: string;
|
||||
accessToken?: string;
|
||||
apiVersion?: string;
|
||||
webhookSecret?: string;
|
||||
shopIdentifier?: string;
|
||||
shopDomain?: string;
|
||||
|
||||
// Marketplace specific fields
|
||||
sellerId?: string;
|
||||
marketplaceId?: string;
|
||||
awsAccessKeyId?: string;
|
||||
awsSecretKey?: string;
|
||||
clientId?: string;
|
||||
clientSecret?: string;
|
||||
|
||||
// ERP/WMS specific fields
|
||||
authMethod?: string;
|
||||
authToken?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
|
||||
// POS specific fields
|
||||
posTerminalId?: string;
|
||||
posStoreCode?: string;
|
||||
posApiKey?: string;
|
||||
posApiSecret?: string;
|
||||
|
||||
// Mobile App specific fields
|
||||
appId?: string;
|
||||
bundleIdentifier?: string;
|
||||
gatewayUrl?: string;
|
||||
|
||||
// Custom API specific fields
|
||||
customApiUrl?: string;
|
||||
customApiHeaderKey?: string;
|
||||
endpoint?: string;
|
||||
testEndpoint?: string;
|
||||
method?: string;
|
||||
customApiHeaderName?: string;
|
||||
customApiHeaderValue?: string;
|
||||
clearSecretFields?: string[];
|
||||
|
||||
// Sync settings
|
||||
syncDirection?: string;
|
||||
autoRetry?: boolean;
|
||||
retryAttempts?: number;
|
||||
|
||||
// Listing page read-only / metadata fields
|
||||
syncErrors?: number;
|
||||
published?: string | number;
|
||||
author?: string;
|
||||
createdAt?: string;
|
||||
created_at?: string;
|
||||
updatedAt?: string;
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Building2, Users, Package, Image, ShieldCheck, Activity, Play, StopCircle } from "lucide-react";
|
||||
import { Building2, Users, Package, Image, Activity } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PageWrapper } from "../../../components/layouts/PageWrapper";
|
||||
import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
import { tenantService } from "../../tenants/services/tenant.service";
|
||||
import { useTenant } from "../../tenants/hooks/useTenant";
|
||||
import { notify } from "../../../services/toast";
|
||||
|
||||
export default function PlatformOverview() {
|
||||
const navigate = useNavigate();
|
||||
const { impersonateTenant, stopImpersonation } = useTenant();
|
||||
const [metrics, setMetrics] = useState<any>(null);
|
||||
const [tenants, setTenants] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [impersonatingTenantId, setImpersonatingTenantId] = useState<string | null>(
|
||||
localStorage.getItem("impersonatedTenantId")
|
||||
);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
@@ -38,61 +33,21 @@ export default function PlatformOverview() {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const handleStartImpersonate = async (tenantId: string) => {
|
||||
try {
|
||||
await impersonateTenant(tenantId);
|
||||
setImpersonatingTenantId(tenantId);
|
||||
navigate("/products");
|
||||
} catch (err) {
|
||||
// Handled in hook
|
||||
}
|
||||
};
|
||||
|
||||
const handleStopImpersonate = () => {
|
||||
stopImpersonation();
|
||||
setImpersonatingTenantId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Breadcrumb
|
||||
items={[{ label: "Platform Operator" }, { label: "SaaS Control Center Overview" }]}
|
||||
items={[{ label: "SaaS Dashboard" }]}
|
||||
actions={
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<Building2 className="w-4 h-4" />}
|
||||
onClick={() => navigate("/platform/tenants")}
|
||||
>
|
||||
Provision New Tenant
|
||||
Manage Tenants
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Support Impersonation Banner */}
|
||||
{impersonatingTenantId && (
|
||||
<div className="mb-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-amber-500 text-white font-bold">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground text-sm">Support Impersonation Mode Active</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Currently troubleshooting Tenant ID: <span className="font-mono font-bold text-amber-500">{impersonatingTenantId}</span>. Requests are safely scoped to this tenant context.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon={<StopCircle className="w-4 h-4 text-danger" />}
|
||||
onClick={handleStopImpersonate}
|
||||
>
|
||||
End Support Mode
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metrics Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
|
||||
<div className="bg-surface rounded-xl p-5 border border-border shadow-sm flex items-center gap-4">
|
||||
@@ -140,12 +95,12 @@ export default function PlatformOverview() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tenants Table Preview */}
|
||||
{/* Recent tenant health preview. Full lifecycle management lives in Tenants. */}
|
||||
<div className="bg-surface rounded-xl border border-border shadow-sm overflow-hidden mb-8">
|
||||
<div className="px-6 py-4 border-b border-border bg-gradient-to-r from-primary/5 to-surface flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4 text-primary" />
|
||||
<h3 className="font-semibold text-foreground text-sm">Tenant Provisioning Registry</h3>
|
||||
<h3 className="font-semibold text-foreground text-sm">Recent Tenant Health</h3>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate("/platform/tenants")}>
|
||||
Manage All Tenants
|
||||
@@ -162,20 +117,19 @@ export default function PlatformOverview() {
|
||||
<th className="px-6 py-3">Products</th>
|
||||
<th className="px-6 py-3">Assets</th>
|
||||
<th className="px-6 py-3">Status</th>
|
||||
<th className="px-6 py-3 text-right">Support Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-6 py-8 text-center text-muted-foreground">Loading SaaS platform tenants...</td>
|
||||
<td colSpan={6} className="px-6 py-8 text-center text-muted-foreground">Loading SaaS platform tenants...</td>
|
||||
</tr>
|
||||
) : tenants.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-6 py-8 text-center text-muted-foreground">No tenants provisioned yet.</td>
|
||||
<td colSpan={6} className="px-6 py-8 text-center text-muted-foreground">No tenants provisioned yet.</td>
|
||||
</tr>
|
||||
) : (
|
||||
tenants.map((t) => (
|
||||
tenants.slice(0, 5).map((t) => (
|
||||
<tr key={t.id} className="hover:bg-primary/5 transition-colors">
|
||||
<td className="px-6 py-4 font-mono text-xs font-semibold text-primary">{t.tenant_code}</td>
|
||||
<td className="px-6 py-4 font-medium text-foreground">{t.tenant_name}</td>
|
||||
@@ -187,18 +141,6 @@ export default function PlatformOverview() {
|
||||
{t.status ? "Active" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
{String(t.id) === String(impersonatingTenantId) ? (
|
||||
<span className="text-xs text-amber-500 font-semibold">Active Session</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleStartImpersonate(String(t.id))}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-primary/10 text-primary hover:bg-primary hover:text-white transition-colors"
|
||||
>
|
||||
<Play className="w-3.5 h-3.5" /> Support Assist
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Plus, Building2, Search, CheckCircle, XCircle, Copy, Check } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PageWrapper } from "../../../components/layouts/PageWrapper";
|
||||
import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
|
||||
import { Button } from "../../../components/customs/Button";
|
||||
@@ -13,7 +12,6 @@ const inputClass = (error?: boolean) =>
|
||||
`w-full border ${error ? 'border-danger focus:ring-danger' : 'border-primary/10 focus:ring-primary-light'} rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 bg-surface text-foreground placeholder-muted-foreground`;
|
||||
|
||||
export default function PlatformTenantsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { tenants, fetchPlatformTenants, provisionTenant, updatePlatformStatus, impersonateTenant, stopImpersonation } = useTenant();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -83,10 +81,17 @@ export default function PlatformTenantsPage() {
|
||||
};
|
||||
|
||||
const handleStartImpersonate = async (tenantId: string) => {
|
||||
const tenant = (tenants || []).find((item: any) => String(item.id) === String(tenantId));
|
||||
const confirmed = window.confirm(
|
||||
`Enter Support Mode for ${tenant?.tenant_name || `Tenant #${tenantId}`}?\n\n` +
|
||||
'You will operate inside this tenant workspace. All support actions are tenant-scoped and audited.'
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
await impersonateTenant(tenantId);
|
||||
setImpersonatingTenantId(tenantId);
|
||||
navigate("/products");
|
||||
window.location.assign("/products");
|
||||
} catch (err) {
|
||||
// Handled in hook
|
||||
}
|
||||
@@ -169,9 +174,8 @@ export default function PlatformTenantsPage() {
|
||||
<td className="px-6 py-4 text-right flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={() => handleToggleStatus(String(t.id), t.status)}
|
||||
className={`p-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
t.status ? 'bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white' : 'bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500 hover:text-white'
|
||||
}`}
|
||||
className={`p-1.5 rounded-lg text-xs font-medium transition-colors ${t.status ? 'bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white' : 'bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500 hover:text-white'
|
||||
}`}
|
||||
title={t.status ? "Suspend Tenant" : "Activate Tenant"}
|
||||
>
|
||||
{t.status ? <XCircle className="w-4 h-4" /> : <CheckCircle className="w-4 h-4" />}
|
||||
@@ -182,14 +186,14 @@ export default function PlatformTenantsPage() {
|
||||
onClick={() => { stopImpersonation(); setImpersonatingTenantId(null); }}
|
||||
className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-amber-500 text-white hover:bg-amber-600 transition-colors"
|
||||
>
|
||||
End Support
|
||||
Exit Support
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleStartImpersonate(String(t.id))}
|
||||
className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-primary/10 text-primary hover:bg-primary hover:text-white transition-colors"
|
||||
>
|
||||
Support Assist
|
||||
Support Access
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
@@ -265,7 +269,7 @@ export default function PlatformTenantsPage() {
|
||||
|
||||
<div className="pt-2 border-t border-border">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3">Initial Tenant Admin Credentials</h4>
|
||||
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-foreground mb-1">Admin Name</label>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { VariantListView } from './VariantListView';
|
||||
import { VariantMatrixView } from './VariantMatrixView';
|
||||
import { VariantBulkActions } from './VariantBulkActions';
|
||||
import type { VariantAxis, VariantStatus, Variant } from '../../types/variant.types';
|
||||
import { Info, LayoutGrid, List, Plus, RefreshCw, Layers, X } from 'lucide-react';
|
||||
import { LayoutGrid, List, Plus, RefreshCw, Layers, X } from 'lucide-react';
|
||||
import { Loader } from '../../../../components/customs/Loader';
|
||||
import { notify } from '../../../../services/toast';
|
||||
|
||||
|
||||
@@ -68,10 +68,30 @@ export const useProductFamilyConfiguration = (familyId?: string) => {
|
||||
}
|
||||
setAttributes(flatAttrs);
|
||||
|
||||
// Hydrate variant axes to ensure full attribute objects with .code and .name exist
|
||||
const allAttrsMap = new Map<string, any>(flatAttrs.map(a => [a.id, a]));
|
||||
// Hydrate variant axes to ensure full attribute objects (including
|
||||
// selectable options) are used. Family blueprints commonly expose only
|
||||
// axis UUIDs, while the complete attributes live inside the hydrated
|
||||
// Attribute Set groups.
|
||||
const setAttrs: any[] = [];
|
||||
if (Array.isArray(setObj?.groups)) {
|
||||
setObj.groups.forEach((group: any) => {
|
||||
if (Array.isArray(group.attributes)) setAttrs.push(...group.attributes);
|
||||
});
|
||||
}
|
||||
const allAttrsMap = new Map<string, any>();
|
||||
[...flatAttrs, ...setAttrs].forEach((raw: any) => {
|
||||
const attr = raw?.attribute || raw;
|
||||
[raw?.id, raw?._id, raw?.attribute_id, attr?.id, attr?._id, attr?.code]
|
||||
.filter(Boolean)
|
||||
.forEach((key: any) => allAttrsMap.set(String(key), attr));
|
||||
});
|
||||
const resolvedVariantAxes = Array.isArray(blueprint.variantAxes)
|
||||
? blueprint.variantAxes.map((va: any) => typeof va === 'string' ? (allAttrsMap.get(va) || { id: va, code: va, name: va }) : va)
|
||||
? blueprint.variantAxes.map((va: any) => {
|
||||
const key = typeof va === 'string'
|
||||
? va
|
||||
: (va?.attribute_id || va?.id || va?._id || va?.code);
|
||||
return (key && allAttrsMap.get(String(key))) || va;
|
||||
})
|
||||
: [];
|
||||
|
||||
const resolvedProductType =
|
||||
@@ -95,6 +115,10 @@ export const useProductFamilyConfiguration = (familyId?: string) => {
|
||||
setFamily(normalizedBlueprint);
|
||||
setAllowedBrands(blueprint.allowedBrands || []);
|
||||
setCategory(blueprint.category || null);
|
||||
// Preserve the hydrated attribute set when the family blueprint only
|
||||
// exposes attributeSetId/attribute_set_id instead of an embedded object.
|
||||
// Re-reading blueprint.attributeSet here used to overwrite the fetched
|
||||
// set with null, so product creation lost the family's inheritance.
|
||||
setAttributeSet(setObj || null);
|
||||
setWorkflow(blueprint.workflow || (blueprint.workflowCode ? { code: blueprint.workflowCode } : null));
|
||||
setAssetFamily(blueprint.assetRequirements || blueprint.assetFamily || null);
|
||||
|
||||
@@ -12,6 +12,7 @@ import { VariantsTab } from '../components/variants/VariantsTab';
|
||||
import { DynamicAttributesSection } from '../components/DynamicAttributesSection';
|
||||
import { ProductAssetsTab } from '../components/ProductAssetsTab';
|
||||
import { useChannel } from '../../channels/hook/useChannel';
|
||||
import type { Channel } from '../../channels/types/channels.types';
|
||||
import { notify } from '../../../services/toast';
|
||||
import { useAttributeSet } from '../../attribute-sets/hook/useAttributeSet';
|
||||
import { useAttribute } from '../../attributes/hook/useAttribute';
|
||||
@@ -160,10 +161,10 @@ export default function NewProduct() {
|
||||
}, [attributeSetsList, attributeSetSearchQuery]);
|
||||
|
||||
const displayChannelsList = useMemo(() => {
|
||||
const defaults = [
|
||||
{ id: 'ch-shopify', name: 'Shopify Storefront', code: 'shopify', description: 'Direct Shopify e-commerce catalog sync', status: 'active' as const, createdAt: '' },
|
||||
{ id: 'ch-amazon', name: 'Amazon Marketplace', code: 'amazon', description: 'Amazon seller central product listings', status: 'active' as const, createdAt: '' },
|
||||
{ id: 'ch-custom-csv', name: 'Custom CSV Feed', code: 'custom_csv', description: 'Exportable CSV/XML syndication pipeline feed', status: 'active' as const, createdAt: '' }
|
||||
const defaults: Channel[] = [
|
||||
{ id: 'ch-shopify', name: 'Shopify Storefront', code: 'shopify', description: 'Direct Shopify e-commerce catalog sync', status: 'active', createdAt: '' },
|
||||
{ id: 'ch-amazon', name: 'Amazon Marketplace', code: 'amazon', description: 'Amazon seller central product listings', status: 'active', createdAt: '' },
|
||||
{ id: 'ch-custom-csv', name: 'Custom CSV Feed', code: 'custom_csv', description: 'Exportable CSV/XML syndication pipeline feed', status: 'active', createdAt: '' }
|
||||
];
|
||||
if (!allChannels || allChannels.length === 0) return defaults;
|
||||
const merged = [...allChannels];
|
||||
@@ -2395,8 +2396,8 @@ export default function NewProduct() {
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
disabled={isInherited || isReadOnlyView}
|
||||
onChange={() => { }} // Handled by outer card click
|
||||
onClick={(e) => e.stopPropagation()} // Prevent double triggers
|
||||
onChange={() => !isInherited && !isReadOnlyView && handleChannelToggle(ch.code)}
|
||||
onClick={(e) => e.stopPropagation()} // Prevent the card from toggling twice
|
||||
className={`w-4 h-4 text-primary rounded border-border focus:ring-primary ${isInherited ? 'cursor-not-allowed opacity-75' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -2608,7 +2609,7 @@ export default function NewProduct() {
|
||||
<div className="divide-y divide-border">
|
||||
{variants.slice(0, VARIANT_PREVIEW).map((v: any, idx: number) => {
|
||||
const axes = (v.values || [])
|
||||
.map((vv: any) => `${vv.axis?.name || vv.attribute_code || 'Axis'}: ${vv.value}`)
|
||||
.map((vv: any) => `${vv.axis?.name || vv.attribute_code || 'Axis'}: ${vv.value ?? vv.value_text ?? '—'}`)
|
||||
.join(' · ');
|
||||
const sku = v.metadata?.sku || v.sku || null;
|
||||
return (
|
||||
@@ -2755,7 +2756,9 @@ export default function NewProduct() {
|
||||
|
||||
{/* ── Channels ── */}
|
||||
{(() => {
|
||||
const inheritedCodes = (family?.channels || []).map((fc: any) => fc.channel_code);
|
||||
const inheritedCodes = (family?.channels || [])
|
||||
.map((fc: any) => typeof fc === 'string' ? fc : (fc.channel_code || fc.code))
|
||||
.filter(Boolean);
|
||||
const optionalCodes = (formik.values.metadata?.channels || []).filter(
|
||||
(c: string) => !inheritedCodes.includes(c)
|
||||
);
|
||||
|
||||
@@ -66,7 +66,7 @@ export default function ProductList() {
|
||||
|
||||
// Stats for KPI cards
|
||||
const stats = useMemo(() => {
|
||||
const published = products.filter(p => p.status === "published").length;
|
||||
const published = products.filter(p => p.status === "published" || p.status === "active").length;
|
||||
const pending = products.filter(p => p.status === "pending").length;
|
||||
const draft = products.filter(p => p.status === "draft").length;
|
||||
const avgCompleteness = products.length > 0
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import ProductList from '../pages/ProductList';
|
||||
import NewProduct from '../pages/NewProduct';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const ProductRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<ProductList />} /> {/* /products */}
|
||||
<Route path="new" element={<NewProduct />} /> {/* /products/new */}
|
||||
<Route path=":id/edit" element={<NewProduct />} /> {/* /products/123/edit */}
|
||||
<Route path="new" element={<ProtectedRoute node="products.items" action="create"><NewProduct /></ProtectedRoute>} /> {/* /products/new */}
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="products.items" action="edit"><NewProduct /></ProtectedRoute>} /> {/* /products/123/edit */}
|
||||
<Route path=":id" element={<NewProduct />} /> {/* /products/123 */}
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -8,8 +8,8 @@ export const RoleRoutes = () => {
|
||||
<ProtectedRoute node="settings.roles">
|
||||
<Routes>
|
||||
<Route path="/" element={<RoleList />} />
|
||||
<Route path="/new" element={<NewRoleForm />} />
|
||||
<Route path="/:id/edit" element={<NewRoleForm />} />
|
||||
<Route path="/new" element={<ProtectedRoute node="settings.roles" action="create"><NewRoleForm /></ProtectedRoute>} />
|
||||
<Route path="/:id/edit" element={<ProtectedRoute node="settings.roles" action="edit"><NewRoleForm /></ProtectedRoute>} />
|
||||
</Routes>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
|
||||
@@ -108,10 +108,10 @@ export default function SettingList() {
|
||||
const cat = activeTab.toLowerCase();
|
||||
const data = await settingsService.getCategorySettings(cat);
|
||||
if (data) {
|
||||
if (data.orgName) setOrgName(data.orgName);
|
||||
if (data.subdomain) setSubdomain(data.subdomain);
|
||||
if (data.requireApproval !== undefined) setRequireApproval(data.requireApproval);
|
||||
if (data.autoPublish !== undefined) setAutoPublish(data.autoPublish);
|
||||
if (typeof data.orgName === 'string') setOrgName(data.orgName);
|
||||
if (typeof data.subdomain === 'string') setSubdomain(data.subdomain);
|
||||
if (typeof data.requireApproval === 'boolean') setRequireApproval(data.requireApproval);
|
||||
if (typeof data.autoPublish === 'boolean') setAutoPublish(data.autoPublish);
|
||||
}
|
||||
} catch (err) {
|
||||
// Silently fallback to defaults
|
||||
|
||||
@@ -1,32 +1,37 @@
|
||||
import axiosInstance from '../../../api/axiosInstance';
|
||||
import apiClient from '../../../api/axiosInstance';
|
||||
import type { Setting, SettingCreateRequest, SettingUpdateRequest } from '../types/settings.types';
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
data: T;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export const settingsService = {
|
||||
getCategorySettings: async (category: string) => {
|
||||
const response: any = await axiosInstance.get(`/settings/by-category/${category}`);
|
||||
return response.data?.data;
|
||||
},
|
||||
updateCategorySettings: async (category: string, data: Record<string, any>) => {
|
||||
const response: any = await axiosInstance.put(`/settings/by-category/${category}`, data);
|
||||
getAll: async (): Promise<Setting[]> => {
|
||||
const response = await apiClient.get<ApiResponse<Setting[]>>('/api/v1/settings');
|
||||
return response.data;
|
||||
},
|
||||
getAll: async (): Promise<any[]> => {
|
||||
const response: any = await axiosInstance.get('/settings');
|
||||
return response.data?.data || response.data || [];
|
||||
},
|
||||
getById: async (id: string): Promise<any> => {
|
||||
const response: any = await axiosInstance.get(`/settings/${id}`);
|
||||
return response.data?.data || response.data;
|
||||
},
|
||||
create: async (data: any): Promise<any> => {
|
||||
const response: any = await axiosInstance.post('/settings', data);
|
||||
return response.data?.data || response.data;
|
||||
},
|
||||
update: async (id: string, data: any): Promise<any> => {
|
||||
const response: any = await axiosInstance.put(`/settings/${id}`, data);
|
||||
return response.data?.data || response.data;
|
||||
},
|
||||
delete: async (id: string): Promise<any> => {
|
||||
const response: any = await axiosInstance.delete(`/settings/${id}`);
|
||||
getById: async (id: string): Promise<Setting> => {
|
||||
const response = await apiClient.get<ApiResponse<Setting>>(`/api/v1/settings/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
create: async (data: SettingCreateRequest): Promise<Setting> => {
|
||||
const response = await apiClient.post<ApiResponse<Setting>>('/api/v1/settings', data);
|
||||
return response.data;
|
||||
},
|
||||
update: async (id: string, data: SettingUpdateRequest): Promise<Setting> => {
|
||||
const response = await apiClient.put<ApiResponse<Setting>>(`/api/v1/settings/${id}`, data);
|
||||
return response.data;
|
||||
},
|
||||
delete: async (id: string): Promise<void> => {
|
||||
await apiClient.delete(`/api/v1/settings/${id}`);
|
||||
},
|
||||
getCategorySettings: async (category: string): Promise<Record<string, unknown>> => {
|
||||
const response = await apiClient.get<ApiResponse<Record<string, unknown>>>(`/api/v1/settings/by-category/${category}`);
|
||||
return response.data;
|
||||
},
|
||||
updateCategorySettings: async (category: string, data: Record<string, unknown>) => {
|
||||
return apiClient.put<ApiResponse<Record<string, unknown>>>(`/api/v1/settings/by-category/${category}`, data);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -118,6 +118,7 @@ export function useTenant() {
|
||||
try {
|
||||
const result = await tenantService.impersonateTenant(tenantId);
|
||||
localStorage.setItem('impersonatedTenantId', tenantId);
|
||||
window.dispatchEvent(new CustomEvent('pim:impersonation-changed', { detail: tenantId }));
|
||||
notify.success(result.message || 'Support impersonation active');
|
||||
return result;
|
||||
} catch (err) {
|
||||
@@ -128,6 +129,7 @@ export function useTenant() {
|
||||
|
||||
const stopImpersonation = () => {
|
||||
localStorage.removeItem('impersonatedTenantId');
|
||||
window.dispatchEvent(new CustomEvent('pim:impersonation-changed', { detail: null }));
|
||||
notify.info('Support impersonation ended');
|
||||
};
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import UnitList from '../pages/UnitList';
|
||||
import NewUnit from '../pages/NewUnit';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const UnitRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<UnitList />} />
|
||||
<Route path="new" element={<NewUnit />} />
|
||||
<Route path=":id/edit" element={<NewUnit />} />
|
||||
<Route path="new" element={<ProtectedRoute node="masters.units" action="create"><NewUnit /></ProtectedRoute>} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="masters.units" action="edit"><NewUnit /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<NewUnit />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -14,6 +14,7 @@ import type { DBRole } from "../services/roles.service";
|
||||
import type { Tenant } from "../../tenants/types/tenant.types";
|
||||
import { Save, AlertCircle, CheckCircle2, Edit2, ArrowLeft } from "lucide-react";
|
||||
import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
|
||||
import { useAppSelector } from "../../../store";
|
||||
|
||||
function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
|
||||
return (
|
||||
@@ -37,6 +38,10 @@ export default function NewUser() {
|
||||
|
||||
const isEdit = Boolean(id) && location.pathname.endsWith("/edit");
|
||||
const isView = Boolean(id) && !isEdit;
|
||||
const currentUser = useAppSelector((state) => state.auth.user);
|
||||
const isPlatformUser = currentUser?.user_type === "platform" || currentUser?.type === "platform";
|
||||
const currentTenantId = currentUser?.tenant_id || currentUser?.tenant?.id;
|
||||
const currentTenantName = currentUser?.tenant?.name || currentUser?.tenant_name || `Tenant #${currentTenantId}`;
|
||||
|
||||
const [roles, setRoles] = useState<DBRole[]>([]);
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
@@ -46,14 +51,16 @@ export default function NewUser() {
|
||||
const [submitSuccess, setSubmitSuccess] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
tenantService.getAll().then(setTenants).catch(console.error);
|
||||
}, []);
|
||||
if (isPlatformUser) {
|
||||
tenantService.getAll().then(setTenants).catch(console.error);
|
||||
}
|
||||
}, [isPlatformUser]);
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
email: "",
|
||||
roleId: "",
|
||||
tenantId: "",
|
||||
tenantId: isPlatformUser ? "" : String(currentTenantId || ""),
|
||||
name: "",
|
||||
phone: "",
|
||||
status: "active" as "active" | "inactive",
|
||||
@@ -108,14 +115,16 @@ export default function NewUser() {
|
||||
|
||||
useEffect(() => {
|
||||
setRolesLoading(true);
|
||||
const tenantId = formik.values.tenantId || null;
|
||||
const tenantId = isPlatformUser
|
||||
? (formik.values.tenantId || null)
|
||||
: (String(currentTenantId || formik.values.tenantId) || null);
|
||||
rolesService
|
||||
.getByTenant(tenantId)
|
||||
.then(setRoles)
|
||||
.catch(console.error)
|
||||
.finally(() => setRolesLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [formik.values.tenantId]);
|
||||
}, [formik.values.tenantId, isPlatformUser, currentTenantId]);
|
||||
|
||||
useEffect(() => {
|
||||
if ((isEdit || isView) && id) {
|
||||
@@ -322,22 +331,36 @@ export default function NewUser() {
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<label className={labelClass}>Select Tenant *</label>
|
||||
<Select
|
||||
name="tenantId"
|
||||
value={formik.values.tenantId}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder="Select a Tenant..."
|
||||
>
|
||||
<option value="">Select a Tenant...</option>
|
||||
<option value="platform">Platform Core (No Tenant)</option>
|
||||
{tenants.map((t) => (
|
||||
<option key={t.id} value={t.id}>{t.tenant_name}</option>
|
||||
))}
|
||||
</Select>
|
||||
{formik.touched.tenantId && formik.errors.tenantId && (
|
||||
<p className={errorClass}><AlertCircle className="w-3 h-3" />{formik.errors.tenantId}</p>
|
||||
{isPlatformUser ? (
|
||||
<>
|
||||
<label className={labelClass}>Select Tenant *</label>
|
||||
<Select
|
||||
name="tenantId"
|
||||
value={formik.values.tenantId}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
placeholder="Select a Tenant..."
|
||||
>
|
||||
<option value="">Select a Tenant...</option>
|
||||
<option value="platform">Platform Core (No Tenant)</option>
|
||||
{tenants.map((t) => (
|
||||
<option key={t.id} value={t.id}>{t.tenant_name}</option>
|
||||
))}
|
||||
</Select>
|
||||
{formik.touched.tenantId && formik.errors.tenantId && (
|
||||
<p className={errorClass}><AlertCircle className="w-3 h-3" />{formik.errors.tenantId}</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label className={labelClass}>Tenant Organization</label>
|
||||
<Input
|
||||
readOnly
|
||||
value={currentTenantName}
|
||||
className="bg-background border-border font-semibold text-foreground"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">New members are automatically added to your organization.</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -347,7 +370,11 @@ export default function NewUser() {
|
||||
return (
|
||||
<label className={labelClass}>
|
||||
Assign Role *
|
||||
{selTenant ? (
|
||||
{!isPlatformUser ? (
|
||||
<span className="ml-2 text-xs font-normal text-primary bg-primary/5 px-2.5 py-0.5 rounded-full font-medium">
|
||||
Showing roles for {currentTenantName}
|
||||
</span>
|
||||
) : selTenant ? (
|
||||
<span className="ml-2 text-xs font-normal text-primary bg-primary/5 px-2.5 py-0.5 rounded-full font-medium">
|
||||
Showing roles for {selTenant.tenant_name}
|
||||
</span>
|
||||
@@ -375,7 +402,7 @@ export default function NewUser() {
|
||||
<option key={r.id} value={r.id}>{r.role_name}</option>
|
||||
))}
|
||||
</Select>
|
||||
{roles.length === 0 && !rolesLoading && formik.values.tenantId && (
|
||||
{roles.length === 0 && !rolesLoading && (formik.values.tenantId || !isPlatformUser) && (
|
||||
<p className="text-xs text-amber-600 mt-1">No roles found for this tenant. Please create a role for this tenant first.</p>
|
||||
)}
|
||||
{formik.touched.roleId && formik.errors.roleId && (
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import UserList from '../pages/UserList';
|
||||
import NewUser from '../pages/NewUser';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const UserRoutes = () => (
|
||||
<Routes>
|
||||
<Route index element={<UserList />} />
|
||||
<Route path="new" element={<NewUser />} />
|
||||
<Route path="new" element={<ProtectedRoute node="settings.users" action="create"><NewUser /></ProtectedRoute>} />
|
||||
<Route path=":id" element={<NewUser />} />
|
||||
<Route path=":id/view" element={<NewUser />} />
|
||||
<Route path=":id/edit" element={<NewUser />} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="settings.users" action="edit"><NewUser /></ProtectedRoute>} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { useFormik } from 'formik';
|
||||
import { PageWrapper } from '../../../components/layouts/PageWrapper';
|
||||
@@ -189,7 +189,7 @@ export default function NewVariant() {
|
||||
}
|
||||
}, [isEdit, isView]);
|
||||
|
||||
const isBasicValid = Boolean(formik.values.sku?.trim() && formik.values.name?.trim() && formik.values.productId && !formik.errors.sku && !formik.errors.name && !formik.errors.productId);
|
||||
const isBasicValid = Boolean(formik.values.sku?.trim() && formik.values.name?.trim() && formik.values.parentProductId && !formik.errors.sku && !formik.errors.name && !formik.errors.parentProductId);
|
||||
|
||||
const isStepAccessible = useCallback((stepNum: number) => {
|
||||
if (isEdit || isView) return true;
|
||||
@@ -203,7 +203,7 @@ export default function NewVariant() {
|
||||
if (!isBasicValid) {
|
||||
formik.setFieldTouched('sku', true);
|
||||
formik.setFieldTouched('name', true);
|
||||
formik.setFieldTouched('productId', true);
|
||||
formik.setFieldTouched('parentProductId', true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,6 +50,12 @@ export default function VariantList() {
|
||||
},
|
||||
{ key: "name", label: "Variant Name", sortable: true },
|
||||
{ key: "parentProductName", label: "Product", sortable: true },
|
||||
{
|
||||
key: "tenantId",
|
||||
label: "Tenant",
|
||||
sortable: true,
|
||||
render: (val: number | string | null) => val ? `Tenant #${val}` : "Platform Global"
|
||||
},
|
||||
{
|
||||
key: "price",
|
||||
label: "Price",
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import VariantList from '../pages/VariantList';
|
||||
import VariantDetail from '../pages/VariantDetail';
|
||||
import { ProtectedRoute } from '../../../components/layouts/ProtectedRoute';
|
||||
|
||||
export const VariantRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route index element={<VariantList />} />
|
||||
<Route path=":id" element={<VariantDetail />} />
|
||||
<Route path=":id/edit" element={<VariantDetail />} />
|
||||
<Route path=":id/edit" element={<ProtectedRoute node="products.variants" action="edit"><VariantDetail /></ProtectedRoute>} />
|
||||
<Route path=":id/view" element={<VariantDetail />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ export interface Variant {
|
||||
sku: string;
|
||||
parentProductId: string;
|
||||
parentProductName: string;
|
||||
tenantId?: number | string | null;
|
||||
name: string;
|
||||
attributes: Record<string, string>;
|
||||
status: VariantStatus;
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ import App from './App';
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<BrowserRouter basename={import.meta.env.BASE_URL}>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
|
||||
+26
-21
@@ -1,9 +1,10 @@
|
||||
// src/routes/AppRoutes.tsx
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { AuthGuard, PlatformGuard } from '../authentication/components/ProtectedRoute';
|
||||
import { AuthGuard, PlatformGuard, TenantWorkspaceGuard } from '../authentication/components/ProtectedRoute';
|
||||
import { ProtectedRoute } from '../components/layouts/ProtectedRoute';
|
||||
import MainLayout from '../components/layouts/MainLayout';
|
||||
import { Login, SignUp, ForgotPassword, ResetPassword, AcceptInvite } from '../authentication/routes';
|
||||
import SSOCallback from '../authentication/pages/SSOCallback';
|
||||
|
||||
// Feature Routes
|
||||
import { DashboardRoutes } from '../features/dashboard/routes/dashboard.routes';
|
||||
@@ -44,6 +45,7 @@ const AppRoutes = () => {
|
||||
<Route path="/forgot-password" element={<ForgotPassword />} />
|
||||
<Route path="/reset-password" element={<ResetPassword />} />
|
||||
<Route path="/accept-invite" element={<AcceptInvite />} />
|
||||
<Route path="/sso/callback" element={<SSOCallback />} />
|
||||
|
||||
{/* Default Redirect */}
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
@@ -55,43 +57,46 @@ const AppRoutes = () => {
|
||||
<Route path="/platform/overview" element={<PlatformGuard><PlatformOverview /></PlatformGuard>} />
|
||||
<Route path="/platform/tenants" element={<PlatformGuard><PlatformTenantsPage /></PlatformGuard>} />
|
||||
|
||||
<Route element={<TenantWorkspaceGuard />}>
|
||||
<Route path="/dashboard/*" element={<DashboardRoutes />} />
|
||||
|
||||
{/* Catalog */}
|
||||
<Route path="/products/*" element={<ProductRoutes />} />
|
||||
<Route path="/families/*" element={<FamilyRoutes />} />
|
||||
<Route path="/categories/*" element={<CategoryRoutes />} />
|
||||
<Route path="/variants/*" element={<VariantRoutes />} />
|
||||
<Route path="/attributes/*" element={<AttributeRoutes />} />
|
||||
<Route path="/attribute-groups/*" element={<AttributeGroupRoutes />} />
|
||||
<Route path="/attribute-sets/*" element={<AttributeSetRoutes />} />
|
||||
<Route path="/products/*" element={<ProtectedRoute node="products.items"><ProductRoutes /></ProtectedRoute>} />
|
||||
<Route path="/families/*" element={<ProtectedRoute node="products.families"><FamilyRoutes /></ProtectedRoute>} />
|
||||
<Route path="/categories/*" element={<ProtectedRoute node="products.categories"><CategoryRoutes /></ProtectedRoute>} />
|
||||
<Route path="/variants/*" element={<ProtectedRoute node="products.variants"><VariantRoutes /></ProtectedRoute>} />
|
||||
<Route path="/attributes/*" element={<ProtectedRoute node="products.attributes"><AttributeRoutes /></ProtectedRoute>} />
|
||||
<Route path="/attribute-groups/*" element={<ProtectedRoute node="products.attributes"><AttributeGroupRoutes /></ProtectedRoute>} />
|
||||
<Route path="/attribute-sets/*" element={<ProtectedRoute node="products.attributes"><AttributeSetRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Masters */}
|
||||
<Route path="/brands/*" element={<BrandRoutes />} />
|
||||
<Route path="/units/*" element={<UnitRoutes />} />
|
||||
<Route path="/brands/*" element={<ProtectedRoute node="masters.brands"><BrandRoutes /></ProtectedRoute>} />
|
||||
<Route path="/units/*" element={<ProtectedRoute node="masters.units"><UnitRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Assets */}
|
||||
<Route path="/assets/*" element={<AssetRoutes />} />
|
||||
<Route path="/asset-types/*" element={<AssetTypeRoutes />} />
|
||||
<Route path="/asset-families/*" element={<AssetFamilyRoutes />} />
|
||||
<Route path="/assets/*" element={<ProtectedRoute node="products.items"><AssetRoutes /></ProtectedRoute>} />
|
||||
<Route path="/asset-types/*" element={<ProtectedRoute node="products.items"><AssetTypeRoutes /></ProtectedRoute>} />
|
||||
<Route path="/asset-families/*" element={<ProtectedRoute node="products.items"><AssetFamilyRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Operations */}
|
||||
<Route path="/workflow/*" element={<WorkflowRoutes />} />
|
||||
<Route path="/channels/*" element={<ChannelRoutes />} />
|
||||
<Route path="/channel-types/*" element={<ChannelTypeRoutes />} />
|
||||
<Route path="/integrations/*" element={<IntegrationRoutes />} />
|
||||
<Route path="/workflow/*" element={<ProtectedRoute node="products.items"><WorkflowRoutes /></ProtectedRoute>} />
|
||||
<Route path="/channels/*" element={<ProtectedRoute node="settings.integrations"><ChannelRoutes /></ProtectedRoute>} />
|
||||
<Route path="/channel-types/*" element={<ProtectedRoute node="settings.integrations"><ChannelTypeRoutes /></ProtectedRoute>} />
|
||||
<Route path="/integrations/*" element={<ProtectedRoute node="settings.integrations"><IntegrationRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Users */}
|
||||
<Route path="/users/tenants/*" element={<TenantRoutes />} />
|
||||
<Route path="/users/roles/*" element={<ProtectedRoute node="settings.roles"><RoleRoutes /></ProtectedRoute>} />
|
||||
<Route path="/users/*" element={<ProtectedRoute node="settings.users"><UserRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Tenant reports are available to tenant users and audited Support Mode only. */}
|
||||
<Route path="/reports/*" element={<ProtectedRoute node="reports"><ReportRoutes /></ProtectedRoute>} />
|
||||
<Route path="/settings/*" element={<ProtectedRoute node="settings.users"><SettingRoutes /></ProtectedRoute>} />
|
||||
</Route>
|
||||
|
||||
{/* Notifications */}
|
||||
<Route path="/notifications/*" element={<NotificationRoutes />} />
|
||||
<Route path="/notifications/*" element={<ProtectedRoute node="notifications"><NotificationRoutes /></ProtectedRoute>} />
|
||||
|
||||
{/* Admin */}
|
||||
<Route path="/reports/*" element={<ReportRoutes />} />
|
||||
<Route path="/settings/*" element={<SettingRoutes />} />
|
||||
</Route>
|
||||
|
||||
{/* Catch-all */}
|
||||
|
||||
@@ -7,6 +7,10 @@ export interface RouteConfig {
|
||||
}
|
||||
|
||||
export const protectedRoutes: RouteConfig[] = [
|
||||
// SaaS control plane
|
||||
{ path: '/platform/overview', title: 'SaaS Dashboard', description: 'Platform health, tenant growth, and aggregate usage' },
|
||||
{ path: '/platform/tenants', title: 'Tenants', description: 'Provision and manage tenant organizations' },
|
||||
|
||||
// Dashboard
|
||||
{ path: '/dashboard', title: 'Dashboard', description: 'Overview of your PIM platform' },
|
||||
|
||||
|
||||
@@ -125,10 +125,10 @@ export const sidebarConfig: SidebarItem[] = [
|
||||
label: 'Channels & Integration',
|
||||
href: '/channels',
|
||||
icon: Radio,
|
||||
permission: 'channels.syndication',
|
||||
permission: 'settings.integrations',
|
||||
children: [
|
||||
{ label: 'Channel Registry', href: '/channels', icon: Radio, permission: 'channels.syndication' },
|
||||
{ label: 'Channel Types', href: '/channel-types', icon: Layers2, permission: 'channels.syndication' },
|
||||
{ label: 'Channel Registry', href: '/channels', icon: Radio, permission: 'settings.integrations' },
|
||||
{ label: 'Channel Types', href: '/channel-types', icon: Layers2, permission: 'settings.integrations' },
|
||||
{ label: 'Integration Hub', href: '/integrations', icon: Plug, permission: 'settings.integrations' },
|
||||
]
|
||||
},
|
||||
@@ -150,11 +150,36 @@ export const sidebarConfig: SidebarItem[] = [
|
||||
{
|
||||
label: 'Settings',
|
||||
href: '/settings',
|
||||
icon: Settings
|
||||
icon: Settings,
|
||||
permission: 'settings.users'
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
href: '/notifications',
|
||||
icon: Bell,
|
||||
permission: 'notifications'
|
||||
},
|
||||
];
|
||||
|
||||
// Phase-1 SaaS control-plane navigation. Tenant catalog modules are exposed to
|
||||
// platform operators only after they explicitly enter audited Support Mode.
|
||||
export const platformSidebarConfig: SidebarItem[] = [
|
||||
{
|
||||
label: 'SaaS Dashboard',
|
||||
href: '/platform/overview',
|
||||
icon: LayoutDashboard,
|
||||
platformOnly: true,
|
||||
},
|
||||
{
|
||||
label: 'Tenants',
|
||||
href: '/platform/tenants',
|
||||
icon: Building2,
|
||||
platformOnly: true,
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
href: '/notifications',
|
||||
icon: Bell,
|
||||
platformOnly: true,
|
||||
},
|
||||
];
|
||||
|
||||
+4
-1
@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
// Supports either a dedicated hostname or a reverse-proxy prefix such as
|
||||
// `/pim_frontend/`. Vite requires a trailing slash for sub-path deployments.
|
||||
base: process.env.VITE_BASE_PATH || '/',
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
proxy: {
|
||||
@@ -12,4 +15,4 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user