@nextsparkjs/theme-crm 0.1.0-beta.1

package/templates/shared/PipelineForm.tsx

@@ -0,0 +1,367 @@
+/**
+ * Pipeline Form Component
+ * Custom form for creating/editing pipelines with stages repeater
+ */
+
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Input } from '@nextsparkjs/core/components/ui/input'
+import { Label } from '@nextsparkjs/core/components/ui/label'
+import { Textarea } from '@nextsparkjs/core/components/ui/textarea'
+import { Switch } from '@nextsparkjs/core/components/ui/switch'
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@nextsparkjs/core/components/ui/select'
+import { StagesRepeater, DEFAULT_STAGES, type Stage } from './StagesRepeater'
+import { fetchWithTeam } from '@nextsparkjs/core/lib/api/entities'
+import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
+import { ArrowLeft, Save, Loader2, GitBranch } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface PipelineFormData {
+    name: string
+    description: string
+    type: string
+    isDefault: boolean
+    isActive: boolean
+    stages: Stage[]
+    dealRottenDays: number
+}
+
+interface PipelineFormProps {
+    mode: 'create' | 'edit'
+    pipelineId?: string
+    onSuccess?: (id?: string) => void
+    onCancel?: () => void
+}
+
+const PIPELINE_TYPES = [
+    { value: 'sales', label: 'Sales' },
+    { value: 'support', label: 'Support' },
+    { value: 'project', label: 'Project' },
+    { value: 'custom', label: 'Custom' },
+]
+
+export function PipelineForm({ mode, pipelineId, onSuccess, onCancel }: PipelineFormProps) {
+    const router = useRouter()
+    const { currentTeam, isLoading: teamLoading } = useTeamContext()
+
+    const [formData, setFormData] = useState<PipelineFormData>({
+        name: '',
+        description: '',
+        type: 'sales',
+        isDefault: false,
+        isActive: true,
+        stages: DEFAULT_STAGES,
+        dealRottenDays: 30,
+    })
+
+    const [isLoading, setIsLoading] = useState(mode === 'edit')
+    const [isSaving, setIsSaving] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    // Load existing pipeline data for edit mode
+    useEffect(() => {
+        if (mode === 'edit' && pipelineId && !teamLoading && currentTeam) {
+            loadPipeline()
+        }
+    }, [mode, pipelineId, teamLoading, currentTeam])
+
+    const loadPipeline = async () => {
+        try {
+            const response = await fetchWithTeam(`/api/v1/pipelines/${pipelineId}`)
+            if (!response.ok) throw new Error('Failed to load pipeline')
+
+            const result = await response.json()
+            const data = result.data
+
+            setFormData({
+                name: data.name || '',
+                description: data.description || '',
+                type: data.type || 'sales',
+                isDefault: data.isDefault || false,
+                isActive: data.isActive !== false,
+                stages: data.stages || DEFAULT_STAGES,
+                dealRottenDays: data.dealRottenDays || 30,
+            })
+        } catch (err) {
+            console.error('Error loading pipeline:', err)
+            setError('Failed to load pipeline data')
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setError(null)
+
+        // Validation
+        if (!formData.name.trim()) {
+            setError('Pipeline name is required')
+            return
+        }
+
+        if (formData.stages.length === 0) {
+            setError('At least one stage is required')
+            return
+        }
+
+        const emptyStages = formData.stages.filter(s => !s.name.trim())
+        if (emptyStages.length > 0) {
+            setError('All stages must have a name')
+            return
+        }
+
+        setIsSaving(true)
+
+        try {
+            const url = mode === 'create'
+                ? '/api/v1/pipelines'
+                : `/api/v1/pipelines/${pipelineId}`
+
+            const method = mode === 'create' ? 'POST' : 'PATCH'
+
+            const response = await fetchWithTeam(url, {
+                method,
+                body: JSON.stringify(formData),
+            })
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}))
+                throw new Error(errorData.error || 'Failed to save pipeline')
+            }
+
+            const result = await response.json()
+            const savedId = result.data?.id || pipelineId
+
+            if (onSuccess) {
+                onSuccess(savedId)
+            } else {
+                router.push(`/dashboard/pipelines/${savedId}`)
+            }
+        } catch (err) {
+            console.error('Error saving pipeline:', err)
+            setError(err instanceof Error ? err.message : 'Failed to save pipeline')
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel()
+        } else {
+            router.back()
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center min-h-[400px]">
+                <div className="text-center">
+                    <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-3" />
+                    <p className="text-sm text-muted-foreground">Loading pipeline...</p>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-8 max-w-4xl mx-auto" data-cy="pipeline-form">
+            {/* Header */}
+            <div className="flex items-center gap-4">
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleCancel}
+                    className="shrink-0"
+                >
+                    <ArrowLeft className="w-5 h-5" />
+                </Button>
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
+                        <GitBranch className="w-5 h-5 text-primary" />
+                    </div>
+                    <div>
+                        <h1 className="text-xl font-semibold">
+                            {mode === 'create' ? 'Create Pipeline' : 'Edit Pipeline'}
+                        </h1>
+                        <p className="text-sm text-muted-foreground">
+                            {mode === 'create'
+                                ? 'Set up a new sales pipeline with custom stages'
+                                : 'Modify pipeline settings and stages'}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Error message */}
+            {error && (
+                <div className="bg-destructive/10 border border-destructive/20 rounded-lg px-4 py-3 text-sm text-destructive">
+                    {error}
+                </div>
+            )}
+
+            {/* Basic Info Section */}
+            <div className="bg-card border rounded-xl p-6 space-y-5">
+                <h2 className="font-semibold text-base border-b pb-3 mb-4">Basic Information</h2>
+
+                <div className="grid grid-cols-2 gap-5">
+                    {/* Name */}
+                    <div className="col-span-2 sm:col-span-1">
+                        <Label htmlFor="name" className="text-sm font-medium">
+                            Pipeline Name <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                            id="name"
+                            value={formData.name}
+                            onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                            placeholder="e.g., Enterprise Sales"
+                            className="mt-1.5"
+                            required
+                            data-cy="pipeline-form-name"
+                        />
+                    </div>
+
+                    {/* Type */}
+                    <div className="col-span-2 sm:col-span-1">
+                        <Label htmlFor="type" className="text-sm font-medium">
+                            Pipeline Type
+                        </Label>
+                        <Select
+                            value={formData.type}
+                            onValueChange={(value) => setFormData(prev => ({ ...prev, type: value }))}
+                        >
+                            <SelectTrigger className="mt-1.5">
+                                <SelectValue placeholder="Select type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {PIPELINE_TYPES.map((type) => (
+                                    <SelectItem key={type.value} value={type.value}>
+                                        {type.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    {/* Description */}
+                    <div className="col-span-2">
+                        <Label htmlFor="description" className="text-sm font-medium">
+                            Description
+                        </Label>
+                        <Textarea
+                            id="description"
+                            value={formData.description}
+                            onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                            placeholder="Describe the purpose of this pipeline..."
+                            className="mt-1.5 min-h-[80px]"
+                            data-cy="pipeline-form-description"
+                        />
+                    </div>
+
+                    {/* Deal Rotten Days */}
+                    <div className="col-span-2 sm:col-span-1">
+                        <Label htmlFor="dealRottenDays" className="text-sm font-medium">
+                            Deal Rotten Days
+                        </Label>
+                        <p className="text-xs text-muted-foreground mb-1.5">
+                            Days without activity before a deal is marked as stale
+                        </p>
+                        <Input
+                            id="dealRottenDays"
+                            type="number"
+                            min={1}
+                            max={365}
+                            value={formData.dealRottenDays}
+                            onChange={(e) => setFormData(prev => ({ ...prev, dealRottenDays: parseInt(e.target.value) || 30 }))}
+                            className="w-32"
+                        />
+                    </div>
+
+                    {/* Toggles */}
+                    <div className="col-span-2 sm:col-span-1 space-y-4">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label htmlFor="isActive" className="text-sm font-medium">
+                                    Active
+                                </Label>
+                                <p className="text-xs text-muted-foreground">
+                                    Enable this pipeline for use
+                                </p>
+                            </div>
+                            <Switch
+                                id="isActive"
+                                checked={formData.isActive}
+                                onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isActive: checked }))}
+                            />
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label htmlFor="isDefault" className="text-sm font-medium">
+                                    Default Pipeline
+                                </Label>
+                                <p className="text-xs text-muted-foreground">
+                                    Use as default for new deals
+                                </p>
+                            </div>
+                            <Switch
+                                id="isDefault"
+                                checked={formData.isDefault}
+                                onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isDefault: checked }))}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Stages Section */}
+            <div className="bg-card border rounded-xl p-6">
+                <h2 className="font-semibold text-base border-b pb-3 mb-4">Pipeline Stages</h2>
+                <StagesRepeater
+                    value={formData.stages}
+                    onChange={(stages) => setFormData(prev => ({ ...prev, stages }))}
+                    disabled={isSaving}
+                />
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center justify-end gap-3 pt-4 border-t">
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleCancel}
+                    disabled={isSaving}
+                    data-cy="pipeline-form-cancel"
+                >
+                    Cancel
+                </Button>
+                <Button type="submit" disabled={isSaving} className="gap-2" data-cy="pipeline-form-submit">
+                    {isSaving ? (
+                        <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            Saving...
+                        </>
+                    ) : (
+                        <>
+                            <Save className="w-4 h-4" />
+                            {mode === 'create' ? 'Create Pipeline' : 'Save Changes'}
+                        </>
+                    )}
+                </Button>
+            </div>
+        </form>
+    )
+}
+
+export default PipelineForm

