progress on transaction page

src/clj/auto_ap/ssr/transaction/edit.clj

@@ -239,7 +239,7 @@
 (defrecord BasicDetailsStep [linear-wizard]
   mm/ModalWizardStep
   (step-name [_]
-    "Basic Details")
+    "Transaction Details")
   (step-key [_]
     :basic-details)
 
@@ -375,7 +375,7 @@
 (defrecord AccountsStep [linear-wizard]
   mm/ModalWizardStep
   (step-name [_]
-    "Expense Accounts")
+    "Accounting Codes")
   (step-key [_]
     :accounts)
 
@@ -691,10 +691,22 @@
           (com/hidden {:name "transaction-id" :value tx-id})
           (com/button {:color :danger :size :small} "Unlink Payment")]]]])))
 
+(defn count-payment-matches [request]
+  (count (get-available-payments request)))
+
+(defn count-autopay-invoice-matches [request]
+  (count (get-available-autopay-invoices request)))
+
+(defn count-unpaid-invoice-matches [request]
+  (count (get-available-unpaid-invoices request)))
+
+(defn count-rule-matches [request]
+  (count (get-available-rules request)))
+
 (defrecord LinksStep [linear-wizard]
   mm/ModalWizardStep
   (step-name [_]
-    "Links")
+    "Transaction Actions")
   (step-key [_]
     :links)
 
