@spaceinvoices/react-ui 0.4.4 → 0.4.5

package/src/components/delivery-notes/create/locales/pt.ts

@@ -47,4 +47,20 @@ export default {
   "Gross price (tax included)": "Preço bruto (impostos incluídos)",
   "Net price (before tax)": "Preço líquido (antes de impostos)",
   "Hide prices": "Ocultar preços",
+  // Separator items
+  "Add separator": "Adicionar separador",
+  "Section header": "Cabeçalho da secção",
+  "Section title...": "Título da secção...",
+  // Transaction type
+  "Transaction type": "Tipo de transação",
+  Domestic: "Nacional",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Exportação",
+  "Determining transaction type...": "Determinando tipo de transação...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Esta fatura não será fiscalizada (transação não nacional)",
+  "Tax Clause": "Cláusula fiscal",
+  "Add tax clause...": "Adicionar cláusula fiscal...",
+  "Reverse charge - tax exempt EU B2B sale": "Autoliquidação - venda B2B UE isenta de imposto",
 } as const;

package/src/components/delivery-notes/create/locales/sl.ts

@@ -16,7 +16,7 @@ export default {
   "Tax Number": "Davčna številka",
   Items: "Postavke",
   "Add item": "Dodaj postavko",
-  Tax: "Davek",
+  Tax: "DDV",
   "Tax rate": "Davčna stopnja",
   "Add tax": "Dodaj davek",
   "Select tax...": "Izberi davek...",
@@ -46,4 +46,20 @@ export default {
   "Gross price (tax included)": "Bruto cena (z davkom)",
   "Net price (before tax)": "Neto cena (brez davka)",
   "Hide prices": "Skrij cene",
+  // Separator items
+  "Add separator": "Dodaj ločilnik",
+  "Section header": "Naslov razdelka",
+  "Section title...": "Naslov razdelka...",
+  // Transaction type
+  "Transaction type": "Vrsta transakcije",
+  Domestic: "Domača",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Izvoz",
+  "Determining transaction type...": "Določanje vrste transakcije...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Ta račun ne bo fiskaliziran (nedomača transakcija)",
+  "Tax Clause": "Davčna klavzula",
+  "Add tax clause...": "Dodajte davčno klavzulo...",
+  "Reverse charge - tax exempt EU B2B sale": "Obrnjena davčna obveznost - davka oproščena EU B2B prodaja",
 } as const;

package/src/components/delivery-notes/list/list-table.tsx

@@ -157,14 +157,6 @@ export default function DeliveryNoteListTable({
                 {t("Draft")}
               </Badge>
             )}
-            {deliveryNote.voided_at && (
-              <Badge
-                variant="outline"
-                className="border-red-500 bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400"
-              >
-                {t("Voided")}
-              </Badge>
-            )}
           </div>
         ),
       },
