diff --git a/backoffice/components/pages/file-ingestion/page.tsx b/backoffice/components/pages/file-ingestion/page.tsx
index 98a99674..63ea8e9e 100644
--- a/backoffice/components/pages/file-ingestion/page.tsx
+++ b/backoffice/components/pages/file-ingestion/page.tsx
@@ -1,6 +1,48 @@
-import React, { useEffect, useState } from 'react';
-import { Box, H2, Text, Button, Tabs, Tab, DropZone, Icon } from '@adminjs/design-system';
+import React, { useLayoutEffect, useState } from 'react';
+import { Box, H2, Text, Button, Tabs, Tab, DropZone, Icon, H3, H4 } from '@adminjs/design-system';
import { ApiClient } from 'adminjs';
+import styled from 'styled-components';
+
+
+const CustomAlert = ({ title, message, onClose }) => {
+ const Overlay = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center; /* Center horizontally */
+ align-items: center; /* Center vertically */
+ background: rgba(255, 255, 255, 0.7);
+ z-index: 999;
+`;
+
+const AlertBox = styled.div`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ border: 1px solid #ccc;
+ padding: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ text-align: left;
+ overflow: auto;
+`;
+
+ return (
+ <>
+
+
+ {title}
+ {message}
+
+
+
+ >
+ );
+};
const UploadTab = ({props: { id, label, file, handleFileUpload, handleSubmit }}) => {
return (
@@ -26,27 +68,40 @@ const FileIngestion = () => {
const [activeTab, setActiveTab] = useState('first');
const [fileOne, setFileOne] = useState(null);
const [fileTwo, setFileTwo] = useState(null);
- const [successMsg, setSuccessMsg] = useState("");
- const [errorMsg, setErrorMsg] = useState("");
+ const [alertData, setAlertData] = useState<{ title: string, message?: string, messages?: string[]} | null>();
// Weird Adminjs setup
const adminjsClient = new ApiClient();
const [config, setConfig] = useState<{ apiUrl: string } | null>(null);
- adminjsClient.getPage({ pageName: 'fileIngestion' }).then((response: any) => {
- setConfig(response.data.config);
- });
+ useLayoutEffect(() => {
+ adminjsClient.getPage({ pageName: 'fileIngestion' }).then((response: any) => {
+ setConfig(response.data.config);
+ });
+ }, [])
const handleFileUpload = (tab: string, file: File) => {
+ let endPoint = config!.apiUrl;
if (tab === 'first') {
setFileOne(file);
+ endPoint += '/admin/upload/xlsx';
} else if (tab === 'second') {
setFileTwo(file);
+ endPoint += '/admin/upload/scorecard';
}
};
const handleSubmit = async (tab: string) => {
- const file = tab === 'first' ? fileOne : fileTwo;
+ let endPoint = config!.apiUrl;
+ let file;
+ if (tab === 'first') {
+ endPoint += '/admin/upload/xlsx';
+ file = fileOne;
+ } else if (tab === 'second') {
+ endPoint += '/admin/upload/scorecard';
+ file = fileTwo;
+ }
+
if (!file) {
alert('Please upload a file first!');
return;
@@ -57,18 +112,24 @@ const FileIngestion = () => {
try {
// /admin is not exposed when the app runs behind a reverse proxy
- const response = await fetch(`${config!.apiUrl}/admin/upload/xlsx`, {
+ const response = await fetch(endPoint, {
method: 'POST',
body: formData,
credentials: 'include',
});
if(response.status === 201) {
- alert('The file was successfully uploaded and processed.');
+ setAlertData({ title: '✅ Done', message: 'The file was successfully uploaded.' });
+ } else if (response.status === 409) {
+ const body = await response.json();
+ const errorMsgs = body.errors.map((error: {title: string}) => {
+ return error.title
+ });
+ setAlertData({ title: `❌ Error`, message: errorMsgs });
} else {
- alert('An error occurred while uploading the file.');
+ setAlertData({ title: '❌ Error', message: 'An error occurred while uploading the file.' });
}
} catch (error) {
- alert(`An error occurred while uploading the file: ${error.message}`);
+ setAlertData({ title: '❌ Error', message: error.message });
}
};
@@ -105,6 +166,11 @@ const FileIngestion = () => {
/>
+ {alertData && {setAlertData(null)}}
+ />}
);
};