fixed the scroll to top issue

frontend/public/manifest.json

@@ -3,12 +3,12 @@
 	"name": "Create React App Sample",
 	"icons": [
 		{
-			"src": "favicon.ico",
+			"src": "logo.png",
 			"sizes": "64x64 32x32 24x24 16x16",
 			"type": "image/x-icon"
 		},
 		{
-			"src": "logo192.png",
+			"src": "logo.png",
 			"type": "image/png",
 			"sizes": "192x192"
 		},

frontend/src/components/ScrollToTop.js

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+export default function ScrollToTop() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return null;
+}

frontend/src/index.jsx

@@ -207,6 +207,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 	<React.StrictMode>
 		<UserProvider>
+			{/* <ScrollToTop /> */}
 			<RouterProvider router={router} />
 		</UserProvider>
 	</React.StrictMode>

frontend/src/pages/AboutUs/index.jsx

@@ -7,9 +7,11 @@ import blueSquaremob from '../../assets/images/about-us/bluesquaremob.png';
 import mission from '../../assets/images/about-us/mission.png';
 import valueImg from '../../assets/images/about-us/values.png';
 import NavigationBar from '../../components/NavigationBar';
+import ScrollToTop from '../../components/ScrollToTop';
 
 const AboutUs = () => (
 	<div>
+		<ScrollToTop />
 		<NavigationBar />
 		<section className="lg:pt-24 lg:pb-24 lg:pl-36 lg:pr-36 p-8 pb-16 bg-[#F2F4F7] z-0 ">
 			<div className="flex lg:flex-row lg:gap-48  items-center flex-col justify-between">

frontend/src/pages/AccountBalanceReport/index.jsx

@@ -1,5 +1,11 @@
 import React from 'react';
+import ScrollToTop from '../../components/ScrollToTop';
 
-const AccountBalanceReport = () => <div>AccountBalanceReport</div>;
+const AccountBalanceReport = () => (
+	<div>
+		<ScrollToTop />
+		AccountBalanceReport
+	</div>
+);
 
 export default AccountBalanceReport;

frontend/src/pages/BlogPost/index.jsx

@@ -4,10 +4,12 @@ import BlogPreview from '../../components/BlogPreview';
 import { otherPost } from '../Blogs/fakedata/index';
 import NavigationBar from '../../components/NavigationBar';
 import Footer from '../../components/Footer';
+import ScrollToTop from '../../components/ScrollToTop';
 
 function BlogPost() {
 	return (
 		<>
+			<ScrollToTop />
 			<NavigationBar />
 			<div className=" px-[72px] max-[675px]:px-6">
 				<div className="flex flex-col justify-center items-center mt-[50px] md:mt-[102px] mb-[72px]">

frontend/src/pages/Blogs/Index.jsx

@@ -5,10 +5,12 @@ import { blogList } from './fakedata/index';
 import NavigationBar from '../../components/NavigationBar';
 import Footer from '../../components/Footer';
 import SearchBar from '../../components/Blogs/searchBar';
+import ScrollToTop from '../../components/ScrollToTop';
 
 function Blogs() {
 	return (
 		<>
+			<ScrollToTop />
 			<NavigationBar />
 			<div className=" md:bg-[#D1E9FF] pt-6 md:pt-16 pb-16">
 				<h1 className="text-[#101828] font-semibold leading-[60px] text-4xl md:text-5xl text-center pb-3 md:pb-6">
@@ -18,9 +20,8 @@ function Blogs() {
 					Get access to the latest industry news, interviews, technologies, and
 					resources.
 				</p>
-
 
-			<SearchBar />
+				<SearchBar />
 			</div>
 			<div className="pt-6 pb-[278px]">
 				<div className="px-20 max-sm:px-0">

frontend/src/pages/Careers/index.jsx

@@ -13,6 +13,7 @@ import briefCase from '../../assets/images/careers-page/Suitcase 1.png';
 import location from '../../assets/images/careers-page/location.png';
 import NavigationBar from '../../components/NavigationBar';
 import Footer from '../../components/Footer';
+import ScrollToTop from '../../components/ScrollToTop';
 
 const Careers = () => {
 	const teams = [
@@ -111,6 +112,7 @@ const Careers = () => {
 
 	return (
 		<>
+			<ScrollToTop />
 			<NavigationBar />
 			<div>
 				<div className="text-center bg-hero bg-cover bg-no-repeat h-[460px] md:h-[600px] bg-center">

frontend/src/pages/Contact/index.jsx

@@ -3,9 +3,11 @@ import { Form } from '../../components/ContactForm/Form';
 import ContactUsImage from '../../assets/images/contact-page-images/contact-page-image.png';
 import NavigationBar from '../../components/NavigationBar/index';
 import Footer from '../../components/Footer/index';
+import ScrollToTop from '../../components/ScrollToTop';
 
 const ContactUs = () => (
 	<>
+		<ScrollToTop />
 		<NavigationBar />
 
 		<main className="bg-very-light-blue flex flex-col justify-center items-center py-[50px] px-[30px] ">

frontend/src/pages/Dashboard/AccountReport/AccountReport.jsx

@@ -5,6 +5,8 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { useAuth } from '../../../Store/Context';
 import ok from '../../../assets/Ok.png';
 import './accountReport.css';
+import ScrollToTop from '../../../components/ScrollToTop';
+
 
 function AccountReport() {
 	const { localData3, rError, loading } = useAuth();
@@ -13,6 +15,7 @@ function AccountReport() {
 
 	return (
 		<div className="space-y-[1em] mb-[5em]">
+      <ScrollToTop />
 			<div className="md:flex">
 				<div className="flex ">
 					<div className=" text-slate-500 font-semibold hover:text-black">

frontend/src/pages/Dashboard/AccountReport/AccountReportDetail/AccountReportDetail.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import ScrollToTop from '../../../../components/ScrollToTop';
 
 function AccountReportDetail() {
 	return (
 		<div className="report_main  ">
+			<ScrollToTop />
 			<div className="report-name text-sm font-md flex items-center my-[1em]">
 				<p>Segun Shegs</p>
 			</div>

frontend/src/pages/Dashboard/DashboardMain/DashboardMain.jsx

@@ -2,11 +2,17 @@ import React from 'react';
 import { useAuth } from '../../../Store/Context';
 import Upload from './UploadFile/Upload';
 import UploadReady from './UploadReady/UploadReady';
+import ScrollToTop from '../../../components/ScrollToTop';
 
 function DashboardMain() {
 	const { localFile } = useAuth();
 
-	return <div>{localFile.length < 1 ? <Upload /> : <UploadReady />}</div>;
+	return (
+		<div>
+			<ScrollToTop />
+			{localFile.length < 1 ? <Upload /> : <UploadReady />}
+		</div>
+	);
 }
 
 export default DashboardMain;

frontend/src/pages/Dashboard/DashboardMain/UploadFile/Upload.jsx

@@ -1,7 +1,8 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import document from '../../../../assets/images/DashboardImages/upload/document.png';
 import './upload.css';
 import { useAuth } from '../../../../Store/Context';
+import ScrollToTop from '../../../../components/ScrollToTop';
 
 function Upload() {
 	const { dragHandler, dropHandler, setLocalFile, setFileDropped } = useAuth();
@@ -12,6 +13,7 @@ function Upload() {
 
 	return (
 		<div className="w-full flex flex-col items-center mt-[3em] md:mt-[5em]">
+      <ScrollToTop />
 			<h1 className="font-bold text-2xl my-[1em] ">Upload Account Statement</h1>
 			<div
 				onDrop={dropHandler}

frontend/src/pages/Dashboard/ImportData/Hero/ImportData.jsx

@@ -9,8 +9,10 @@ import { Link, useNavigate } from 'react-router-dom';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { useAuth } from '../../../../Store/Context';
 import ok from '../../../../assets/Ok.png';
+import ScrollToTop from '../../../../components/ScrollToTop';
 import signedDocument from '../../../../assets/images/DashboardImages/upload/signed document.png';
 
+
 function ImportData() {
 	const [showDisplay, setShowDisplay] = useState(false);
 	const [showSort, setShowSortDisplay] = useState(false);
@@ -58,6 +60,7 @@ function ImportData() {
 
 	return (
 		<div className="w-full h-max pb-[10em]">
+    <ScrollToTop />
 			<div className="space-y-[1em]">
 				<div className="hidden md:flex">
 					<div className="flex ">

frontend/src/pages/Dashboard/ImportData/Hero/Reconcile.jsx

@@ -14,6 +14,7 @@ function Reconcile() {
 	const [showSort, setShowSortDisplay] = useState(false);
 	const [showDisplay2, setShowDisplay2] = useState(false);
 	const [showSort2, setShowSortDisplay2] = useState(false);
+	const [message, errorMessage] = useState(false);
 	const navigate = useNavigate();
 	const { localData, fileDropped, localData2, fileDropped2, reconcileData } =
 		useAuth();
@@ -40,6 +41,12 @@ function Reconcile() {
 
 	const handleSubmit = async () => {
 		reconcileData();
+
+		errorMessage(true);
+
+		setTimeout(() => {
+			errorMessage(false);
+		}, 5000);
 		navigate('/dashboard/accountreport');
 	};
 
@@ -269,17 +276,23 @@ function Reconcile() {
 			</div>
 
 			{/* sync to data baseButton */}
-			<div className="flex justify-center pb-[5em] mt-[1em] ">
+			<div className="max-w-screen-xl mx-auto text-center pb-[5em] mt-[1em] ">
 				<button
 					type="submit"
 					onClick={(e) => {
 						e.preventDefault();
 						handleSubmit();
 					}}
-					className="bg-[#1849A9]  hover:bg-[#516ba0] text-white text-sm py-2 px-2  w-[70%] md:w-[60%] lg:w-[30%] active:color-#1849A9"
+					className="mx-auto bg-[#1849A9] hover:bg-[#516ba0] text-white text-sm py-2 px-2  w-[70%] md:w-[60%] lg:w-[30%] active:color-#1849A9"
 				>
 					Reconcile
 				</button>
+				<br />
+				{message && (
+					<small className="text-sm mx-auto w-40 text-[#FF9494] text-center mt-0 mb-10">
+						One or more files missing: Please upload the file to reconcile
+					</small>
+				)}
 			</div>
 		</div>
 	);

frontend/src/pages/Documentation/index.jsx

@@ -7,9 +7,11 @@ import stepthreeMobile from '../../assets/images/documentation/stepthreeMobile.p
 import stepTwo from '../../assets/images/documentation/steptwo.png';
 import stepThree from '../../assets/images/documentation/stepthree.png';
 import Footer from '../../components/Footer';
+import ScrollToTop from '../../components/ScrollToTop'
 
 const Documentation = () => (
 	<div className="text-gray-800 bg-white ">
+		<ScrollToTop />
 		<NavigationBar />
 		<header className="header bg-[#2E90FA] md:bg-[#D7DBDF] text-white md:text-[#101828] shadow py-4 px-4">
 

frontend/src/pages/ErrorProcessing/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FaGreaterThan } from 'react-icons/fa';
 import DashBoardHeader from '../../components/DashBoardHeader';
+import ScrollToTop from '../../components/ScrollToTop';
 import NavigationBar from '../../components/NavigationBar';
 
 const styles = {
@@ -19,13 +20,15 @@ const processData = {
 
 const ErrorProcessing = () => (
 	<>
+    <ScrollToTop />
 		<NavigationBar />
 		<main className="m-[65px]">
 			<div className="processing-text">
 				<h1 className="font-['Lexend'] font-semibold text-[28px] leading-[136.02%] text-[#344054]">
 					Processing...
 				</h1>
 				<p className="font-['Lexend'] font-medium text-[20px] leading-[136.52%] text-[#667085]">
+
 					Our system is currently reconciling your records and will alert you of
 					any errors. Please be patient.
 				</p>

frontend/src/pages/Faqs/index.jsx

@@ -7,6 +7,7 @@ import faqArray from '../../components/Faqs/faqArray';
 import Accordion from '../../components/Faqs/index';
 import Footer from '../../components/Footer';
 import NavigationBar from '../../components/NavigationBar';
+import ScrollToTop from '../../components/ScrollToTop';
 
 const data = {
 	rows: [
@@ -113,6 +114,7 @@ const Faqx = () => {
 
 	return (
 		<div>
+			<ScrollToTop />
 			<NavigationBar />
 			<div className="bg-[#F9FAFB] w-full flex justify-center">
 				<div className=" w-full font-body py-[3em] px-[1em]">

frontend/src/pages/Gpt-3/index.jsx

@@ -4,10 +4,12 @@ import Footer from '../../components/Footer';
 import NavigationBar from '../../components/NavigationBar';
 import Banner from '../../assets/images/gpt3/banner.png';
 import LapTop from '../../assets/images/gpt3/laptop.png';
+import ScrollToTop from '../../components/ScrollToTop';
 
 function Gpt3() {
 	return (
 		<div>
+			<ScrollToTop />
 			<NavigationBar />
 			<img src={Banner} className="w-[100vw]" alt="banner" />
 			<div className="py-20 mt-20">

frontend/src/pages/Help/index.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import NavigationBar from '../../components/NavigationBar';
 import Footer from '../../components/Footer';
 import heroImage from '../../assets/images/HelpCenter/hero.png';
+import ScrollToTop from '../../components/ScrollToTop'
 
 function Help() {
 	return (
 		<div>
+			<ScrollToTop />
 			<NavigationBar />
 			<div className="w-full text-[#101828]">
 				{/* Hero Section  */}

frontend/src/pages/Privacy/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import padlock from '../../assets/images/Privacy/padlock.svg';
 import Key from '../../assets/images/Privacy/Key.svg';
 import Camera from '../../assets/images/Privacy/camera.svg';
@@ -9,9 +8,11 @@ import photo2 from '../../assets/images/Privacy/photo2.png';
 import photo3 from '../../assets/images/Privacy/photo3.png';
 import Footer from '../../components/Footer';
 import Navbar from '../../components/NavigationBar';
+import ScrollToTop from '../../components/ScrollToTop';
 
 const Privacy = () => (
 	<div>
+		<ScrollToTop />
 		<Navbar />
 		<div className="mx-auto">
 			<div className="">
@@ -77,7 +78,7 @@ const Privacy = () => (
 							src={padlock}
 							alt="padlock"
 						/>
-						<p className="text-xl text-blue-600 text-center font-bold pt-6">
+						<p className="text-2xl text-blue-600 text-center font-bold pt-6">
 							Security
 						</p>
 					</div>