@@ -190,6 +182,23 @@ export default function DeliveryNoteListTable({
         align: "right",
         cell: (deliveryNote) => deliveryNote.total_with_tax,
       },
+      {
+        id: "status",
+        header: t("Status"),
+        cell: (deliveryNote) => {
+          if (deliveryNote.voided_at) {
+            return (
+              <Badge
+                variant="outline"
+                className="border-red-500 bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400"
+              >
+                {t("Voided")}
+              </Badge>
+            );
+          }
+          return null;
+        },
+      },
       {
         id: "actions",
         header: "",

package/src/components/delivery-notes/list/locales/de.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Entwurf",
+  Number: "Nummer",
+  Customer: "Kunde",
+  Date: "Datum",
+  "Created At": "Erstellt am",
+  Status: "Status",
+  Total: "Gesamt",
+  "Total with Tax": "Gesamt mit MwSt",
+  // Filter translations
+  "Search...": "Suchen...",
+  Filters: "Filter",
+  "Date Range": "Datumsbereich",
+  From: "Von",
+  To: "Bis",
+  "Clear filters": "Filter löschen",
+  // Empty state translations
   "Your list is empty": "Ihre Lieferscheinliste ist leer",
   "Get started by creating your first entry": "Erstellen Sie Ihren ersten Lieferschein",
   "Create new": "Lieferschein erstellen",
+  // No results translations
   "No results found": "Keine Lieferscheine gefunden",
+  "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
+  "Clear search": "Suche zurücksetzen",
+  "Clear all": "Alles zurücksetzen",
   selected: "ausgewählt",
   "Export PDFs": "PDFs exportieren",
   "Deselect all": "Alle abwählen",
   "Copy to Invoice": "In Rechnung kopieren",
-  "Clear all": "Alles zurücksetzen",
   Void: "Stornieren",
   Voided: "Storniert",
+  // Row action translations
+  "Open menu": "Menü öffnen",
+  Actions: "Aktionen",
+  "Copy delivery note ID": "Lieferschein-ID kopieren",
+  "View delivery note": "Lieferschein anzeigen",
+  "Download PDF": "PDF herunterladen",
+  "Downloading...": "Wird heruntergeladen...",
+  Duplicate: "Duplizieren",
+  Unshare: "Freigabe aufheben",
+  "Failed to download PDF": "PDF-Download fehlgeschlagen",
+  "Delivery Note": "Lieferschein",
 } as const;

package/src/components/delivery-notes/list/locales/en.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Draft",
+  Number: "Number",
+  Customer: "Customer",
+  Date: "Date",
+  "Created At": "Created At",
+  Status: "Status",
+  Total: "Total",
+  "Total with Tax": "Total with Tax",
+  // Filter translations
+  "Search...": "Search...",
+  Filters: "Filters",
+  "Date Range": "Date Range",
+  From: "From",
+  To: "To",
+  "Clear filters": "Clear filters",
   // Empty state translations
   "Your list is empty": "Your delivery note list is empty",
   "Get started by creating your first entry": "Get started by creating your first delivery note",
   "Create new": "Create delivery note",
   // No results translations
   "No results found": "No delivery notes found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
   selected: "selected",
   "Export PDFs": "Export PDFs",
   "Deselect all": "Deselect all",
   "Copy to Invoice": "Copy to Invoice",
   Void: "Void",
+  Voided: "Voided",
+  // Row action translations
+  "Open menu": "Open menu",
+  Actions: "Actions",
+  "Copy delivery note ID": "Copy delivery note ID",
+  "View delivery note": "View delivery note",
+  "Download PDF": "Download PDF",
+  "Downloading...": "Downloading...",
+  Duplicate: "Duplicate",
+  Unshare: "Unshare",
+  "Failed to download PDF": "Failed to download PDF",
+  "Delivery Note": "Delivery Note",
 } as const;

package/src/components/delivery-notes/list/locales/es.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Borrador",
+  Number: "Número",
+  Customer: "Cliente",
+  Date: "Fecha",
+  "Created At": "Creado el",
+  Status: "Estado",
+  Total: "Total",
+  "Total with Tax": "Total con IVA",
+  // Filter translations
+  "Search...": "Buscar...",
+  Filters: "Filtros",
+  "Date Range": "Rango de fechas",
+  From: "Desde",
+  To: "Hasta",
+  "Clear filters": "Limpiar filtros",
+  // Empty state translations
   "Your list is empty": "Su lista de albaranes está vacía",
   "Get started by creating your first entry": "Comience creando su primer albarán",
   "Create new": "Crear albarán",
+  // No results translations
   "No results found": "No se encontraron albaranes",
+  "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
+  "Clear search": "Limpiar búsqueda",
+  "Clear all": "Borrar todo",
   selected: "seleccionados",
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Deseleccionar todo",
   "Copy to Invoice": "Copiar a factura",
-  "Clear all": "Borrar todo",
   Void: "Anular",
   Voided: "Anulado",
+  // Row action translations
+  "Open menu": "Abrir menú",
+  Actions: "Acciones",
+  "Copy delivery note ID": "Copiar ID de albarán",
+  "View delivery note": "Ver albarán",
+  "Download PDF": "Descargar PDF",
+  "Downloading...": "Descargando...",
+  Duplicate: "Duplicar",
+  Unshare: "Dejar de compartir",
+  "Failed to download PDF": "Error al descargar el PDF",
+  "Delivery Note": "Albarán",
 } as const;

package/src/components/delivery-notes/list/locales/fr.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Brouillon",
+  Number: "Numéro",
+  Customer: "Client",
+  Date: "Date",
+  "Created At": "Créé le",
+  Status: "Statut",
+  Total: "Total",
+  "Total with Tax": "Total TTC",
+  // Filter translations
+  "Search...": "Rechercher...",
+  Filters: "Filtres",
+  "Date Range": "Plage de dates",
+  From: "Du",
+  To: "Au",
+  "Clear filters": "Effacer les filtres",
+  // Empty state translations
   "Your list is empty": "Votre liste de bons de livraison est vide",
   "Get started by creating your first entry": "Commencez par créer votre premier bon de livraison",
   "Create new": "Créer un bon de livraison",
