raci app

import React, { useState } from 'react';
import { 
  CheckCircle, 
  Target, 
  FileText, 
  Users, 
  TrendingUp, 
  Briefcase,
  ChevronDown,
  ChevronUp,
  Info
} from 'lucide-react';

const BusinessDevelopmentMatrix = () => {
  const [activeTab, setActiveTab] = useState('raci');
  const [expandedRole, setExpandedRole] = useState(null);

  // Brand Colors
  const colors = {
    primary: '#912f46', // Burgundy
    secondary: '#fffaed', // Cream
    white: '#ffffff',
    textDark: '#4a1925' // Darker shade of burgundy for text
  };

  const stages = [
    { id: 'ident', name: '1. Identification', icon: Target },
    { id: 'qual', name: '2. Qualification', icon: CheckCircle },
    { id: 'capture', name: '3. Capture', icon: Briefcase },
    { id: 'proposal', name: '4. Proposal', icon: FileText },
    { id: 'close', name: '5. Award/Close', icon: TrendingUp },
  ];

  const roles = [
    { 
      title: 'CEO / Executive', 
      focus: 'Strategic Alignment & Approvals',
      responsibilities: {
        ident: 'Validate strategic fit; Approve pursuit budget.',
        qual: 'Gate Review 1 (Interest) decision maker.',
        capture: 'Executive call plan; Customer relationship building at Agency HQ level.',
        proposal: 'Final "Gold Team" review sign-off; Pricing strategy approval.',
        close: 'Contract signing; Executive kickoff.'
      }
    },
    { 
      title: 'VP of Growth / BD Lead', 
      focus: 'Pipeline Health & Deal Strategy',
      responsibilities: {
        ident: 'Market analysis; Lead sourcing; Pipeline shaping.',
        qual: 'Conduct gap analysis; Competitor intelligence; Gate 2 decision.',
        capture: 'Develop win themes; Teaming strategy; PTW (Price to Win) targets.',
        proposal: 'Ensure value proposition alignment; Resource allocation.',
        close: 'Negotiations; Debrief leadership.'
      }
    },
    { 
      title: 'Capture Manager', 
      focus: 'Opportunity Ownership',
      responsibilities: {
        ident: 'Customer meetings; Assessing Pwin (Probability of Win).',
        qual: 'Shape requirements; Identify pain points.',
        capture: 'Lead the solutioning; Secure teaming partners; Customer intimacy.',
        proposal: 'Write Executive Summary; Guide tech solution; Review pink/red teams.',
        close: 'Support negotiations; Transition to delivery.'
      }
    },
    { 
      title: 'Proposal Manager', 
      focus: 'Compliance & Production',
      responsibilities: {
        ident: 'Monitor GWAC/IDIQ portals.',
        qual: 'Analyze RFP/RFI requirements for compliance risks.',
        capture: 'Create proposal calendar/outline; Storyboarding.',
        proposal: 'Manage writers; version control; compliance matrix; submission.',
        close: 'Archive assets; Lessons learned.'
      }
    },
    { 
      title: 'Technical/Delivery Lead', 
      focus: 'Solution Feasibility',
      responsibilities: {
        ident: 'Identify technical capability gaps.',
        qual: 'Validate technical approach feasibility.',
        capture: 'Architect solution; Write technical white papers.',
        proposal: 'Author technical volumes; Create diagrams/BOEs.',
        close: 'Prepare transition team.'
      }
    }
  ];

  const raciMatrix = [
    { task: 'Lead Generation', ceo: 'I', vp: 'A', capture: 'R', prop: 'I', tech: 'C' },
    { task: 'Gate Reviews', ceo: 'A', vp: 'R', capture: 'C', prop: 'I', tech: 'C' },
    { task: 'Teaming Agreements', ceo: 'I', vp: 'A', capture: 'R', prop: 'C', tech: 'I' },
    { task: 'Solution Architecture', ceo: 'I', vp: 'C', capture: 'A', prop: 'I', tech: 'R' },
    { task: 'Proposal Writing', ceo: 'I', vp: 'C', capture: 'C', prop: 'A', tech: 'R' },
    { task: 'Pricing Strategy', ceo: 'A', vp: 'R', capture: 'C', prop: 'I', tech: 'I' },
  ];

  return (
    <div className="min-h-screen font-sans p-4 md:p-8" style={{ backgroundColor: colors.secondary }}>
      
      {/* Header */}
      <div className="max-w-7xl mx-auto rounded-xl shadow-lg overflow-hidden mb-8">
        <div className="p-8 text-center md:text-left flex flex-col md:flex-row justify-between items-center" style={{ backgroundColor: colors.primary }}>
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">BD Accountability Matrix</h1>
            <p className="text-white/80">GovCon Growth & Responsibility Framework</p>
          </div>
          <div className="mt-4 md:mt-0 flex gap-2">
            <button 
              onClick={() => setActiveTab('matrix')}
              className={`px-4 py-2 rounded-lg font-semibold transition-all ${activeTab === 'matrix' ? 'bg-white text-[#912f46]' : 'bg-[#7a253a] text-white hover:bg-[#631e2f]'}`}
            >
              Stage View
            </button>
            <button 
              onClick={() => setActiveTab('raci')}
              className={`px-4 py-2 rounded-lg font-semibold transition-all ${activeTab === 'raci' ? 'bg-white text-[#912f46]' : 'bg-[#7a253a] text-white hover:bg-[#631e2f]'}`}
            >
              RACI Chart
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto">
        
        {/* Stage View (Detailed Responsibilities) */}
        {activeTab === 'matrix' && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6 sticky top-2 z-10">
              {stages.map((stage) => (
                <div key={stage.id} className="p-3 rounded-lg shadow-md text-center text-white flex flex-col items-center justify-center h-24 transition-transform hover:-translate-y-1" style={{ backgroundColor: colors.primary }}>
                  <stage.icon size={24} className="mb-2 opacity-90" />
                  <span className="font-semibold text-sm">{stage.name}</span>
                </div>
              ))}
            </div>

            <div className="bg-white rounded-xl shadow-sm border border-[#e6dccf] overflow-hidden">
              {roles.map((role, idx) => (
                <div key={idx} className={`border-b border-[#e6dccf] ${idx === roles.length - 1 ? 'border-b-0' : ''}`}>
                  <div 
                    onClick={() => setExpandedRole(expandedRole === idx ? null : idx)}
                    className="p-6 cursor-pointer hover:bg-[#fff5f7] transition-colors flex justify-between items-center"
                  >
                    <div>
                      <h3 className="text-xl font-bold" style={{ color: colors.primary }}>{role.title}</h3>
                      <p className="text-gray-500 text-sm mt-1 uppercase tracking-wider">{role.focus}</p>
                    </div>
                    {expandedRole === idx ? <ChevronUp color={colors.primary} /> : <ChevronDown color={colors.primary} />}
                  </div>
                  
                  {expandedRole === idx && (
                    <div className="p-6 pt-0 grid grid-cols-1 md:grid-cols-5 gap-4 bg-[#fffafb]">
                      <div className="p-3 bg-white rounded border border-[#ebdada] shadow-sm">
                        <span className="text-xs font-bold text-[#912f46] block mb-2">IDENTIFICATION</span>
                        <p className="text-sm text-gray-700">{role.responsibilities.ident}</p>
                      </div>
                      <div className="p-3 bg-white rounded border border-[#ebdada] shadow-sm">
                        <span className="text-xs font-bold text-[#912f46] block mb-2">QUALIFICATION</span>
                        <p className="text-sm text-gray-700">{role.responsibilities.qual}</p>
                      </div>
                      <div className="p-3 bg-white rounded border border-[#ebdada] shadow-sm">
                        <span className="text-xs font-bold text-[#912f46] block mb-2">CAPTURE</span>
                        <p className="text-sm text-gray-700">{role.responsibilities.capture}</p>
                      </div>
                      <div className="p-3 bg-white rounded border border-[#ebdada] shadow-sm">
                        <span className="text-xs font-bold text-[#912f46] block mb-2">PROPOSAL</span>
                        <p className="text-sm text-gray-700">{role.responsibilities.proposal}</p>
                      </div>
                      <div className="p-3 bg-white rounded border border-[#ebdada] shadow-sm">
                        <span className="text-xs font-bold text-[#912f46] block mb-2">CLOSE</span>
                        <p className="text-sm text-gray-700">{role.responsibilities.close}</p>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* RACI View */}
        {activeTab === 'raci' && (
          <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-[#e6dccf]">
            <div className="p-6 border-b border-[#e6dccf] bg-[#fff5f7] flex items-start gap-4">
              <Info className="text-[#912f46] shrink-0" />
              <p className="text-sm text-[#4a1925]">
                <strong>R</strong> = Responsible (Doer), <strong>A</strong> = Accountable (Buck Stops Here), <strong>C</strong> = Consulted (Two-way comms), <strong>I</strong> = Informed (One-way comms)
              </p>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="text-white" style={{ backgroundColor: colors.primary }}>
                    <th className="p-4 border-r border-[#a84d63]">Key Activity</th>
                    <th className="p-4 border-r border-[#a84d63] w-32 text-center">CEO</th>
                    <th className="p-4 border-r border-[#a84d63] w-32 text-center">VP Growth</th>
                    <th className="p-4 border-r border-[#a84d63] w-32 text-center">Capture Mgr</th>
                    <th className="p-4 border-r border-[#a84d63] w-32 text-center">Proposal Mgr</th>
                    <th className="p-4 w-32 text-center">Tech Lead</th>
                  </tr>
                </thead>
                <tbody>
                  {raciMatrix.map((row, idx) => (
                    <tr key={idx} className={idx % 2 === 0 ? 'bg-white' : 'bg-[#fffafc]'}>
                      <td className="p-4 font-medium border-b border-[#ebdada] text-[#4a1925]">{row.task}</td>
                      <td className="p-4 border-b border-[#ebdada] text-center font-bold text-[#912f46] border-l border-[#f5e6e6]">{row.ceo}</td>
                      <td className="p-4 border-b border-[#ebdada] text-center font-bold text-[#912f46] border-l border-[#f5e6e6]">{row.vp}</td>
                      <td className="p-4 border-b border-[#ebdada] text-center font-bold text-[#912f46] border-l border-[#f5e6e6]">{row.capture}</td>
                      <td className="p-4 border-b border-[#ebdada] text-center font-bold text-[#912f46] border-l border-[#f5e6e6]">{row.prop}</td>
                      <td className="p-4 border-b border-[#ebdada] text-center font-bold text-[#912f46] border-l border-[#f5e6e6]">{row.tech}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      <div className="max-w-7xl mx-auto mt-8 text-center text-[#912f46]/60 text-sm">
        <p>© 2025 Digital Modernization & AI Solutions Co. | Internal Use Only</p>
      </div>
    </div>
  );
};

export default BusinessDevelopmentMatrix;