@nextsparkjs/theme-crm 0.1.0-beta.1

package/templates/dashboard/(main)/activities/components/ActivityCard.tsx

@@ -0,0 +1,169 @@
+/**
+ * Activity Card Component
+ * Professional card design for activities with modern styling
+ */
+
+'use client'
+
+import React from 'react'
+import { formatRelativeDate } from '@/themes/crm/lib/crm-utils'
+import {
+    Phone,
+    Mail,
+    Users,
+    CheckSquare,
+    FileText,
+    Presentation,
+    Monitor,
+    Clock,
+    Building2,
+    User,
+    type LucideIcon
+} from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+export interface Activity {
+    id: string
+    type: 'call' | 'email' | 'meeting' | 'task' | 'note' | 'demo' | 'presentation'
+    subject: string
+    description?: string
+    status: 'scheduled' | 'in_progress' | 'completed' | 'cancelled' | 'overdue'
+    priority: 'low' | 'medium' | 'high' | 'urgent'
+    dueDate: string | Date
+    completedAt?: string | Date
+    assignedTo?: string
+    assignedToName?: string
+    contactId?: string
+    contactName?: string
+    companyId?: string
+    companyName?: string
+}
+
+interface ActivityCardProps {
+    activity: Activity
+    onClick?: () => void
+}
+
+// Type configuration with icons and colors
+const activityTypeConfig: Record<Activity['type'], { icon: LucideIcon; bgClass: string; textClass: string }> = {
+    call: { icon: Phone, bgClass: 'bg-[oklch(0.55_0.22_286/0.15)]', textClass: 'text-[oklch(0.55_0.22_286)]' },
+    email: { icon: Mail, bgClass: 'bg-[oklch(0.55_0.18_150/0.15)]', textClass: 'text-[oklch(0.55_0.18_150)]' },
+    meeting: { icon: Users, bgClass: 'bg-[oklch(0.65_0.18_80/0.15)]', textClass: 'text-[oklch(0.65_0.18_80)]' },
+    task: { icon: CheckSquare, bgClass: 'bg-[oklch(0.55_0.2_320/0.15)]', textClass: 'text-[oklch(0.55_0.2_320)]' },
+    note: { icon: FileText, bgClass: 'bg-muted', textClass: 'text-muted-foreground' },
+    demo: { icon: Monitor, bgClass: 'bg-[oklch(0.55_0.22_286/0.15)]', textClass: 'text-[oklch(0.55_0.22_286)]' },
+    presentation: { icon: Presentation, bgClass: 'bg-[oklch(0.65_0.18_80/0.15)]', textClass: 'text-[oklch(0.65_0.18_80)]' },
+}
+
+// Status badge configuration
+const statusConfig: Record<Activity['status'], { label: string; className: string }> = {
+    scheduled: { label: 'Scheduled', className: 'bg-primary/10 text-primary' },
+    in_progress: { label: 'In Progress', className: 'bg-amber-500/10 text-amber-600' },
+    completed: { label: 'Completed', className: 'bg-emerald-500/10 text-emerald-600' },
+    cancelled: { label: 'Cancelled', className: 'bg-muted text-muted-foreground' },
+    overdue: { label: 'Overdue', className: 'bg-destructive/10 text-destructive' },
+}
+
+// Priority indicator configuration
+const priorityConfig: Record<Activity['priority'], { className: string }> = {
+    low: { className: 'bg-muted-foreground/50' },
+    medium: { className: 'bg-amber-500' },
+    high: { className: 'bg-destructive' },
+    urgent: { className: 'bg-destructive shadow-[0_0_8px_oklch(0.55_0.22_25)]' },
+}
+
+// Default fallback config for unknown activity types
+const defaultTypeConfig = { icon: FileText, bgClass: 'bg-muted', textClass: 'text-muted-foreground' }
+const defaultStatusConfig = { label: 'Unknown', className: 'bg-muted text-muted-foreground' }
+const defaultPriorityConfig = { className: 'bg-muted-foreground/50' }
+
+export function ActivityCard({ activity, onClick }: ActivityCardProps) {
+    const typeConfig = activityTypeConfig[activity.type] || defaultTypeConfig
+    const status = statusConfig[activity.status] || defaultStatusConfig
+    const priority = priorityConfig[activity.priority] || defaultPriorityConfig
+    const Icon = typeConfig.icon
+
+    return (
+        <div className="relative flex gap-4 pb-6 last:pb-0 group">
+            {/* Timeline line */}
+            <div className="absolute left-5 top-10 bottom-0 w-px bg-border group-last:hidden" />
+
+            {/* Icon marker */}
+            <div className={cn(
+                'relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm',
+                typeConfig.bgClass
+            )}>
+                <Icon className={cn('h-5 w-5', typeConfig.textClass)} />
+            </div>
+
+            {/* Content card */}
+            <div
+                className={cn(
+                    'flex-1 rounded-xl border bg-card p-4 shadow-sm transition-all duration-200',
+                    onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30'
+                )}
+                onClick={onClick}
+                role={onClick ? 'button' : undefined}
+                tabIndex={onClick ? 0 : undefined}
+            >
+                {/* Header */}
+                <div className="flex items-start justify-between gap-3 mb-2">
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                            <span className={cn('w-2 h-2 rounded-full shrink-0', priority.className)} />
+                            <h4 className="font-semibold text-sm text-foreground truncate">
+                                {activity.subject}
+                            </h4>
+                        </div>
+
+                        {activity.description && (
+                            <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
+                                {activity.description}
+                            </p>
+                        )}
+                    </div>
+
+                    <span className={cn(
+                        'shrink-0 px-2.5 py-1 rounded-md text-xs font-medium capitalize',
+                        status.className
+                    )}>
+                        {status.label}
+                    </span>
+                </div>
+
+                {/* Meta information */}
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-3 pt-3 border-t border-border/50">
+                    {activity.assignedToName && (
+                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-semibold text-primary">
+                                {activity.assignedToName.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()}
+                            </div>
+                            <span>{activity.assignedToName}</span>
+                        </div>
+                    )}
+
+                    {activity.companyName && (
+                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            <Building2 className="w-3.5 h-3.5" />
+                            <span>{activity.companyName}</span>
+                        </div>
+                    )}
+
+                    {activity.contactName && (
+                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            <User className="w-3.5 h-3.5" />
+                            <span>{activity.contactName}</span>
+                        </div>
+                    )}
+
+                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground ml-auto">
+                        <Clock className="w-3.5 h-3.5" />
+                        <span>{formatRelativeDate(activity.dueDate)}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ActivityCard

package/templates/dashboard/(main)/activities/components/ActivityTimeline.tsx

@@ -0,0 +1,165 @@
+/**
+ * Activity Timeline Component
+ * Professional timeline view with grouped dates and animations
+ */
+
+'use client'
+
+import React from 'react'
+import { ActivityCard, type Activity } from './ActivityCard'
+import { CalendarDays, Inbox } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface ActivityTimelineProps {
+    activities: Activity[]
+    onActivityClick?: (activity: Activity) => void
+    groupByDate?: boolean
+}
+
+export function ActivityTimeline({
+    activities,
+    onActivityClick,
+    groupByDate = true,
+}: ActivityTimelineProps) {
+    // Group activities by date
+    const groupedActivities = activities.reduce((acc, activity) => {
+        const date = new Date(activity.dueDate)
+        const dateKey = date.toDateString()
+
+        if (!acc[dateKey]) {
+            acc[dateKey] = []
+        }
+        acc[dateKey].push(activity)
+        return acc
+    }, {} as Record<string, Activity[]>)
+
+    // Sort date keys
+    const sortedDates = Object.keys(groupedActivities).sort((a, b) => {
+        return new Date(a).getTime() - new Date(b).getTime()
+    })
+
+    const formatDateHeader = (dateStr: string): { main: string; sub?: string; isToday?: boolean; isPast?: boolean } => {
+        const date = new Date(dateStr)
+        const today = new Date()
+        const tomorrow = new Date(today)
+        tomorrow.setDate(tomorrow.getDate() + 1)
+        const yesterday = new Date(today)
+        yesterday.setDate(yesterday.getDate() - 1)
+
+        const isToday = date.toDateString() === today.toDateString()
+        const isPast = date < today && !isToday
+
+        if (isToday) {
+            return { main: 'Today', sub: date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }), isToday: true }
+        }
+        if (date.toDateString() === tomorrow.toDateString()) {
+            return { main: 'Tomorrow', sub: date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) }
+        }
+        if (date.toDateString() === yesterday.toDateString()) {
+            return { main: 'Yesterday', sub: date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }), isPast: true }
+        }
+
+        return {
+            main: date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' }),
+            sub: date.getFullYear() !== today.getFullYear() ? date.getFullYear().toString() : undefined,
+            isPast
+        }
+    }
+
+    if (activities.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-16 px-4">
+                <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mb-4">
+                    <Inbox className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                    No activities yet
+                </h3>
+                <p className="text-sm text-muted-foreground text-center max-w-sm">
+                    Schedule calls, meetings, and tasks to keep track of your sales activities.
+                </p>
+            </div>
+        )
+    }
+
+    if (!groupByDate) {
+        return (
+            <div className="space-y-0">
+                {activities.map((activity, index) => (
+                    <div
+                        key={activity.id}
+                        className="animate-in fade-in slide-in-from-bottom-2"
+                        style={{ animationDelay: `${index * 50}ms`, animationFillMode: 'backwards' }}
+                    >
+                        <ActivityCard
+                            activity={activity}
+                            onClick={() => onActivityClick?.(activity)}
+                        />
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div className="space-y-8">
+            {sortedDates.map((dateKey, groupIndex) => {
+                const dateInfo = formatDateHeader(dateKey)
+
+                return (
+                    <div
+                        key={dateKey}
+                        className="animate-in fade-in slide-in-from-bottom-3"
+                        style={{ animationDelay: `${groupIndex * 100}ms`, animationFillMode: 'backwards' }}
+                    >
+                        {/* Date header */}
+                        <div className="flex items-center gap-3 mb-4">
+                            <div className={cn(
+                                'flex items-center justify-center w-9 h-9 rounded-lg',
+                                dateInfo.isToday ? 'bg-primary text-primary-foreground' : 'bg-muted'
+                            )}>
+                                <CalendarDays className={cn(
+                                    'w-4 h-4',
+                                    dateInfo.isToday ? 'text-primary-foreground' : 'text-muted-foreground'
+                                )} />
+                            </div>
+                            <div>
+                                <h3 className={cn(
+                                    'text-base font-semibold',
+                                    dateInfo.isToday ? 'text-primary' : dateInfo.isPast ? 'text-muted-foreground' : 'text-foreground'
+                                )}>
+                                    {dateInfo.main}
+                                </h3>
+                                {dateInfo.sub && (
+                                    <p className="text-xs text-muted-foreground">{dateInfo.sub}</p>
+                                )}
+                            </div>
+                            <div className="flex-1 h-px bg-border ml-2" />
+                            <span className="text-xs font-medium text-muted-foreground bg-muted px-2 py-1 rounded-md">
+                                {groupedActivities[dateKey].length} {groupedActivities[dateKey].length === 1 ? 'activity' : 'activities'}
+                            </span>
+                        </div>
+
+                        {/* Activities list */}
+                        <div className="space-y-0 pl-1">
+                            {groupedActivities[dateKey].map((activity, index) => (
+                                <div
+                                    key={activity.id}
+                                    className="animate-in fade-in slide-in-from-left-2"
+                                    style={{ animationDelay: `${(groupIndex * 100) + (index * 50)}ms`, animationFillMode: 'backwards' }}
+                                >
+                                    <ActivityCard
+                                        activity={activity}
+                                        onClick={() => onActivityClick?.(activity)}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default ActivityTimeline

package/templates/dashboard/(main)/activities/page.tsx

@@ -0,0 +1,297 @@
+/**
+ * Activities Page
+ * Professional activities management with timeline view and stats
+ */
+
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { ActivityTimeline } from './components/ActivityTimeline'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import {
+    Plus,
+    CalendarDays,
+    LayoutList,
+    Phone,
+    Mail,
+    Users,
+    CheckSquare,
+    FileText,
+    Activity,
+    Clock,
+    CheckCircle2
+} from 'lucide-react'
+import type { Activity as ActivityType } from './components/ActivityCard'
+import { fetchWithTeam } from '@nextsparkjs/core/lib/api/entities'
+import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+type ViewMode = 'timeline' | 'list'
+type FilterType = 'all' | 'call' | 'email' | 'meeting' | 'task' | 'note'
+
+// Filter configuration with icons
+const filterConfig: Record<FilterType, { icon: typeof Phone; label: string }> = {
+    all: { icon: Activity, label: 'All' },
+    call: { icon: Phone, label: 'Calls' },
+    email: { icon: Mail, label: 'Emails' },
+    meeting: { icon: Users, label: 'Meetings' },
+    task: { icon: CheckSquare, label: 'Tasks' },
+    note: { icon: FileText, label: 'Notes' },
+}
+
+export default function ActivitiesPage() {
+    const router = useRouter()
+    const { currentTeam, isLoading: teamLoading } = useTeamContext()
+    const [activities, setActivities] = useState<ActivityType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [viewMode, setViewMode] = useState<ViewMode>('timeline')
+    const [filter, setFilter] = useState<FilterType>('all')
+
+    useEffect(() => {
+        if (teamLoading || !currentTeam) return
+
+        async function fetchActivities() {
+            try {
+                const response = await fetchWithTeam('/api/v1/activities')
+                if (!response.ok) throw new Error('Failed to fetch activities')
+                const result = await response.json()
+                const data = result.data || []
+
+                const transformedActivities: ActivityType[] = data
+                    .map((act: any) => ({
+                        id: act.id,
+                        type: act.type,
+                        subject: act.subject,
+                        description: act.description,
+                        status: act.status,
+                        priority: act.priority || 'medium',
+                        dueDate: act.dueDate,
+                        completedAt: act.completedAt,
+                        assignedTo: act.assignedTo,
+                        assignedToName: act.assignedToName,
+                        contactId: act.contactId,
+                        contactName: act.contactName,
+                        companyId: act.companyId,
+                        companyName: act.companyName,
+                    }))
+                    .sort((a: ActivityType, b: ActivityType) =>
+                        new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
+                    )
+
+                setActivities(transformedActivities)
+            } catch (error) {
+                console.error('Error loading activities:', error)
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        fetchActivities()
+    }, [teamLoading, currentTeam])
+
+    const handleActivityClick = (activity: ActivityType) => {
+        router.push(`/dashboard/activities/${activity.id}`)
+    }
+
+    const handleAddActivity = () => {
+        router.push('/dashboard/activities/create')
+    }
+
+    // Filter activities by type
+    const filteredActivities = filter === 'all'
+        ? activities
+        : activities.filter(act => act.type === filter)
+
+    // Calculate stats
+    const stats = {
+        total: activities.length,
+        scheduled: activities.filter(a => a.status === 'scheduled').length,
+        completed: activities.filter(a => a.status === 'completed').length,
+        overdue: activities.filter(a => a.status === 'overdue').length,
+    }
+
+    // Calculate filter counts
+    const filterCounts: Record<FilterType, number> = {
+        all: activities.length,
+        call: activities.filter(a => a.type === 'call').length,
+        email: activities.filter(a => a.type === 'email').length,
+        meeting: activities.filter(a => a.type === 'meeting').length,
+        task: activities.filter(a => a.type === 'task').length,
+        note: activities.filter(a => a.type === 'note').length,
+    }
+
+    if (isLoading) {
+        return (
+            <div className="p-6 space-y-6">
+                {/* Header skeleton */}
+                <div className="flex items-center justify-between">
+                    <div className="space-y-2">
+                        <div className="h-8 w-48 bg-muted animate-pulse rounded-lg" />
+                        <div className="h-4 w-64 bg-muted animate-pulse rounded-md" />
+                    </div>
+                    <div className="h-10 w-36 bg-muted animate-pulse rounded-lg" />
+                </div>
+
+                {/* Stats skeleton */}
+                <div className="grid grid-cols-4 gap-4">
+                    {[1, 2, 3, 4].map(i => (
+                        <div key={i} className="h-20 bg-muted animate-pulse rounded-xl" />
+                    ))}
+                </div>
+
+                {/* Content skeleton */}
+                <div className="space-y-4">
+                    {[1, 2, 3].map(i => (
+                        <div key={i} className="h-28 bg-muted animate-pulse rounded-xl" />
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="p-6 space-y-6">
+            {/* Header */}
+            <div className="flex items-start justify-between">
+                <div>
+                    <h1 className="text-2xl font-bold text-foreground tracking-tight">
+                        Activities
+                    </h1>
+                    <p className="text-sm text-muted-foreground mt-1">
+                        Track and manage your sales activities
+                    </p>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    {/* View toggle */}
+                    <div className="flex p-1 bg-muted rounded-lg">
+                        <button
+                            className={cn(
+                                'flex items-center justify-center w-9 h-9 rounded-md transition-all',
+                                viewMode === 'timeline'
+                                    ? 'bg-background shadow-sm text-primary'
+                                    : 'text-muted-foreground hover:text-foreground'
+                            )}
+                            onClick={() => setViewMode('timeline')}
+                            title="Timeline view"
+                        >
+                            <CalendarDays className="w-4 h-4" />
+                        </button>
+                        <button
+                            className={cn(
+                                'flex items-center justify-center w-9 h-9 rounded-md transition-all',
+                                viewMode === 'list'
+                                    ? 'bg-background shadow-sm text-primary'
+                                    : 'text-muted-foreground hover:text-foreground'
+                            )}
+                            onClick={() => setViewMode('list')}
+                            title="List view"
+                        >
+                            <LayoutList className="w-4 h-4" />
+                        </button>
+                    </div>
+
+                    <Button onClick={handleAddActivity} className="gap-2" data-cy="activities-add">
+                        <Plus className="w-4 h-4" />
+                        New Activity
+                    </Button>
+                </div>
+            </div>
+
+            {/* Stats cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="bg-card border rounded-xl p-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                            <Activity className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{stats.total}</p>
+                            <p className="text-xs text-muted-foreground">Total Activities</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-card border rounded-xl p-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center">
+                            <Clock className="w-5 h-5 text-amber-600" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{stats.scheduled}</p>
+                            <p className="text-xs text-muted-foreground">Scheduled</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-card border rounded-xl p-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+                            <CheckCircle2 className="w-5 h-5 text-emerald-600" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{stats.completed}</p>
+                            <p className="text-xs text-muted-foreground">Completed</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-card border rounded-xl p-4">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-destructive/10 flex items-center justify-center">
+                            <Clock className="w-5 h-5 text-destructive" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{stats.overdue}</p>
+                            <p className="text-xs text-muted-foreground">Overdue</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Filter pills */}
+            <div className="flex flex-wrap gap-2">
+                {(Object.keys(filterConfig) as FilterType[]).map((key) => {
+                    const config = filterConfig[key]
+                    const Icon = config.icon
+                    const count = filterCounts[key]
+                    const isActive = filter === key
+
+                    return (
+                        <button
+                            key={key}
+                            onClick={() => setFilter(key)}
+                            className={cn(
+                                'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
+                                isActive
+                                    ? 'bg-primary text-primary-foreground shadow-sm'
+                                    : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground'
+                            )}
+                        >
+                            <Icon className="w-4 h-4" />
+                            {config.label}
+                            <span className={cn(
+                                'ml-1 px-1.5 py-0.5 rounded text-xs',
+                                isActive
+                                    ? 'bg-primary-foreground/20 text-primary-foreground'
+                                    : 'bg-background text-muted-foreground'
+                            )}>
+                                {count}
+                            </span>
+                        </button>
+                    )
+                })}
+            </div>
+
+            {/* Timeline */}
+            <div className="mt-2" data-cy="activities-list">
+                <ActivityTimeline
+                    activities={filteredActivities}
+                    onActivityClick={handleActivityClick}
+                    groupByDate={viewMode === 'timeline'}
+                />
+            </div>
+        </div>
+    )
+}