--- title: "Cockpit de proyectos" slug: "react-projects-app" category: "Examples" description: "Tareas, progreso y fechas en un solo lugar." hosts: "react" locale: "es" reactExample: "app-projects.tsx" reactExampleKind: "app" order: 18 --- # Cockpit de proyectos Tareas, progreso y fechas en un solo lugar. Esta demo completa conecta varios widgets reales con un mismo conjunto de datos. ## Vistas y flujos de trabajo **Resumen · Kanban · Tareas · Calendario** - La búsqueda y el filtro de equipo se aplican a todas las vistas. Un filtro vacío muestra el estado vacío real de la tabla. - Haz clic en una fila, una tarjeta o una cita del calendario y edita el registro en el panel de detalle. - Navega semana a semana, adelante y atrás, en las vistas de calendario. - Cambia el estado, el progreso, el equipo o la cita. Después, el cambio se mantiene visible al cambiar de vista. - Arrastra una tarjeta entre las columnas. El estado, la fila de la tabla, el panel de detalle y los indicadores usan a partir de entonces el mismo registro actualizado. ## App en vivo y código completo Con **Abrir grande** la app está disponible a ancho completo. **Código** muestra exactamente el componente ejecutado. Puedes incorporarlo directamente en una app de navegador tras la [instalación](/docs/react/intro/setup-react). ```tsx import { useMemo, useState } from 'react'; import { ArcWidgetBadge, ArcWidgetButton, ArcWidgetCalendarTimeline, ArcWidgetCalendarWeek, ArcWidgetInput, ArcWidgetKanban, ArcWidgetKpiBar, ArcWidgetProgressBar, ArcWidgetSelect, ArcWidgetSlider, ArcWidgetTable, } from '@arcrider/arcwidgets-react'; // Vollständige Browser-Demo. Alle Ansichten verwenden denselben Datenbestand. const config = { kind: 'projects', title: 'Projekt-Cockpit', description: 'Aufgaben, Fortschritt und Termine an einem Ort.', recordLabel: 'Aufgabe', countLabel: 'Aufgaben', searchLabel: 'Aufgaben oder Projekte suchen …', stages: ['Geplant', 'In Arbeit', 'Erledigt'], views: [ { id: 'overview', title: 'Übersicht', }, { id: 'board', title: 'Kanban', }, { id: 'table', title: 'Aufgaben', }, { id: 'calendar', title: 'Kalender', }, ], }; type Item = { id: string; title: string; account: string; owner: string; stage: number; value: number; progress: number; day: number; hour: number; }; const initial: Item[] = [ { id: 'P-101', title: 'Anforderungen abstimmen', account: 'Kundenportal', owner: 'Konzeption', stage: 1, value: 3200, progress: 60, day: 0, hour: 9, }, { id: 'P-102', title: 'Dashboard gestalten', account: 'Kundenportal', owner: 'Design', stage: 1, value: 4800, progress: 35, day: 1, hour: 10, }, { id: 'P-103', title: 'Datenmodell aufsetzen', account: 'Kundenportal', owner: 'Entwicklung', stage: 0, value: 6000, progress: 10, day: 2, hour: 11, }, { id: 'P-104', title: 'Angebote überarbeiten', account: 'Auftragsmanagement', owner: 'Konzeption', stage: 2, value: 1800, progress: 100, day: 0, hour: 14, }, { id: 'P-105', title: 'Kalender integrieren', account: 'Service-App', owner: 'Entwicklung', stage: 1, value: 3600, progress: 70, day: 3, hour: 10, }, { id: 'P-106', title: 'Nutzertest vorbereiten', account: 'Service-App', owner: 'Design', stage: 0, value: 1600, progress: 0, day: 4, hour: 14, }, { id: 'P-107', title: 'Freigabe einholen', account: 'Auftragsmanagement', owner: 'Konzeption', stage: 0, value: 900, progress: 20, day: 2, hour: 15, }, { id: 'P-108', title: 'Dokumentation erstellen', account: 'Kundenportal', owner: 'Entwicklung', stage: 2, value: 1400, progress: 100, day: 1, hour: 14, }, ]; const dayDate = (offset: number) => new Date(2026, 8, 14 + offset).getTime(); const money = (value: number) => value.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0, }); const tones = ['#a16207', '#52525b', '#15803d']; const pill = (stage: number) => ( ); export default function Example() { const [items, setItems] = useState(initial); const [view, setView] = useState(config.views[0].id); const [period, setPeriod] = useState(0); const [query, setQuery] = useState(''); const [owner, setOwner] = useState(null); const [stage, setStage] = useState(null); const [selectedId, setSelectedId] = useState(initial[0].id); const [message, setMessage] = useState( 'Wähle einen Eintrag aus, um ihn zu bearbeiten.', ); const owners = [...new Set(items.map((item) => item.owner))]; const filtered = useMemo( () => items.filter( (item) => (!query || `${item.title} ${item.account} ${item.owner}` .toLowerCase() .includes(query.toLowerCase())) && (owner == null || item.owner === owner) && (stage == null || item.stage === stage), ), [items, query, owner, stage], ); const selected = filtered.find((item) => item.id === selectedId) ?? filtered[0]; const completed = filtered.filter((item) => item.stage === 2).length; const total = filtered.reduce((sum, item) => sum + item.value, 0); const progress = filtered.length ? Math.round( filtered.reduce((sum, item) => sum + item.progress, 0) / filtered.length, ) : 0; const update = (patch: Partial) => { if (!selected) return; setItems((previous) => previous.map((item) => item.id === selected.id ? { ...item, ...patch } : item, ), ); setMessage( `${selected.title} aktualisiert. Die Änderung ist in allen Ansichten sichtbar.`, ); }; const lanes = config.stages.map((title, index) => ({ id: `stage-${index}`, title, minWidth: '210px', items: filtered .filter((item) => item.stage === index) .map((item) => ({ id: item.id, title: item.title, subtitle: item.account, value: ( ), clickable: true, draggable: true, })), })); const resourceRows = owners.map((team) => ({ id: team, columns: [ { title: team, subtitle: `${filtered.filter((item) => item.owner === team).length} Einsätze`, clickable: true, }, ], timeEntries: filtered .filter((item) => item.owner === team) .map((item) => ({ id: item.id, title: item.title, dateFrom: dayDate(item.day), dateTo: dayDate(item.day + 1), clickable: true, draggable: false, customLayout: (
{item.title}
{item.account}
), })), })); const timeEntries = filtered.map((item) => ({ id: item.id, title: item.title, dateFrom: dayDate(item.day), dateTo: dayDate(item.day), timeFrom: item.hour * 3600000, timeTo: (item.hour + 1) * 3600000, clickable: true, draggable: false, customLayout: (
{item.title}
{item.owner}
), })); const table = ( ({ id: item.id, clickable: true, rowColor: selected?.id === item.id ? '#f4f4f5' : '#ffffff', columns: [ { value: (
{item.title}
{item.account}
), width: 'fraction', sort: { value: item.title }, }, { value: item.owner, width: '105px' }, { value: pill(item.stage), width: '125px' }, { value: config.kind === 'sales' ? ( money(item.value) ) : ( ), width: '110px', sort: { value: config.kind === 'sales' ? item.value : item.progress, }, }, ], })), emptyTable: { title: 'Keine passenden Einträge', value: (
{'Keine passenden Einträge'}

{'Setze die Suche oder den Team-Filter zurück.'}

), }, }} onCellClick={(_event, payload) => { if (payload.row_index != null && filtered[payload.row_index]) setSelectedId(filtered[payload.row_index].id); }} /> ); return (
Arc Rider · Example App

{config.title}

Interaktive Demo

{config.description}

setQuery(String(value ?? ''))} />
({ value, title: value, active: owner === value, })), reset: { title: 'Alle Teams' }, }} onChange={setOwner} />
{view === 'overview' && (
setStage(index === 2 ? 2 : null)} />
)}

