Add skeleton of project overview HTML.

Dependencies

• [2] NAFJ6RB3 Minor module reorg.
• [3] B4MTB6UO Persist project across pages.
• [4] QH4UB73N Format with purty.
• [5] QAC2QJ32 Add project overview page to client.
• [*] QU5FW67R Add project selection to time tracker.

Change contents

• edit in client/src/Aftok/Api/Project.purs at line 12
  [2.3297]

  [2.3297]
  + import Data.Map as M
• replacement in client/src/Aftok/Api/Project.purs at line 15
  [2.3365]→[2.3365:3399](∅→∅)
  − import Data.Time.Duration (Hours)
  [2.3365]

  [2.3399]
  + import Data.Time.Duration (Hours, Days)
• replacement in client/src/Aftok/Api/Project.purs at line 17
  [2.3434]→[2.3434:3469](∅→∅)
  − import Data.UUID (UUID, parseUUID)
  [2.3434]

  [2.3469]
  + import Data.UUID (parseUUID)
• replacement in client/src/Aftok/Api/Project.purs at line 25
  [2.3670]→[2.3670:3681](∅→∅)
  − ( UserId
  [2.3670]

  [2.3681]
  + ( UserId(..)
• replacement in client/src/Aftok/Api/Project.purs at line 37
  [2.3894]→[2.3894:3916](∅→∅)
  − , initiator :: UUID
  [2.3894]

  [2.3916]
  + , initiator :: UserId
• edit in client/src/Aftok/Api/Project.purs at line 44
  [2.4014]

  [2.4014]
  +

  + data DepreciationFn

  + = LinearDepreciation { undep :: Days, dep :: Days }
• edit in client/src/Aftok/Api/Project.purs at line 48
  [2.4015]

  [2.4015]
  + newtype ProjectUserData' date

  + = ProjectUserData'

  + { userName :: String

  + , joinedOn :: date

  + , totalContribution :: Hours

  + , currentPayoutRatio :: Rational

  + }

  +

  + newtype ProjectDetail' date

  + = ProjectDetail'

  + { project :: Project' date

  + , depreciation :: DepreciationFn

  + , contributors :: M.Map UserId (ProjectUserData' date)

  + }

  +

  + type ProjectDetail = ProjectDetail' DateTime

  +
• replacement in client/src/Aftok/Api/Project.purs at line 77
  [2.4470]→[2.4470:4551](∅→∅)
  − initiator <- note "Failed to decode initiator UUID" $ parseUUID initiatorStr
  [2.4470]

  [2.4551]
  + initiator <- UserId <$> (note "Failed to decode initiator UUID" $ parseUUID initiatorStr)
• replacement in client/src/Aftok/Overview.purs at line 9
  [3.373]→[3.373:377](∅→∅)
  − --
  [3.373]

  [3.377]
  + --
• replacement in client/src/Aftok/Overview.purs at line 18
  [3.31]→[3.706:730](∅→∅),[3.706]→[3.706:730](∅→∅)
  − -- import Data.Map as M
  [3.31]

  [3.730]
  + import Data.Map as M
• edit in client/src/Aftok/Overview.purs at line 20
  [3.771]

  [3.771]
  + import Data.Unfoldable (fromMaybe)
• edit in client/src/Aftok/Overview.purs at line 23
  [3.832]→[3.832:901](∅→∅)
  − -- import Data.Time.Duration (Milliseconds(..), Hours(..), Days(..))
• replacement in client/src/Aftok/Overview.purs at line 45
  [3.1758]→[3.1758:1811](∅→∅)
  − -- import Aftok.Api.Overview

  − -- ( OverviewError,
  [3.1758]

  [3.1811]
  + -- import Aftok.Api.Overview

  + -- ( OverviewError,
• replacement in client/src/Aftok/Overview.purs at line 48
  [3.1829]→[3.1829:1873](∅→∅)
  − -- Interval(..),

  − -- TimeInterval,
  [3.1829]

  [3.1873]
  + -- Interval(..),

  + -- TimeInterval,
• replacement in client/src/Aftok/Overview.purs at line 51
  [3.1892]→[3.1892:1910](∅→∅)
  − -- TimeSpan,
  [3.1892]

  [3.1910]
  + -- TimeSpan,
• replacement in client/src/Aftok/Overview.purs at line 58
  [2.6486]→[2.6486:6548](∅→∅)
  − import Aftok.Api.Project (Project, ProjectEvent(..), Member')
  [2.6486]

  [3.2143]
  + import Aftok.Api.Project

  + (Project, Project'(..), ProjectEvent(..), Member', ProjectDetail, ProjectDetail'(..)

  + , DepreciationFn(..)

  + , ProjectUserData'(..)

  + )
• edit in client/src/Aftok/Overview.purs at line 69
  [3.9761]

  [3.9761]
  + , projectDetail :: Maybe ProjectDetail
• edit in client/src/Aftok/Overview.purs at line 116
  [3.10450]

  [3.10450]
  + , projectDetail: Nothing
• replacement in client/src/Aftok/Overview.purs at line 124
  [3.10644]→[3.10644:10977](∅→∅),[3.10977]→[2.6693:6742](∅→∅),[2.6742]→[3.11027:11047](∅→∅),[3.11027]→[3.11027:11047](∅→∅),[3.11047]→[2.6743:6870](∅→∅),[2.6870]→[3.11181:11321](∅→∅),[3.11181]→[3.11181:11321](∅→∅)
  − [ P.classes (ClassName <$> [ "container", "pt-6" ]) ]

  − [ HH.h1

  − [ P.classes (ClassName <$> [ "mb-0", "font-weight-bold", "text-center" ]) ]

  − [ HH.text "Project Overview" ]

  − , HH.p

  − [ P.classes (ClassName <$> [ "col-md-5", "text-muted", "text-center", "mx-auto" ]) ]

  − [ HH.text "Your project details" ]

  − , HH.div_

  − [ HH.slot _projectList unit (ProjectList.component system pcaps) st.selectedProject (Just <<< ProjectSelected) ]

  − , HH.div

  − [ P.classes (ClassName <$> if isNothing st.selectedProject then [ "collapse" ] else []) ]

  − []
  [3.10644]

  [3.3898]
  + [ P.classes (ClassName <$> [ "container", "pt-6" ]) ]

  + [ HH.h1

  + [ P.classes (ClassName <$> [ "mb-0", "font-weight-bold", "text-center" ]) ]

  + [ HH.text "Project Overview" ]

  + , HH.p

  + [ P.classes (ClassName <$> [ "col-md-5", "text-muted", "text-center", "mx-auto" ]) ]

  + [ HH.text "Your project details" ]

  + , HH.div_

  + [ HH.slot _projectList unit (ProjectList.component system pcaps) st.selectedProject (Just <<< ProjectSelected) ]

  + , HH.div

  + [ P.classes (ClassName <$> if isNothing st.selectedProject then [ "collapse" ] else []) ]

  + (fromMaybe $ projectDetail <$> st.projectDetail)

  + ]

  + ]

  +

  + projectDetail :: ProjectDetail -> H.ComponentHTML OverviewAction Slots m

  + projectDetail (ProjectDetail' detail) = do

  + let (Project' project) = detail.project

  + HH.div

  + [ P.classes (ClassName <$> [ "container-fluid" ]) ]

  + [ HH.section

  + [ P.id_ "projectOverview", P.classes (ClassName <$> ["pt-3"]) ]

  + [ HH.div

  + -- header

  + [ P.classes (ClassName <$> ["row", "pt-3", "font-weight-bold" ]) ]

  + [ colmd2 Nothing

  + , colmd2 (Just "Project Name")

  + , colmd2 (Just "Undepreciated Period")

  + , colmd2 (Just "Depreciation Duration")

  + , colmd2 (Just "Originator")

  + , colmd2 (Just "Origination Date")
• edit in client/src/Aftok/Overview.purs at line 156
  [3.3910]

  [3.11322]
  + , HH.div

  + [ P.classes (ClassName <$> ["row", "pt-3", "font-weight-bold" ]) ]

  + ([ colmd2 Nothing, colmd2 (Just project.projectName)] <>

  + depreciationCols detail.depreciation <>

  + [ colmd2 ((\(ProjectUserData' p) -> p.userName) <$> M.lookup project.initiator detail.contributors)

  + , colmd2 (Just $ show project.inceptionDate)

  + ])

  + ]

  + ]

  +

  + depreciationCols :: DepreciationFn -> Array (H.ComponentHTML OverviewAction Slots m)

  + depreciationCols = case _ of

  + LinearDepreciation obj ->

  + [ colmd2 (Just $ show obj.undep <> " days")

  + , colmd2 (Just $ show obj.dep <> " days")
• edit in client/src/Aftok/Overview.purs at line 172
  [3.11330]

  [3.3920]
  +

  + colmd2 :: Maybe String -> H.ComponentHTML OverviewAction Slots m

  + colmd2 xs = HH.div [ P.classes (ClassName <$> ["col-md-2"]) ] (fromMaybe $ HH.text <$> xs)

  +

  + -- <section id="associates">

  + -- <div class="row pt-3 font-weight-bold">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Associate

  + -- </div>

  + -- <div class="col-md-2">

  + -- Joined

  + -- </div>

  + -- <div class="col-md-2">

  + -- Hrs / %

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + --

  + -- <div class="row pt-3 pb-2 stripe">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Freuline Fred

  + -- </div>

  + -- <div class="col-md-2">

  + -- Oct 2020

  + -- </div>

  + -- <div class="col-md-2">

  + -- 24hrs / 2.4%

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + -- <div class="row pt-3 pb-2 stripe">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Goobie Works A Lot

  + -- </div>

  + -- <div class="col-md-2">

  + -- Jan 2020

  + -- </div>

  + -- <div class="col-md-2">

  + -- 500 / 50%

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + -- <div class="row pt-3 pb-2 stripe">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Average Fella

  + -- </div>

  + -- <div class="col-md-2">

  + -- May 2020

  + -- </div>

  + -- <div class="col-md-2">

  + -- 250 hrs / 25%

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + -- <div class="row pt-3 pb-2 stripe">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Cool Kid

  + -- </div>

  + -- <div class="col-md-2">

  + -- April 2020

  + -- </div>

  + -- <div class="col-md-2">

  + -- 226 hrs 22.6%

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + -- </section>

  + -- <!-- Map payouts -->

  + -- <div class="row font-weight-bold">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-4">

  + -- Payments

  + -- </div>

  + -- <div class="col-md-6">

  + --

  + -- </div>

  + -- </div>

  + -- <div class="row">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Oct 20 2020

  + -- </div>

  + -- <div class="col-md-2">

  + -- 100 zec

  + -- </div>

  + -- <div class="col-md-2">

  + -- Acme PaidUsRight

  + -- </div>

  + -- <div class="col-md-4">

  + -- </div>

  + -- </div>

  + -- <!-- map payout creditTos-->

  + -- <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Freuline Fred

  + -- </div>

  + -- <div class="col-md-2">

  + -- 2.4 zec

  + -- </div>

  + -- <div class="col-md-2">

  + -- 2.4 %

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + -- <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Goobie Works A Lot

  + -- </div>

  + -- <div class="col-md-2">

  + -- 50 zec

  + -- </div>

  + -- <div class="col-md-2">

  + -- 50 %

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div> <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Average Fella

  + -- </div>

  + -- <div class="col-md-2">

  + -- 25 zec

  + -- </div>

  + -- <div class="col-md-2">

  + -- 25 %

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div> <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- </div>

  + -- <div class="col-md-2">

  + -- Cool Kid

  + -- </div>

  + -- <div class="col-md-2">

  + -- 24.6 zec

  + -- </div>

  + -- <div class="col-md-2">

  + -- 24.6 %

  + -- </div>

  + -- <div class="col-md-2">

  + -- </div>

  + -- </div>

  + --

  + -- </section>

  + --

  + --

  + -- <!-- New Project form-->

  + -- <section id="addProject">

  + --

  + -- <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- <span class="float-right">Project Name</span>

  + -- </div>

  + -- <div class="col-md-4">

  + -- <input type="text" id="projectName" name="projectName" />

  + -- </div>

  + -- </div>

  + --

  + -- <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- <span class="float-right">Undepreciated Period ( Months )</span>

  + -- </div>

  + -- <div class="col-md-4">

  + -- <input type="text" id="undepreciatedPeriod" name="undepreciatedPeriod" />

  + -- </div>

  + -- </div>

  + --

  + -- <div class="row pt-3">

  + -- <div class="col-md-4">

  + -- <span class="float-right">Depreciation Duration ( Months )</span>

  + -- </div>

  + -- <div class="col-md-4">

  + -- <input type="text" id="depreciationDuration" name="depreciationDuration" />

  + -- </div>

  + -- </div>

  + --

  + -- <div class="row pt-3 pb-3">

  + -- <div class="col-md-2">

  + -- </div>

  + -- <div class="col-md-10">

  + -- <button class="btn btn-sm btn-primary lift ml-auto">Add Project</button>

  + -- </div>

  + -- </div>

  + --

  + -- </section>
• replacement in client/src/Aftok/Overview.purs at line 398
  [3.4470]→[2.6871:6888](∅→∅)
  − apiCapability =
  [3.4470]

  [2.6888]
  + apiCapability =
• replacement in client/src/Aftok/Overview.purs at line 403
  [3.4524]→[2.6930:6948](∅→∅)
  − mockCapability =
  [3.4524]

  [2.6948]
  + mockCapability =
• edit in client/src/Aftok/Types.purs at line 85
  [2.8270]

  [7.7643]
  + derive instance userIdOrd :: Ord UserId