API returns necessary filed to calculate project progress

Author: test0n3

rails-time-track/app/serializers/project_serializer.rb

@@ -1,11 +1,16 @@
 class ProjectSerializer < ActiveModel::Serializer
-  attributes :id, :name, :client, :category, :start_date, :end_date, :closed, :estimated_cost, :real_cost, :members, :weekly, :user_detail
+  attributes :id, :name, :client, :category, :start_date, :end_date, :closed, :estimated_cost, :real_cost, :members, :weekly, :user_detail#, :daily
 
   def members
-    self.object.users.select("users.id, users.name, users.role")
+    Project.joins(:users, :project_members).select("users.id, users.name, users.role, project_members.estimated_cost, project_members.real_cost")
+    # self.object.users.select("users.id, users.name, users.role")
+    # Project.joins(:users, :project_members).select("users.id, users.name, users.role, project_members.estimated_cost, project_members.real_cost")
   end
-
-
+=begin
+  def daily
+    self.object.daily_logs.select("daily_logs.id, daily_logs.project_member_id, daily_logs.date, daily_logs.amount")
+  end
+=end
   def weekly
     self.object.weekly_project_reports.select("weekly_project_reports.id, weekly_project_reports.week, weekly_project_reports.estimated_cost, weekly_project_reports.real_cost")
   end

react-time-track/src/views/project.js

@@ -9,6 +9,28 @@ import CloseProjectModal from "../components/close-project-modal";
 import { getProjectDetail, closeProject } from "../services/project";
 import { getWeeklyReport } from "../services/weekly_report";
 
+import Modal from "../components/modal";
+import CloseProjectModal from "../components/close-project-modal";
+import calculateProgress from "../utils/calculateProgress";
+import calculateRisk from "../utils/calculateRisk";
+
+// const weeklyData = [
+//   {
+//     id: 1,
+//     project_id: 1,
+//     week: "28",
+//     estimated_cost: 96600,
+//     real_cost: 117000
+//   },
+//   {
+//     id: 2,
+//     project_id: 1,
+//     week: "29",
+//     estimated_cost: 96600,
+//     real_cost: 117000
+//   }
+// ];
+
 const card = {
   display: "flex",
   justifyContent: "space-between",
@@ -49,7 +71,7 @@ function Project({ project_id }) {
       .then(response => setWeeklyData(response))
       .catch(error => console.log(error));
   }, [project]);
-
+  console.log("Project:", project);
   React.useEffect(() => {
     let acumEstimated = 0;
     let acumReal = 0;
@@ -155,6 +177,7 @@ function Project({ project_id }) {
         }}
       >
         {project.members.map(member => {
+          console.log("Member:", member);
           return (
             <Card styles={card} key={member.id}>
               <Link
@@ -174,7 +197,9 @@ function Project({ project_id }) {
                   <span>{member.name}</span>
                   <span css={{ fontSize: "0.8em" }}>{member.role}</span>
                 </div>
-                <Circle>30%</Circle>
+                <Circle>
+                  {calculateProgress(member.real_cost, member.estimated_cost)}
+                </Circle>
               </Link>
             </Card>
             //