FFT-80 Payroll override edit forecast

core/management/commands/create_stub_forecast_data.py

@@ -34,7 +34,7 @@ def create_monthly_figures():
     current_financial_year = FinancialYear.objects.get(current=True)
     cost_centre_fk = CostCentre.objects.first()
     programme_list = ProgrammeCode.objects.all()
-    project_list = ProjectCode.objects.all()
+    project_list = list(ProjectCode.objects.all()) + [None]
     natural_account_list = NaturalCode.objects.all()
     financial_periods = FinancialPeriod.objects.exclude(
         period_long_name__icontains="adj"

forecast/templates/forecast/edit/edit.html

@@ -46,6 +46,8 @@
         window.table_data = {{ forecast_dump|safe }};
         window.cost_centre = {{ view.cost_centre_details.cost_centre_code|safe }};
         window.financial_year = {{ view.financial_year|safe }};
+        window.payroll_forecast_data = {{ view.get_payroll_forecast_report|safe }};
+        window.is_superuser = "{{ is_superuser|safe }}";
     </script>
     {% vite_dev_client %}
     {% vite_js 'src/index.jsx' %}

forecast/views/edit_forecast.py

@@ -1,16 +1,18 @@
 import json
 import logging
 import re
+from decimal import Decimal
 
 from django.conf import settings
 from django.db import transaction
 from django.db.models import Exists, OuterRef, Prefetch, Q
 from django.http import JsonResponse
-from django.shortcuts import redirect
+from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
 from django.views.generic.base import TemplateView
 from django.views.generic.edit import FormView
 
+from core.models import FinancialYear
 from core.utils.generic_helpers import get_current_financial_year, get_year_display
 from costcentre.models import CostCentre
 from forecast.forms import (
@@ -51,6 +53,7 @@
     NoCostCentreCodeInURLError,
     NoFinancialYearInURLError,
 )
+from payroll.services import payroll as payroll_service
 
 
 UNAVAILABLE_FORECAST_EDIT_TITLE = "Forecast editing is locked"
@@ -472,12 +475,10 @@ def get_context_data(self, **kwargs):
                 "cost_centre_code": self.cost_centre_code,
             }
         )
-
         financial_code_serialiser = get_financial_code_serialiser(
             self.cost_centre_code,
             self.financial_year,
         )
-
         serialiser_data = financial_code_serialiser.data
         forecast_dump = json.dumps(serialiser_data)
         if self.financial_year == get_current_financial_year():
@@ -498,9 +499,25 @@ def get_context_data(self, **kwargs):
         context["forecast_dump"] = forecast_dump
         context["actuals"] = actual_data
         context["period_display"] = period_display
+        context["is_superuser"] = self.request.user.is_superuser
 
         return context
 
+    def get_payroll_forecast_report(self):
+        cost_centre_obj = get_object_or_404(CostCentre, pk=self.cost_centre_code)
+        financial_year_obj = get_object_or_404(FinancialYear, pk=self.financial_year)
+        queryset = payroll_service.payroll_forecast_report(
+            cost_centre_obj, financial_year_obj
+        )
+        data = list(queryset)
+
+        for item in data:
+            for key, value in item.items():
+                if isinstance(value, Decimal):
+                    item[key] = str(value)
+
+        return json.dumps(data)
+
     @property
     def future_year_display(self):
         if self._future_year_display is None:

front_end/src/Components/EditForecast/index.jsx

@@ -14,6 +14,7 @@ import {
     postData,
     processForecastData,
 } from '../../Util'
