feat(money): add base history layput

front/src/features/app/App.css

@@ -11,24 +11,54 @@
   gap: 16px;
   padding: 24px;
 
-  & > *:nth-child(odd) {
-    justify-self: end;
-  }
-
-  & > *:nth-child(even) {
-    justify-self: start;
-  }
-
   @media (max-width: 576px) {
     grid-template:
       'outcome'
       'income'
       'history'
       'stats';
+  }
+}
+
+.income {
+  grid-area: income;
+  justify-self: start;
+
+  max-width: 500px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+  @media (max-width: 576px) {
+    justify-self: stretch;
+  }
+}
 
-    & > *:nth-child(even),
-    & > *:nth-child(odd) {
-      justify-self: stretch;
-    }
+.outcome {
+  grid-area: outcome;
+
+  justify-self: end;
+  max-width: 500px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+  @media (max-width: 576px) {
+    justify-self: stretch;
+  }
+}
+
+.history {
+  grid-area: history;
+  justify-self: center;
+
+  min-width: 1016px;
+
+  @media (max-width: 1064px) {
+    min-width: 100%;
+  }
+
+  @media (max-width: 576px) {
+    justify-self: stretch;
   }
 }

front/src/features/app/App.tsx

@@ -7,10 +7,10 @@ import { Stats } from './features/stats'
 export const App = () => (
   <>
     <section className={styles.app}>
-      <CreateOutcome />
-      <CreateIncome />
+      <CreateOutcome className={styles.outcome} />
+      <CreateIncome className={styles.income} />
+      <History className={styles.history} />
     </section>
-    <History />
     <Stats />
   </>
 )

front/src/features/app/features/create/SimpleForm.css

