85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
|
import React, { FunctionComponent } from "react";
|
|||
|
|
import { Project, getMinMaxCosts, Cost } from "../../types/project";
|
|||
|
|
import { useProjectEstimations } from "../../hooks/useProjectEstimations";
|
|||
|
|
import { getCurrency, defaults, getTaskCategoryCost, getRoundUpEstimations } from "../../types/params";
|
|||
|
|
import * as style from './style.module.css';
|
|||
|
|
import ProjectTimeUnit from "../ProjectTimeUnit";
|
|||
|
|
|
|||
|
|
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;
|