Ideone.com

fork download

copy

import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, TrendingUp, BarChart4, PieChart, DollarSign, Briefcase, Target } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, BarChart, Bar, PieChart as RechartPieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 
const InvestmentPlanPresentation = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
 
  const totalSlides = 12;
 
  const goToNextSlide = () => {
    setCurrentSlide((prev) => (prev < totalSlides - 1 ? prev + 1 : prev));
  };
 
  const goToPrevSlide = () => {
    setCurrentSlide((prev) => (prev > 0 ? prev - 1 : prev));
  };
 
  // ข้อมูลสำหรับกราฟต่างๆ
  const salaryData = [
    { age: 23, salary: 240000, position: 'Financial Analyst' },
    { age: 25, salary: 274776, position: 'Financial Analyst' },
    { age: 30, salary: 385392, position: 'Senior Financial Analyst' },
    { age: 35, salary: 491832, position: 'Finance Manager' },
    { age: 40, salary: 626940, position: 'Senior Finance Manager' },
    { age: 45, salary: 727416, position: 'Finance Director' },
    { age: 50, salary: 843000, position: 'VP of Finance' },
    { age: 55, salary: 930744, position: 'CFO' },
    { age: 60, salary: 1027608, position: 'CFO' }
  ];
 
  const portfolioGrowthData = [
    { age: 23, value: 38880 },
    { age: 25, value: 127053 },
    { age: 30, value: 650000 },
    { age: 35, value: 1700000 },
    { age: 40, value: 3200000 },
    { age: 45, value: 5500000 },
    { age: 50, value: 7500000 },
    { age: 55, value: 14000000 },
    { age: 60, value: 23000000 }
  ];
 
  const allocationData = [
    { name: 'ETF', value: 50 },
    { name: 'หุ้น', value: 20 },
    { name: 'REITs', value: 10 },
    { name: 'พันธบัตร', value: 10 },
    { name: 'ทอง/คริปโต', value: 10 }
  ];
 
  const expenseData = [
    { name: 'ค่ากินอยู่', value: 30 },
    { name: 'ค่าผ่อนบ้าน/รถ', value: 20 },
    { name: 'ค่าใช้จ่ายส่วนตัว', value: 15 },
    { name: 'ค่าประกันและสุขภาพ', value: 10 },
    { name: 'เงินออมและลงทุน', value: 15 },
    { name: 'ภาษีและกองทุน', value: 10 }
  ];
 
  const careerPathData = [
    { position: 'Financial Analyst', ageRange: '23-29', salary: '20,000-30,200 บาท' },
    { position: 'Senior Financial Analyst', ageRange: '30-34', salary: '32,100-39,200 บาท' },
    { position: 'Finance Manager', ageRange: '35-39', salary: '41,000-50,000 บาท' },
    { position: 'Senior Finance Manager', ageRange: '40-44', salary: '52,200-58,900 บาท' },
    { position: 'Finance Director', ageRange: '45-49', salary: '60,600-68,300 บาท' },
    { position: 'VP of Finance', ageRange: '50-54', salary: '70,200-76,100 บาท' },
    { position: 'CFO', ageRange: '55-60', salary: '77,600-85,600 บาท' }
  ];
 
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
 
  const formatMoney = (amount) => {
    return new Intl.NumberFormat('th-TH').format(amount);
  };
 
  const renderSlide = () => {
    switch (currentSlide) {
      // สไลด์ที่ 1: ปกนำเสนอ
      case 0:
        return (
          <div className="flex flex-col items-center justify-center h-full text-center">
            <div className="mb-8">
              <DollarSign size={64} className="text-blue-600 mx-auto mb-4" />
            </div>
            <h1 className="text-4xl font-bold text-blue-800 mb-4">การวางแผนการลงทุนทางการเงินระยะยาว</h1>
            <h2 className="text-2xl text-blue-600 mb-10">กลยุทธ์การสร้างความมั่งคั่งตามช่วงอายุและระดับรายได้</h2>
            <div className="mt-16">
              <p className="text-lg">วันที่ 31 มีนาคม 2025</p>
              <p className="text-lg mt-2">ฝ่ายวางแผนการลงทุน</p>
            </div>
          </div>
        );
 
      // สไลด์ที่ 2: บทนำและวัตถุประสงค์
      case 1:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">วัตถุประสงค์การนำเสนอ</h2>
            <div className="bg-blue-50 p-6 rounded-lg shadow-md">
              <ul className="space-y-4">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><Target size={24} /></div>
                  <p>นำเสนอแผนการลงทุนตั้งแต่อายุ 23-60 ปี</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><PieChart size={24} /></div>
                  <p>วิเคราะห์รูปแบบการจัดสรรเงินลงทุนในสินทรัพย์ประเภทต่างๆ</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><TrendingUp size={24} /></div>
                  <p>แสดงการเติบโตของพอร์ตโฟลิโอและความมั่งคั่งระยะยาว</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><BarChart4 size={24} /></div>
                  <p>นำเสนอกลยุทธ์การบริหารรายได้และรายจ่าย</p>
                </li>
              </ul>
            </div>
            <div className="mt-8 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded">
              <p className="text-lg">การวางแผนการลงทุนที่ดีจะช่วยให้คุณสร้างความมั่งคั่งได้อย่างมีประสิทธิภาพและบรรลุเป้าหมายทางการเงินในระยะยาว</p>
            </div>
          </div>
        );
 
      // สไลด์ที่ 3: ภาพรวมของข้อมูล
      case 2:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">ภาพรวมการวางแผนการเงิน</h2>
            <div className="mb-4">
              <p className="mb-4">ความสัมพันธ์ระหว่างอายุกับระดับเงินเดือน และการเติบโตของตำแหน่งงาน</p>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={salaryData}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="age" />
                    <YAxis />
                    <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'เงินเดือนต่อปี']} />
                    <Legend />
                    <Line type="monotone" dataKey="salary" stroke="#8884d8" activeDot={{ r: 8 }} name="เงินเดือนต่อปี (บาท)" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div className="mt-6 p-4 bg-blue-50 rounded-lg">
              <h3 className="font-semibold mb-2">การเติบโตของตำแหน่งงาน:</h3>
              <p>Financial Analyst → Senior Financial Analyst → Finance Manager → Senior Finance Manager → Finance Director → VP of Finance → CFO</p>
            </div>
          </div>
        );
 
      // สไลด์ที่ 4: การจัดสรรรายได้
      case 3:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การจัดสรรรายได้ประจำปี</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <RechartPieChart>
                    <Pie
                      data={expenseData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {expenseData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartPieChart>
                </ResponsiveContainer>
              </div>
              <div>
                <h3 className="font-semibold mb-3">สัดส่วนการจัดสรรรายได้</h3>
                <ul className="space-y-2">
                  {expenseData.map((item, index) => (
                    <li key={index} className="flex items-center">
                      <div className="w-4 h-4 mr-2" style={{ backgroundColor: COLORS[index % COLORS.length] }}></div>
                      <span>{item.name}: {item.value}%</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 p-3 bg-blue-50 rounded">
                  <p>การจัดสรรรายได้อย่างสมดุลช่วยให้มีเงินเพียงพอสำหรับการใช้จ่ายปัจจุบันและการสร้างความมั่งคั่งในอนาคต</p>
                </div>
              </div>
            </div>
          </div>
        );
 
      // สไลด์ที่ 5: กลยุทธ์การลงทุน
      case 4:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การจัดสรรเงินลงทุน</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <RechartPieChart>
                    <Pie
                      data={allocationData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {allocationData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartPieChart>
                </ResponsiveContainer>
              </div>
              <div>
                <h3 className="font-semibold mb-3">สัดส่วนการลงทุนในสินทรัพย์ต่างๆ</h3>
                <ul className="space-y-2">
                  {allocationData.map((item, index) => (
                    <li key={index} className="flex items-center">
                      <div className="w-4 h-4 mr-2" style={{ backgroundColor: COLORS[index % COLORS.length] }}></div>
                      <span>{item.name}: {item.value}%</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 p-3 bg-blue-50 rounded">
                  <p>การกระจายการลงทุนช่วยลดความเสี่ยงและเพิ่มโอกาสในการได้รับผลตอบแทนที่มั่นคงในระยะยาว</p>
                </div>
              </div>
            </div>
          </div>
        );
 
      // สไลด์ที่ 6: การเติบโตของรายได้และตำแหน่ง
      case 5:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">เส้นทางความก้าวหน้าในอาชีพและรายได้</h2>
            <div className="overflow-auto h-64 mb-6">
              <table className="min-w-full bg-white border">
                <thead className="bg-blue-100">
                  <tr>
                    <th className="py-2 px-4 border">ตำแหน่ง</th>
                    <th className="py-2 px-4 border">ช่วงอายุ</th>
                    <th className="py-2 px-4 border">เงินเดือนโดยประมาณ</th>
                  </tr>
                </thead>
                <tbody>
                  {careerPathData.map((item, index) => (
                    <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                      <td className="py-2 px-4 border font-medium">{item.position}</td>
                      <td className="py-2 px-4 border text-center">{item.ageRange}</td>
                      <td className="py-2 px-4 border text-right">{item.salary}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="p-4 bg-blue-50 rounded-lg">
              <p><span className="font-medium">ข้อสังเกต:</span> อัตราการเติบโตของเงินเดือนจะสูงในช่วงต้นของอาชีพ (7-8% ต่อปี) และค่อยๆ ลดลงในช่วงปลาย (2-3% ต่อปี) แต่ฐานเงินเดือนที่สูงขึ้นทำให้รายได้รวมยังคงเพิ่มขึ้นอย่างมีนัยสำคัญ</p>
            </div>
          </div>
        );
 
      // สไลด์ที่ 7: การเติบโตของรายได้และตำแหน่ง (ต่อ)
      case 6:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การเติบโตของรายได้ตามช่วงอายุ</h2>
            <div className="h-64 mb-6">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={salaryData}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="age" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'เงินเดือนต่อปี']} />
                  <Legend />
                  <Bar dataKey="salary" name="เงินเดือนต่อปี (บาท)" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            </div>
            <div className="grid grid-cols-3 gap-4 mt-4">
              <div className="p-4 bg-blue-50 rounded-lg text-center">
                <p className="font-medium">ช่วงต้นอาชีพ (23-35 ปี)</p>
                <p>อัตราเติบโต: 5-8% ต่อปี</p>
              </div>
              <div className="p-4 bg-green-50 rounded-lg text-center">
                <p className="font-medium">ช่วงกลางอาชีพ (36-45 ปี)</p>
                <p>อัตราเติบโต: 3-5% ต่อปี</p>
              </div>
              <div className="p-4 bg-yellow-50 rounded-lg text-center">
                <p className="font-medium">ช่วงปลายอาชีพ (46-60 ปี)</p>
                <p>อัตราเติบโต: 2-3% ต่อปี</p>
              </div>
            </div>
          </div>
        );
 
      // สไลด์ที่ 8: การเติบโตของพอร์ตการลงทุน
      case 7:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การเติบโตของพอร์ตการลงทุน</h2>
            <div className="h-64 mb-6">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart
                  data={portfolioGrowthData}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="age" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'มูลค่าพอร์ต']} />
                  <Legend />
                  <Line type="monotone" dataKey="value" stroke="#00C49F" activeDot={{ r: 8 }} name="มูลค่าพอร์ตสะสม (บาท)" />
                </LineChart>
              </ResponsiveContainer>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <p className="font-medium mb-2">ข้อสังเกตสำคัญ:</p>
              <p>มูลค่าพอร์ตการลงทุนมีการเติบโตแบบก้าวกระโดดในช่วงอายุ 45-60 ปี ซึ่งเป็นผลมาจากการสะสมเงินลงทุนอย่างต่อเนื่องรวมกับผลตอบแทนที่ทบต้น (Compound Effect) ที่ชัดเจนมากขึ้นเมื่อเวลาผ่านไป</p>
            </div>
          </div>
        );
 
      // สไลด์ที่ 9: การเติบโตของพอร์ตการลงทุน (ต่อ)
      case 8:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">มูลค่าพอร์ตสะสมตามช่วงอายุสำคัญ</h2>
            <div className="grid grid-cols-2 gap-6">
              <div className="col-span-2 mb-4">
                <p className="mb-2">มูลค่าพอร์ตการลงทุนเติบโตแบบทวีคูณด้วยอัตราผลตอบแทนเฉลี่ย 8% ต่อปี</p>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 30 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(650000)} บาท</p>
                  <p className="text-sm mt-1">ช่วงเริ่มต้นการสะสมความมั่งคั่ง</p>
                </div>
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 40 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(3200000)} บาท</p>
                  <p className="text-sm mt-1">การเติบโตของพอร์ตเริ่มมีนัยสำคัญ</p>
                </div>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 50 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(7500000)} บาท</p>
                  <p className="text-sm mt-1">ผลของการลงทุนระยะยาวเริ่มชัดเจน</p>
                </div>
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 60 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(23000000)} บาท</p>
                  <p className="text-sm mt-1">เป้าหมายความมั่งคั่งก่อนเกษียณ</p>
                </div>
              </div>
            </div>
          </div>
        );
 
      // สไลด์ที่ 10: จุดเปลี่ยนทางการเงินที่สำคัญ
      case 9:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">จุดเปลี่ยนสำคัญในเส้นทางการเงิน</h2>
            <div className="space-y-4">
              <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 35 ปี</h3>
                  <Briefcase size={32} className="text-blue-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น Finance Manager</p>
                  <p>พอร์ตลงทุนมูลค่า 1.7 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 41,000 บาท/เดือน</p>
                </div>
              </div>
 
              <div className="p-4 bg-green-50 rounded-lg border-l-4 border-green-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 45 ปี</h3>
                  <Briefcase size={32} className="text-green-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น Finance Director</p>
                  <p>พอร์ตลงทุนมูลค่า 5.5 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 60,600 บาท/เดือน</p>
                </div>
              </div>
 
              <div className="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 55 ปี</h3>
                  <Briefcase size={32} className="text-yellow-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น CFO</p>
                  <p>พอร์ตลงทุนมูลค่า 14 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 77,600 บาท/เดือน</p>
                </div>
              </div>
 
              <div className="p-4 bg-purple-50 rounded-lg border-l-4 border-purple-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 60 ปี</h3>
                  <DollarSign size={32} className="text-purple-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">เกษียณอายุ</p>
                  <p>พอร์ตลงทุนมูลค่า 23 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">สามารถใช้ผลตอบแทนจากการลงทุนเป็นรายได้หลังเกษียณ</p>
                </div>
              </div>
            </div>
          </div>
        );
 
      // สไลด์ที่ 11: ปัจจัยความสำเร็จ
      case 10:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">ปัจจัยสู่ความสำเร็จทางการเงิน</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 bg-blue-50 rounded-lg shadow-sm">
                <h3 className="font-semibold text-lg mb-2 flex items-center">
                  <span className="mr-2 text-blue-600"><DollarSign size

