LF-3740 add click events

thxv3n0lvl · Oct 30, 2023 · 647e9a2 · 647e9a2
1 parent a38112e
commit 647e9a2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/packages/webapp/src/components/CardsCarrousel/index.jsx b/packages/webapp/src/components/CardsCarrousel/index.jsx
@@ -29,21 +29,31 @@ const CardsCarrousel = ({ cards }) => {
       <div className={styles.carrouselContainer}>
         {sortedCards.map((card, index) => {
           const isActive = activeCard.id === card.id;
-          return (
+          return isActive ? (
+            <div
+              key={card.id}
+              className={clsx([styles.card, styles.activeCard])}
+              style={{
+                marginTop: index * 8,
+                marginBottom: index * 8,
+                zIndex: sortedCards.length - index,
+              }}
+            >
+              {card.activeContent}
+            </div>
+          ) : (
             <TextButton
               key={card.id}
-              disabled={isActive}
               onClick={() => onCardClick(card)}
-              className={clsx([styles.card, isActive ? styles.activeCard : styles.inactiveCard])}
+              className={clsx([styles.card, styles.inactiveCard])}
               style={{
                 marginTop: index * 8,
                 marginBottom: index * 8,
                 backgroundColor: card.inactiveBackgroundColor,
                 zIndex: sortedCards.length - index,
               }}
             >
-              {!isActive && <div className={styles.inactiveIcon}>{card.inactiveIcon}</div>}
-              {isActive && card.activeContent}
+              <div className={styles.inactiveIcon}>{card.inactiveIcon}</div>
             </TextButton>
           );
         })}

diff --git a/packages/webapp/src/components/Finances/FinancesCarrousel/index.jsx b/packages/webapp/src/components/Finances/FinancesCarrousel/index.jsx
@@ -2,6 +2,7 @@ import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js';
 import { Doughnut } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { BsChevronRight } from 'react-icons/bs';
+import { Link } from 'react-router-dom';
 import CardsCarrousel from '../../CardsCarrousel';
 import { ReactComponent as ProfitLossIconDark } from '../../../assets/images/finance/Profit-loss-icn-dark.svg';
 import { ReactComponent as ProfitLossIconLight } from '../../../assets/images/finance/Profit-loss-icn-light.svg';
@@ -10,6 +11,7 @@ import { ReactComponent as CropIcon } from '../../../assets/images/finance/Crop-
 import styles from './styles.module.scss';
 import { Semibold, Text } from '../../Typography';
 import clsx from 'clsx';
+import TextButton from '../../Form/Button/TextButton';
 
 ChartJS.register(ArcElement, Tooltip);
 
@@ -30,6 +32,7 @@ const FinancesCarrousel = ({
   otherExpense,
   estimatedRevenue,
   currencySymbol,
+  history,
 }) => {
   const { t } = useTranslation();
 
@@ -53,7 +56,10 @@ const FinancesCarrousel = ({
       activeContent: (
         <div className={clsx([styles.cardContent, styles.profitLossCardContent])}>
           <div className={styles.revenueExpensesContainer}>
-            <div className={styles.revenueContainer}>
+            <TextButton
+              className={styles.revenueContainer}
+              onClick={() => history.push('/finances/actual_revenue')}
+            >
               <div>
                 <Text className={styles.revenueTitle}>Total revenue</Text>
                 <p className={clsx([styles.stat, styles.revenueStat])}>
@@ -62,7 +68,7 @@ const FinancesCarrousel = ({
                 </p>
               </div>
               <BsChevronRight />
-            </div>
+            </TextButton>
             <div className={styles.expenseContainer}>
               <Text className={styles.expenseTitle}>Total expenses</Text>
               <p className={clsx([styles.stat, styles.expenseStat])}>
@@ -110,7 +116,10 @@ const FinancesCarrousel = ({
             </div>
           </div>
           <div className={styles.expensesStatsContainer}>
-            <div className={styles.labourExpensesContainer}>
+            <TextButton
+              className={styles.labourExpensesContainer}
+              onClick={() => history.push('/labour')}
+            >
               <div>
                 <Text className={styles.labourExpensesTitle}>Total labour</Text>
                 <p className={clsx([styles.stat, styles.labourExpensesStat])}>
@@ -119,8 +128,11 @@ const FinancesCarrousel = ({
                 </p>
               </div>
               <BsChevronRight />
-            </div>
-            <div className={styles.otherExpensesContainer}>
+            </TextButton>
+            <TextButton
+              className={styles.otherExpensesContainer}
+              onClick={() => history.push('/other_expense')}
+            >
               <div>
                 <Text className={styles.otherExpensesTitle}>Total other</Text>
                 <p className={clsx([styles.stat, styles.otherExpensesStat])}>
@@ -129,7 +141,7 @@ const FinancesCarrousel = ({
                 </p>
               </div>
               <BsChevronRight />
-            </div>
+            </TextButton>
           </div>
         </div>
       ),
@@ -143,7 +155,10 @@ const FinancesCarrousel = ({
       activeContent: (
         <div className={clsx([styles.cardContent, styles.estimatedRevenueCardContent])}>
           <CropIcon width={56} height={56} />
-          <div className={styles.estimatedRevenueContainer}>
+          <TextButton
+            className={styles.estimatedRevenueContainer}
+            onClick={() => history.push('/estimated_revenue')}
+          >
             <div>
               <Text className={styles.estimatedRevenueTitle}>Estimated harvest revenue</Text>
               <p className={styles.stat}>
@@ -152,7 +167,7 @@ const FinancesCarrousel = ({
               </p>
             </div>
             <BsChevronRight />
-          </div>
+          </TextButton>
         </div>
       ),
       note: t('SALE.FINANCES.CARROUSEL_TEXT.ESTIMATED_REVENUE'),

diff --git a/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss b/packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss
@@ -3,6 +3,10 @@
   width: 100%;
   height: 100%;
   border-radius: 4px;
+
+  a {
+    text-decoration: none;
+  }
 }
 
 .profitLossCardContent {
@@ -20,7 +24,7 @@
   border-radius: 4px 0 0 4px;
 
   @media (min-width: 768px) {
-    padding: 24px 16px;
+    padding: 16px;
   }
 }
 
@@ -29,6 +33,7 @@
   flex-grow: 1;
   padding: 16px 8px;
   border-radius: 0 4px 4px 0;
+  text-align: center;
 
   @media (min-width: 768px) {
     padding: 24px 16px;

diff --git a/packages/webapp/src/containers/Finances/index.jsx b/packages/webapp/src/containers/Finances/index.jsx
@@ -41,7 +41,7 @@ import { SUNDAY } from '../../util/dateRange';
 
 const moment = extendMoment(Moment);
 
-const Finances = () => {
+const Finances = ({ history }) => {
   const { t } = useTranslation();
 
   const sales = useSelector(salesSelector);
@@ -150,6 +150,7 @@ const Finances = () => {
           otherExpense={otherExpense}
           estimatedRevenue={estimatedRevenue}
           currencySymbol={currencySymbol}
+          history={history}
         />
       </div>
     </div>