update ui update and fix layout issue

2026-08-06 13:21:10 +05:30
parent 92322bff16
commit e5f8144fb3
251 changed files with 9041 additions and 2119 deletions
--- a/src/features/loyaly-ai/components/response/TableBlock.tsx
+++ b/src/features/loyaly-ai/components/response/TableBlock.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import {Heading} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
+import type {TablePartSpec} from '@/features/loyaly-ai/types/chat';
+
+export function TableBlock({tables}: {tables: TablePartSpec[]}) {
+  if (!tables || tables.length === 0) return null;
+
+  return (
+    <div className="space-y-4 w-full">
+      {tables.map((t, idx) => (
+        <div
+          key={t.title || idx}
+          className="rounded-xl border border-border bg-card overflow-hidden shadow-sm"
+        >
+          {t.title ? (
+            <div className="p-4 border-b border-border bg-card">
+              <Heading level={4} className="text-sm font-semibold text-primary">
+                {t.title}
+              </Heading>
+            </div>
+          ) : null}
+
+          <div className="overflow-x-auto w-full">
+            <table className="w-full text-left text-xs border-collapse">
+              <thead>
+                <tr className="border-b border-border bg-muted/40 text-secondary font-medium">
+                  {t.columns.map((col) => (
+                    <th
+                      key={col.key}
+                      className={`px-4 py-3 ${
+                        col.align === 'end'
+                          ? 'text-right'
+                          : col.align === 'center'
+                          ? 'text-center'
+                          : 'text-left'
+                      }`}
+                    >
+                      {col.header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/60">
+                {t.rows.map((row, rIdx) => (
+                  <tr key={rIdx} className="hover:bg-white/[0.02] transition-colors">
+                    {t.columns.map((col) => {
+                      const val = row[col.key];
+                      const valStr = String(val ?? '');
+                      const isStatus = col.key === 'status' || col.key === 'state';
+
+                      return (
+                        <td
+                          key={col.key}
+                          className={`px-4 py-3 text-primary ${
+                            col.align === 'end'
+                              ? 'text-right'
+                              : col.align === 'center'
+                              ? 'text-center'
+                              : 'text-left'
+                          }`}
+                        >
+                          {isStatus ? (
+                            <Badge
+                              variant={
+                                valStr.toLowerCase() === 'active' || valStr.toLowerCase() === 'paid'
+                                  ? 'success'
+                                  : valStr.toLowerCase() === 'warning' || valStr.toLowerCase() === 'at risk'
+                                  ? 'warning'
+                                  : 'neutral'
+                              }
+                              label={valStr}
+                            />
+                          ) : (
+                            valStr
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}