feat(stats): add stub for sources/categories data

front/src/features/statistics/Statistics.css

@@ -2,19 +2,18 @@
   display: grid;
 
   grid-template:
-    'header header '
-    'agenda sources'
-    'charts charts '
+    'header header'
+    'aside  charts'
+    'aside  charts'
+    'aside  charts'
     / 1fr 2fr;
 
-  align-items: end;
   gap: 16px;
 
   @media (max-width: 768px) {
     grid-template:
       'header'
-      'agenda'
-      'sources'
+      'aside'
       'charts';
   }
 }
@@ -23,12 +22,12 @@
   grid-area: header;
 }
 
-.agenda {
-  grid-area: agenda;
-}
+.aside {
+  grid-area: aside;
 
-.sources {
-  grid-area: sources;
+  & > *:not(:last-child) {
+    margin-bottom: 16px;
+  }
 }
 
 .charts {

front/src/features/statistics/Statistics.tsx

@@ -9,6 +9,8 @@ import { Tabs, Tab } from '@front/ui/components/layout/tabs'
 import { Yearly } from './features/yearly'
 import { Monthly } from './features/monthly'
 import { ThisMonth } from './features/this-month'
+import { Categories } from './features/categories'
+import { Sources } from './features/sources'
 import * as styles from './Statistics.css'
 
 export const Statistics = () => {
@@ -20,9 +22,11 @@ export const Statistics = () => {
         <CurrencySwitch currency={currency} updateCurrency={setCurrency} />
       </ControlHeader>
 
-      <ThisMonth className={styles.agenda} />
-
-      <p className={styles.sources}>...</p>
+      <aside className={styles.aside}>
+        <ThisMonth />
+        <Categories currency={currency} />
+        <Sources currency={currency} />
+      </aside>
 
       <Tabs className={styles.charts}>
         <Tab title="Monthly">

front/src/features/statistics/features/categories/Categories.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { sortBy } from 'lodash'
+
+import { Currency } from '@shared/enum/Currency'
+import { displayMoney } from '@shared/helpers/displayMoney'
+import { Table } from '@front/ui/components/layout/table'
+
+interface Props {
+  className?: string
+  currency: Currency
+}
+
+export const Categories = ({ className, currency }: Props) => {
+  const columns = useMemo(
+    () => ({
+      source: {
+        title: 'Category',
+      },
+      amount: {
+        title: 'Amount',
+        transform: displayMoney(currency),
+      },
+    }),
+    [currency],
+  )
+
+  const fakeDate = useMemo(
+    () =>
+      sortBy(
+        [
+          { source: 'Cafe', amount: 50000 },
+          { source: 'Lunch', amount: 40000 },
+          { source: 'Travel', amount: 45000 },
+        ],
+        '-amount',
+      ),
+    [],
+  )
+
+  return (
+    <Table
+      title="Where was the money spent"
+      columns={columns}
+      data={fakeDate}
+      hideHeader
+      className={className}
+    />
+  )
+}

front/src/features/statistics/features/categories/index.ts

@@ -0,0 +1 @@
+export { Categories } from './Categories'

front/src/features/statistics/features/sources/Sources.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { sortBy } from 'lodash'
+
+import { Table } from '@front/ui/components/layout/table'
+import { displayMoney } from '@shared/helpers/displayMoney'
+import { Currency } from '@shared/enum/Currency'
+
+interface Props {
+  className?: string
+  currency: Currency
+}
+
+export const Sources = ({ className, currency }: Props) => {
+  const columns = useMemo(
+    () => ({
+      source: {
+        title: 'Source',
+      },
+      amount: {
+        title: 'Amount',
+        transform: displayMoney(currency),
+      },
+    }),
+    [currency],
+  )
+
+  const fakeDate = useMemo(
+    () =>
+      sortBy(
+        [
+          { source: 'Breadhead', amount: 50000 },
+          { source: 'Netology', amount: 40000 },
+          { source: 'Whatever', amount: 45000 },
+        ],
+        '-amount',
+      ),
+    [],
+  )
+
+  return (
+    <Table
+      title="Sources of income"
+      columns={columns}
+      data={fakeDate}
+      hideHeader
+      className={className}
+    />
+  )
+}

front/src/features/statistics/features/sources/index.ts

@@ -0,0 +1 @@
+export { Sources } from './Sources'

front/src/ui/components/layout/table/AntTable.css

@@ -0,0 +1,3 @@
+.ant-table-title {
+  border-radius: 2px;
+}

front/src/ui/components/layout/table/Table.css

@@ -0,0 +1,8 @@
+.title {
+  font-weight: 500;
+  font-size: 16px;
+  margin-left: 8px;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.85);
+}

front/src/ui/components/layout/table/Table.tsx

@@ -1,6 +1,9 @@
 import { Table as AntTable } from 'antd'
 import { ReactNode, useMemo } from 'react'
 
+import * as styles from './Table.css'
+import './AntTable.css?CSSModulesDisable'
+
 interface Column {
   title: string
   transform?: (v: any) => ReactNode
@@ -15,13 +18,15 @@ interface Props<Data extends Array<{}>> {
   columns: Columns
   className?: string
   title: string
+  hideHeader?: boolean
 }
 
 export const Table = <Data extends Array<{}>>({
   className,
   data,
   columns,
   title,
+  hideHeader = false,
 }: Props<Data>) => {
   const adoptedData = useMemo(
     () =>
@@ -50,7 +55,8 @@ export const Table = <Data extends Array<{}>>({
       bordered
       size="middle"
       pagination={false}
-      title={() => title}
+      showHeader={!hideHeader}
+      title={() => <div className={styles.title}>{title}</div>}
     />
   )
 }