([]);
+ const open = (content: ToastType) => {
+ setToasts((prevState) => [
+ ...prevState,
+ { id: generateUEID(), ...content },
+ ]);
+ };
+ const close = (id: string) => {
+ setToasts((prevState) => prevState.filter((toast) => toast.id === id));
+ };
+
+ const contextValue = useMemo(() => ({ open }), []);
+
+ return (
+
+
+ {children}
+ {toasts.map((toast) => (
+ close(toast.id)} />
+ ))}
+
+
+
+ );
+};
diff --git a/GUI/src/enums/commonEnums.ts b/GUI/src/enums/commonEnums.ts
new file mode 100644
index 00000000..79f9444f
--- /dev/null
+++ b/GUI/src/enums/commonEnums.ts
@@ -0,0 +1,18 @@
+export enum ToastTypes {
+ SUCCESS = 'success',
+ ERROR = 'error',
+}
+
+export enum ButtonAppearanceTypes {
+ PRIMARY = 'primary',
+ SECONDARY = 'secondary',
+ ERROR = 'error',
+ TEXT = 'text',
+}
+
+export enum LabelType {
+ SUCCESS = 'success',
+ ERROR = 'error',
+ INFO = 'info',
+ WARNING = 'warning',
+}
diff --git a/GUI/src/enums/correctedTextsEnums.ts b/GUI/src/enums/correctedTextsEnums.ts
new file mode 100644
index 00000000..9ed55948
--- /dev/null
+++ b/GUI/src/enums/correctedTextsEnums.ts
@@ -0,0 +1,5 @@
+export enum CorrectedTextsModalContexts {
+ EXPORT = 'export',
+ SUCCESS = 'success',
+ ERROR = 'error'
+ }
\ No newline at end of file
diff --git a/GUI/src/enums/dataModelsEnums.ts b/GUI/src/enums/dataModelsEnums.ts
new file mode 100644
index 00000000..e104a4b6
--- /dev/null
+++ b/GUI/src/enums/dataModelsEnums.ts
@@ -0,0 +1,31 @@
+export enum TrainingStatus {
+ NOT_TRAINED = 'not trained',
+ TRAINING_INPROGRESS = 'training in-progress',
+ TRAINED = 'trained',
+ RETRAINING_NEEDED = 'retraining needed',
+ UNTRAINABLE = 'untrainable',
+}
+
+export enum Maturity {
+ PRODUCTION = 'production ready',
+ STAGING = 'staging',
+ DEVELOPMENT = 'development',
+ TESTING = 'testing',
+}
+
+export enum Platform {
+ JIRA = 'jira',
+ OUTLOOK = 'outlook',
+ UNDEPLOYED = 'undeployed',
+}
+
+export enum UpdateType {
+ MAJOR = 'major',
+ MINOR = 'minor',
+ MATURITY_LABEL = 'maturityLabel',
+}
+
+export enum TrainingSessionsStatuses {
+ TRAINING_SUCCESS_STATUS = 'Model Trained And Deployed',
+ TRAINING_FAILED_STATUS = 'Training Failed'
+}
\ No newline at end of file
diff --git a/GUI/src/enums/datasetEnums.ts b/GUI/src/enums/datasetEnums.ts
new file mode 100644
index 00000000..1f33c83e
--- /dev/null
+++ b/GUI/src/enums/datasetEnums.ts
@@ -0,0 +1,56 @@
+export enum ValidationStatus {
+ SUCCESS = 'success',
+ FAIL = 'fail',
+ UNVALIDATED = 'unvalidated',
+ IN_PROGRESS = 'in-progress',
+}
+
+export enum DatasetViewEnum {
+ LIST = 'list',
+ INDIVIDUAL = 'individual',
+}
+
+export enum CreateDatasetGroupModals {
+ SUCCESS = 'SUCCESS',
+ VALIDATION_ERROR = 'VALIDATION_ERROR',
+ NULL = 'NULL',
+}
+
+export enum ViewDatasetGroupModalContexts {
+ EXPORT_MODAL = 'EXPORT_MODAL',
+ IMPORT_MODAL = 'IMPORT_MODAL',
+ PATCH_UPDATE_MODAL = 'PATCH_UPDATE_MODAL',
+ DELETE_ROW_MODAL = 'DELETE_ROW_MODAL',
+ CONFIRMATION_MODAL = 'CONFIRMATION_MODAL',
+ NULL = 'NULL',
+}
+
+export enum UpdatePriority {
+ MAJOR = 'MAJOR',
+ MINOR = 'MINOR',
+ PATCH = 'PATCH',
+ NULL = 'NULL',
+}
+
+export enum ImportExportDataTypes {
+ XLSX = 'xlsx',
+ JSON = 'json',
+ YAML = 'yaml',
+}
+
+export enum StopWordImportOptions {
+ ADD = 'add',
+ DELETE = 'delete',
+}
+
+export enum ValidationErrorTypes {
+ NAME = 'NAME',
+ CLASS_HIERARCHY = 'CLASS_HIERARCHY',
+ VALIDATION_CRITERIA = 'VALIDATION_CRITERIA',
+ NULL = 'NULL',
+}
+
+export enum ValidationSessionsStatuses {
+ VALIDATION_SUCCESS_STATUS = 'Success',
+ VALIDATION_FAILED_STATUS = 'Fail'
+}
\ No newline at end of file
diff --git a/GUI/src/enums/roles.ts b/GUI/src/enums/roles.ts
new file mode 100644
index 00000000..b5cfd8a6
--- /dev/null
+++ b/GUI/src/enums/roles.ts
@@ -0,0 +1,4 @@
+export enum ROLES {
+ ROLE_ADMINISTRATOR = 'ROLE_ADMINISTRATOR',
+ ROLE_MODEL_TRAINER = 'ROLE_MODEL_TRAINER',
+}
diff --git a/GUI/src/hoc/with-authorization.tsx b/GUI/src/hoc/with-authorization.tsx
new file mode 100644
index 00000000..9874ffa9
--- /dev/null
+++ b/GUI/src/hoc/with-authorization.tsx
@@ -0,0 +1,29 @@
+import { ROLES } from 'enums/roles';
+import React from 'react';
+import useStore from 'store';
+
+function withAuthorization(
+ WrappedComponent: React.ComponentType
,
+ allowedRoles: ROLES[] = []
+): React.FC
{
+ const CheckRoles: React.FC
= ({ ...props }: P) => {
+ const userInfo = useStore((x) => x.userInfo);
+ const allowed = allowedRoles?.some((x) =>
+ userInfo?.authorities.includes(x)
+ );
+
+ if (!userInfo) {
+ return Loading...;
+ }
+
+ if (!allowed) {
+ return Unauthorized Access;
+ }
+
+ return ;
+ };
+
+ return CheckRoles;
+}
+
+export default withAuthorization;
diff --git a/GUI/src/hooks/useDialog.tsx b/GUI/src/hooks/useDialog.tsx
new file mode 100644
index 00000000..c38ed60a
--- /dev/null
+++ b/GUI/src/hooks/useDialog.tsx
@@ -0,0 +1,4 @@
+import { DialogContext } from 'context/DialogContext';
+import { useContext } from 'react';
+
+export const useDialog = () => useContext(DialogContext);
diff --git a/GUI/src/hooks/useDocumentEscapeListener.tsx b/GUI/src/hooks/useDocumentEscapeListener.tsx
new file mode 100644
index 00000000..8f7b3b6b
--- /dev/null
+++ b/GUI/src/hooks/useDocumentEscapeListener.tsx
@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+
+const useDocumentEscapeListener = (callback: () => void) => {
+ useLayoutEffect(() => {
+ const handleKeyUp = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ callback();
+ }
+ };
+
+ document.addEventListener('keyup', handleKeyUp);
+
+ return () => document.removeEventListener('keyup', handleKeyUp);
+ }, [callback]);
+};
+
+export default useDocumentEscapeListener;
diff --git a/GUI/src/hooks/useOptionLists.tsx b/GUI/src/hooks/useOptionLists.tsx
new file mode 100644
index 00000000..f860f166
--- /dev/null
+++ b/GUI/src/hooks/useOptionLists.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+// maps translations with dropdown options
+const useOptionLists = () => {
+ const { t } = useTranslation();
+
+ const dataTypesConfigs = [
+ { label: t('optionLists.text'), value: 'text' },
+ { label: t('optionLists.numbers'), value: 'numbers' },
+ { label: t('optionLists.dateTimes'), value: 'datetime' },
+ { label: t('optionLists.email'), value: 'email' },
+ { label: t('optionLists.fileAttachements'), value: 'file_attachments' },
+ ];
+
+ const importOptionsConfigs = [
+ { label: t('optionLists.importToAdd'), value: 'add' },
+ { label: t('optionLists.importToDelete'), value: 'delete' },
+ ];
+
+ return {
+ dataTypesConfigs,
+ importOptionsConfigs,
+ };
+};
+
+export default useOptionLists;
diff --git a/GUI/src/hooks/useToast.tsx b/GUI/src/hooks/useToast.tsx
new file mode 100644
index 00000000..51715549
--- /dev/null
+++ b/GUI/src/hooks/useToast.tsx
@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ToastContext } from 'context/ToastContext';
+
+export const useToast = () => useContext(ToastContext);
diff --git a/GUI/src/main.tsx b/GUI/src/main.tsx
new file mode 100644
index 00000000..a44091f9
--- /dev/null
+++ b/GUI/src/main.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import {
+ QueryClient,
+ QueryClientProvider,
+ QueryFunction,
+} from '@tanstack/react-query';
+
+import App from './App';
+import api from 'services/api';
+import apiDev from 'services/api-dev';
+import { ToastProvider } from 'context/ToastContext';
+import 'styles/main.scss';
+import '../i18n';
+import { CookiesProvider } from 'react-cookie';
+import { DialogProvider } from 'context/DialogContext';
+
+const defaultQueryFn: QueryFunction | undefined = async ({ queryKey }) => {
+ if (queryKey.includes('prod')) {
+ const { data } = await apiDev.get(queryKey[0] as string);
+ return data;
+ }
+
+ const { data } = await api.get(queryKey[0] as string);
+ return data;
+};
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ queryFn: defaultQueryFn,
+ },
+ },
+});
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/GUI/src/model/ruuter-response-model.ts b/GUI/src/model/ruuter-response-model.ts
new file mode 100644
index 00000000..07cafc1c
--- /dev/null
+++ b/GUI/src/model/ruuter-response-model.ts
@@ -0,0 +1,11 @@
+export interface RuuterResponse {
+ data: Record | null;
+ error: string | null;
+}
+
+export interface CustomJwtExtendResponse {
+ data: {
+ custom_jwt_extend: string;
+ };
+ error: null;
+}
diff --git a/GUI/src/pages/LoadingScreen/LoadingScreen.scss b/GUI/src/pages/LoadingScreen/LoadingScreen.scss
new file mode 100644
index 00000000..c45e573a
--- /dev/null
+++ b/GUI/src/pages/LoadingScreen/LoadingScreen.scss
@@ -0,0 +1,20 @@
+/* Loader container */
+.loader {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border: 8px solid #f3f3f3; /* Light grey */
+ border-top: 8px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ animation: spin 1.5s linear infinite;
+ }
+
+ /* Spin animation */
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
\ No newline at end of file
diff --git a/GUI/src/pages/LoadingScreen/LoadingScreen.tsx b/GUI/src/pages/LoadingScreen/LoadingScreen.tsx
new file mode 100644
index 00000000..3f8add92
--- /dev/null
+++ b/GUI/src/pages/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import './LoadingScreen.scss'
+
+const LoadingScreen: FC = () => {
+ return (
+
+ );
+};
+
+export default LoadingScreen;
\ No newline at end of file
diff --git a/GUI/src/pages/Unauthorized/unauthorized.scss b/GUI/src/pages/Unauthorized/unauthorized.scss
new file mode 100644
index 00000000..3c1bb0ff
--- /dev/null
+++ b/GUI/src/pages/Unauthorized/unauthorized.scss
@@ -0,0 +1,30 @@
+.unauthorized-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ background-color: #f0f2f5;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+
+ .unauthorized-card {
+ background-color: #fff;
+ padding: 40px;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ max-width: 400px;
+ width: 100%;
+ }
+
+ .unauthorized-header {
+ font-size: 2.5em;
+ color: #333;
+ margin-bottom: 20px;
+ }
+
+ .unauthorized-message {
+ font-size: 1.2em;
+ color: #555;
+ }
diff --git a/GUI/src/pages/Unauthorized/unauthorized.tsx b/GUI/src/pages/Unauthorized/unauthorized.tsx
new file mode 100644
index 00000000..088fd80b
--- /dev/null
+++ b/GUI/src/pages/Unauthorized/unauthorized.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import './unauthorized.scss';
+import { useTranslation } from 'react-i18next';
+
+const Unauthorized: FC = () => {
+ const { t } = useTranslation();
+ return (
+
+
+
{t('global.unAuthorized')}
+
{t('global.unAuthorizedDesc')}
+
+
+ {t('userManagement.table.actions') ?? ''}
+
+ ),
+ cell: (props) => (
+
+ ),
+ meta: {
+ size: '1%',
+ },
+ }),
+ ],
+ [columnHelper, t]
+ );
+
+ if (isLoading) return ;
+
+ return (
+
+
+
+
{t('userManagement.title')}
+
+
+
+ {!isLoading && (
+ {
+ if (
+ state?.pageIndex === pagination?.pageIndex &&
+ state?.pageSize === pagination?.pageSize
+ )
+ return;
+ setPagination(state);
+ fetchUsers(state, sorting);
+ }}
+ sorting={sorting}
+ setSorting={(state: SortingState) => {
+ setSorting(state);
+ fetchUsers(pagination, state);
+ }}
+ pagesCount={totalPages}
+ isClientSide={false}
+ />
+ )}
+
+ {isLoading && }
+
+ {newUserModal && (
+ setNewUserModal(false)}
+ />
+ )}
+
+ {editableRow && (
+ setEditableRow(null)}
+ isModalOpen={editableRow !== null}
+ />
+ )}
+
+
+