WEB APP: Панель "Инструкции" ПУП (финал)

app/panels/prj_help/prj_help.js

@@ -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
+                                <ListItemButton onClick={() => handleTitleClick(c.id)}>
-                                    onClick={() => {
-                                        document.getElementById(c.id).scrollIntoView();
-                                    }}
-                                >
                                     <ListItemText primary={c.caption} />
                                 </ListItemButton>
                             </ListItem>
@@ -418,7 +529,7 @@ const PrjHelp = () => {
                             Номер шифра затрат система генерирует автоматически. При необходимости его можно исправить. Далее необходимо нажать копку
                             ОК.
                         </Prgf>
-                        <Hdr3>2.4. Регистрация договора с заказчиком</Hdr3>
+                        <Hdr3 id={"prg24"}>2.4. Регистрация договора с заказчиком</Hdr3>
                         <Prgf>
                             После заключения договора с заказчиком необходимо выделить законтрактованные этапы проекта, вызвать правой кнопкой мыши
                             контекстное меню и выбрать пункт Формирование &gt; Договор с внешним заказчиком.
@@ -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>,
+                            выбрать этап, вызвать контекстное меню и выбрать пункт Формирование &gt; Счет на оплату.
+                        </Prgf>
+                        <Img src={img411} />
+                        <Prgf>Система визуализирует окно реквизитов счета на оплату.</Prgf>
+                        <Img src={img412} />
+                        <Prgf>Необходимо заполнить реквизиты счета и нажать кнопку ОК.</Prgf>
+                        <Prgf>
+                            Система зарегистрирует документ в{" "}
+                            <UnitLink unitCode="PaymentAccounts">соответствующем документарном регистре системы</UnitLink>.
+                        </Prgf>
+                        <Hdr3>4.2. Регистрация договоров с соисполнителями / поставщиками / подрядчиками</Hdr3>
+                        <Prgf>
+                            После заключения договора с соисполнителем / поставщиком / подрядчиком необходимо выбрать этап проекта, в рамках которого
+                            был заключен договор, вызвать правой кнопкой мыши контекстное меню и выбрать пункт Формирование &gt; Договор с внешним
+                            исполнителем.
+                        </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>, выбрать этап, вызвать контекстное меню и
+                            выбрать пункт Формирование &gt; Входящий счет на оплату.
+                        </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>, выбрать этап, вызвать контекстное меню и
+                            выбрать пункт Формирование &gt; Приходная накладная.
+                        </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>,
+                            выбрать этап, вызвать контекстное меню и выбрать пункт Формирование &gt; Расходная накладная на отпуск потребителям.
+                        </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>