guesstimate/client/src/routes/project/financial-preview.tsx

import React, { FunctionComponent } from "react";
import { Project } from "../../models/project";
import { useProjectEstimations } from "../../hooks/use-project-estimations";
import { getCurrency, defaults, getTaskCategoryCost, getRoundUpEstimations } from "../../models/params";
import { getMinMaxCosts, Cost } from "../../util/stat";
import * as style from './style.module.css';
import ProjectTimeUnit from "../../components/project-time-unit";

export interface FinancialPreviewProps {
    project: Project
}

const FinancialPreview: FunctionComponent<FinancialPreviewProps> = ({ project }) => {
    const estimations = useProjectEstimations(project);
    const costs = getMinMaxCosts(project, estimations.p99);
    const roundUp = getRoundUpEstimations(project);
    return (
        <div className="table-container">
            <table className="table is-bordered is-striped is-fullwidth">
                <thead>
                    <tr>
                        <th colSpan={2}>
                          <span>Prévisionnel financier</span><br />
                          <span className="is-size-7 has-text-weight-normal">confiance >= 99.7%</span>
                        </th>
                    </tr>
                    <tr>
                        <th className="is-narrow">Temps</th>
                        <th>Coût</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td className="is-narrow">Maximum</td>
                        <td>
                          <CostDetails project={project} cost={costs.max} roundUp={roundUp} />
                        </td>
                    </tr>
                    <tr>
                        <td className="is-narrow">Minimum</td>
                        <td>
                          <CostDetails project={project} cost={costs.min} roundUp={roundUp} />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export interface CostDetailsProps {
  project: Project
  cost: Cost
  roundUp: boolean
}

export const CostDetails:FunctionComponent<CostDetailsProps> = ({ project, cost, roundUp }) => {
  return (
    <details>
      <summary><strong>
        ≈ {cost.totalCost} {getCurrency(project)}</strong>
        <span className="is-pulled-right">{ roundUp ? Math.ceil(cost.totalTime) : cost.totalTime.toFixed(2) } <ProjectTimeUnit project={project} /></span>
      </summary>
      <table className={`table is-fullwidth`}>
        <tbody>
        {
          Object.keys(cost.details).map(taskCategoryId => {
            const taskCategory = project.params.taskCategories[taskCategoryId];
            const details = cost.details[taskCategoryId];
            return (
              <tr key={`task-category-cost-${taskCategory.id}`}>
                <td className={`${style.noBorder} is-size-6`}>{taskCategory.label}</td>
                <td className={`${style.noBorder} is-size-6`}>{details.cost} {getCurrency(project)}</td>
                <td className={`${style.noBorder} is-size-6`}>{ roundUp ? Math.ceil(details.time) : details.time.toFixed(2) } <ProjectTimeUnit project={project} /> × {getTaskCategoryCost(taskCategory)} {getCurrency(project)}</td>
              </tr>
            )
          })
        }
        </tbody>
      </table>
    </details>
  );
};

export default FinancialPreview;