+  // No results translations
   "No results found": "Aucun bon de livraison trouvé",
+  "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
+  "Clear search": "Effacer la recherche",
+  "Clear all": "Tout effacer",
   selected: "sélectionnés",
   "Export PDFs": "Exporter les PDFs",
   "Deselect all": "Tout désélectionner",
   "Copy to Invoice": "Copier vers facture",
-  "Clear all": "Tout effacer",
   Void: "Annuler",
   Voided: "Annulé",
+  // Row action translations
+  "Open menu": "Ouvrir le menu",
+  Actions: "Actions",
+  "Copy delivery note ID": "Copier l'ID du bon de livraison",
+  "View delivery note": "Voir le bon de livraison",
+  "Download PDF": "Télécharger le PDF",
+  "Downloading...": "Téléchargement...",
+  Duplicate: "Dupliquer",
+  Unshare: "Annuler le partage",
+  "Failed to download PDF": "Échec du téléchargement du PDF",
+  "Delivery Note": "Bon de livraison",
 } as const;

package/src/components/delivery-notes/list/locales/hr.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Nacrt",
+  Number: "Broj",
+  Customer: "Kupac",
+  Date: "Datum",
+  "Created At": "Kreirano",
+  Status: "Status",
+  Total: "Ukupno",
+  "Total with Tax": "Ukupno s PDV-om",
+  // Filter translations
+  "Search...": "Pretraži...",
+  Filters: "Filtri",
+  "Date Range": "Raspon datuma",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Očisti filtre",
+  // Empty state translations
   "Your list is empty": "Popis otpremnica je prazan",
   "Get started by creating your first entry": "Započnite stvaranjem prve otpremnice",
   "Create new": "Stvori otpremnicu",
+  // No results translations
   "No results found": "Nisu pronađene otpremnice",
+  "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
+  "Clear search": "Očisti pretragu",
+  "Clear all": "Očisti sve",
   selected: "odabranih",
   "Export PDFs": "Izvezi PDF-ove",
   "Deselect all": "Poništi odabir",
   "Copy to Invoice": "Kopiraj u račun",
-  "Clear all": "Očisti sve",
   Void: "Storniraj",
   Voided: "Poništeno",
+  // Row action translations
+  "Open menu": "Otvori izbornik",
+  Actions: "Akcije",
+  "Copy delivery note ID": "Kopiraj ID otpremnice",
+  "View delivery note": "Prikaži otpremnicu",
+  "Download PDF": "Preuzmi PDF",
+  "Downloading...": "Preuzimanje...",
+  Duplicate: "Dupliciraj",
+  Unshare: "Ukloni dijeljenje",
+  "Failed to download PDF": "Preuzimanje PDF-a nije uspjelo",
+  "Delivery Note": "Otpremnica",
 } as const;

package/src/components/delivery-notes/list/locales/it.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Bozza",
+  Number: "Numero",
+  Customer: "Cliente",
+  Date: "Data",
+  "Created At": "Creato il",
+  Status: "Stato",
+  Total: "Totale",
+  "Total with Tax": "Totale con IVA",
+  // Filter translations
+  "Search...": "Cerca...",
+  Filters: "Filtri",
+  "Date Range": "Intervallo di date",
+  From: "Da",
+  To: "A",
+  "Clear filters": "Cancella filtri",
+  // Empty state translations
   "Your list is empty": "La lista delle bolle di consegna è vuota",
   "Get started by creating your first entry": "Inizia creando la tua prima bolla di consegna",
   "Create new": "Crea bolla di consegna",
+  // No results translations
   "No results found": "Nessuna bolla di consegna trovata",
+  "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
+  "Clear search": "Cancella ricerca",
+  "Clear all": "Cancella tutto",
   selected: "selezionati",
   "Export PDFs": "Esporta PDF",
   "Deselect all": "Deseleziona tutto",
   "Copy to Invoice": "Copia in fattura",
-  "Clear all": "Cancella tutto",
   Void: "Annulla",
   Voided: "Annullato",
+  // Row action translations
+  "Open menu": "Apri menu",
+  Actions: "Azioni",
+  "Copy delivery note ID": "Copia ID bolla di consegna",
+  "View delivery note": "Visualizza bolla di consegna",
+  "Download PDF": "Scarica PDF",
+  "Downloading...": "Download in corso...",
+  Duplicate: "Duplica",
+  Unshare: "Rimuovi condivisione",
+  "Failed to download PDF": "Download del PDF non riuscito",
+  "Delivery Note": "Bolla di consegna",
 } as const;

