@hed-hog/contact 0.0.293 → 0.0.295

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

@@ -0,0 +1,240 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+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';
+
+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';
+  }
+
+  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';
+  }
+
+  return 'border-slate-500/25 bg-slate-500/10 text-slate-700';
+}
+
+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">
+        {label}
+      </span>
+      <div className="text-sm text-foreground">{value}</div>
+    </div>
+  );
+}
+
+export function ActivityDetailSheet({
+  activityId,
+  open,
+  refreshKey,
+  isCompleting,
+  onOpenChange,
+  onComplete,
+}: {
+  activityId: number | null;
+  open: boolean;
+  refreshKey: number;
+  isCompleting: boolean;
+  onOpenChange: (open: boolean) => void;
+  onComplete: (activityId: number) => Promise<void>;
+}) {
+  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],
+    enabled: open && !!activityId,
+    queryFn: async () => {
+      if (!activityId) {
+        return null;
+      }
+
+      const response = await request<ActivityDetail>({
+        url: `/person/activities/${activityId}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+  });
+
+  const ownerName = activity?.owner_user?.name || t('unassignedOwner');
+  const createdByName = activity?.created_by_user?.name || t('unassignedOwner');
+  const completedByName =
+    activity?.completed_by_user?.name || t('unassignedOwner');
+  const isCompleted = activity?.status === 'completed';
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex w-full flex-col sm:max-w-xl">
+        <SheetHeader className="text-left">
+          <SheetTitle>{t('detail.title')}</SheetTitle>
+          <SheetDescription>{t('detail.description')}</SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 space-y-5 overflow-y-auto py-4">
+          {isLoading || isFetching ? (
+            <div className="space-y-3">
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-24 w-full" />
+              <Skeleton className="h-20 w-full" />
+            </div>
+          ) : !activity ? (
+            <div className="rounded-md border border-dashed border-slate-300 px-6 py-10 text-center">
+              <div className="flex flex-col items-center gap-3 text-muted-foreground">
+                <CalendarClock className="h-10 w-10" />
+                <div>
+                  <h3 className="text-base font-semibold text-foreground">
+                    {t('empty.title')}
+                  </h3>
+                  <p className="text-sm">{t('empty.description')}</p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-start gap-2">
+                  <h2 className="text-lg font-semibold leading-tight text-foreground">
+                    {activity.subject}
+                  </h2>
+                  <Badge
+                    variant="outline"
+                    className={cn('border', getStatusBadgeClass(activity.status))}
+                  >
+                    {t(`status.${activity.status}`)}
+                  </Badge>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'border',
+                      getPriorityBadgeClass(activity.priority)
+                    )}
+                  >
+                    {t(`priority.${activity.priority}`)}
+                  </Badge>
+                </div>
+
+                <p className="text-sm text-muted-foreground">
+                  {activity.notes || t('detail.emptyNotes')}
+                </p>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-4">
+                <DetailRow label={t('detail.person')} value={activity.person.name} />
+                <DetailRow
+                  label={t('detail.personType')}
+                  value={t(`detail.personTypeValue.${activity.person.type}`)}
+                />
+                {activity.person.trade_name ? (
+                  <DetailRow
+                    label={t('detail.tradeName')}
+                    value={activity.person.trade_name}
+                  />
+                ) : null}
+                <DetailRow label={t('detail.owner')} value={ownerName} />
+                <DetailRow label={t('detail.type')} value={t(`type.${activity.type}`)} />
+                <DetailRow
+                  label={t('detail.source')}
+                  value={t(`detail.sourceKind.${activity.source_kind}`)}
+                />
+                <DetailRow
+                  label={t('detail.dueAt')}
+                  value={formatDateTime(
+                    activity.due_at,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                />
+                <DetailRow
+                  label={t('detail.createdAt')}
+                  value={formatDateTime(
+                    activity.created_at,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                />
+                <DetailRow
+                  label={t('detail.completedAt')}
+                  value={
+                    activity.completed_at
+                      ? formatDateTime(
+                          activity.completed_at,
+                          getSettingValue,
+                          currentLocaleCode
+                        )
+                      : t('detail.notCompleted')
+                  }
+                />
+                <DetailRow label={t('detail.createdBy')} value={createdByName} />
+                <DetailRow
+                  label={t('detail.completedBy')}
+                  value={isCompleted ? completedByName : t('detail.notCompleted')}
+                />
+              </div>
+            </>
+          )}
+        </div>
+
+        <SheetFooter className="border-t pt-4">
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('detail.close')}
+          </Button>
+          <Button
+            type="button"
+            onClick={() => activityId && onComplete(activityId)}
+            disabled={!activityId || isCompleted || isCompleting}
+          >
+            {isCompleting ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle2 className="mr-2 h-4 w-4" />
+            )}
+            {t('actions.complete')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,66 @@
+export type ActivityType =
+  | 'call'
+  | 'email'
+  | 'meeting'
+  | 'whatsapp'
+  | 'task'
+  | 'note';
+
+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 PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+  prev?: number | null;
+  next?: number | null;
+};
+
+export type ActivityUser = {
+  id: number;
+  name: string;
+};
+
+export type ActivityPerson = {
+  id: number;
+  name: string;
+  type: 'individual' | 'company';
+  status: 'active' | 'inactive';
+  trade_name?: string | null;
+};
+
+export type ActivityListItem = {
+  id: number;
+  person_id: number;
+  person: ActivityPerson;
+  owner_user_id: number | null;
+  owner_user?: ActivityUser | null;
+  type: ActivityType;
+  subject: string;
+  notes?: string | null;
+  due_at: string;
+  completed_at?: string | null;
+  created_at: string;
+  priority: ActivityPriority;
+  status: ActivityStatus;
+};
+
+export type ActivityDetail = ActivityListItem & {
+  source_kind: ActivitySourceKind;
+  created_by_user_id?: number | null;
+  created_by_user?: ActivityUser | null;
+  completed_by_user_id?: number | null;
+  completed_by_user?: ActivityUser | null;
+};
+
+export type ActivityStats = {
+  total: number;
+  pending: number;
+  overdue: number;
+  completed: number;
+};