{"id":7,"date":"2026-02-25T15:50:11","date_gmt":"2026-02-25T15:50:11","guid":{"rendered":"https:\/\/ikbks.my.id\/?page_id=7"},"modified":"2026-03-04T09:04:26","modified_gmt":"2026-03-04T02:04:26","slug":"home","status":"publish","type":"page","link":"https:\/\/ikbks.my.id\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ccd34c e-flex e-con-boxed e-con e-parent\" data-id=\"2ccd34c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c76a9e elementor-widget elementor-widget-html\" data-id=\"9c76a9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"demo\" data-block=\"interactive-app\" data-desc=\"Complete Genealogy Application Interface with full dataset\" class=\"min-h-screen bg-slate-100 flex items-center justify-center p-0\">\r\n  <div id=\"ikbs-standalone-wp\" class=\"w-full\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.28\/jspdf.plugin.autotable.min.js\"><\/script>\r\n    <style>\r\n      #ikbs-standalone-wp {\r\n        all: unset;\r\n        display: block !important;\r\n        width: 100% !important;\r\n        min-height: 100vh !important;\r\n        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;\r\n        background-color: #f1f5f9 !important;\r\n        padding: 0 !important;\r\n        box-sizing: border-box !important;\r\n        color: #0f172a !important;\r\n      }\r\n\r\n      #ikbs-standalone-wp * { box-sizing: border-box !important; }\r\n\r\n      #ikbs-app-container {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        height: 100vh !important;\r\n        margin: 0 auto !important;\r\n        position: relative !important;\r\n        background-color: #ffffff !important;\r\n        overflow: hidden !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        z-index: 10 !important;\r\n      }\r\n\r\n      #ikbs-app-container > div {\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        height: 100% !important;\r\n        width: 100% !important;\r\n      }\r\n\r\n      .hide-scrollbar {\r\n        -ms-overflow-style: none !important;\r\n        scrollbar-width: none !important;\r\n      }\r\n      .hide-scrollbar::-webkit-scrollbar { display: none !important; }\r\n\r\n      * { -webkit-tap-highlight-color: transparent; }\r\n\r\n      \/* Org Tree Styles *\/\r\n      .org-tree { display: inline-block; }\r\n      .org-tree ul {\r\n        padding-top: 40px;\r\n        position: relative;\r\n        display: flex;\r\n        justify-content: center;\r\n        padding-left: 0;\r\n        margin: 0;\r\n      }\r\n      .org-tree li {\r\n        text-align: center;\r\n        list-style-type: none;\r\n        position: relative;\r\n        padding: 40px 15px 0 15px;\r\n        transition: all 0.3s ease;\r\n      }\r\n      .org-tree li::before, .org-tree li::after {\r\n        content: ''; position: absolute; top: 0; right: 50%;\r\n        border-top: 2.5px solid #cbd5e1; width: 50%; height: 40px;\r\n      }\r\n      .org-tree li::after { right: auto; left: 50%; border-left: 2.5px solid #cbd5e1; }\r\n      .org-tree li:only-child::after, .org-tree li:only-child::before { display: none; }\r\n      .org-tree li:only-child { padding-top: 0; }\r\n      .org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }\r\n      .org-tree li:last-child::before { border-right: 2.5px solid #cbd5e1; border-radius: 0 12px 0 0; }\r\n      .org-tree li:first-child::after { border-radius: 12px 0 0 0; }\r\n      .org-tree ul ul::before {\r\n        content: ''; position: absolute; top: 0; left: 50%;\r\n        border-left: 2.5px solid #cbd5e1; width: 0; height: 40px;\r\n      }\r\n\r\n      \/* Animations *\/\r\n      @keyframes demo-fadeScale {\r\n        from { opacity: 0; transform: scale(0.96) translateY(15px); }\r\n        to { opacity: 1; transform: scale(1) translateY(0); }\r\n      }\r\n      @keyframes demo-fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n      @keyframes demo-slideUpModal {\r\n        from { transform: translateY(100%); opacity: 0;}\r\n        to { transform: translateY(0); opacity: 1;}\r\n      }\r\n      @keyframes demo-float {\r\n        0% { transform: translateY(0px); }\r\n        50% { transform: translateY(-10px); }\r\n        100% { transform: translateY(0px); }\r\n      }\r\n\r\n      .animate-fade-scale { animation: demo-fadeScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\r\n      .animate-float { animation: demo-float 4s ease-in-out infinite; }\r\n\r\n      \/* Modals *\/\r\n      .glass-overlay {\r\n        position: fixed; inset: 0;\r\n        background: rgba(15, 23, 42, 0.4);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        z-index: 1000;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        animation: demo-fadeIn 0.3s ease-out;\r\n        padding: 1rem;\r\n      }\r\n\r\n      .profile-modal, .motivation-modal {\r\n        width: 100%; max-width: 500px;\r\n        background: #ffffff;\r\n        border-radius: 32px;\r\n        display: flex; flex-direction: column;\r\n        animation: demo-slideUpModal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n        overflow: hidden;\r\n      }\r\n      .profile-modal { height: 85vh; max-height: 800px; }\r\n      .motivation-modal { height: auto; max-height: 90vh; }\r\n\r\n      @media (max-width: 768px) {\r\n        .profile-modal { height: 92vh; border-radius: 32px 32px 0 0; align-self: flex-end; margin-bottom: 0; }\r\n        .glass-overlay { align-items: flex-end; padding: 0;}\r\n        .motivation-modal { margin: 1rem; border-radius: 28px; align-self: center; }\r\n      }\r\n      \r\n      \/* Optimize rendering for drag *\/\r\n      .tree-container {\r\n        will-change: transform;\r\n        transform: translateZ(0);\r\n        backface-visibility: hidden;\r\n      }\r\n    <\/style>\r\n    <div id=\"wp-family-tree-root\"><div id=\"ikbs-app-container\"><\/div><\/div>\r\n    <script type=\"text\/babel\">\r\n      (function() {\r\n        const { useState, useMemo, useEffect, useRef, useCallback, memo } = React;\r\n\r\n        \/\/ Icons\r\n        const IconDashboard = () => <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"9\" rx=\"1\"><\/rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"5\" rx=\"1\"><\/rect><rect x=\"14\" y=\"12\" width=\"7\" height=\"9\" rx=\"1\"><\/rect><rect x=\"3\" y=\"16\" width=\"7\" height=\"5\" rx=\"1\"><\/rect><\/svg>;\r\n        const IconSearch = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>;\r\n        const IconMapPin = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>;\r\n        const IconPhone = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>;\r\n        const IconArrowLeft = () => <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>;\r\n        const IconNetwork = ({ className = \"\" }) => <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1.5\"><\/rect><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1.5\"><\/rect><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1.5\"><\/rect><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\"><\/path><path d=\"M12 12V8\"><\/path><\/svg>;\r\n        const IconWallet = ({ className = \"\" }) => <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M21 12V7H5a2 2 0 0 1 0-4h14v4\"><\/path><path d=\"M3 5v14a2 2 0 0 0 2 2h16v-5\"><\/path><path d=\"M18 12a2 2 0 0 0 0 4h4v-4Z\"><\/path><\/svg>;\r\n        const IconUsers = ({ className = \"\" }) => <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>;\r\n        const IconEdit = () => <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>;\r\n        const IconSave = () => <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"><\/path><polyline points=\"17 21 17 13 7 13 7 21\"><\/polyline><polyline points=\"7 3 7 8 15 8\"><\/polyline><\/svg>;\r\n        const IconX = ({ size = 22, className=\"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>;\r\n        const IconChevronRight = () => <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"text-slate-300\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>;\r\n        const IconHeart = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path><\/svg>;\r\n        const IconCalendar = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>;\r\n        const IconZoomIn = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>;\r\n        const IconZoomOut = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>;\r\n        const IconRefresh = ({ size = 22, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><polyline points=\"23 4 23 10 17 10\"><\/polyline><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"><\/path><\/svg>;\r\n        const IconDownload = ({ size = 20, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>;\r\n        const IconQuote = ({ size = 24, className = \"\" }) => <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className}><path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\"\/><\/svg>;\r\n\r\n        const defaultAvatar = \"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'\/%3E%3Ccircle cx='12' cy='7' r='4'\/%3E%3C\/svg%3E\";\r\n\r\n        const rawQuotes = [\r\n          { type: \"Hadits Nabi\", text: \"Barangsiapa yang beriman kepada Allah dan hari akhir, hendaklah ia menyambung tali silaturahmi.\", source: \"HR. Bukhari & Muslim\" },\r\n          { type: \"Hadits Nabi\", text: \"Barangsiapa yang ingin diluaskan rezekinya dan dipanjangkan umurnya, maka hendaklah ia menyambung tali silaturahmi.\", source: \"HR. Bukhari\" },\r\n          { type: \"Hadits Nabi\", text: \"Silaturahmi bukanlah sekadar membalas kebaikan, tetapi menyambung hubungan dengan mereka yang memutuskannya.\", source: \"HR. Bukhari\" },\r\n          { type: \"Al-Qur'an\", text: \"Dan bertakwalah kepada Allah yang dengan (mempergunakan) nama-Nya kamu saling meminta satu sama lain, dan (peliharalah) hubungan silaturahim.\", source: \"QS. An-Nisa: 1\" },\r\n          { type: \"Nasehat Ulama\", text: \"Keluarga adalah akar yang menopang kita saat badai datang. Jagalah ia, maka ia akan menjagamu dunia dan akhirat.\", source: \"Hikmah Islami\" },\r\n          { type: \"Hadits Nabi\", text: \"Tidak ada dosa yang lebih pantas untuk disegerakan hukumannya di dunia... selain memutus tali silaturahmi.\", source: \"HR. Abu Daud\" },\r\n          { type: \"Pepatah Keluarga\", text: \"Jauh di mata dekat di doa, itulah keluarga yang utama. Sedekah kepada kerabat mendapat dua pahala: pahala sedekah dan pahala silaturahmi.\", source: \"Nasehat Leluhur\" }\r\n        ];\r\n\r\n        const rawFamilyData = [\r\n          ['khamidin', 'H. Khamidin', 1, [], 'sarminah', 'deceased'],\r\n          ['sarminah', 'Hj. Sarminah', 1, [], 'khamidin', 'deceased'],\r\n          ['usman', 'H. Usman', 2, ['khamidin', 'sarminah'], 'kasiyem', 'deceased'],\r\n          ['kasiyem', 'Kasiyem', 2, [], 'usman', 'deceased'],\r\n          ['supinah', 'Supinah', 3, ['usman', 'kasiyem'], 'syukur', 'deceased'],\r\n          ['syukur', 'H. Syukur', 3, [], 'supinah', 'deceased'],\r\n          ['muntaha', 'Muntaha Syukur', 4, ['supinah', 'syukur'], 'mardliyah', 'deceased'],\r\n          ['mardliyah', 'Mardliyah', 4, [], 'muntaha', 'deceased'],\r\n          ['dinul_q', 'Dinul Qowim', 5, ['muntaha', 'mardliyah'], 'ika_k', 'alive'],\r\n          ['ika_k', 'Ika Kartikawati', 5, [], 'dinul_q', 'alive'],\r\n          ['qaullika', 'Qaullika Destia Darussani', 6, ['dinul_q', 'ika_k'], null, 'alive'],\r\n          ['ayuni', \"Qurrotul A'yun\", 5, ['muntaha', 'mardliyah'], null, 'alive'],\r\n          ['mubaroq', 'Dinul Mubarrok', 5, ['muntaha', 'mardliyah'], 'ekarina', 'alive'],\r\n          ['ekarina', 'Ekarina', 5, [], 'mubaroq', 'alive'],\r\n          ['athira', 'Athira Mikayla Dira', 6, ['mubaroq', 'ekarina'], null, 'alive'],\r\n          ['aini', \"Qurrotul 'Aini\", 5, ['muntaha', 'mardliyah'], 'ahmad_husin', 'alive'],\r\n          ['ahmad_husin', 'Ahmad Husin', 5, [], 'aini', 'alive'],\r\n          ['aqila', 'Aqila Mumtaza Alhusaini', 6, ['aini', 'ahmad_husin'], null, 'alive'],\r\n          ['akmaluddin', 'Muh.Akmaluddin Alhusaini', 6, ['aini', 'ahmad_husin'], null, 'alive'],\r\n          ['hayatuddin', 'Hayatuddin', 5, ['muntaha', 'mardliyah'], 'murniati', 'alive'],\r\n          ['murniati', 'Murniati', 5, [], 'hayatuddin', 'alive'],\r\n          ['beryl', 'Beryl Arsaka Shidqi', 6, ['hayatuddin', 'murniati'], null, 'alive'],\r\n          ['nadhifa', 'Nadhifa Maulidiya shidqi', 6, ['hayatuddin', 'murniati'], null, 'alive'],\r\n          ['djafar', \"H. Dja'far\", 3, ['usman', 'kasiyem'], 'muflikha', 'deceased'],\r\n          ['muflikha', 'Hj. Muflikha', 3, [], 'djafar', 'deceased'],\r\n          ['lilik', 'Lilik Khoiriyah', 4, ['djafar', 'muflikha'], 'kasiyun', 'deceased'],\r\n          ['kasiyun', 'Drs. H. Kasiyun', 4, [], 'lilik', 'deceased'],\r\n          ['firman', 'Firman Aqif Ferdhiyanto', 5, ['lilik', 'kasiyun'], 'gandhes', 'alive'],\r\n          ['gandhes', 'Ghandhes Gilang Linanthi', 5, [], 'firman', 'alive'],\r\n          ['durafshan', 'Durafshan Virendra Aldevaro', 6, ['firman', 'gandhes'], null, 'alive'],\r\n          ['alesha', 'Alesha Rajilha Rahmadhisa', 6, ['firman', 'gandhes'], null, 'alive'],\r\n          ['iva', 'Iva Nurma Rahmawati', 5, ['lilik', 'kasiyun'], 'jefri', 'alive'],\r\n          ['jefri', 'Jefri Efendy', 5, [], 'iva', 'alive'],\r\n          ['kevin', 'Kevin Azzam Alvaro', 6, ['iva', 'jefri'], null, 'alive'],\r\n          ['levandra', 'Levandra Azka Alvaro', 6, ['iva', 'jefri'], null, 'alive'],\r\n          ['indah', 'Indah Permata Sholicha', 5, ['lilik', 'kasiyun'], 'fitra', 'alive'],\r\n          ['fitra', 'Fitra Maulana', 5, [], 'indah', 'alive'],\r\n          ['mayla', 'Mayla Faisha Abreal', 6, ['indah', 'fitra'], null, 'alive'],\r\n          ['setya', 'Setya Permata Sholicha', 5, ['lilik', 'kasiyun'], 'sayidul', 'alive'],\r\n          ['sayidul', 'Moh. Sayidulqisthon Nururrohman', 5, [], 'setya', 'alive'],\r\n          ['nafisa', 'Nafisa Isyqi Azzahira', 6, ['setya', 'sayidul'], null, 'alive'],\r\n          ['jamila', 'Jamilatul Fahimah', 4, ['djafar', 'muflikha'], 'junaedi', 'alive'],\r\n          ['junaedi', 'Djunaidi', 4, [], 'jamila', 'deceased'],\r\n          ['wildan', 'Wildan Kholidul Firdaus', 5, ['jamila', 'junaedi'], 'nikhlatus', 'alive'],\r\n          ['nikhlatus', 'Nikhlatus Syarifah', 5, [], 'wildan', 'alive'],\r\n          ['naqief', 'Naqief Zaufar Al Firdaus', 6, ['wildan', 'nikhlatus'], null, 'alive'],\r\n          ['fikri', 'Fikri Azharul Firdaus', 5, ['jamila', 'junaedi'], null, 'alive'],\r\n          ['inayah', 'Nurul Inayah', 5, [], 'faid', 'alive'],\r\n          ['faid', 'Faid Arinal Firdaus', 5, ['jamila', 'junaedi'], 'inayah', 'alive'],\r\n          ['fawaz', 'Fawaz Fatih Alfirdaus', 6, ['faid', 'inayah'], null, 'alive'],\r\n          ['ninsya', \"Ninsya 'Aizzul Firdaus\", 6, ['faid', 'inayah'], null, 'alive'],\r\n          ['zuhrotul', 'Zuhrotul Hikmah', 4, ['djafar', 'muflikha'], 'kusnur', 'alive'],\r\n          ['kusnur', 'Kusnur Rofiq', 4, [], 'zuhrotul', 'deceased'],\r\n          ['afi_fathun', \"Afi Fathun Nu'man\", 5, ['zuhrotul', 'kusnur'], 'bharanida', 'alive'],\r\n          ['bharanida', 'Bharanida Ramadhiya Adabi Jati', 5, [], 'afi_fathun', 'alive'],\r\n          ['almarheya', 'Almarheya Sherafina Affan', 6, ['afi_fathun', 'bharanida'], null, 'alive'],\r\n          ['afif_faqih', 'Afif Faqih Arrazin', 5, ['zuhrotul', 'kusnur'], null, 'alive'],\r\n          ['fariha', 'Fariha Jauhar Bahiya', 5, ['zuhrotul', 'kusnur'], null, 'alive'],\r\n          ['muchlish', 'Muchlish Zahidy (Ketua IKBS)', 4, ['djafar', 'muflikha'], 'umu_baroroh', 'alive'],\r\n          ['qodli', 'Ahmad Qodli Adli', 4, ['djafar', 'muflikha'], 'ratna_ana', 'alive'],\r\n          ['ratna_ana', 'Ratna Ana Melawati', 4, [], 'qodli', 'alive'],\r\n          ['hafid', 'M. Hafid Assajad', 5, ['qodli', 'ratna_ana'], null, 'alive'],\r\n          ['fatati', 'Fatati Nida\u2019ul Haq', 5, ['qodli', 'ratna_ana'], null, 'alive'],\r\n          ['uwais', 'Muhammad Uwais Assajjad', 5, ['qodli', 'ratna_ana'], null, 'alive'],\r\n          ['farid', 'Ahmad Farid Ma\u2019ruf', 4, ['djafar', 'muflikha'], 'muawanah', 'alive'],\r\n          ['muawanah', 'Siti Muawanah', 4, [], 'farid', 'alive'],\r\n          ['alkhalifi', 'Alkhalifi Athaillah Dzikri', 5, ['farid', 'muawanah'], null, 'alive'],\r\n          ['mariyam', 'Hj. Mariyam', 2, ['khamidin', 'sarminah'], 'ismail', 'deceased'],\r\n          ['ismail', 'Moh. Ismail', 2, [], 'mariyam', 'deceased'],\r\n          ['mustaqim', 'Mustaqim', 3, ['mariyam', 'ismail'], null, 'deceased'],\r\n          ['mariyaton', 'Mariyaton', 4, ['mustaqim'], null, 'alive'],\r\n          ['uswatun', 'Uswatun Khasanah', 4, ['mustaqim'], null, 'alive'],\r\n          ['nafiin', 'Nafi\u2019in', 4, ['mustaqim'], null, 'alive'],\r\n          ['jihan', 'Jihan Nafi Fasha Faradila', 5, ['nafiin'], null, 'alive'],\r\n          ['alimah', 'Alimah', 3, ['mariyam', 'ismail'], 'said', 'deceased'],\r\n          ['said', 'M. Said', 3, [], 'alimah', 'deceased'],\r\n          ['sumian', 'Sumi\u2019an', 4, ['alimah', 'said'], null, 'alive'],\r\n          ['zaini', 'Zaini', 4, ['alimah', 'said'], 'qomariyah', 'alive'],\r\n          ['qomariyah', 'Qomariyah', 4, [], 'zaini', 'alive'],\r\n          ['muntamah', 'Muntamah', 4, ['alimah', 'said'], null, 'alive'],\r\n          ['zainul_a', 'Zainul Arifin', 4, ['alimah', 'said'], null, 'alive'],\r\n          ['pujiah', 'Pujiah', 4, ['alimah', 'said'], null, 'alive'],\r\n          ['zulfiana', 'Zulfiana Novita Dewi', 5, ['zaini', 'qomariyah'], null, 'alive'],\r\n          ['azalia', 'Azalia Putri Merabel', 5, ['zaini', 'qomariyah'], null, 'alive'],\r\n          ['refan', 'Refan Bagus Saputra', 5, ['zaini', 'qomariyah'], null, 'alive'],\r\n          ['ifa', 'Ifa Rochmawati', 5, ['zaini', 'qomariyah'], 'adnan', 'alive'],\r\n          ['adnan', 'M. Adnan Nur Almujadid', 5, [], 'ifa', 'alive'],\r\n          ['salamatus', 'Salamatus Shofiah', 6, ['ifa', 'adnan'], null, 'alive'],\r\n          ['wahyu', 'Wahyu Sulistiarini', 6, ['ifa', 'adnan'], null, 'alive'],\r\n          ['zaitul', 'Zaitul Ana', 5, ['zaini', 'qomariyah'], 'anto', 'alive'],\r\n          ['anto', 'Anto Wibowo', 5, [], 'zaitul', 'alive'],\r\n          ['arya', 'Arya Zufar Wibowo', 6, ['zaitul', 'anto'], null, 'alive'],\r\n          ['muslim', 'Muslim', 3, ['mariyam', 'ismail'], null, 'alive'],\r\n          ['ahwan', 'H. Ahwan', 3, ['mariyam', 'ismail'], null, 'alive'],\r\n          ['supiyah2', 'Supiyah', 3, ['mariyam', 'ismail'], 'tasripan', 'alive'],\r\n          ['tasripan', 'Tasripan', 3, [], 'supiyah2', 'alive'],\r\n          ['sumarlik', 'Sumarlik', 4, ['supiyah2', 'tasripan'], 'sulikan', 'alive'],\r\n          ['sulikan', 'Sulikan', 4, [], 'sumarlik', 'alive'],\r\n          ['ukhwah', 'Ukhwah Islamiyah', 5, ['sumarlik', 'sulikan'], 'hasyim', 'alive'],\r\n          ['hasyim', 'Hasyim Asy\u2019ari', 5, [], 'ukhwah', 'alive'],\r\n          ['nasya', 'Nasya Aliyah Annaja', 6, ['ukhwah', 'hasyim'], null, 'alive'],\r\n          ['ghaza', 'Ghaza Qiyanu Ewabath', 6, ['ukhwah', 'hasyim'], null, 'alive'],\r\n          ['burman', 'Moh. Burmannudin Hilmi', 5, ['sumarlik', 'sulikan'], 'dina', 'alive'],\r\n          ['dina', 'Dina', 5, [], 'burman', 'alive'],\r\n          ['citra', 'Citra Kirana', 6, ['burman', 'dina'], null, 'alive'],\r\n          ['farikhatul', 'Farikhatul Bayyuroh', 5, ['sumarlik', 'sulikan'], 'fajar', 'alive'],\r\n          ['fajar', 'Fajar Kasifur R.', 5, [], 'farikhatul', 'alive'],\r\n          ['supinah_t', 'Supinah', 4, ['supiyah2', 'tasripan'], 'akromo', 'alive'],\r\n          ['akromo', 'Akromo', 4, [], 'supinah_t', 'alive'],\r\n          ['cahyati', 'Cahyati Kumaimah', 5, ['supinah_t', 'akromo'], 'rifqi', 'alive'],\r\n          ['rifqi', 'Rifqi Kurniawan', 5, [], 'cahyati', 'alive'],\r\n          ['adifa', 'Adifa', 6, ['cahyati', 'rifqi'], null, 'alive'],\r\n          ['ilove', 'I Love Sholahuddin Kurniawan', 5, ['supinah_t', 'akromo'], null, 'alive'],\r\n          ['abd_rokhim', 'Abdur Rokhim', 4, ['supiyah2', 'tasripan'], 'ani_dewi', 'alive'],\r\n          ['ani_dewi', 'Ani Triana \/ Dewi Fatimah', 4, [], 'abd_rokhim', 'alive'],\r\n          ['roni', 'Roni Wijaya', 5, ['abd_rokhim', 'ani_dewi'], null, 'alive'],\r\n          ['fitri', 'Fitri Handayani', 5, ['abd_rokhim', 'ani_dewi'], null, 'alive'],\r\n          ['hardika', 'Hardika', 5, ['abd_rokhim', 'ani_dewi'], null, 'alive'],\r\n          ['febi', 'Febi', 5, ['abd_rokhim', 'ani_dewi'], null, 'alive'],\r\n          ['abd_rohman', 'Abdur Rohman', 4, ['supiyah2', 'tasripan'], 'hermin', 'alive'],\r\n          ['hermin', 'Hermin', 4, [], 'abd_rohman', 'alive'],\r\n          ['naimatur', 'Naimatur Rosyidah', 5, ['abd_rohman', 'hermin'], null, 'alive'],\r\n          ['afi', 'Afi', 5, ['abd_rohman', 'hermin'], null, 'alive'],\r\n          ['halimah', 'Halimah Rohman Cahyati', 5, ['abd_rohman', 'hermin'], null, 'alive'],\r\n          ['sumarning', 'Sumarning', 4, ['supiyah2', 'tasripan'], 'jumuat', 'alive'],\r\n          ['jumuat', 'Jumu\u2019at', 4, [], 'sumarning', 'alive'],\r\n          ['amal_m', 'Amal Ma\u2019ruf', 5, ['sumarning', 'jumuat'], null, 'alive'],\r\n          ['nur_m', 'Nur Maifara', 5, ['sumarning', 'jumuat'], null, 'alive'],\r\n          ['abdul_umar', 'Abdul Umar', 4, ['supiyah2', 'tasripan'], 'jumaiyah', 'alive'],\r\n          ['jumaiyah', 'Jumaiyah', 4, [], 'abdul_umar', 'alive'],\r\n          ['abdul_amir', 'Abdul Amir', 4, ['supiyah2', 'tasripan'], 'suparmi', 'alive'],\r\n          ['suparmi', 'Suparmi', 4, [], 'abdul_amir', 'alive'],\r\n          ['amirotul', 'Amirotul Khoiriyah', 5, ['abdul_amir', 'suparmi'], null, 'alive'],\r\n          ['amirah', 'Amirah Rakhma', 5, ['abdul_amir', 'suparmi'], null, 'alive'],\r\n          ['sukanah', 'Sukanah', 3, ['mariyam', 'ismail'], 'sakun', 'alive'],\r\n          ['sakun', 'Sakun', 3, [], 'sukanah', 'alive'],\r\n          ['khusnul', 'Khusnul Yakin', 4, ['sukanah', 'sakun'], 'sus_yayuk', 'alive'],\r\n          ['sus_yayuk', 'Sus Yayuk', 4, [], 'khusnul', 'alive'],\r\n          ['zaskia', 'Zaskia Salsabila Rahmah', 5, ['khusnul', 'sus_yayuk'], null, 'alive'],\r\n          ['alif', 'Moh. Alif Al-Fareza', 5, ['khusnul', 'sus_yayuk'], null, 'alive'],\r\n          ['zainul_m', 'Zainul Mukhlasin', 4, ['sukanah', 'sakun'], 'lisdiana', 'alive'],\r\n          ['lisdiana', 'Lisdiana Masroh', 4, [], 'zainul_m', 'alive'],\r\n          ['zaqi', 'Moh. Zaqi Al Firdaus', 5, ['zainul_m', 'lisdiana'], null, 'alive'],\r\n          ['zico', 'Moh. Zico Zaim', 5, ['zainul_m', 'lisdiana'], null, 'alive'],\r\n          ['zafran', 'Muhammad Zafran Al Fatih', 5, ['zainul_m', 'lisdiana'], null, 'alive'],\r\n          ['akhsanul', 'Akhsanul Kholiqin', 4, ['sukanah', 'sakun'], 'ruslin', 'alive'],\r\n          ['ruslin', 'Ruslin', 4, [], 'akhsanul', 'alive'],\r\n          ['airil', 'Moh. Airil Dani P.', 5, ['akhsanul', 'ruslin'], null, 'alive'],\r\n          ['aira', 'Aira Daniyah', 5, ['akhsanul', 'ruslin'], null, 'alive'],\r\n          ['titik', 'Titik Zubaidah', 4, ['sukanah', 'sakun'], 'nasrullah', 'alive'],\r\n          ['nasrullah', 'Ahmad Nasrullah', 4, [], 'titik', 'alive'],\r\n          ['aidil', 'Moh. Aidil Ibrahim', 5, ['titik', 'nasrullah'], null, 'alive'],\r\n          ['afiyah', 'Hj. Afiyah', 3, ['mariyam', 'ismail'], 'mulkan', 'alive'],\r\n          ['mulkan', 'H. Mulkan', 3, [], 'afiyah', 'alive'],\r\n          ['luqman', 'Luqman Hakim', 4, ['afiyah', 'mulkan'], 'sus_yayuk2', 'alive'],\r\n          ['sus_yayuk2', 'Sus Yayuk (istri Luqman)', 4, [], 'luqman', 'alive'],\r\n          ['elya', 'Elya Esti Pratiwi', 5, ['luqman', 'sus_yayuk2'], null, 'alive'],\r\n          ['nur_hayati', 'Nur Hayati', 4, ['afiyah', 'mulkan'], 'mispani', 'alive'],\r\n          ['mispani', 'Mispani', 4, [], 'nur_hayati', 'alive'],\r\n          ['tufael', 'Tufael Atstsaqofi An Nur', 5, ['nur_hayati', 'mispani'], null, 'alive'],\r\n          ['wulidafi', 'Wulidafi Lussofiah An Nur', 5, ['nur_hayati', 'mispani'], null, 'alive'],\r\n          ['muin', 'Abdul Mu\u2019in', 2, ['khamidin', 'sarminah'], 'sukaemi', 'deceased'],\r\n          ['sukaemi', 'Sukaemi', 2, [], 'muin', 'deceased'],\r\n          ['masudi', 'Mas\u2019udi', 3, ['muin', 'sukaemi'], 'syamsiyah', 'deceased'],\r\n          ['syamsiyah', 'Nur Syamsiyah', 3, [], 'masudi', 'deceased'],\r\n          ['faishol', 'Faishol', 4, ['masudi', 'syamsiyah'], 'endang', 'alive'],\r\n          ['endang', 'Endang Tamari', 4, [], 'faishol', 'alive'],\r\n          ['rosyid', 'Ahmad Rosyid', 5, ['faishol', 'endang'], null, 'alive'],\r\n          ['putri_salma', 'Putri Salma Azzahra', 5, ['faishol', 'endang'], null, 'alive'],\r\n          ['fa_ahsin', 'Fa-Ahsin Khuluqi', 5, ['faishol', 'endang'], null, 'alive'],\r\n          ['arba', 'Arba\u2019 Maulouda Mubarok', 5, ['faishol', 'endang'], null, 'alive'],\r\n          ['anik', 'Anik Sholihatin', 4, ['masudi', 'syamsiyah'], 'masroin', 'alive'],\r\n          ['masroin', 'Masro\u2019in', 4, [], 'anik', 'alive'],\r\n          ['faizzatul', 'Faizzatul Fazlina', 5, ['anik', 'masroin'], null, 'alive'],\r\n          ['ana_kurni', 'Ana Kurni Kaufa', 5, ['anik', 'masroin'], null, 'alive'],\r\n          ['nadhira', 'Nadhira Inqilabi Jihar', 5, ['anik', 'masroin'], null, 'alive'],\r\n          ['aprilia', 'Aprilia Fazra Nadhifa', 5, ['anik', 'masroin'], null, 'alive'],\r\n          ['yayuk', 'Yayuk Sri Rahayu', 4, ['masudi', 'syamsiyah'], 'muis', 'alive'],\r\n          ['muis', 'Muhammad Mu\u2019is', 4, [], 'yayuk', 'alive'],\r\n          ['fariza', 'Fariza Najma Ainur Rahma', 5, ['yayuk', 'muis'], null, 'alive'],\r\n          ['umu_baroroh', 'Umu Baroroh', 4, ['masudi', 'syamsiyah'], 'muchlish', 'alive'],\r\n          ['syafridayu', 'Syafridayu Firauz Saifana', 5, ['muchlish', 'umu_baroroh'], null, 'alive'],\r\n          ['syafrizaldi', 'Syafrizaldi Abdillah Nuansyah', 5, ['muchlish', 'umu_baroroh'], null, 'alive'],\r\n          ['syahreifani', 'Syahreifani Al-Hakam', 5, ['muchlish', 'umu_baroroh'], null, 'alive'],\r\n          ['syarifa', 'Syarifa Cahaya Fajrina', 5, ['muchlish', 'umu_baroroh'], null, 'alive'],\r\n          ['nanik', 'Nanik Zakiyah', 4, ['masudi', 'syamsiyah'], null, 'alive'],\r\n          ['maghfiroh', 'Maghfiroh', 4, ['masudi', 'syamsiyah'], 'agus_m', 'alive'],\r\n          ['agus_m', 'Agus Maftuhin', 4, [], 'maghfiroh', 'alive'],\r\n          ['nida', 'Nida Hafiyya Almaftuh', 5, ['maghfiroh', 'agus_m'], null, 'alive'],\r\n          ['said_k', 'Ahmad Sa\u2019id Khumaidi M.', 5, ['maghfiroh', 'agus_m'], null, 'alive'],\r\n          ['syafaatur', 'Syafa\u2019atur Rosyidah', 4, ['masudi', 'syamsiyah'], 'adimas', 'alive'],\r\n          ['adimas', 'Adimas Dwi Putra', 4, [], 'syafaatur', 'alive'],\r\n          ['hasna', 'Hasna\u2019 Drikriyah', 5, ['syafaatur', 'adimas'], null, 'alive'],\r\n          ['samiadi', 'Samiadi', 2, ['khamidin', 'sarminah'], 'hasanah', 'deceased'],\r\n          ['hasanah', 'Hasanah', 2, [], 'samiadi', 'deceased'],\r\n          ['amin_s', 'Amin Sakin', 3, ['samiadi', 'hasanah'], 'suhartik', 'alive'],\r\n          ['suhartik', 'Suhartik', 3, [], 'amin_s', 'alive'],\r\n          ['lilik_z', 'Lilik Zuliatin', 4, ['amin_s', 'suhartik'], 'zainul_masroin', 'alive'],\r\n          ['zainul_masroin', 'Zainul Masro\u2019in', 4, [], 'lilik_z', 'alive'],\r\n          ['zaidan', 'Muhammad Zaidan Abiyyu R.', 5, ['lilik_z', 'zainul_masroin'], null, 'alive'],\r\n          ['siti_m', 'Siti Munawaroh', 3, ['samiadi', 'hasanah'], 'kaspuri', 'alive'],\r\n          ['kaspuri', 'Kaspuri', 3, [], 'siti_m', 'alive'],\r\n          ['susilawati', 'Susilawati', 4, ['siti_m', 'kaspuri'], 'tammat', 'alive'],\r\n          ['tammat', 'Tammat', 4, [], 'susilawati', 'alive'],\r\n          ['iqbal', 'Muhammad Iqbal Muwaffaq', 5, ['susilawati', 'tammat'], null, 'alive'],\r\n          ['amal_h', 'Amal Hakim', 4, ['siti_m', 'kaspuri'], 'enik', 'alive'],\r\n          ['enik', 'Enik Khafidlotin', 4, [], 'amal_h', 'alive'],\r\n          ['widya', 'Widya Rahmah', 5, ['amal_h', 'enik'], null, 'alive'],\r\n          ['hanum', 'Hanum Salsabila', 5, ['amal_h', 'enik'], null, 'alive'],\r\n          ['hasna_m', 'Hasna Mardhotillah', 5, ['amal_h', 'enik'], null, 'alive'],\r\n          ['wasis', 'Wasis Budiono', 4, ['siti_m', 'kaspuri'], 'nanik_s', 'alive'],\r\n          ['nanik_s', 'Nanik Sholikhatin', 4, [], 'wasis', 'alive'],\r\n          ['wina', 'Wina Rizka Maulidiyah F.', 5, ['wasis', 'nanik_s'], null, 'alive'],\r\n          ['haidar', 'Haidar Musyaffah Alfatih', 5, ['wasis', 'nanik_s'], null, 'alive'],\r\n          ['adzkiya', 'Adzkiya Safirah Nurrahma', 5, ['wasis', 'nanik_s'], null, 'alive'],\r\n          ['imam', 'Imam Hambali', 3, ['samiadi', 'hasanah'], null, 'alive'],\r\n          ['roziqin', 'Roziqin', 3, ['samiadi', 'hasanah'], 'mualimah', 'alive'],\r\n          ['mualimah', 'Mu\u2019alimah', 3, [], 'roziqin', 'alive'],\r\n          ['naufal', 'Muh. Naufal Nadia', 4, ['roziqin', 'mualimah'], null, 'alive'],\r\n          ['fuad', 'Muh. Fuad Aldiansyah', 4, ['roziqin', 'mualimah'], null, 'alive'],\r\n          ['veni', 'Muh. Veni Sugiarto', 4, ['roziqin', 'mualimah'], null, 'alive'],\r\n          ['umu_s', 'Umu Sholiha', 3, ['samiadi', 'hasanah'], 'muhammad', 'alive'],\r\n          ['muhammad', 'Muhammad', 3, [], 'umu_s', 'alive'],\r\n          ['hafiz', 'Muh. Hafiz Hanafi', 4, ['umu_s', 'muhammad'], null, 'alive'],\r\n          ['maisarah', 'Nur Maisarah', 4, ['umu_s', 'muhammad'], null, 'alive'],\r\n          ['hariz', 'Muh. Hariz Azizi', 4, ['umu_s', 'muhammad'], null, 'alive'],\r\n          ['muflikhatin', 'Muflikhatin', 3, ['samiadi', 'hasanah'], 'slamet', 'alive'],\r\n          ['slamet', 'Slamet', 3, [], 'muflikhatin', 'alive'],\r\n          ['irwansyah', 'Muh. Irwansyah Putra', 4, ['muflikhatin', 'slamet'], null, 'alive'],\r\n          ['karimah', 'Hj. Karimah', 3, ['kamsiyah', 'kasmirun'], 'anwar', 'alive'],\r\n          ['anwar', 'H. Anwar', 3, [], 'karimah', 'alive'],\r\n          ['ulfatus', 'Ulfatus Sholihah', 4, ['karimah', 'anwar'], null, 'alive'],\r\n          ['wildan_wahid', 'Abd. Wahid', 4, ['karimah', 'anwar'], null, 'alive'],\r\n          ['ummu_q', 'Ummu Qoidah', 4, ['karimah', 'anwar'], 'yahya', 'alive'],\r\n          ['yahya', 'Yahya', 4, [], 'ummu_q', 'alive'],\r\n          ['nursyahri', 'Moh. Nursyahri Muharram', 5, ['ummu_q', 'yahya'], null, 'alive'],\r\n          ['wildan_n', 'Wildan Nanda Rahmatullah', 5, ['ummu_q', 'yahya'], null, 'alive'],\r\n          ['triana', 'Triana Galang Wahyuddi', 5, ['ummu_q', 'yahya'], null, 'alive'],\r\n          ['darmadi', 'Darmadi', 4, ['karimah', 'anwar'], 'lusiana', 'alive'],\r\n          ['lusiana', 'Lusiana', 4, [], 'darmadi', 'alive'],\r\n          ['afifatul', 'Afifatul Azizah', 5, ['darmadi', 'lusiana'], null, 'alive'],\r\n          ['diyah', 'Diyah Risqi Rama Dhani', 5, ['darmadi', 'lusiana'], null, 'alive'],\r\n          ['kansah', 'Kansah Sakila Almahera', 5, ['darmadi', 'lusiana'], null, 'alive'],\r\n          ['abdul_karim', 'H. Abdul Karim', 3, ['kamsiyah', 'kasmirun'], 'sumiyati', 'alive'],\r\n          ['sumiyati', 'Sumiyati', 3, [], 'abdul_karim', 'alive'],\r\n          ['syahidin', 'Moh. Syahidin', 4, ['abdul_karim', 'sumiyati'], null, 'alive'],\r\n          ['azis', 'Abdul Azis', 4, ['abdul_karim', 'sumiyati'], null, 'alive'],\r\n          ['izwan', 'Ahmad Izwan Hakim', 4, ['abdul_karim', 'sumiyati'], 'hidayah', 'alive'],\r\n          ['hidayah', 'Al-Hidayah', 4, [], 'izwan', 'alive'],\r\n          ['diniyah', 'Diniyah Ni\u2019matus Sa\u2019adah', 5, ['izwan', 'hidayah'], null, 'alive'],\r\n          ['zalfa', 'Zalfa\u2019 Nashwa Az-Zahrah', 5, ['izwan', 'hidayah'], null, 'alive'],\r\n          ['mujaroh', 'Mujaroh', 3, ['kamsiyah', 'kasmirun'], 'kasuwan', 'alive'],\r\n          ['kasuwan', 'Kasuwan', 3, [], 'mujaroh', 'alive'],\r\n          ['nur_k', 'Siti Nur Kholifah', 4, ['mujaroh', 'kasuwan'], null, 'alive'],\r\n          ['deni', 'Moh. Deni Rudiyanto', 4, ['mujaroh', 'kasuwan'], 'wulan', 'alive'],\r\n          ['wulan', 'Sri Wulan', 4, [], 'deni', 'alive'],\r\n          ['syahida_a', 'Syahida Ahmad', 5, ['deni', 'wulan'], null, 'alive'],\r\n          ['emiir', 'Emiir Musyaffa Ahmad', 5, ['deni', 'wulan'], null, 'alive'],\r\n          ['emraan', 'Emraan Yasir Ahmad', 5, ['deni', 'wulan'], null, 'alive'],\r\n          ['ghofur', 'Ghofur Rohim', 4, ['mujaroh', 'kasuwan'], 'syahida_a2', 'alive'],\r\n          ['syahida_a2', 'Syahida Ahmad (Istri Ghofur)', 4, [], 'ghofur', 'alive'],\r\n          ['azril', 'Moh. Azril Akbar Ar-Rohim', 5, ['ghofur', 'syahida_a2'], null, 'alive'],\r\n          ['rafif', 'Muhammad Rafif Arshad Ar-rohim', 5, ['ghofur', 'syahida_a2'], null, 'alive'],\r\n          ['aisyiyah', 'Siti \u2018Aisyiyah', 3, ['kamsiyah', 'kasmirun'], 'mustain', 'alive'],\r\n          ['mustain', 'Musta\u2019in', 3, [], 'aisyiyah', 'alive'],\r\n          ['linda', 'Linda Puji Zuwanis', 4, ['aisyiyah', 'mustain'], null, 'alive'],\r\n          ['deffi', 'Deffi Inistianingsih', 4, ['aisyiyah', 'mustain'], null, 'alive']\r\n        ];\r\n\r\n        const initialFamilyData = rawFamilyData.map(d => ({\r\n          id: d[0], name: d[1], nickname: d[1].split(' ')[0].replace(\/H\\.|Hj\\.\/, '').trim(),\r\n          gen: d[2], parentIds: d[3], spouseId: d[4], status: d[5],\r\n          location: \"-\", phone: \"-\", photo: defaultAvatar\r\n        }));\r\n\r\n        \/\/ --- Memoized Components for Performance ---\r\n        const MemberCard = memo(({ member, onClick }) => (\r\n          <div onClick={() => onClick(member)} className=\"bg-white rounded-2xl p-4 flex items-center gap-4 cursor-pointer hover:shadow-lg transition-all border border-slate-100\/60 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.03)] active:scale-[0.98]\">\r\n            <div className=\"relative shrink-0\">\r\n              <div className=\"w-12 h-12 rounded-full overflow-hidden bg-slate-50 border border-slate-200\/50 p-1\">\r\n                <img src={member.photo} alt={member.name} className={`w-full h-full object-cover rounded-full ${member.status === 'deceased' ? 'grayscale opacity-60' : ''}`} loading=\"lazy\" \/>\r\n              <\/div>\r\n              {member.status === 'deceased' && <span className=\"absolute -bottom-1 -right-1 bg-slate-800 text-white text-[9px] px-1.5 py-0.5 rounded-md font-bold uppercase tracking-wider\">Alm<\/span>}\r\n            <\/div>\r\n            <div className=\"flex-1 overflow-hidden\">\r\n              <h3 className=\"font-bold text-slate-800 text-[15px] leading-tight truncate\">{member.name}<\/h3>\r\n              <p className=\"text-[11px] text-emerald-600 font-semibold mt-1 uppercase tracking-wider\">Generasi {member.gen}<\/p>\r\n            <\/div>\r\n            <IconChevronRight \/>\r\n          <\/div>\r\n        ));\r\n\r\n        const PersonNode = memo(({ member, onSelect }) => {\r\n          if (!member) return null;\r\n          const isFemale = \/hj\\.|ah$|wati$|i$|yah$|nah$|tun$|mah$|lia$|na$|a$|siti|nur|umi\/i.test(member.name);\r\n          const color = isFemale ? 'rose' : 'emerald';\r\n          return (\r\n            <div className=\"flex flex-col items-center cursor-pointer active:scale-95 transition-transform mx-2 my-2\" onClick={() => onSelect(member)}>\r\n              <div className={`w-14 h-14 rounded-full border-4 bg-white flex items-center justify-center z-10 shadow-lg ${color === 'rose' ? 'border-rose-400' : 'border-emerald-500'} ${member.status === 'deceased' ? 'grayscale opacity-50' : ''}`}>\r\n                <svg className={`w-8 h-8 ${color === 'rose' ? 'text-rose-300' : 'text-emerald-400'}`} viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                  <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" \/>\r\n                <\/svg>\r\n              <\/div>\r\n              <div className={`mt-2 px-3 py-1.5 rounded-xl text-white font-bold shadow-md min-w-[100px] max-w-[130px] flex flex-wrap justify-center items-center text-center tracking-tight border border-white\/20 ${color === 'rose' ? 'bg-rose-500' : 'bg-emerald-600'} ${member.status === 'deceased' ? 'grayscale opacity-60' : ''} ${member.name.length > 15 ? 'text-[9px] leading-tight' : 'text-[11px]'}`}>\r\n                {member.name}\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n        });\r\n\r\n        const TreeNode = memo(({ memberId, path, members, onSelect }) => {\r\n          const member = members.find(m => m.id === memberId);\r\n          if (!member || path.includes(memberId)) return null;\r\n          const newPath = [...path, memberId];\r\n          const spouse = members.find(m => m.id === member.spouseId || m.spouseId === member.id);\r\n          const children = members.filter(c => c.parentIds.includes(memberId) && c.parentIds[0] === memberId);\r\n          \r\n          return (\r\n            <li>\r\n              <div className=\"inline-flex justify-center items-start relative z-10\">\r\n                <PersonNode member={member} onSelect={onSelect} \/>\r\n                {spouse && (\r\n                  <>\r\n                    <div className=\"w-6 border-t-[2.5px] border-slate-300 mt-8 -mx-3 relative z-0\"><\/div>\r\n                    <PersonNode member={spouse} onSelect={onSelect} \/>\r\n                  <\/>\r\n                )}\r\n              <\/div>\r\n              {children.length > 0 && (\r\n                <ul>\r\n                  {children.map(child => (\r\n                    <TreeNode key={child.id} memberId={child.id} path={newPath} members={members} onSelect={onSelect} \/>\r\n                  ))}\r\n                <\/ul>\r\n              )}\r\n            <\/li>\r\n          );\r\n        });\r\n\r\n        \/\/ --- Helper & Modal Components ---\r\n        const getRelations = (member, members) => {\r\n          return {\r\n            parents: members.filter(m => member.parentIds.includes(m.id)),\r\n            spouse: members.find(m => m.id === member.spouseId || m.spouseId === member.id),\r\n            children: members.filter(m => m.parentIds.includes(member.id))\r\n          };\r\n        };\r\n\r\n        const WelcomeModal = ({ visitorName, setVisitorName, onEnter }) => (\r\n          <div className=\"glass-overlay\">\r\n            <div className=\"bg-white w-full max-w-md rounded-[32px] p-8 text-center shadow-2xl animate-fade-scale\">\r\n              <div className=\"w-24 h-24 bg-emerald-50 text-emerald-500 rounded-[32px] flex items-center justify-center mx-auto mb-6 shadow-sm animate-float\">\r\n                <IconHeart size={48} \/>\r\n              <\/div>\r\n              <h2 className=\"text-3xl font-black text-slate-900 mb-2\">Ahlan wa Sahlan<\/h2>\r\n              <p className=\"text-sm text-slate-500 mb-8 font-medium\">Silsilah Keluarga Bani Hamidin & Sarminah<\/p>\r\n              <input \r\n                type=\"text\" placeholder=\"Masukkan nama Anda...\" \r\n                className=\"w-full bg-slate-50 border-2 border-slate-100 rounded-2xl p-4 text-center text-lg font-bold text-slate-800 outline-none focus:border-emerald-400 focus:bg-white transition-all mb-4\" \r\n                value={visitorName} onChange={(e) => setVisitorName(e.target.value)}\r\n                onKeyDown={(e) => e.key === 'Enter' && visitorName.trim() && onEnter()}\r\n              \/>\r\n              <button \r\n                onClick={onEnter} \r\n                disabled={!visitorName.trim()}\r\n                className=\"w-full bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-200 disabled:text-slate-400 text-white font-bold py-4 rounded-2xl shadow-xl shadow-emerald-100 transition-all active:scale-95\"\r\n              >\r\n                Masuk Aplikasi\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        );\r\n\r\n        const MotivationModal = ({ randomQuote, onClose }) => (\r\n          <div className=\"glass-overlay\" onClick={onClose}>\r\n            <div className=\"motivation-modal relative bg-gradient-to-br from-emerald-50 to-teal-100 border border-white p-8 md:p-10\" onClick={e => e.stopPropagation()}>\r\n              <button onClick={onClose} className=\"absolute top-4 right-4 p-2 bg-white\/50 hover:bg-white rounded-full text-slate-500 transition-colors\"><IconX size={18}\/><\/button>\r\n              <div className=\"flex flex-col items-center text-center\">\r\n                <div className=\"w-16 h-16 bg-white rounded-full flex items-center justify-center text-emerald-500 shadow-md mb-6\">\r\n                  <IconQuote size={28} \/>\r\n                <\/div>\r\n                <h3 className=\"text-emerald-800 font-extrabold text-sm uppercase tracking-widest mb-6 border-b border-emerald-200 pb-2 inline-block\">Nasehat Silaturrahmi<\/h3>\r\n                <p className=\"text-slate-800 text-xl md:text-2xl font-semibold leading-relaxed mb-8 italic\">\"{randomQuote.text}\"<\/p>\r\n                <span className=\"bg-white\/60 backdrop-blur-sm text-emerald-700 text-xs font-bold px-4 py-2 rounded-full shadow-sm\">\u2014 {randomQuote.source}<\/span>\r\n              <\/div>\r\n              <button onClick={onClose} className=\"mt-8 w-full bg-slate-900 text-white font-bold py-4 rounded-2xl shadow-xl hover:bg-black transition-all active:scale-95\">\r\n                Lanjutkan\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        );\r\n\r\n        const ProfileModal = ({ member, members, onBack, onSave, onSelectMember }) => {\r\n          const [isEditing, setIsEditing] = useState(false);\r\n          const [formData, setFormData] = useState({ ...member });\r\n          \r\n          useEffect(() => {\r\n            setFormData({ ...member });\r\n            setIsEditing(false);\r\n          }, [member]);\r\n\r\n          const { parents, spouse, children } = useMemo(() => getRelations(member, members), [member, members]);\r\n          \r\n          return (\r\n            <div className=\"glass-overlay\">\r\n              <div className=\"profile-modal\">\r\n                <div className=\"bg-white px-6 py-5 flex items-center justify-between border-b border-slate-100 shrink-0 z-10\">\r\n                  <button onClick={isEditing ? () => setIsEditing(false) : onBack} className=\"p-2.5 bg-slate-50 text-slate-600 hover:bg-slate-100 rounded-full transition-colors active:scale-95\">\r\n                    {isEditing ? <IconX \/> : <IconArrowLeft \/>}\r\n                  <\/button>\r\n                  <h1 className=\"font-bold text-slate-800 text-lg flex-1 text-center\">{isEditing ? \"Edit Profil\" : \"Detail Keluarga\"}<\/h1>\r\n                  <button onClick={() => isEditing ? (onSave(formData), setIsEditing(false)) : setIsEditing(true)} className={`p-2.5 rounded-full transition-colors active:scale-95 ${isEditing ? 'bg-emerald-500 text-white hover:bg-emerald-600 shadow-md shadow-emerald-200' : 'bg-slate-50 text-slate-600 hover:bg-slate-100'}`}>\r\n                    {isEditing ? <IconSave \/> : <IconEdit \/>}\r\n                  <\/button>\r\n                <\/div>\r\n                <div className=\"p-6 flex-1 overflow-y-auto hide-scrollbar bg-slate-50\/50\">\r\n                  {isEditing ? (\r\n                    <div className=\"bg-white rounded-3xl p-6 shadow-sm border border-slate-100 space-y-5 animate-fade-scale\">\r\n                      <div><label className=\"text-[11px] font-bold text-slate-500 mb-2 block uppercase tracking-wider\">Nama Lengkap<\/label><input type=\"text\" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} className=\"w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 text-sm font-semibold text-slate-800 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50 outline-none transition-all\" \/><\/div>\r\n                      <div><label className=\"text-[11px] font-bold text-slate-500 mb-2 block uppercase tracking-wider\">Kota Domisili<\/label><input type=\"text\" value={formData.location} onChange={e => setFormData({ ...formData, location: e.target.value })} className=\"w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 text-sm font-semibold text-slate-800 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50 outline-none transition-all\" \/><\/div>\r\n                      <div><label className=\"text-[11px] font-bold text-slate-500 mb-2 block uppercase tracking-wider\">Nomor WhatsApp<\/label><input type=\"text\" value={formData.phone} onChange={e => setFormData({ ...formData, phone: e.target.value })} className=\"w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 text-sm font-semibold text-slate-800 focus:bg-white focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50 outline-none transition-all\" placeholder=\"0812...\" \/><\/div>\r\n                      <button onClick={() => { onSave(formData); setIsEditing(false); }} className=\"w-full bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-4 rounded-2xl shadow-xl shadow-emerald-100 mt-4 transition-all active:scale-[0.98]\">Simpan Perubahan<\/button>\r\n                    <\/div>\r\n                  ) : (\r\n                    <div className=\"space-y-6 animate-fade-scale\">\r\n                      <div className=\"bg-white rounded-3xl p-8 shadow-sm border border-slate-100 flex flex-col items-center relative overflow-hidden\">\r\n                        <div className=\"absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-slate-100 to-transparent\"><\/div>\r\n                        <div className=\"relative z-10 flex flex-col items-center\">\r\n                          <div className=\"w-24 h-24 rounded-full border-4 border-white shadow-xl bg-slate-50 overflow-hidden mb-4\">\r\n                            <img src={member.photo} className={`w-full h-full object-cover p-1 ${member.status === 'deceased' ? 'grayscale opacity-60' : ''}`} \/>\r\n                          <\/div>\r\n                          <h2 className=\"text-2xl font-extrabold text-slate-900 text-center tracking-tight leading-tight\">{member.name}<\/h2>\r\n                          <span className=\"bg-slate-100 text-slate-600 text-[10px] px-3 py-1.5 rounded-full font-bold mt-3 uppercase tracking-widest\">Generasi Ke-{member.gen}<\/span>\r\n                        <\/div>\r\n                        <div className=\"w-full mt-8 grid grid-cols-1 gap-3 z-10\">\r\n                          <div className=\"flex items-center gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-100\">\r\n                            <div className=\"bg-white p-2.5 rounded-xl shadow-sm text-emerald-500\"><IconMapPin size={20} \/><\/div>\r\n                            <span className=\"text-sm font-bold text-slate-700\">{member.location || \"-\"}<\/span>\r\n                          <\/div>\r\n                          <div className=\"flex items-center justify-between bg-slate-50 p-4 rounded-2xl border border-slate-100\">\r\n                            <div className=\"flex items-center gap-4\">\r\n                              <div className=\"bg-white p-2.5 rounded-xl shadow-sm text-emerald-500\"><IconPhone size={20} \/><\/div>\r\n                              <span className=\"text-sm font-bold text-slate-700\">{member.phone || \"-\"}<\/span>\r\n                            <\/div>\r\n                            {member.phone !== \"-\" && member.phone !== \"\" && <a href={`https:\/\/wa.me\/${member.phone.replace(\/^0\/, '62')}`} target=\"_blank\" rel=\"noreferrer\" className=\"bg-emerald-500 text-white text-[11px] font-bold px-4 py-2.5 rounded-xl hover:bg-emerald-600 transition-all shadow-md active:scale-95\">WhatsApp<\/a>}\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div className=\"space-y-4\">\r\n                        <h4 className=\"text-[12px] font-extrabold text-slate-400 uppercase tracking-widest px-2\">Koneksi Keluarga<\/h4>\r\n                        {parents.length > 0 && <div><p className=\"text-[10px] mb-2 font-bold px-2 text-slate-400 uppercase tracking-wider\">Orang Tua<\/p> {parents.map(p => <MemberCard key={p.id} member={p} onClick={onSelectMember} \/>)}<\/div>}\r\n                        {spouse && <div><p className=\"text-[10px] mb-2 font-bold px-2 text-slate-400 uppercase tracking-wider\">Pasangan<\/p> <MemberCard member={spouse} onClick={onSelectMember} \/><\/div>}\r\n                        {children.length > 0 && <div><p className=\"text-[10px] mb-2 font-bold px-2 text-slate-400 uppercase tracking-wider\">Anak-anak<\/p> {children.map(c => <MemberCard key={c.id} member={c} onClick={onSelectMember} \/>)}<\/div>}\r\n                      <\/div>\r\n                    <\/div>\r\n                  )}\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n        };\r\n\r\n        \/\/ --- Main Application ---\r\n        function App() {\r\n          const [members, setMembers] = useState(initialFamilyData);\r\n          const [search, setSearch] = useState(\"\");\r\n          const [selectedMember, setSelectedMember] = useState(null);\r\n          const [activeTab, setActiveTab] = useState('dashboard');\r\n          const [showWelcome, setShowWelcome] = useState(true);\r\n          const [showMotivation, setShowMotivation] = useState(false);\r\n          const [visitorName, setVisitorName] = useState(\"\");\r\n          const [randomQuote, setRandomQuote] = useState(rawQuotes[0]);\r\n          const [directoryFilter, setDirectoryFilter] = useState('all');\r\n\r\n          useEffect(() => {\r\n            const savedData = localStorage.getItem('silsilahIKBS_v12');\r\n            if (savedData) setMembers(JSON.parse(savedData));\r\n            setRandomQuote(rawQuotes[Math.floor(Math.random() * rawQuotes.length)]);\r\n          }, []);\r\n\r\n          useEffect(() => {\r\n            localStorage.setItem('silsilahIKBS_v12', JSON.stringify(members));\r\n          }, [members]);\r\n\r\n          const filteredMembers = useMemo(() => {\r\n            let filtered = members;\r\n            \r\n            if (directoryFilter === 'deceased') {\r\n              filtered = filtered.filter(m => m.status === 'deceased');\r\n            } else if (directoryFilter === 'alive') {\r\n              filtered = filtered.filter(m => m.status === 'alive');\r\n            }\r\n            \r\n            if (search) {\r\n              filtered = filtered.filter(m =>\r\n                m.name.toLowerCase().includes(search.toLowerCase()) || m.nickname.toLowerCase().includes(search.toLowerCase())\r\n              );\r\n            }\r\n            return filtered;\r\n          }, [search, members, directoryFilter]);\r\n\r\n          const stats = useMemo(() => {\r\n            const total = members.length;\r\n            const femaleNames = \/hj\\.|ah$|wati$|i$|yah$|nah$|tun$|mah$|lia$|na$|a$|siti|nur|umi|inayah|gandhes|ekarina\/i;\r\n            const maleExclusions = \/syahidin|muntaha|yahya|darmadi|aidil|faishol|hamzah|mustaqim|ismail|tasripan|syukur|zaini|adnan|burman|roni|hardika|amir|sakun|faid|kusnur|kasiyun|husnur\/i;\r\n            let female = 0, male = 0, deceased = 0, genCounts = {};\r\n\r\n            members.forEach(m => {\r\n              if (m.status === 'deceased') deceased++;\r\n              if (femaleNames.test(m.name) && !maleExclusions.test(m.name)) female++; else male++;\r\n              genCounts[m.gen] = (genCounts[m.gen] || 0) + 1;\r\n            });\r\n            const maxGenCount = Math.max(...Object.values(genCounts), 1);\r\n            const generations = total > 0 ? Math.max(...members.map(m => m.gen)) : 0;\r\n            return { total, male, female, generations, deceased, genCounts, maxGenCount };\r\n          }, [members]);\r\n\r\n          const generationStats = useMemo(() => {\r\n            const result = {};\r\n            members.forEach(m => {\r\n              const loc = m.location && m.location !== \"-\" ? m.location : \"Belum Terdata\";\r\n              if (!result[m.gen]) result[m.gen] = {};\r\n              if (!result[m.gen][loc]) result[m.gen][loc] = 0;\r\n              result[m.gen][loc]++;\r\n            });\r\n            return result;\r\n          }, [members]);\r\n\r\n          const handleUpdateMember = useCallback((updatedData) => {\r\n            setMembers(prev => prev.map(m => m.id === updatedData.id ? updatedData : m));\r\n            setSelectedMember(updatedData);\r\n          }, []);\r\n\r\n          \/\/ Smooth Dragging Logic using useRef\r\n          const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 768 : false;\r\n          const [zoom, setZoom] = useState(isMobileView ? 0.6 : 1);\r\n          \r\n          const treeRef = useRef(null);\r\n          const posRef = useRef({ x: 0, y: isMobileView ? 120 : 80 });\r\n          const isDraggingRef = useRef(false);\r\n          const startPosRef = useRef({ x: 0, y: 0 });\r\n\r\n          const updateTreeStyle = useCallback(() => {\r\n            if (treeRef.current) {\r\n              treeRef.current.style.transform = `translate(${posRef.current.x}px, ${posRef.current.y}px) scale(${zoom})`;\r\n            }\r\n          }, [zoom]);\r\n\r\n          useEffect(() => { updateTreeStyle(); }, [updateTreeStyle]);\r\n\r\n          const handlePointerDown = (e) => {\r\n            isDraggingRef.current = true;\r\n            const clientX = e.touches ? e.touches[0].clientX : e.clientX;\r\n            const clientY = e.touches ? e.touches[0].clientY : e.clientY;\r\n            startPosRef.current = { x: clientX - posRef.current.x, y: clientY - posRef.current.y };\r\n            if (treeRef.current) treeRef.current.style.transition = 'none'; \/\/ Disable transition during drag\r\n          };\r\n\r\n          const handlePointerMove = (e) => {\r\n            if (!isDraggingRef.current) return;\r\n            const clientX = e.touches ? e.touches[0].clientX : e.clientX;\r\n            const clientY = e.touches ? e.touches[0].clientY : e.clientY;\r\n            posRef.current = { x: clientX - startPosRef.current.x, y: clientY - startPosRef.current.y };\r\n            requestAnimationFrame(updateTreeStyle);\r\n          };\r\n\r\n          const handlePointerUp = () => {\r\n            isDraggingRef.current = false;\r\n            if (treeRef.current) treeRef.current.style.transition = 'transform 0.15s ease-out'; \/\/ Re-enable for smooth zoom\r\n          };\r\n\r\n          const handleEnterApp = () => {\r\n            setShowWelcome(false);\r\n            setTimeout(() => setShowMotivation(true), 400);\r\n          };\r\n\r\n          return (\r\n            <div id=\"root\" className=\"bg-slate-50 relative h-full w-full font-sans antialiased text-slate-900\">\r\n              {showWelcome && (\r\n                <WelcomeModal \r\n                  visitorName={visitorName} \r\n                  setVisitorName={setVisitorName} \r\n                  onEnter={handleEnterApp} \r\n                \/>\r\n              )}\r\n              {showMotivation && !showWelcome && (\r\n                <MotivationModal \r\n                  randomQuote={randomQuote} \r\n                  onClose={() => setShowMotivation(false)} \r\n                \/>\r\n              )}\r\n              \r\n              {selectedMember ? (\r\n                <ProfileModal \r\n                  member={selectedMember} \r\n                  members={members}\r\n                  onBack={() => setSelectedMember(null)} \r\n                  onSave={handleUpdateMember} \r\n                  onSelectMember={setSelectedMember}\r\n                \/>\r\n              ) : (\r\n                <div className=\"flex flex-col h-full overflow-hidden relative\">\r\n                  <div className=\"flex-1 overflow-hidden flex flex-col relative\">\r\n                    \r\n                    {\/* DASHBOARD TAB *\/}\r\n                    {activeTab === 'dashboard' && (\r\n                      <div className=\"flex-1 overflow-y-auto p-5 md:p-8 hide-scrollbar pb-36 animate-fade-scale\">\r\n                        <div className=\"mb-8 mt-2 px-2 flex justify-between items-start\">\r\n                          <div>\r\n                            <h1 className=\"text-3xl font-extrabold tracking-tight text-slate-900\">Halo, {visitorName || 'IKBS'} \ud83d\udc4b<\/h1>\r\n                            <p className=\"text-sm font-medium text-slate-500 mt-1\">Dashboard Ikatan Keluarga Bani Hamidin & Sarminah<\/p>\r\n                          <\/div>\r\n                        <\/div>\r\n                        \r\n                        {\/* Motivation Trigger Card *\/}\r\n                        <div onClick={() => setShowMotivation(true)} className=\"bg-gradient-to-r from-emerald-500 to-teal-500 rounded-[24px] p-6 mb-6 text-white cursor-pointer hover:shadow-lg hover:shadow-emerald-200 transition-all active:scale-[0.98] relative overflow-hidden\">\r\n                          <div className=\"relative z-10 flex items-center justify-between\">\r\n                            <div>\r\n                              <p className=\"text-emerald-100 text-[10px] font-bold uppercase tracking-widest mb-1\">Inspirasi Hari Ini<\/p>\r\n                              <h3 className=\"text-lg font-bold leading-tight\">Keutamaan Silaturrahmi<\/h3>\r\n                            <\/div>\r\n                            <div className=\"bg-white\/20 p-3 rounded-full backdrop-blur-sm\"><IconHeart size={20} \/><\/div>\r\n                          <\/div>\r\n                          <div className=\"absolute -right-10 -top-10 w-40 h-40 bg-white\/10 rounded-full blur-2xl\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-6\">\r\n                          <div className=\"bg-white p-5 rounded-[24px] shadow-sm border border-slate-100 flex flex-col\">\r\n                            <div className=\"w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-500 mb-3\"><IconUsers size={20} \/><\/div>\r\n                            <p className=\"text-3xl font-black text-slate-800\">{stats.total}<\/p>\r\n                            <p className=\"text-[11px] font-bold text-slate-400 uppercase tracking-wider mt-1\">Total Jiwa<\/p>\r\n                          <\/div>\r\n                          <div className=\"bg-white p-5 rounded-[24px] shadow-sm border border-slate-100 flex flex-col\">\r\n                            <div className=\"w-10 h-10 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 mb-3\"><IconNetwork size={20} \/><\/div>\r\n                            <p className=\"text-3xl font-black text-slate-800\">{stats.generations}<\/p>\r\n                            <p className=\"text-[11px] font-bold text-slate-400 uppercase tracking-wider mt-1\">Generasi<\/p>\r\n                          <\/div>\r\n                          <div onClick={() => { setDirectoryFilter('deceased'); setActiveTab('directory'); }} className=\"bg-slate-900 p-5 rounded-[24px] shadow-lg col-span-2 flex justify-between items-center relative overflow-hidden cursor-pointer hover:bg-slate-800 transition-all active:scale-[0.98]\">\r\n                            <div className=\"relative z-10\">\r\n                              <p className=\"text-3xl font-black text-white\">{stats.deceased}<\/p>\r\n                              <p className=\"text-[11px] font-bold text-slate-400 uppercase tracking-wider mt-1\">Almarhum\/Wafat<\/p>\r\n                            <\/div>\r\n                            <div className=\"relative z-10 w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center text-white\/50 backdrop-blur-sm\"><IconHeart size={20} \/><\/div>\r\n                            <div className=\"absolute -right-6 -top-6 w-32 h-32 bg-white\/5 rounded-full blur-2xl\"><\/div>\r\n                          <\/div>\r\n                        <\/div>\r\n\r\n                        {\/* Gender & Generation Grids *\/}\r\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                          <div className=\"bg-white p-6 rounded-[24px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100\">\r\n                            <h3 className=\"text-[12px] font-bold text-slate-500 uppercase tracking-wider mb-6\">Distribusi Gender<\/h3>\r\n                            <div className=\"flex justify-between items-end mb-3\">\r\n                              <div><span className=\"text-2xl font-black text-slate-800\">{stats.male}<\/span><span className=\"text-xs text-slate-400 ml-2 font-medium\">Pria<\/span><\/div>\r\n                              <div className=\"text-right\"><span className=\"text-xs text-slate-400 mr-2 font-medium\">Wanita<\/span><span className=\"text-2xl font-black text-slate-800\">{stats.female}<\/span><\/div>\r\n                            <\/div>\r\n                            <div className=\"w-full bg-slate-100 rounded-full h-4 flex overflow-hidden\">\r\n                              <div className=\"bg-emerald-400 h-full transition-all duration-1000\" style={{ width: `${(stats.male \/ stats.total) * 100}%` }}><\/div>\r\n                              <div className=\"bg-rose-400 h-full transition-all duration-1000\" style={{ width: `${(stats.female \/ stats.total) * 100}%` }}><\/div>\r\n                            <\/div>\r\n                          <\/div>\r\n                          <div className=\"bg-white p-6 rounded-[24px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100\">\r\n                            <h3 className=\"text-[12px] font-bold text-slate-500 uppercase tracking-wider mb-4\">Demografi Generasi<\/h3>\r\n                            <div className=\"flex items-end gap-2 h-20\">\r\n                              {Object.entries(stats.genCounts).map(([gen, count]) => (\r\n                                <div key={gen} className=\"flex-1 flex flex-col items-center gap-2 group\">\r\n                                  <div className=\"w-full bg-indigo-100 rounded-md relative flex items-end group-hover:bg-indigo-200 transition-colors\" style={{ height: '100%' }}>\r\n                                    <div className=\"w-full bg-indigo-500 rounded-md transition-all duration-1000 ease-out\" style={{ height: `${(count \/ stats.maxGenCount) * 100}%` }}><\/div>\r\n                                  <\/div>\r\n                                  <span className=\"text-[10px] font-bold text-slate-400\">G{gen}<\/span>\r\n                                <\/div>\r\n                              ))}\r\n                            <\/div>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n                    )}\r\n\r\n                    {\/* DIRECTORY TAB *\/}\r\n                    {activeTab === 'directory' && (\r\n                      <div className=\"flex flex-col h-full animate-fade-scale\">\r\n                        <div className=\"p-5 md:p-8 shrink-0\">\r\n                          <h2 className=\"text-2xl font-extrabold tracking-tight text-slate-900 mb-4\">Direktori Keluarga<\/h2>\r\n                          <div className=\"relative\">\r\n                            <div className=\"absolute inset-y-0 left-4 flex items-center text-slate-400 pointer-events-none\"><IconSearch size={20} \/><\/div>\r\n                            <input type=\"text\" value={search} onChange={e => setSearch(e.target.value)} placeholder=\"Cari nama atau panggilan...\" className=\"w-full bg-white border border-slate-200 text-slate-900 rounded-[20px] py-4 pl-12 pr-4 text-sm font-semibold focus:outline-none focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50 shadow-sm transition-all placeholder:text-slate-400\" \/>\r\n                          <\/div>\r\n                          <div className=\"flex gap-2 mt-4 overflow-x-auto hide-scrollbar\">\r\n                            <button onClick={() => setDirectoryFilter('all')} className={`px-4 py-2 rounded-full text-xs font-bold transition-all shrink-0 ${directoryFilter === 'all' ? 'bg-slate-900 text-white shadow-md' : 'bg-white text-slate-500 border border-slate-200 hover:bg-slate-50'}`}>Semua ({stats.total})<\/button>\r\n                            <button onClick={() => setDirectoryFilter('alive')} className={`px-4 py-2 rounded-full text-xs font-bold transition-all shrink-0 ${directoryFilter === 'alive' ? 'bg-emerald-500 text-white shadow-md shadow-emerald-200' : 'bg-white text-slate-500 border border-slate-200 hover:bg-slate-50'}`}>Masih Hidup ({stats.total - stats.deceased})<\/button>\r\n                            <button onClick={() => setDirectoryFilter('deceased')} className={`px-4 py-2 rounded-full text-xs font-bold transition-all shrink-0 ${directoryFilter === 'deceased' ? 'bg-rose-500 text-white shadow-md shadow-rose-200' : 'bg-white text-slate-500 border border-slate-200 hover:bg-slate-50'}`}>Almarhum\/Wafat ({stats.deceased})<\/button>\r\n                          <\/div>\r\n                        <\/div>\r\n                        <div className=\"flex-1 overflow-y-auto px-5 md:px-8 hide-scrollbar pb-36\">\r\n                          {filteredMembers.length > 0 ? (\r\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3\">\r\n                              {filteredMembers.map(m => <MemberCard key={m.id} member={m} onClick={setSelectedMember} \/>)}\r\n                            <\/div>\r\n                          ) : (\r\n                            <div className=\"flex flex-col items-center justify-center py-20 text-center\">\r\n                              <div className=\"bg-slate-100 p-5 rounded-full text-slate-400 mb-4\"><IconSearch size={28} \/><\/div>\r\n                              <p className=\"text-sm font-bold text-slate-500\">Anggota tidak ditemukan<\/p>\r\n                            <\/div>\r\n                          )}\r\n                        <\/div>\r\n                      <\/div>\r\n                    )}\r\n\r\n                    {\/* TREE TAB (Optimized Smooth Dragging) *\/}\r\n                    {activeTab === 'tree' && (\r\n                      <div className=\"flex-1 overflow-hidden relative bg-[#f8fafc] select-none animate-fade-scale touch-none\" \r\n                           onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerLeave={handlePointerUp} onPointerCancel={handlePointerUp}>\r\n                        <div className=\"absolute top-5 left-5 bg-white\/80 backdrop-blur-md px-4 py-3 rounded-[16px] z-30 shadow-sm border border-slate-200 pointer-events-none\">\r\n                          <h3 className=\"text-[13px] font-bold text-slate-800\">Silsilah Interaktif<\/h3>\r\n                          <p className=\"text-[10px] font-medium text-slate-500\">Geser & Zoom untuk navigasi<\/p>\r\n                        <\/div>\r\n                        <div className=\"absolute bottom-32 right-5 flex flex-col gap-2 z-30\">\r\n                          <button onClick={() => setZoom(z => Math.min(z + 0.15, 2))} className=\"w-10 h-10 bg-white rounded-full shadow-md flex items-center justify-center text-slate-600 active:scale-90 transition-all border border-slate-100\"><IconZoomIn size={18} \/><\/button>\r\n                          <button onClick={() => setZoom(z => Math.max(z - 0.15, 0.3))} className=\"w-10 h-10 bg-white rounded-full shadow-md flex items-center justify-center text-slate-600 active:scale-90 transition-all border border-slate-100\"><IconZoomOut size={18} \/><\/button>\r\n                          <button onClick={() => { setZoom(isMobileView ? 0.6 : 1); posRef.current = { x: 0, y: isMobileView ? 120 : 80 }; updateTreeStyle(); }} className=\"w-10 h-10 bg-white rounded-full shadow-md flex items-center justify-center text-emerald-600 active:scale-90 transition-all border border-slate-100\"><IconRefresh size={18} \/><\/button>\r\n                        <\/div>\r\n                        \r\n                        {\/* Direct DOM manipulation target *\/}\r\n                        <div ref={treeRef} className=\"tree-container w-full h-full cursor-grab active:cursor-grabbing origin-top\" style={{ transform: `translate(${posRef.current.x}px, ${posRef.current.y}px) scale(${zoom})` }}>\r\n                          <div className=\"org-tree flex justify-center w-max min-w-full px-10 pb-64\">\r\n                            <ul className=\"w-max\">\r\n                              <TreeNode memberId=\"khamidin\" path={[]} members={members} onSelect={setSelectedMember} \/>\r\n                            <\/ul>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n                    )}\r\n\r\n                    {\/* MAP & FUND Tabs (Simplified for brevity but identical in structure) *\/}\r\n                    {(activeTab === 'map' || activeTab === 'fund') && (\r\n                       <div className=\"flex-1 flex flex-col items-center justify-center p-8 text-center animate-fade-scale\">\r\n                          <div className=\"bg-slate-100 w-20 h-20 rounded-full flex items-center justify-center text-slate-400 mb-4\">\r\n                            {activeTab === 'map' ? <IconMapPin size={32} \/> : <IconWallet size={32} \/>}\r\n                          <\/div>\r\n                          <h2 className=\"text-xl font-bold text-slate-800 mb-2\">{activeTab === 'map' ? 'Peta Sebaran' : 'Keuangan'}<\/h2>\r\n                          <p className=\"text-sm text-slate-500\">Fitur sedang dalam pengembangan.<\/p>\r\n                       <\/div>\r\n                    )}\r\n                  <\/div>\r\n\r\n                  {\/* BOTTOM NAVIGATION *\/}\r\n                  <div className=\"absolute bottom-6 left-1\/2 -translate-x-1\/2 w-[92%] max-w-[420px] bg-white\/90 backdrop-blur-xl border border-slate-200\/60 shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)] rounded-full px-2 py-2 flex justify-between items-center z-50\">\r\n                    {['dashboard', 'directory', 'tree', 'map', 'fund'].map((tab) => (\r\n                      <button key={tab} onClick={() => setActiveTab(tab)} className={`flex-1 flex flex-col items-center justify-center gap-1 py-2 rounded-[20px] transition-all duration-300 ${activeTab === tab ? 'bg-slate-900 text-white scale-95 shadow-md' : 'text-slate-400 hover:bg-slate-50 hover:text-slate-600'}`}>\r\n                        {tab === 'dashboard' && <IconDashboard \/>}\r\n                        {tab === 'directory' && <IconSearch size={22} \/>}\r\n                        {tab === 'tree' && <IconNetwork \/>}\r\n                        {tab === 'map' && <IconMapPin size={22} \/>}\r\n                        {tab === 'fund' && <IconWallet \/>}\r\n                        <span className=\"text-[9px] font-bold uppercase tracking-wider\">{tab.substring(0,4)}<\/span>\r\n                      <\/button>\r\n                    ))}\r\n                  <\/div>\r\n\r\n                <\/div>\r\n              )}\r\n            <\/div>\r\n          );\r\n        }\r\n\r\n        const root = ReactDOM.createRoot(document.getElementById('ikbs-app-container'));\r\n        root.render(<App \/>);\r\n      })();\r\n    <\/script>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":37,"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/ikbks.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}