@open-mercato/core 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/src/modules/customers/components/detail/TasksSection.tsx

@@ -431,7 +431,13 @@ export function TasksSection({
         ) : null}
 
         {!isInitialLoading && !hasTasks ? (
-          <TabEmptyState title={emptyState.title} />
+          <TabEmptyState title={emptyState.title}>
+            <Button asChild variant="outline" size="sm" className="mt-2">
+              <Link href="/backend/customer-tasks">
+                {t('customers.people.detail.tasks.viewAll', 'View all tasks')}
+              </Link>
+            </Button>
+          </TabEmptyState>
         ) : null}
 
         {!isInitialLoading && hasTasks ? (
@@ -565,13 +571,15 @@ export function TasksSection({
             ) : null}
           </div>
         ) : null}
-        <div className="flex justify-center">
-          <Button asChild variant="outline" size="sm">
-            <Link href="/backend/customer-tasks">
-              {t('customers.people.detail.tasks.viewAll', 'View all tasks')}
-            </Link>
-          </Button>
-        </div>
+        {!isInitialLoading && hasTasks ? (
+          <div className="flex justify-center">
+            <Button asChild variant="outline" size="sm">
+              <Link href="/backend/customer-tasks">
+                {t('customers.people.detail.tasks.viewAll', 'View all tasks')}
+              </Link>
+            </Button>
+          </div>
+        ) : null}
       </div>
 
       <TaskDialog

package/src/modules/customers/components/detail/schedule/DateTimeFields.tsx

@@ -1,14 +1,48 @@
 'use client'
 
 import * as React from 'react'
-import { Calendar, Clock, ChevronDown, Globe, Repeat } from 'lucide-react'
+import { Globe, Repeat } from 'lucide-react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+import { TimePicker } from '@open-mercato/ui/backend/inputs/TimePicker'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import type { ActivityType, ScheduleFieldId } from './fieldConfig'
 import { isVisible, getFieldLabel } from './fieldConfig'
 
