889 lines
56 KiB
HTML
889 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>PsyJournal React</title>
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/recharts/shadcn-recharts.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
body { margin: 0; padding: 0; overflow-x: hidden; background: transparent !important; }
|
|
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
|
|
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
|
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
border: 2px solid currentColor;
|
|
margin-top: -8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-transparent">
|
|
<div id="root" class="bg-transparent"></div>
|
|
|
|
<script type="text/babel">
|
|
// Shim for Lucide Icons in browser
|
|
const { useState, useEffect, useRef } = React;
|
|
|
|
// Mocking Lucide components to work in browser without bundler
|
|
const Icon = ({ name, className }) => {
|
|
useEffect(() => {
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
}, [name]);
|
|
return <i data-lucide={name.toLowerCase().replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()} className={className}></i>;
|
|
};
|
|
|
|
const BookOpen = (props) => <Icon name="BookOpen" {...props} />;
|
|
const Activity = (props) => <Icon name="Activity" {...props} />;
|
|
const BrainCircuit = (props) => <Icon name="BrainCircuit" {...props} />;
|
|
const User = (props) => <Icon name="User" {...props} />;
|
|
const Save = (props) => <Icon name="Save" {...props} />;
|
|
const Smile = (props) => <Icon name="Smile" {...props} />;
|
|
const Meh = (props) => <Icon name="Meh" {...props} />;
|
|
const Frown = (props) => <Icon name="Frown" {...props} />;
|
|
const TrendingUp = (props) => <Icon name="TrendingUp" {...props} />;
|
|
const AlertTriangle = (props) => <Icon name="AlertTriangle" {...props} />;
|
|
const Award = (props) => <Icon name="Award" {...props} />;
|
|
const Clock = (props) => <Icon name="Clock" {...props} />;
|
|
const Phone = (props) => <Icon name="Phone" {...props} />;
|
|
const X = (props) => <Icon name="X" {...props} />;
|
|
const Zap = (props) => <Icon name="Zap" {...props} />;
|
|
const Search = (props) => <Icon name="Search" {...props} />;
|
|
const CheckCircle = (props) => <Icon name="CheckCircle" {...props} />;
|
|
const Trash2 = (props) => <Icon name="Trash2" {...props} />;
|
|
const Edit2 = (props) => <Icon name="Edit2" {...props} />;
|
|
const Plus = (props) => <Icon name="Plus" {...props} />;
|
|
const Play = (props) => <Icon name="Play" {...props} />;
|
|
const HelpCircle = (props) => <Icon name="HelpCircle" {...props} />;
|
|
const ArrowRight = (props) => <Icon name="ArrowRight" {...props} />;
|
|
const Moon = (props) => <Icon name="Moon" {...props} />;
|
|
const Sun = (props) => <Icon name="Sun" {...props} />;
|
|
const Calendar = (props) => <Icon name="Calendar" {...props} />;
|
|
const LogOut = (props) => <Icon name="LogOut" {...props} />;
|
|
const Globe = (props) => <Icon name="Globe" {...props} />;
|
|
|
|
// Mocking Recharts for Browser (Simple version if library not fully loaded)
|
|
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } = window.Recharts || {
|
|
ResponsiveContainer: ({children}) => <div style={{width:'100%', height:'100%'}}>{children}</div>,
|
|
AreaChart: () => <div className="bg-white/20 w-full h-full flex items-center justify-center text-xs text-white/40">Chart Placeholder</div>,
|
|
Area: () => null, XAxis: () => null, YAxis: () => null, CartesianGrid: () => null, Tooltip: () => null
|
|
};
|
|
|
|
const PsychologyJournalApp = () => {
|
|
// --- KONFIGURASI WARNA & LEVEL ---
|
|
const COLORS = {
|
|
normal: '#38A169', // Hijau
|
|
mild: '#D69E2E', // Kuning/Emas
|
|
moderate: '#DD6B20',// Orange
|
|
severe: '#E53E3E', // Merah
|
|
primary: '#4F6DAD', // Default Biru
|
|
bg: 'transparent'
|
|
};
|
|
|
|
// --- STATE MANAGEMENT ---
|
|
const [activeTab, setActiveTab] = useState('journal');
|
|
const [viewMode, setViewMode] = useState('main');
|
|
const [modalBadge, setModalBadge] = useState(null);
|
|
const [showHelpModal, setShowHelpModal] = useState(false);
|
|
|
|
// User Data
|
|
const [userProfile, setUserProfile] = useState({
|
|
name: 'Pengguna',
|
|
streak: 0,
|
|
lastActiveDate: null,
|
|
xp: 0,
|
|
badges: []
|
|
});
|
|
|
|
// Data Jurnal & Penilaian (Mulai Kosong)
|
|
const [journals, setJournals] = useState([]);
|
|
const [assessments, setAssessments] = useState([]);
|
|
|
|
// Journal Form States
|
|
const [journalMode, setJournalMode] = useState('free');
|
|
const [journalText, setJournalText] = useState('');
|
|
const [availableTags, setAvailableTags] = useState(['#sedih', '#bangga', '#lelah', '#bersyukur', '#cemas']);
|
|
const [journalTags, setJournalTags] = useState([]);
|
|
const [tagInput, setTagInput] = useState('');
|
|
const [reflectionAnswers, setReflectionAnswers] = useState({ q1: '', q2: '', q3: '' });
|
|
const [autoSaveTime, setAutoSaveTime] = useState(null);
|
|
const [showAssessmentAlert, setShowAssessmentAlert] = useState(false);
|
|
|
|
// Search
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
// Assessment Inputs
|
|
const [assessmentInputs, setAssessmentInputs] = useState({
|
|
mood: 0, stress: 0, energy: 0, focus: 0
|
|
});
|
|
|
|
const [reportRange, setReportRange] = useState('mingguan');
|
|
|
|
// --- GAME STATES ---
|
|
const [activeGame, setActiveGame] = useState(null);
|
|
// Reaction
|
|
const [reactionState, setReactionState] = useState('intro');
|
|
const [reactionTime, setReactionTime] = useState(0);
|
|
const reactionTimerRef = useRef(null);
|
|
const reactionStartRef = useRef(0);
|
|
// Simon
|
|
const [simonSequence, setSimonSequence] = useState([]);
|
|
const [simonUserStep, setSimonUserStep] = useState(0);
|
|
const [simonPlaying, setSimonPlaying] = useState(false);
|
|
const [simonFlash, setSimonFlash] = useState(null);
|
|
const [simonScore, setSimonScore] = useState(0);
|
|
const [simonGameOver, setSimonGameOver] = useState(false);
|
|
// Logic
|
|
const [logicSetup, setLogicSetup] = useState({ difficulty: 'mudah', count: 5 });
|
|
const [logicState, setLogicState] = useState('setup');
|
|
const [logicQuestions, setLogicQuestions] = useState([]);
|
|
const [logicCurrentIdx, setLogicCurrentIdx] = useState(0);
|
|
const [logicScore, setLogicScore] = useState(0);
|
|
|
|
// --- DATABASE LENCANA ---
|
|
const BADGES_DB = [
|
|
{ id: 'first_step', name: 'Langkah Awal', icon: '🚶', desc: 'Menulis jurnal pertama kali.', date: '-' },
|
|
{ id: 'writer_routine', name: 'Penulis Rutin', icon: '✍️', desc: 'Menulis jurnal 7 hari berturut-turut.', date: '-' },
|
|
{ id: 'self_discipline', name: 'Disiplin Diri', icon: '🔥', desc: 'Mencapai streak aktivitas 7 hari.', date: '-' },
|
|
{ id: 'simon_master', name: 'Master Memori', icon: '🧠', desc: 'Mencapai level 8 di Tes Memori.', date: '-' },
|
|
{ id: 'reaction_flash', name: 'Si Kilat', icon: '⚡', desc: 'Reaksi di bawah 250ms.', date: '-' },
|
|
{ id: 'logic_einstein', name: 'Logika Einstein', icon: '🎓', desc: 'Skor 100% pada Logika Susah.', date: '-' },
|
|
{ id: 'night_owl', name: 'Burung Hantu', icon: '🦉', desc: 'Menulis jurnal di atas jam 10 malam.', date: '-' },
|
|
{ id: 'early_bird', name: 'Si Pagi', icon: '🌅', desc: 'Melakukan penilaian sebelum jam 7 pagi.', date: '-' },
|
|
{ id: 'zen_mood', name: 'Emosi Zen', icon: '🧘♀️', desc: 'Skor kestabilan emosi 0 (Normal) selama 3 hari.', date: '-' },
|
|
{ id: 'story_teller', name: 'Penyair Hati', icon: '📜', desc: 'Menulis jurnal lebih dari 500 karakter.', date: '-' },
|
|
];
|
|
|
|
// --- LOGIC FUNCTIONS ---
|
|
|
|
useEffect(() => {
|
|
if (!journalText && !reflectionAnswers.q1) return;
|
|
const timer = setTimeout(() => {
|
|
setAutoSaveTime(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
|
}, 30000);
|
|
return () => clearTimeout(timer);
|
|
}, [journalText, reflectionAnswers]);
|
|
|
|
const getTodayStr = () => {
|
|
const d = new Date();
|
|
return d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
|
};
|
|
|
|
const hasAssessedToday = () => assessments.some(a => a.date === getTodayStr());
|
|
|
|
const updateStreak = () => {
|
|
const today = getTodayStr();
|
|
if (userProfile.lastActiveDate === today) return;
|
|
|
|
setUserProfile(prev => ({
|
|
...prev,
|
|
streak: prev.streak + 1,
|
|
lastActiveDate: today,
|
|
xp: prev.xp + 20
|
|
}));
|
|
|
|
if (userProfile.streak === 0) unlockBadge('first_step');
|
|
};
|
|
|
|
const checkTimeBadges = () => {
|
|
const hour = new Date().getHours();
|
|
if (hour >= 22 || hour < 4) unlockBadge('night_owl');
|
|
if (hour >= 4 && hour < 7) unlockBadge('early_bird');
|
|
};
|
|
|
|
const handleAddTag = () => {
|
|
if (!tagInput.trim()) return;
|
|
const newTag = tagInput.startsWith('#') ? tagInput.trim() : `#${tagInput.trim()}`;
|
|
if (!availableTags.includes(newTag)) setAvailableTags([...availableTags, newTag]);
|
|
if (!journalTags.includes(newTag)) setJournalTags([...journalTags, newTag]);
|
|
setTagInput('');
|
|
};
|
|
|
|
const handleTagClick = (tag) => {
|
|
setSearchQuery(tag);
|
|
setViewMode('history_full');
|
|
};
|
|
|
|
const handleSaveJournal = () => {
|
|
if (!journalText.trim() && journalMode === 'free') {
|
|
alert("⚠️ Jurnal Bebas masih kosong.");
|
|
return;
|
|
}
|
|
if ((!reflectionAnswers.q1.trim() || !reflectionAnswers.q2.trim() || !reflectionAnswers.q3.trim()) && journalMode === 'reflection') {
|
|
alert("⚠️ Refleksi Harian belum lengkap.");
|
|
return;
|
|
}
|
|
|
|
const newEntry = {
|
|
id: Date.now(),
|
|
date: getTodayStr(),
|
|
type: 'complete',
|
|
content: {
|
|
text: journalText,
|
|
reflection: { ...reflectionAnswers }
|
|
},
|
|
tags: [...journalTags]
|
|
};
|
|
|
|
if (journalText.length > 500) unlockBadge('story_teller');
|
|
checkTimeBadges();
|
|
|
|
setJournals(prev => [newEntry, ...prev]);
|
|
|
|
setJournalText('');
|
|
setReflectionAnswers({ q1: '', q2: '', q3: '' });
|
|
setJournalTags([]);
|
|
setAutoSaveTime(null);
|
|
|
|
updateStreak();
|
|
|
|
if (!hasAssessedToday()) setShowAssessmentAlert(true);
|
|
else alert("✅ Jurnal Berhasil Disimpan!");
|
|
};
|
|
|
|
const handleSaveAssessment = () => {
|
|
const total = Object.values(assessmentInputs).reduce((a, b) => a + b, 0);
|
|
setAssessments(prev => [{ id: Date.now(), date: getTodayStr(), scores: assessmentInputs, total }, ...prev]);
|
|
|
|
if (total >= 10) alert("⚠️ Skor Berat. Disarankan konsultasi.");
|
|
checkTimeBadges();
|
|
if (assessmentInputs.mood === 0) unlockBadge('zen_mood');
|
|
updateStreak();
|
|
setAssessmentInputs({ mood: 0, stress: 0, energy: 0, focus: 0 });
|
|
setActiveTab('profile');
|
|
};
|
|
|
|
const handleDeleteAccount = () => {
|
|
if (window.confirm("Yakin hapus akun permanen?")) {
|
|
setJournals([]);
|
|
setAssessments([]);
|
|
setUserProfile({ name: 'Pengguna Baru', streak: 0, lastActiveDate: null, xp: 0, badges: [] });
|
|
setActiveTab('journal');
|
|
}
|
|
};
|
|
|
|
const unlockBadge = (badgeId) => {
|
|
if (!userProfile.badges.includes(badgeId)) {
|
|
setUserProfile(prev => ({ ...prev, badges: [...prev.badges, badgeId] }));
|
|
setModalBadge(BADGES_DB.find(b => b.id === badgeId));
|
|
}
|
|
};
|
|
|
|
const getSeverityInfo = (score) => {
|
|
if (score >= 10) return { color: COLORS.severe, bg: 'bg-red-50/80', text: 'text-red-700', fill: 'bg-red-500', label: 'Berat' };
|
|
if (score >= 7) return { color: COLORS.moderate, bg: 'bg-orange-50/80', text: 'text-orange-700', fill: 'bg-orange-500', label: 'Sedang' };
|
|
if (score >= 4) return { color: COLORS.mild, bg: 'bg-yellow-50/80', text: 'text-yellow-700', fill: 'bg-yellow-500', label: 'Ringan' };
|
|
return { color: COLORS.normal, bg: 'bg-green-50/80', text: 'text-green-700', fill: 'bg-green-500', label: 'Normal' };
|
|
};
|
|
|
|
const getChartData = () => {
|
|
if (assessments.length === 0) {
|
|
if (reportRange === 'mingguan') {
|
|
return ['Sn', 'Sl', 'Rb', 'Km', 'Jm', 'Sb', 'Mg'].map(day => ({ name: day, score: 0 }));
|
|
} else if (reportRange === 'bulanan') {
|
|
return ['M1', 'M2', 'M3', 'M4'].map(week => ({ name: week, score: 0 }));
|
|
} else {
|
|
return ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'].map(month => ({ name: month, score: 0 }));
|
|
}
|
|
}
|
|
|
|
const latestScore = assessments[0].total;
|
|
const jitter = (val) => Math.max(0, Math.min(12, val + (Math.random() * 2 - 1)));
|
|
|
|
if (reportRange === 'mingguan') {
|
|
return ['Sn', 'Sl', 'Rb', 'Km', 'Jm', 'Sb', 'Mg'].map(day => ({ name: day, score: jitter(latestScore) }));
|
|
} else if (reportRange === 'bulanan') {
|
|
return ['M1', 'M2', 'M3', 'M4'].map(week => ({ name: week, score: jitter(latestScore) }));
|
|
} else {
|
|
return ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'].map(month => ({ name: month, score: jitter(latestScore) }));
|
|
}
|
|
};
|
|
|
|
// --- GAME LOGIC ---
|
|
const startReactionGame = () => {
|
|
setReactionState('waiting');
|
|
setReactionTime(0);
|
|
const delay = 2000 + Math.random() * 4000;
|
|
reactionTimerRef.current = setTimeout(() => { setReactionState('ready'); reactionStartRef.current = Date.now(); }, delay);
|
|
};
|
|
const handleReactionClick = () => {
|
|
if (reactionState === 'waiting') { clearTimeout(reactionTimerRef.current); setReactionState('too-soon'); }
|
|
else if (reactionState === 'ready') {
|
|
const time = Date.now() - reactionStartRef.current;
|
|
setReactionTime(time); setReactionState('finished');
|
|
if (time < 250) unlockBadge('reaction_flash');
|
|
}
|
|
};
|
|
const playSimonSequence = async (sequence) => {
|
|
setSimonPlaying(false);
|
|
for (let i = 0; i < sequence.length; i++) {
|
|
await new Promise(r => setTimeout(r, 500));
|
|
setSimonFlash(sequence[i]);
|
|
await new Promise(r => setTimeout(r, 500));
|
|
setSimonFlash(null);
|
|
}
|
|
setSimonPlaying(true);
|
|
};
|
|
const startSimonGame = () => {
|
|
const firstIdx = Math.floor(Math.random() * 9);
|
|
const newSeq = [firstIdx];
|
|
setSimonSequence(newSeq); setSimonScore(0); setSimonUserStep(0); setSimonGameOver(false);
|
|
playSimonSequence(newSeq);
|
|
};
|
|
const handleSimonClick = (index) => {
|
|
if (!simonPlaying || simonGameOver) return;
|
|
setSimonFlash(index); setTimeout(() => setSimonFlash(null), 200);
|
|
if (index === simonSequence[simonUserStep]) {
|
|
if (simonUserStep === simonSequence.length - 1) {
|
|
const nextScore = simonScore + 1; setSimonScore(nextScore); setSimonUserStep(0);
|
|
const newSeq = [...simonSequence, Math.floor(Math.random() * 9)]; setSimonSequence(newSeq);
|
|
if (nextScore === 8) unlockBadge('simon_master');
|
|
setTimeout(() => playSimonSequence(newSeq), 1000);
|
|
} else { setSimonUserStep(simonUserStep + 1); }
|
|
} else { setSimonGameOver(true); setSimonPlaying(false); }
|
|
};
|
|
const LOGIC_DB = {
|
|
mudah: [{ q: "2, 4, 6, ...?", options: ["7","8","9"], ans: 1 }, { q: "Lawan kata Panas?", options: ["Dingin","Hangat","Api"], ans: 0 }, { q: "Warna langit cerah?", options: ["Merah","Biru","Hijau"], ans: 1 }, { q: "1 + 1 x 0 = ?", options: ["0","1","2"], ans: 1 }, { q: "Bentuk Roda?", options: ["Kotak","Bulat","Segitiga"], ans: 1 }],
|
|
sedang: [{ q: "1, 1, 2, 3, ...?", options: ["4","5","6"], ans: 1 }],
|
|
susah: [{ q: "A>B, B>C, A...C?", options: [">","<","="], ans: 0 }]
|
|
};
|
|
const startLogicGame = () => {
|
|
const pool = LOGIC_DB[logicSetup.difficulty];
|
|
setLogicQuestions(pool); setLogicCurrentIdx(0); setLogicScore(0); setLogicState('playing');
|
|
};
|
|
const handleLogicAnswer = (idx) => {
|
|
if (idx === logicQuestions[logicCurrentIdx].ans) setLogicScore(logicScore + 1);
|
|
if (logicCurrentIdx < logicQuestions.length - 1) {
|
|
setLogicCurrentIdx(logicCurrentIdx + 1);
|
|
} else {
|
|
setLogicState('finished');
|
|
if (logicSetup.difficulty === 'susah' && logicScore === logicQuestions.length - 1) unlockBadge('logic_einstein');
|
|
}
|
|
};
|
|
|
|
// --- RENDERERS ---
|
|
|
|
const renderJournal = () => (
|
|
<div className="flex flex-col h-[calc(100vh-170px)] animate-fade-in">
|
|
<div className="bg-white/70 backdrop-blur-sm p-1 rounded-xl flex shadow-sm border border-white/20 mb-4 shrink-0">
|
|
<button onClick={() => setJournalMode('free')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'free' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50/50'}`}>Jurnal Bebas</button>
|
|
<button onClick={() => setJournalMode('reflection')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'reflection' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50/50'}`}>Refleksi Harian</button>
|
|
</div>
|
|
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 relative flex-1 flex flex-col">
|
|
{journalMode === 'free' ? (
|
|
<>
|
|
<textarea
|
|
value={journalText}
|
|
onChange={(e) => setJournalText(e.target.value)}
|
|
placeholder="Tuliskan perasaanmu..."
|
|
className="w-full flex-1 bg-white/50 p-4 rounded-2xl border border-white/30 outline-none resize-none text-slate-700 focus:ring-2 focus:ring-[#4F6DAD] transition-all mb-4"
|
|
></textarea>
|
|
|
|
<div className="shrink-0">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<input type="text" value={tagInput} onChange={(e) => setTagInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleAddTag()} placeholder="+ Tag..." className="text-xs p-2 rounded-lg bg-white/50 border border-white/30 outline-none w-36" />
|
|
<button onClick={handleAddTag} disabled={!tagInput.trim()} className="p-2 bg-white/50 rounded-lg text-slate-500 hover:bg-[#4F6DAD] hover:text-white disabled:opacity-50 transition-colors"><Plus className="w-3 h-3" /></button>
|
|
</div>
|
|
<div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide">
|
|
{availableTags.map(tag => (
|
|
<button key={tag} onClick={() => setJournalTags(prev => prev.includes(tag) ? prev.filter(t=>t!==tag) : [...prev, tag])} className={`px-3 py-1 rounded-full text-xs font-bold transition-colors whitespace-nowrap ${journalTags.includes(tag) ? 'bg-[#4F6DAD] text-white' : 'bg-white/50 text-slate-400'}`}>{tag}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 overflow-y-auto px-1 space-y-5">
|
|
{[
|
|
{
|
|
q: 'Satu hal kecil yang membuatmu tersenyum hari ini?',
|
|
key: 'q1',
|
|
icon: Smile,
|
|
color: 'text-yellow-600 bg-yellow-100/80',
|
|
ph: 'Misal: Kopi pagi yang enak, sapaan teman...'
|
|
},
|
|
{
|
|
q: 'Tantangan terbesar hari ini & solusinya?',
|
|
key: 'q2',
|
|
icon: Activity,
|
|
color: 'text-red-600 bg-red-100/80',
|
|
ph: 'Misal: Macet total, solusinya dengar podcast...'
|
|
},
|
|
{
|
|
q: 'Satu hal yang ingin kamu perbaiki besok?',
|
|
key: 'q3',
|
|
icon: TrendingUp,
|
|
color: 'text-blue-600 bg-blue-100/80',
|
|
ph: 'Misal: Tidur lebih awal, kurangi sosmed...'
|
|
}
|
|
].map((item, idx) => (
|
|
<div key={idx} className="group relative">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className={`p-1.5 rounded-lg ${item.color} backdrop-blur-sm`}>
|
|
<item.icon className="w-4 h-4"/>
|
|
</div>
|
|
<label className="text-xs font-bold text-slate-700 uppercase tracking-wide">{item.q}</label>
|
|
</div>
|
|
<textarea
|
|
value={reflectionAnswers[item.key]}
|
|
onChange={(e) => setReflectionAnswers({...reflectionAnswers, [item.key]: e.target.value})}
|
|
className="w-full p-4 bg-white/50 rounded-2xl border border-white/30 outline-none focus:ring-2 focus:ring-[#4F6DAD] focus:bg-white/80 transition-all resize-none text-slate-700 text-sm placeholder:text-slate-400"
|
|
placeholder={item.ph}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="shrink-0 mt-3 flex flex-col gap-3 pt-3 border-t border-white/20">
|
|
{autoSaveTime && <div className="flex items-center justify-end gap-1.5 text-[10px] text-slate-400 font-medium animate-fade-in"><CheckCircle className="w-3 h-3 text-green-500" /> Disimpan otomatis {autoSaveTime}</div>}
|
|
<button onClick={handleSaveJournal} className="w-full bg-[#4F6DAD] text-white py-4 rounded-2xl font-bold text-lg hover:shadow-lg hover:bg-[#3E5C9A] active:scale-[0.98] transition-all flex items-center justify-center gap-2 shadow-md"><Save className="w-5 h-5"/> Simpan Jurnal</button>
|
|
</div>
|
|
</div>
|
|
|
|
{showAssessmentAlert && (
|
|
<div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-6 animate-fade-in">
|
|
<div className="bg-white/90 backdrop-blur-md p-6 rounded-3xl shadow-2xl max-w-sm w-full text-center">
|
|
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4"><Activity className="w-8 h-8 text-yellow-600"/></div>
|
|
<h3 className="text-xl font-bold text-slate-800 mb-2">Lupa Sesuatu?</h3>
|
|
<p className="text-slate-500 mb-6">Anda belum menilai mood hari ini.</p>
|
|
<div className="flex gap-3">
|
|
<button onClick={() => setShowAssessmentAlert(false)} className="flex-1 py-3 text-slate-400 font-bold hover:bg-white/50 rounded-xl">Nanti Saja</button>
|
|
<button onClick={() => {setShowAssessmentAlert(false); setActiveTab('assessment')}} className="flex-1 py-3 bg-[#4F6DAD] text-white font-bold rounded-xl shadow-lg">Ya, Lanjut</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const renderAssessment = () => {
|
|
const total = Object.values(assessmentInputs).reduce((a, b) => a + b, 0);
|
|
const risk = getSeverityInfo(total);
|
|
const indicators = [{ id: 'mood', label: 'Emosi' }, { id: 'stress', label: 'Stress' }, { id: 'energy', label: 'Energi' }, { id: 'focus', label: 'Fokus' }];
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in pb-20">
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 sticky top-20 z-10">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h2 className="text-lg font-bold text-slate-700">Skor Mental</h2>
|
|
<span className={`px-3 py-1 rounded-lg text-xs font-bold ${risk.bg} ${risk.text}`}>{total} - {risk.label}</span>
|
|
</div>
|
|
<div className="w-full bg-white/20 h-2 rounded-full mt-3 overflow-hidden">
|
|
<div className={`h-full transition-all duration-500 ${total >= 10 ? 'bg-red-500' : total >= 7 ? 'bg-orange-500' : total >= 4 ? 'bg-yellow-500' : 'bg-[#38A169]'}`} style={{width: `${(total/12)*100}%`}}></div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 space-y-8">
|
|
{indicators.map((item) => {
|
|
const val = assessmentInputs[item.id];
|
|
const getSeverity = (v) => {
|
|
if(v===0) return {label:'Normal', hex: COLORS.normal};
|
|
if(v===1) return {label:'Ringan', hex: COLORS.mild};
|
|
if(v===2) return {label:'Sedang', hex: COLORS.moderate};
|
|
return {label:'Berat', hex: COLORS.severe};
|
|
};
|
|
const sev = getSeverity(val);
|
|
const percent = (val / 3) * 100;
|
|
|
|
return (
|
|
<div key={item.id} className="mb-6">
|
|
<div className="flex justify-between mb-2">
|
|
<label className="font-bold text-slate-700">{item.label}</label>
|
|
<span className="text-sm font-bold" style={{color: sev.hex}}>{sev.label}</span>
|
|
</div>
|
|
|
|
<div className="relative h-10 flex items-center">
|
|
<div className="absolute w-full h-3 bg-white/30 rounded-full"></div>
|
|
|
|
<div
|
|
className="absolute h-3 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${percent}%`,
|
|
backgroundColor: sev.hex
|
|
}}
|
|
></div>
|
|
|
|
<div
|
|
className="absolute h-8 w-8 rounded-full shadow-md border-4 border-white flex items-center justify-center text-xs font-bold text-white transition-all duration-300 z-10"
|
|
style={{
|
|
left: `${percent}%`,
|
|
transform: `translateX(-50%)`,
|
|
backgroundColor: sev.hex
|
|
}}
|
|
>
|
|
{val}
|
|
</div>
|
|
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="3"
|
|
step="1"
|
|
value={val}
|
|
onChange={(e) => setAssessmentInputs(prev => ({...prev, [item.id]: parseInt(e.target.value)}))}
|
|
className="absolute w-full h-full opacity-0 cursor-pointer z-20"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-between text-[10px] text-slate-400 -mt-1 font-medium px-1">
|
|
<span>Normal</span><span>Berat</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
<button onClick={handleSaveAssessment} className="w-full py-4 bg-[#4F6DAD] text-white rounded-xl font-bold text-lg hover:bg-[#3E5C9A] transition-all shadow-lg">Simpan Penilaian</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderCognitive = () => (
|
|
<div className="space-y-6 animate-fade-in pb-20">
|
|
{!activeGame && (
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<button onClick={() => { setActiveGame('simon'); startSimonGame(); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
|
|
<div className="p-3 bg-purple-100 text-purple-600 rounded-xl"><BrainCircuit className="w-6 h-6"/></div>
|
|
<div><h3 className="font-bold text-slate-800">Tes Memori</h3><p className="text-xs text-slate-400">Ingat urutan pola grid 3x3</p></div>
|
|
</button>
|
|
<button onClick={() => { setActiveGame('reaction'); setReactionState('intro'); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
|
|
<div className="p-3 bg-yellow-100 text-yellow-600 rounded-xl"><Zap className="w-6 h-6"/></div>
|
|
<div><h3 className="font-bold text-slate-800">Kecepatan Reaksi</h3><p className="text-xs text-slate-400">Tes refleks visual</p></div>
|
|
</button>
|
|
<button onClick={() => { setActiveGame('logic'); setLogicState('setup'); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
|
|
<div className="p-3 bg-blue-100 text-blue-600 rounded-xl"><Search className="w-6 h-6"/></div>
|
|
<div><h3 className="font-bold text-slate-800">Tes Logika</h3><p className="text-xs text-slate-400">Asah pola pikir</p></div>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* GAME: REACTION */}
|
|
{activeGame === 'reaction' && (
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg text-center h-[400px] flex flex-col justify-center relative border border-white/20">
|
|
<button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
|
|
<h3 className="font-bold text-xl mb-4 text-[#4F6DAD]">Tes Reaksi</h3>
|
|
<div onClick={handleReactionClick} className={`flex-1 rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-all select-none ${reactionState === 'intro' ? 'bg-white/30' : reactionState === 'waiting' ? 'bg-red-500' : reactionState === 'ready' ? 'bg-green-500' : reactionState === 'too-soon' ? 'bg-orange-500' : 'bg-[#4F6DAD]'}`}>
|
|
{reactionState === 'intro' && <button onClick={(e) => { e.stopPropagation(); startReactionGame(); }} className="bg-[#4F6DAD] text-white px-8 py-3 rounded-full font-bold shadow-lg">Mulai Tes</button>}
|
|
{reactionState === 'waiting' && <p className="text-white font-bold text-2xl animate-pulse">Tunggu Hijau...</p>}
|
|
{reactionState === 'ready' && <p className="text-white font-bold text-3xl">TEKAN!</p>}
|
|
{reactionState === 'too-soon' && <div onClick={(e) => e.stopPropagation()}><p className="text-white font-bold mb-4">Terlalu Cepat!</p><button onClick={startReactionGame} className="bg-white/30 text-white px-4 py-2 rounded-xl">Ulangi</button></div>}
|
|
{reactionState === 'finished' && <div onClick={(e) => e.stopPropagation()}><p className="text-white font-bold text-4xl mb-2">{reactionTime} ms</p><button onClick={startReactionGame} className="bg-white/20 text-white px-6 py-2 rounded-xl mt-4">Coba Lagi</button></div>}
|
|
</div>
|
|
<p className="text-xs text-slate-400 mt-4">Jeda waktu berubah setiap ronde.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* GAME: MEMORY TEST (SIMON 3x3) */}
|
|
{activeGame === 'simon' && (
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg text-center relative border border-white/20">
|
|
<button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
|
|
<div className="mb-6">
|
|
<h3 className="font-bold text-xl text-[#4F6DAD]">Tes Memori</h3>
|
|
<p className="text-sm text-slate-500">Skor: {simonScore}</p>
|
|
</div>
|
|
|
|
{simonGameOver ? (
|
|
<div className="py-10">
|
|
<p className="text-red-500 font-bold text-xl mb-4">Game Over!</p>
|
|
<p className="text-slate-600 mb-6">Skor Akhir: {simonScore}</p>
|
|
<button onClick={startSimonGame} className="bg-[#4F6DAD] text-white px-8 py-3 rounded-xl font-bold">Main Lagi</button>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-3 gap-3 max-w-[280px] mx-auto">
|
|
{[...Array(9)].map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => handleSimonClick(i)}
|
|
className={`h-20 rounded-xl transition-all duration-150 shadow-sm border-b-4 active:border-b-0 active:translate-y-1 ${
|
|
simonFlash === i
|
|
? 'bg-[#4F6DAD] border-[#3b5488] brightness-110 scale-105'
|
|
: 'bg-white/30 border-white/40 hover:bg-white/50'
|
|
}`}
|
|
></button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!simonPlaying && !simonGameOver && <p className="mt-6 text-sm font-bold text-slate-400 animate-pulse">Perhatikan Urutan...</p>}
|
|
{simonPlaying && !simonGameOver && <p className="mt-6 text-sm font-bold text-[#4F6DAD]">Giliranmu!</p>}
|
|
</div>
|
|
)}
|
|
|
|
{/* GAME: LOGIC */}
|
|
{activeGame === 'logic' && (
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg relative min-h-[400px] flex flex-col border border-white/20">
|
|
<button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
|
|
|
|
{logicState === 'setup' && (
|
|
<div className="flex flex-col justify-center flex-1">
|
|
<h3 className="font-bold text-xl text-[#4F6DAD] mb-6 text-center">Pengaturan Tes Logika</h3>
|
|
|
|
<div className="mb-6">
|
|
<label className="text-xs font-bold text-slate-400 uppercase mb-2 block">Tingkat Kesulitan</label>
|
|
<div className="flex bg-white/30 p-1 rounded-xl">
|
|
{['mudah', 'sedang', 'susah'].map(lvl => (
|
|
<button key={lvl} onClick={() => setLogicSetup({...logicSetup, difficulty: lvl})} className={`flex-1 py-2 rounded-lg text-xs font-bold capitalize transition-all ${logicSetup.difficulty === lvl ? 'bg-white shadow text-[#4F6DAD]' : 'text-slate-400'}`}>{lvl}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<label className="text-xs font-bold text-slate-400 uppercase mb-2 block">Jumlah Soal</label>
|
|
<div className="flex gap-4">
|
|
{[5, 10].map(count => (
|
|
<button key={count} onClick={() => setLogicSetup({...logicSetup, count})} className={`flex-1 py-3 border-2 rounded-xl font-bold transition-all ${logicSetup.count === count ? 'border-[#4F6DAD] text-[#4F6DAD] bg-white/50' : 'border-white/30 text-slate-400'}`}>{count} Soal</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button onClick={startLogicGame} className="w-full bg-[#4F6DAD] text-white py-4 rounded-xl font-bold text-lg shadow-lg">Mulai Tes</button>
|
|
</div>
|
|
)}
|
|
|
|
{logicState === 'playing' && (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<span className="text-xs font-bold text-slate-400">Soal {logicCurrentIdx + 1}/{logicQuestions.length}</span>
|
|
<span className="text-xs font-bold bg-white/50 text-[#4F6DAD] px-2 py-1 rounded capitalize">{logicSetup.difficulty}</span>
|
|
</div>
|
|
|
|
<h4 className="font-bold text-lg text-slate-800 mb-8 leading-relaxed">{logicQuestions[logicCurrentIdx]?.q}</h4>
|
|
|
|
<div className="space-y-3 flex-1">
|
|
{logicQuestions[logicCurrentIdx]?.options.map((opt, idx) => (
|
|
<button key={idx} onClick={() => handleLogicAnswer(idx)} className="w-full text-left p-4 rounded-xl border border-white/30 bg-white/20 hover:bg-white/50 hover:border-[#4F6DAD] transition-all font-medium text-slate-600 active:scale-[0.98]">
|
|
{opt}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{logicState === 'finished' && (
|
|
<div className="text-center flex flex-col justify-center flex-1">
|
|
<div className="w-20 h-20 bg-indigo-100/80 rounded-full flex items-center justify-center mx-auto mb-4 text-[#4F6DAD] text-4xl font-bold">{Math.round((logicScore/logicQuestions.length)*100)}%</div>
|
|
<h3 className="font-bold text-xl text-slate-800 mb-2">Tes Selesai!</h3>
|
|
<p className="text-slate-500 mb-8">Anda menjawab {logicScore} benar dari {logicQuestions.length} soal.</p>
|
|
<button onClick={() => setLogicState('setup')} className="bg-[#4F6DAD] text-white px-8 py-3 rounded-xl font-bold">Ulangi Tes</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const renderProfile = () => {
|
|
const chartData = getChartData();
|
|
const avgScore = chartData.length > 0 && assessments.length > 0
|
|
? chartData.reduce((a, b) => a + (b.score || 0), 0) / chartData.length
|
|
: 0;
|
|
const severityInfo = getSeverityInfo(avgScore);
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fade-in pb-20">
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 flex items-center justify-between">
|
|
<div className="flex items-center gap-4"><div className="w-14 h-14 bg-[#4F6DAD] rounded-full flex items-center justify-center text-white text-xl font-bold">U</div><div><h2 className="font-bold text-lg text-slate-800">{userProfile.name}</h2><p className="text-xs text-slate-400">Bergabung Jan 2024</p></div></div>
|
|
<div className="text-center"><div className="flex items-center gap-1 text-orange-500 font-bold text-xl">{userProfile.streak} <span className="text-2xl">🔥</span></div><p className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Streak</p></div>
|
|
</div>
|
|
|
|
<button onClick={() => setShowHelpModal(true)} className="w-full bg-red-50/80 backdrop-blur-sm border border-red-100 text-red-600 py-3 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-red-100/80 transition-colors">
|
|
<Phone className="w-4 h-4" /> BUTUH BANTUAN DARURAT?
|
|
</button>
|
|
|
|
{/* 1. LENCANA PENCAPAIAN */}
|
|
<div>
|
|
<h3 className="font-bold text-slate-700 mb-3 flex items-center gap-2"><Award className="w-5 h-5 text-[#4F6DAD]"/> Lencana</h3>
|
|
<div className="bg-white/80 backdrop-blur-md p-4 rounded-3xl shadow-sm border border-white/20"><div className="grid grid-cols-3 gap-4 max-h-64 overflow-y-auto pr-1">{BADGES_DB.map(badge => (<div key={badge.id} onClick={() => setModalBadge(badge)} className={`aspect-square rounded-2xl flex flex-col items-center justify-center text-center p-2 cursor-pointer transition-all ${userProfile.badges.includes(badge.id) ? 'bg-white/50 hover:bg-white/80' : 'opacity-40 grayscale bg-white/20'}`}><span className="text-3xl mb-1">{badge.icon}</span><span className="text-[10px] font-bold text-slate-600 leading-tight">{badge.name}</span></div>))}</div></div>
|
|
</div>
|
|
|
|
{/* 2. LAPORAN KESEHATAN */}
|
|
<div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="font-bold text-slate-700">Laporan Kesehatan</h3>
|
|
<select value={reportRange} onChange={(e) => setReportRange(e.target.value)} className="bg-white/50 text-xs font-bold text-slate-600 py-2 px-3 rounded-lg border-none outline-none">
|
|
<option value="mingguan">Mingguan</option>
|
|
<option value="bulanan">Bulanan</option>
|
|
<option value="tahunan">Tahunan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="h-40 w-full mb-4">
|
|
<ResponsiveContainer>
|
|
<AreaChart data={chartData}>
|
|
<defs>
|
|
<linearGradient id="colorScore" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={severityInfo.color} stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor={severityInfo.color} stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.1)"/>
|
|
<XAxis dataKey="name" tick={{fontSize:10, fill:'#64748b'}} axisLine={false} tickLine={false}/>
|
|
<Tooltip contentStyle={{borderRadius:'10px', border:'none', backgroundColor:'rgba(255,255,255,0.9)'}}/>
|
|
<Area type="monotone" dataKey="score" stroke={severityInfo.color} strokeWidth={3} fill="url(#colorScore)"/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{assessments.length > 0 || journals.length > 0 ? (
|
|
<div className={`${severityInfo.bg} p-4 rounded-xl flex gap-3 items-start transition-colors duration-500`}>
|
|
<BrainCircuit className={`w-5 h-5 ${severityInfo.text} mt-0.5 flex-shrink-0`}/>
|
|
<div>
|
|
<h4 className={`text-xs font-bold ${severityInfo.text} uppercase mb-1`}>AI Insight: {severityInfo.label}</h4>
|
|
<p className={`text-xs ${severityInfo.text} leading-relaxed opacity-90`}>
|
|
{avgScore >= 10 ? "Tingkat stres sangat tinggi. Segera hubungi bantuan profesional." :
|
|
avgScore >= 7 ? "Terdeteksi beban emosi sedang. Luangkan waktu untuk hobi." :
|
|
avgScore >= 4 ? "Ada sedikit gejolak. Tetap jaga pola tidur." :
|
|
"Kondisi mental Anda stabil. Teruskan kebiasaan baik ini!"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white/30 p-4 rounded-xl flex gap-3 items-center text-slate-400">
|
|
<BrainCircuit className="w-5 h-5"/>
|
|
<p className="text-xs">Isi penilaian untuk melihat analisis AI.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 3. RIWAYAT JURNAL TERBARU */}
|
|
<div>
|
|
<h3 className="font-bold text-slate-700 mb-3 flex items-center gap-2"><BookOpen className="w-5 h-5 text-[#4F6DAD]"/> Riwayat Jurnal Terbaru</h3>
|
|
{journals.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{journals.slice(0, 3).map(j => (
|
|
<div key={j.id} className="bg-white/50 backdrop-blur-md p-4 rounded-2xl shadow-sm border border-white/20 text-sm">
|
|
<span className="text-[#4F6DAD] font-bold">{j.date}</span>
|
|
<p className="line-clamp-1 text-slate-600">{j.content.text}</p>
|
|
</div>
|
|
))}
|
|
<button onClick={() => setViewMode('history_full')} className="w-full py-3 text-[#4F6DAD] font-bold text-xs bg-white/50 rounded-xl hover:bg-white/80 border border-white/30">Lihat Semua</button>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white/30 p-6 rounded-2xl border border-dashed border-white/40 text-center text-slate-400 text-sm">
|
|
Belum ada jurnal yang disimpan.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 4. HAPUS AKUN */}
|
|
<div className="pt-4">
|
|
<button onClick={handleDeleteAccount} className="w-full py-4 text-red-500 font-bold text-sm bg-red-50/50 backdrop-blur-sm rounded-2xl border border-red-100 hover:bg-red-100/50 transition-colors flex items-center justify-center gap-2">
|
|
<Trash2 className="w-4 h-4"/> Hapus Akun Permanen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderHistoryFull = () => {
|
|
const filteredJournals = journals.filter(j => {
|
|
const q = searchQuery.toLowerCase();
|
|
if (j.type === 'complete' && j.content.text.toLowerCase().includes(q)) return true;
|
|
if (j.tags && j.tags.some(t => t.toLowerCase().includes(q))) return true;
|
|
return false;
|
|
});
|
|
|
|
return (
|
|
<div className="animate-slide-up pb-20">
|
|
<div className="sticky top-0 bg-transparent pt-4 pb-2 z-10 flex items-center gap-3 mb-4"><button onClick={() => setViewMode('main')} className="p-2 bg-white/80 backdrop-blur-md rounded-full shadow-sm"><X className="w-5 h-5"/></button><h2 className="text-xl font-bold text-slate-800">Riwayat Jurnal</h2></div>
|
|
<div className="relative mb-6"><Search className="absolute left-4 top-3.5 w-5 h-5 text-slate-400" /><input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Cari jurnal atau tag..." className="w-full pl-12 pr-4 py-3 rounded-xl border border-white/30 bg-white/50 backdrop-blur-md focus:border-[#4F6DAD] outline-none shadow-sm"/></div>
|
|
<div className="space-y-4">
|
|
{filteredJournals.length > 0 ? filteredJournals.map(j => (
|
|
<div key={j.id} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl shadow-sm border border-white/20">
|
|
<div className="flex justify-between items-start mb-2"><span className="text-xs font-bold text-[#4F6DAD] bg-white/50 px-2 py-1 rounded-md border border-white/30">{j.date}</span></div>
|
|
<div className="space-y-4">
|
|
<p className="text-slate-700 text-sm leading-relaxed border-b border-white/20 pb-3">{j.content.text}</p>
|
|
<div className="bg-white/30 p-4 rounded-xl space-y-3 border border-white/20">
|
|
<div className="flex items-center gap-2 mb-1"><div className="w-1.5 h-1.5 rounded-full bg-[#4F6DAD]"></div><span className="text-xs font-bold text-slate-500 uppercase">Hal Kecil</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q1}"</p>
|
|
<div className="flex items-center gap-2 mb-1 mt-3"><div className="w-1.5 h-1.5 rounded-full bg-red-400"></div><span className="text-xs font-bold text-slate-500 uppercase">Tantangan</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q2}"</p>
|
|
<div className="flex items-center gap-2 mb-1 mt-3"><div className="w-1.5 h-1.5 rounded-full bg-blue-400"></div><span className="text-xs font-bold text-slate-500 uppercase">Perbaikan</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q3}"</p>
|
|
</div>
|
|
</div>
|
|
{j.tags && <div className="flex gap-2 mt-3">{j.tags.map(t => <span key={t} onClick={() => handleTagClick(t)} className="text-[10px] text-slate-500 bg-white/50 px-2 py-1 rounded-full border border-white/20 cursor-pointer hover:bg-[#4F6DAD] hover:text-white transition-colors">{t}</span>)}</div>}
|
|
</div>
|
|
)) : <div className="text-center py-10 text-slate-400"><p>Tidak ditemukan.</p></div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (viewMode === 'history_full') return <div className="min-h-screen bg-transparent font-sans text-[#2D3748] max-w-md mx-auto p-6 relative">{renderHistoryFull()}</div>;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-transparent font-sans text-[#2D3748] max-w-md mx-auto relative overflow-hidden">
|
|
<header className="bg-white/80 backdrop-blur-md px-6 pt-8 pb-4 shadow-sm flex justify-between items-center sticky top-0 z-20 border-b border-white/20">
|
|
<div className="flex items-center gap-2"><div className="bg-[#4F6DAD] p-2 rounded-lg text-white"><Activity className="w-5 h-5" /></div><h1 className="text-lg font-extrabold text-[#4F6DAD]">PsyJournal</h1></div>
|
|
<div className="w-8 h-8 rounded-full bg-white/50 border border-white/30 overflow-hidden"><User className="w-full h-full p-1 text-slate-400"/></div>
|
|
</header>
|
|
<main className="p-4">
|
|
{activeTab === 'journal' && renderJournal()}
|
|
{activeTab === 'assessment' && renderAssessment()}
|
|
{activeTab === 'cognitive' && renderCognitive()}
|
|
{activeTab === 'profile' && renderProfile()}
|
|
</main>
|
|
<nav className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/80 backdrop-blur-md border-t border-white/20 px-6 py-3 flex justify-between items-center z-30 pb-safe">
|
|
{[{ id: 'journal', icon: BookOpen, label: 'Jurnal' }, { id: 'assessment', icon: Activity, label: 'Penilaian' }, { id: 'cognitive', icon: BrainCircuit, label: 'Tes' }, { id: 'profile', icon: User, label: 'Profil' }].map((item) => (
|
|
<button key={item.id} onClick={() => setActiveTab(item.id)} className={`flex flex-col items-center gap-1 transition-all ${activeTab === item.id ? 'text-[#4F6DAD] -translate-y-1' : 'text-slate-400'}`}><item.icon className={`w-6 h-6 ${activeTab === item.id ? 'fill-current' : ''}`} /><span className="text-[10px] font-bold">{item.label}</span></button>
|
|
))}
|
|
</nav>
|
|
{modalBadge && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-6 animate-fade-in">
|
|
<div className="bg-white/90 backdrop-blur-md rounded-3xl p-8 w-full max-w-sm text-center relative shadow-2xl flex flex-col items-center border border-white/30">
|
|
<button onClick={() => setModalBadge(null)} className="absolute top-4 right-4 text-slate-400"><X/></button>
|
|
<div className="text-7xl mb-4 animate-bounce mt-4">{modalBadge.icon}</div>
|
|
<h3 className="text-2xl font-bold text-[#4F6DAD] mb-1">{modalBadge.name}</h3>
|
|
<div className="bg-white/50 px-4 py-1.5 rounded-full mb-6 border border-white/30 shadow-sm mt-2"><span className="text-xs text-slate-500 font-bold flex items-center gap-1"><Clock className="w-3 h-3"/> Dicapai: {modalBadge.date}</span></div>
|
|
<p className="text-slate-600 text-sm mb-8 px-4 text-center leading-relaxed">{modalBadge.desc}</p>
|
|
<button onClick={() => setModalBadge(null)} className="w-full bg-[#4F6DAD] text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2"><ArrowRight className="w-4 h-4"/> Tutup</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showHelpModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-6 animate-fade-in">
|
|
<div className="bg-white/90 backdrop-blur-md rounded-3xl p-6 w-full max-w-sm shadow-2xl relative border border-white/30">
|
|
<button onClick={() => setShowHelpModal(false)} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"><X className="w-5 h-5"/></button>
|
|
<div className="flex items-center gap-2 mb-6 text-red-600">
|
|
<AlertTriangle className="w-6 h-6"/>
|
|
<h3 className="text-xl font-bold">Bantuan Darurat</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<a href="tel:119" className="flex items-center gap-4 p-4 bg-red-50/80 text-red-700 rounded-2xl border border-red-100 hover:bg-red-100/80 transition-colors">
|
|
<div className="bg-red-200 p-3 rounded-full"><Phone className="w-6 h-6"/></div>
|
|
<div>
|
|
<div className="font-bold text-lg">Panggil Ambulans</div>
|
|
<div className="text-xs opacity-70">Nomor Darurat: 119</div>
|
|
</div>
|
|
</a>
|
|
<a href="https://www.intothelightid.org/tentang-bunuh-diri/layanan-konseling-psikolog-psikiater/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 p-4 bg-blue-50/80 text-blue-700 rounded-2xl border border-blue-100 hover:bg-blue-100/80 transition-colors">
|
|
<div className="bg-blue-200 p-3 rounded-full"><Globe className="w-6 h-6"/></div>
|
|
<div>
|
|
<div className="font-bold text-lg">Layanan Profesional</div>
|
|
<div className="text-xs opacity-70">Konseling & Psikolog</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<PsychologyJournalApp />);
|
|
</script>
|
|
</body>
|
|
</html>
|