Add sync order button

apps/portal/src/routes/(app)/apparel/orders/+page.svelte

@@ -13,6 +13,8 @@
     let loadError = $state<string | null>(null);
     let offset = $state(0);
 
+    let syncingWOrderId = $state<string | null>(null);
+
     function errorMessage(err: unknown): string {
         const value = (err as { value?: { error?: string } })?.value;
         return (
@@ -21,6 +23,19 @@
         );
     }
 
+    async function sync(wOrderId: string) {
+        syncingWOrderId = wOrderId;
+        loadError = null;
+        try {
+            const res = await api.commerce.orders.sync({ wOrderId }).post();
+            if (res.error) throw res.error;
+        } catch (err) {
+            loadError = errorMessage(err);
+        } finally {
+            syncingWOrderId = null;
+        }
+    }
+
     async function refresh() {
         loading = true;
         loadError = null;
@@ -92,6 +107,7 @@
             <tr>
                 <th>Id</th>
                 <th>Status</th>
+                <th>Sync</th>
             </tr>
         </thead>
         <tbody>
@@ -119,10 +135,23 @@
                             <div class="badge badge-error">Desynced</div>
                         {/if}
                     </td>
+                    <td>
+                        {#if !order.isSynced}
+                            <button
+                                disabled={!!syncingWOrderId}
+                                onclick={() => sync(order.wOrder.orderId)}
+                                class="btn btn-primary btn-xs"
+                            >
+                                {syncingWOrderId === order.wOrder.orderId
+                                    ? "Syncing..."
+                                    : "Sync"}
+                            </button>
+                        {/if}
+                    </td>
                 </tr>
             {:else}
                 <tr>
-                    <td colspan="2" class="text-center opacity-60">
+                    <td colspan="3" class="text-center opacity-60">
                         {loading ? "Loading..." : "No orders found"}
                     </td>
                 </tr>