Examples

import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
import Link from 'next/link';
 
export default async function TasksPage() {
  const { userTasks } = await getWaitingUserTasks();
 
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Meine Aufgaben</h1>
 
      {userTasks.length === 0 ? (
        <p className="text-gray-500">Keine wartenden Aufgaben</p>
      ) : (
        <div className="grid gap-4">
          {userTasks.map((task) => (
            <Link
              key={task.flowNodeInstanceId}
              href={`/tasks/${task.flowNodeInstanceId}`}
              className="border rounded-lg p-4 hover:shadow-md transition"
            >
              <h3 className="font-semibold">{task.flowNodeName}</h3>
              <p className="text-sm text-gray-600">
                Prozess: {task.processName}
              </p>
              <p className="text-xs text-gray-500 mt-2">
                ID: {task.correlationId}
              </p>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}

import { getProcessModels, startProcessInstance } from '@5minds/processcube_app_sdk/server';
import { redirect } from 'next/navigation';
 
export default async function ProcessesPage() {
  const processModels = await getProcessModels();
 
  async function startProcess(formData: FormData) {
    'use server';
 
    const processModelId = formData.get('processModelId') as string;
    const startEventId = formData.get('startEventId') as string;
 
    const result = await startProcessInstance({
      processModelId,
      startEventId,
      initialToken: {}
    });
 
    redirect(`/processes/${result.correlationId}`);
  }
 
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Prozess starten</h1>
 
      <form action={startProcess} className="space-y-4">
        <div>
          <label className="block mb-2">Prozess auswählen</label>
          <select
            name="processModelId"
            className="border rounded px-3 py-2 w-full"
            required
          >
            {processModels.processModels.map((process) => (
              <option key={process.id} value={process.id}>
                {process.id}
              </option>
            ))}
          </select>
        </div>
 
        <input type="hidden" name="startEventId" value="StartEvent_1" />
 
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        >
          Prozess starten
        </button>
      </form>
    </div>
  );
}

'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
import { useRouter } from 'next/navigation';
 
export default function TaskDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const router = useRouter();
 
  return (
    <div className="container mx-auto p-4">
      <button
        onClick={() => router.back()}
        className="mb-4 text-blue-500 hover:underline"
      >
        ← Zurück
      </button>
 
      <RemoteUserTask
        flowNodeInstanceId={params.id}
        onFinish={() => {
          console.log('Task abgeschlossen');
          router.push('/tasks');
        }}
        onCancel={() => router.back()}
        className="border rounded-lg shadow-md"
      />
    </div>
  );
}

import {
  getWaitingUserTasks,
  getActiveCorrelations
} from '@5minds/processcube_app_sdk/server';
 
export default async function DashboardPage() {
  const [tasksResult, correlations] = await Promise.all([
    getWaitingUserTasks(),
    getActiveCorrelations()
  ]);
 
  const stats = {
    openTasks: tasksResult.userTasks.length,
    activeProcesses: correlations.correlations.length,
    completedToday: 0, // Beispiel
  };
 
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
 
      <div className="grid grid-cols-3 gap-4 mb-8">
        <div className="border rounded-lg p-6 text-center">
          <div className="text-3xl font-bold text-blue-500">
            {stats.openTasks}
          </div>
          <div className="text-gray-600">Offene Aufgaben</div>
        </div>
 
        <div className="border rounded-lg p-6 text-center">
          <div className="text-3xl font-bold text-green-500">
            {stats.activeProcesses}
          </div>
          <div className="text-gray-600">Aktive Prozesse</div>
        </div>
 
        <div className="border rounded-lg p-6 text-center">
          <div className="text-3xl font-bold text-orange-500">
            {stats.completedToday}
          </div>
          <div className="text-gray-600">Heute abgeschlossen</div>
        </div>
      </div>
 
      <div>
        <h2 className="text-xl font-semibold mb-4">Letzte Aufgaben</h2>
        {tasksResult.userTasks.slice(0, 5).map((task) => (
          <div key={task.flowNodeInstanceId} className="border-b py-3">
            <div className="font-medium">{task.flowNodeName}</div>
            <div className="text-sm text-gray-600">{task.processName}</div>
          </div>
        ))}
      </div>
    </div>
  );
}