+import ToggleCheckbox from '../ToggleCheckbox';
 
 
 function EditForecast() {
@@ -27,12 +28,13 @@ function EditForecast() {
     const editCellId = useSelector(state => state.edit.cellId);
 
     const [sheetUpdating, setSheetUpdating] = useState(false)
+    const [payrollToggle, setPayrollToggle] = useState(false)
 
     useEffect(() => {
         const timer = () => {
                 setTimeout(() => {
                 if (window.table_data) {
-                    let rows = processForecastData(window.table_data)
+                    let rows = processForecastData(window.table_data, window.payroll_forecast_data, payrollToggle)
                       dispatch({
                         type: SET_CELLS,
                         cells: rows
@@ -45,7 +47,7 @@ function EditForecast() {
         }
 
         timer()
-    }, [dispatch])
+    }, [dispatch, payrollToggle])
 
     useEffect(() => {
         const capturePaste = (event) => {
@@ -317,6 +319,7 @@ function EditForecast() {
 
     return (
         <Fragment>
+          {window.is_superuser == "True" && <ToggleCheckbox toggle={payrollToggle} setToggle={setPayrollToggle} id="payroll-forecast" value="payroll" label="Toggle payroll forecast rows" />}
             {errorMessage != null &&
                 <div className="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabIndex="-1" data-module="govuk-error-summary">
                   <h2 className="govuk-error-summary__title" id="error-summary-title">
@@ -332,7 +335,7 @@ function EditForecast() {
                 </div>
             }
             <EditActionBar />          
-            <Table sheetUpdating={sheetUpdating} />
+            <Table sheetUpdating={sheetUpdating} payrollData={window.payroll_forecast_data}/>
         </Fragment>
     );
 }

front_end/src/Components/Table/index.jsx

@@ -23,7 +23,7 @@ import { SET_EDITING_CELL } from '../../Reducers/Edit'
 import { SET_SELECTED_ROW, SELECT_ALL, UNSELECT_ALL } from '../../Reducers/Selected'
 
 
-function Table({rowData, sheetUpdating}) {
+function Table({rowData, sheetUpdating, payrollData}) {
     const dispatch = useDispatch();
     const rows = useSelector(state => state.allCells.cells);
 
@@ -167,7 +167,7 @@ function Table({rowData, sheetUpdating}) {
                                 <CellValue rowIndex={rowIndex} cellKey={"budget"} format={true} />
                             </InfoCell>
                             {window.period_display.map((value, index) => {
-                                return <TableCell key={nanoid()} sheetUpdating={sheetUpdating} cellId={getCellId(rowIndex, value)} rowIndex={rowIndex} cellKey={value} />
+                                return <TableCell key={nanoid()} sheetUpdating={sheetUpdating} payrollData={payrollData} cellId={getCellId(rowIndex, value)} rowIndex={rowIndex} cellKey={value} />
                             })}
                             <InfoCell className="figure-cell" rowIndex={rowIndex}>
                                 <AggregateValue rowIndex={rowIndex} actualsOnly={false} extraClasses="" />

front_end/src/Components/TableCell/index.jsx

@@ -9,9 +9,10 @@ import {
 import { SET_ERROR } from '../../Reducers/Error'
 import { SET_CELLS } from '../../Reducers/Cells'
 
-const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating}) => {
+const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating, payrollData}) => {
 
     let editing = false
+    const isToggle = JSON.parse(localStorage.getItem('isToggle'))
 
     const checkValue = (val) => {
         if (cellId === val) {
@@ -46,6 +47,16 @@ const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating}) => {
     const cell = useSelector(state => state.allCells.cells[rowIndex][cellKey]);
     const editCellId = useSelector(state => state.edit.cellId, checkValue);
 
+    const isOverride = () => {
+      // Is override if cell exists, has an override amount and is not an actual
+      return (cell && cell.overrideAmount != null && cell.isEditable)
+    }
+
+    if (isOverride()) {
+      console.log(cell.overrideAmount)
+      cell.amount = cell.overrideAmount
+    }
+
     const [isUpdating, setIsUpdating] = useState(false)
 
     const selectedRow = useSelector(state => state.selected.selectedRow, checkSelectRow);
@@ -105,7 +116,7 @@ const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating}) => {
             negative = " negative"
         }
 
-        return "govuk-table__cell forecast-month-cell figure-cell " + (wasEdited() ? 'edited ' : '') + (isSelected() ? 'selected' : '')  + editable + negative
+        return "govuk-table__cell forecast-month-cell figure-cell " + (wasEdited() ? 'edited ' : '') + (isSelected() ? 'selected' : '')  + (isOverride() ? 'override ' : '') + editable + negative
     }
 
     const setContentState = (value) => {
@@ -160,7 +171,7 @@ const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating}) => {
         ).then((response) => {
             setIsUpdating(false)
             if (response.status === 200) {
-                let rows = processForecastData(response.data)
+                let rows = processForecastData(response.data, payrollData, isToggle)
                   dispatch({
                     type: SET_CELLS,
                     cells: rows
@@ -256,7 +267,7 @@ const TableCell = ({rowIndex, cellId, cellKey, sheetUpdating}) => {
                 className={getClasses()}
                 id={getId()}
                 onDoubleClick={ () => {
-                    if (isEditable) {
+                    if (isEditable && !isOverride()) {
                         dispatch(
                             SET_EDITING_CELL({
                                 "cellId": cellId

front_end/src/Components/ToggleCheckbox/index.jsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+export default function ToggleCheckbox({ toggle, setToggle, id, value, label }) {
+
+  const handleToggle = () => {
+    setToggle(!toggle);
+
+    // To fix: Hacky method, set to local storage so this value can be passed
+    // to processForecastData when updating a cell
+    localStorage.setItem('isToggle', JSON.stringify(true));
+  }
+
+  return (
+    <>
+      <div className="govuk-form-group">
+        <fieldset className="govuk-fieldset" aria-describedby='toggle-hint'>
+          <div className="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
+            <div className="govuk-checkboxes__item">
+              <input
+                className="govuk-checkboxes__input"
+                id={id}
+                name={id}
+                type="checkbox"
+                checked={toggle}
+                onChange={handleToggle}
+                value={value}
+              />
+              <label className="govuk-label govuk-checkboxes__label" htmlFor={id}>
+                { label }
+              </label>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </>
+  );
+}

front_end/src/Util.js

@@ -117,8 +117,13 @@ export async function postData(url = '', data = {}) {
     }
 }
 
-export const processForecastData = (forecastData) => {
+export const processForecastData = (forecastData, payrollData = null, payrollToggle = false) => {
     let rows = [];
+    let mappedPayrollData = null
+
+    if (payrollToggle) {
+      mappedPayrollData = processPayrollData(payrollData)
+    }
 
     let financialCodeCols = [
         "analysis1_code",
@@ -149,15 +154,31 @@ export const processForecastData = (forecastData) => {
             colIndex++
         }
 
+        const forecastKey = makeKey(
+          rowData.programme,
+          rowData.natural_account_code,
+          rowData.analysis1_code,
+          rowData.analysis2_code,
+          rowData.project_code
+        );
+
         // eslint-disable-next-line
         for (const [key, monthlyFigure] of Object.entries(rowData["monthly_figures"])) {
+          let overrideAmount = null
+
+          if (payrollToggle && mappedPayrollData[forecastKey]) {
+            const period = `period_${(parseInt(key)+1)}_sum`
+            overrideAmount = mappedPayrollData[forecastKey][period] * 100
+          }
+
             cells[monthlyFigure.month] = {
                 rowIndex: rowIndex,
                 colIndex: colIndex,
                 key: monthlyFigure.month,
                 amount: monthlyFigure.amount,
                 startingAmount: monthlyFigure.starting_amount,
-                isEditable: !monthlyFigure.actual
+                isEditable: !monthlyFigure.actual,
+                overrideAmount: overrideAmount,
             }
 
             colIndex++
@@ -169,6 +190,22 @@ export const processForecastData = (forecastData) => {
     return rows;
 }
 
+const processPayrollData = (payrollData) => {
+  const results = {};
+
+  for (const [key, value] of Object.entries(payrollData)) {
+    const generatedKey = makeKey(value.programme_code, value.pay_element__type__group__natural_code)
+
+    results[generatedKey] = value;
+  }
+
+  return results
+}
+
+const makeKey = (programme, nac, analysis1=null, analysis2=null, project=null) => {
+  return `${programme}/${nac}/${analysis1}/${analysis2}/${project}`
+}
+
 
 /**
  * Retrieves JSON data from an HTML element with the given ID.

front_end/styles/styles.scss

@@ -223,6 +223,10 @@ th {
   background-color: rgba(86, 148, 202, 0.25);
 }
 
+.override {
+  background-color: rgba(201, 155, 75, 0.25);
+}
+
 .link-button {
   border: none;
   padding: 0 !important;