feat: add Shoppro payment status synchronization service

- Implemented ShopproPaymentStatusSyncService to handle payment status synchronization between Shoppro and Orderpro.
- Added methods for resolving watched status codes, finding candidate orders, and syncing individual order payments.
- Introduced ShopproStatusMappingRepository for managing status mappings between Shoppro and Orderpro.
- Created ShopproStatusSyncService to facilitate synchronization of order statuses from Shoppro to Orderpro.

resources/scss/app.scss

@@ -445,6 +445,11 @@ details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.form-actions .btn {
+  align-self: flex-start;
 }
 
 .statuses-form {
@@ -453,6 +458,10 @@ details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.statuses-form .form-actions {
+  grid-column: 1 / -1;
+}
+
 .statuses-color-input {
   min-height: 32px;
   padding: 2px;
@@ -673,6 +682,17 @@ details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
   color: #0f6b39;
 }
 
+.table-row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.table-row-actions form {
+  margin: 0;
+}
+
 .table-list {
   display: grid;
   gap: 14px;
@@ -1997,6 +2017,111 @@ details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
   }
 }
 
+.shoppro-tabs-toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.shoppro-tabs-toolbar__field {
+  margin: 0;
+  min-width: 260px;
+  max-width: 420px;
+  flex: 1 1 320px;
+}
+
+.shoppro-tabs-toolbar__field .form-control {
+  width: 100%;
+}
+
+.shoppro-tabs-toolbar__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.integration-settings-group {
+  grid-column: 1 / -1;
+  border: 1px solid var(--c-border);
+  border-radius: 10px;
+  background: #f8fbff;
+  padding: 10px;
+}
+
+.integration-settings-group__head {
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  border-left: 3px solid var(--c-primary, #2563eb);
+  background: #eef4ff;
+  border-radius: 6px;
+}
+
+.integration-settings-group__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: #1e3a8a;
+}
+
+.integration-settings-group__desc {
+  margin: 4px 0 0;
+  color: #4b5563;
+}
+
+.integration-settings-group__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  align-items: start;
+}
+
+.integration-settings-group__full {
+  grid-column: 1 / -1;
+}
+
+.integration-settings-group__grid .form-field {
+  margin: 0;
+  align-self: start;
+}
+
+.integration-settings-group__grid .form-control {
+  min-height: 34px;
+  height: 34px;
+}
+
+.integration-settings-group__grid input[type='date'].form-control {
+  line-height: 1.2;
+}
+
+.integration-settings-checkboxes {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.integration-settings-checkboxes .field-label {
+  display: block;
+  margin-bottom: 2px;
+}
+
+.integration-settings-checkboxes__list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 12px;
+}
+
+.integration-settings-checkboxes__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #334155;
+}
+
 @media (max-width: 768px) {
   .app-shell {
     flex-direction: column;
@@ -2114,6 +2239,14 @@ details[open] > .sidebar__group-toggle .sidebar__toggle-arrow {
     grid-template-columns: 1fr;
   }
 
+  .integration-settings-group__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .integration-settings-checkboxes__list {
+    grid-template-columns: 1fr;
+  }
+
   .card {
     padding: 12px;
   }