@hed-hog/contact 0.0.300 → 0.0.302

package/hedhog/frontend/app/activities/_components/activity-detail-sheet.tsx.ejs

@@ -18,7 +18,11 @@ import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { CalendarClock, CheckCircle2, Loader2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
-import type { ActivityDetail, ActivityPriority, ActivityStatus } from './activity-types';
+import type {
+  ActivityDetail,
+  ActivityPriority,
+  ActivityStatus,
+} from './activity-types';
 
 function getStatusBadgeClass(status: ActivityStatus) {
   if (status === 'completed') {
@@ -44,13 +48,7 @@ function getPriorityBadgeClass(priority: ActivityPriority) {
   return 'border-slate-500/25 bg-slate-500/10 text-slate-700';
 }
 
-function DetailRow({
-  label,
-  value,
-}: {
-  label: string;
-  value: ReactNode;
-}) {
+function DetailRow({ label, value }: { label: string; value: ReactNode }) {
   return (
     <div className="grid gap-1 sm:grid-cols-[140px_1fr] sm:items-start sm:gap-3">
       <span className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
@@ -79,8 +77,17 @@ export function ActivityDetailSheet({
   const t = useTranslations('contact.CrmActivities');
   const { request, currentLocaleCode, getSettingValue } = useApp();
 
-  const { data: activity, isLoading, isFetching } = useQuery<ActivityDetail | null>({
-    queryKey: ['contact-activity-detail', activityId, refreshKey, currentLocaleCode],
+  const {
+    data: activity,
+    isLoading,
+    isFetching,
+  } = useQuery<ActivityDetail | null>({
+    queryKey: [
+      'contact-activity-detail',
+      activityId,
+      refreshKey,
+      currentLocaleCode,
+    ],
     enabled: open && !!activityId,
     queryFn: async () => {
       if (!activityId) {
@@ -104,7 +111,7 @@ export function ActivityDetailSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex w-full flex-col sm:max-w-xl">
+      <SheetContent className="flex w-full flex-col sm:max-w-xl px-4">
         <SheetHeader className="text-left">
           <SheetTitle>{t('detail.title')}</SheetTitle>
           <SheetDescription>{t('detail.description')}</SheetDescription>
@@ -139,7 +146,10 @@ export function ActivityDetailSheet({
                   </h2>
                   <Badge
                     variant="outline"
-                    className={cn('border', getStatusBadgeClass(activity.status))}
+                    className={cn(
+                      'border',
+                      getStatusBadgeClass(activity.status)
+                    )}
                   >
                     {t(`status.${activity.status}`)}
                   </Badge>
@@ -162,7 +172,10 @@ export function ActivityDetailSheet({
               <Separator />
 
               <div className="space-y-4">
-                <DetailRow label={t('detail.person')} value={activity.person.name} />
+                <DetailRow
+                  label={t('detail.person')}
+                  value={activity.person.name}
+                />
                 <DetailRow
                   label={t('detail.personType')}
                   value={t(`detail.personTypeValue.${activity.person.type}`)}
@@ -174,7 +187,10 @@ export function ActivityDetailSheet({
                   />
                 ) : null}
                 <DetailRow label={t('detail.owner')} value={ownerName} />
-                <DetailRow label={t('detail.type')} value={t(`type.${activity.type}`)} />
+                <DetailRow
+                  label={t('detail.type')}
+                  value={t(`type.${activity.type}`)}
+                />
                 <DetailRow
                   label={t('detail.source')}
                   value={t(`detail.sourceKind.${activity.source_kind}`)}
@@ -207,10 +223,15 @@ export function ActivityDetailSheet({
                       : t('detail.notCompleted')
                   }
                 />
-                <DetailRow label={t('detail.createdBy')} value={createdByName} />
+                <DetailRow
+                  label={t('detail.createdBy')}
+                  value={createdByName}
+                />
                 <DetailRow
                   label={t('detail.completedBy')}
-                  value={isCompleted ? completedByName : t('detail.notCompleted')}
+                  value={
+                    isCompleted ? completedByName : t('detail.notCompleted')
+                  }
                 />
               </div>
             </>
@@ -218,7 +239,11 @@ export function ActivityDetailSheet({
         </div>
 
         <SheetFooter className="border-t pt-4">
-          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
             {t('detail.close')}
           </Button>
           <Button

package/hedhog/frontend/app/activities/_components/activity-types.ts.ejs

@@ -9,7 +9,7 @@ export type ActivityType =
 export type ActivityPriority = 'high' | 'medium' | 'low';
 export type ActivityStatus = 'pending' | 'overdue' | 'completed';
 export type ActivitySourceKind = 'manual' | 'followup' | 'interaction';
-export type ActivityViewMode = 'table' | 'timeline';
+export type ActivityViewMode = 'table' | 'cards';
 
 export type PaginatedResult<T> = {
   data: T[];

package/hedhog/frontend/app/activities/page.tsx.ejs

@@ -69,14 +69,18 @@ function getTypeIcon(type: ActivityType) {
 }
 
 function getStatusBadgeClass(status: ActivityStatus) {
-  if (status === 'completed') return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
-  if (status === 'overdue') return 'border-red-500/25 bg-red-500/10 text-red-700';
+  if (status === 'completed')
+    return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
+  if (status === 'overdue')
+    return 'border-red-500/25 bg-red-500/10 text-red-700';
   return 'border-amber-500/25 bg-amber-500/10 text-amber-700';
 }
 
 function getPriorityBadgeClass(priority: ActivityPriority) {
-  if (priority === 'high') return 'border-red-500/25 bg-red-500/10 text-red-700';
-  if (priority === 'medium') return 'border-sky-500/25 bg-sky-500/10 text-sky-700';
+  if (priority === 'high')
+    return 'border-red-500/25 bg-red-500/10 text-red-700';
+  if (priority === 'medium')
+    return 'border-sky-500/25 bg-sky-500/10 text-sky-700';
   return 'border-slate-500/25 bg-slate-500/10 text-slate-700';
 }
 
@@ -93,38 +97,47 @@ export default function CrmActivitiesPage() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(12);
   const [viewMode, setViewMode] = useState<ActivityViewMode>('table');
-  const [selectedActivityId, setSelectedActivityId] = useState<number | null>(null);
+  const [selectedActivityId, setSelectedActivityId] = useState<number | null>(
+    null
+  );
   const [detailOpen, setDetailOpen] = useState(false);
-  const [completingActivityId, setCompletingActivityId] = useState<number | null>(null);
+  const [completingActivityId, setCompletingActivityId] = useState<
+    number | null
+  >(null);
   const [detailRefreshKey, setDetailRefreshKey] = useState(0);
 
   useEffect(() => {
-    const timeout = setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
+    const timeout = setTimeout(
+      () => setDebouncedSearch(searchInput.trim()),
+      300
+    );
     return () => clearTimeout(timeout);
   }, [searchInput]);
 
   useEffect(() => {
     try {
       const saved = window.localStorage.getItem(ACTIVITIES_VIEW_STORAGE_KEY);
-      if (saved === 'table' || saved === 'timeline') setViewMode(saved);
+      if (saved === 'table' || saved === 'cards') setViewMode(saved);
     } catch {
       // Ignore storage read failures.
     }
   }, []);
 
-  const { data: stats = { total: 0, pending: 0, overdue: 0, completed: 0 }, refetch: refetchStats } =
-    useQuery<ActivityStats>({
-      queryKey: ['contact-activities-stats', currentLocaleCode],
-      queryFn: async () => {
-        const response = await request<ActivityStats>({
-          url: '/person/activities/stats',
-          method: 'GET',
-        });
-        return response.data;
-      },
-      placeholderData: (previous) =>
-        previous ?? { total: 0, pending: 0, overdue: 0, completed: 0 },
-    });
+  const {
+    data: stats = { total: 0, pending: 0, overdue: 0, completed: 0 },
+    refetch: refetchStats,
+  } = useQuery<ActivityStats>({
+    queryKey: ['contact-activities-stats', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<ActivityStats>({
+        url: '/person/activities/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? { total: 0, pending: 0, overdue: 0, completed: 0 },
+  });
 
   const {
     data: paginate = {
@@ -233,14 +246,42 @@ export default function CrmActivitiesPage() {
   ];
 
   const statsCards = [
-    { key: 'total', title: t('stats.total'), value: stats.total, icon: Activity, accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent', iconContainerClassName: 'bg-violet-500/10 text-violet-700' },
-    { key: 'pending', title: t('stats.pending'), value: stats.pending, icon: Clock3, accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent', iconContainerClassName: 'bg-amber-500/10 text-amber-700' },
-    { key: 'overdue', title: t('stats.overdue'), value: stats.overdue, icon: CircleAlert, accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent', iconContainerClassName: 'bg-red-500/10 text-red-700' },
-    { key: 'completed', title: t('stats.completed'), value: stats.completed, icon: CalendarCheck, accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent', iconContainerClassName: 'bg-emerald-500/10 text-emerald-700' },
+    {
+      key: 'total',
+      title: t('stats.total'),
+      value: stats.total,
+      icon: Activity,
+      accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+      iconContainerClassName: 'bg-violet-500/10 text-violet-700',
+    },
+    {
+      key: 'pending',
+      title: t('stats.pending'),
+      value: stats.pending,
+      icon: Clock3,
+      accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+      iconContainerClassName: 'bg-amber-500/10 text-amber-700',
+    },
+    {
+      key: 'overdue',
+      title: t('stats.overdue'),
+      value: stats.overdue,
+      icon: CircleAlert,
+      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
+      iconContainerClassName: 'bg-red-500/10 text-red-700',
+    },
+    {
+      key: 'completed',
+      title: t('stats.completed'),
+      value: stats.completed,
+      icon: CalendarCheck,
+      accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+    },
   ];
 
   const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'timeline') return;
+    if (value !== 'table' && value !== 'cards') return;
     setViewMode(value);
     try {
       window.localStorage.setItem(ACTIVITIES_VIEW_STORAGE_KEY, value);
@@ -252,7 +293,10 @@ export default function CrmActivitiesPage() {
   const handleComplete = async (activityId: number) => {
     setCompletingActivityId(activityId);
     try {
-      await request({ url: `/person/activities/${activityId}/complete`, method: 'POST' });
+      await request({
+        url: `/person/activities/${activityId}/complete`,
+        method: 'POST',
+      });
       setDetailRefreshKey((current) => current + 1);
       await Promise.all([refetchActivities(), refetchStats()]);
       toast.success(t('toasts.markedAsCompleted'));
@@ -276,31 +320,54 @@ export default function CrmActivitiesPage() {
       />
 
       <div className="space-y-6">
-        <KpiCardsGrid items={statsCards} />
+        <KpiCardsGrid items={statsCards} className="mb-4" />
 
-        <SearchBar
-          searchQuery={searchInput}
-          onSearchChange={(value) => {
-            setSearchInput(value);
-            setPage(1);
-          }}
-          onSearch={() => setPage(1)}
-          placeholder={t('filters.searchPlaceholder')}
-          controls={controls}
-        />
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-center mb-4">
+          <div className="flex-1">
+            <SearchBar
+              searchQuery={searchInput}
+              onSearchChange={(value) => {
+                setSearchInput(value);
+                setPage(1);
+              }}
+              onSearch={() => setPage(1)}
+              placeholder={t('filters.searchPlaceholder')}
+              controls={controls}
+            />
+          </div>
 
-        <div className="flex items-center justify-end gap-3">
-          <span className="text-xs font-medium text-muted-foreground">{t('viewMode')}</span>
-          <ToggleGroup type="single" value={viewMode} onValueChange={handleViewModeChange} variant="outline" size="sm" aria-label={t('viewMode')}>
-            <ToggleGroupItem value="table" className="gap-1.5 px-2.5" aria-label={t('viewModeTable')}>
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTable')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="timeline" className="gap-1.5 px-2.5" aria-label={t('viewModeTimeline')}>
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTimeline')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+            <div className="flex items-center justify-between gap-3 sm:justify-start">
+              <span className="text-xs font-medium text-muted-foreground">
+                {t('viewMode')}
+              </span>
+              <ToggleGroup
+                type="single"
+                value={viewMode}
+                onValueChange={handleViewModeChange}
+                variant="outline"
+                size="sm"
+                aria-label={t('viewMode')}
+              >
+                <ToggleGroupItem
+                  value="table"
+                  className="gap-1.5 px-2.5"
+                  aria-label={t('viewModeTable')}
+                >
+                  <List className="h-4 w-4" />
+                  <span className="hidden sm:inline">{t('viewModeTable')}</span>
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  value="cards"
+                  className="gap-1.5 px-2.5"
+                  aria-label={t('viewModeCards')}
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                  <span className="hidden sm:inline">{t('viewModeCards')}</span>
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </div>
+          </div>
         </div>
 
         {isLoading ? (
@@ -335,7 +402,9 @@ export default function CrmActivitiesPage() {
                   <TableHead>{t('table.dueAt')}</TableHead>
                   <TableHead>{t('table.status')}</TableHead>
                   <TableHead>{t('table.priority')}</TableHead>
-                  <TableHead className="text-right">{t('table.actions')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.actions')}
+                  </TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -347,30 +416,97 @@ export default function CrmActivitiesPage() {
                   return (
                     <TableRow key={item.id}>
                       <TableCell>
-                        <div className="min-w-[260px] space-y-1">
+                        <div className="min-w-65 space-y-1">
                           <div className="flex items-center gap-2">
                             <TypeIcon className="h-4 w-4 text-muted-foreground" />
                             <p className="font-medium">{item.subject}</p>
                           </div>
-                          <p className="line-clamp-2 text-xs text-muted-foreground">{item.notes || t('detail.emptyNotes')}</p>
+                          <p className="line-clamp-2 text-xs text-muted-foreground">
+                            {item.notes || t('detail.emptyNotes')}
+                          </p>
                           <div className="text-[11px] text-muted-foreground">
-                            {t('table.createdAt')}: {formatDateTime(item.created_at, getSettingValue, currentLocaleCode)}
+                            {t('table.createdAt')}:{' '}
+                            {formatDateTime(
+                              item.created_at,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
                           </div>
                         </div>
                       </TableCell>
-                      <TableCell><div className="inline-flex items-center gap-2"><Users className="h-3.5 w-3.5 text-muted-foreground" /><span>{item.person.name}</span></div></TableCell>
-                      <TableCell><div className="inline-flex items-center gap-2"><User className="h-3.5 w-3.5 text-muted-foreground" /><span>{item.owner_user?.name || t('unassignedOwner')}</span></div></TableCell>
-                      <TableCell>{formatDateTime(item.due_at, getSettingValue, currentLocaleCode)}</TableCell>
-                      <TableCell><Badge variant="outline" className={cn('border', getStatusBadgeClass(item.status))}>{t(`status.${item.status}`)}</Badge></TableCell>
-                      <TableCell><Badge variant="outline" className={cn('border', getPriorityBadgeClass(item.priority))}>{t(`priority.${item.priority}`)}</Badge></TableCell>
+                      <TableCell>
+                        <div className="inline-flex items-center gap-2">
+                          <Users className="h-3.5 w-3.5 text-muted-foreground" />
+                          <span>{item.person.name}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="inline-flex items-center gap-2">
+                          <User className="h-3.5 w-3.5 text-muted-foreground" />
+                          <span>
+                            {item.owner_user?.name || t('unassignedOwner')}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {formatDateTime(
+                          item.due_at,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'border',
+                            getStatusBadgeClass(item.status)
+                          )}
+                        >
+                          {t(`status.${item.status}`)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'border',
+                            getPriorityBadgeClass(item.priority)
+                          )}
+                        >
+                          {t(`priority.${item.priority}`)}
+                        </Badge>
+                      </TableCell>
                       <TableCell className="text-right">
                         <div className="inline-flex items-center gap-2">
-                          <Button type="button" variant="outline" size="sm" onClick={() => { setSelectedActivityId(item.id); setDetailOpen(true); }}>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              setSelectedActivityId(item.id);
+                              setDetailOpen(true);
+                            }}
+                          >
                             <Eye className="mr-2 h-3.5 w-3.5" />
                             {t('actions.view')}
                           </Button>
-                          <Button type="button" variant="outline" size="sm" onClick={() => handleComplete(item.id)} disabled={isCompleted || isCompleting} className={cn((isCompleted || isCompleting) && 'cursor-not-allowed opacity-60')}>
-                            {isCompleting ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="mr-2 h-3.5 w-3.5" />}
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleComplete(item.id)}
+                            disabled={isCompleted || isCompleting}
+                            className={cn(
+                              (isCompleted || isCompleting) &&
+                                'cursor-not-allowed opacity-60'
+                            )}
+                          >
+                            {isCompleting ? (
+                              <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                            ) : (
+                              <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
+                            )}
                             {t('actions.complete')}
                           </Button>
                         </div>
@@ -382,51 +518,129 @@ export default function CrmActivitiesPage() {
             </Table>
           </div>
         ) : (
-          <div className="space-y-4">
-            <div className="rounded-md border border-dashed border-border/70 bg-muted/20 px-4 py-3 text-sm text-muted-foreground">{t('timeline.description')}</div>
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {paginate.data.map((item) => {
-                const TypeIcon = getTypeIcon(item.type);
-                const isCompleted = item.status === 'completed';
-                const isCompleting = completingActivityId === item.id;
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {paginate.data.map((item) => {
+              const TypeIcon = getTypeIcon(item.type);
+              const isCompleted = item.status === 'completed';
+              const isCompleting = completingActivityId === item.id;
 
-                return (
-                  <Card key={item.id} className="h-full overflow-hidden border-border/70 py-0">
-                    <CardContent className="space-y-3 p-4">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="min-w-0 space-y-1">
-                          <div className="flex items-center gap-2">
-                            <TypeIcon className="h-4 w-4 text-muted-foreground" />
-                            <p className="line-clamp-2 text-sm font-semibold">{item.subject}</p>
-                          </div>
-                          <p className="line-clamp-2 text-xs text-muted-foreground">{item.notes || t('detail.emptyNotes')}</p>
+              return (
+                <Card
+                  key={item.id}
+                  className="h-full overflow-hidden border-border/70 py-0"
+                >
+                  <CardContent className="space-y-3 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 space-y-1">
+                        <div className="flex items-center gap-2">
+                          <TypeIcon className="h-4 w-4 text-muted-foreground" />
+                          <p className="line-clamp-2 text-sm font-semibold">
+                            {item.subject}
+                          </p>
                         </div>
-                        <Badge variant="outline" className={cn('shrink-0 border', getStatusBadgeClass(item.status))}>{t(`status.${item.status}`)}</Badge>
+                        <p className="line-clamp-2 text-xs text-muted-foreground">
+                          {item.notes || t('detail.emptyNotes')}
+                        </p>
+                      </div>
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'shrink-0 border',
+                          getStatusBadgeClass(item.status)
+                        )}
+                      >
+                        {t(`status.${item.status}`)}
+                      </Badge>
+                    </div>
+                    <div className="grid gap-2 rounded-md border border-border/70 bg-background px-3 py-2 text-xs">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-muted-foreground">
+                          {t('timeline.dueLabel')}
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {formatDateTime(
+                            item.due_at,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </span>
                       </div>
-                      <div className="grid gap-2 rounded-md border border-border/70 bg-background px-3 py-2 text-xs">
-                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('timeline.dueLabel')}</span><span className="font-medium text-foreground">{formatDateTime(item.due_at, getSettingValue, currentLocaleCode)}</span></div>
-                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('timeline.createdLabel')}</span><span className="font-medium text-foreground">{formatDateTime(item.created_at, getSettingValue, currentLocaleCode)}</span></div>
-                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('table.person')}</span><span className="truncate font-medium text-foreground">{item.person.name}</span></div>
-                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('table.owner')}</span><span className="truncate font-medium text-foreground">{item.owner_user?.name || t('unassignedOwner')}</span></div>
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-muted-foreground">
+                          {t('timeline.createdLabel')}
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {formatDateTime(
+                            item.created_at,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </span>
                       </div>
                       <div className="flex items-center justify-between gap-2">
-                        <Badge variant="outline" className={cn('border', getPriorityBadgeClass(item.priority))}>{t(`priority.${item.priority}`)}</Badge>
-                        <div className="inline-flex items-center gap-2">
-                          <Button type="button" variant="outline" size="sm" onClick={() => { setSelectedActivityId(item.id); setDetailOpen(true); }}>
-                            <Eye className="mr-2 h-3.5 w-3.5" />
-                            {t('actions.view')}
-                          </Button>
-                          <Button type="button" variant="outline" size="sm" onClick={() => handleComplete(item.id)} disabled={isCompleted || isCompleting} className={cn((isCompleted || isCompleting) && 'cursor-not-allowed opacity-60')}>
-                            {isCompleting ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="mr-2 h-3.5 w-3.5" />}
-                            {t('actions.complete')}
-                          </Button>
-                        </div>
+                        <span className="text-muted-foreground">
+                          {t('table.person')}
+                        </span>
+                        <span className="truncate font-medium text-foreground">
+                          {item.person.name}
+                        </span>
                       </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-muted-foreground">
+                          {t('table.owner')}
+                        </span>
+                        <span className="truncate font-medium text-foreground">
+                          {item.owner_user?.name || t('unassignedOwner')}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'border',
+                          getPriorityBadgeClass(item.priority)
+                        )}
+                      >
+                        {t(`priority.${item.priority}`)}
+                      </Badge>
+                      <div className="inline-flex items-center gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedActivityId(item.id);
+                            setDetailOpen(true);
+                          }}
+                        >
+                          <Eye className="mr-2 h-3.5 w-3.5" />
+                          {t('actions.view')}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleComplete(item.id)}
+                          disabled={isCompleted || isCompleting}
+                          className={cn(
+                            (isCompleted || isCompleting) &&
+                              'cursor-not-allowed opacity-60'
+                          )}
+                        >
+                          {isCompleting ? (
+                            <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
+                          )}
+                          {t('actions.complete')}
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
         )}