Feat: Add toggle switch to enable/disable accounts from main screen

packages/renderer/src/components/accounts/Account.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   height: 40px;
-  width: 200px;
+  width: 260px;
   padding: 4px 12px;
   border: 1px solid #ddcfcf;
   box-sizing: border-box;
@@ -14,6 +14,16 @@
   cursor: pointer;
 }
 
+.activeToggle {
+  margin-left: 5px;
+  display: none;
+  cursor: pointer;
+}
+
+.container:hover .activeToggle {
+  display: block;
+}
+
 .nameWrapper {
   display: flex;
   justify-content: flex-start;

packages/renderer/src/components/accounts/Account.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import Badge from 'react-bootstrap/Badge';
+import Form from 'react-bootstrap/Form';
 import piggyBank from '../../assets/piggy-bank.svg';
 import { type Account as AccountType, type ExporterEndEvent } from '../../types';
 import styles from './Account.module.css';
@@ -14,9 +15,10 @@ export interface ActionButton {
 interface AccountProps {
   account: AccountType;
   actionButtons?: ActionButton[];
+  onToggleActive?: () => void;
 }
 
-export default function Account({ account, actionButtons }: AccountProps) {
+export default function Account({ account, actionButtons, onToggleActive }: AccountProps) {
   const containerStyles = useMemo(() => {
     const s = [styles.container];
     if (!account.active) s.push(styles.notActive);
@@ -48,6 +50,16 @@ export default function Account({ account, actionButtons }: AccountProps) {
           title={tooltipText}
         />
       ))}
+      {onToggleActive && (
+        <Form.Check
+          className={styles.activeToggle}
+          type="switch"
+          checked={account.active}
+          onChange={onToggleActive}
+          title={account.active ? 'פעיל' : 'לא פעיל'}
+          aria-label={account.active ? 'פעיל' : 'לא פעיל'}
+        />
+      )}
       <StatusIndicator status={account.status} />
       {badgeNumberLog?.originalEvent && (
         <Badge className={styles.newTxnsIndicator} bg={'success'}>

packages/renderer/src/components/accounts/AccountsContainer.module.css

@@ -1,6 +1,6 @@
 .container {
     height: 344px;
-    width: 260px;
+    width: 300px;
 }
 
 .title {

packages/renderer/src/components/accounts/Importers.tsx

@@ -28,6 +28,7 @@ function Importers({ accounts, isScraping, showModal, handleNewAccountClicked }:
           <Account
             key={account.id}
             account={account}
+            onToggleActive={!isScraping ? () => configStore.toggleImporterActive(account.id) : undefined}
             actionButtons={getActionButtons(showModal, account, isScraping, () => {
               configStore.openResults(account.companyId as OutputVendorName);
             })}

packages/renderer/src/components/accounts/NewAccount.module.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     height: 40px;
-    width: 200px;
+    width: 260px;
     padding: 4px 12px;
     border: 1px dashed #DDCFCF;
     box-sizing: border-box;

packages/renderer/src/components/exporters/Exporters.tsx

@@ -1,20 +1,23 @@
-import { type Account as AccountType, type ModalStatus } from '../../types';
+import { useConfigStore } from '../../store/ConfigStore';
+import { type Account as AccountType, type Exporter, type ModalStatus } from '../../types';
 import Account from '../accounts/Account';
 import { getActionButtons } from '../accounts/Importers';
 
 interface ExporterProps {
-  exporters: AccountType[];
+  exporters: Exporter[];
   isScraping: boolean;
   showModal: (arg0: AccountType, arg1: ModalStatus) => void;
 }
 
 function Exporters({ exporters, isScraping, showModal }: ExporterProps) {
+  const configStore = useConfigStore();
   return (
     <>
       {exporters.map((exporter) => (
         <Account
           key={exporter.id}
           account={exporter}
+          onToggleActive={!isScraping ? () => configStore.toggleExporterActive(exporter.companyId) : undefined}
           actionButtons={getActionButtons(showModal, exporter, isScraping)}
         />
       ))}

packages/renderer/src/store/ConfigStore.tsx

@@ -111,6 +111,7 @@ export class ConfigStore {
           !!exporter?.active,
           this.accountScrapingData.get(exporterKey as OutputVendorName),
         ),
+        companyId: exporterKey as OutputVendorName,
         options: exporter?.options || {},
       };
     });
@@ -211,6 +212,20 @@ export class ConfigStore {
       createOutputVendorConfigFromExporter(updatedExporterConfig);
   }
 
+  toggleImporterActive(id: string) {
+    const account = this.config.scraping.accountsToScrape.find((a) => a.id === id);
+    if (account) {
+      account.active = !account.active;
+    }
+  }
+
+  toggleExporterActive(exporterName: OutputVendorName) {
+    const exporter = this.config.outputVendors[exporterName];
+    if (exporter) {
+      exporter.active = !exporter.active;
+    }
+  }
+
   async toggleShowBrowser() {
     this.config.scraping.showBrowser = !this.config.scraping.showBrowser;
   }

packages/renderer/src/types.tsx

@@ -192,6 +192,7 @@ export interface Importer extends Account {
 }
 
 export interface Exporter extends Account {
+  companyId: OutputVendorName;
   options: object;
 }