'use client'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from '@/components/ui/context-menu'; import { GanttCreateMarkerTrigger, GanttFeatureItem, GanttFeatureList, GanttFeatureListGroup, GanttHeader, GanttMarker, GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarItem, GanttTimeline, GanttToday, } from '@/components/ui/shadcn-io/gantt'; import { EyeIcon, LinkIcon, TrashIcon } from 'lucide-react'; import { useState } from 'react'; import { addMonths, endOfMonth, startOfMonth, subDays, subMonths } from 'date-fns'; // Inline content const today = new Date(); const exampleStatuses = [ { id: '1', name: 'Planned', color: '#6B7280' }, { id: '2', name: 'In Progress', color: '#F59E0B' }, { id: '3', name: 'Done', color: '#10B981' }, ]; const initialFeatures = [ { id: '1', name: 'AI Scene Analysis', startAt: startOfMonth(subMonths(today, 6)), endAt: subDays(endOfMonth(today), 5), status: exampleStatuses[0], group: { id: '1', name: 'Core AI Features' }, product: { id: '1', name: 'Video Editor Pro' }, owner: { id: '1', image: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=1', name: 'Alice Johnson', }, initiative: { id: '1', name: 'AI Integration' }, release: { id: '1', name: 'v1.0' }, }, { id: '2', name: 'Collaborative Editing', startAt: startOfMonth(subMonths(today, 5)), endAt: subDays(endOfMonth(today), 5), status: exampleStatuses[1], group: { id: '2', name: 'Collaboration Tools' }, product: { id: '1', name: 'Video Editor Pro' }, owner: { id: '2', image: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=2', name: 'Bob Smith', }, initiative: { id: '2', name: 'Real-time Collaboration' }, release: { id: '1', name: 'v1.0' }, }, { id: '3', name: 'AI-Powered Color Grading', startAt: startOfMonth(subMonths(today, 4)), endAt: subDays(endOfMonth(today), 5), status: exampleStatuses[2], group: { id: '1', name: 'Core AI Features' }, product: { id: '1', name: 'Video Editor Pro' }, owner: { id: '3', image: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=3', name: 'Charlie Brown', }, initiative: { id: '1', name: 'AI Integration' }, release: { id: '2', name: 'v1.1' }, }, { id: '4', name: 'Real-time Video Chat', startAt: startOfMonth(subMonths(today, 3)), endAt: subDays(endOfMonth(today), 12), status: exampleStatuses[0], group: { id: '2', name: 'Collaboration Tools' }, product: { id: '1', name: 'Video Editor Pro' }, owner: { id: '4', image: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=4', name: 'Diana Prince', }, initiative: { id: '2', name: 'Real-time Collaboration' }, release: { id: '2', name: 'v1.1' }, }, { id: '5', name: 'AI Voice-to-Text Subtitles', startAt: startOfMonth(subMonths(today, 2)), endAt: subDays(endOfMonth(today), 5), status: exampleStatuses[1], group: { id: '1', name: 'Core AI Features' }, product: { id: '1', name: 'Video Editor Pro' }, owner: { id: '5', image: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=5', name: 'Ethan Hunt', }, initiative: { id: '1', name: 'AI Integration' }, release: { id: '2', name: 'v1.1' }, } ]; const exampleMarkers = [ { id: '1', date: startOfMonth(subMonths(today, 3)), label: 'Project Kickoff', className: 'bg-blue-100 text-blue-900', }, { id: '2', date: subMonths(endOfMonth(today), 2), label: 'Phase 1 Completion', className: 'bg-green-100 text-green-900', }, { id: '3', date: startOfMonth(addMonths(today, 3)), label: 'Beta Release', className: 'bg-purple-100 text-purple-900', } ]; const Example = () => { const [features, setFeatures] = useState(initialFeatures); const groupedFeatures: Record = features.reduce< Record >((groups, feature) => { const groupName = feature.group.name; return { ...groups, [groupName]: [...(groups[groupName] || []), feature], }; }, {} ); const sortedGroupedFeatures = Object.fromEntries( Object.entries(groupedFeatures).sort(([nameA], [nameB]) => nameA.localeCompare(nameB) ) ); const handleViewFeature = (id: string) => console.log(`Feature selected: ${id}`); const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`); const handleRemoveFeature = (id: string) => setFeatures((prev) => prev.filter((feature) => feature.id !== id)); const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`); const handleCreateMarker = (date: Date) => console.log(`Create marker: ${date.toISOString()}`); const handleMoveFeature = (id: string, startAt: Date, endAt: Date | null) => { if (!endAt) { return; } setFeatures((prev) => prev.map((feature) => feature.id === id ? { ...feature, startAt, endAt } : feature ) ); console.log(`Move feature: ${id} from ${startAt} to ${endAt}`); }; const handleAddFeature = (date: Date) => console.log(`Add feature: ${date.toISOString()}`); return ( {Object.entries(sortedGroupedFeatures).map(([group, features]) => ( {features.map((feature) => ( ))} ))} {Object.entries(sortedGroupedFeatures).map(([group, features]) => ( {features.map((feature) => (

handleViewFeature(feature.id)} > View feature handleCopyLink(feature.id)} > Copy link handleRemoveFeature(feature.id)} > Remove from roadmap

))} ))} {exampleMarkers.map((marker) => ( ))} ); }; export default Example;