@@ -707,22 +719,105 @@
   (render-step [this {{:keys [snapshot] :as multi-form-state} :multi-form-state :as request}]
     (mm/default-render-step
      linear-wizard this
-     :head [:div.p-2 "Transaction Links"]
+     :head [:div.p-2 "Transaction Actions"]
      :body (mm/default-step-body
             {}
             [:div
              (payment-info-view request)
-             [:div.grid.grid-cols-2.gap-6
-              [:div
-               [:h2.text-xl.font-bold.mb-4 "Link to Payment"]
-               (payment-matches-view request)]
-              [:div
-               [:h2.text-xl.font-bold.mb-4 "Link to Invoices"]
-               (autopay-invoices-view request)
-               (unpaid-invoices-view request)]]
-             [:div.mt-8
-              [:h2.text-xl.font-bold.mb-4 "Apply Transaction Rules"]
-              (transaction-rules-view request)]])
+             [:div.mt-4
+              [:h2.text-xl.font-bold.mb-6 "Select an Action"]
+              
+              ;; Radio selection for the different options
+              [:div {:x-data (hx/json {:selectedAction nil})}
+               
+               ;; Option cards with counts as badges
+               [:div.space-y-4
+                
+                ;; Link to Payment Option
+                [:div.border.rounded-lg.p-4.transition-colors.duration-150 
+                 {#_#_:class "hover:border-blue-500 cursor-pointer"
+                  :class {:bg-blue-50 "selectedAction === 'payment'"} 
+                  "@click" "selectedAction = 'payment'"}
+                 [:div.flex.justify-between.items-center
+                  [:div.font-semibold "Link to Payment"]
+                  (let [count (count-payment-matches request)]
+                    [:div.bg-blue-100.text-blue-800.rounded-full.px-2.py-1.text-xs.font-medium
+                     (str count " " (if (= count 1) "match" "matches"))])]]
+                
+                ;; Link to Autopay Invoices Option
+                [:div.border.rounded-lg.p-4.transition-colors.duration-150 
+                 {#_#_:class "hover:border-blue-500 cursor-pointer"
+                  :class {:bg-blue-50 "selectedAction === 'autopay'"} 
+                  "@click" "selectedAction = 'autopay'"}
+                 [:div.flex.justify-between.items-center
+                  [:div.font-semibold "Link to Autopay Invoices"]
+                  (let [count (count-autopay-invoice-matches request)]
+                    [:div.bg-blue-100.text-blue-800.rounded-full.px-2.py-1.text-xs.font-medium
+                     (str count " " (if (= count 1) "match" "matches"))])]]
+                
+                ;; Link to Unpaid Invoices Option
+                [:div.border.rounded-lg.p-4.transition-colors.duration-150 
+                 {#_#_:class "hover:border-blue-500 cursor-pointer"
+                  :class {:bg-blue-50 "selectedAction === 'unpaid'"} 
+                  "@click" "selectedAction = 'unpaid'"}
+                 [:div.flex.justify-between.items-center
+                  [:div.font-semibold "Link to Unpaid Invoices"]
+                  (let [count (count-unpaid-invoice-matches request)]
+                    [:div.bg-blue-100.text-blue-800.rounded-full.px-2.py-1.text-xs.font-medium
+                     (str count " " (if (= count 1) "match" "matches"))])]]
+                
+                ;; Apply Transaction Rule Option
+                [:div.border.rounded-lg.p-4.transition-colors.duration-150 
+                 {#_#_:class "hover:border-blue-500 cursor-pointer"
+                  :class {:bg-blue-50 "selectedAction === 'rule'"} 
+                  "@click" "selectedAction = 'rule'"}
+                 [:div.flex.justify-between.items-center
+                  [:div.font-semibold "Apply Transaction Rule"]
+                  (let [count (count-rule-matches request)]
+                    [:div.bg-blue-100.text-blue-800.rounded-full.px-2.py-1.text-xs.font-medium
+                     (str count " " (if (= count 1) "match" "matches"))])]]
+                
+                ;; Manually Code Option
+                [:div.border.rounded-lg.p-4.transition-colors.duration-150 
+                 {#_#_:class "hover:border-blue-500 cursor-pointer"
+                  :class {:bg-blue-50 "selectedAction === 'manual'"} 
+                  "@click" "selectedAction = 'manual'"}
+                 [:div.flex.justify-between.items-center
+                  [:div.font-semibold "Manually Code Transaction"]
+                  [:div.bg-gray-100.text-gray-800.rounded-full.px-2.py-1.text-xs.font-medium "Always available"]]]]
+               
+               ;; Display selected content based on choice
+               [:div.mt-6 {:x-show "selectedAction !== null"}
+                ;; Link to Payment
+                [:div {:x-show "selectedAction === 'payment'"}
+                 [:h3.text-lg.font-bold.mb-4 "Available Payments"]
+                 (payment-matches-view request)]
+                
+                ;; Link to Autopay Invoices
+                [:div {:x-show "selectedAction === 'autopay'"}
+                 [:h3.text-lg.font-bold.mb-4 "Available Autopay Invoices"]
+                 (autopay-invoices-view request)]
+                
+                ;; Link to Unpaid Invoices
+                [:div {:x-show "selectedAction === 'unpaid'"}
+                 [:h3.text-lg.font-bold.mb-4 "Available Unpaid Invoices"]
+                 (unpaid-invoices-view request)]
+                
+                ;; Apply Transaction Rules
+                [:div {:x-show "selectedAction === 'rule'"}
+                 [:h3.text-lg.font-bold.mb-4 "Available Transaction Rules"]
+                 (transaction-rules-view request)]
+                
+                ;; Manually Code
+                [:div {:x-show "selectedAction === 'manual'"}
+                 [:div.p-4.bg-blue-50.rounded-lg
+                  [:h3.text-lg.font-bold.mb-2 "Manual Coding Instructions"]
+                  [:p "To manually code this transaction:"]
+                  [:ol.list-decimal.pl-6.mt-2
+                   [:li "Click \"Done\" below to proceed"]
+                   [:li "Go to the \"Accounting Codes\" tab"]
+                   [:li "Add accounts and amounts as needed"]
+                   [:li "Save your changes"]]]]]]]])
      :footer
      (mm/default-step-footer linear-wizard this :validation-route ::route/edit-wizard-navigate
                              :next-button (com/button {:color :primary :x-ref "next" :class "w-32"} "Done"))
@@ -749,8 +844,8 @@
      :render-timeline? true))
   (steps [_]
     [:basic-details
-     :accounts
-     :links])
+     :links
+     :accounts])
   (get-step [this step-key]
     (let [step-key-result (mc/parse mm/step-key-schema step-key)
           [step-key-type step-key] step-key-result]