@@ -1,11 +1,3 @@
-.container {
-  max-width: 500px;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-}
-
 .form {
   display: grid;
 

front/src/features/app/features/create/create-income/CreateIncome.tsx

@@ -17,7 +17,11 @@ import { IncomeModel } from '@shared/models/money/IncomeModel'
 
 import * as styles from '../SimpleForm.css'
 
-export const CreateIncome = () => {
+interface Props {
+  className?: string
+}
+
+export const CreateIncome = ({ className }: Props) => {
   const create = useCreateIncome()
 
   const fieldsToIncomeModel = useCallback(
@@ -43,7 +47,7 @@ export const CreateIncome = () => {
       {({ handleSubmit, form: { initialize }, values, initialValues }) => (
         <form
           onSubmit={e => handleSubmit(e)!.then(() => initialize(initialValues))}
-          className={styles.container}
+          className={className}
         >
           <Card title="Create new income" className={styles.form}>
             <Label text="Amount" className={styles.amount}>

front/src/features/app/features/create/create-outcome/CreateOutcome.tsx

@@ -17,7 +17,11 @@ import { OutcomeModel } from '@shared/models/money/OutcomeModel'
 
 import * as styles from '../SimpleForm.css'
 
-export const CreateOutcome = () => {
+interface Props {
+  className?: string
+}
+
+export const CreateOutcome = ({ className }: Props) => {
   const create = useCreateOutcome()
 
   const fieldsToOutcomeModel = useCallback(
@@ -43,7 +47,7 @@ export const CreateOutcome = () => {
       {({ handleSubmit, form: { initialize }, values, initialValues }) => (
         <form
           onSubmit={e => handleSubmit(e)!.then(() => initialize(initialValues))}
-          className={styles.container}
+          className={className}
         >
           <Card title="Create new outcome" className={styles.form}>
             <Label text="Amount" className={styles.amount}>

front/src/features/app/features/history/History.css

@@ -0,0 +1,29 @@
+.dataSet {
+  display: grid;
+
+  grid-template:
+    'title    title '
+    'outcomes incomes'
+    / 1fr 1fr;
+
+  @media (max-width: 576px) {
+    grid-template:
+      'title'
+      'outcomes'
+      'incomes';
+  }
+
+  gap: 16px;
+}
+
+.title {
+  grid-area: title;
+}
+
+.outcomes {
+  grid-area: outcomes;
+}
+
+.incomes {
+  grid-area: incomes;
+}

front/src/features/app/features/history/History.tsx

@@ -1,3 +1,4 @@
+import { max, startOfMonth } from 'date-fns'
 import { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useMappedState } from 'redux-react-hook'
 
@@ -10,17 +11,24 @@ import { Groupment } from '@front/ui/organisms/groupment'
 import { Period } from '@front/ui/organisms/period'
 import { GroupBy } from '@shared/enum/GroupBy'
 
+import * as styles from './History.css'
 import { Incomes } from './organisms/Incomes'
 import { Outcomes } from './organisms/Outcomes'
 
-export const History = () => {
+interface Props {
+  className?: string
+}
+
+export const History = ({ className }: Props) => {
   const firstTransactionDate = useMappedState(getFirstTransactionDate)
   const fetching = useMappedState(getHistoryFetchingStatus)
   const dispatch = useDispatch()
 
-  const [from, setFrom] = useState(firstTransactionDate)
+  const [from, setFrom] = useState(
+    max(firstTransactionDate, startOfMonth(new Date())),
+  )
   const [to, setTo] = useState(new Date())
-  const [groupBy, setGroupBy] = useState(GroupBy.Year)
+  const [groupBy, setGroupBy] = useState(GroupBy.Month)
 
   const updateTriggers = [from, to, groupBy]
 
@@ -35,20 +43,20 @@ export const History = () => {
   }, updateTriggers)
 
   return (
-    <>
+    <section className={className}>
       <h2>History</h2>
       <Groupment groupBy={groupBy} updateGroupBy={setGroupBy} />
       <Period start={from} updateStart={setFrom} end={to} updateEnd={setTo} />
       <Loader status={fetching}>
         {history.nonEmpty() &&
           history.get().map(({ title, incomes, outcomes }) => (
-            <div key={title}>
-              <h3>{title}</h3>
-              <Incomes incomes={incomes} />
-              <Outcomes outcomes={outcomes} />
+            <div key={title} className={styles.dataSet}>
+              <h3 className={styles.title}>{title}</h3>
+              <Outcomes outcomes={outcomes} className={styles.outcomes} />
+              <Incomes incomes={incomes} className={styles.incomes} />
             </div>
           ))}
       </Loader>
-    </>
+    </section>
   )
 }

front/src/features/app/features/history/organisms/Incomes.tsx

@@ -4,10 +4,11 @@ import { IncomeModel } from '@shared/models/money/IncomeModel'
 
 interface Props {
   incomes: IncomeModel[]
+  className?: string
 }
 
-export const Incomes = ({ incomes }: Props) => (
-  <>
+export const Incomes = ({ incomes, className }: Props) => (
+  <section className={className}>
     <h4>Incomes</h4>
     {incomes.map(({ amount, currency, source, date }) => (
       <p key={`${amount}-${date}`}>
@@ -18,5 +19,5 @@ export const Incomes = ({ incomes }: Props) => (
         {amount / 100} {currency} ({source})
       </p>
     ))}
-  </>
+  </section>
 )

front/src/features/app/features/history/organisms/Outcomes.tsx

@@ -4,10 +4,11 @@ import { OutcomeModel } from '@shared/models/money/OutcomeModel'
 
 interface Props {
   outcomes: OutcomeModel[]
+  className?: string
 }
 
-export const Outcomes = ({ outcomes }: Props) => (
-  <>
+export const Outcomes = ({ outcomes, className }: Props) => (
+  <section className={className}>
     <h4>Outcomes</h4>
     {outcomes.map(({ amount, currency, category, date }) => (
       <p key={`${amount}-${date}`}>
@@ -18,5 +19,5 @@ export const Outcomes = ({ outcomes }: Props) => (
         {amount / 100} {currency} ({category})
       </p>
     ))}
-  </>
+  </section>
 )