From 6395e0bbe5f21308977eaba4064f61c122507551 Mon Sep 17 00:00:00 2001
From: or-forshmit8 <or.forshmit@mail.huji.ac.il>
Date: Thu, 9 Apr 2026 21:55:30 +0300
Subject: [PATCH 1/2] refactor: reorganize input fields in TransactionForm for
 improved layout

---
 src/components/TransactionForm.jsx | 66 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/TransactionForm.jsx b/src/components/TransactionForm.jsx
index 1169cf0..de073f1 100644
--- a/src/components/TransactionForm.jsx
+++ b/src/components/TransactionForm.jsx
@@ -183,7 +183,7 @@ export function TransactionForm({ initial, defaultName, defaultPaymentMethod, on
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-4" noValidate>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div className={form.type !== 'credit_card' ? 'sm:col-span-2' : ''}>
+        <div>
           <Input
             label="שם"
             name="name"
@@ -193,40 +193,40 @@ export function TransactionForm({ initial, defaultName, defaultPaymentMethod, on
             error={errors.name}
           />
         </div>
-        {form.type === 'credit_card' && (
-          <Input
-            label="4 ספרות אחרונות של הכרטיס"
-            name="cardLast4"
-            value={form.cardLast4}
-            onChange={handleChange}
-            placeholder="1234"
-            maxLength={4}
-            inputMode="numeric"
-            error={errors.cardLast4}
-          />
-        )}
+          <div className="flex flex-col gap-1">
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                סוג עסקה
+            </label>
+            <select
+                name="type"
+                value={form.type}
+                onChange={handleChange}
+                className="block w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-900"
+            >
+                <option value="">בחר סוג עסקה</option>
+                {Object.entries(TRANSACTION_TYPE_LABELS).map(([value, label]) => (
+                    <option key={value} value={value}>
+                        {label}
+                    </option>
+                ))}
+            </select>
+            {errors.type && (
+                <p className="text-xs text-red-500 mt-0.5" role="alert">{errors.type}</p>
+            )}
+          </div>
       </div>
-      <div className="flex flex-col gap-1">
-        <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-          סוג עסקה
-        </label>
-        <select
-          name="type"
-          value={form.type}
-          onChange={handleChange}
-          className="block w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-900"
-        >
-          <option value="">בחר סוג עסקה</option>
-          {Object.entries(TRANSACTION_TYPE_LABELS).map(([value, label]) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
-        {errors.type && (
-          <p className="text-xs text-red-500 mt-0.5" role="alert">{errors.type}</p>
+        {form.type === 'credit_card' && (
+            <Input
+                label="4 ספרות אחרונות של הכרטיס"
+                name="cardLast4"
+                value={form.cardLast4}
+                onChange={handleChange}
+                placeholder="1234"
+                maxLength={4}
+                inputMode="numeric"
+                error={errors.cardLast4}
+            />
         )}
-      </div>
       <Input
         label="שם העסק"
         name="essence"

From 2e503bb60be945bbd4077f8fd6cdc7f459bf49ca Mon Sep 17 00:00:00 2001
From: or-forshmit8 <or.forshmit@mail.huji.ac.il>
Date: Thu, 9 Apr 2026 22:15:56 +0300
Subject: [PATCH 2/2] fix: enhance accessibility and layout in TransactionForm
 input fields

---
 src/components/TransactionForm.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionForm.jsx b/src/components/TransactionForm.jsx
index de073f1..ca674d9 100644
--- a/src/components/TransactionForm.jsx
+++ b/src/components/TransactionForm.jsx
@@ -182,7 +182,7 @@ export function TransactionForm({ initial, defaultName, defaultPaymentMethod, on
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-4" noValidate>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <div>
           <Input
             label="שם"
@@ -194,13 +194,16 @@ export function TransactionForm({ initial, defaultName, defaultPaymentMethod, on
           />
         </div>
           <div className="flex flex-col gap-1">
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label htmlFor="transaction-type" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 סוג עסקה
             </label>
             <select
+                id="transaction-type"
                 name="type"
                 value={form.type}
                 onChange={handleChange}
+                aria-invalid={errors.type ? 'true' : undefined}
+                aria-describedby={errors.type ? 'transaction-type-error' : undefined}
                 className="block w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-900"
             >
                 <option value="">בחר סוג עסקה</option>
@@ -211,7 +214,7 @@ export function TransactionForm({ initial, defaultName, defaultPaymentMethod, on
                 ))}
             </select>
             {errors.type && (
-                <p className="text-xs text-red-500 mt-0.5" role="alert">{errors.type}</p>
+                <p id="transaction-type-error" className="text-xs text-red-500 mt-0.5" role="alert">{errors.type}</p>
             )}
           </div>
       </div>