-const DURATION_OPTIONS = [15, 30, 45, 60, 90, 120]
+function parseIsoDate(value: string): Date | null {
+  if (!value) return null
+  const parts = value.split('-')
+  if (parts.length !== 3) return null
+  const [y, m, d] = parts.map((p) => parseInt(p, 10))
+  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null
+  const date = new Date(y, m - 1, d)
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+function formatIsoDate(date: Date | null): string {
+  if (!date) return ''
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+const DURATION_OPTIONS: Array<{ value: number; key: string; fallback: string }> = [
+  { value: 15, key: 'customers.schedule.duration.option.15min', fallback: '15 min' },
+  { value: 30, key: 'customers.schedule.duration.option.30min', fallback: '30 min' },
+  { value: 45, key: 'customers.schedule.duration.option.45min', fallback: '45 min' },
+  { value: 60, key: 'customers.schedule.duration.option.1hour', fallback: '1 hour' },
+  { value: 90, key: 'customers.schedule.duration.option.1h30m', fallback: '1h 30m' },
+  { value: 120, key: 'customers.schedule.duration.option.2hours', fallback: '2 hours' },
+]
 const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 
 interface DateTimeFieldsProps {
@@ -73,30 +107,23 @@ export function DateTimeFields({
   return (
     <>
       {/* Date / Time / Duration */}
-      <div className="flex gap-3">
-        <div className="flex flex-[2] flex-col gap-1.5">
+      <div className="flex flex-wrap gap-3">
+        <div className="flex min-w-0 flex-[1.5] flex-col gap-1.5">
           <label className="text-overline font-semibold text-muted-foreground tracking-wider">
             {getFieldLabel(activityType, 'date', t, 'customers.schedule.date', 'Date')}
             <span aria-hidden="true" className="ml-1 text-status-error-foreground">*</span>
           </label>
-          <div
+          <DatePicker
+            value={parseIsoDate(date)}
+            onChange={(next) => setDate(formatIsoDate(next))}
+            placeholder={t('customers.schedule.date.placeholder', 'Pick a date')}
+            required
+            aria-describedby={dateMissing ? dateErrorId : undefined}
             className={cn(
-              'flex items-center gap-2 rounded-md border bg-background px-3 py-2.5',
-              dateMissing ? 'border-status-error-border' : 'border-border',
+              'h-10',
+              dateMissing && 'border-status-error-border',
             )}
-          >
-            <Calendar className="size-3.5 text-muted-foreground" />
-            <input
-              type="date"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-              required
-              aria-required="true"
-              aria-invalid={dateMissing ? true : undefined}
-              aria-describedby={dateMissing ? dateErrorId : undefined}
-              className="flex-1 bg-transparent text-sm text-foreground focus:outline-none"
-            />
-          </div>
+          />
           {dateMissing ? (
             <p id={dateErrorId} className="text-xs text-status-error-foreground">
               {t('customers.activities.errors.dateRequired', 'Date is required')}
@@ -104,30 +131,23 @@ export function DateTimeFields({
           ) : null}
         </div>
         {showStartTime && (
-          <div className="flex flex-1 flex-col gap-1.5">
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
             <label className="text-overline font-semibold text-muted-foreground tracking-wider">
               {getFieldLabel(activityType, 'startTime', t, 'customers.schedule.start', 'Start')}
               <span aria-hidden="true" className="ml-1 text-status-error-foreground">*</span>
             </label>
-            <div
+            <TimePicker
+              value={startTime || null}
+              onChange={(next) => setStartTime(next ?? '')}
+              disabled={allDay}
+              placeholder={t('customers.schedule.start.placeholder', 'Pick a time')}
               className={cn(
-                'flex items-center gap-2 rounded-md border bg-background px-3 py-2.5',
-                timeMissing ? 'border-status-error-border' : 'border-border',
+                'py-2.5',
+                timeMissing ? 'border-status-error-border' : undefined,
               )}
-            >
-              <Clock className="size-3.5 text-muted-foreground" />
-              <input
-                type="time"
-                value={startTime}
-                onChange={(e) => setStartTime(e.target.value)}
-                disabled={allDay}
-                required={!allDay}
-                aria-required={!allDay}
-                aria-invalid={timeMissing ? true : undefined}
-                aria-describedby={timeMissing ? timeErrorId : undefined}
-                className="flex-1 bg-transparent text-sm text-foreground focus:outline-none disabled:opacity-50"
-              />
-            </div>
+              showNowButton
+              showClearButton={false}
+            />
             {timeMissing ? (
               <p id={timeErrorId} className="text-xs text-status-error-foreground">
                 {t('customers.activities.errors.timeRequired', 'Time is required')}
@@ -136,23 +156,29 @@ export function DateTimeFields({
           </div>
         )}
         {showDuration && (
-          <div className="flex flex-1 flex-col gap-1.5">
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
             <label className="text-overline font-semibold text-muted-foreground tracking-wider">
               {getFieldLabel(activityType, 'duration', t, 'customers.schedule.duration', 'Duration')}
             </label>
-            <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
-              <select
-                value={duration}
-                onChange={(e) => setDuration(Number(e.target.value))}
-                disabled={allDay}
-                className="flex-1 appearance-none bg-transparent text-sm text-foreground focus:outline-none disabled:opacity-50"
-              >
-                {DURATION_OPTIONS.map((m) => (
-                  <option key={m} value={m}>{m} min</option>
+            <Select
+              value={String(duration)}
+              onValueChange={(next) => {
+                const parsed = Number(next)
+                if (Number.isFinite(parsed)) setDuration(parsed)
+              }}
+              disabled={allDay}
+            >
+              <SelectTrigger className="h-10">
+                <SelectValue placeholder={t('customers.schedule.duration.placeholder', 'Pick duration')} />
+              </SelectTrigger>
+              <SelectContent>
+                {DURATION_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={String(option.value)}>
+                    {t(option.key, option.fallback)}
+                  </SelectItem>
                 ))}
-              </select>
-              <ChevronDown className="size-3.5 text-muted-foreground" />
-            </div>
+              </SelectContent>
+            </Select>
           </div>
         )}
       </div>

package/src/modules/customers/components/linking/LinkEntityDialog.tsx

@@ -7,8 +7,10 @@ import {
   Loader2,
   Plus,
   Search,
+  SearchX,
   X,
 } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
@@ -631,9 +633,11 @@ export function LinkEntityDialog<TDetails = unknown, TLinkSettings = Record<stri
                     {t('customers.linking.searching', 'Searching…')}
                   </div>
                 ) : displayedResults.length === 0 ? (
-                  <div className="rounded-lg border border-dashed border-border/70 px-4 py-6 text-sm text-muted-foreground">
-                    {adapter.searchEmptyHint}
-                  </div>
+                  <EmptyState
+                    size="sm"
+                    icon={<SearchX className="h-8 w-8" aria-hidden="true" />}
+                    title={adapter.searchEmptyHint}
+                  />
                 ) : (
                   displayedResults.map((result) => {
                     const checked = draftSet.has(result.id)

package/src/modules/data_sync/backend/data-sync/page.tsx

@@ -31,7 +31,6 @@ import {
   ArrowRightLeft,
   Boxes,
   CalendarClock,
-  CircleAlert,
   Clock3,
   Gauge,
   Play,
@@ -964,17 +963,15 @@ export default function SyncRunsDashboardPage() {
 
             {selectedIntegration && !selectedIntegration.isEnabled ? (
               <Alert variant="warning">
-                <AlertDescription className="inline-flex items-center gap-2">
-                  <CircleAlert className="size-4" />
-                  <span>{t('integrations.detail.state.disabled', 'This integration is disabled. Enable it on the integration settings page before starting a sync.')}</span>
+                <AlertDescription>
+                  {t('integrations.detail.state.disabled', 'This integration is disabled. Enable it on the integration settings page before starting a sync.')}
                 </AlertDescription>
               </Alert>
             ) : null}
             {selectedIntegration && !selectedIntegration.hasCredentials ? (
               <Alert variant="warning">
-                <AlertDescription className="inline-flex items-center gap-2">
-                  <CircleAlert className="size-4" />
-                  <span>{t('integrations.detail.credentials.notConfigured', 'Credentials are not configured yet. Save the integration credentials before starting a sync.')}</span>
+                <AlertDescription>
+                  {t('integrations.detail.credentials.notConfigured', 'Credentials are not configured yet. Save the integration credentials before starting a sync.')}
                 </AlertDescription>
               </Alert>
             ) : null}

package/src/modules/data_sync/backend/data-sync/runs/[id]/page.tsx

@@ -6,6 +6,7 @@ import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Card, CardHeader, CardTitle, CardContent } from '@open-mercato/ui/primitives/card'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { LogList, type LogListEntry } from '@open-mercato/ui/backend/LogList'
 import { Progress } from '@open-mercato/ui/primitives/progress'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
@@ -78,12 +79,6 @@ const STATUS_STYLES: Record<string, string> = {
   paused: 'bg-orange-100 text-orange-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',
-}
-
 type SyncRunDetailPageProps = {
   params?: {
     id?: string | string[]
@@ -113,7 +108,6 @@ export default function SyncRunDetailPage({ params }: SyncRunDetailPageProps) {
   const [error, setError] = React.useState<string | null>(null)
   const [logs, setLogs] = React.useState<LogEntry[]>([])
   const [isLoadingLogs, setIsLoadingLogs] = React.useState(false)
-  const [expandedLogId, setExpandedLogId] = React.useState<string | null>(null)
 
   const resolveCurrentRunId = React.useCallback(() => {
     return runId ?? (
@@ -385,54 +379,25 @@ export default function SyncRunDetailPage({ params }: SyncRunDetailPageProps) {
           <CardContent>
             {isLoadingLogs ? (
               <div className="flex justify-center py-4"><Spinner /></div>
-            ) : logs.length === 0 ? (
-              <p className="text-muted-foreground text-sm">{t('data_sync.runs.detail.noLogs')}</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('data_sync.runs.detail.logs.time')}</th>
-                      <th className="px-4 py-2 text-left font-medium">{t('data_sync.runs.detail.logs.level')}</th>
-                      <th className="px-4 py-2 text-left font-medium">{t('data_sync.runs.detail.logs.message')}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {logs.map((log) => (
-                      <React.Fragment key={log.id}>
-                        <tr className="border-b last:border-0">
-                          <td className="px-4 py-2 text-muted-foreground whitespace-nowrap">
-                            {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"
-                              className="w-full text-left"
-                              onClick={() => setExpandedLogId((current) => current === log.id ? null : log.id)}
-                            >
-                              {log.message}
-                            </button>
-                          </td>
-                        </tr>
-                        {expandedLogId === log.id && log.payload ? (
-                          <tr className="border-b bg-muted/30 last:border-0">
-                            <td colSpan={3} className="px-4 py-4">
-                              <pre className="overflow-x-auto whitespace-pre-wrap rounded-md border bg-card p-3 text-xs">
-                                {JSON.stringify(log.payload, null, 2)}
-                              </pre>
-                            </td>
-                          </tr>
-                        ) : null}
-                      </React.Fragment>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+              <LogList
+                entries={logs.map<LogListEntry>((log) => ({
+                  id: log.id,
+                  time: new Date(log.createdAt).toLocaleString(),
+                  level: log.level,
+                  message: log.message,
+                  body: log.payload ? (
+                    <pre className="overflow-x-auto whitespace-pre-wrap rounded-md border bg-card p-3 text-xs">
+                      {JSON.stringify(log.payload, null, 2)}
+                    </pre>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      {t('data_sync.runs.detail.logs.noPayload', 'No payload recorded for this log entry.')}
+                    </p>
+                  ),
+                }))}
+                emptyMessage={t('data_sync.runs.detail.noLogs')}
+              />
             )}
           </CardContent>
         </Card>

package/src/modules/dictionaries/components/DictionariesManager.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react'
 import { useSearchParams } from 'next/navigation'
-import { Plus, Pencil, Trash2 } from 'lucide-react'
+import { Book, Plus, Pencil, Trash2 } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -324,9 +325,11 @@ export function DictionariesManager() {
             readOnly={selectedDictionary.isInherited}
           />
         ) : (
-          <div className="flex h-full flex-col items-center justify-center rounded border border-dashed p-10 text-center text-sm text-muted-foreground">
-            {t('dictionaries.config.entries.placeholder', 'Select a dictionary to manage its entries.')}
-          </div>
+          <EmptyState
+            icon={<Book className="h-8 w-8" aria-hidden="true" />}
+            title={t('dictionaries.config.entries.placeholder', 'Select a dictionary to manage its entries.')}
+            className="h-full"
+          />
         )}
       </div>