TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added modal for developer options

Browse Source
This commit is contained in:
Toba Ojo
2025-12-12 13:51:11 +00:00
parent 430d134037
commit 5dc1d13e25
10 changed files with 3861 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/UI/Footer.tsx
View File

@@ -1,13 +1,25 @@
import { useState } from "react";
import { useGetVersions } from "../../hooks/useGetVersions";
import Logo from "/MAV.svg";
import VersionsModal from "./VersionsModal";
const Footer = () => {
const { versionsQuery } = useGetVersions();
const [isDevModalOpen, setDevModalOpen] = useState(false);
const versionsData = versionsQuery?.data;
const handleClick = () => {
setDevModalOpen(true);
};
return (
<footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
<img src={Logo} alt="Logo" width={100} height={100} />
<p className="text-sm">
{new Date().getFullYear()} MAV Systems &copy; All rights reserved.
</p>
</footer>
<>
<footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
<img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
<p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
</footer>
<VersionsModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionsData} />
</>
);
};

84
src/components/UI/VersionsModal.tsx Normal file
View File

@@ -0,0 +1,84 @@
import type { versionInfo } from "../../types/types";
import ModalComponent from "./ModalComponent";
type VersionsModalProps = {
isDevModalOpen: boolean;
handleClose: () => void;
data: versionInfo;
};
const VersionsModal = ({ isDevModalOpen, handleClose, data }: VersionsModalProps) => {
const uiName = __APP_NAME__;
const uiVersion = __APP_VERSION__;
const commitID = __GIT_COMMIT__;
const commitTimeStamp = __GIT_TIMESTAMP__;
return (
<ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
<div className="flex justify-end">
<button
onClick={handleClose}
className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition mb-4"
>
Close
</button>
</div>
<div className="space-y-6 p-5">
<div className="border-b border-gray-600 pb-3">
<h2 className="text-2xl font-bold text-gray-100">System Information</h2>
<p className="text-sm text-gray-400 mt-1">Application version details</p>
</div>
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
<span className="text-gray-400 text-sm">Name</span>
<span className="text-gray-200 font-mono font-semibold">{uiName}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Version</span>
<span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Build Time</span>
<span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
</div>
</div>
</div>
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
<span className="text-gray-400 text-sm"> Name</span>
<span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Version</span>
<span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
{data?.revision || "N/A"}
</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Build Time</span>
<span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">MAC Address</span>
<span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
</div>
</div>
</div>
</div>
</ModalComponent>
);
};
export default VersionsModal;