building the table for harvest plans

src/harvestPlan/HarvestPlanTable.tsx

@@ -1,5 +1,7 @@
-import { Box } from "@mui/material"
-import ResponsiveTable from "common/ResponsiveTable"
+import { Box, Typography } from "@mui/material"
+import ResponsiveTable, { Column } from "common/ResponsiveTable"
+import GrainDescriber from "grain/GrainDescriber"
+import { HarvestPlan } from "models"
 import { useHarvestPlanAPI } from "providers"
 import { useCallback, useEffect, useState } from "react"
 
@@ -11,16 +13,97 @@ export default function HarvestPlanTable(props: Props){
   const harvestAPI = useHarvestPlanAPI()
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(10)
+  const [loadedPlans, setLoadedPlans] = useState<HarvestPlan[]>([])
+  const [total, setTotal] = useState(0)
   
   useEffect(()=>{
-    harvestAPI.listHarvestPlans(pageSize, page*pageSize, "asc", "name", field).then(resp => {
-      console.log(resp)
+    harvestAPI.listHarvestPlans(pageSize, page*pageSize, "asc", "harvestYear", field).then(resp => {
+      setLoadedPlans(resp.data.harvestPlan.map(hp => HarvestPlan.create(hp)))
+      setTotal(resp.data.total)
     })
   },[page, pageSize, field])
 
-  return (
-    <Box>
+  const columns: Column<HarvestPlan>[] = [
+    //these columns would be the ones on by default
+    //field - hideable
+    {
+      title: "Field",
+      hidden: field !== undefined,
+      render: (row) => <Typography align="center">{row.field()}</Typography>
+    },
+    //title
+    {
+      title: "Plan",
+      render: (row) => <Typography align="center">{row.settings.title}</Typography>
+    },
+    //year
+    {
+      title: "Year",
+      render: (row) => <Typography align="center">{row.harvestYear()}</Typography>
+    },
+    //grain - crop_type
+    {
+      title: "Grain",
+      render: (row) => <Typography align="center">{GrainDescriber(row.cropType()).name}</Typography>
+    },
+    //variant - grain_type
+    {
+      title: "Variant",
+      render: (row) => <Typography align="center">{row.grainType()}</Typography>
+    },
+    //yield target
+    {
+      title: "Yield Target (bu)",
+      render: (row) => <Typography align="right">{row.yieldTarget()}</Typography>
+    },
+    //actual yield
+    {
+      title: "Actual Yield (bu)",
+      render: (row) => <Typography align="right">{row.actualYield()}</Typography>
+    },
+    //bushel price
+    {
+      title: "Bushel Price",
+      render: (row) => <Typography align="right">{row.bushelPrice()}</Typography>
+    },
+    //material cost
+    {
+      title: "Material Cost",
+      render: (row) => <Typography align="right">{row.totalMaterialCost()}</Typography>
+    },
+    //equipment cost
+    {
+      title: "Equipment Cost",
+      render: (row) => <Typography align="right">{row.totalEquipmentCost()}</Typography>
+    }
+    //these columns could be optional (disabled by default but turned on later?)
+    //pre-seed materials
+    //pre-seed equpment
+    //seed materials
+    //seed equpment
+    //post-seed materials
+    //post-seed equpment
+    //harvest materials
+    //harvest equpment
+    //fall materials
+    //fall equpment
+  ]
 
-    </Box>
+  return (
+    <ResponsiveTable<HarvestPlan>
+      columns={columns}
+      title={"Harvest Plans"}
+      resizeable
+      page={page}
+      pageSize={pageSize}
+      rows={loadedPlans}
+      total={total}
+      handleRowsPerPageChange={(e)=>{
+        setPageSize(e.target.value)
+      }}
+      setPage={(page)=>{
+        setPage(page)
+      }}
+    />
   )
 }

src/pages/Field.tsx

@@ -1,6 +1,6 @@
 import { Field, fieldScope, HarvestPlan, teamScope } from "models";
 import { useFieldAPI, useGlobalState, useHarvestPlanAPI } from "providers";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import PageContainer from "./PageContainer";
 import { useMobile, useSnackbar, useUserAPI } from "hooks";
@@ -103,7 +103,7 @@ export default function FieldPage() {
 
     const map = () => {
       return (
-        <Box height={550}>
+        <Box minHeight={550} height="100%">
           <FieldMinimap field={field} borderSpacing={0.001} squared/>
         </Box>
       )
@@ -139,22 +139,30 @@ export default function FieldPage() {
 
     const desktopView = () => {
       return (
+        <React.Fragment>
+        <Box>
+        {field.name()}
         <Grid2 container spacing={1}>
           <Grid2 size={4}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
               {map()}
             </Card>
           </Grid2>
           <Grid2 size={3}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
             {weather()}
             </Card>
           </Grid2>
           <Grid2 size={5}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
             {tasks()}
             </Card>
           </Grid2>
+        </Grid2>
+        </Box>
+        <Box>
+        Harvest Overview
+        <Grid2 container spacing={1}>
           <Grid2 size={4}>
             <Card raised>
             {harvestPlans()}
@@ -166,6 +174,8 @@ export default function FieldPage() {
             </Card>
           </Grid2>
         </Grid2>
+        </Box>
+        </React.Fragment>
       )
     }