changes

2025-12-26 22:39:58 +01:00
parent f8623a6071
commit dea7432deb
55 changed files with 7977 additions and 1983 deletions
@@ -1,44 +1,53 @@
 <script setup>
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
+import { Badge } from '@/Components/ui/badge';
+
 const props = defineProps({ mappings: Array });
 </script>
 <template>
  <div v-if="mappings?.length" class="pt-4">
    <h3 class="font-semibold mb-2">Current Saved Mappings</h3>
-    <div class="overflow-x-auto">
-      <table class="min-w-full border bg-white text-sm">
-        <thead>
-          <tr class="bg-gray-50 text-left text-xs uppercase text-gray-600">
-            <th class="p-2 border">Source column</th>
-            <th class="p-2 border">Target field</th>
-            <th class="p-2 border">Transform</th>
-            <th class="p-2 border">Mode</th>
-            <th class="p-2 border">Options</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
+    <div class="overflow-x-auto rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Source column</TableHead>
+            <TableHead>Target field</TableHead>
+            <TableHead>Transform</TableHead>
+            <TableHead>Mode</TableHead>
+            <TableHead>Options</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow
            v-for="m in mappings"
            :key="m.id || m.source_column + m.target_field"
-            class="border-t"
          >
-            <td class="p-2 border">{{ m.source_column }}</td>
-            <td class="p-2 border">{{ m.target_field }}</td>
-            <td class="p-2 border">{{ m.transform || "—" }}</td>
-            <td class="p-2 border">{{ m.apply_mode || "both" }}</td>
-            <td class="p-2 border">
+            <TableCell class="font-medium">{{ m.source_column }}</TableCell>
+            <TableCell>{{ m.target_field }}</TableCell>
+            <TableCell>
+              <Badge v-if="m.transform" variant="outline" class="text-xs">{{ m.transform }}</Badge>
+              <span v-else class="text-muted-foreground">—</span>
+            </TableCell>
+            <TableCell>
+              <Badge variant="secondary" class="text-xs">{{ m.apply_mode || "both" }}</Badge>
+            </TableCell>
+            <TableCell>
              <template v-if="m.options">
-                <span v-if="m.options.key" class="inline-block mr-2"
-                  >key: <strong>{{ m.options.key }}</strong></span
-                >
-                <span v-if="m.options.type" class="inline-block"
-                  >type: <strong>{{ m.options.type }}</strong></span
-                >
+                <div class="flex flex-wrap gap-1">
+                  <Badge v-if="m.options.key" variant="outline" class="text-[10px]">
+                    key: {{ m.options.key }}
+                  </Badge>
+                  <Badge v-if="m.options.type" variant="outline" class="text-[10px]">
+                    type: {{ m.options.type }}
+                  </Badge>
+                </div>
              </template>
-              <span v-else>—</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <span v-else class="text-muted-foreground">—</span>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
    </div>
  </div>
 </template>