0899e6ae9a
- Initialize Next.js project with Tailwind CSS - Create CiviCRM APIv4 integration layer - Implement stage-based form visibility (stages 0-5) - Add field mapping configuration for CRM-to-form linking - Create API routes for data retrieval and submission - Record form submissions as CiviCRM activities - Support dynamic contactId and orgId via URL parameters - Ensure robust form state management with react-hook-form Co-authored-by: joelbrock <52835+joelbrock@users.noreply.github.com>
39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
'use client';
|
||
|
||
import React from 'react';
|
||
|
||
export default function StageHeader({ stage, currentOrgStage, isExpanded, onToggle }) {
|
||
const isLocked = stage.id > currentOrgStage;
|
||
const isPast = stage.id < currentOrgStage;
|
||
const isCurrent = stage.id === currentOrgStage;
|
||
|
||
return (
|
||
<div className={`border rounded-lg mb-4 overflow-hidden ${isLocked ? 'opacity-50' : ''}`}>
|
||
<button
|
||
type="button"
|
||
disabled={isLocked}
|
||
onClick={onToggle}
|
||
className={`w-full flex items-center justify-between p-4 text-left font-semibold ${
|
||
isCurrent ? 'bg-blue-50 text-blue-700' : 'bg-gray-50'
|
||
} ${isLocked ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
|
||
>
|
||
<div className="flex items-center space-x-3">
|
||
<span className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${
|
||
isPast ? 'bg-green-100 text-green-700' :
|
||
isCurrent ? 'bg-blue-600 text-white' :
|
||
'bg-gray-200 text-gray-500'
|
||
}`}>
|
||
{isPast ? '✓' : stage.id}
|
||
</span>
|
||
<span>{stage.label}</span>
|
||
</div>
|
||
{!isLocked && (
|
||
<span className="text-gray-400">
|
||
{isExpanded ? '−' : '+'}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|