Ameliore design in income page and stat page

27 files changed, 488 insertions, 422 deletions

diff --git a/src/client/elm/LoggedIn/Home/Account/View.elm b/src/client/elm/LoggedIn/Home/Account/View.elm
index 63fb997..bec75d5 100644
--- a/src/client/elm/LoggedIn/Home/Account/View.elm
+++ b/src/client/elm/LoggedIn/Home/Account/View.elm
@@ -9,7 +9,7 @@ import LoggedData exposing (LoggedData)
 
 import LoggedIn.Home.Model as HomeModel
 import LoggedIn.Home.Model.Payer exposing (..)
-import LoggedIn.View.Price exposing (price)
+import LoggedIn.View.Format as Format
 
 import Model exposing (Model)
 import Model.User exposing (getUserName)
@@ -36,5 +36,5 @@ exceedingPayer loggedData homeModel payer =
         ]
     , span
         [ class "amount" ]
-        [ text ("+ " ++ (price loggedData.conf payer.amount)) ]
+        [ text ("+ " ++ (Format.price loggedData.conf payer.amount)) ]
     ]
diff --git a/src/client/elm/LoggedIn/Home/View.elm b/src/client/elm/LoggedIn/Home/View.elm
index 7e6ba40..43cc9cf 100644
--- a/src/client/elm/LoggedIn/Home/View.elm
+++ b/src/client/elm/LoggedIn/Home/View.elm
@@ -20,7 +20,7 @@ import Mailbox
 view : LoggedData -> LoggedInModel.Model -> Html
 view loggedData loggedIn =
   div
-    [ class "loggedIn" ]
+    [ class "home" ]
     [ AddPaymentView.view loggedData loggedIn
     , div
         [ class "expandables" ]
diff --git a/src/client/elm/LoggedIn/Home/View/Monthly.elm b/src/client/elm/LoggedIn/Home/View/Monthly.elm
index c001331..237b551 100644
--- a/src/client/elm/LoggedIn/Home/View/Monthly.elm
+++ b/src/client/elm/LoggedIn/Home/View/Monthly.elm
@@ -12,7 +12,7 @@ import LoggedIn.Action as LoggedInAction
 
 import LoggedIn.Home.Action as HomeAction
 import LoggedIn.Home.Model as HomeModel
-import LoggedIn.View.Price exposing (price)
+import LoggedIn.View.Format as Format
 import LoggedIn.Home.View.Expand exposing (..)
 
 import Model.Payment as Payment exposing (Payments, Payment, monthly)
@@ -52,7 +52,7 @@ monthlyCount loggedData monthlyPayments homeModel =
         [ class "header"
         , onClick Mailbox.address (Action.UpdateLoggedIn << LoggedInAction.HomeAction <| HomeAction.ToggleMonthlyDetail)
         ]
-        [ text (getParamMessage [toString count, price loggedData.conf total] key loggedData.translations)
+        [ text (getParamMessage [toString count, Format.price loggedData.conf total] key loggedData.translations)
         , expand ExpandDown homeModel.monthlyDetail
         ]
 
@@ -81,7 +81,7 @@ paymentLine loggedData homeModel payment =
             , ("refund", payment.cost < 0)
             ]
         ]
-        [ text (price loggedData.conf payment.cost) ]
+        [ text (Format.price loggedData.conf payment.cost) ]
     , div
         [ class "cell delete"
         , onClick Mailbox.address (Action.UpdateLoggedIn <| LoggedInAction.DeletePayment payment.id)
diff --git a/src/client/elm/LoggedIn/Home/View/Table.elm b/src/client/elm/LoggedIn/Home/View/Table.elm
index 71aa4e5..5ac740c 100644
--- a/src/client/elm/LoggedIn/Home/View/Table.elm
+++ b/src/client/elm/LoggedIn/Home/View/Table.elm
@@ -17,7 +17,7 @@ import LoggedIn.Action as LoggedInAction
 import LoggedIn.Home.Action as HomeAction
 import LoggedIn.Home.Model as HomeModel
 import LoggedIn.View.Date exposing (..)
-import LoggedIn.View.Price exposing (price)
+import LoggedIn.View.Format as Format
 
 import Model.User exposing (getUserName)
 import Model.Payment as Payment exposing (..)
@@ -68,7 +68,7 @@ paymentLine loggedData homeModel payment =
             , ("refund", payment.cost < 0)
             ]
         ]