{config.views.find((tab) => tab.id === view)?.title}

{filtered.length} Einträge
{(view === 'calendar' || view === 'timeline') && (
{new Date(dayDate(period * 7)).toLocaleDateString('de-DE')} –{' '} {new Date( dayDate(period * 7 + (view === 'timeline' ? 13 : 6)), ).toLocaleDateString('de-DE')}
)} {(view === 'overview' || view === 'table') && (
{table}
)} {view === 'board' && (
{ const item = lanes[p.swimlane_index]?.items[p.item_index_in_section]; if (item) setSelectedId(String(item.id)); }} onItemDrop={async (p) => { const source = lanes[p.source_swimlane_index]?.items[ p.item_index_in_section ]; if (!source) return; const target = lanes[ p.target_swimlane_index ].items.filter((item) => item.id !== source.id); const before = target[p.target_index_in_section]?.id; setItems((previous) => { const item = previous.find( (item) => item.id === source.id, ); if (!item) return previous; const next = previous.filter( (item) => item.id !== source.id, ); const position = before ? next.findIndex((item) => item.id === before) : next.length; next.splice(position < 0 ? next.length : position, 0, { ...item, stage: p.target_swimlane_index, progress: p.target_swimlane_index === 2 ? 100 : item.stage === 2 ? 0 : item.progress, }); return next; }); setSelectedId(String(source.id)); setMessage( `${source.title} nach ${config.stages[p.target_swimlane_index]} verschoben.`, ); }} />
)} {view === 'timeline' && (
{ const item = resourceRows[row]?.timeEntries[index]; if (item) setSelectedId(String(item.id)); }} onLabelClick={(row) => { setOwner(owners[row]); setMessage(`${owners[row]} ausgewählt.`); }} />
)} {view === 'calendar' && (
{ if (filtered[index]) setSelectedId(filtered[index].id); }} />
)}
); } ``` ## Interacción entre los widgets La app mantiene los registros en un state de React. `useMemo` deriva la lista filtrada; la tabla, el tablero y el calendario obtienen de ahí su configuración respectiva. Los callbacks seleccionan IDs estables o modifican el state compartido. Los widgets se encargan de la presentación y la interacción; la aplicación es la propietaria de los datos de negocio. ## Límites de la demo Los datos son ficticios y permanecen en la memoria del navegador del componente en ejecución. No hay servidor, ni inicio de sesión, ni almacenamiento real. Las citas del calendario se modifican mediante el panel de detalle; los callbacks de drag actuales todavía no entregan horas de destino completas. Tras recargar, la app vuelve a empezar con los datos iniciales.