package/src/components/delivery-notes/list/locales/nl.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Concept",
+  Number: "Nummer",
+  Customer: "Klant",
+  Date: "Datum",
+  "Created At": "Aangemaakt op",
+  Status: "Status",
+  Total: "Totaal",
+  "Total with Tax": "Totaal met BTW",
+  // Filter translations
+  "Search...": "Zoeken...",
+  Filters: "Filters",
+  "Date Range": "Datumbereik",
+  From: "Van",
+  To: "Tot",
+  "Clear filters": "Filters wissen",
+  // Empty state translations
   "Your list is empty": "Uw pakbonlijst is leeg",
   "Get started by creating your first entry": "Begin met het aanmaken van uw eerste pakbon",
   "Create new": "Pakbon aanmaken",
+  // No results translations
   "No results found": "Geen pakbonnen gevonden",
+  "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
+  "Clear search": "Zoekopdracht wissen",
+  "Clear all": "Alles wissen",
   selected: "geselecteerd",
   "Export PDFs": "PDFs exporteren",
   "Deselect all": "Alles deselecteren",
   "Copy to Invoice": "Kopieer naar factuur",
-  "Clear all": "Alles wissen",
   Void: "Nietig verklaren",
   Voided: "Ongeldig verklaard",
+  // Row action translations
+  "Open menu": "Menu openen",
+  Actions: "Acties",
+  "Copy delivery note ID": "Pakbon-ID kopiëren",
+  "View delivery note": "Pakbon bekijken",
+  "Download PDF": "PDF downloaden",
+  "Downloading...": "Downloaden...",
+  Duplicate: "Dupliceren",
+  Unshare: "Delen opheffen",
+  "Failed to download PDF": "PDF-download mislukt",
+  "Delivery Note": "Pakbon",
 } as const;

package/src/components/delivery-notes/list/locales/pl.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Wersja robocza",
+  Number: "Numer",
+  Customer: "Klient",
+  Date: "Data",
+  "Created At": "Utworzono",
+  Status: "Status",
+  Total: "Razem",
+  "Total with Tax": "Razem z VAT",
+  // Filter translations
+  "Search...": "Szukaj...",
+  Filters: "Filtry",
+  "Date Range": "Zakres dat",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Wyczyść filtry",
+  // Empty state translations
   "Your list is empty": "Lista listów przewozowych jest pusta",
   "Get started by creating your first entry": "Zacznij od utworzenia pierwszego listu przewozowego",
   "Create new": "Utwórz list przewozowy",
+  // No results translations
   "No results found": "Nie znaleziono listów przewozowych",
+  "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
+  "Clear search": "Wyczyść wyszukiwanie",
+  "Clear all": "Wyczyść wszystko",
   selected: "wybranych",
   "Export PDFs": "Eksportuj PDF-y",
   "Deselect all": "Odznacz wszystko",
   "Copy to Invoice": "Kopiuj do faktury",
-  "Clear all": "Wyczyść wszystko",
   Void: "Anuluj",
   Voided: "Anulowana",
+  // Row action translations
+  "Open menu": "Otwórz menu",
+  Actions: "Akcje",
+  "Copy delivery note ID": "Kopiuj ID listu przewozowego",
+  "View delivery note": "Pokaż list przewozowy",
+  "Download PDF": "Pobierz PDF",
+  "Downloading...": "Pobieranie...",
+  Duplicate: "Duplikuj",
+  Unshare: "Cofnij udostępnienie",
+  "Failed to download PDF": "Nie udało się pobrać PDF",
+  "Delivery Note": "List przewozowy",
 } as const;

package/src/components/delivery-notes/list/locales/pt.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Rascunho",
+  Number: "Número",
+  Customer: "Cliente",
+  Date: "Data",
+  "Created At": "Criado em",
+  Status: "Estado",
+  Total: "Total",
+  "Total with Tax": "Total com IVA",
+  // Filter translations
+  "Search...": "Pesquisar...",
+  Filters: "Filtros",
+  "Date Range": "Intervalo de datas",
+  From: "De",
+  To: "Até",
+  "Clear filters": "Limpar filtros",
+  // Empty state translations
   "Your list is empty": "A sua lista de guias de remessa está vazia",
   "Get started by creating your first entry": "Comece criando a sua primeira guia de remessa",
   "Create new": "Criar guia de remessa",