-        [ text (price loggedData.conf payment.cost) ]
+        [ text (Format.price loggedData.conf payment.cost) ]
     , div
         [ class "cell user" ]
         [ payment.userId
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index 010b503..f62902a 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -24,14 +24,14 @@ import LoggedIn.Action as LoggedInAction
 import LoggedIn.Income.Action as IncomeAction
 
 import LoggedIn.View.Date exposing (renderShortDate)
-import LoggedIn.View.Price exposing (price)
+import LoggedIn.View.Format as Format
 
 import Utils.Maybe exposing (isJust)
 
 view : LoggedData -> IncomeModel.Model -> Html
 view loggedData incomeModel =
   div
-    []
+    [ class "income" ]
     [ h1 [] [ text <| getMessage "AddIncome" loggedData.translations ]
     , addIncomeView loggedData incomeModel.addIncome
     , h1 [] [ text <| getMessage "MonthlyNetIncomes" loggedData.translations ]
@@ -71,7 +71,7 @@ addIncomeView loggedData addIncome =
 
 incomesView : LoggedData -> Html
 incomesView loggedData =
-  ol
+  ul
     []
     ( loggedData.incomes
         |> Dict.toList
@@ -87,7 +87,7 @@ incomeView loggedData (incomeId, income) =
     []
     [ text <| renderShortDate (Date.fromTime income.creation) loggedData.translations
     , text "    −    "
-    , text <| price loggedData.conf income.amount
+    , text <| Format.price loggedData.conf income.amount
     , text "    −    "
     , button
         [ onClick Mailbox.address (Action.UpdateLoggedIn <| LoggedInAction.DeleteIncome incomeId) ]
diff --git a/src/client/elm/LoggedIn/Stat/View.elm b/src/client/elm/LoggedIn/Stat/View.elm
index 76acd8f..3fe9d1f 100644
--- a/src/client/elm/LoggedIn/Stat/View.elm
+++ b/src/client/elm/LoggedIn/Stat/View.elm
@@ -3,40 +3,59 @@ module LoggedIn.Stat.View
   ) where
 
 import Html exposing (..)
+import Html.Attributes exposing (..)
 
 import LoggedData exposing (LoggedData)
 
-import Model.Payment exposing (Payments)
+import Model.Payment as Payment exposing (Payments)
 import Model.Conf exposing (Conf)
+import Model.Translations exposing (getMessage)
 
-import LoggedIn.View.Price exposing (price)
+import LoggedIn.View.Format as Format
+
+import View.Plural exposing (plural)
 
 view : LoggedData -> Html
 view loggedData =
   div
-    []
-    [ h1 [] [ text "Total" ]
-    , paymentDetail loggedData.conf loggedData.payments
+    [ class "stat" ]
+    [ h1 [] [ text (getMessage "Overall" loggedData.translations) ]
+    , paymentsDetail loggedData (Payment.punctual loggedData.payments)
+    , h1 [] [ text (getMessage "ByMonths" loggedData.translations) ]
+    , monthsDetail loggedData
     ]
 
-paymentDetail : Conf -> Payments -> Html
-paymentDetail conf payments =
+paymentsDetail : LoggedData -> Payments -> Html
+paymentsDetail loggedData payments =
   ul
     []
     [ li
         []
-        [ payments
-            |> List.length
-            |> toString
-            |> text
-        , text " payments"
+        [ let single = getMessage "Payment" loggedData.translations
+              multiple = getMessage "Payments" loggedData.translations
+          in  text <| plural (List.length payments) single multiple
         ]
     , li
         []
         [ payments
             |> List.map .cost
             |> List.sum
-            |> price conf
+            |> Format.price loggedData.conf
             |> text
         ]
     ]
+
+monthsDetail : LoggedData -> Html
+monthsDetail loggedData =
+  ul
+    []
+    []
+
+monthDetail : String -> Int -> Html
+monthDetail month amount =
+  li
+    []
+    [ text month
+    , text " "
+    , text (toString amount)
+    ]
diff --git a/src/client/elm/LoggedIn/View.elm b/src/client/elm/LoggedIn/View.elm
index b1ec4d3..dbbab33 100644
--- a/src/client/elm/LoggedIn/View.elm
+++ b/src/client/elm/LoggedIn/View.elm
@@ -3,6 +3,7 @@ module LoggedIn.View
   ) where
 
 import Html exposing (..)
+import Html.Attributes exposing (..)
 
 import TransitRouter
 import Route exposing (..)
@@ -19,9 +20,12 @@ import LoggedIn.Stat.View as StatView
 
 view : Model -> LoggedInModel.Model -> Html
 view model loggedIn =
-  let loggedData = LoggedData.build model loggedIn
-  in  case TransitRouter.getRoute model of
-        Empty -> text ""
-        Home -> HomeView.view loggedData loggedIn.home
-        Income -> UserView.view loggedData loggedIn.income
-        Stat -> StatView.view loggedData
+  div
+    [ class "loggedIn" ]
+    [ let loggedData = LoggedData.build model loggedIn
+      in  case TransitRouter.getRoute model of
+            Empty -> text ""
+            Home -> HomeView.view loggedData loggedIn.home
+            Income -> UserView.view loggedData loggedIn.income
+            Stat -> StatView.view loggedData
+    ]
diff --git a/src/client/elm/LoggedIn/View/Price.elm b/src/client/elm/LoggedIn/View/Format.elm
index 2bfed23..7925a5c 100644
--- a/src/client/elm/LoggedIn/View/Price.elm
+++ b/src/client/elm/LoggedIn/View/Format.elm
@@ -1,4 +1,4 @@
-module LoggedIn.View.Price
+module LoggedIn.View.Format
   ( price
   ) where
 
@@ -8,13 +8,13 @@ import Model.Conf exposing (Conf)
 
 price : Conf -> Int -> String
 price conf amount =
-  (  formatInt amount
+  (  number amount
   ++ " "
   ++ conf.currency
   )
 
-formatInt : Int -> String
-formatInt n =
+number : Int -> String
+number n =
   abs n
     |> toString
     |> toList
diff --git a/src/client/elm/View/Plural.elm b/src/client/elm/View/Plural.elm
new file mode 100644
index 0000000..6e480fd
--- /dev/null
+++ b/src/client/elm/View/Plural.elm
@@ -0,0 +1,7 @@
+module View.Plural
+  ( plural
+  ) where
+
+plural : Int -> String -> String -> String
+plural n single multiple =
+  (toString n) ++ " " ++ if n <= 1 then single else multiple
diff --git a/src/server/Design/Animation/Opacity.hs b/src/server/Design/Animation/Opacity.hs
deleted file mode 100644
index cc720fd..0000000
--- a/src/server/Design/Animation/Opacity.hs
+++ /dev/null
@@ -1,17 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.Animation.Opacity
-  ( opacityAnimation
-  ) where
-
-import Data.String (fromString)
-
-import Clay
-
-import Design.Animation.Keyframes
-
-opacityAnimation :: Css
-opacityAnimation = do
-  animationName (fromString . show $ OpacityKeyframes)
-  animationDuration (sec 0.2)
-  animationTimingFunction ease
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index c41d06f..90dd842 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -8,17 +8,26 @@ import Clay
 
 import Data.Text.Lazy (Text)
 
-import Design.Header
-import Design.SignIn
-import Design.LoggedIn
+import qualified Design.Header as HeaderDesign
+import qualified Design.SignIn as SignInDesign
+import qualified Design.LoggedIn as LoggedInDesign
+
 import Design.Animation.Keyframes
 
+import Design.Color as Color
+
 globalDesign :: Text
 globalDesign = renderWith compact [] global
 
 global :: Css
 global = do
 
+  header ? HeaderDesign.design
+  ".signIn" ? SignInDesign.design
+  ".loggedIn" ? LoggedInDesign.design
+
+  allKeyframes
+
   body ? do
     position relative
     minWidth (px 550)
@@ -26,10 +35,15 @@ global = do
 
   a ? cursor pointer
 
-  allKeyframes
-
-  signInDesign
-
-  headerDesign
-
-  loggedInDesign
+  h1 ? do
+    fontSize (px 20)
+    color Color.red
+    marginBottom (em 1)
+
+  ul ? do
+    marginBottom (em 1)
+    li ? do
+      marginBottom (em 0.5)
+      before & do
+        content (stringContent "• ")
+        color Color.red
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index e361cb1..d4546f8 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -1,7 +1,7 @@
 {-# LANGUAGE OverloadedStrings #-}
 
 module Design.Header
-  ( headerDesign
+  ( design
   ) where
 
 import Data.Monoid ((<>))
@@ -11,51 +11,49 @@ import Clay
 import Design.Color as C
 import Design.Constants
 
-headerDesign :: Css
-headerDesign =
-
-  header ? do
-    let headerHeight = px 80
-    let headerPadding = px 20
-    let darkenedRed = C.red +. 10
-    lineHeight headerHeight
-    height headerHeight
-    marginBottom blockMarginBottom
+design :: Css
+design = do
+  let headerHeight = px 80
+  let headerPadding = px 20
+  let darkenedRed = C.red +. 10
+  lineHeight headerHeight
+  height headerHeight
+  marginBottom blockMarginBottom
+  position relative
+  backgroundColor C.red
+  color C.white
+
+  ".item" ? do
+    float floatLeft
+    paddingLeft headerPadding
+    paddingRight headerPadding
+    hover & backgroundColor darkenedRed
+    focus & backgroundColor darkenedRed
     position relative
-    backgroundColor C.red
+    ".current" & after & do
+        display block
+        content (stringContent "")
+        height (px 5)
+        width (pct 100)
+        position absolute
+        bottom (px 0)
+        left (px 0)
+        backgroundColor C.white
+
+  ".title" ? do
+    height (pct 100)
+    fontSize (px 35)
+    textAlign (alignSide sideLeft)
+    paddingLeft headerPadding
+    paddingRight headerPadding
+
+  (".name" <> ".signOut") ? float floatRight
+
+  ".name" ? do
+    paddingLeft headerPadding
+    paddingRight headerPadding
+
+  ".signOut" ? do
+    height (pct 100)
+    fontSize iconFontSize
     color C.white
-
-    ".item" ? do
-      float floatLeft
-      paddingLeft headerPadding
-      paddingRight headerPadding
-      hover & backgroundColor darkenedRed
-      focus & backgroundColor darkenedRed
-      position relative
-      ".current" & after & do
-          display block
-          content (stringContent "")
-          height (px 5)
-          width (pct 100)
-          position absolute
-          bottom (px 0)
-          left (px 0)
-          backgroundColor C.white
-
-    ".title" ? do
-      height (pct 100)
-      fontSize (px 35)
-      textAlign (alignSide sideLeft)
-      paddingLeft headerPadding
-      paddingRight headerPadding
-
-    (".name" <> ".signOut") ? float floatRight
-
-    ".name" ? do
-      paddingLeft headerPadding
-      paddingRight headerPadding
-
-    ".signOut" ? do
-      height (pct 100)
-      fontSize iconFontSize
-      color C.white
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index d35276b..63ff413 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -1,28 +1,22 @@
 {-# LANGUAGE OverloadedStrings #-}
 
 module Design.LoggedIn
-  ( loggedInDesign
+  ( design
   ) where
 
-import Clay
-
-import Design.LoggedIn.Add
-import Design.LoggedIn.Expandables
-import Design.LoggedIn.Table
-import Design.LoggedIn.Pages
-import Design.Animation.Opacity
-
-loggedInDesign :: Css
-loggedInDesign =
+import Data.Monoid ((<>))
 
-  ".loggedIn" ? do
-
-    opacityAnimation
-
-    addDesign
+import Clay
 
-    expandablesDesign
+import qualified Design.LoggedIn.Home as HomeDesign
+import qualified Design.LoggedIn.Income as IncomeDesign
+import qualified Design.LoggedIn.Stat as StatDesign
 
-    tableDesign
+design :: Css
+design = do
+  ".home" ? HomeDesign.design
+  ".income" ? IncomeDesign.design
+  ".stat" ? StatDesign.design
 
-    pagesDesign
+  (".income" <> ".stat") ? do
+    "margin" -: "0 2vw"
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
deleted file mode 100644
index ef0603c..0000000
--- a/src/server/Design/LoggedIn/Add.hs
+++ /dev/null
@@ -1,89 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Add
-  ( addDesign
-  ) where
-
-import Data.Monoid ((<>))
-
-import Clay
-
-import Design.Color as C
-import Design.Helper
-import Design.Constants
-
-addDesign :: Css
-addDesign =
-
-  form # ".addPayment" ? do
-    centeredWithMargin
-    marginBottom blockMarginBottom
-    display flex
-    "justify-content" -: "center"
-
-    ".name" <> ".cost" ? do
-      position relative
-      display flex
-      marginRight (pct blockPercentMargin)
-      label ? do
-        fontWeight bold
-        display inlineBlock
-        width (px 50)
-        textAlign (alignSide sideCenter)
-        backgroundColor C.darkGrey
-        color C.white
-        height (px inputHeight)
-        lineHeight (px inputHeight)
-        fontSize (px 22)
-        verticalAlign middle
-        cursor cursorText
-        borderRadius (px 0) radius radius (px 0)
-      input ? do
-        defaultInput inputHeight
-        borderRadius radius (px 0) (px 0) radius
-        "width" -: "calc(100% - 40px)"
-      "input:focus + label" ? backgroundColor C.grey
-      hover & do
-        input ? borderColor C.grey
-        label ? backgroundColor C.grey
-
-    ".name" ? minWidth (px 150)
-
-    button # ".frequency" ? do
-      fontSize (pct 90)
-      marginRight (pct blockPercentMargin)
-
-      (".punctual" <> ".monthly") ? do
-        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
-        paddingLeft (px 15)
-        paddingRight (px 15)
-        ".selected" & do
-          backgroundColor C.blue
-          color C.white
-
-      hover & (".punctual" <> ".monthly") ?
-        ".selected" & backgroundColor (focusLighten C.blue)
-
-      focus & (".punctual" <> ".monthly") ?
-        ".selected" & backgroundColor (focusLighten C.blue)
-
-      ".punctual" ? borderRadius radius radius 0 0
-      ".monthly" ? borderRadius 0 0 radius radius
-
-    button # ".add" ? do
-      defaultButton C.red C.white (px inputHeight) focusLighten
-      paddingLeft (px 15)
-      paddingRight (px 15)
-      i ? marginLeft (px 10)
-      ".waitingServer" & ("cursor" -: "not-allowed")
-
-    ".name.error" <> ".cost.error" ? do
-      input ? borderColor C.redError
-      label ? backgroundColor C.redError
-      "input:focus + label" ? backgroundColor C.redError
-
-    ".errorMessage" ? do
-      position absolute
-      color C.redError
-      top (px (inputHeight + 10))
-      left (px 0)
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
deleted file mode 100644
index 90ea32d..0000000
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ /dev/null
@@ -1,31 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Expandables
-  ( expandablesDesign
-  ) where
-
--- import Data.Monoid ((<>))
---
-import Clay
-
-import Design.Color as C
-import Design.Helper
-import Design.Constants
-
-expandablesDesign :: Css
-expandablesDesign =
-
-  ".expandables" ? do
-
-    ".expand" ? do
-      position absolute
-      right blockPadding
-      bottom (px 2)
-
-    ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
-
-    ".account" ? do
-      expandBlock C.green C.white (px inputHeight)
-      ".userName" ? marginRight (px 10)
-
-    ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs
new file mode 100644
index 0000000..be99a2c
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home.hs
@@ -0,0 +1,19 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.LoggedIn.Home.Add as AddDesign
+import qualified Design.LoggedIn.Home.Expandables as ExpandablesDesign
+import qualified Design.LoggedIn.Home.Table as TableDesign
+import qualified Design.LoggedIn.Home.Pages as PagesDesign
+
+design :: Css
+design = do
+  form # ".addPayment" ? AddDesign.design
+  ".expandables" ? ExpandablesDesign.design
+  ".table" ? TableDesign.design
+  ".pages" ? PagesDesign.design
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
new file mode 100644
index 0000000..7613ba3
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -0,0 +1,87 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Add
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+  centeredWithMargin
+  marginBottom blockMarginBottom
+  display flex
+  "justify-content" -: "center"
+
+  ".name" <> ".cost" ? do
+    position relative
+    display flex
+    marginRight (pct blockPercentMargin)
+    label ? do
+      fontWeight bold
+      display inlineBlock
+      width (px 50)
+      textAlign (alignSide sideCenter)
+      backgroundColor C.darkGrey
+      color C.white
+      height (px inputHeight)
+      lineHeight (px inputHeight)
+      fontSize (px 22)
+      verticalAlign middle
+      cursor cursorText
+      borderRadius (px 0) radius radius (px 0)
+    input ? do
+      defaultInput inputHeight
+      borderRadius radius (px 0) (px 0) radius
+      "width" -: "calc(100% - 40px)"
+    "input:focus + label" ? backgroundColor C.grey
+    hover & do
+      input ? borderColor C.grey
+      label ? backgroundColor C.grey
+
+  ".name" ? minWidth (px 150)
+
+  button # ".frequency" ? do
+    fontSize (pct 90)
+    marginRight (pct blockPercentMargin)
+
+    (".punctual" <> ".monthly") ? do
+      defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+      paddingLeft (px 15)
+      paddingRight (px 15)
+      ".selected" & do
+        backgroundColor C.blue
+        color C.white
+
+    hover & (".punctual" <> ".monthly") ?
+      ".selected" & backgroundColor (focusLighten C.blue)
+
+    focus & (".punctual" <> ".monthly") ?
+      ".selected" & backgroundColor (focusLighten C.blue)
+
+    ".punctual" ? borderRadius radius radius 0 0
+    ".monthly" ? borderRadius 0 0 radius radius
+
+  button # ".add" ? do
+    defaultButton C.red C.white (px inputHeight) focusLighten
+    paddingLeft (px 15)
+    paddingRight (px 15)
+    i ? marginLeft (px 10)
+    ".waitingServer" & ("cursor" -: "not-allowed")
+
+  ".name.error" <> ".cost.error" ? do
+    input ? borderColor C.redError
+    label ? backgroundColor C.redError
+    "input:focus + label" ? backgroundColor C.redError
+
+  ".errorMessage" ? do
+    position absolute
+    color C.redError
+    top (px (inputHeight + 10))
+    left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
new file mode 100644
index 0000000..5ba5711
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -0,0 +1,27 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Expandables
+  ( design
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+
+  ".expand" ? do
+    position absolute
+    right blockPadding
+    bottom (px 2)
+
+  ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+
+  ".account" ? do
+    expandBlock C.green C.white (px inputHeight)
+    ".userName" ? marginRight (px 10)
+
+  ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
new file mode 100644
index 0000000..932865c
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -0,0 +1,32 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Pages
+  ( design
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+  padding (px 30) (px 30) (px 30) (px 30)
+  textAlign (alignSide (sideCenter))
+  clearFix
+
+  ".page" ? do
+    defaultButton C.white C.darkGrey (px 50) focusDarken
+    display inlineBlock
+    border solid (px 2) C.darkGrey
+    marginRight (px 10)
+    paddingLeft (px 10)
+    paddingRight (px 10)
+    fontWeight bold
+
+    ":not(.current)" & cursor pointer
+
+    ".current" & do
+      borderColor C.red
+      color C.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
new file mode 100644
index 0000000..58ffb33
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -0,0 +1,97 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Table
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import qualified Clay.Display as D
+
+import Design.Color as C
+import Design.Media
+import Design.Constants
+import Design.Helper
+
+design :: Css
+design = do
+  display D.table
+  width (pct 100)
+  textAlign (alignSide (sideCenter))
+  "border-spacing" -: "10 px"
+
+  ".header" <> ".row" ? display tableRow
+  let headerHeight = (px 70)
+
+  ".header" ? do
+    fontWeight bold
+    backgroundColor C.blue
+    color C.white
+    fontSize iconFontSize
+    lineHeight headerHeight
+
+  ".row" ? do
+    fontSize (px 18)
+    lineHeight (px rowHeightPx)
+
+    hover & do
+      let (borderW, triangleW, triangleH) = (4, 6, 8)
+      ".cell:first-child::before" ? do
+        display block
+        content (stringContent "")
+        position absolute
+        top (px 0)
+        left (px 0)
+
+        width (px borderW)
+        height (px rowHeightPx)
+        backgroundColor C.green
+
+      ".cell:first-child::after" ? do
+        display block
+        content (stringContent "")
+        position absolute
+        top (px (rowHeightPx `Prelude.div` 2 - triangleH))
+        left (px borderW)
+
+        width (px 0)
+        height (px 0)
+        borderTop solid (px triangleH) transparent
+        borderBottom solid (px triangleH) transparent
+        borderLeft solid (px triangleW) C.green
+
+    nthChild "odd" & do
+      backgroundColor C.lightGrey
+    ".edition" & do
+      backgroundColor C.paymentFocus
+      ".delete" |> button ? visibility visible
+
+  ".cell" ? do
+    display tableCell
+    position relative
+    ".category" & width (pct 40)
+    ".cost" & do
+      width (pct 17)
+      ".refund" & color C.green
+    ".user" & width (pct 20)
+    ".date" & do
+      width (pct 20)
+      smallScreen $ do
+        ".shortDate" ? display inline
+        ".longDate" ? display none
+      largeScreen $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+    ".delete" & do
+      position relative
+      width (pct 3)
+      textAlign (alignSide sideCenter)
+      button ? do
+        defaultButton C.red C.white (px rowHeightPx) focusLighten
+        borderRadius (px 0) (px 0) (px 0) (px 0)
+        position absolute
+        top (px 0)
+        right (px 0)
+        width (pct 100)
+        visibility hidden
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
new file mode 100644
index 0000000..b7efb9e
--- /dev/null
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -0,0 +1,10 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Income
+  ( design
+  ) where
+
+import Clay
+
+design :: Css
+design = h1 ? paddingBottom (px 0)
diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs
deleted file mode 100644
index f7946b8..0000000
--- a/src/server/Design/LoggedIn/Pages.hs
+++ /dev/null
@@ -1,34 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Pages
-  ( pagesDesign
-  ) where
-
-import Clay
-
-import Design.Color as C
-import Design.Helper
-import Design.Constants
-
-pagesDesign :: Css
-pagesDesign =
-
-  ".pages" ? do
-    padding (px 30) (px 30) (px 30) (px 30)
-    textAlign (alignSide (sideCenter))
-    clearFix
-
-    ".page" ? do
-      defaultButton C.white C.darkGrey (px 50) focusDarken
-      display inlineBlock
-      border solid (px 2) C.darkGrey
-      marginRight (px 10)
-      paddingLeft (px 10)
-      paddingRight (px 10)
-      fontWeight bold
-
-      ":not(.current)" & cursor pointer
-
-      ".current" & do
-        borderColor C.red
-        color C.red
diff --git a/src/server/Design/LoggedIn/Stat.hs b/src/server/Design/LoggedIn/Stat.hs
new file mode 100644
index 0000000..42bcb71
--- /dev/null
+++ b/src/server/Design/LoggedIn/Stat.hs
@@ -0,0 +1,10 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Stat
+  ( design
+  ) where
+
+import Clay
+
+design :: Css
+design = h1 ? paddingBottom (px 0)
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
deleted file mode 100644
index e5ed4bf..0000000
--- a/src/server/Design/LoggedIn/Table.hs
+++ /dev/null
@@ -1,99 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Table
-  ( tableDesign
-  ) where
-
-import Data.Monoid ((<>))
-
-import Clay
-import qualified Clay.Display as D
-
-import Design.Color as C
-import Design.Media
-import Design.Constants
-import Design.Helper
-
-tableDesign :: Css
-tableDesign =
-
-  ".table" ? do
-    display D.table
-    width (pct 100)
-    textAlign (alignSide (sideCenter))
-    "border-spacing" -: "10 px"
-
-    ".header" <> ".row" ? display tableRow
-    let headerHeight = (px 70)
-
-    ".header" ? do
-      fontWeight bold
-      backgroundColor C.blue
-      color C.white
-      fontSize iconFontSize
-      lineHeight headerHeight
-
-    ".row" ? do
-      fontSize (px 18)
-      lineHeight (px rowHeightPx)
-
-      hover & do
-        let (borderW, triangleW, triangleH) = (4, 6, 8)
-        ".cell:first-child::before" ? do
-          display block
-          content (stringContent "")
-          position absolute
-          top (px 0)
-          left (px 0)
-
-          width (px borderW)
-          height (px rowHeightPx)
-          backgroundColor C.green
-
-        ".cell:first-child::after" ? do
-          display block
-          content (stringContent "")
-          position absolute
-          top (px (rowHeightPx `Prelude.div` 2 - triangleH))
-          left (px borderW)
-
-          width (px 0)
-          height (px 0)
-          borderTop solid (px triangleH) transparent
-          borderBottom solid (px triangleH) transparent
-          borderLeft solid (px triangleW) C.green
-
-      nthChild "odd" & do
-        backgroundColor C.lightGrey
-      ".edition" & do
-        backgroundColor C.paymentFocus
-        ".delete" |> button ? visibility visible
-
-    ".cell" ? do
-      display tableCell
-      position relative
-      ".category" & width (pct 40)
-      ".cost" & do
-        width (pct 17)
-        ".refund" & color C.green
-      ".user" & width (pct 20)
-      ".date" & do
-        width (pct 20)
-        smallScreen $ do
-          ".shortDate" ? display inline
-          ".longDate" ? display none
-        largeScreen $ do
-          ".shortDate" ? display none
-          ".longDate" ? display inline
-      ".delete" & do
-        position relative
-        width (pct 3)
-        textAlign (alignSide sideCenter)
-        button ? do
-          defaultButton C.red C.white (px rowHeightPx) focusLighten
-          borderRadius (px 0) (px 0) (px 0) (px 0)
-          position absolute
-          top (px 0)
-          right (px 0)
-          width (pct 100)
-          visibility hidden
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index 814cca3..c319d1e 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -1,7 +1,7 @@
 {-# LANGUAGE OverloadedStrings #-}
 
 module Design.SignIn
-  ( signInDesign
+  ( design
   ) where
 
 import Clay
@@ -10,33 +10,31 @@ import Design.Color as C
 import Design.Helper
 import Design.Constants (focusLighten)
 
-signInDesign :: Css
-signInDesign =
-
-  ".signIn" ? do
-
-    form ? do
-      let inputHeight = 50
-      width (px 500)
-      marginTop (px 100)
-      marginLeft auto
-      marginRight auto
-
-      input ? do
-        defaultInput inputHeight
-        display block
-        width (pct 100)
-        marginBottom (px 10)
-
-      button ? do
-        iconButton C.blue C.white (px inputHeight) focusLighten
-        display block
-        width (pct 100)
-        fontSize (em 1.2)
-        ".waitingServer" & ("cursor" -: "not-allowed")
-
-    ".result" ? do
-      marginTop (px 40)
-      textAlign (alignSide sideCenter)
-      ".success" ? color C.green
-      ".error" ? color C.redError
+design :: Css
+design = do
+
+  form ? do
+    let inputHeight = 50
+    width (px 500)
+    marginTop (px 100)
+    marginLeft auto
+    marginRight auto
+
+    input ? do
+      defaultInput inputHeight
+      display block
+      width (pct 100)
+      marginBottom (px 10)
+
+    button ? do
+      iconButton C.blue C.white (px inputHeight) focusLighten
+      display block
+      width (pct 100)
+      fontSize (em 1.2)
+      ".waitingServer" & ("cursor" -: "not-allowed")
+
+  ".result" ? do
+    marginTop (px 40)
+    textAlign (alignSide sideCenter)
+    ".success" ? color C.green
+    ".error" ? color C.redError
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 83d0467..b42cdcd 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -62,10 +62,14 @@ data Key =
   | Monthly
   | SingularMonthlyCount
   | PluralMonthlyCount
+  | Payment
+  | Payments
 
   -- Statistics
 
   | Statistics
+  | Overall
+  | ByMonths
 
   -- Income
 
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 8c1ba08..1d3fbe6 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -231,18 +231,24 @@ m l Monthly =
     French  -> "Mensuel"
 
 m l SingularMonthlyCount =
-  T.concat
-    [ case l of
-        English -> "{1} monthly payment of {2}"
-        French  -> "{1} paiement mensuel de {2}"
-    ]
+  case l of
+    English -> "{1} monthly payment of {2}"
+    French  -> "{1} paiement mensuel de {2}"
 
 m l PluralMonthlyCount =
-  T.concat
-    [ case l of
-        English -> "{1} monthly payments totalling {2}"
-        French  -> "{1} paiements mensuels comptabilisant {2}"
-    ]
+  case l of
+    English -> "{1} monthly payments totalling {2}"
+    French  -> "{1} paiements mensuels comptabilisant {2}"
+
+m l Payment =
+  case l of
+    English -> "payment"
+    French  -> "paiement"
+
+m l Payments =
+  case l of
+    English -> "payments"
+    French  -> "paiements"
 
 -- Statistics
 
@@ -251,6 +257,16 @@ m l Statistics =
     English -> "Statistics"
     French  -> "Statistiques"
 
+m l Overall =
+  case l of
+    English -> "Overall"
+    French  -> "Global"
+
+m l ByMonths =
+  case l of
+    English -> "By months"
+    French  -> "Par mois"
+
 -- Income
 
 m l AddIncome =