Files
pedwfrontend/pages/admin/index.js
T
Robert Bond 18a05d4be8 Merged PR 2357: dashboards in admin for appeals and lpa
dashboards in admin for appeals and lpa

Related work items: #23527
2026-05-29 16:35:27 +00:00

264 lines
11 KiB
JavaScript

// pages/admin/storage.js
import { useState } from "react";
import Head from "next/head";
import CookieBanner from "../../components/cookieBanner";
import Header from "../../components/header";
import Footer from "../../components/footer";
import { connect } from "react-redux";
import { wrapper } from "../../store/store";
import StorageTab from "../../components/admin/tabs/storage";
import AccountsTab from "../../components/admin/tabs/accounts";
import AppealsTab from "../../components/admin/tabs/appeals";
import DocumentsTab from "../../components/admin/tabs/documents";
import AppealsWithStatusTab from "../../components/admin/tabs/appealsWithStatus";
import AppealStatusDashboard from "../../components/admin/tabs/appealsDashboard";
import AppealLpaStatusDashboard from "../../components/admin/tabs/appealsDashboardLPA";
import { fetchAdminStorageData } from "../../components/admin/utils/serverside";
import {
getNewAppeals,
getStatusByAppeal,
getStatusByAppealLPA
} from "../../actions/services/adminService";
import { getSearchDetails } from "../../components/utils";
import {
setSearchDetails,
setSearchResults
} from "../../store/searchOutput/action";
import { setCurrentPage } from "../../store/currentView/action";
const StoragePage = (props) => {
const {
data,
userData,
repCompleteCount,
searchResultsObj,
docsOffline,
showFilteredDocs,
statusObj,
statusLPAObj
} = props;
const [whichTab, setWhichTab] = useState("appealDashboard");
return (
<div>
<Head>
<title>Admin Browser</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header />
<div
className="govuk-width-containera"
style={{ width: "90%", margin: "auto" }}
>
<div className="js-enabled govuk-template__body govuk-frontend-supported">
<div className="govuk-tabs" data-module="govuk-tabs">
<h2 className="govuk-tabs__title">Contents</h2>
{/* Tabs */}
<ul className="govuk-tabs__list">
{[
"appealDashboard",
"appealDashboardLPA",
"documents",
"appeals",
"storage",
"accounts"
].map((tab) => (
<li
key={tab}
className={
whichTab === tab
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item"
}
>
<a
className="govuk-tabs__tab"
href={`#${tab}`}
onClick={() => {
setWhichTab(tab);
tab === "appeals" &&
props.setCurrentPage(1);
}}
>
{" "}
{tab === "documents" &&
"Latest Documents"}
{tab === "appeals" &&
"Latest Appeals"}
{tab === "storage" &&
"Storage Account"}
{tab === "accounts" &&
"User Accounts"}
{tab === "appealDashboard" &&
"Appeals Dashboard"}
{tab === "appealDashboardLPA" &&
"Appeals LPA Dashboard"}
</a>
</li>
))}
</ul>
{/* Panels */}
<div
className={
whichTab === "appealDashboard"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealStatusDashboard statusObj={statusObj} />
</div>
<div
className={
whichTab === "appealDashboardLPA"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealLpaStatusDashboard
statusObj={statusLPAObj}
/>
</div>
<div
className={
whichTab === "documents"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<DocumentsTab
documentDetailsObj={
props.searchResultsObj
.documentDetailsObj
}
docsOffline={docsOffline}
showFilteredDocs={props.showFilteredDocs}
/>
</div>
<div
className={
whichTab === "appeals"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealsTab
searchResultsObj={searchResultsObj}
/>
</div>
<div
className={
whichTab === "appealsWithStatus"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AppealsWithStatusTab statusObj={statusObj} />
</div>
<div
className={
whichTab === "storage"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<StorageTab
data={data}
repCompleteCount={repCompleteCount}
/>
</div>
<div
className={
whichTab === "accounts"
? "govuk-tabs__panel"
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
>
<AccountsTab userData={userData} />
</div>
</div>
</div>
</div>
<Footer />
</div>
</div>
);
};
export const getServerSideProps = wrapper.getServerSideProps(
(store) => async (ctx) => {
const { query, req, res } = ctx;
// IP restriction check
const ALLOWED_IPS = process.env.ALLOWED_IPS
? process.env.ALLOWED_IPS.split(",").map((ip) => ip.trim())
: [];
const LOCALHOST_IPS = ["127.0.0.1", "::1"];
const forwarded = req.headers["x-forwarded-for"];
const ip =
typeof forwarded === "string"
? forwarded.split(",")[0]
: req.socket.remoteAddress;
if (![...ALLOWED_IPS, ...LOCALHOST_IPS].includes(ip)) {
return {
redirect: { destination: "/403", permanent: false }
};
}
// 🔹 fetch actual data
const { data, userData, repCompleteCount } =
await fetchAdminStorageData();
const newAppeals = await getNewAppeals();
const statusObj = await getStatusByAppeal();
const statusLPAObj = await getStatusByAppealLPA();
const searchDetailsObj = await getSearchDetails(newAppeals);
store.dispatch(setSearchResults(newAppeals));
store.dispatch(setSearchDetails(searchDetailsObj));
const state = store.getState();
store.dispatch(setCurrentPage(1));
return {
props: {
statusObj,
statusLPAObj,
data,
userData,
repCompleteCount,
docsOffline: process.env.DOCAPI_OFFLINE || false,
showFilteredDocs: process.env.SHOWFILTERDOCS || false
}
};
}
);
const mapDispatchToProps = (dispatch) => {
return {
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
}
};
};
const mapStateToProps = (state) => {
console.log("===============================\n state:", state);
return {
searchResultsObj: state.searchResultsObj
};
};
export default connect(mapStateToProps, mapDispatchToProps)(StoragePage);