Dashboard styles.

package-lock.json

@@ -17,12 +17,15 @@
         "@types/node": "18.15.5",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
+        "date-fns": "^2.29.3",
         "eslint": "8.36.0",
         "eslint-config-next": "13.2.4",
         "fishery": "^2.2.2",
         "next": "13.2.4",
+        "number-precision": "^1.6.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-sweet-progress": "^1.1.2",
         "sass": "^1.59.3",
         "typescript": "5.0.2"
       },
@@ -995,6 +998,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1053,6 +1061,18 @@
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2813,6 +2833,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/number-precision": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/number-precision/-/number-precision-1.6.0.tgz",
+      "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3197,6 +3222,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-sweet-progress": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-sweet-progress/-/react-sweet-progress-1.1.2.tgz",
+      "integrity": "sha512-FUfiKpox5LJ9YTeK/HsaLp/oOsuxWBJQir6oAYKLY5nsa2pb04PtxzddSy6Y1fn8osaILpXIcItJRQYnHp42CA==",
+      "dependencies": {
+        "classnames": "^2.2.5"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -20,12 +20,15 @@
     "@types/node": "18.15.5",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "date-fns": "^2.29.3",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "fishery": "^2.2.2",
     "next": "13.2.4",
+    "number-precision": "^1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-sweet-progress": "^1.1.2",
     "sass": "^1.59.3",
     "typescript": "5.0.2"
   },

src/components/BudgetItem/BudgetItem.module.scss

@@ -1,8 +1,15 @@
 .Container {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 16px;
     padding: 32px;
     border-radius: 4px;
     box-shadow: var(--box-shadow-lev-1);
 }
+
+.Title {
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 1ch;
+}

src/components/BudgetItem/BudgetItem.tsx

@@ -1,21 +1,42 @@
+import { faCoins } from '@fortawesome/free-solid-svg-icons/faCoins';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import format from 'date-fns/format';
 import Link from 'next/link';
+import { round } from 'number-precision';
 import { FC } from 'react';
+import { Progress } from 'react-sweet-progress';
+import 'react-sweet-progress/lib/style.css';
 
 import styles from './BudgetItem.module.scss';
 import { Budget } from '../../generated/openapi';
 
 type BudgetItemProps = { budget: Budget };
 
-export const BudgetItem: FC<BudgetItemProps> = ({ budget: { id, spent, name, limit, startDate, endDate } }) => {
+const DATE_FORMAT = 'dd.MM.yy';
+
+export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
+    const { id, spent, name, limit, startDate, endDate } = budget;
+
+    const spentPercentage = round((100 * spent) / limit, 0);
+    const startDateFormatted = format(new Date(startDate ?? ''), DATE_FORMAT);
+    const endDateFormatted = format(new Date(endDate ?? ''), DATE_FORMAT);
+
     return (
         <div className={styles.Container}>
-            <span> {name}</span>
-            <span>
-                {spent} / {limit}
-            </span>
-            <span>
-                {startDate} - {endDate}
-            </span>
+            <h3 className={styles.Title}>
+                {name} <FontAwesomeIcon icon={faCoins} />
+            </h3>
+            <div>
+                <small>Remaining budget</small>
+                <Progress percent={spentPercentage} theme={{ active: { color: '#84844c' } }} />
+            </div>
+
+            <div>
+                <small>Time</small>
+                <p>
+                    {startDateFormatted} - {endDateFormatted}
+                </p>
+            </div>
 
             <Link href={`/budgets/${id}`}>More info </Link>
         </div>

src/components/BudgetList/BudgetList.module.scss

@@ -7,5 +7,5 @@
 .ListItems {
     display: grid;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }

src/components/Navigation/Navigation.tsx

@@ -1,10 +1,14 @@
+import { faSackDollar } from '@fortawesome/free-solid-svg-icons/faSackDollar';
+import { faUserGear } from '@fortawesome/free-solid-svg-icons/faUserGear';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FunctionComponent } from 'react';
 
 import styles from './Navigation.module.scss';
 
 export const Navigation: FunctionComponent = () => (
     <nav className={styles.Container}>
-        <span>LOGO</span>
-        <span>Account</span>
+        <FontAwesomeIcon icon={faSackDollar} size={'2x'} />
+        <h1>My Finance Pal</h1>
+        <FontAwesomeIcon icon={faUserGear} size={'2x'} />
     </nav>
 );

src/pages/api/budgets.ts

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { budgetFactory } from './factories/buget.factories';
+import { budgetFactory } from './factories/budget.factories';
 import { Budget } from '../../generated/openapi';
 
 import type { NextApiRequest, NextApiResponse } from 'next';

src/pages/api/factories/budget.factories.ts

@@ -13,6 +13,6 @@ export const budgetFactory = Factory.define<Budget>(({ sequence }) => {
         endDate: '2023-03-21T18:49:13.620Z',
         name: 'Budget-' + sequence,
         limit,
-        spent: limit * Math.random(),
+        spent: limit - Math.min(limit, sequence * 50),
     };
 });

src/styles/globals.css

@@ -42,6 +42,8 @@
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
   --card-border-rgb: 131, 134, 135;
+
+  --primary-color: #84844c
 }
 
 @media (prefers-color-scheme: dark) {
@@ -93,7 +95,7 @@ body {
 }
 
 a {
-  color: inherit;
+  color: var(--primary-color);
   text-decoration: none;
 }
 

src/types/progress.d.ts

@@ -0,0 +1,6 @@
+declare module 'react-sweet-progress' {
+    import { FunctionComponent } from 'react';
+    const Progress: FunctionComponent<{ percent: number; [key: string]: unknown }>;
+
+    export { Progress };
+}