aW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnOwppbXBvcnQgeyBDaGV2cm9uTGVmdCwgQ2hldnJvblJpZ2h0LCBUcmVuZGluZ1VwLCBCYXJDaGFydDQsIFBpZUNoYXJ0LCBEb2xsYXJTaWduLCBCcmllZmNhc2UsIFRhcmdldCB9IGZyb20gJ2x1Y2lkZS1yZWFjdCc7CmltcG9ydCB7IExpbmVDaGFydCwgTGluZSwgWEF4aXMsIFlBeGlzLCBDYXJ0ZXNpYW5HcmlkLCBUb29sdGlwLCBMZWdlbmQsIEJhckNoYXJ0LCBCYXIsIFBpZUNoYXJ0IGFzIFJlY2hhcnRQaWVDaGFydCwgUGllLCBDZWxsLCBSZXNwb25zaXZlQ29udGFpbmVyIH0gZnJvbSAncmVjaGFydHMnOwoKY29uc3QgSW52ZXN0bWVudFBsYW5QcmVzZW50YXRpb24gPSAoKSA9PiB7CiAgY29uc3QgW2N1cnJlbnRTbGlkZSwgc2V0Q3VycmVudFNsaWRlXSA9IHVzZVN0YXRlKDApOwogIAogIGNvbnN0IHRvdGFsU2xpZGVzID0gMTI7CiAgCiAgY29uc3QgZ29Ub05leHRTbGlkZSA9ICgpID0+IHsKICAgIHNldEN1cnJlbnRTbGlkZSgocHJldikgPT4gKHByZXYgPCB0b3RhbFNsaWRlcyAtIDEgPyBwcmV2ICsgMSA6IHByZXYpKTsKICB9OwogIAogIGNvbnN0IGdvVG9QcmV2U2xpZGUgPSAoKSA9PiB7CiAgICBzZXRDdXJyZW50U2xpZGUoKHByZXYpID0+IChwcmV2ID4gMCA/IHByZXYgLSAxIDogcHJldikpOwogIH07CiAgCiAgLy8g4LiC4LmJ4Lit4Lih4Li54Lil4Liq4Liz4Lir4Lij4Lix4Lia4LiB4Lij4Liy4Lif4LiV4LmI4Liy4LiH4LmGCiAgY29uc3Qgc2FsYXJ5RGF0YSA9IFsKICAgIHsgYWdlOiAyMywgc2FsYXJ5OiAyNDAwMDAsIHBvc2l0aW9uOiAnRmluYW5jaWFsIEFuYWx5c3QnIH0sCiAgICB7IGFnZTogMjUsIHNhbGFyeTogMjc0Nzc2LCBwb3NpdGlvbjogJ0ZpbmFuY2lhbCBBbmFseXN0JyB9LAogICAgeyBhZ2U6IDMwLCBzYWxhcnk6IDM4NTM5MiwgcG9zaXRpb246ICdTZW5pb3IgRmluYW5jaWFsIEFuYWx5c3QnIH0sCiAgICB7IGFnZTogMzUsIHNhbGFyeTogNDkxODMyLCBwb3NpdGlvbjogJ0ZpbmFuY2UgTWFuYWdlcicgfSwKICAgIHsgYWdlOiA0MCwgc2FsYXJ5OiA2MjY5NDAsIHBvc2l0aW9uOiAnU2VuaW9yIEZpbmFuY2UgTWFuYWdlcicgfSwKICAgIHsgYWdlOiA0NSwgc2FsYXJ5OiA3Mjc0MTYsIHBvc2l0aW9uOiAnRmluYW5jZSBEaXJlY3RvcicgfSwKICAgIHsgYWdlOiA1MCwgc2FsYXJ5OiA4NDMwMDAsIHBvc2l0aW9uOiAnVlAgb2YgRmluYW5jZScgfSwKICAgIHsgYWdlOiA1NSwgc2FsYXJ5OiA5MzA3NDQsIHBvc2l0aW9uOiAnQ0ZPJyB9LAogICAgeyBhZ2U6IDYwLCBzYWxhcnk6IDEwMjc2MDgsIHBvc2l0aW9uOiAnQ0ZPJyB9CiAgXTsKICAKICBjb25zdCBwb3J0Zm9saW9Hcm93dGhEYXRhID0gWwogICAgeyBhZ2U6IDIzLCB2YWx1ZTogMzg4ODAgfSwKICAgIHsgYWdlOiAyNSwgdmFsdWU6IDEyNzA1MyB9LAogICAgeyBhZ2U6IDMwLCB2YWx1ZTogNjUwMDAwIH0sCiAgICB7IGFnZTogMzUsIHZhbHVlOiAxNzAwMDAwIH0sCiAgICB7IGFnZTogNDAsIHZhbHVlOiAzMjAwMDAwIH0sCiAgICB7IGFnZTogNDUsIHZhbHVlOiA1NTAwMDAwIH0sCiAgICB7IGFnZTogNTAsIHZhbHVlOiA3NTAwMDAwIH0sCiAgICB7IGFnZTogNTUsIHZhbHVlOiAxNDAwMDAwMCB9LAogICAgeyBhZ2U6IDYwLCB2YWx1ZTogMjMwMDAwMDAgfQogIF07CiAgCiAgY29uc3QgYWxsb2NhdGlvbkRhdGEgPSBbCiAgICB7IG5hbWU6ICdFVEYnLCB2YWx1ZTogNTAgfSwKICAgIHsgbmFtZTogJ+C4q+C4uOC5ieC4mScsIHZhbHVlOiAyMCB9LAogICAgeyBuYW1lOiAnUkVJVHMnLCB2YWx1ZTogMTAgfSwKICAgIHsgbmFtZTogJ+C4nuC4seC4meC4mOC4muC4seC4leC4oycsIHZhbHVlOiAxMCB9LAogICAgeyBuYW1lOiAn4LiX4Lit4LiHL+C4hOC4o+C4tOC4m+C5guC4lScsIHZhbHVlOiAxMCB9CiAgXTsKICAKICBjb25zdCBleHBlbnNlRGF0YSA9IFsKICAgIHsgbmFtZTogJ+C4hOC5iOC4suC4geC4tOC4meC4reC4ouC4ueC5iCcsIHZhbHVlOiAzMCB9LAogICAgeyBuYW1lOiAn4LiE4LmI4Liy4Lic4LmI4Lit4LiZ4Lia4LmJ4Liy4LiZL+C4o+C4licsIHZhbHVlOiAyMCB9LAogICAgeyBuYW1lOiAn4LiE4LmI4Liy4LmD4LiK4LmJ4LiI4LmI4Liy4Lii4Liq4LmI4Lin4LiZ4LiV4Lix4LinJywgdmFsdWU6IDE1IH0sCiAgICB7IG5hbWU6ICfguITguYjguLLguJvguKPguLDguIHguLHguJnguYHguKXguLDguKrguLjguILguKDguLLguJ4nLCB2YWx1ZTogMTAgfSwKICAgIHsgbmFtZTogJ+C5gOC4h+C4tOC4meC4reC4reC4oeC5geC4peC4sOC4peC4h+C4l+C4uOC4mScsIHZhbHVlOiAxNSB9LAogICAgeyBuYW1lOiAn4Lig4Liy4Lip4Li14LmB4Lil4Liw4LiB4Lit4LiH4LiX4Li44LiZJywgdmFsdWU6IDEwIH0KICBdOwogIAogIGNvbnN0IGNhcmVlclBhdGhEYXRhID0gWwogICAgeyBwb3NpdGlvbjogJ0ZpbmFuY2lhbCBBbmFseXN0JywgYWdlUmFuZ2U6ICcyMy0yOScsIHNhbGFyeTogJzIwLDAwMC0zMCwyMDAg4Lia4Liy4LiXJyB9LAogICAgeyBwb3NpdGlvbjogJ1NlbmlvciBGaW5hbmNpYWwgQW5hbHlzdCcsIGFnZVJhbmdlOiAnMzAtMzQnLCBzYWxhcnk6ICczMiwxMDAtMzksMjAwIOC4muC4suC4lycgfSwKICAgIHsgcG9zaXRpb246ICdGaW5hbmNlIE1hbmFnZXInLCBhZ2VSYW5nZTogJzM1LTM5Jywgc2FsYXJ5OiAnNDEsMDAwLTUwLDAwMCDguJrguLLguJcnIH0sCiAgICB7IHBvc2l0aW9uOiAnU2VuaW9yIEZpbmFuY2UgTWFuYWdlcicsIGFnZVJhbmdlOiAnNDAtNDQnLCBzYWxhcnk6ICc1MiwyMDAtNTgsOTAwIOC4muC4suC4lycgfSwKICAgIHsgcG9zaXRpb246ICdGaW5hbmNlIERpcmVjdG9yJywgYWdlUmFuZ2U6ICc0NS00OScsIHNhbGFyeTogJzYwLDYwMC02OCwzMDAg4Lia4Liy4LiXJyB9LAogICAgeyBwb3NpdGlvbjogJ1ZQIG9mIEZpbmFuY2UnLCBhZ2VSYW5nZTogJzUwLTU0Jywgc2FsYXJ5OiAnNzAsMjAwLTc2LDEwMCDguJrguLLguJcnIH0sCiAgICB7IHBvc2l0aW9uOiAnQ0ZPJywgYWdlUmFuZ2U6ICc1NS02MCcsIHNhbGFyeTogJzc3LDYwMC04NSw2MDAg4Lia4Liy4LiXJyB9CiAgXTsKICAKICBjb25zdCBDT0xPUlMgPSBbJyMwMDg4RkUnLCAnIzAwQzQ5RicsICcjRkZCQjI4JywgJyNGRjgwNDInLCAnIzg4ODRkOCcsICcjODJjYTlkJ107CiAgCiAgY29uc3QgZm9ybWF0TW9uZXkgPSAoYW1vdW50KSA9PiB7CiAgICByZXR1cm4gbmV3IEludGwuTnVtYmVyRm9ybWF0KCd0aC1USCcpLmZvcm1hdChhbW91bnQpOwogIH07CiAgCiAgY29uc3QgcmVuZGVyU2xpZGUgPSAoKSA9PiB7CiAgICBzd2l0Y2ggKGN1cnJlbnRTbGlkZSkgewogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggMTog4Lib4LiB4LiZ4Liz4LmA4Liq4LiZ4LitCiAgICAgIGNhc2UgMDoKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGgtZnVsbCB0ZXh0LWNlbnRlciI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJtYi04Ij4KICAgICAgICAgICAgICA8RG9sbGFyU2lnbiBzaXplPXs2NH0gY2xhc3NOYW1lPSJ0ZXh0LWJsdWUtNjAwIG14LWF1dG8gbWItNCIgLz4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxoMSBjbGFzc05hbWU9InRleHQtNHhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTQiPuC4geC4suC4o+C4p+C4suC4h+C5geC4nOC4meC4geC4suC4o+C4peC4h+C4l+C4uOC4meC4l+C4suC4h+C4geC4suC4o+C5gOC4h+C4tOC4meC4o+C4sOC4ouC4sOC4ouC4suC4pzwvaDE+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIHRleHQtYmx1ZS02MDAgbWItMTAiPuC4geC4peC4ouC4uOC4l+C4mOC5jOC4geC4suC4o+C4quC4o+C5ieC4suC4h+C4hOC4p+C4suC4oeC4oeC4seC5iOC4h+C4hOC4seC5iOC4h+C4leC4suC4oeC4iuC5iOC4p+C4h+C4reC4suC4ouC4uOC5geC4peC4sOC4o+C4sOC4lOC4seC4muC4o+C4suC4ouC5hOC4lOC5iTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJtdC0xNiI+CiAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJ0ZXh0LWxnIj7guKfguLHguJnguJfguLXguYggMzEg4Lih4Li14LiZ4Liy4LiE4LihIDIwMjU8L3A+CiAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJ0ZXh0LWxnIG10LTIiPuC4neC5iOC4suC4ouC4p+C4suC4h+C5geC4nOC4meC4geC4suC4o+C4peC4h+C4l+C4uOC4mTwvcD4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICApOwogICAgICAKICAgICAgLy8g4Liq4LmE4Lil4LiU4LmM4LiX4Li14LmIIDI6IOC4muC4l+C4meC4s+C5geC4peC4sOC4p+C4seC4leC4luC4uOC4m+C4o+C4sOC4quC4h+C4hOC5jAogICAgICBjYXNlIDE6CiAgICAgICAgcmV0dXJuICgKICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJoLWZ1bGwiPgogICAgICAgICAgICA8aDIgY2xhc3NOYW1lPSJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ibHVlLTgwMCBtYi02Ij7guKfguLHguJXguJbguLjguJvguKPguLDguKrguIfguITguYzguIHguLLguKPguJnguLPguYDguKrguJnguK08L2gyPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iYmctYmx1ZS01MCBwLTYgcm91bmRlZC1sZyBzaGFkb3ctbWQiPgogICAgICAgICAgICAgIDx1bCBjbGFzc05hbWU9InNwYWNlLXktNCI+CiAgICAgICAgICAgICAgICA8bGkgY2xhc3NOYW1lPSJmbGV4IGl0ZW1zLXN0YXJ0Ij4KICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9Im1yLTQgbXQtMSB0ZXh0LWJsdWUtNjAwIj48VGFyZ2V0IHNpemU9ezI0fSAvPjwvZGl2PgogICAgICAgICAgICAgICAgICA8cD7guJnguLPguYDguKrguJnguK3guYHguJzguJnguIHguLLguKPguKXguIfguJfguLjguJnguJXguLHguYnguIfguYHguJXguYjguK3guLLguKLguLggMjMtNjAg4Lib4Li1PC9wPgogICAgICAgICAgICAgICAgPC9saT4KICAgICAgICAgICAgICAgIDxsaSBjbGFzc05hbWU9ImZsZXggaXRlbXMtc3RhcnQiPgogICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ibXItNCBtdC0xIHRleHQtYmx1ZS02MDAiPjxQaWVDaGFydCBzaXplPXsyNH0gLz48L2Rpdj4KICAgICAgICAgICAgICAgICAgPHA+4Lin4Li04LmA4LiE4Lij4Liy4Liw4Lir4LmM4Lij4Li54Lib4LmB4Lia4Lia4LiB4Liy4Lij4LiI4Lix4LiU4Liq4Lij4Lij4LmA4LiH4Li04LiZ4Lil4LiH4LiX4Li44LiZ4LmD4LiZ4Liq4Li04LiZ4LiX4Lij4Lix4Lie4Lii4LmM4Lib4Lij4Liw4LmA4Lig4LiX4LiV4LmI4Liy4LiH4LmGPC9wPgogICAgICAgICAgICAgICAgPC9saT4KICAgICAgICAgICAgICAgIDxsaSBjbGFzc05hbWU9ImZsZXggaXRlbXMtc3RhcnQiPgogICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ibXItNCBtdC0xIHRleHQtYmx1ZS02MDAiPjxUcmVuZGluZ1VwIHNpemU9ezI0fSAvPjwvZGl2PgogICAgICAgICAgICAgICAgICA8cD7guYHguKrguJTguIfguIHguLLguKPguYDguJXguLTguJrguYLguJXguILguK3guIfguJ7guK3guKPguYzguJXguYLguJ/guKXguLTguYLguK3guYHguKXguLDguITguKfguLLguKHguKHguLHguYjguIfguITguLHguYjguIfguKPguLDguKLguLDguKLguLLguKc8L3A+CiAgICAgICAgICAgICAgICA8L2xpPgogICAgICAgICAgICAgICAgPGxpIGNsYXNzTmFtZT0iZmxleCBpdGVtcy1zdGFydCI+CiAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJtci00IG10LTEgdGV4dC1ibHVlLTYwMCI+PEJhckNoYXJ0NCBzaXplPXsyNH0gLz48L2Rpdj4KICAgICAgICAgICAgICAgICAgPHA+4LiZ4Liz4LmA4Liq4LiZ4Lit4LiB4Lil4Lii4Li44LiX4LiY4LmM4LiB4Liy4Lij4Lia4Lij4Li04Lir4Liy4Lij4Lij4Liy4Lii4LmE4LiU4LmJ4LmB4Lil4Liw4Lij4Liy4Lii4LiI4LmI4Liy4LiiPC9wPgogICAgICAgICAgICAgICAgPC9saT4KICAgICAgICAgICAgICA8L3VsPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9Im10LTggcC00IGJnLXllbGxvdy01MCBib3JkZXItbC00IGJvcmRlci15ZWxsb3ctNDAwIHJvdW5kZWQiPgogICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC1sZyI+4LiB4Liy4Lij4Lin4Liy4LiH4LmB4Lic4LiZ4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZ4LiX4Li14LmI4LiU4Li14LiI4Liw4LiK4LmI4Lin4Lii4LmD4Lir4LmJ4LiE4Li44LiT4Liq4Lij4LmJ4Liy4LiH4LiE4Lin4Liy4Lih4Lih4Lix4LmI4LiH4LiE4Lix4LmI4LiH4LmE4LiU4LmJ4Lit4Lii4LmI4Liy4LiH4Lih4Li14Lib4Lij4Liw4Liq4Li04LiX4LiY4Li04Lig4Liy4Lie4LmB4Lil4Liw4Lia4Lij4Lij4Lil4Li44LmA4Lib4LmJ4Liy4Lir4Lih4Liy4Lii4LiX4Liy4LiH4LiB4Liy4Lij4LmA4LiH4Li04LiZ4LmD4LiZ4Lij4Liw4Lii4Liw4Lii4Liy4LinPC9wPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICk7CiAgICAgIAogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggMzog4Lig4Liy4Lie4Lij4Lin4Lih4LiC4Lit4LiH4LiC4LmJ4Lit4Lih4Li54LilCiAgICAgIGNhc2UgMjoKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC4oOC4suC4nuC4o+C4p+C4oeC4geC4suC4o+C4p+C4suC4h+C5geC4nOC4meC4geC4suC4o+C5gOC4h+C4tOC4mTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJtYi00Ij4KICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9Im1iLTQiPuC4hOC4p+C4suC4oeC4quC4seC4oeC4nuC4seC4meC4mOC5jOC4o+C4sOC4q+C4p+C5iOC4suC4h+C4reC4suC4ouC4uOC4geC4seC4muC4o+C4sOC4lOC4seC4muC5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4mSDguYHguKXguLDguIHguLLguKPguYDguJXguLTguJrguYLguJXguILguK3guIfguJXguLPguYHguKvguJnguYjguIfguIfguLLguJk8L3A+CiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtNjQiPgogICAgICAgICAgICAgICAgPFJlc3BvbnNpdmVDb250YWluZXIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgICAgICAgICAgIDxMaW5lQ2hhcnQKICAgICAgICAgICAgICAgICAgICBkYXRhPXtzYWxhcnlEYXRhfQogICAgICAgICAgICAgICAgICAgIG1hcmdpbj17eyB0b3A6IDUsIHJpZ2h0OiAzMCwgbGVmdDogMjAsIGJvdHRvbTogNSB9fQogICAgICAgICAgICAgICAgICA+CiAgICAgICAgICAgICAgICAgICAgPENhcnRlc2lhbkdyaWQgc3Ryb2tlRGFzaGFycmF5PSIzIDMiIC8+CiAgICAgICAgICAgICAgICAgICAgPFhBeGlzIGRhdGFLZXk9ImFnZSIgLz4KICAgICAgICAgICAgICAgICAgICA8WUF4aXMgLz4KICAgICAgICAgICAgICAgICAgICA8VG9vbHRpcCBmb3JtYXR0ZXI9eyh2YWx1ZSkgPT4gW2Ake2Zvcm1hdE1vbmV5KHZhbHVlKX0g4Lia4Liy4LiXYCwgJ+C5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC4leC5iOC4reC4m+C4tSddfSAvPgogICAgICAgICAgICAgICAgICAgIDxMZWdlbmQgLz4KICAgICAgICAgICAgICAgICAgICA8TGluZSB0eXBlPSJtb25vdG9uZSIgZGF0YUtleT0ic2FsYXJ5IiBzdHJva2U9IiM4ODg0ZDgiIGFjdGl2ZURvdD17eyByOiA4IH19IG5hbWU9IuC5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC4leC5iOC4reC4m+C4tSAo4Lia4Liy4LiXKSIgLz4KICAgICAgICAgICAgICAgICAgPC9MaW5lQ2hhcnQ+CiAgICAgICAgICAgICAgICA8L1Jlc3BvbnNpdmVDb250YWluZXI+CiAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ibXQtNiBwLTQgYmctYmx1ZS01MCByb3VuZGVkLWxnIj4KICAgICAgICAgICAgICA8aDMgY2xhc3NOYW1lPSJmb250LXNlbWlib2xkIG1iLTIiPuC4geC4suC4o+C5gOC4leC4tOC4muC5guC4leC4guC4reC4h+C4leC4s+C5geC4q+C4meC5iOC4h+C4h+C4suC4mTo8L2gzPgogICAgICAgICAgICAgIDxwPkZpbmFuY2lhbCBBbmFseXN0IOKGkiBTZW5pb3IgRmluYW5jaWFsIEFuYWx5c3Qg4oaSIEZpbmFuY2UgTWFuYWdlciDihpIgU2VuaW9yIEZpbmFuY2UgTWFuYWdlciDihpIgRmluYW5jZSBEaXJlY3RvciDihpIgVlAgb2YgRmluYW5jZSDihpIgQ0ZPPC9wPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICk7CiAgICAgIAogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggNDog4LiB4Liy4Lij4LiI4Lix4LiU4Liq4Lij4Lij4Lij4Liy4Lii4LmE4LiU4LmJCiAgICAgIGNhc2UgMzoKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC4geC4suC4o+C4iOC4seC4lOC4quC4o+C4o+C4o+C4suC4ouC5hOC4lOC5ieC4m+C4o+C4sOC4iOC4s+C4m+C4tTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJncmlkIGdyaWQtY29scy0yIGdhcC00Ij4KICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iaC02NCI+CiAgICAgICAgICAgICAgICA8UmVzcG9uc2l2ZUNvbnRhaW5lciB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgICAgICAgICAgICAgPFJlY2hhcnRQaWVDaGFydD4KICAgICAgICAgICAgICAgICAgICA8UGllCiAgICAgICAgICAgICAgICAgICAgICBkYXRhPXtleHBlbnNlRGF0YX0KICAgICAgICAgICAgICAgICAgICAgIGN4PSI1MCUiCiAgICAgICAgICAgICAgICAgICAgICBjeT0iNTAlIgogICAgICAgICAgICAgICAgICAgICAgbGFiZWxMaW5lPXtmYWxzZX0KICAgICAgICAgICAgICAgICAgICAgIGxhYmVsPXsoeyBuYW1lLCBwZXJjZW50IH0pID0+IGAke25hbWV9OiAkeyhwZXJjZW50ICogMTAwKS50b0ZpeGVkKDApfSVgfQogICAgICAgICAgICAgICAgICAgICAgb3V0ZXJSYWRpdXM9ezgwfQogICAgICAgICAgICAgICAgICAgICAgZmlsbD0iIzg4ODRkOCIKICAgICAgICAgICAgICAgICAgICAgIGRhdGFLZXk9InZhbHVlIgogICAgICAgICAgICAgICAgICAgID4KICAgICAgICAgICAgICAgICAgICAgIHtleHBlbnNlRGF0YS5tYXAoKGVudHJ5LCBpbmRleCkgPT4gKAogICAgICAgICAgICAgICAgICAgICAgICA8Q2VsbCBrZXk9e2BjZWxsLSR7aW5kZXh9YH0gZmlsbD17Q09MT1JTW2luZGV4ICUgQ09MT1JTLmxlbmd0aF19IC8+CiAgICAgICAgICAgICAgICAgICAgICApKX0KICAgICAgICAgICAgICAgICAgICA8L1BpZT4KICAgICAgICAgICAgICAgICAgICA8VG9vbHRpcCAvPgogICAgICAgICAgICAgICAgICA8L1JlY2hhcnRQaWVDaGFydD4KICAgICAgICAgICAgICAgIDwvUmVzcG9uc2l2ZUNvbnRhaW5lcj4KICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICA8ZGl2PgogICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0iZm9udC1zZW1pYm9sZCBtYi0zIj7guKrguLHguJTguKrguYjguKfguJnguIHguLLguKPguIjguLHguJTguKrguKPguKPguKPguLLguKLguYTguJTguYk8L2gzPgogICAgICAgICAgICAgICAgPHVsIGNsYXNzTmFtZT0ic3BhY2UteS0yIj4KICAgICAgICAgICAgICAgICAge2V4cGVuc2VEYXRhLm1hcCgoaXRlbSwgaW5kZXgpID0+ICgKICAgICAgICAgICAgICAgICAgICA8bGkga2V5PXtpbmRleH0gY2xhc3NOYW1lPSJmbGV4IGl0ZW1zLWNlbnRlciI+CiAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0idy00IGgtNCBtci0yIiBzdHlsZT17eyBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SU1tpbmRleCAlIENPTE9SUy5sZW5ndGhdIH19PjwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e2l0ZW0ubmFtZX06IHtpdGVtLnZhbHVlfSU8L3NwYW4+CiAgICAgICAgICAgICAgICAgICAgPC9saT4KICAgICAgICAgICAgICAgICAgKSl9CiAgICAgICAgICAgICAgICA8L3VsPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9Im10LTQgcC0zIGJnLWJsdWUtNTAgcm91bmRlZCI+CiAgICAgICAgICAgICAgICAgIDxwPuC4geC4suC4o+C4iOC4seC4lOC4quC4o+C4o+C4o+C4suC4ouC5hOC4lOC5ieC4reC4ouC5iOC4suC4h+C4quC4oeC4lOC4uOC4peC4iuC5iOC4p+C4ouC5g+C4q+C5ieC4oeC4teC5gOC4h+C4tOC4meC5gOC4nuC4teC4ouC4h+C4nuC4reC4quC4s+C4q+C4o+C4seC4muC4geC4suC4o+C5g+C4iuC5ieC4iOC5iOC4suC4ouC4m+C4seC4iOC4iOC4uOC4muC4seC4meC5geC4peC4sOC4geC4suC4o+C4quC4o+C5ieC4suC4h+C4hOC4p+C4suC4oeC4oeC4seC5iOC4h+C4hOC4seC5iOC4h+C5g+C4meC4reC4meC4suC4hOC4lTwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICk7CiAgICAgIAogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggNTog4LiB4Lil4Lii4Li44LiX4LiY4LmM4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZCiAgICAgIGNhc2UgNDoKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC4geC4suC4o+C4iOC4seC4lOC4quC4o+C4o+C5gOC4h+C4tOC4meC4peC4h+C4l+C4uOC4mTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJncmlkIGdyaWQtY29scy0yIGdhcC00Ij4KICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iaC02NCI+CiAgICAgICAgICAgICAgICA8UmVzcG9uc2l2ZUNvbnRhaW5lciB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgICAgICAgICAgICAgPFJlY2hhcnRQaWVDaGFydD4KICAgICAgICAgICAgICAgICAgICA8UGllCiAgICAgICAgICAgICAgICAgICAgICBkYXRhPXthbGxvY2F0aW9uRGF0YX0KICAgICAgICAgICAgICAgICAgICAgIGN4PSI1MCUiCiAgICAgICAgICAgICAgICAgICAgICBjeT0iNTAlIgogICAgICAgICAgICAgICAgICAgICAgbGFiZWxMaW5lPXtmYWxzZX0KICAgICAgICAgICAgICAgICAgICAgIGxhYmVsPXsoeyBuYW1lLCBwZXJjZW50IH0pID0+IGAke25hbWV9OiAkeyhwZXJjZW50ICogMTAwKS50b0ZpeGVkKDApfSVgfQogICAgICAgICAgICAgICAgICAgICAgb3V0ZXJSYWRpdXM9ezgwfQogICAgICAgICAgICAgICAgICAgICAgZmlsbD0iIzg4ODRkOCIKICAgICAgICAgICAgICAgICAgICAgIGRhdGFLZXk9InZhbHVlIgogICAgICAgICAgICAgICAgICAgID4KICAgICAgICAgICAgICAgICAgICAgIHthbGxvY2F0aW9uRGF0YS5tYXAoKGVudHJ5LCBpbmRleCkgPT4gKAogICAgICAgICAgICAgICAgICAgICAgICA8Q2VsbCBrZXk9e2BjZWxsLSR7aW5kZXh9YH0gZmlsbD17Q09MT1JTW2luZGV4ICUgQ09MT1JTLmxlbmd0aF19IC8+CiAgICAgICAgICAgICAgICAgICAgICApKX0KICAgICAgICAgICAgICAgICAgICA8L1BpZT4KICAgICAgICAgICAgICAgICAgICA8VG9vbHRpcCAvPgogICAgICAgICAgICAgICAgICA8L1JlY2hhcnRQaWVDaGFydD4KICAgICAgICAgICAgICAgIDwvUmVzcG9uc2l2ZUNvbnRhaW5lcj4KICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICA8ZGl2PgogICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0iZm9udC1zZW1pYm9sZCBtYi0zIj7guKrguLHguJTguKrguYjguKfguJnguIHguLLguKPguKXguIfguJfguLjguJnguYPguJnguKrguLTguJnguJfguKPguLHguJ7guKLguYzguJXguYjguLLguIfguYY8L2gzPgogICAgICAgICAgICAgICAgPHVsIGNsYXNzTmFtZT0ic3BhY2UteS0yIj4KICAgICAgICAgICAgICAgICAge2FsbG9jYXRpb25EYXRhLm1hcCgoaXRlbSwgaW5kZXgpID0+ICgKICAgICAgICAgICAgICAgICAgICA8bGkga2V5PXtpbmRleH0gY2xhc3NOYW1lPSJmbGV4IGl0ZW1zLWNlbnRlciI+CiAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0idy00IGgtNCBtci0yIiBzdHlsZT17eyBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SU1tpbmRleCAlIENPTE9SUy5sZW5ndGhdIH19PjwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e2l0ZW0ubmFtZX06IHtpdGVtLnZhbHVlfSU8L3NwYW4+CiAgICAgICAgICAgICAgICAgICAgPC9saT4KICAgICAgICAgICAgICAgICAgKSl9CiAgICAgICAgICAgICAgICA8L3VsPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9Im10LTQgcC0zIGJnLWJsdWUtNTAgcm91bmRlZCI+CiAgICAgICAgICAgICAgICAgIDxwPuC4geC4suC4o+C4geC4o+C4sOC4iOC4suC4ouC4geC4suC4o+C4peC4h+C4l+C4uOC4meC4iuC5iOC4p+C4ouC4peC4lOC4hOC4p+C4suC4oeC5gOC4quC4teC5iOC4ouC4h+C5geC4peC4sOC5gOC4nuC4tOC5iOC4oeC5guC4reC4geC4suC4quC5g+C4meC4geC4suC4o+C5hOC4lOC5ieC4o+C4seC4muC4nOC4peC4leC4reC4muC5geC4l+C4meC4l+C4teC5iOC4oeC4seC5iOC4meC4hOC4h+C5g+C4meC4o+C4sOC4ouC4sOC4ouC4suC4pzwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICk7CiAgICAgIAogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggNjog4LiB4Liy4Lij4LmA4LiV4Li04Lia4LmC4LiV4LiC4Lit4LiH4Lij4Liy4Lii4LmE4LiU4LmJ4LmB4Lil4Liw4LiV4Liz4LmB4Lir4LiZ4LmI4LiHCiAgICAgIGNhc2UgNToKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC5gOC4quC5ieC4meC4l+C4suC4h+C4hOC4p+C4suC4oeC4geC5ieC4suC4p+C4q+C4meC5ieC4suC5g+C4meC4reC4suC4iuC4teC4nuC5geC4peC4sOC4o+C4suC4ouC5hOC4lOC5iTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJvdmVyZmxvdy1hdXRvIGgtNjQgbWItNiI+CiAgICAgICAgICAgICAgPHRhYmxlIGNsYXNzTmFtZT0ibWluLXctZnVsbCBiZy13aGl0ZSBib3JkZXIiPgogICAgICAgICAgICAgICAgPHRoZWFkIGNsYXNzTmFtZT0iYmctYmx1ZS0xMDAiPgogICAgICAgICAgICAgICAgICA8dHI+CiAgICAgICAgICAgICAgICAgICAgPHRoIGNsYXNzTmFtZT0icHktMiBweC00IGJvcmRlciI+4LiV4Liz4LmB4Lir4LiZ4LmI4LiHPC90aD4KICAgICAgICAgICAgICAgICAgICA8dGggY2xhc3NOYW1lPSJweS0yIHB4LTQgYm9yZGVyIj7guIrguYjguKfguIfguK3guLLguKLguLg8L3RoPgogICAgICAgICAgICAgICAgICAgIDx0aCBjbGFzc05hbWU9InB5LTIgcHgtNCBib3JkZXIiPuC5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC5guC4lOC4ouC4m+C4o+C4sOC4oeC4suC4kzwvdGg+CiAgICAgICAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgICAgICA8L3RoZWFkPgogICAgICAgICAgICAgICAgPHRib2R5PgogICAgICAgICAgICAgICAgICB7Y2FyZWVyUGF0aERhdGEubWFwKChpdGVtLCBpbmRleCkgPT4gKAogICAgICAgICAgICAgICAgICAgIDx0ciBrZXk9e2luZGV4fSBjbGFzc05hbWU9e2luZGV4ICUgMiA9PT0gMCA/ICdiZy1ncmF5LTUwJyA6ICdiZy13aGl0ZSd9PgogICAgICAgICAgICAgICAgICAgICAgPHRkIGNsYXNzTmFtZT0icHktMiBweC00IGJvcmRlciBmb250LW1lZGl1bSI+e2l0ZW0ucG9zaXRpb259PC90ZD4KICAgICAgICAgICAgICAgICAgICAgIDx0ZCBjbGFzc05hbWU9InB5LTIgcHgtNCBib3JkZXIgdGV4dC1jZW50ZXIiPntpdGVtLmFnZVJhbmdlfTwvdGQ+CiAgICAgICAgICAgICAgICAgICAgICA8dGQgY2xhc3NOYW1lPSJweS0yIHB4LTQgYm9yZGVyIHRleHQtcmlnaHQiPntpdGVtLnNhbGFyeX08L3RkPgogICAgICAgICAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgICAgICAgICkpfQogICAgICAgICAgICAgICAgPC90Ym9keT4KICAgICAgICAgICAgICA8L3RhYmxlPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InAtNCBiZy1ibHVlLTUwIHJvdW5kZWQtbGciPgogICAgICAgICAgICAgIDxwPjxzcGFuIGNsYXNzTmFtZT0iZm9udC1tZWRpdW0iPuC4guC5ieC4reC4quC4seC4h+C5gOC4geC4lTo8L3NwYW4+IOC4reC4seC4leC4o+C4suC4geC4suC4o+C5gOC4leC4tOC4muC5guC4leC4guC4reC4h+C5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC4iOC4sOC4quC4ueC4h+C5g+C4meC4iuC5iOC4p+C4h+C4leC5ieC4meC4guC4reC4h+C4reC4suC4iuC4teC4niAoNy04JSDguJXguYjguK3guJvguLUpIOC5geC4peC4sOC4hOC5iOC4reC4ouC5hiDguKXguJTguKXguIfguYPguJnguIrguYjguKfguIfguJvguKXguLLguKIgKDItMyUg4LiV4LmI4Lit4Lib4Li1KSDguYHguJXguYjguJDguLLguJnguYDguIfguLTguJnguYDguJTguLfguK3guJnguJfguLXguYjguKrguLnguIfguILguLbguYnguJnguJfguLPguYPguKvguYnguKPguLLguKLguYTguJTguYnguKPguKfguKHguKLguLHguIfguITguIfguYDguJ7guLTguYjguKHguILguLbguYnguJnguK3guKLguYjguLLguIfguKHguLXguJnguLHguKLguKrguLPguITguLHguI08L3A+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgPC9kaXY+CiAgICAgICAgKTsKICAgICAgCiAgICAgIC8vIOC4quC5hOC4peC4lOC5jOC4l+C4teC5iCA3OiDguIHguLLguKPguYDguJXguLTguJrguYLguJXguILguK3guIfguKPguLLguKLguYTguJTguYnguYHguKXguLDguJXguLPguYHguKvguJnguYjguIcgKOC4leC5iOC4rSkKICAgICAgY2FzZSA2OgogICAgICAgIHJldHVybiAoCiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iaC1mdWxsIj4KICAgICAgICAgICAgPGgyIGNsYXNzTmFtZT0idGV4dC0yeGwgZm9udC1ib2xkIHRleHQtYmx1ZS04MDAgbWItNiI+4LiB4Liy4Lij4LmA4LiV4Li04Lia4LmC4LiV4LiC4Lit4LiH4Lij4Liy4Lii4LmE4LiU4LmJ4LiV4Liy4Lih4LiK4LmI4Lin4LiH4Lit4Liy4Lii4Li4PC9oMj4KICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtNjQgbWItNiI+CiAgICAgICAgICAgICAgPFJlc3BvbnNpdmVDb250YWluZXIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgICAgICAgICA8QmFyQ2hhcnQKICAgICAgICAgICAgICAgICAgZGF0YT17c2FsYXJ5RGF0YX0KICAgICAgICAgICAgICAgICAgbWFyZ2luPXt7IHRvcDogNSwgcmlnaHQ6IDMwLCBsZWZ0OiAyMCwgYm90dG9tOiA1IH19CiAgICAgICAgICAgICAgICA+CiAgICAgICAgICAgICAgICAgIDxDYXJ0ZXNpYW5HcmlkIHN0cm9rZURhc2hhcnJheT0iMyAzIiAvPgogICAgICAgICAgICAgICAgICA8WEF4aXMgZGF0YUtleT0iYWdlIiAvPgogICAgICAgICAgICAgICAgICA8WUF4aXMgLz4KICAgICAgICAgICAgICAgICAgPFRvb2x0aXAgZm9ybWF0dGVyPXsodmFsdWUpID0+IFtgJHtmb3JtYXRNb25leSh2YWx1ZSl9IOC4muC4suC4l2AsICfguYDguIfguLTguJnguYDguJTguLfguK3guJnguJXguYjguK3guJvguLUnXX0gLz4KICAgICAgICAgICAgICAgICAgPExlZ2VuZCAvPgogICAgICAgICAgICAgICAgICA8QmFyIGRhdGFLZXk9InNhbGFyeSIgbmFtZT0i4LmA4LiH4Li04LiZ4LmA4LiU4Li34Lit4LiZ4LiV4LmI4Lit4Lib4Li1ICjguJrguLLguJcpIiBmaWxsPSIjODg4NGQ4IiAvPgogICAgICAgICAgICAgICAgPC9CYXJDaGFydD4KICAgICAgICAgICAgICA8L1Jlc3BvbnNpdmVDb250YWluZXI+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iZ3JpZCBncmlkLWNvbHMtMyBnYXAtNCBtdC00Ij4KICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0icC00IGJnLWJsdWUtNTAgcm91bmRlZC1sZyB0ZXh0LWNlbnRlciI+CiAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9ImZvbnQtbWVkaXVtIj7guIrguYjguKfguIfguJXguYnguJnguK3guLLguIrguLXguJ4gKDIzLTM1IOC4m+C4tSk8L3A+CiAgICAgICAgICAgICAgICA8cD7guK3guLHguJXguKPguLLguYDguJXguLTguJrguYLguJU6IDUtOCUg4LiV4LmI4Lit4Lib4Li1PC9wPgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctZ3JlZW4tNTAgcm91bmRlZC1sZyB0ZXh0LWNlbnRlciI+CiAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9ImZvbnQtbWVkaXVtIj7guIrguYjguKfguIfguIHguKXguLLguIfguK3guLLguIrguLXguJ4gKDM2LTQ1IOC4m+C4tSk8L3A+CiAgICAgICAgICAgICAgICA8cD7guK3guLHguJXguKPguLLguYDguJXguLTguJrguYLguJU6IDMtNSUg4LiV4LmI4Lit4Lib4Li1PC9wPgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmcteWVsbG93LTUwIHJvdW5kZWQtbGcgdGV4dC1jZW50ZXIiPgogICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJmb250LW1lZGl1bSI+4LiK4LmI4Lin4LiH4Lib4Lil4Liy4Lii4Lit4Liy4LiK4Li14LieICg0Ni02MCDguJvguLUpPC9wPgogICAgICAgICAgICAgICAgPHA+4Lit4Lix4LiV4Lij4Liy4LmA4LiV4Li04Lia4LmC4LiVOiAyLTMlIOC4leC5iOC4reC4m+C4tTwvcD4KICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICApOwogICAgICAKICAgICAgLy8g4Liq4LmE4Lil4LiU4LmM4LiX4Li14LmIIDg6IOC4geC4suC4o+C5gOC4leC4tOC4muC5guC4leC4guC4reC4h+C4nuC4reC4o+C5jOC4leC4geC4suC4o+C4peC4h+C4l+C4uOC4mQogICAgICBjYXNlIDc6CiAgICAgICAgcmV0dXJuICgKICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJoLWZ1bGwiPgogICAgICAgICAgICA8aDIgY2xhc3NOYW1lPSJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ibHVlLTgwMCBtYi02Ij7guIHguLLguKPguYDguJXguLTguJrguYLguJXguILguK3guIfguJ7guK3guKPguYzguJXguIHguLLguKPguKXguIfguJfguLjguJk8L2gyPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iaC02NCBtYi02Ij4KICAgICAgICAgICAgICA8UmVzcG9uc2l2ZUNvbnRhaW5lciB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgICAgICAgICAgIDxMaW5lQ2hhcnQKICAgICAgICAgICAgICAgICAgZGF0YT17cG9ydGZvbGlvR3Jvd3RoRGF0YX0KICAgICAgICAgICAgICAgICAgbWFyZ2luPXt7IHRvcDogNSwgcmlnaHQ6IDMwLCBsZWZ0OiAyMCwgYm90dG9tOiA1IH19CiAgICAgICAgICAgICAgICA+CiAgICAgICAgICAgICAgICAgIDxDYXJ0ZXNpYW5HcmlkIHN0cm9rZURhc2hhcnJheT0iMyAzIiAvPgogICAgICAgICAgICAgICAgICA8WEF4aXMgZGF0YUtleT0iYWdlIiAvPgogICAgICAgICAgICAgICAgICA8WUF4aXMgLz4KICAgICAgICAgICAgICAgICAgPFRvb2x0aXAgZm9ybWF0dGVyPXsodmFsdWUpID0+IFtgJHtmb3JtYXRNb25leSh2YWx1ZSl9IOC4muC4suC4l2AsICfguKHguLnguKXguITguYjguLLguJ7guK3guKPguYzguJUnXX0gLz4KICAgICAgICAgICAgICAgICAgPExlZ2VuZCAvPgogICAgICAgICAgICAgICAgICA8TGluZSB0eXBlPSJtb25vdG9uZSIgZGF0YUtleT0idmFsdWUiIHN0cm9rZT0iIzAwQzQ5RiIgYWN0aXZlRG90PXt7IHI6IDggfX0gbmFtZT0i4Lih4Li54Lil4LiE4LmI4Liy4Lie4Lit4Lij4LmM4LiV4Liq4Liw4Liq4LihICjguJrguLLguJcpIiAvPgogICAgICAgICAgICAgICAgPC9MaW5lQ2hhcnQ+CiAgICAgICAgICAgICAgPC9SZXNwb25zaXZlQ29udGFpbmVyPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InAtNCBiZy1ncmVlbi01MCByb3VuZGVkLWxnIj4KICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9ImZvbnQtbWVkaXVtIG1iLTIiPuC4guC5ieC4reC4quC4seC4h+C5gOC4geC4leC4quC4s+C4hOC4seC4jTo8L3A+CiAgICAgICAgICAgICAgPHA+4Lih4Li54Lil4LiE4LmI4Liy4Lie4Lit4Lij4LmM4LiV4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZ4Lih4Li14LiB4Liy4Lij4LmA4LiV4Li04Lia4LmC4LiV4LmB4Lia4Lia4LiB4LmJ4Liy4Lin4LiB4Lij4Liw4LmC4LiU4LiU4LmD4LiZ4LiK4LmI4Lin4LiH4Lit4Liy4Lii4Li4IDQ1LTYwIOC4m+C4tSDguIvguLbguYjguIfguYDguJvguYfguJnguJzguKXguKHguLLguIjguLLguIHguIHguLLguKPguKrguLDguKrguKHguYDguIfguLTguJnguKXguIfguJfguLjguJnguK3guKLguYjguLLguIfguJXguYjguK3guYDguJnguLfguYjguK3guIfguKPguKfguKHguIHguLHguJrguJzguKXguJXguK3guJrguYHguJfguJnguJfguLXguYjguJfguJrguJXguYnguJkgKENvbXBvdW5kIEVmZmVjdCkg4LiX4Li14LmI4LiK4Lix4LiU4LmA4LiI4LiZ4Lih4Liy4LiB4LiC4Li24LmJ4LiZ4LmA4Lih4Li34LmI4Lit4LmA4Lin4Lil4Liy4Lic4LmI4Liy4LiZ4LmE4LibPC9wPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICk7CiAgICAgIAogICAgICAvLyDguKrguYTguKXguJTguYzguJfguLXguYggOTog4LiB4Liy4Lij4LmA4LiV4Li04Lia4LmC4LiV4LiC4Lit4LiH4Lie4Lit4Lij4LmM4LiV4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZICjguJXguYjguK0pCiAgICAgIGNhc2UgODoKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC4oeC4ueC4peC4hOC5iOC4suC4nuC4reC4o+C5jOC4leC4quC4sOC4quC4oeC4leC4suC4oeC4iuC5iOC4p+C4h+C4reC4suC4ouC4uOC4quC4s+C4hOC4seC4jTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJncmlkIGdyaWQtY29scy0yIGdhcC02Ij4KICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iY29sLXNwYW4tMiBtYi00Ij4KICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0ibWItMiI+4Lih4Li54Lil4LiE4LmI4Liy4Lie4Lit4Lij4LmM4LiV4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZ4LmA4LiV4Li04Lia4LmC4LiV4LmB4Lia4Lia4LiX4Lin4Li14LiE4Li54LiT4LiU4LmJ4Lin4Lii4Lit4Lix4LiV4Lij4Liy4Lic4Lil4LiV4Lit4Lia4LmB4LiX4LiZ4LmA4LiJ4Lil4Li14LmI4LiiIDglIOC4leC5iOC4reC4m+C4tTwvcD4KICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ic3BhY2UteS00Ij4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctYmx1ZS01MCByb3VuZGVkLWxnIj4KICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0iZm9udC1zZW1pYm9sZCB0ZXh0LWxnIG1iLTIiPuC4reC4suC4ouC4uCAzMCDguJvguLU8L2gzPgogICAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQteGwgdGV4dC1ibHVlLTcwMCBmb250LWJvbGQiPntmb3JtYXRNb25leSg2NTAwMDApfSDguJrguLLguJc8L3A+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC1zbSBtdC0xIj7guIrguYjguKfguIfguYDguKPguLTguYjguKHguJXguYnguJnguIHguLLguKPguKrguLDguKrguKHguITguKfguLLguKHguKHguLHguYjguIfguITguLHguYjguIc8L3A+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctYmx1ZS01MCByb3VuZGVkLWxnIj4KICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0iZm9udC1zZW1pYm9sZCB0ZXh0LWxnIG1iLTIiPuC4reC4suC4ouC4uCA0MCDguJvguLU8L2gzPgogICAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQteGwgdGV4dC1ibHVlLTcwMCBmb250LWJvbGQiPntmb3JtYXRNb25leSgzMjAwMDAwKX0g4Lia4Liy4LiXPC9wPgogICAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQtc20gbXQtMSI+4LiB4Liy4Lij4LmA4LiV4Li04Lia4LmC4LiV4LiC4Lit4LiH4Lie4Lit4Lij4LmM4LiV4LmA4Lij4Li04LmI4Lih4Lih4Li14LiZ4Lix4Lii4Liq4Liz4LiE4Lix4LiNPC9wPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InNwYWNlLXktNCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0icC00IGJnLWJsdWUtNTAgcm91bmRlZC1sZyI+CiAgICAgICAgICAgICAgICAgIDxoMyBjbGFzc05hbWU9ImZvbnQtc2VtaWJvbGQgdGV4dC1sZyBtYi0yIj7guK3guLLguKLguLggNTAg4Lib4Li1PC9oMz4KICAgICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJ0ZXh0LXhsIHRleHQtYmx1ZS03MDAgZm9udC1ib2xkIj57Zm9ybWF0TW9uZXkoNzUwMDAwMCl9IOC4muC4suC4lzwvcD4KICAgICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJ0ZXh0LXNtIG10LTEiPuC4nOC4peC4guC4reC4h+C4geC4suC4o+C4peC4h+C4l+C4uOC4meC4o+C4sOC4ouC4sOC4ouC4suC4p+C5gOC4o+C4tOC5iOC4oeC4iuC4seC4lOC5gOC4iOC4mTwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InAtNCBiZy1ibHVlLTUwIHJvdW5kZWQtbGciPgogICAgICAgICAgICAgICAgICA8aDMgY2xhc3NOYW1lPSJmb250LXNlbWlib2xkIHRleHQtbGcgbWItMiI+4Lit4Liy4Lii4Li4IDYwIOC4m+C4tTwvaDM+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC14bCB0ZXh0LWJsdWUtNzAwIGZvbnQtYm9sZCI+e2Zvcm1hdE1vbmV5KDIzMDAwMDAwKX0g4Lia4Liy4LiXPC9wPgogICAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQtc20gbXQtMSI+4LmA4Lib4LmJ4Liy4Lir4Lih4Liy4Lii4LiE4Lin4Liy4Lih4Lih4Lix4LmI4LiH4LiE4Lix4LmI4LiH4LiB4LmI4Lit4LiZ4LmA4LiB4Lip4Li14Lii4LiTPC9wPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgPC9kaXY+CiAgICAgICAgKTsKICAgICAgCiAgICAgIC8vIOC4quC5hOC4peC4lOC5jOC4l+C4teC5iCAxMDog4LiI4Li44LiU4LmA4Lib4Lil4Li14LmI4Lii4LiZ4LiX4Liy4LiH4LiB4Liy4Lij4LmA4LiH4Li04LiZ4LiX4Li14LmI4Liq4Liz4LiE4Lix4LiNCiAgICAgIGNhc2UgOToKICAgICAgICByZXR1cm4gKAogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtZnVsbCI+CiAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWJsdWUtODAwIG1iLTYiPuC4iOC4uOC4lOC5gOC4m+C4peC4teC5iOC4ouC4meC4quC4s+C4hOC4seC4jeC5g+C4meC5gOC4quC5ieC4meC4l+C4suC4h+C4geC4suC4o+C5gOC4h+C4tOC4mTwvaDI+CiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJzcGFjZS15LTQiPgogICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctYmx1ZS01MCByb3VuZGVkLWxnIGJvcmRlci1sLTQgYm9yZGVyLWJsdWUtNjAwIGZsZXgiPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InRleHQtY2VudGVyIG1yLTYgZmxleC1zaHJpbmstMCI+CiAgICAgICAgICAgICAgICAgIDxoMyBjbGFzc05hbWU9InRleHQtbGcgZm9udC1ib2xkIj7guK3guLLguKLguLggMzUg4Lib4Li1PC9oMz4KICAgICAgICAgICAgICAgICAgPEJyaWVmY2FzZSBzaXplPXszMn0gY2xhc3NOYW1lPSJ0ZXh0LWJsdWUtNjAwIG14LWF1dG8gbXktMiIgLz4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGRpdj4KICAgICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJmb250LW1lZGl1bSI+4LiB4Liy4Lij4LmA4Lil4Li34LmI4Lit4LiZ4LiV4Liz4LmB4Lir4LiZ4LmI4LiH4LmA4Lib4LmH4LiZIEZpbmFuY2UgTWFuYWdlcjwvcD4KICAgICAgICAgICAgICAgICAgPHA+4Lie4Lit4Lij4LmM4LiV4Lil4LiH4LiX4Li44LiZ4Lih4Li54Lil4LiE4LmI4LiyIDEuNyDguKXguYnguLLguJnguJrguLLguJc8L3A+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC1zbSB0ZXh0LWdyYXktNjAwIG10LTEiPuC5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC5gOC4nuC4tOC5iOC4oeC4guC4tuC5ieC4meC5gOC4m+C5h+C4mSA0MSwwMDAg4Lia4Liy4LiXL+C5gOC4lOC4t+C4reC4mTwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIAogICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctZ3JlZW4tNTAgcm91bmRlZC1sZyBib3JkZXItbC00IGJvcmRlci1ncmVlbi02MDAgZmxleCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0idGV4dC1jZW50ZXIgbXItNiBmbGV4LXNocmluay0wIj4KICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0idGV4dC1sZyBmb250LWJvbGQiPuC4reC4suC4ouC4uCA0NSDguJvguLU8L2gzPgogICAgICAgICAgICAgICAgICA8QnJpZWZjYXNlIHNpemU9ezMyfSBjbGFzc05hbWU9InRleHQtZ3JlZW4tNjAwIG14LWF1dG8gbXktMiIgLz4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgPGRpdj4KICAgICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJmb250LW1lZGl1bSI+4LiB4Liy4Lij4LmA4Lil4Li34LmI4Lit4LiZ4LiV4Liz4LmB4Lir4LiZ4LmI4LiH4LmA4Lib4LmH4LiZIEZpbmFuY2UgRGlyZWN0b3I8L3A+CiAgICAgICAgICAgICAgICAgIDxwPuC4nuC4reC4o+C5jOC4leC4peC4h+C4l+C4uOC4meC4oeC4ueC4peC4hOC5iOC4siA1LjUg4Lil4LmJ4Liy4LiZ4Lia4Liy4LiXPC9wPgogICAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQtc20gdGV4dC1ncmF5LTYwMCBtdC0xIj7guYDguIfguLTguJnguYDguJTguLfguK3guJnguYDguJ7guLTguYjguKHguILguLbguYnguJnguYDguJvguYfguJkgNjAsNjAwIOC4muC4suC4ly/guYDguJTguLfguK3guJk8L3A+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAKICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0icC00IGJnLXllbGxvdy01MCByb3VuZGVkLWxnIGJvcmRlci1sLTQgYm9yZGVyLXllbGxvdy02MDAgZmxleCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0idGV4dC1jZW50ZXIgbXItNiBmbGV4LXNocmluay0wIj4KICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzTmFtZT0idGV4dC1sZyBmb250LWJvbGQiPuC4reC4suC4ouC4uCA1NSDguJvguLU8L2gzPgogICAgICAgICAgICAgICAgICA8QnJpZWZjYXNlIHNpemU9ezMyfSBjbGFzc05hbWU9InRleHQteWVsbG93LTYwMCBteC1hdXRvIG15LTIiIC8+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0iZm9udC1tZWRpdW0iPuC4geC4suC4o+C5gOC4peC4t+C5iOC4reC4meC4leC4s+C5geC4q+C4meC5iOC4h+C5gOC4m+C5h+C4mSBDRk88L3A+CiAgICAgICAgICAgICAgICAgIDxwPuC4nuC4reC4o+C5jOC4leC4peC4h+C4l+C4uOC4meC4oeC4ueC4peC4hOC5iOC4siAxNCDguKXguYnguLLguJnguJrguLLguJc8L3A+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC1zbSB0ZXh0LWdyYXktNjAwIG10LTEiPuC5gOC4h+C4tOC4meC5gOC4lOC4t+C4reC4meC5gOC4nuC4tOC5iOC4oeC4guC4tuC5ieC4meC5gOC4m+C5h+C4mSA3Nyw2MDAg4Lia4Liy4LiXL+C5gOC4lOC4t+C4reC4mTwvcD4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgIAogICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJwLTQgYmctcHVycGxlLTUwIHJvdW5kZWQtbGcgYm9yZGVyLWwtNCBib3JkZXItcHVycGxlLTYwMCBmbGV4Ij4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJ0ZXh0LWNlbnRlciBtci02IGZsZXgtc2hyaW5rLTAiPgogICAgICAgICAgICAgICAgICA8aDMgY2xhc3NOYW1lPSJ0ZXh0LWxnIGZvbnQtYm9sZCI+4Lit4Liy4Lii4Li4IDYwIOC4m+C4tTwvaDM+CiAgICAgICAgICAgICAgICAgIDxEb2xsYXJTaWduIHNpemU9ezMyfSBjbGFzc05hbWU9InRleHQtcHVycGxlLTYwMCBteC1hdXRvIG15LTIiIC8+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDxkaXY+CiAgICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0iZm9udC1tZWRpdW0iPuC5gOC4geC4qeC4teC4ouC4k+C4reC4suC4ouC4uDwvcD4KICAgICAgICAgICAgICAgICAgPHA+4Lie4Lit4Lij4LmM4LiV4Lil4LiH4LiX4Li44LiZ4Lih4Li54Lil4LiE4LmI4LiyIDIzIOC4peC5ieC4suC4meC4muC4suC4lzwvcD4KICAgICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPSJ0ZXh0LXNtIHRleHQtZ3JheS02MDAgbXQtMSI+4Liq4Liy4Lih4Liy4Lij4LiW4LmD4LiK4LmJ4Lic4Lil4LiV4Lit4Lia4LmB4LiX4LiZ4LiI4Liy4LiB4LiB4Liy4Lij4Lil4LiH4LiX4Li44LiZ4LmA4Lib4LmH4LiZ4Lij4Liy4Lii4LmE4LiU4LmJ4Lir4Lil4Lix4LiH4LmA4LiB4Lip4Li14Lii4LiTPC9wPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgPC9kaXY+CiAgICAgICAgKTsKICAgICAgCiAgICAgIC8vIOC4quC5hOC4peC4lOC5jOC4l+C4teC5iCAxMTog4Lib4Lix4LiI4LiI4Lix4Lii4LiE4Lin4Liy4Lih4Liq4Liz4LmA4Lij4LmH4LiICiAgICAgIGNhc2UgMTA6CiAgICAgICAgcmV0dXJuICgKICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJoLWZ1bGwiPgogICAgICAgICAgICA8aDIgY2xhc3NOYW1lPSJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ibHVlLTgwMCBtYi02Ij7guJvguLHguIjguIjguLHguKLguKrguLnguYjguITguKfguLLguKHguKrguLPguYDguKPguYfguIjguJfguLLguIfguIHguLLguKPguYDguIfguLTguJk8L2gyPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iZ3JpZCBncmlkLWNvbHMtMiBnYXAtNCI+CiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9InAtNCBiZy1ibHVlLTUwIHJvdW5kZWQtbGcgc2hhZG93LXNtIj4KICAgICAgICAgICAgICAgIDxoMyBjbGFzc05hbWU9ImZvbnQtc2VtaWJvbGQgdGV4dC1sZyBtYi0yIGZsZXggaXRlbXMtY2VudGVyIj4KICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSJtci0yIHRleHQtYmx1ZS02MDAiPjxEb2xsYXJTaWduIHNpemU=

