salary-schema-visual.tsx

import React, { useState } from 'react';

const SalarySchema = () => {
  const [expandedSections, setExpandedSections] = useState({
    track: true,
    base: true,
    supplements: true,
    bonuses: true,
    special: true,
    onetime: true
  });

  const toggle = (section) => {
    setExpandedSections(prev => ({...prev, [section]: !prev[section]}));
  };

  const Section = ({ id, title, children, color = "blue" }) => {
    const colors = {
      blue: "bg-blue-600",
      green: "bg-green-600",
      purple: "bg-purple-600",
      orange: "bg-orange-500",
      red: "bg-red-600",
      teal: "bg-teal-600"
    };
    
    return (
      <div className="mb-4">
        <button 
          onClick={() => toggle(id)}
          className={`w-full ${colors[color]} text-white p-3 rounded-t-lg font-bold text-right flex justify-between items-center`}
        >
          <span>{expandedSections[id] ? '▼' : '◀'}</span>
          <span>{title}</span>
        </button>
        {expandedSections[id] && (
          <div className="border-2 border-t-0 rounded-b-lg p-4 bg-gray-50">
            {children}
          </div>
        )}
      </div>
    );
  };

  const Node = ({ label, children, condition, amount, date, section, highlight }) => (
    <div className={`mr-4 my-2 p-3 rounded-lg border-2 ${highlight ? 'border-yellow-400 bg-yellow-50' : 'border-gray-300 bg-white'}`}>
      <div className="font-semibold text-gray-800">{label}</div>
      {condition && <div className="text-sm text-blue-600 mt-1">תנאי: {condition}</div>}
      {amount && <div className="text-sm text-green-600 mt-1">סכום/שיעור: {amount}</div>}
      {date && <div className="text-sm text-orange-600 mt-1">תחולה: {date}</div>}
      {section && <div className="text-xs text-gray-500 mt-1">סעיף {section}</div>}
      {children && <div className="mr-4 mt-2 border-r-2 border-gray-300 pr-4">{children}</div>}
    </div>
  );

  const Branch = ({ condition, children }) => (
    <div className="flex items-start my-2">
      <div className="bg-gray-200 text-gray-700 px-2 py-1 rounded text-sm whitespace-nowrap ml-2">
        {condition}
      </div>
      <div className="flex-1">{children}</div>
    </div>
  );

  return (
    <div className="p-4 max-w-4xl mx-auto text-right" dir="rtl">
      <h1 className="text-2xl font-bold text-center mb-2">סכמת הסכם קיבוצי מורים 2022</h1>
      <p className="text-center text-gray-600 mb-6">תקופה: 1.1.2020 - 31.12.2026 | חתימה: 19.10.2022</p>
      
      {/* מסלול העסקה */}
      <Section id="track" title="1. מסלול העסקה" color="blue">
        <div className="flex gap-4">
          <div className="flex-1 bg-blue-100 p-4 rounded-lg">
            <h3 className="font-bold text-blue-800 mb-2">אופק חדש</h3>
            <ul className="text-sm space-y-1">
              <li>• טבלאות שכר: נספחים א1-א9</li>
              <li>• תוספת אופק 2022</li>
              <li>• גמולים מעודכנים</li>
              <li>• דרגות 1-10</li>
            </ul>
          </div>
          <div className="flex-1 bg-gray-100 p-4 rounded-lg">
            <h3 className="font-bold text-gray-800 mb-2">טרום רפורמה (עולם ישן)</h3>
            <ul className="text-sm space-y-1">
              <li>• טבלאות שכר ישנות</li>
              <li>• תוספת שקלית 500₪</li>
              <li>• גמולים ללא עדכון</li>
              <li>• דירוג ישן</li>
            </ul>
          </div>
        </div>
      </Section>

      {/* שכר בסיס */}
      <Section id="base" title="2. שכר בסיס (משולב)" color="green">
        <Node label="טבלת שכר משולב" section="4">
          <Branch condition="עד 31.8.2023">
            <Node label="נספחים א1-א8" amount="לפי דרגה וותק" />
          </Branch>
          <Branch condition="מ-1.9.2023">
            <Node label="נספח א9" amount="לפי דרגה וותק" highlight />
          </Branch>
        </Node>
      </Section>

      {/* תוספות קבועות */}
      <Section id="supplements" title="3. תוספות קבועות" color="purple">
        {/* אופק חדש */}
        <div className="mb-4 p-3 bg-blue-50 rounded-lg">
          <h3 className="font-bold text-blue-800 mb-3">אופק חדש בלבד</h3>
          
          <Node label="תוספת אופק 2022" section="5">
            <Branch condition="1.9.2022 - 31.8.2023">
              <Node label="נספחים ב1-ב7" amount="לפי דרגה × חלקיות משרה" />
            </Branch>
            <Branch condition="מ-1.9.2023">
              <Node label="נספחים ג1-ג7" amount="לפי דרגה × חלקיות משרה" highlight />
            </Branch>
            <div className="text-xs text-gray-600 mt-2 bg-white p-2 rounded">
              נכלל בחישוב: ערך שעה, פיצויים, פנסיה, קרן השתלמות, בסיס לתוספות אחוזיות
            </div>
          </Node>

          <Node label="תוספת אישית למנהלים" condition="מנהל זכאי לפי סעיף 72" section="6">
            <div className="text-sm bg-white p-2 rounded mt-2">
              <div className="font-semibold">נוסחה: C = A / B</div>
              <div>A = סכום שקלי קודם</div>
              <div>B = שכר משולב חדש</div>
              <div>C = שיעור חדש</div>
              <div className="text-orange-600 mt-1">מתעדכן בכל עדכון טבלת שכר</div>
            </div>
          </Node>
        </div>

        {/* טרום רפורמה */}
        <div className="mb-4 p-3 bg-gray-100 rounded-lg">
          <h3 className="font-bold text-gray-800 mb-3">טרום רפורמה בלבד</h3>
          
          <Node label="תוספת שקלית 2022" amount="500₪ למשרה מלאה" date="מ-1.9.2022" section="27">
            <div className="text-xs text-gray-600 mt-2 bg-white p-2 rounded">
              <div>• יחסי לחלקיות משרה</div>
              <div>• נכלל בתוספות אחוזיות (למעט 2001, 2008, 2011)</div>
              <div>• לא נכלל בהשלמה לשכר מינימום</div>
            </div>
          </Node>
        </div>

        {/* לכולם */}
        <div className="p-3 bg-green-50 rounded-lg">
          <h3 className="font-bold text-green-800 mb-3">לכל המסלולים</h3>
          
          <Node label="תוספת לגננת עמיתה" amount="10% מהשכר המשולב" date="מ-1.9.2023" section="15">
            <div className="text-sm mt-2">
              <div className="font-semibold text-red-600">תנאי זכאות (כולם במצטבר):</div>
              <ul className="text-xs bg-white p-2 rounded mt-1">
                <li>✗ לא מקבלת גמול ניהול גן (138א)</li>
                <li>✗ לא מקבלת גמול חינוך (138ב)</li>
                <li>✗ לא מקבלת גמול ניהול/ייעוץ נגרר</li>
                <li>✗ לא מקבלת גמול ניהול אשכול</li>
                <li>✗ לא מקבלת שמירת שכר</li>
              </ul>
            </div>
          </Node>
        </div>
      </Section>

      {/* גמולים */}
      <Section id="bonuses" title="4. גמולי תפקיד" color="orange">
        {/* טבלת גמולים */}
        <div className="overflow-x-auto">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="bg-orange-100">
                <th className="border p-2 text-right">גמול</th>
                <th className="border p-2">לפני 1.9.2023</th>
                <th className="border p-2">מ-1.9.2023</th>
                <th className="border p-2">מינימום שקלי</th>
                <th className="border p-2">סעיף</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border p-2 font-semibold">ייעוץ - רישיון זמני</td>
                <td className="border p-2 text-center">8%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">12%</td>
                <td className="border p-2 text-center">-</td>
                <td className="border p-2 text-center">7.1.1</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">ייעוץ - רישיון קבוע</td>
                <td className="border p-2 text-center">12%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">18%</td>
                <td className="border p-2 text-center">-</td>
                <td className="border p-2 text-center">7.1.2</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">סגנות</td>
                <td className="border p-2 text-center">13%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">20%</td>
                <td className="border p-2 text-center bg-green-50">1,100₪</td>
                <td className="border p-2 text-center">8, 10.4</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">ניהול חטיבה צעירה</td>
                <td className="border p-2 text-center">13%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">20%</td>
                <td className="border p-2 text-center bg-green-50">1,100₪</td>
                <td className="border p-2 text-center">9, 10.3</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">חינוך כיתה (לא א')</td>
                <td className="border p-2 text-center">10%</td>
                <td className="border p-2 text-center">10%</td>
                <td className="border p-2 text-center bg-green-50">1,000₪</td>
                <td className="border p-2 text-center">10.1</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">חינוך כיתה א'</td>
                <td className="border p-2 text-center">11.5%</td>
                <td className="border p-2 text-center">11.5%</td>
                <td className="border p-2 text-center bg-green-50">1,000₪</td>
                <td className="border p-2 text-center">10.1</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">רכז שכבה (עד 4 כיתות)</td>
                <td className="border p-2 text-center">7%</td>
                <td className="border p-2 text-center">7%</td>
                <td className="border p-2 text-center bg-green-50">1,100₪</td>
                <td className="border p-2 text-center">10.2</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">רכז שכבה (מעל 4 כיתות)</td>
                <td className="border p-2 text-center">6%</td>
                <td className="border p-2 text-center">6%</td>
                <td className="border p-2 text-center bg-green-50">1,100₪</td>
                <td className="border p-2 text-center">10.2</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">ניהול גן</td>
                <td className="border p-2 text-center">לפי 138(א)(1)</td>
                <td className="border p-2 text-center">לפי 138(א)(1)</td>
                <td className="border p-2 text-center bg-green-50">1,500₪</td>
                <td className="border p-2 text-center">10.5</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">רכז חינוך חברתי - יסודי</td>
                <td className="border p-2 text-center">6%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">8%</td>
                <td className="border p-2 text-center">-</td>
                <td className="border p-2 text-center">11.1</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">רכז חינוך חברתי - חט"ב</td>
                <td className="border p-2 text-center">10%</td>
                <td className="border p-2 text-center">10%</td>
                <td className="border p-2 text-center">-</td>
                <td className="border p-2 text-center">11.2</td>
              </tr>
              <tr>
                <td className="border p-2 font-semibold">רכז פדגוגי</td>
                <td className="border p-2 text-center">6%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">8%</td>
                <td className="border p-2 text-center">-</td>
                <td className="border p-2 text-center">12</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div className="mt-4 p-3 bg-blue-50 rounded text-sm">
          <strong>כלל המינימום (מ-1.9.2023):</strong> הגמול = MAX(אחוז × שכר משולב, סכום מינימום)
        </div>
        
        <div className="mt-2 p-3 bg-red-50 rounded text-sm">
          <strong>מגבלה (סעיף 39ב):</strong> מקסימום 3 גמולי תפקיד, אלא אם אחד מהם "תפקיד בית ספרי" - אז לא נדרש אישור
        </div>
      </Section>

      {/* חינוך מיוחד */}
      <Section id="special" title="5. גמול חינוך מיוחד" color="red">
        <div className="overflow-x-auto">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="bg-red-100">
                <th className="border p-2 text-right">קטגוריה</th>
                <th className="border p-2">לפני 1.9.2023</th>
                <th className="border p-2">מ-1.9.2023</th>
                <th className="border p-2">סעיף</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border p-2">חינוך מיוחד רגיל (היה 9%)</td>
                <td className="border p-2 text-center">9%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">10%</td>
                <td className="border p-2 text-center">17.1.1</td>
              </tr>
              <tr>
                <td className="border p-2">חינוך מיוחד (היה 14%)</td>
                <td className="border p-2 text-center">14%</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">15%</td>
                <td className="border p-2 text-center">17.1.2</td>
              </tr>
              <tr className="bg-red-50">
                <td className="border p-2 font-semibold">כיתת אוטיזם / הפרעות נפשיות קשות</td>
                <td className="border p-2 text-center">14%</td>
                <td className="border p-2 text-center bg-yellow-100 font-bold">17%</td>
                <td className="border p-2 text-center">17.1.3</td>
              </tr>
              <tr className="bg-purple-50">
                <td className="border p-2 font-semibold">מתי"א זכאי (ללא גמול מחנך)</td>
                <td className="border p-2 text-center">9%</td>
                <td className="border p-2 text-center bg-yellow-100 font-bold">15%</td>
                <td className="border p-2 text-center">17.1.4</td>
              </tr>
              <tr className="bg-purple-100">
                <td className="border p-2 font-semibold">מתי"א זכאי + אוטיזם/נפשי</td>
                <td className="border p-2 text-center">9%</td>
                <td className="border p-2 text-center bg-yellow-100 font-bold">17%</td>
                <td className="border p-2 text-center">17.1.5</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div className="mt-4 p-3 bg-purple-50 rounded">
          <strong>הגדרת "מתי"א זכאי":</strong> מורה במתי"א שאינו זכאי לגמול מחנך כיתה לפי סעיף 50/37
        </div>
      </Section>

      {/* גמול תפקיד בית ספרי */}
      <Section id="schoolrole" title="6. גמול תפקיד בית ספרי (מ-1.9.2025)" color="teal">
        <Node label="גמול תפקיד בית ספרי" date="מ-1.9.2025 (שנת תשפ״ו)" section="22">
          <div className="bg-white p-3 rounded mt-2">
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <div className="font-semibold text-teal-700">פרמטרים:</div>
                <ul className="mt-1">
                  <li>• יחידות: 2-5</li>
                  <li>• ערך יחידה: 200₪</li>
                  <li>• מקסימום: 1,000₪</li>
                </ul>
              </div>
              <div>
                <div className="font-semibold text-red-600">תנאי זכאות:</div>
                <ul className="mt-1">
                  <li>• חלקיות משרה ≥ 33.33%</li>
                  <li>• לא למנהלים</li>
                  <li>• מינוי לשנה מלאה</li>
                </ul>
              </div>
            </div>
            <div className="mt-3 p-2 bg-gray-100 rounded text-xs">
              <strong>נכלל בחישוב:</strong> ערך שעה, פיצויים, פנסיה | 
              <strong className="text-red-600"> לא נכלל:</strong> קרן השתלמות, בסיס לתוספות
            </div>
          </div>
        </Node>
      </Section>

      {/* תשלומים חד פעמיים */}
      <Section id="onetime" title="7. תשלומים חד-פעמיים ומיוחדים" color="blue">
        <Node label="מענק שימור" amount="עד 10,000₪" section="21">
          <div className="bg-white p-3 rounded mt-2 text-sm">
            <div className="font-semibold text-red-600 mb-2">תנאי זכאות (כולם במצטבר):</div>
            <ul className="space-y-1">
              <li>✓ התחיל עבודה מ-1.9.2023 ואילך</li>
              <li>✓ אופק חדש בלבד</li>
              <li>✓ אין ותק הוראה קודם בפועל</li>
              <li>✓ העסקה רציפה עד קביעות</li>
              <li>✓ חלקיות ≥70% במועד הקביעות</li>
            </ul>
            <div className="mt-3 p-2 bg-yellow-50 rounded">
              <strong>חישוב:</strong> 10,000 × חלקיות משוקללת ב-36 חודשים<br/>
              <span className="text-xs">לא כולל: לידה/הורות, מילואים, מחלה ללא שכר</span>
            </div>
            <div className="mt-2 p-2 bg-red-50 rounded text-xs">
              <strong>לא נכלל בחישוב:</strong> ערך שעה, פיצויים, פנסיה, קרן השתלמות, שכר מינימום
            </div>
          </div>
        </Node>

        <Node label="קצובת ביגוד לפיזיותרפיסטים" amount="800₪ נוספים" date="מ-1.9.2023" section="18">
          <div className="text-sm mt-2">
            • משולם ביולי, בנוסף לקצובה הקיימת
          </div>
        </Node>

        <Node label="ימי חופשה" date="משנת תשפ״ד" section="29">
          <div className="bg-white p-3 rounded mt-2 text-sm">
            <table className="w-full text-xs">
              <thead>
                <tr className="bg-gray-100">
                  <th className="border p-1">מצב</th>
                  <th className="border p-1">ימי חופשה</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="border p-1">שנת לימודים מלאה</td>
                  <td className="border p-1 text-center font-bold">2 ימים</td>
                </tr>
                <tr>
                  <td className="border p-1">עבד בי"ג אדר או יום ראשון לחופשת חורף</td>
                  <td className="border p-1 text-center">1 יום</td>
                </tr>
                <tr>
                  <td className="border p-1">עבד בל"ג בעומר או יום ראשון לחופשת אביב</td>
                  <td className="border p-1 text-center">1 יום נוסף</td>
                </tr>
              </tbody>
            </table>
          </div>
        </Node>
      </Section>

      {/* חלקיות משרה */}
      <Section id="position" title="8. דרישות חלקיות משרה" color="purple">
        <div className="overflow-x-auto">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="bg-purple-100">
                <th className="border p-2 text-right">תאריך</th>
                <th className="border p-2">חלקיות מינימלית</th>
                <th className="border p-2">סעיף</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border p-2">עד 31.8.2023</td>
                <td className="border p-2 text-center">50%</td>
                <td className="border p-2 text-center">27(ג) מקורי</td>
              </tr>
              <tr>
                <td className="border p-2">1.9.2023 - 31.8.2024</td>
                <td className="border p-2 text-center bg-yellow-50 font-bold">70%</td>
                <td className="border p-2 text-center">26.1</td>
              </tr>
              <tr>
                <td className="border p-2">מ-1.9.2024</td>
                <td className="border p-2 text-center bg-yellow-100 font-bold">80%</td>
                <td className="border p-2 text-center">26.1</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="mt-2 p-2 bg-blue-50 rounded text-sm">
          <strong>חריג:</strong> לא חל על עובדים לפי סעיפים 27(ד) ו-27(ה) להסכם אופק חדש
        </div>
      </Section>

      {/* פעילויות בית ספריות */}
      <Section id="activities" title="9. פעילויות בית ספריות וטיולים" color="green">
        <Node label="שעות פעילות בית ספרית" section="16">
          <div className="bg-white p-3 rounded mt-2 text-sm">
            <div className="font-semibold">מ-1.9.2023:</div>
            <ul className="mt-1">
              <li>• הוגדל מ-18 ל-<strong>40 שעות</strong> לשנה</li>
              <li>• בוטלה חלוקה למחציות</li>
              <li>• נוסף: מפגש בעלי תפקידים/תלמידים לקראת פתיחת שנה (עד 3 שעות)</li>
            </ul>
          </div>
        </Node>

        <Node label="גמול ליווי טיולים" section="13">
          <div className="bg-white p-3 rounded mt-2 text-sm">
            <div className="font-semibold">מ-1.9.2023:</div>
            <ul className="mt-1">
              <li>• יחידת פעילות = <strong>0.7%</strong> מהשכר המשולב</li>
              <li>• שינוי: "פחות מ-4 שעות" → "פחות מ-<strong>7 שעות</strong>"</li>
            </ul>
          </div>
        </Node>

        <Node label="יום היערכות" section="14">
          <div className="bg-white p-3 rounded mt-2 text-sm">
            <strong>מורים:</strong> עד 6 שעות (2 פרטניות + 4 שהייה)<br/>
            <strong>גננות:</strong> מפגש פיתוח מקצועי באוגוסט (נספר בשנה הבאה)
          </div>
        </Node>
      </Section>

      {/* הערות */}
      <div className="mt-6 p-4 bg-gray-100 rounded-lg text-sm">
        <h3 className="font-bold mb-2">הערות חשובות:</h3>
        <ul className="space-y-1">
          <li>• <strong>גמולים שלא השתנו בטרום רפורמה:</strong> כל עדכוני הגמולים חלים רק על אופק חדש</li>
          <li>• <strong>מינימום שקלי:</strong> חל רק מ-1.9.2023 ורק על הגמולים המפורטים</li>
          <li>• <strong>קרן רווחה:</strong> תקציב נוסף של 17 מיליון ₪ מ-1.9.2023</li>
          <li>• <strong>גמול שילוב (סעיף 24):</strong> ייקבע עד 31.12.2023, ישולם מ-1.9.2024</li>
          <li>• <strong>גמול פיצול (סעיף 25):</strong> ייקבע עד 31.12.2023, ישולם מ-1.9.2024</li>
        </ul>
      </div>
    </div>
  );
};

export default SalarySchema;