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)}} + />} ); };