Success #stdin #stdout 0.02s 25972KB

stdin

copy

Standard input is empty

stdout

copy

import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, TrendingUp, BarChart4, PieChart, DollarSign, Briefcase, Target } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, BarChart, Bar, PieChart as RechartPieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

const InvestmentPlanPresentation = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
  
  const totalSlides = 12;
  
  const goToNextSlide = () => {
    setCurrentSlide((prev) => (prev < totalSlides - 1 ? prev + 1 : prev));
  };
  
  const goToPrevSlide = () => {
    setCurrentSlide((prev) => (prev > 0 ? prev - 1 : prev));
  };
  
  // ข้อมูลสำหรับกราฟต่างๆ
  const salaryData = [
    { age: 23, salary: 240000, position: 'Financial Analyst' },
    { age: 25, salary: 274776, position: 'Financial Analyst' },
    { age: 30, salary: 385392, position: 'Senior Financial Analyst' },
    { age: 35, salary: 491832, position: 'Finance Manager' },
    { age: 40, salary: 626940, position: 'Senior Finance Manager' },
    { age: 45, salary: 727416, position: 'Finance Director' },
    { age: 50, salary: 843000, position: 'VP of Finance' },
    { age: 55, salary: 930744, position: 'CFO' },
    { age: 60, salary: 1027608, position: 'CFO' }
  ];
  
  const portfolioGrowthData = [
    { age: 23, value: 38880 },
    { age: 25, value: 127053 },
    { age: 30, value: 650000 },
    { age: 35, value: 1700000 },
    { age: 40, value: 3200000 },
    { age: 45, value: 5500000 },
    { age: 50, value: 7500000 },
    { age: 55, value: 14000000 },
    { age: 60, value: 23000000 }
  ];
  
  const allocationData = [
    { name: 'ETF', value: 50 },
    { name: 'หุ้น', value: 20 },
    { name: 'REITs', value: 10 },
    { name: 'พันธบัตร', value: 10 },
    { name: 'ทอง/คริปโต', value: 10 }
  ];
  
  const expenseData = [
    { name: 'ค่ากินอยู่', value: 30 },
    { name: 'ค่าผ่อนบ้าน/รถ', value: 20 },
    { name: 'ค่าใช้จ่ายส่วนตัว', value: 15 },
    { name: 'ค่าประกันและสุขภาพ', value: 10 },
    { name: 'เงินออมและลงทุน', value: 15 },
    { name: 'ภาษีและกองทุน', value: 10 }
  ];
  
  const careerPathData = [
    { position: 'Financial Analyst', ageRange: '23-29', salary: '20,000-30,200 บาท' },
    { position: 'Senior Financial Analyst', ageRange: '30-34', salary: '32,100-39,200 บาท' },
    { position: 'Finance Manager', ageRange: '35-39', salary: '41,000-50,000 บาท' },
    { position: 'Senior Finance Manager', ageRange: '40-44', salary: '52,200-58,900 บาท' },
    { position: 'Finance Director', ageRange: '45-49', salary: '60,600-68,300 บาท' },
    { position: 'VP of Finance', ageRange: '50-54', salary: '70,200-76,100 บาท' },
    { position: 'CFO', ageRange: '55-60', salary: '77,600-85,600 บาท' }
  ];
  
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
  
  const formatMoney = (amount) => {
    return new Intl.NumberFormat('th-TH').format(amount);
  };
  
  const renderSlide = () => {
    switch (currentSlide) {
      // สไลด์ที่ 1: ปกนำเสนอ
      case 0:
        return (
          <div className="flex flex-col items-center justify-center h-full text-center">
            <div className="mb-8">
              <DollarSign size={64} className="text-blue-600 mx-auto mb-4" />
            </div>
            <h1 className="text-4xl font-bold text-blue-800 mb-4">การวางแผนการลงทุนทางการเงินระยะยาว</h1>
            <h2 className="text-2xl text-blue-600 mb-10">กลยุทธ์การสร้างความมั่งคั่งตามช่วงอายุและระดับรายได้</h2>
            <div className="mt-16">
              <p className="text-lg">วันที่ 31 มีนาคม 2025</p>
              <p className="text-lg mt-2">ฝ่ายวางแผนการลงทุน</p>
            </div>
          </div>
        );
      
      // สไลด์ที่ 2: บทนำและวัตถุประสงค์
      case 1:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">วัตถุประสงค์การนำเสนอ</h2>
            <div className="bg-blue-50 p-6 rounded-lg shadow-md">
              <ul className="space-y-4">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><Target size={24} /></div>
                  <p>นำเสนอแผนการลงทุนตั้งแต่อายุ 23-60 ปี</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><PieChart size={24} /></div>
                  <p>วิเคราะห์รูปแบบการจัดสรรเงินลงทุนในสินทรัพย์ประเภทต่างๆ</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><TrendingUp size={24} /></div>
                  <p>แสดงการเติบโตของพอร์ตโฟลิโอและความมั่งคั่งระยะยาว</p>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 text-blue-600"><BarChart4 size={24} /></div>
                  <p>นำเสนอกลยุทธ์การบริหารรายได้และรายจ่าย</p>
                </li>
              </ul>
            </div>
            <div className="mt-8 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded">
              <p className="text-lg">การวางแผนการลงทุนที่ดีจะช่วยให้คุณสร้างความมั่งคั่งได้อย่างมีประสิทธิภาพและบรรลุเป้าหมายทางการเงินในระยะยาว</p>
            </div>
          </div>
        );
      
      // สไลด์ที่ 3: ภาพรวมของข้อมูล
      case 2:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">ภาพรวมการวางแผนการเงิน</h2>
            <div className="mb-4">
              <p className="mb-4">ความสัมพันธ์ระหว่างอายุกับระดับเงินเดือน และการเติบโตของตำแหน่งงาน</p>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={salaryData}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="age" />
                    <YAxis />
                    <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'เงินเดือนต่อปี']} />
                    <Legend />
                    <Line type="monotone" dataKey="salary" stroke="#8884d8" activeDot={{ r: 8 }} name="เงินเดือนต่อปี (บาท)" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div className="mt-6 p-4 bg-blue-50 rounded-lg">
              <h3 className="font-semibold mb-2">การเติบโตของตำแหน่งงาน:</h3>
              <p>Financial Analyst → Senior Financial Analyst → Finance Manager → Senior Finance Manager → Finance Director → VP of Finance → CFO</p>
            </div>
          </div>
        );
      
      // สไลด์ที่ 4: การจัดสรรรายได้
      case 3:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การจัดสรรรายได้ประจำปี</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <RechartPieChart>
                    <Pie
                      data={expenseData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {expenseData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartPieChart>
                </ResponsiveContainer>
              </div>
              <div>
                <h3 className="font-semibold mb-3">สัดส่วนการจัดสรรรายได้</h3>
                <ul className="space-y-2">
                  {expenseData.map((item, index) => (
                    <li key={index} className="flex items-center">
                      <div className="w-4 h-4 mr-2" style={{ backgroundColor: COLORS[index % COLORS.length] }}></div>
                      <span>{item.name}: {item.value}%</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 p-3 bg-blue-50 rounded">
                  <p>การจัดสรรรายได้อย่างสมดุลช่วยให้มีเงินเพียงพอสำหรับการใช้จ่ายปัจจุบันและการสร้างความมั่งคั่งในอนาคต</p>
                </div>
              </div>
            </div>
          </div>
        );
      
      // สไลด์ที่ 5: กลยุทธ์การลงทุน
      case 4:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การจัดสรรเงินลงทุน</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <RechartPieChart>
                    <Pie
                      data={allocationData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {allocationData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartPieChart>
                </ResponsiveContainer>
              </div>
              <div>
                <h3 className="font-semibold mb-3">สัดส่วนการลงทุนในสินทรัพย์ต่างๆ</h3>
                <ul className="space-y-2">
                  {allocationData.map((item, index) => (
                    <li key={index} className="flex items-center">
                      <div className="w-4 h-4 mr-2" style={{ backgroundColor: COLORS[index % COLORS.length] }}></div>
                      <span>{item.name}: {item.value}%</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 p-3 bg-blue-50 rounded">
                  <p>การกระจายการลงทุนช่วยลดความเสี่ยงและเพิ่มโอกาสในการได้รับผลตอบแทนที่มั่นคงในระยะยาว</p>
                </div>
              </div>
            </div>
          </div>
        );
      
      // สไลด์ที่ 6: การเติบโตของรายได้และตำแหน่ง
      case 5:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">เส้นทางความก้าวหน้าในอาชีพและรายได้</h2>
            <div className="overflow-auto h-64 mb-6">
              <table className="min-w-full bg-white border">
                <thead className="bg-blue-100">
                  <tr>
                    <th className="py-2 px-4 border">ตำแหน่ง</th>
                    <th className="py-2 px-4 border">ช่วงอายุ</th>
                    <th className="py-2 px-4 border">เงินเดือนโดยประมาณ</th>
                  </tr>
                </thead>
                <tbody>
                  {careerPathData.map((item, index) => (
                    <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                      <td className="py-2 px-4 border font-medium">{item.position}</td>
                      <td className="py-2 px-4 border text-center">{item.ageRange}</td>
                      <td className="py-2 px-4 border text-right">{item.salary}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="p-4 bg-blue-50 rounded-lg">
              <p><span className="font-medium">ข้อสังเกต:</span> อัตราการเติบโตของเงินเดือนจะสูงในช่วงต้นของอาชีพ (7-8% ต่อปี) และค่อยๆ ลดลงในช่วงปลาย (2-3% ต่อปี) แต่ฐานเงินเดือนที่สูงขึ้นทำให้รายได้รวมยังคงเพิ่มขึ้นอย่างมีนัยสำคัญ</p>
            </div>
          </div>
        );
      
      // สไลด์ที่ 7: การเติบโตของรายได้และตำแหน่ง (ต่อ)
      case 6:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การเติบโตของรายได้ตามช่วงอายุ</h2>
            <div className="h-64 mb-6">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={salaryData}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="age" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'เงินเดือนต่อปี']} />
                  <Legend />
                  <Bar dataKey="salary" name="เงินเดือนต่อปี (บาท)" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            </div>
            <div className="grid grid-cols-3 gap-4 mt-4">
              <div className="p-4 bg-blue-50 rounded-lg text-center">
                <p className="font-medium">ช่วงต้นอาชีพ (23-35 ปี)</p>
                <p>อัตราเติบโต: 5-8% ต่อปี</p>
              </div>
              <div className="p-4 bg-green-50 rounded-lg text-center">
                <p className="font-medium">ช่วงกลางอาชีพ (36-45 ปี)</p>
                <p>อัตราเติบโต: 3-5% ต่อปี</p>
              </div>
              <div className="p-4 bg-yellow-50 rounded-lg text-center">
                <p className="font-medium">ช่วงปลายอาชีพ (46-60 ปี)</p>
                <p>อัตราเติบโต: 2-3% ต่อปี</p>
              </div>
            </div>
          </div>
        );
      
      // สไลด์ที่ 8: การเติบโตของพอร์ตการลงทุน
      case 7:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">การเติบโตของพอร์ตการลงทุน</h2>
            <div className="h-64 mb-6">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart
                  data={portfolioGrowthData}
                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="age" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`${formatMoney(value)} บาท`, 'มูลค่าพอร์ต']} />
                  <Legend />
                  <Line type="monotone" dataKey="value" stroke="#00C49F" activeDot={{ r: 8 }} name="มูลค่าพอร์ตสะสม (บาท)" />
                </LineChart>
              </ResponsiveContainer>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <p className="font-medium mb-2">ข้อสังเกตสำคัญ:</p>
              <p>มูลค่าพอร์ตการลงทุนมีการเติบโตแบบก้าวกระโดดในช่วงอายุ 45-60 ปี ซึ่งเป็นผลมาจากการสะสมเงินลงทุนอย่างต่อเนื่องรวมกับผลตอบแทนที่ทบต้น (Compound Effect) ที่ชัดเจนมากขึ้นเมื่อเวลาผ่านไป</p>
            </div>
          </div>
        );
      
      // สไลด์ที่ 9: การเติบโตของพอร์ตการลงทุน (ต่อ)
      case 8:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">มูลค่าพอร์ตสะสมตามช่วงอายุสำคัญ</h2>
            <div className="grid grid-cols-2 gap-6">
              <div className="col-span-2 mb-4">
                <p className="mb-2">มูลค่าพอร์ตการลงทุนเติบโตแบบทวีคูณด้วยอัตราผลตอบแทนเฉลี่ย 8% ต่อปี</p>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 30 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(650000)} บาท</p>
                  <p className="text-sm mt-1">ช่วงเริ่มต้นการสะสมความมั่งคั่ง</p>
                </div>
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 40 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(3200000)} บาท</p>
                  <p className="text-sm mt-1">การเติบโตของพอร์ตเริ่มมีนัยสำคัญ</p>
                </div>
              </div>
              <div className="space-y-4">
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 50 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(7500000)} บาท</p>
                  <p className="text-sm mt-1">ผลของการลงทุนระยะยาวเริ่มชัดเจน</p>
                </div>
                <div className="p-4 bg-blue-50 rounded-lg">
                  <h3 className="font-semibold text-lg mb-2">อายุ 60 ปี</h3>
                  <p className="text-xl text-blue-700 font-bold">{formatMoney(23000000)} บาท</p>
                  <p className="text-sm mt-1">เป้าหมายความมั่งคั่งก่อนเกษียณ</p>
                </div>
              </div>
            </div>
          </div>
        );
      
      // สไลด์ที่ 10: จุดเปลี่ยนทางการเงินที่สำคัญ
      case 9:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">จุดเปลี่ยนสำคัญในเส้นทางการเงิน</h2>
            <div className="space-y-4">
              <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 35 ปี</h3>
                  <Briefcase size={32} className="text-blue-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น Finance Manager</p>
                  <p>พอร์ตลงทุนมูลค่า 1.7 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 41,000 บาท/เดือน</p>
                </div>
              </div>
              
              <div className="p-4 bg-green-50 rounded-lg border-l-4 border-green-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 45 ปี</h3>
                  <Briefcase size={32} className="text-green-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น Finance Director</p>
                  <p>พอร์ตลงทุนมูลค่า 5.5 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 60,600 บาท/เดือน</p>
                </div>
              </div>
              
              <div className="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 55 ปี</h3>
                  <Briefcase size={32} className="text-yellow-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">การเลื่อนตำแหน่งเป็น CFO</p>
                  <p>พอร์ตลงทุนมูลค่า 14 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">เงินเดือนเพิ่มขึ้นเป็น 77,600 บาท/เดือน</p>
                </div>
              </div>
              
              <div className="p-4 bg-purple-50 rounded-lg border-l-4 border-purple-600 flex">
                <div className="text-center mr-6 flex-shrink-0">
                  <h3 className="text-lg font-bold">อายุ 60 ปี</h3>
                  <DollarSign size={32} className="text-purple-600 mx-auto my-2" />
                </div>
                <div>
                  <p className="font-medium">เกษียณอายุ</p>
                  <p>พอร์ตลงทุนมูลค่า 23 ล้านบาท</p>
                  <p className="text-sm text-gray-600 mt-1">สามารถใช้ผลตอบแทนจากการลงทุนเป็นรายได้หลังเกษียณ</p>
                </div>
              </div>
            </div>
          </div>
        );
      
      // สไลด์ที่ 11: ปัจจัยความสำเร็จ
      case 10:
        return (
          <div className="h-full">
            <h2 className="text-2xl font-bold text-blue-800 mb-6">ปัจจัยสู่ความสำเร็จทางการเงิน</h2>
            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 bg-blue-50 rounded-lg shadow-sm">
                <h3 className="font-semibold text-lg mb-2 flex items-center">
                  <span className="mr-2 text-blue-600"><DollarSign size

https://ideone.com/PYKo9G

language:

PHP (php 7.3.5)

created:

visibility:

public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!

Discover > Sphere Engine API

Discover > IDE Widget

Choose your language