components
projects
project-effort-summary-component
Index

ProjectEffortSummaryComponent

This component displays a summary of the effort spent on a project, both overall and per member. It provides information such as total effort, billable vs. non-billable hours, and a breakdown of each member's contributions.

Props

Prop NameTypeDescriptionDefault
projectEffortSummaryRecordProjectEffortSummaryAn object containing the project effort summary data.undefined

Note: The ProjectEffortSummary type is assumed to be defined elsewhere in your project.

Screenshot

ProjectEffortSummaryComponent

Usage

import ProjectEffortSummaryComponent from "@/components/ProjectEffortSummaryComponent";
import { ProjectEffortSummary } from "@/types/time-entry/time-entries";
 
const MyComponent = () => {
  // Example project effort summary data
  const project: ProjectEffortSummary = {
    project: {
      id: 1,
      name: "My Project",
      description: "A description of the project",
      logo: { thumbnailUrl: "https://example.com/logo.png" },
      color: { background: "#f44336", foreground: "#ffffff" },
    },
    members: [
      // ... member data
    ],
    totalMinutes: 1200,
    billableMinutes: 900,
    billableEffortInPercentage: 75,
    nonBillableMinutes: 300,
    nonBillableEffortInPercentage: 25,
  };
 
  return (
    <div>
      {/* Render the ProjectEffortSummaryComponent with the project data */}
      <ProjectEffortSummaryComponent projectEffortSummaryRecord={project} />
    </div>
  );
};