@open-mercato/core 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/modules/payment_gateways/backend/payment-gateways/page.tsx

@@ -18,7 +18,8 @@ import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChevronDown, ChevronRight, CreditCard, HandCoins, RefreshCw, Webhook } from 'lucide-react'
+import { LogList, type LogListEntry } from '@open-mercato/ui/backend/LogList'
+import { CreditCard, HandCoins, RefreshCw, Webhook } from 'lucide-react'
 
 type TransactionRow = {
   id: string
@@ -102,12 +103,6 @@ const STATUS_STYLES: Record<string, string> = {
   unknown: 'bg-purple-100 text-purple-800',
 }
 
-const LOG_LEVEL_STYLES: Record<string, string> = {
-  info: 'bg-blue-100 text-blue-800',
-  warn: 'bg-yellow-100 text-yellow-800',
-  error: 'bg-red-100 text-red-800',
-}
-
 function formatDateTime(value: string | null | undefined): string {
   if (!value) return '—'
   const parsed = new Date(value)
@@ -194,7 +189,6 @@ export default function PaymentTransactionsPage() {
   const [detail, setDetail] = React.useState<TransactionDetail | null>(null)
   const [isLoadingDetail, setIsLoadingDetail] = React.useState(false)
   const [detailError, setDetailError] = React.useState<string | null>(null)
-  const [expandedLogId, setExpandedLogId] = React.useState<string | null>(null)
   const [isRefreshingStatus, setIsRefreshingStatus] = React.useState(false)
   const [isCapturing, setIsCapturing] = React.useState(false)
   const { runMutation } = useGuardedMutation<{
@@ -249,7 +243,6 @@ export default function PaymentTransactionsPage() {
     const call = await apiCall<TransactionDetail>(`/api/payment_gateways/transactions/${encodeURIComponent(transactionId)}`, undefined, { fallback: null })
     if (call.ok && call.result) {
       setDetail(call.result)
-      setExpandedLogId((current) => (current && call.result?.logs.some((log) => log.id === current) ? current : null))
     } else {
       setDetail(null)
       setDetailError(t('payment_gateways.transactions.error.loadDetail', 'Failed to load transaction details'))
@@ -610,100 +603,64 @@ export default function PaymentTransactionsPage() {
 
                       <section className="space-y-3">
                         <h3 className="text-sm font-semibold">{t('payment_gateways.transactions.detail.logs', 'Gateway logs')}</h3>
-                        {detail.logs.length === 0 ? (
-                          <p className="text-sm text-muted-foreground">{t('payment_gateways.transactions.detail.logsEmpty', 'No transaction-scoped logs are available yet.')}</p>
-                        ) : (
-                          <div className="overflow-hidden rounded-lg border">
-                            <table className="w-full text-sm">
-                              <thead>
-                                <tr className="border-b bg-muted/50">
-                                  <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.time', 'Time')}</th>
-                                  <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.level', 'Level')}</th>
-                                  <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.message', 'Message')}</th>
-                                </tr>
-                              </thead>
-                              <tbody>
-                                {detail.logs.map((log) => {
-                                  const isExpanded = expandedLogId === log.id
-                                  const metadataEntries = [
-                                    [t('payment_gateways.transactions.log.time', 'Time'), formatDateTime(log.createdAt)],
-                                    [t('payment_gateways.transactions.log.level', 'Level'), t(`payment_gateways.transactions.level.${log.level}`, log.level)],
-                                    [t('payment_gateways.transactions.log.code', 'Code'), log.code ?? null],
-                                    [t('payment_gateways.transactions.log.runId', 'Run ID'), log.runId ?? null],
-                                    [t('payment_gateways.transactions.log.entityType', 'Entity Type'), log.scopeEntityType ?? null],
-                                    [t('payment_gateways.transactions.log.entityId', 'Entity ID'), log.scopeEntityId ?? null],
-                                  ].filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1].trim().length > 0)
-                                  const { inlineEntries, nestedEntries } = splitLogPayload(log.payload)
-
-                                  return (
-                                    <React.Fragment key={log.id}>
-                                      <tr className="border-b last:border-0">
-                                        <td className="whitespace-nowrap px-4 py-2 text-muted-foreground">{formatDateTime(log.createdAt)}</td>
-                                        <td className="px-4 py-2">
-                                          <Badge variant="secondary" className={LOG_LEVEL_STYLES[log.level] ?? ''}>
-                                            {t(`payment_gateways.transactions.level.${log.level}`, log.level)}
-                                          </Badge>
-                                        </td>
-                                        <td className="px-4 py-2">
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="sm"
-                                            className="h-auto w-full justify-start gap-2 px-0 py-0 text-left hover:bg-transparent"
-                                            onClick={() => setExpandedLogId((current) => current === log.id ? null : log.id)}
-                                          >
-                                            {isExpanded ? <ChevronDown className="h-4 w-4 shrink-0" /> : <ChevronRight className="h-4 w-4 shrink-0" />}
-                                            <span className="truncate">{log.message}</span>
-                                          </Button>
-                                        </td>
-                                      </tr>
-                                      {isExpanded ? (
-                                        <tr className="border-b bg-muted/30 last:border-0">
-                                          <td colSpan={3} className="px-4 py-4">
-                                            <div className="space-y-4 rounded-lg border bg-card p-4">
-                                              {metadataEntries.length > 0 ? (
-                                                <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-                                                  {metadataEntries.map(([label, value]) => (
-                                                    <div key={label} className="rounded-md border bg-muted/30 px-3 py-2">
-                                                      <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
-                                                      <dd className="mt-1 break-all text-sm">{value}</dd>
-                                                    </div>
-                                                  ))}
-                                                </dl>
-                                              ) : null}
-                                              {inlineEntries.length > 0 ? (
-                                                <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-                                                  {inlineEntries.map(([key, value]) => (
-                                                    <div key={key} className="rounded-md border bg-muted/30 px-3 py-2">
-                                                      <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{formatLogDetailLabel(key)}</dt>
-                                                      <dd className="mt-1 break-words text-sm">{formatLogPrimitiveValue(value)}</dd>
-                                                    </div>
-                                                  ))}
-                                                </dl>
-                                              ) : null}
-                                              {nestedEntries.map(([key, value]) => (
-                                                <JsonDisplay
-                                                  key={key}
-                                                  data={value}
-                                                  title={formatLogDetailLabel(key)}
-                                                  defaultExpanded
-                                                  maxInitialDepth={1}
-                                                  theme="dark"
-                                                  maxHeight="16rem"
-                                                  className="p-4"
-                                                />
-                                              ))}
-                                            </div>
-                                          </td>
-                                        </tr>
-                                      ) : null}
-                                    </React.Fragment>
-                                  )
-                                })}
-                              </tbody>
-                            </table>
-                          </div>
-                        )}
+                        <LogList
+                          entries={detail.logs.map<LogListEntry>((log) => {
+                            const metadataEntries = [
+                              [t('payment_gateways.transactions.log.time', 'Time'), formatDateTime(log.createdAt)],
+                              [t('payment_gateways.transactions.log.level', 'Level'), t(`payment_gateways.transactions.level.${log.level}`, log.level)],
+                              [t('payment_gateways.transactions.log.code', 'Code'), log.code ?? null],
+                              [t('payment_gateways.transactions.log.runId', 'Run ID'), log.runId ?? null],
+                              [t('payment_gateways.transactions.log.entityType', 'Entity Type'), log.scopeEntityType ?? null],
+                              [t('payment_gateways.transactions.log.entityId', 'Entity ID'), log.scopeEntityId ?? null],
+                            ].filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1].trim().length > 0)
+                            const { inlineEntries, nestedEntries } = splitLogPayload(log.payload)
+
+                            return {
+                              id: log.id,
+                              time: formatDateTime(log.createdAt),
+                              level: log.level,
+                              levelLabel: t(`payment_gateways.transactions.level.${log.level}`, log.level),
+                              message: log.message,
+                              body: (
+                                <div className="space-y-4">
+                                  {metadataEntries.length > 0 ? (
+                                    <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                                      {metadataEntries.map(([label, value]) => (
+                                        <div key={label} className="rounded-md border bg-muted/30 px-3 py-2">
+                                          <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
+                                          <dd className="mt-1 break-all text-sm">{value}</dd>
+                                        </div>
+                                      ))}
+                                    </dl>
+                                  ) : null}
+                                  {inlineEntries.length > 0 ? (
+                                    <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                                      {inlineEntries.map(([key, value]) => (
+                                        <div key={key} className="rounded-md border bg-muted/30 px-3 py-2">
+                                          <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{formatLogDetailLabel(key)}</dt>
+                                          <dd className="mt-1 break-words text-sm">{formatLogPrimitiveValue(value)}</dd>
+                                        </div>
+                                      ))}
+                                    </dl>
+                                  ) : null}
+                                  {nestedEntries.map(([key, value]) => (
+                                    <JsonDisplay
+                                      key={key}
+                                      data={value}
+                                      title={formatLogDetailLabel(key)}
+                                      defaultExpanded
+                                      maxInitialDepth={1}
+                                      theme="dark"
+                                      maxHeight="16rem"
+                                      className="p-4"
+                                    />
+                                  ))}
+                                </div>
+                              ),
+                            }
+                          })}
+                          emptyMessage={t('payment_gateways.transactions.detail.logsEmpty', 'No transaction-scoped logs are available yet.')}
+                        />
                       </section>
                     </div>
 

package/src/modules/planner/components/AvailabilityRuleSetForm.tsx

@@ -73,7 +73,7 @@ export function AvailabilityRuleSetForm(props: AvailabilityRuleSetFormProps) {
       id: 'description',
       label: translate('planner.availabilityRuleSets.form.fields.description', 'Description'),
       type: 'richtext',
-      editor: 'uiw',
+      editor: 'html',
     },
   ], [translate])
 

package/src/modules/planner/components/AvailabilityRulesEditor.tsx

@@ -18,7 +18,7 @@ import { apiCall, apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { createCrud, deleteCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ComboboxInput } from '@open-mercato/ui/backend/inputs'
+import { ComboboxInput, TimePicker } from '@open-mercato/ui/backend/inputs'
 import { DictionaryEntrySelect, type DictionarySelectLabels } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
 import {
   createUnavailabilityReasonEntry,
@@ -1425,20 +1425,20 @@ export function AvailabilityRulesEditor({
                               return (
                                 <div key={`${day.code}-${windowIndex}`} className="space-y-1">
                                   <div className="flex flex-wrap items-center gap-2">
-                                    <Input
-                                      type="time"
+                                    <TimePicker
                                       value={window.start}
-                                      onChange={(event) => handleWeeklyWindowChange(index, windowIndex, { ...window, start: event.target.value })}
-                                      className={`h-9 w-[120px] ${errorClass}`}
+                                      onChange={(value) => handleWeeklyWindowChange(index, windowIndex, { ...window, start: value ?? '' })}
+                                      className={`w-[120px] ${errorClass}`}
                                       disabled={usingRuleSet || isReadOnly}
+                                      showClearButton={false}
                                     />
                                     <span className="text-sm text-muted-foreground">-</span>
-                                    <Input
-                                      type="time"
+                                    <TimePicker
                                       value={window.end}
-                                      onChange={(event) => handleWeeklyWindowChange(index, windowIndex, { ...window, end: event.target.value })}
-                                      className={`h-9 w-[120px] ${errorClass}`}
+                                      onChange={(value) => handleWeeklyWindowChange(index, windowIndex, { ...window, end: value ?? '' })}
+                                      className={`w-[120px] ${errorClass}`}
                                       disabled={usingRuleSet || isReadOnly}
+                                      showClearButton={false}
                                     />
                                     <Button
                                       type="button"
@@ -1753,18 +1753,18 @@ export function AvailabilityRulesEditor({
                             return (
                               <div key={`${index}-${window.start}`} className="space-y-1">
                                 <div className="flex flex-wrap items-center gap-2">
-                                  <Input
-                                    type="time"
+                                  <TimePicker
                                     value={window.start}
-                                    onChange={(event) => handleEditorWindowChange(index, { ...window, start: event.target.value })}
-                                    className={`h-9 w-[120px] ${errorClass}`}
+                                    onChange={(value) => handleEditorWindowChange(index, { ...window, start: value ?? '' })}
+                                    className={`w-[120px] ${errorClass}`}
+                                    showClearButton={false}
                                   />
                                   <span className="text-sm text-muted-foreground">-</span>
-                                  <Input
-                                    type="time"
+                                  <TimePicker
                                     value={window.end}
-                                    onChange={(event) => handleEditorWindowChange(index, { ...window, end: event.target.value })}
-                                    className={`h-9 w-[120px] ${errorClass}`}
+                                    onChange={(value) => handleEditorWindowChange(index, { ...window, end: value ?? '' })}
+                                    className={`w-[120px] ${errorClass}`}
+                                    showClearButton={false}
                                   />
                                   <Button
                                     type="button"

package/src/modules/resources/components/ResourceCrudForm.tsx

@@ -131,7 +131,7 @@ export function useResourcesResourceFormConfig(options: {
         id: 'description',
         label: t('resources.resources.form.fields.description', 'Description'),
         type: 'richtext',
-        editor: 'uiw',
+        editor: 'html',
       },
       {
         id: 'resourceTypeId',

package/src/modules/resources/components/ResourceTypeCrudForm.tsx

@@ -78,7 +78,7 @@ export function ResourceTypeCrudForm({
 
   const fields = React.useMemo<CrudField[]>(() => [
     { id: 'name', label: t('resources.resourceTypes.form.name', 'Name'), type: 'text', required: true },
-    { id: 'description', label: t('resources.resourceTypes.form.description', 'Description'), type: 'richtext' },
+    { id: 'description', label: t('resources.resourceTypes.form.description', 'Description'), type: 'richtext', editor: 'html' },
     {
       id: 'appearance',
       label: t('resources.resourceTypes.form.appearance.label', 'Appearance'),

package/src/modules/sales/components/documents/ReturnDialog.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { CounterInput } from '@open-mercato/ui/primitives/counter-input'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -173,19 +174,21 @@ export function ReturnDialog({ open, orderId, lines, onClose, onSaved }: ReturnD
                           <Label className="sr-only" htmlFor={`return-qty-${line.id}`}>
                             {t('sales.returns.quantity', 'Quantity')}
                           </Label>
-                          <Input
+                          <CounterInput
                             id={`return-qty-${line.id}`}
-                            type="number"
-                            inputMode="numeric"
                             min={1}
                             max={line.available}
                             step={1}
                             placeholder="0"
-                            value={value}
-                            onChange={(e) => {
-                              const next = e.target.value.replace(/[^0-9]/g, '')
-                              setQuantities((prev) => ({ ...prev, [line.id]: next }))
+                            value={value === '' ? null : Number(value)}
+                            onChange={(next) => {
+                              setQuantities((prev) => ({
+                                ...prev,
+                                [line.id]: next === null ? '' : String(next),
+                              }))
                             }}
+                            decrementAriaLabel={t('sales.returns.qty.decrease', 'Decrease quantity')}
+                            incrementAriaLabel={t('sales.returns.qty.increase', 'Increase quantity')}
                           />
                         </div>
                       </div>

package/src/modules/sales/i18n/de.json

@@ -1297,6 +1297,8 @@
   "sales.returns.notes": "Notizen",
   "sales.returns.notes.placeholder": "Optional",
   "sales.returns.orderMissing": "Bestellung nicht gefunden.",
+  "sales.returns.qty.decrease": "Menge verringern",
+  "sales.returns.qty.increase": "Menge erhöhen",
   "sales.returns.quantity": "Menge",
   "sales.returns.quantityExceeded": "Es kann nicht mehr als die verbleibende Menge zurückgegeben werden.",
   "sales.returns.reason": "Grund",

package/src/modules/sales/i18n/en.json

@@ -1297,6 +1297,8 @@
   "sales.returns.notes": "Notes",
   "sales.returns.notes.placeholder": "Optional",
   "sales.returns.orderMissing": "Order not found.",
+  "sales.returns.qty.decrease": "Decrease quantity",
+  "sales.returns.qty.increase": "Increase quantity",
   "sales.returns.quantity": "Quantity",
   "sales.returns.quantityExceeded": "Cannot return more than the remaining quantity.",
   "sales.returns.reason": "Reason",

package/src/modules/sales/i18n/es.json

@@ -1297,6 +1297,8 @@
   "sales.returns.notes": "Notas",
   "sales.returns.notes.placeholder": "Opcional",
   "sales.returns.orderMissing": "Pedido no encontrado.",
+  "sales.returns.qty.decrease": "Disminuir cantidad",
+  "sales.returns.qty.increase": "Aumentar cantidad",
   "sales.returns.quantity": "Cantidad",
   "sales.returns.quantityExceeded": "No se puede devolver más que la cantidad restante.",
   "sales.returns.reason": "Motivo",

package/src/modules/sales/i18n/pl.json

@@ -1297,6 +1297,8 @@
   "sales.returns.notes": "Notatki",
   "sales.returns.notes.placeholder": "Opcjonalne",
   "sales.returns.orderMissing": "Nie znaleziono zamówienia.",
+  "sales.returns.qty.decrease": "Zmniejsz ilość",
+  "sales.returns.qty.increase": "Zwiększ ilość",
   "sales.returns.quantity": "Ilość",
   "sales.returns.quantityExceeded": "Nie można zwrócić więcej niż pozostała ilość.",
   "sales.returns.reason": "Powód",

package/src/modules/staff/backend/staff/profile/create/page.tsx

@@ -53,7 +53,7 @@ export default function StaffProfileCreatePage() {
 
   const fields = React.useMemo<CrudField[]>(() => ([
     { id: 'displayName', label: t('staff.teamMembers.form.fields.displayName', 'Display name'), type: 'text', required: true },
-    { id: 'description', label: t('staff.teamMembers.form.fields.description', 'Description'), type: 'richtext', editor: 'uiw' },
+    { id: 'description', label: t('staff.teamMembers.form.fields.description', 'Description'), type: 'richtext', editor: 'html' },
   ]), [t])
 
   const handleSubmit = React.useCallback(async (values: SelfProfileValues) => {

package/src/modules/staff/components/TeamForm.tsx

@@ -67,7 +67,7 @@ export function TeamForm(props: TeamFormProps) {
 
   const fields = React.useMemo<CrudField[]>(() => [
     { id: 'name', label: t('staff.teams.form.fields.name', 'Name'), type: 'text', required: true },
-    { id: 'description', label: t('staff.teams.form.fields.description', 'Description'), type: 'richtext' },
+    { id: 'description', label: t('staff.teams.form.fields.description', 'Description'), type: 'richtext', editor: 'html' },
     { id: 'isActive', label: t('staff.teams.form.fields.active', 'Active'), type: 'checkbox' },
   ], [t])
 

package/src/modules/staff/components/TeamMemberForm.tsx

@@ -343,7 +343,7 @@ export function TeamMemberForm(props: TeamMemberFormProps) {
         id: 'description',
         label: translate('staff.teamMembers.form.fields.description', 'Description'),
         type: 'richtext',
-        editor: 'uiw',
+        editor: 'html',
       },
       {
         id: 'roleIds',

package/src/modules/staff/components/TeamRoleForm.tsx

@@ -110,7 +110,7 @@ export function TeamRoleForm(props: TeamRoleFormProps) {
     }
     base.push(
       { id: 'name', label: t('staff.teamRoles.form.fields.name', 'Name'), type: 'text', required: true },
-      { id: 'description', label: t('staff.teamRoles.form.fields.description', 'Description'), type: 'richtext' },
+      { id: 'description', label: t('staff.teamRoles.form.fields.description', 'Description'), type: 'richtext', editor: 'html' },
       {
         id: 'appearance',
         label: t('staff.teamRoles.form.appearance.label', 'Appearance'),