WEB APP: Панель "Инструкции" ПУП (финал)
BIN
app/panels/prj_help/img/411.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
app/panels/prj_help/img/412.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
app/panels/prj_help/img/421.png
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
app/panels/prj_help/img/422.png
Normal file
After Width: | Height: | Size: 7.2 KiB |
BIN
app/panels/prj_help/img/431.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
app/panels/prj_help/img/432.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
app/panels/prj_help/img/433.png
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
app/panels/prj_help/img/434.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
app/panels/prj_help/img/441.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
app/panels/prj_help/img/442.png
Normal file
After Width: | Height: | Size: 6.0 KiB |
BIN
app/panels/prj_help/img/443.png
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
app/panels/prj_help/img/444.png
Normal file
After Width: | Height: | Size: 66 KiB |
BIN
app/panels/prj_help/img/451.png
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
app/panels/prj_help/img/461.png
Normal file
After Width: | Height: | Size: 73 KiB |
BIN
app/panels/prj_help/img/471.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
app/panels/prj_help/img/711.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
app/panels/prj_help/img/721.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
app/panels/prj_help/img/722.png
Normal file
After Width: | Height: | Size: 73 KiB |
BIN
app/panels/prj_help/img/723.png
Normal file
After Width: | Height: | Size: 51 KiB |
BIN
app/panels/prj_help/img/741.png
Normal file
After Width: | Height: | Size: 71 KiB |
@ -7,7 +7,7 @@
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useContext } from "react"; //Классы React
|
||||
import React, { useContext, useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import {
|
||||
Box,
|
||||
@ -23,8 +23,11 @@ import {
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableBody
|
||||
TableBody,
|
||||
Fab,
|
||||
Icon
|
||||
} from "@mui/material"; //Интерфейсные элементы
|
||||
import { BUTTONS } from "../../../app.text"; //Текстовые ресурсы
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import img211 from "./img/211.png"; //Изображение
|
||||
import img212 from "./img/212.png"; //Изображение
|
||||
@ -47,6 +50,26 @@ import img33 from "./img/33.png"; //Изображение
|
||||
import img34 from "./img/34.png"; //Изображение
|
||||
import img35 from "./img/35.png"; //Изображение
|
||||
import img36 from "./img/36.png"; //Изображение
|
||||
import img411 from "./img/411.png"; //Изображение
|
||||
import img412 from "./img/412.png"; //Изображение
|
||||
import img421 from "./img/421.png"; //Изображение
|
||||
import img422 from "./img/422.png"; //Изображение
|
||||
import img431 from "./img/431.png"; //Изображение
|
||||
import img432 from "./img/432.png"; //Изображение
|
||||
import img433 from "./img/433.png"; //Изображение
|
||||
import img434 from "./img/434.png"; //Изображение
|
||||
import img441 from "./img/441.png"; //Изображение
|
||||
import img442 from "./img/442.png"; //Изображение
|
||||
import img443 from "./img/443.png"; //Изображение
|
||||
import img444 from "./img/444.png"; //Изображение
|
||||
import img451 from "./img/451.png"; //Изображение
|
||||
import img461 from "./img/461.png"; //Изображение
|
||||
import img471 from "./img/471.png"; //Изображение
|
||||
import img711 from "./img/711.png"; //Изображение
|
||||
import img721 from "./img/721.png"; //Изображение
|
||||
import img722 from "./img/722.png"; //Изображение
|
||||
import img723 from "./img/723.png"; //Изображение
|
||||
import img741 from "./img/741.png"; //Изображение
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -69,13 +92,17 @@ const STYLES = {
|
||||
PRGF_TABLE: { paddingTop: "20px", paddingBottom: "20px", display: "flex", justifyContent: "center" },
|
||||
TABLE: { width: "80%" },
|
||||
TABLE_TITLE: { backgroundColor: "lightgray" },
|
||||
TABLE_SUBTITLE: { textAlign: "center", backgroundColor: "#f3eded", fontWeight: "bold" }
|
||||
TABLE_SUBTITLE: { textAlign: "center", backgroundColor: "#f3eded", fontWeight: "bold" },
|
||||
FAB_BACK: { position: "absolute", right: "20px", marginTop: "20px" }
|
||||
};
|
||||
|
||||
//--------------------------------
|
||||
//Вспомогательные функции и классы
|
||||
//--------------------------------
|
||||
|
||||
//Переход к элементу страницы
|
||||
const scrollToElement = id => document.getElementById(id).scrollIntoView();
|
||||
|
||||
//Заголовок первого уровня
|
||||
const Hdr1 = ({ id, children }) => (
|
||||
<Typography {...(id ? { id } : {})} variant="h3" color="primary">
|
||||
@ -140,7 +167,7 @@ Img.propTypes = {
|
||||
src: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//Ссылка на раздел
|
||||
//Ссылка на раздел Системы
|
||||
const UnitLink = ({ unitCode, children }) => {
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowUnit } = useContext(ApplicationСtx);
|
||||
@ -153,21 +180,109 @@ const UnitLink = ({ unitCode, children }) => {
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Ссылка на раздел
|
||||
//Контроль свойств - Ссылка на раздел Системы
|
||||
UnitLink.propTypes = {
|
||||
unitCode: PropTypes.string.isRequired,
|
||||
children: PropTypes.any
|
||||
};
|
||||
|
||||
//Ссылка на главу инструкции
|
||||
const ChapterLink = ({ id, dstId, onClick, children }) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Link
|
||||
{...(id ? { id } : {})}
|
||||
component="button"
|
||||
variant="body2"
|
||||
align="left"
|
||||
underline="always"
|
||||
onClick={() => {
|
||||
scrollToElement(dstId);
|
||||
if (onClick && id) onClick(id);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Ссылка на главу инструкции
|
||||
ChapterLink.propTypes = {
|
||||
id: PropTypes.string,
|
||||
dstId: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.any
|
||||
};
|
||||
|
||||
//Ссылка на информационную панель
|
||||
const PanelLink = ({ panelName, children }) => {
|
||||
//Подключение к контексту приложения
|
||||
const { configUrlBase, findPanelByName, pOnlineShowTab } = useContext(ApplicationСtx);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
align="left"
|
||||
underline="always"
|
||||
onClick={() => {
|
||||
const panel = findPanelByName(panelName);
|
||||
if (panel) pOnlineShowTab({ id: panel.name, url: `${configUrlBase}${panel.url}`, caption: panel.caption });
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Ссылка на информационную панель
|
||||
PanelLink.propTypes = {
|
||||
panelName: PropTypes.string.isRequired,
|
||||
children: PropTypes.any
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Корневая панель работ проектов
|
||||
const PrjHelp = () => {
|
||||
//Собственное состояние
|
||||
const [navStack, setNavStack] = useState([]);
|
||||
|
||||
//Переход по оглавлению
|
||||
const handleTitleClick = id => {
|
||||
scrollToElement(id);
|
||||
setNavStack([]);
|
||||
};
|
||||
|
||||
//Обработка на нажатие ссылки на раздел
|
||||
const handleChapterLinkClick = backId => {
|
||||
const tmp = [...navStack];
|
||||
tmp.push(backId);
|
||||
setNavStack(tmp);
|
||||
};
|
||||
|
||||
//Обработка нажатия на кнопку "Назад"
|
||||
const handleBackClick = () => {
|
||||
if (navStack.length > 0) {
|
||||
const tmp = [...navStack];
|
||||
const backId = tmp.pop();
|
||||
scrollToElement(backId);
|
||||
setNavStack(tmp);
|
||||
}
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box>
|
||||
{navStack.length > 0 ? (
|
||||
<Fab variant="extended" color="primary" sx={STYLES.FAB_BACK} onClick={handleBackClick}>
|
||||
<Icon>arrow_back_ios</Icon>
|
||||
{BUTTONS.NAVIGATE_BACK}
|
||||
</Fab>
|
||||
) : null}
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={2}>
|
||||
<Box p={2}>
|
||||
@ -177,11 +292,7 @@ const PrjHelp = () => {
|
||||
<List>
|
||||
{CONTENT.map((c, i) => (
|
||||
<ListItem disablePadding key={i}>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
document.getElementById(c.id).scrollIntoView();
|
||||
}}
|
||||
>
|
||||
<ListItemButton onClick={() => handleTitleClick(c.id)}>
|
||||
<ListItemText primary={c.caption} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
@ -418,7 +529,7 @@ const PrjHelp = () => {
|
||||
Номер шифра затрат система генерирует автоматически. При необходимости его можно исправить. Далее необходимо нажать копку
|
||||
ОК.
|
||||
</Prgf>
|
||||
<Hdr3>2.4. Регистрация договора с заказчиком</Hdr3>
|
||||
<Hdr3 id={"prg24"}>2.4. Регистрация договора с заказчиком</Hdr3>
|
||||
<Prgf>
|
||||
После заключения договора с заказчиком необходимо выделить законтрактованные этапы проекта, вызвать правой кнопкой мыши
|
||||
контекстное меню и выбрать пункт Формирование > Договор с внешним заказчиком.
|
||||
@ -474,9 +585,210 @@ const PrjHelp = () => {
|
||||
<Prgf>Затем документ необходимо пометить как действующий.</Prgf>
|
||||
<Img src={img36} />
|
||||
<Hdr2 id={"prg4"}>4. Исполнение</Hdr2>
|
||||
<Hdr3 id={"prg41"}>4.1. Формирование авансового счета по договору с заказчиком</Hdr3>
|
||||
<Prgf>
|
||||
Необходимо отобрать договор с заказчиком в <UnitLink unitCode="Contracts">одноименном штатном регистре системы</UnitLink>,
|
||||
выбрать этап, вызвать контекстное меню и выбрать пункт Формирование > Счет на оплату.
|
||||
</Prgf>
|
||||
<Img src={img411} />
|
||||
<Prgf>Система визуализирует окно реквизитов счета на оплату.</Prgf>
|
||||
<Img src={img412} />
|
||||
<Prgf>Необходимо заполнить реквизиты счета и нажать кнопку ОК.</Prgf>
|
||||
<Prgf>
|
||||
Система зарегистрирует документ в{" "}
|
||||
<UnitLink unitCode="PaymentAccounts">соответствующем документарном регистре системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Hdr3>4.2. Регистрация договоров с соисполнителями / поставщиками / подрядчиками</Hdr3>
|
||||
<Prgf>
|
||||
После заключения договора с соисполнителем / поставщиком / подрядчиком необходимо выбрать этап проекта, в рамках которого
|
||||
был заключен договор, вызвать правой кнопкой мыши контекстное меню и выбрать пункт Формирование > Договор с внешним
|
||||
исполнителем.
|
||||
</Prgf>
|
||||
<Img src={img421} />
|
||||
<Prgf>Система визуализирует окно параметров действия.</Prgf>
|
||||
<Img src={img422} />
|
||||
<Prgf>Необходимо заполнить параметры действия и нажать кнопку ОК.</Prgf>
|
||||
<Prgf>
|
||||
Система сформирует договор с исполнителем в <UnitLink unitCode="Contracts">соответствующем регистре системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
Запись в регистре “Договоры” может быть отредактирована посредством штатных действий “Исправить” контекстного меню
|
||||
заголовка раздела. Также может быть отредактирован каждый этап договора.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
В момент двустороннего подписания договора требуется перевести документ в состояние “Утвержден” посредством
|
||||
соответствующего действия контекстного меню раздела аналогично тому, как это выполняется и для договора с заказчиком (см.
|
||||
выше{" "}
|
||||
<ChapterLink id={"back42from24_1"} dstId={"prg24"} onClick={handleChapterLinkClick}>
|
||||
раздел 2.4
|
||||
</ChapterLink>{" "}
|
||||
настоящей Инструкции).
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
В момент перехода к двустороннему исполнению этапа договора требуется перевести этап в состояние “Открыт” посредством
|
||||
соответствующего действия контекстного меню раздела аналогично тому, как это выполняется и для договора с заказчиком (см.
|
||||
выше{" "}
|
||||
<ChapterLink id={"back42from24_2"} dstId={"prg24"} onClick={handleChapterLinkClick}>
|
||||
раздел 2.4
|
||||
</ChapterLink>{" "}
|
||||
настоящей Инструкции).
|
||||
</Prgf>
|
||||
<Hdr3>4.3. Регистрация счета по договору с исполнителем</Hdr3>
|
||||
<Prgf>
|
||||
При поступлении счета от исполнителя необходимо отобрать договор с исполнителем в{" "}
|
||||
<UnitLink unitCode="Contracts">одноименном штатном регистре системы</UnitLink>, выбрать этап, вызвать контекстное меню и
|
||||
выбрать пункт Формирование > Входящий счет на оплату.
|
||||
</Prgf>
|
||||
<Img src={img431} />
|
||||
<Prgf>Система визуализирует окно параметров действия.</Prgf>
|
||||
<Img src={img432} />
|
||||
<Prgf>Необходимо заполнить параметры и нажать кнопку ОК.</Prgf>
|
||||
<Prgf>Система визуализирует окно реквизитов счета на оплату.</Prgf>
|
||||
<Img src={img433} />
|
||||
<Prgf>Необходимо заполнить реквизиты счета и нажать кнопку ОК.</Prgf>
|
||||
<Prgf>
|
||||
Система зарегистрирует документ в{" "}
|
||||
<UnitLink unitCode="PaymentAccountsIn">соответствующем документарном регистре системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
Далее документ может быть отредактирован посредством штатных действий “Исправить” контекстного меню заголовка раздела.
|
||||
Также может быть отредактирована спецификация документа.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
По окончании редактирования счета документ подлежит утверждению посредством соответствующего действия контекстного меню
|
||||
раздела.
|
||||
</Prgf>
|
||||
<Img src={img434} />
|
||||
<Hdr3>4.4. Регистрация актов и товарных накладных по договору с исполнителем</Hdr3>
|
||||
<Prgf>
|
||||
При поступлении акта/товарной накладной от исполнителя необходимо отобрать договор с исполнителем в{" "}
|
||||
<UnitLink unitCode="Contracts">одноименном штатном регистре системы</UnitLink>, выбрать этап, вызвать контекстное меню и
|
||||
выбрать пункт Формирование > Приходная накладная.
|
||||
</Prgf>
|
||||
<Img src={img441} />
|
||||
<Prgf>Система визуализирует окно параметров действия.</Prgf>
|
||||
<Img src={img442} />
|
||||
<Prgf>Необходимо заполнить параметры и нажать кнопку ОК.</Prgf>
|
||||
<Prgf>Система визуализирует буфер формирования документа.</Prgf>
|
||||
<Img src={img443} />
|
||||
<Prgf>Необходимо нажать кнопку ОК.</Prgf>
|
||||
<Prgf>
|
||||
Система зарегистрирует документ в{" "}
|
||||
<UnitLink unitCode="IncomingInvoices">соответствующем документарном регистре системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
Далее документ может быть отредактирован посредством штатных действий “Исправить” контекстного меню заголовка раздела.
|
||||
Также может быть отредактирована спецификация документа.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
По окончании редактирования документ подлежит утверждению посредством соответствующего действия контекстного меню раздела.
|
||||
</Prgf>
|
||||
<Img src={img444} />
|
||||
<Hdr3>4.5. Ведение реестра финансовых документов по проекту</Hdr3>
|
||||
<Prgf>
|
||||
Система позволяет получить доступ ко всем документам по данному этапу проекта с возможностью перехода в соответствующие
|
||||
документарные регистры системы:
|
||||
<p>
|
||||
1) <UnitLink unitCode="PaymentAccounts">Счета на оплату</UnitLink>
|
||||
</p>
|
||||
<p>
|
||||
2) <UnitLink unitCode="GoodsTransInvoicesToConsumers">Расходные накладные на отпуск потребителям</UnitLink>
|
||||
</p>
|
||||
<p>
|
||||
3) <UnitLink unitCode="PaymentAccountsIn">Входящие счета на оплату</UnitLink>
|
||||
</p>
|
||||
<p>
|
||||
4) <UnitLink unitCode="IncomingInvoices">Приходные накладные</UnitLink>
|
||||
</p>
|
||||
</Prgf>
|
||||
<Img src={img451} />
|
||||
<Hdr3>4.6. Учет фактической оплаты</Hdr3>
|
||||
<Prgf>
|
||||
Система позволяет получить доступ к фактически проведенным платежным поручениям по данному этапу проекта с возможностью
|
||||
перехода в <UnitLink unitCode="PayNotes">соответствующий учетный регистр системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Img src={img461} />
|
||||
<Hdr3>4.7. Учет фактических затрат</Hdr3>
|
||||
<Prgf>
|
||||
Система позволяет получить доступ к фактическим затратам по данному этапу проекта с возможностью перехода в{" "}
|
||||
<UnitLink unitCode="CostNotes">соответствующий учетный регистр системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Img src={img471} />
|
||||
<Hdr2 id={"prg5"}>5. Мониторинг и контроль</Hdr2>
|
||||
<Prgf>
|
||||
В информационной панели <PanelLink panelName="PrjFin">Экономика проектов</PanelLink> система обеспечивает мониторинг
|
||||
исполнения проекта по следующим основным объектам контроля:
|
||||
<p>1) Финансирование</p>
|
||||
<p>2) Контрактация</p>
|
||||
<p>3) Договоры с соисполнителями</p>
|
||||
<p>4) Сроки</p>
|
||||
<p>5) Затраты</p>
|
||||
<p>6) Актирование</p>
|
||||
</Prgf>
|
||||
<Hdr2 id={"prg6"}>6. Корректировка планов</Hdr2>
|
||||
<Prgf>
|
||||
Система обеспечивает возможность корректировки экономической структуры проекта в том числе и в процессе его исполнения (с
|
||||
сохранением истории изменений):
|
||||
<p>1) Изменение стоимости этапов проекта (например, при увеличении/уменьшении объема работ)</p>
|
||||
<p>2) Корректировку сроков этапов проекта (например, при изменении требований заказчика)</p>
|
||||
<p>3) Добавление новых этапов проекта</p>
|
||||
<p>4) Разделение этапов проекта</p>
|
||||
<p>5) Объединение этапов проекта</p>
|
||||
<p>
|
||||
6) Корректировку плановой калькуляции путем регистрации новой версии документа (например, в результате подписания
|
||||
протокола согласования фиксированной цены этапа проектных работ) – порядок регистрации документа описан выше в разделе
|
||||
3 настоящей Инструкции
|
||||
</p>
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
В случае изменения структуры этапов проекта (разделение либо объединение этапов проекта) в процессе его исполнения
|
||||
обеспечивается возможность:
|
||||
<p>1) Изменить привязку внешнего исполнителя (перенести с одного этапа на другой)</p>
|
||||
<p>2) Выполнить переброску финансирования (как входящего, так и исходящего)</p>
|
||||
<p>3) Выполнить переброску накопленных фактических затрат</p>
|
||||
</Prgf>
|
||||
<Hdr2 id={"prg7"}>7. Завершение проекта</Hdr2>
|
||||
<Hdr3>7.1. Закрытие этапа проекта</Hdr3>
|
||||
<Prgf>
|
||||
По окончании выполнения проектных работ по этапу требуется перевести этап проекта в состояние “Закрыт” посредством
|
||||
соответствующего действия контекстного меню раздела.
|
||||
</Prgf>
|
||||
<Img src={img711} />
|
||||
<Hdr3>7.2. Формирование акта выполненных работ по договору с заказчиком</Hdr3>
|
||||
<Prgf>
|
||||
Необходимо отобрать договор с заказчиком в <UnitLink unitCode="Contracts">одноименном штатном регистре системы</UnitLink>,
|
||||
выбрать этап, вызвать контекстное меню и выбрать пункт Формирование > Расходная накладная на отпуск потребителям.
|
||||
</Prgf>
|
||||
<Img src={img721} />
|
||||
<Prgf>Система визуализирует буфер формирования документа. Необходимо нажать кнопку ОК.</Prgf>
|
||||
<Img src={img722} />
|
||||
<Prgf>
|
||||
Система зарегистрирует документ в{" "}
|
||||
<UnitLink unitCode="GoodsTransInvoicesToConsumers">соответствующем документарном регистре системы</UnitLink>.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
Далее документ может быть отредактирован посредством штатных действий “Исправить” контекстного меню заголовка раздела.
|
||||
Также может быть отредактирована спецификация документа.
|
||||
</Prgf>
|
||||
<Prgf>
|
||||
По окончании редактирования документ подлежит утверждению посредством соответствующего действия контекстного меню раздела.
|
||||
</Prgf>
|
||||
<Img src={img723} />
|
||||
<Hdr3>7.3. Формирование счета на окончательный расчет с заказчиком</Hdr3>
|
||||
<Prgf>
|
||||
Порядок формирования счета на окончательный расчет полностью аналогичен порядку формирования авансового счета, подробно
|
||||
описанному выше в{" "}
|
||||
<ChapterLink id={"back73from41"} dstId={"prg41"} onClick={handleChapterLinkClick}>
|
||||
разделе 4.1
|
||||
</ChapterLink>{" "}
|
||||
настоящей Инструкции.
|
||||
</Prgf>
|
||||
<Hdr3>7.4. Закрытие проекта</Hdr3>
|
||||
<Prgf>
|
||||
По окончании выполнения проектных работ по всем этапам требуется перевести проект в состояние “Закрыт” посредством
|
||||
соответствующего действия контекстного меню раздела.
|
||||
</Prgf>
|
||||
<Img src={img741} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|