86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
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;
|