@open-mercato/core 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/modules/integrations/backend/integrations/[id]/page.tsx

@@ -35,7 +35,9 @@ import {
   type IntegrationDetailBuiltInTab,
 } from '@open-mercato/shared/modules/integrations/types'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
-import { Activity, AlertTriangle, Bell, Calendar, CheckCircle2, ChevronDown, ChevronRight, CreditCard, FileText, HardDrive, Key, MessageSquare, RefreshCw, Settings, Truck, Webhook, XCircle, Zap } from 'lucide-react'
+import { LogList, type LogListEntry } from '@open-mercato/ui/backend/LogList'
+import { Activity, AlertTriangle, Bell, Calendar, CheckCircle2, CreditCard, FileText, FileX, HardDrive, Key, MessageSquare, RefreshCw, Settings, Truck, Webhook, XCircle, Zap } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { IntegrationScheduleTab } from '../../../../data_sync/components/IntegrationScheduleTab'
 import {
   buildIntegrationDetailInjectedTabs,
@@ -129,12 +131,6 @@ type HealthCheckResponse = {
   latencyMs: number | null
 }
 
-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',
-}
-
 const HEALTH_STATUS_STYLES: Record<string, string> = {
   healthy: 'bg-green-100 text-green-800',
   degraded: 'bg-yellow-100 text-yellow-800',
@@ -337,7 +333,6 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
   const [logs, setLogs] = React.useState<LogEntry[]>([])
   const [logLevel, setLogLevel] = React.useState<string>('')
   const [isLoadingLogs, setIsLoadingLogs] = React.useState(false)
-  const [expandedLogId, setExpandedLogId] = React.useState<string | null>(null)
 
   const [isCheckingHealth, setIsCheckingHealth] = React.useState(false)
   const [isTogglingState, setIsTogglingState] = React.useState(false)
@@ -522,9 +517,6 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
   React.useEffect(() => { void loadDetail() }, [loadDetail])
   React.useEffect(() => { void loadCredentials() }, [loadCredentials])
   React.useEffect(() => { void loadLogs() }, [loadLogs])
-  React.useEffect(() => {
-    setExpandedLogId((current) => (current && logs.some((log) => log.id === current) ? current : null))
-  }, [logs])
 
   const handleToggleState = React.useCallback(async (enabled: boolean) => {
     const currentIntegrationId = resolveCurrentIntegrationId()
@@ -1210,144 +1202,107 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
             </div>
             {isLoadingLogs ? (
               <div className="flex justify-center py-8"><Spinner /></div>
-            ) : logs.length === 0 ? (
-              <p className="py-4 text-sm text-muted-foreground">{t('integrations.detail.logs.empty')}</p>
             ) : (
-              <div className="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('integrations.detail.logs.columns.time')}</th>
-                      <th className="px-4 py-2 text-left font-medium">{t('integrations.detail.logs.columns.level')}</th>
-                      <th className="px-4 py-2 text-left font-medium">{t('integrations.detail.logs.columns.message')}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {logs.map((log) => {
-                      const isExpanded = expandedLogId === log.id
-                      const metadataEntries = [
-                        ['Time', new Date(log.createdAt).toLocaleString()],
-                        ['Level', log.level],
-                        ['Code', log.code ?? null],
-                        ['Run ID', log.runId ?? null],
-                        ['Entity Type', log.scopeEntityType ?? null],
-                        ['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">
-                              {new Date(log.createdAt).toLocaleString()}
-                            </td>
-                            <td className="px-4 py-2">
-                              <Badge variant="secondary" className={LOG_LEVEL_STYLES[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">
-                                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
-                                    <div className="space-y-4">
-                                      <section className="space-y-3">
-                                        <div>
-                                          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                                            {t('integrations.detail.logs.details.summary', 'Summary')}
-                                          </p>
-                                          <p className="mt-1 text-sm font-medium">{log.message}</p>
-                                        </div>
-                                        {metadataEntries.length > 0 ? (
-                                          <dl className="grid gap-3 sm:grid-cols-2">
-                                            {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}
-                                      </section>
-
-                                      {inlineEntries.length > 0 ? (
-                                        <section className="space-y-3">
-                                          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                                            {t('integrations.detail.logs.details.fields', 'Fields')}
-                                          </p>
-                                          <dl className="grid gap-3 sm:grid-cols-2">
-                                            {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>
-                                        </section>
-                                      ) : null}
-                                    </div>
-
-                                    <div className="space-y-3">
-                                      {nestedEntries.map(([key, value]) => (
-                                        <JsonDisplay
-                                          key={key}
-                                          data={value}
-                                          title={formatLogDetailLabel(key)}
-                                          defaultExpanded
-                                          maxInitialDepth={1}
-                                          theme="dark"
-                                          maxHeight="16rem"
-                                          className="p-4"
-                                        />
-                                      ))}
-                                      {log.payload && nestedEntries.length === 0 ? (
-                                        <JsonDisplay
-                                          data={log.payload}
-                                          title={t('integrations.detail.logs.details.payload', 'Payload')}
-                                          defaultExpanded
-                                          maxInitialDepth={1}
-                                          theme="dark"
-                                          maxHeight="16rem"
-                                          className="p-4"
-                                        />
-                                      ) : null}
-                                      {!log.payload ? (
-                                        <div className="rounded-lg border border-dashed px-4 py-6 text-sm text-muted-foreground">
-                                          {t('integrations.detail.logs.details.noPayload', 'No structured payload was stored for this log entry.')}
-                                        </div>
-                                      ) : null}
-                                    </div>
+              <LogList
+                entries={logs.map<LogListEntry>((log) => {
+                  const metadataEntries = [
+                    ['Time', new Date(log.createdAt).toLocaleString()],
+                    ['Level', log.level],
+                    ['Code', log.code ?? null],
+                    ['Run ID', log.runId ?? null],
+                    ['Entity Type', log.scopeEntityType ?? null],
+                    ['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: new Date(log.createdAt).toLocaleString(),
+                    level: log.level,
+                    message: log.message,
+                    body: (
+                      <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
+                        <div className="space-y-4">
+                          <section className="space-y-3">
+                            <div>
+                              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                {t('integrations.detail.logs.details.summary', 'Summary')}
+                              </p>
+                              <p className="mt-1 text-sm font-medium">{log.message}</p>
+                            </div>
+                            {metadataEntries.length > 0 ? (
+                              <dl className="grid gap-3 sm:grid-cols-2">
+                                {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}
+                          </section>
+
+                          {inlineEntries.length > 0 ? (
+                            <section className="space-y-3">
+                              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                {t('integrations.detail.logs.details.fields', 'Fields')}
+                              </p>
+                              <dl className="grid gap-3 sm:grid-cols-2">
+                                {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>
-                                </div>
-                              </td>
-                            </tr>
+                                ))}
+                              </dl>
+                            </section>
                           ) : null}
-                        </React.Fragment>
-                      )
-                    })}
-                  </tbody>
-                </table>
-              </div>
+                        </div>
+
+                        <div className="space-y-3">
+                          {nestedEntries.map(([key, value]) => (
+                            <JsonDisplay
+                              key={key}
+                              data={value}
+                              title={formatLogDetailLabel(key)}
+                              defaultExpanded
+                              maxInitialDepth={1}
+                              theme="dark"
+                              maxHeight="16rem"
+                              className="p-4"
+                            />
+                          ))}
+                          {log.payload && nestedEntries.length === 0 ? (
+                            <JsonDisplay
+                              data={log.payload}
+                              title={t('integrations.detail.logs.details.payload', 'Payload')}
+                              defaultExpanded
+                              maxInitialDepth={1}
+                              theme="dark"
+                              maxHeight="16rem"
+                              className="p-4"
+                            />
+                          ) : null}
+                          {!log.payload ? (
+                            <EmptyState
+                              size="sm"
+                              icon={<FileX className="h-8 w-8" aria-hidden="true" />}
+                              title={t('integrations.detail.logs.details.noPayload', 'No structured payload was stored for this log entry.')}
+                            />
+                          ) : null}
+                        </div>
+                      </div>
+                    ),
+                  }
+                })}
+                emptyMessage={t('integrations.detail.logs.empty')}
+              />
             )}
             </TabsContent>
           ) : null}

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'),