@h-ai/ui 0.1.0-alpha.22 → 0.1.0-alpha.24

package/dist/components/scenes/crud/CrudDetailPanel.svelte

@@ -0,0 +1,204 @@
+<!--
+  @component CrudDetailPanel
+  CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
+
+  使用 Svelte 5 Runes ($props, $derived)
+  使用 compounds 组件：Drawer, Modal, Badge
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { Size } from '../../../types.js'
+  import type { CrudDensity, CrudFormVariant } from './crud-types.js'
+  import { uiM } from '../../../messages.js'
+  import Drawer from '../../compounds/Drawer.svelte'
+  import Modal from '../../compounds/Modal.svelte'
+  import Badge from '../../primitives/Badge.svelte'
+  import Button from '../../primitives/Button.svelte'
+
+  type FieldDef = {
+    id: string
+    label: string | (() => string)
+    type: string
+    inDetail?: boolean
+    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
+    render?: (value: unknown, item: Record<string, unknown>) => string
+    order?: number
+  }
+
+  let {
+    open = $bindable(false),
+    item = null,
+    fields = [],
+    density = 'normal' as CrudDensity,
+    title = '',
+    variant = 'drawer' as CrudFormVariant,
+    size = '2xl' as Size,
+    drawerWidth,
+    modalSize = '2xl' as Size | 'full',
+    modalWidth,
+    modalHeight,
+    canEdit = false,
+    onedit,
+    onclose,
+    detailExtra,
+  }: {
+    open?: boolean
+    item?: Record<string, unknown> | null
+    fields?: FieldDef[]
+    density?: CrudDensity
+    title?: string
+    variant?: CrudFormVariant
+    size?: Size
+    drawerWidth?: string
+    modalSize?: Size | 'full'
+    modalWidth?: string
+    modalHeight?: string
+    canEdit?: boolean
+    onedit?: () => void
+    onclose?: () => void
+    detailExtra?: Snippet<[Record<string, unknown>]>
+  } = $props()
+
+  function resolveText(text: string | (() => string)): string {
+    return typeof text === 'function' ? text() : text
+  }
+
+  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
+    if (!options)
+      return []
+    return typeof options === 'function' ? options() : options
+  }
+
+  function formatValue(field: FieldDef, value: unknown): string {
+    if (value === null || value === undefined)
+      return uiM('crud_detail_empty')
+
+    if (field.render && item) {
+      return field.render(value, item)
+    }
+
+    if (field.type === 'select' || field.type === 'radio') {
+      const opts = resolveOptions(field.options)
+      const found = opts.find(o => String(o.value) === String(value))
+      return found?.label ?? String(value)
+    }
+
+    if (field.type === 'multi-select' && Array.isArray(value)) {
+      const opts = resolveOptions(field.options)
+      return value.map((v) => {
+        const found = opts.find(o => String(o.value) === String(v))
+        return found?.label ?? String(v)
+      }).join(', ')
+    }
+
+    if (field.type === 'boolean' || field.type === 'checkbox') {
+      return value ? '✓' : '✗'
+    }
+
+    if (field.type === 'date' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleDateString()
+    }
+    if (field.type === 'datetime' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleString()
+    }
+
+    return String(value)
+  }
+
+  const detailFields = $derived(
+    [...fields]
+      .filter(f => f.inDetail !== false)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  )
+
+  const isCompact = $derived(density === 'compact')
+  const contentClass = $derived(isCompact ? 'space-y-3' : 'space-y-4')
+  const labelClass = $derived(isCompact ? 'text-[11px] font-medium text-base-content/50 mb-1' : 'text-xs font-medium text-base-content/50 mb-1')
+  const valueClass = $derived(isCompact ? 'text-[13px] text-base-content' : 'text-sm text-base-content')
+  const badgeSize = $derived(isCompact ? 'xs' : 'sm')
+  const detailExtraClass = $derived(isCompact ? 'border-t border-base-content/5 pt-3' : 'border-t border-base-content/5 pt-4')
+  const iconClass = $derived(isCompact ? 'size-3.5 mr-1' : 'size-4 mr-1')
+  const drawerBodyClass = $derived(isCompact ? 'pb-16' : 'pb-20')
+  const drawerFooterClass = $derived(isCompact ? 'absolute bottom-0 left-0 right-0 p-3 bg-base-200 border-t border-base-content/10 flex justify-end gap-2' : 'absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2')
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+</script>
+
+{#snippet detailBody()}
+  {#if item}
+    <div class={contentClass}>
+      {#each detailFields as field (field.id)}
+        {@const value = item[field.id]}
+        <div>
+          <div class={labelClass}>
+            {resolveText(field.label)}
+          </div>
+          <div class={valueClass}>
+            {#if field.type === 'multi-select' && Array.isArray(value) && value.length > 0}
+              <div class='flex flex-wrap gap-1'>
+                {#each value as v, index (`${String(v)}:${index}`)}
+                  {@const opts = resolveOptions(field.options)}
+                  {@const found = opts.find(o => String(o.value) === String(v))}
+                  <Badge variant='ghost' size={badgeSize}>{found?.label ?? String(v)}</Badge>
+                {/each}
+              </div>
+            {:else}
+              {formatValue(field, value)}
+            {/if}
+          </div>
+        </div>
+      {/each}
+
+      {#if detailExtra && item}
+        <div class={detailExtraClass}>
+          {@render detailExtra(item)}
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet footerActions()}
+  {#if canEdit}
+    <Button variant='primary' size='sm' onclick={onedit}>
+      <span class='icon-[tabler--edit] {iconClass}'></span>
+      {uiM('crud_edit')}
+    </Button>
+  {/if}
+  <Button variant='ghost' size='sm' onclick={handleClose}>
+    {uiM('crud_close')}
+  </Button>
+{/snippet}
+
+{#if variant === 'modal'}
+  <Modal
+    bind:open
+    {title}
+    size={modalSize}
+    width={modalWidth}
+    height={modalHeight}
+    onclose={handleClose}
+  >
+    {@render detailBody()}
+
+    {#snippet footer()}
+      {@render footerActions()}
+    {/snippet}
+  </Modal>
+{:else}
+  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose}>
+    {#if item}
+      <div class={drawerBodyClass}>
+        {@render detailBody()}
+      </div>
+
+      <!-- 底部操作栏 -->
+      <div class={drawerFooterClass}>
+        {@render footerActions()}
+      </div>
+    {/if}
+  </Drawer>
+{/if}

package/dist/components/scenes/crud/CrudDetailPanel.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import type { Size } from '../../../types.js';
+import type { CrudDensity, CrudFormVariant } from './crud-types.js';
+type FieldDef = {
+    id: string;
+    label: string | (() => string);
+    type: string;
+    inDetail?: boolean;
+    options?: Array<{
+        label: string;
+        value: string | number | boolean;
+    }> | (() => Array<{
+        label: string;
+        value: string | number | boolean;
+    }>);
+    render?: (value: unknown, item: Record<string, unknown>) => string;
+    order?: number;
+};
+type $$ComponentProps = {
+    open?: boolean;
+    item?: Record<string, unknown> | null;
+    fields?: FieldDef[];
+    density?: CrudDensity;
+    title?: string;
+    variant?: CrudFormVariant;
+    size?: Size;
+    drawerWidth?: string;
+    modalSize?: Size | 'full';
+    modalWidth?: string;
+    modalHeight?: string;
+    canEdit?: boolean;
+    onedit?: () => void;
+    onclose?: () => void;
+    detailExtra?: Snippet<[Record<string, unknown>]>;
+};
+/**
+ * CrudDetailPanel
+ * CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * 使用 compounds 组件：Drawer, Modal, Badge
+ */
+declare const CrudDetailPanel: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CrudDetailPanel = ReturnType<typeof CrudDetailPanel>;
+export default CrudDetailPanel;

package/dist/components/scenes/crud/CrudEditPanel.svelte

@@ -0,0 +1,281 @@
+<!--
+  @component CrudEditPanel
+  CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 compounds/primitives 组件：Drawer, Modal, FormField, Input, Select, Textarea, Checkbox, Button
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { Size } from '../../../types.js'
+  import type { CrudDensity, CrudFormVariant } from './crud-types.js'
+  import { uiM } from '../../../messages.js'
+  import Drawer from '../../compounds/Drawer.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import Modal from '../../compounds/Modal.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Checkbox from '../../primitives/Checkbox.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import Select from '../../primitives/Select.svelte'
+  import Textarea from '../../primitives/Textarea.svelte'
+
+  type FieldDef = {
+    id: string
+    label: string | (() => string)
+    type: string
+    readonly?: boolean
+    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
+    validation?: { required?: boolean, min?: number, max?: number, pattern?: string, message?: string }
+    placeholder?: string | (() => string)
+    order?: number
+  }
+
+  let {
+    open = $bindable(false),
+    mode = 'create' as 'create' | 'edit',
+    fields = [],
+    formData = $bindable<Record<string, unknown>>({}),
+    density = 'normal' as CrudDensity,
+    title = '',
+    variant = 'drawer' as CrudFormVariant,
+    size = '2xl' as Size,
+    drawerWidth,
+    modalSize = '2xl' as Size | 'full',
+    modalWidth,
+    modalHeight,
+    submitting = false,
+    error = '',
+    onsubmit,
+    onclose,
+    editFormExtra,
+    editingItem = null,
+  }: {
+    open?: boolean
+    mode?: 'create' | 'edit'
+    fields?: FieldDef[]
+    formData?: Record<string, unknown>
+    density?: CrudDensity
+    title?: string
+    variant?: CrudFormVariant
+    size?: Size
+    drawerWidth?: string
+    modalSize?: Size | 'full'
+    modalWidth?: string
+    modalHeight?: string
+    submitting?: boolean
+    error?: string
+    onsubmit?: (data: Record<string, unknown>) => Promise<void>
+    onclose?: () => void
+    editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
+    editingItem?: Record<string, unknown> | null
+  } = $props()
+
+  function resolveText(text: string | (() => string)): string {
+    return typeof text === 'function' ? text() : text
+  }
+
+  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
+    if (!options)
+      return []
+    return typeof options === 'function' ? options() : options
+  }
+
+  const sortedFields = $derived(
+    [...fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  )
+
+  const isCompact = $derived(density === 'compact')
+  const controlSize = $derived(isCompact ? 'xs' : 'sm')
+  const formClass = $derived(isCompact ? 'space-y-3' : 'space-y-4')
+  const extraClass = $derived(isCompact ? 'border-t border-base-content/5 pt-3' : 'border-t border-base-content/5 pt-4')
+  const multiSelectWrapClass = $derived(isCompact ? 'flex flex-wrap gap-2 p-2.5 bg-base-200 rounded-lg max-h-48 overflow-y-auto' : 'flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto')
+  const multiSelectLabelClass = $derived(isCompact ? 'inline-flex items-center gap-1.5 cursor-pointer' : 'inline-flex items-center gap-2 cursor-pointer')
+  const multiSelectTextClass = $derived(isCompact ? 'text-xs text-base-content' : 'text-sm text-base-content')
+  const drawerFormClass = $derived(isCompact ? 'space-y-3 pb-16' : 'space-y-4 pb-20')
+  const drawerFooterClass = $derived(isCompact ? 'absolute bottom-0 left-0 right-0 p-3 bg-base-200 border-t border-base-content/10 flex justify-end gap-2' : 'absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2')
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    await onsubmit?.(formData)
+  }
+
+  function getInputType(fieldType: string): 'email' | 'url' | 'tel' | 'password' | 'number' | 'text' {
+    switch (fieldType) {
+      case 'email': return 'email'
+      case 'url': return 'url'
+      case 'tel': return 'tel'
+      case 'password': return 'password'
+      case 'number': return 'number'
+      case 'date': return 'text'
+      case 'datetime': return 'text'
+      default: return 'text'
+    }
+  }
+
+  function updateField(fieldId: string, value: unknown) {
+    formData = { ...formData, [fieldId]: value }
+  }
+
+  function toggleMultiSelect(fieldId: string, optValue: string | number | boolean) {
+    const current = (formData[fieldId] as Array<string | number | boolean>) ?? []
+    const strVal = String(optValue)
+    if (current.map(String).includes(strVal)) {
+      formData = { ...formData, [fieldId]: current.filter(v => String(v) !== strVal) }
+    }
+    else {
+      formData = { ...formData, [fieldId]: [...current, optValue] }
+    }
+  }
+</script>
+
+{#snippet formFields()}
+  {#if error}
+    <div class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
+      <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
+      <span>{error}</span>
+    </div>
+  {/if}
+
+  {#each sortedFields as field (field.id)}
+    {@const isReadonly = field.readonly && mode === 'edit'}
+    {@const isRequired = field.validation?.required}
+    {@const fieldValue = formData[field.id]}
+    {@const placeholder = field.placeholder ? resolveText(field.placeholder) : ''}
+
+    {#if field.type === 'textarea'}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Textarea
+          id={field.id}
+          size={controlSize}
+          value={String(fieldValue ?? '')}
+          {placeholder}
+          disabled={submitting || isReadonly}
+          required={isRequired}
+          oninput={e => updateField(field.id, (e.target as HTMLTextAreaElement).value)}
+        />
+      </FormField>
+
+    {:else if field.type === 'select' || field.type === 'radio'}
+      {@const opts = resolveOptions(field.options)}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Select
+          id={field.id}
+          size={controlSize}
+          value={String(fieldValue ?? '')}
+          disabled={submitting || isReadonly}
+          onchange={value => updateField(field.id, value)}
+        >
+          <option value="">{placeholder || uiM('crud_filter_all')}</option>
+          {#each opts as opt (String(opt.value))}
+            <option value={String(opt.value)}>{opt.label}</option>
+          {/each}
+        </Select>
+      </FormField>
+
+    {:else if field.type === 'multi-select'}
+      {@const opts = resolveOptions(field.options)}
+      {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <div class={multiSelectWrapClass}>
+          {#each opts as opt (String(opt.value))}
+            <label class={multiSelectLabelClass}>
+              <Checkbox
+                size={controlSize}
+                checked={selectedValues.includes(String(opt.value))}
+                onchange={() => toggleMultiSelect(field.id, opt.value)}
+                disabled={submitting || isReadonly}
+              />
+              <span class={multiSelectTextClass}>{opt.label}</span>
+            </label>
+          {/each}
+          {#if opts.length === 0}
+            <span class={multiSelectTextClass}>{uiM('crud_no_data')}</span>
+          {/if}
+        </div>
+      </FormField>
+
+    {:else if field.type === 'boolean' || field.type === 'checkbox'}
+      <FormField label={resolveText(field.label)}>
+        <Checkbox
+          size={controlSize}
+          checked={Boolean(fieldValue)}
+          onchange={(checked: boolean) => updateField(field.id, checked)}
+          disabled={submitting || isReadonly}
+        />
+      </FormField>
+
+    {:else}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Input
+          id={field.id}
+          type={getInputType(field.type)}
+          size={controlSize}
+          value={String(fieldValue ?? '')}
+          {placeholder}
+          disabled={submitting || isReadonly}
+          required={isRequired}
+          pattern={field.validation?.pattern}
+          minlength={field.type !== 'number' ? field.validation?.min : undefined}
+          maxlength={field.type !== 'number' ? field.validation?.max : undefined}
+          min={field.type === 'number' ? field.validation?.min : undefined}
+          max={field.type === 'number' ? field.validation?.max : undefined}
+          oninput={e => updateField(field.id, field.type === 'number' ? Number((e.currentTarget as HTMLInputElement).value) : (e.currentTarget as HTMLInputElement).value)}
+        />
+      </FormField>
+    {/if}
+  {/each}
+
+  {#if editFormExtra}
+    <div class={extraClass}>
+      {@render editFormExtra(editingItem, mode)}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet footerActions()}
+  <Button variant='ghost' size='sm' onclick={handleClose} disabled={submitting}>
+    {uiM('crud_cancel')}
+  </Button>
+  <Button variant='primary' size='sm' onclick={handleSubmit} disabled={submitting}>
+    {#if submitting}
+      <span class='loading loading-spinner loading-xs mr-2'></span>
+    {/if}
+    {mode === 'create' ? uiM('crud_create') : uiM('crud_save')}
+  </Button>
+{/snippet}
+
+{#if variant === 'modal'}
+  <Modal
+    bind:open
+    {title}
+    size={modalSize}
+    width={modalWidth}
+    height={modalHeight}
+    closeOnBackdrop={false}
+    onclose={handleClose}
+  >
+    <form onsubmit={handleSubmit} class={formClass}>
+      {@render formFields()}
+    </form>
+
+    {#snippet footer()}
+      {@render footerActions()}
+    {/snippet}
+  </Modal>
+{:else}
+  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
+    <form onsubmit={handleSubmit} class={drawerFormClass}>
+      {@render formFields()}
+    </form>
+
+    <!-- 底部操作栏 -->
+    <div class={drawerFooterClass}>
+      {@render footerActions()}
+    </div>
+  </Drawer>
+{/if}

package/dist/components/scenes/crud/{CrudEditDrawer.svelte.d.ts → CrudEditPanel.svelte.d.ts}

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Size } from '../../../types.js';
+import type { CrudDensity, CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
     label: string | (() => string);
@@ -27,8 +28,14 @@ type $$ComponentProps = {
     mode?: 'create' | 'edit';
     fields?: FieldDef[];
     formData?: Record<string, unknown>;
+    density?: CrudDensity;
     title?: string;
+    variant?: CrudFormVariant;
     size?: Size;
+    drawerWidth?: string;
+    modalSize?: Size | 'full';
+    modalWidth?: string;
+    modalHeight?: string;
     submitting?: boolean;
     error?: string;
     onsubmit?: (data: Record<string, unknown>) => Promise<void>;
@@ -37,12 +44,12 @@ type $$ComponentProps = {
     editingItem?: Record<string, unknown> | null;
 };
 /**
- * CrudEditDrawer
- * CRUD 编辑/新建抽屉组件
+ * CrudEditPanel
+ * CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式
  *
  * 使用 Svelte 5 Runes ($props, $state, $derived)
- * 使用 compounds/primitives 组件：Drawer, FormField, Input, Select, Textarea, Checkbox, Button
+ * 使用 compounds/primitives 组件：Drawer, Modal, FormField, Input, Select, Textarea, Checkbox, Button
  */
-declare const CrudEditDrawer: import("svelte").Component<$$ComponentProps, {}, "open" | "formData">;
-type CrudEditDrawer = ReturnType<typeof CrudEditDrawer>;
-export default CrudEditDrawer;
+declare const CrudEditPanel: import("svelte").Component<$$ComponentProps, {}, "open" | "formData">;
+type CrudEditPanel = ReturnType<typeof CrudEditPanel>;
+export default CrudEditPanel;

package/dist/components/scenes/crud/CrudFilterBar.svelte

@@ -57,15 +57,16 @@
   }
 </script>
 
-<div class='p-4'>
-  <div class='flex flex-col sm:flex-row gap-3'>
+<div class='grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center'>
+  <div class='flex min-w-0 flex-wrap items-center gap-3 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
     {#if searchable}
-      <div class='flex-1 relative'>
-        <span class='icon-[tabler--search] size-4.5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/35 z-10'></span>
+      <div class='relative min-w-[15rem] flex-[1_1_20rem]'>
+        <span class='icon-[tabler--search] pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-base-content/35'></span>
         <Input
           type='text'
+          size='sm'
           placeholder={searchPlaceholder || uiM('crud_search_placeholder')}
-          class='pl-10'
+          class='pl-10 shadow-none'
           bind:value={searchValue}
           oninput={handleSearchInput}
           autocomplete='off'
@@ -76,21 +77,24 @@
     {#each filterFields as field (field.id)}
       {@const opts = resolveOptions(field.options)}
       {#if opts.length > 0}
-        <Select
-          class='min-w-32'
-          value={String(filterValues[field.id] ?? '')}
-          onchange={value => handleFilterChange(field.id, value)}
-        >
-          <option value="">{uiM('crud_filter_all')}</option>
-          {#each opts as opt (String(opt.value))}
-            <option value={String(opt.value)}>{opt.label}</option>
-          {/each}
-        </Select>
+        <div class='w-full sm:w-[11rem] sm:flex-none'>
+          <Select
+            size='sm'
+            class='border-base-content/10 bg-base-100 shadow-none'
+            value={String(filterValues[field.id] ?? '')}
+            onchange={value => handleFilterChange(field.id, value)}
+          >
+            <option value="">{uiM('crud_filter_all')}</option>
+            {#each opts as opt (String(opt.value))}
+              <option value={String(opt.value)}>{opt.label}</option>
+            {/each}
+          </Select>
+        </div>
       {/if}
     {/each}
+  </div>
 
-    <div class='text-sm text-base-content/50 self-center whitespace-nowrap'>
-      {uiM('crud_total', { count: total })}
-    </div>
+  <div class='inline-flex items-center justify-self-start rounded-full border border-base-content/8 bg-base-200/60 px-3 py-1 text-xs font-medium text-base-content/60 md:justify-self-end'>
+    {uiM('crud_total', { count: total })}
   </div>
 </div>