package/templates/shared/PipelineKanban.tsx

@@ -0,0 +1,194 @@
+/**
+ * Pipeline Kanban Component
+ * Professional Kanban board with stats and drag-drop
+ */
+
+'use client'
+
+import React, { useState, useCallback } from 'react'
+import { StageColumn, type Stage } from './StageColumn'
+import { type Deal } from './DealCard'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import {
+    Plus,
+    Target,
+    DollarSign,
+    TrendingUp,
+    BarChart3,
+    Loader2
+} from 'lucide-react'
+
+interface Pipeline {
+    id: string
+    name: string
+    stages: Stage[]
+}
+
+interface PipelineKanbanProps {
+    pipeline: Pipeline
+    deals: Deal[]
+    onDealClick?: (deal: Deal) => void
+    onDealMove?: (dealId: string, fromStageId: string, toStageId: string) => Promise<void>
+    onAddDeal?: (stageId?: string) => void
+}
+
+export function PipelineKanban({
+    pipeline,
+    deals: initialDeals,
+    onDealClick,
+    onDealMove,
+    onAddDeal,
+}: PipelineKanbanProps) {
+    const [deals, setDeals] = useState(initialDeals)
+    const [isMoving, setIsMoving] = useState(false)
+
+    // Group deals by stage
+    const dealsByStage = pipeline.stages.reduce((acc, stage) => {
+        acc[stage.id] = deals.filter(deal => deal.stageId === stage.id)
+        return acc
+    }, {} as Record<string, Deal[]>)
+
+    // Calculate pipeline stats
+    const totalValue = deals.reduce((sum, d) => sum + d.amount, 0)
+    const weightedValue = deals.reduce((sum, d) => sum + (d.amount * d.probability / 100), 0)
+    const avgDealSize = deals.length > 0 ? totalValue / deals.length : 0
+    const currency = deals[0]?.currency || 'USD'
+
+    const formatCurrency = (value: number) => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency,
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(value)
+    }
+
+    const handleDrop = useCallback(async (dealId: string, targetStageId: string) => {
+        const deal = deals.find(d => d.id === dealId)
+        if (!deal || deal.stageId === targetStageId) return
+
+        const previousStageId = deal.stageId
+
+        // Optimistic update
+        setDeals(prev => prev.map(d =>
+            d.id === dealId ? { ...d, stageId: targetStageId } : d
+        ))
+
+        setIsMoving(true)
+
+        try {
+            await onDealMove?.(dealId, previousStageId, targetStageId)
+        } catch (error) {
+            // Revert on error
+            setDeals(prev => prev.map(d =>
+                d.id === dealId ? { ...d, stageId: previousStageId } : d
+            ))
+            console.error('Failed to move deal:', error)
+        } finally {
+            setIsMoving(false)
+        }
+    }, [deals, onDealMove])
+
+    return (
+        <div className="space-y-6" data-cy="pipeline-kanban">
+            {/* Header */}
+            <div className="flex items-start justify-between" data-cy="pipeline-kanban-header">
+                <div>
+                    <h1 className="text-2xl font-bold text-foreground tracking-tight">
+                        {pipeline.name}
+                    </h1>
+                    <p className="text-sm text-muted-foreground mt-1">
+                        {pipeline.stages.length} stages • {deals.length} opportunities
+                    </p>
+                </div>
+
+                <Button onClick={() => onAddDeal?.()} className="gap-2" data-cy="pipeline-kanban-add-deal-btn">
+                    <Plus className="w-4 h-4" />
+                    Add Deal
+                </Button>
+            </div>
+
+            {/* Stats cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4" data-cy="pipeline-kanban-stats">
+                <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">
+                            <Target className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{deals.length}</p>
+                            <p className="text-xs text-muted-foreground">Open Deals</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">
+                            <DollarSign className="w-5 h-5 text-emerald-600" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{formatCurrency(totalValue)}</p>
+                            <p className="text-xs text-muted-foreground">Total Value</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">
+                            <TrendingUp className="w-5 h-5 text-amber-600" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{formatCurrency(weightedValue)}</p>
+                            <p className="text-xs text-muted-foreground">Weighted Value</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-muted flex items-center justify-center">
+                            <BarChart3 className="w-5 h-5 text-muted-foreground" />
+                        </div>
+                        <div>
+                            <p className="text-2xl font-bold text-foreground">{formatCurrency(avgDealSize)}</p>
+                            <p className="text-xs text-muted-foreground">Avg Deal Size</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Kanban Board */}
+            <div className="overflow-x-auto pb-4 -mx-6 px-6" data-cy="pipeline-kanban-board">
+                <div className="flex gap-4 min-w-max">
+                    {pipeline.stages.map((stage, index) => (
+                        <div
+                            key={stage.id}
+                            className="animate-in fade-in slide-in-from-bottom-3"
+                            style={{ animationDelay: `${index * 50}ms`, animationFillMode: 'backwards' }}
+                        >
+                            <StageColumn
+                                stage={stage}
+                                deals={dealsByStage[stage.id] || []}
+                                onDealClick={onDealClick}
+                                onDrop={handleDrop}
+                                onAddDeal={onAddDeal}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Moving indicator */}
+            {isMoving && (
+                <div className="fixed bottom-6 right-6 bg-primary text-primary-foreground px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-in fade-in slide-in-from-bottom-2">
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <span className="text-sm font-medium">Updating deal...</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default PipelineKanban

package/templates/shared/QuickFilters.tsx

@@ -0,0 +1,47 @@
+/**
+ * Quick Filters Component
+ * Reusable filter pills for CRM views
+ */
+
+import React from 'react'
+import '@/contents/themes/crm/styles/crm-theme.css'
+
+export interface FilterOption {
+    id: string
+    label: string
+    count?: number
+}
+
+interface QuickFiltersProps {
+    filters: FilterOption[]
+    activeFilter: string
+    onFilterChange: (filterId: string) => void
+    className?: string
+}
+
+export function QuickFilters({
+    filters,
+    activeFilter,
+    onFilterChange,
+    className = '',
+}: QuickFiltersProps) {
+    return (
+        <div className={`crm-filters ${className}`} data-cy="quick-filters">
+            {filters.map((filter) => (
+                <button
+                    key={filter.id}
+                    className={`crm-filter-pill ${activeFilter === filter.id ? 'active' : ''}`}
+                    onClick={() => onFilterChange(filter.id)}
+                    data-cy={`quick-filter-${filter.id}`}
+                >
+                    {filter.label}
+                    {filter.count !== undefined && (
+                        <span className="ml-1.5 opacity-60">({filter.count})</span>
+                    )}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export default QuickFilters