+  // No results translations
   "No results found": "Nenhuma guia de remessa encontrada",
+  "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
+  "Clear search": "Limpar pesquisa",
+  "Clear all": "Limpar tudo",
   selected: "selecionados",
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Desmarcar tudo",
   "Copy to Invoice": "Copiar para fatura",
-  "Clear all": "Limpar tudo",
   Void: "Anular",
   Voided: "Anulado",
+  // Row action translations
+  "Open menu": "Abrir menu",
+  Actions: "Ações",
+  "Copy delivery note ID": "Copiar ID da guia de remessa",
+  "View delivery note": "Ver guia de remessa",
+  "Download PDF": "Transferir PDF",
+  "Downloading...": "A transferir...",
+  Duplicate: "Duplicar",
+  Unshare: "Remover partilha",
+  "Failed to download PDF": "Falha ao transferir o PDF",
+  "Delivery Note": "Guia de remessa",
 } as const;

package/src/components/delivery-notes/list/locales/sl.ts

@@ -1,13 +1,44 @@
 export default {
+  // Column headers
+  Draft: "Osnutek",
+  Number: "Številka",
+  Customer: "Stranka",
+  Date: "Datum",
+  "Created At": "Ustvarjeno",
+  Status: "Status",
+  Total: "Skupaj",
+  "Total with Tax": "Skupaj z DDV",
+  // Filter translations
+  "Search...": "Iskanje...",
+  Filters: "Filtri",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Počisti filtre",
+  // Empty state translations
   "Your list is empty": "Seznam dobavnic je prazen",
   "Get started by creating your first entry": "Začnite z ustvarjanjem prve dobavnice",
   "Create new": "Ustvari dobavnico",
+  // No results translations
   "No results found": "Ni najdenih dobavnic",
+  "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
+  "Clear search": "Počisti iskanje",
+  "Clear all": "Počisti vse",
   selected: "izbranih",
   "Export PDFs": "Izvozi PDF-je",
   "Deselect all": "Počisti izbor",
   "Copy to Invoice": "Kopiraj v račun",
-  "Clear all": "Počisti vse",
   Void: "Storniraj",
   Voided: "Stornirano",
+  // Row action translations
+  "Open menu": "Odpri meni",
+  Actions: "Akcije",
+  "Copy delivery note ID": "Kopiraj ID dobavnice",
+  "View delivery note": "Prikaži dobavnico",
+  "Download PDF": "Prenesi PDF",
+  "Downloading...": "Prenašam...",
+  Duplicate: "Podvoji",
+  Unshare: "Odstrani deljenje",
+  "Failed to download PDF": "Prenos PDF-ja je spodletel",
+  "Delivery Note": "Dobavnica",
 } as const;

package/src/components/documents/create/document-add-item-form.tsx

@@ -67,6 +67,12 @@ export default function DocumentAddItemForm({
   initialIsGrossPrice = false,
   onPriceModeChange,
 }: DocumentAddItemFormProps) {
+  const itemType = useWatch({
+    control,
+    name: `items.${index}.type`,
+  });
+  const isSeparator = itemType === "separator";
+
   const taxes = useWatch({
     control,
     name: `items.${index}.taxes`,
@@ -140,6 +146,70 @@ export default function DocumentAddItemForm({
     }
   };
 
+  if (isSeparator) {
+    return (
+      <div className="space-y-4 rounded-lg border border-muted-foreground/50 border-dashed p-4">
+        {/* Header row with name and remove button */}
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <FormField
+              control={control}
+              name={`items.${index}.name`}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-muted-foreground text-xs">{t("Section header")}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t("Section title...")} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {showRemove && (
+            <Button type="button" variant="ghost" size="icon" onClick={onRemove} className="mt-6">
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        {/* Description and move buttons */}
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <FormField
+              control={control}
+              name={`items.${index}.description`}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea placeholder={t("Description")} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {(showMoveUp || showMoveDown) && (
+            <div className="flex flex-col gap-2">
+              {showMoveUp && (
+                <Button type="button" variant="ghost" size="icon" onClick={onMoveUp} className="mt-auto">
+                  <ChevronUp className="h-4 w-4" />
+                </Button>
+              )}
+              {showMoveDown && (
+                <Button type="button" variant="ghost" size="icon" onClick={onMoveDown} className="mt-auto">
+                  <ChevronDown className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-4 rounded-lg border p-4">
       {/* Header row with name and remove button */}