--- title: "Planificación de recursos" slug: "react-resources-app" category: "Examples" description: "Planificar juntos equipos, misiones y disponibilidad." hosts: "react" locale: "es" reactExample: "app-resources.tsx" reactExampleKind: "app" order: 19 --- # Planificación de recursos Planificar juntos equipos, misiones y disponibilidad. Esta demo completa conecta varios widgets reales con un mismo conjunto de datos. ## Vistas y flujos de trabajo **Resumen · Recursos · Plan semanal · Lista de misiones** - 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. - En la vista de recursos, selecciona un equipo o una barra. Asigna la misión a otro equipo en el panel de detalle y comprueba su nueva fila. ## 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: 'resources', title: 'Ressourcenplanung', description: 'Teams, Einsätze und Verfügbarkeit gemeinsam planen.', recordLabel: 'Einsatz', countLabel: 'Einsätze', searchLabel: 'Einsätze oder Kunden suchen …', stages: ['Geplant', 'Unterwegs', 'Abgeschlossen'], views: [ { id: 'overview', title: 'Übersicht', }, { id: 'timeline', title: 'Ressourcen', }, { id: 'calendar', title: 'Wochenplan', }, { id: 'table', title: 'Einsatzliste', }, ], }; type Item = { id: string; title: string; account: string; owner: string; stage: number; value: number; progress: number; day: number; hour: number; }; const initial: Item[] = [ { id: 'E-201', title: 'Installation Standort Nord', account: 'Kunde Nord', owner: 'Team A', stage: 1, value: 2400, progress: 60, day: 0, hour: 9, }, { id: 'E-202', title: 'Wartung Gebäudetechnik', account: 'Kunde West', owner: 'Team B', stage: 0, value: 1600, progress: 0, day: 1, hour: 10, }, { id: 'E-203', title: 'Abnahme Standort Süd', account: 'Kunde Süd', owner: 'Team C', stage: 2, value: 900, progress: 100, day: 0, hour: 14, }, { id: 'E-204', title: 'Anlage in Betrieb nehmen', account: 'Kunde Ost', owner: 'Team A', stage: 0, value: 3200, progress: 15, day: 3, hour: 9, }, { id: 'E-205', title: 'Sensoren kalibrieren', account: 'Kunde Nord', owner: 'Team B', stage: 1, value: 1200, progress: 50, day: 2, hour: 13, }, { id: 'E-206', title: 'Service und Prüfung', account: 'Kunde West', owner: 'Team C', stage: 0, value: 1800, progress: 0, day: 4, hour: 10, }, { id: 'E-207', title: 'Einweisung durchführen', account: 'Kunde Süd', owner: 'Team A', stage: 0, value: 600, progress: 10, day: 1, hour: 14, }, { id: 'E-208', title: 'Dokumentation übergeben', account: 'Kunde Ost', owner: 'Team C', stage: 2, value: 400, progress: 100, day: 2, hour: 9, }, ]; 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.