diff --git a/admin-dashboard.html b/admin-dashboard.html
new file mode 100644
index 0000000..8243d18
--- /dev/null
+++ b/admin-dashboard.html
@@ -0,0 +1,102 @@
+
+
+
+
+
+ แดชบอร์ดผู้ดูแลระบบ - กาฬสินธุ์ 2025 ✨
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
สถานะกลุ่มทั้งหมด
+
+
+
+
+
+
+
+
คุณเคยเข้าใช้งานด้วย ${session.data.name} แล้ว
+ ต้องการดำเนินการต่อหรือเข้าใช้งานใหม่?
`,
+ [
+ {
+ text: 'เข้าใช้งานใหม่',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.clearUserSession();
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'ดำเนินการต่อ',
+ class: 'btn-primary',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ this.redirectUser(session);
+ }
+ }
+ ]
+ );
+ } else {
+ // Clear expired session
+ Utils.clearUserSession();
+ }
+ }
+ }
+
+ delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+}
+
+// Initialize authentication manager
+document.addEventListener('DOMContentLoaded', () => {
+ new AuthManager();
+});
+
+// Export for testing
+window.AuthManager = AuthManager;
\ No newline at end of file
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
new file mode 100644
index 0000000..d98e9ee
--- /dev/null
+++ b/assets/js/dashboard.js
@@ -0,0 +1,352 @@
+/* 👑 Admin Dashboard Logic */
+/* Real-time monitoring and management dashboard */
+
+class AdminDashboardManager {
+ constructor() {
+ this.userSession = null;
+ this.refreshInterval = null;
+ this.groupsData = Utils.APP_CONFIG.GROUP_CODES;
+ this.init();
+ }
+
+ init() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => this.setupPage());
+ } else {
+ this.setupPage();
+ }
+ }
+
+ setupPage() {
+ // Check authentication
+ this.userSession = Utils.getUserSession();
+ if (!this.userSession || this.userSession.type !== 'admin') {
+ window.location.href = 'index.html';
+ return;
+ }
+
+ this.setupHeader();
+ this.setupEventListeners();
+ this.renderDashboard();
+ this.startAutoRefresh();
+ }
+
+ setupHeader() {
+ const adminName = document.getElementById('adminName');
+ const currentWeek = document.getElementById('currentWeek');
+
+ if (this.userSession && this.userSession.data && adminName) {
+ adminName.textContent = this.userSession.data.name;
+ }
+
+ if (currentWeek) {
+ currentWeek.textContent = Utils.getCurrentWeek();
+ }
+
+ this.updateLastRefreshTime();
+ }
+
+ setupEventListeners() {
+ const exportReportBtn = document.getElementById('exportReportBtn');
+ const backButton = document.getElementById('backButton');
+ const logoutButton = document.getElementById('logoutButton');
+
+ if (exportReportBtn) {
+ exportReportBtn.addEventListener('click', () => this.exportReport());
+ }
+
+ if (backButton) {
+ backButton.addEventListener('click', () => {
+ window.location.href = 'index.html';
+ });
+ }
+
+ if (logoutButton) {
+ logoutButton.addEventListener('click', () => this.handleLogout());
+ }
+ }
+
+ renderDashboard() {
+ this.renderOverviewStats();
+ this.renderGroupCards();
+ }
+
+ renderOverviewStats() {
+ const totalGroups = Object.keys(this.groupsData).length;
+ const readyGroups = Object.values(this.groupsData).filter(g => g.members >= g.maxMembers).length;
+ const overallProgress = Math.round((readyGroups / totalGroups) * 100);
+ const totalAnnouncements = this.calculateTotalAnnouncements();
+
+ // Update stat cards
+ const statCards = document.querySelectorAll('.stat-card');
+ if (statCards.length >= 4) {
+ statCards[0].querySelector('.stat-number').textContent = totalGroups;
+ statCards[1].querySelector('.stat-number').textContent = readyGroups;
+ statCards[2].querySelector('.stat-number').textContent = `${overallProgress}%`;
+ statCards[3].querySelector('.stat-number').textContent = totalAnnouncements;
+ }
+ }
+
+ renderGroupCards() {
+ const dashboardGrid = document.getElementById('dashboardGrid');
+ if (!dashboardGrid) return;
+
+ dashboardGrid.innerHTML = '';
+
+ Object.entries(this.groupsData).forEach(([code, data], index) => {
+ const card = this.createGroupDashboardCard(code, data, index);
+ dashboardGrid.appendChild(card);
+ });
+ }
+
+ createGroupDashboardCard(code, data, index) {
+ const completion = (data.members / data.maxMembers) * 100;
+ const isReady = data.members >= data.maxMembers;
+ const announcements = this.getGroupAnnouncements(code);
+ const lastActivity = this.getLastActivity(code);
+
+ // Simulate some mission progress data
+ const missionProgress = isReady ? Math.floor(Math.random() * 100) : 0;
+ const attendanceRate = isReady ? Math.floor(Math.random() * 40) + 60 : 0;
+
+ const card = document.createElement('div');
+ card.className = 'group-dashboard-card animate-fade-in-up';
+ card.style.animationDelay = `${index * 0.1}s`;
+
+ const gradientClasses = ['primary', 'secondary', 'success', 'warning', 'primary'];
+ const gradientClass = gradientClasses[index % gradientClasses.length];
+
+ card.innerHTML = `
+
+
+
+
+ สมาชิก
+
+ ${data.members}/${data.maxMembers}
+
+
+
+
+ การประกาศ
+
+ ${announcements} คน
+
+
+
+ ${isReady ? `
+
+ ความคืบหน้าพันธกิจ
+
+ ${missionProgress}%
+
+
+
+
+ อัตราเข้าร่วม
+
+ ${attendanceRate}%
+
+
+ ` : ''}
+
+
+ กิจกรรมล่าสุด
+ ${lastActivity}
+
+
+
+ ความสมบูรณ์
+ ${Math.round(completion)}%
+
+
+
+
+ ความคืบหน้าพันธกิจ
+ ${missionProgress}%
+
+
+
คุณต้องการออกจากระบบใช่หรือไม่?
',
+ [
+ {
+ text: 'ยกเลิก',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'ออกจากระบบ',
+ class: 'btn-secondary',
+ onClick: () => {
+ if (this.refreshInterval) {
+ clearInterval(this.refreshInterval);
+ }
+ Utils.clearUserSession();
+ window.location.href = 'index.html';
+ }
+ }
+ ]
+ );
+ }
+}
+
+// Initialize admin dashboard manager
+document.addEventListener('DOMContentLoaded', () => {
+ new AdminDashboardManager();
+});
+
+// Export for testing
+window.AdminDashboardManager = AdminDashboardManager;
\ No newline at end of file
diff --git a/assets/js/group-selection.js b/assets/js/group-selection.js
new file mode 100644
index 0000000..050d06f
--- /dev/null
+++ b/assets/js/group-selection.js
@@ -0,0 +1,264 @@
+/* 🎯 Group Selection Logic */
+/* 3D Card selection with validation for Group Mission Workflow */
+
+class GroupSelectionManager {
+ constructor() {
+ this.userSession = null;
+ this.groupsData = Utils.APP_CONFIG.GROUP_CODES;
+ this.init();
+ }
+
+ init() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => this.setupPage());
+ } else {
+ this.setupPage();
+ }
+ }
+
+ setupPage() {
+ // Check authentication
+ this.userSession = Utils.getUserSession();
+ if (!this.userSession) {
+ window.location.href = 'index.html';
+ return;
+ }
+
+ this.setupUserInfo();
+ this.renderGroupCards();
+ this.setupEventListeners();
+ }
+
+ setupUserInfo() {
+ const userAvatar = document.getElementById('userAvatar');
+ const userName = document.getElementById('userName');
+
+ if (userAvatar && userName && this.userSession) {
+ // Set avatar with first letter of group name or admin symbol
+ if (this.userSession.type === 'group') {
+ const groupName = this.userSession.data.name;
+ userAvatar.textContent = groupName.charAt(0);
+ userName.textContent = groupName;
+ } else {
+ userAvatar.textContent = '👑';
+ userName.textContent = this.userSession.data.name;
+ }
+ }
+ }
+
+ renderGroupCards() {
+ const grid = document.getElementById('groupsGrid');
+ if (!grid) return;
+
+ grid.innerHTML = '';
+
+ Object.entries(this.groupsData).forEach(([code, data], index) => {
+ const card = this.createGroupCard(code, data, index);
+ grid.appendChild(card);
+ });
+ }
+
+ createGroupCard(code, data, index) {
+ const progress = (data.members / data.maxMembers) * 100;
+ const isComplete = data.members >= data.maxMembers;
+ const isUserGroup = this.userSession.code === code;
+
+ const card = document.createElement('div');
+ card.className = `group-card card-3d card-interactive ${isUserGroup ? 'user-group' : ''} ${isComplete ? 'complete' : 'incomplete'}`;
+ card.dataset.groupCode = code;
+ card.style.animationDelay = `${index * 0.1}s`;
+
+ // Determine gradient class based on index
+ const gradientClasses = ['card-primary', 'card-secondary', 'card-success', 'card-warning', 'card-gradient-special'];
+ const gradientClass = gradientClasses[index % gradientClasses.length];
+
+ card.innerHTML = `
+
+
+
+
+
+
+ ${data.members}
+ /
+ ${data.maxMembers}
+ คน
+
+
+
+
+
+ ${isComplete ?
+ '✅ พร้อมเริ่มพันธกิจ' :
+ `⏳ ต้องการอีก ${data.maxMembers - data.members} คน`
+ }
+
+
+
+
+
+
+ ${isUserGroup ? '
กลุ่มของคุณ
' : ''}
+
+
${groupData.name}
+
ต้องประกาศข่าวประเสริฐให้ครบ 5 คนก่อนเช็คชื่อ
+
+
+ ${groupData.members}
+ /
+ ${groupData.maxMembers}
+ คน
+
+
ต้องการอีก ${groupData.maxMembers - groupData.members} คน
+
+
คุณต้องการออกจากระบบใช่หรือไม่?
',
+ [
+ {
+ text: 'ยกเลิก',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'ออกจากระบบ',
+ class: 'btn-secondary',
+ onClick: () => {
+ Utils.clearUserSession();
+ window.location.href = 'index.html';
+ }
+ }
+ ]
+ );
+ }
+
+ delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+}
+
+// Initialize group selection manager
+document.addEventListener('DOMContentLoaded', () => {
+ new GroupSelectionManager();
+});
+
+// Export for testing
+window.GroupSelectionManager = GroupSelectionManager;
\ No newline at end of file
diff --git a/assets/js/mission.js b/assets/js/mission.js
new file mode 100644
index 0000000..783f9ae
--- /dev/null
+++ b/assets/js/mission.js
@@ -0,0 +1,699 @@
+/* 📱 Mission Workflow Logic */
+/* 4-step weekly mission process for Group Mission Workflow */
+
+class MissionManager {
+ constructor() {
+ this.userSession = null;
+ this.currentStep = 1;
+ this.missionData = {
+ attendance: [],
+ announcements: [],
+ media: [],
+ report: ''
+ };
+ this.steps = {
+ 1: 'checkin',
+ 2: 'announce',
+ 3: 'upload',
+ 4: 'report'
+ };
+ this.init();
+ }
+
+ init() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => this.setupPage());
+ } else {
+ this.setupPage();
+ }
+ }
+
+ setupPage() {
+ // Check authentication
+ this.userSession = Utils.getUserSession();
+ if (!this.userSession || this.userSession.type !== 'group') {
+ window.location.href = 'index.html';
+ return;
+ }
+
+ this.setupHeader();
+ this.setupEventListeners();
+ this.loadCurrentStep();
+ }
+
+ setupHeader() {
+ const groupAvatar = document.getElementById('groupAvatar');
+ const groupName = document.getElementById('groupName');
+ const currentWeek = document.getElementById('currentWeek');
+ const currentDate = document.getElementById('currentDate');
+
+ if (this.userSession && this.userSession.data) {
+ const groupData = this.userSession.data;
+
+ if (groupAvatar) {
+ groupAvatar.textContent = groupData.name.charAt(0);
+ }
+
+ if (groupName) {
+ groupName.textContent = groupData.name;
+ }
+ }
+
+ if (currentWeek) {
+ currentWeek.textContent = Utils.getCurrentWeek();
+ }
+
+ if (currentDate) {
+ currentDate.textContent = Utils.formatThaiDate(new Date());
+ }
+ }
+
+ setupEventListeners() {
+ // Navigation buttons
+ const backButton = document.getElementById('backButton');
+ const logoutButton = document.getElementById('logoutButton');
+
+ if (backButton) {
+ backButton.addEventListener('click', () => {
+ window.location.href = 'select-group.html';
+ });
+ }
+
+ if (logoutButton) {
+ logoutButton.addEventListener('click', () => {
+ this.handleLogout();
+ });
+ }
+
+ // Step navigation
+ document.addEventListener('click', (e) => {
+ if (e.target.closest('.step[data-step]')) {
+ const step = parseInt(e.target.closest('.step').dataset.step);
+ if (step <= this.currentStep || step === this.currentStep + 1) {
+ this.navigateToStep(step);
+ }
+ }
+ });
+ }
+
+ loadCurrentStep() {
+ this.updateProgressSteps();
+ this.renderStepContent();
+ }
+
+ updateProgressSteps() {
+ const steps = document.querySelectorAll('.step');
+ steps.forEach((step, index) => {
+ const stepNumber = index + 1;
+ step.classList.remove('active', 'completed', 'disabled');
+
+ if (stepNumber < this.currentStep) {
+ step.classList.add('completed');
+ } else if (stepNumber === this.currentStep) {
+ step.classList.add('active');
+ } else {
+ step.classList.add('disabled');
+ }
+ });
+ }
+
+ renderStepContent() {
+ const content = document.getElementById('missionContent');
+ if (!content) return;
+
+ const stepMethod = `render${this.steps[this.currentStep].charAt(0).toUpperCase() + this.steps[this.currentStep].slice(1)}Step`;
+
+ if (this[stepMethod]) {
+ content.innerHTML = '';
+ this[stepMethod](content);
+ }
+ }
+
+ renderCheckinStep(container) {
+ const stepContent = document.createElement('div');
+ stepContent.className = 'step-content animate-fade-in-up';
+ stepContent.innerHTML = `
+
+
+
+
+
+
+
+
+
เพิ่มสมาชิกใหม่
+
+
+
+
+
+
+
+
+
+ 0
+ มา
+
+
+ 0
+ ไม่มา
+
+
+ 0
+ ใหม่
+
+
+
+
+
+
+ `;
+
+ container.appendChild(stepContent);
+ this.setupCheckinHandlers();
+ this.loadMembers();
+ }
+
+ renderAnnounceStep(container) {
+ const stepContent = document.createElement('div');
+ stepContent.className = 'step-content animate-fade-in-up';
+ stepContent.innerHTML = `
+
+
+
+
+
+
+
รายชื่อที่ประกาศแล้ว
+
+
+
+
+
+
+
+ ความคืบหน้า
+ 0 คน
+
+
+
+
+
+
+
+ `;
+
+ container.appendChild(stepContent);
+ this.setupAnnounceHandlers();
+ }
+
+ renderUploadStep(container) {
+ const stepContent = document.createElement('div');
+ stepContent.className = 'step-content animate-fade-in-up';
+ stepContent.innerHTML = `
+
+
+
+
+
📁
+
ลากไฟล์มาวางที่นี่
+
หรือคลิกเพื่อเลือกไฟล์
+
+
+
+
+
+
+
+
+
+ `;
+
+ container.appendChild(stepContent);
+ this.setupUploadHandlers();
+ }
+
+ renderReportStep(container) {
+ const stepContent = document.createElement('div');
+ stepContent.className = 'step-content animate-fade-in-up';
+ stepContent.innerHTML = `
+
+
+
+
+
+
+
+
+
+
💡 ข้อเสนอแนะ
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ container.appendChild(stepContent);
+ this.setupReportHandlers();
+ }
+
+ setupCheckinHandlers() {
+ const addMemberBtn = document.getElementById('addMemberBtn');
+ const newMemberName = document.getElementById('newMemberName');
+ const nextStepBtn = document.getElementById('nextStepBtn');
+
+ if (addMemberBtn && newMemberName) {
+ addMemberBtn.addEventListener('click', () => this.addNewMember());
+ newMemberName.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') this.addNewMember();
+ });
+ }
+
+ if (nextStepBtn) {
+ nextStepBtn.addEventListener('click', () => this.navigateToStep(2));
+ }
+ }
+
+ setupAnnounceHandlers() {
+ const addAnnounceBtn = document.getElementById('addAnnounceBtn');
+ const announceToName = document.getElementById('announceToName');
+ const prevStepBtn = document.getElementById('prevStepBtn');
+ const nextStepBtn = document.getElementById('nextStepBtn');
+
+ if (addAnnounceBtn && announceToName) {
+ addAnnounceBtn.addEventListener('click', () => this.addAnnouncement());
+ announceToName.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') this.addAnnouncement();
+ });
+ }
+
+ if (prevStepBtn) {
+ prevStepBtn.addEventListener('click', () => this.navigateToStep(1));
+ }
+
+ if (nextStepBtn) {
+ nextStepBtn.addEventListener('click', () => this.navigateToStep(3));
+ }
+ }
+
+ setupUploadHandlers() {
+ const uploadZone = document.getElementById('uploadZone');
+ const fileInput = document.getElementById('fileInput');
+ const selectFileBtn = document.getElementById('selectFileBtn');
+ const prevStepBtn = document.getElementById('prevStepBtn');
+ const nextStepBtn = document.getElementById('nextStepBtn');
+
+ // File selection
+ if (selectFileBtn && fileInput) {
+ selectFileBtn.addEventListener('click', () => fileInput.click());
+ fileInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files));
+ }
+
+ // Drag and drop
+ if (uploadZone) {
+ uploadZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ uploadZone.classList.add('drag-over');
+ });
+
+ uploadZone.addEventListener('dragleave', () => {
+ uploadZone.classList.remove('drag-over');
+ });
+
+ uploadZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ uploadZone.classList.remove('drag-over');
+ this.handleFileSelect(e.dataTransfer.files);
+ });
+ }
+
+ if (prevStepBtn) {
+ prevStepBtn.addEventListener('click', () => this.navigateToStep(2));
+ }
+
+ if (nextStepBtn) {
+ nextStepBtn.addEventListener('click', () => this.navigateToStep(4));
+ }
+ }
+
+ setupReportHandlers() {
+ const reportText = document.getElementById('reportText');
+ const suggestionTags = document.querySelectorAll('.suggestion-tag');
+ const prevStepBtn = document.getElementById('prevStepBtn');
+ const completeBtn = document.getElementById('completeBtn');
+
+ // Suggestion tags
+ suggestionTags.forEach(tag => {
+ tag.addEventListener('click', () => {
+ const text = tag.dataset.text;
+ if (reportText) {
+ const currentText = reportText.value;
+ const newText = currentText ? `${currentText} ${text}` : text;
+ reportText.value = newText;
+ }
+ });
+ });
+
+ if (prevStepBtn) {
+ prevStepBtn.addEventListener('click', () => this.navigateToStep(3));
+ }
+
+ if (completeBtn) {
+ completeBtn.addEventListener('click', () => this.completeMission());
+ }
+ }
+
+ loadMembers() {
+ // Load existing members and create attendance grid
+ const membersGrid = document.getElementById('membersGrid');
+ if (!membersGrid) return;
+
+ const existingMembers = [
+ 'สมชาย ใจดี',
+ 'สมหญิง รักดี',
+ 'สมศรี สุขใจ'
+ ];
+
+ membersGrid.innerHTML = '';
+ existingMembers.forEach((member, index) => {
+ const memberCard = this.createMemberCard(member, false);
+ membersGrid.appendChild(memberCard);
+ });
+
+ this.updateAttendanceSummary();
+ }
+
+ createMemberCard(name, isNew = false) {
+ const card = document.createElement('div');
+ card.className = `member-card ${isNew ? 'new-member' : ''}`;
+ card.innerHTML = `
+
+
${name.charAt(0)}
+
${name}
+ ${isNew ? '
ใหม่' : ''}
+
+
+
+
+ `;
+
+ // Add toggle functionality
+ const toggleBtns = card.querySelectorAll('.toggle-btn');
+ toggleBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ toggleBtns.forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ this.updateAttendanceSummary();
+ this.checkNextStepAvailable();
+ });
+ });
+
+ return card;
+ }
+
+ addNewMember() {
+ const newMemberName = document.getElementById('newMemberName');
+ if (!newMemberName || !newMemberName.value.trim()) {
+ Utils.showAlert('กรุณาใส่ชื่อสมาชิกใหม่', 'warning');
+ return;
+ }
+
+ const name = newMemberName.value.trim();
+ const membersGrid = document.getElementById('membersGrid');
+
+ if (membersGrid) {
+ const memberCard = this.createMemberCard(name, true);
+ membersGrid.appendChild(memberCard);
+ memberCard.classList.add('animate-bounce-in');
+ }
+
+ newMemberName.value = '';
+ this.updateAttendanceSummary();
+ Utils.showAlert(`เพิ่ม ${name} เรียบร้อยแล้ว! 👍`, 'success');
+ }
+
+ updateAttendanceSummary() {
+ const presentCount = document.querySelectorAll('.toggle-btn.present.active').length;
+ const absentCount = document.querySelectorAll('.toggle-btn.absent.active').length;
+ const newMemberCount = document.querySelectorAll('.member-card.new-member').length;
+
+ const presentCountEl = document.getElementById('presentCount');
+ const absentCountEl = document.getElementById('absentCount');
+ const newMemberCountEl = document.getElementById('newMemberCount');
+
+ if (presentCountEl) presentCountEl.textContent = presentCount;
+ if (absentCountEl) absentCountEl.textContent = absentCount;
+ if (newMemberCountEl) newMemberCountEl.textContent = newMemberCount;
+ }
+
+ checkNextStepAvailable() {
+ const nextStepBtn = document.getElementById('nextStepBtn');
+ const presentCount = document.querySelectorAll('.toggle-btn.present.active').length;
+
+ if (nextStepBtn) {
+ nextStepBtn.disabled = presentCount === 0;
+ }
+ }
+
+ addAnnouncement() {
+ const announceToName = document.getElementById('announceToName');
+ if (!announceToName || !announceToName.value.trim()) {
+ Utils.showAlert('กรุณาใส่ชื่อผู้ที่ประกาศให้', 'warning');
+ return;
+ }
+
+ const name = announceToName.value.trim();
+ this.missionData.announcements.push({
+ name: name,
+ timestamp: new Date().toISOString()
+ });
+
+ this.updateAnnounceList();
+ announceToName.value = '';
+ Utils.showAlert(`บันทึกการประกาศให้ ${name} เรียบร้อยแล้ว! 📢`, 'success');
+ }
+
+ updateAnnounceList() {
+ const announceItems = document.getElementById('announceItems');
+ const announceCount = document.getElementById('announceCount');
+ const announceProgressBar = document.getElementById('announceProgressBar');
+
+ if (announceItems) {
+ announceItems.innerHTML = '';
+ this.missionData.announcements.forEach((announce, index) => {
+ const item = document.createElement('div');
+ item.className = 'announce-item animate-fade-in-up';
+ item.innerHTML = `
+ ${announce.name}
+
+ `;
+ announceItems.appendChild(item);
+ });
+
+ // Add remove functionality
+ announceItems.addEventListener('click', (e) => {
+ if (e.target.classList.contains('remove-btn')) {
+ const index = parseInt(e.target.dataset.index);
+ this.missionData.announcements.splice(index, 1);
+ this.updateAnnounceList();
+ }
+ });
+ }
+
+ if (announceCount) {
+ announceCount.textContent = this.missionData.announcements.length;
+ }
+
+ if (announceProgressBar) {
+ const progress = Math.min((this.missionData.announcements.length / 5) * 100, 100);
+ announceProgressBar.style.width = `${progress}%`;
+ }
+ }
+
+ handleFileSelect(files) {
+ const uploadPreview = document.getElementById('uploadPreview');
+ const fileList = document.getElementById('fileList');
+ const nextStepBtn = document.getElementById('nextStepBtn');
+
+ if (!files || files.length === 0) return;
+
+ this.missionData.media = Array.from(files);
+
+ if (fileList) {
+ fileList.innerHTML = '';
+ this.missionData.media.forEach((file, index) => {
+ const item = document.createElement('div');
+ item.className = 'file-item animate-fade-in-up';
+ item.innerHTML = `
+
+
📸
+
${file.name}
+
(${(file.size / 1024 / 1024).toFixed(2)} MB)
+
คุณต้องการออกจากระบบใช่หรือไม่?
⚠️ ข้อมูลที่ยังไม่ได้บันทึกจะสูญหาย
',
+ [
+ {
+ text: 'ยกเลิก',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'ออกจากระบบ',
+ class: 'btn-secondary',
+ onClick: () => {
+ Utils.clearUserSession();
+ window.location.href = 'index.html';
+ }
+ }
+ ]
+ );
+ }
+
+ delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+}
+
+// Initialize mission manager
+document.addEventListener('DOMContentLoaded', () => {
+ new MissionManager();
+});
+
+// Export for testing
+window.MissionManager = MissionManager;
\ No newline at end of file
diff --git a/assets/js/utils.js b/assets/js/utils.js
new file mode 100644
index 0000000..533d6f3
--- /dev/null
+++ b/assets/js/utils.js
@@ -0,0 +1,381 @@
+/* 🛠️ Utility Functions */
+/* Helper functions for the Group Mission Workflow */
+
+// === CONSTANTS ===
+const APP_CONFIG = {
+ // Group codes (รหัสกลุ่ม)
+ GROUP_CODES: {
+ 'GROUP001': { name: 'กลุ่มแสงแรก', members: 3, maxMembers: 5 },
+ 'GROUP002': { name: 'กลุ่มความหวัง', members: 5, maxMembers: 5 },
+ 'GROUP003': { name: 'กลุ่มความรัก', members: 4, maxMembers: 5 },
+ 'GROUP004': { name: 'กลุ่มความเชื่อ', members: 2, maxMembers: 5 },
+ 'GROUP005': { name: 'กลุ่มพระคุณ', members: 5, maxMembers: 5 },
+ },
+
+ // Admin codes (รหัสแอดมิน)
+ ADMIN_CODES: {
+ 'ADMIN001': { name: 'ผู้ดูแลระบบหลัก', level: 'super' },
+ 'ADMIN002': { name: 'ผู้ช่วยดูแลระบบ', level: 'regular' }
+ },
+
+ // Session storage keys
+ STORAGE_KEYS: {
+ USER_SESSION: 'groupMissionUserSession',
+ GROUP_DATA: 'groupMissionGroupData',
+ WEEKLY_DATA: 'groupMissionWeeklyData'
+ }
+};
+
+// === UTILITY FUNCTIONS ===
+
+/**
+ * Display loading overlay
+ * @param {boolean} show - Whether to show or hide the overlay
+ * @param {string} text - Loading text to display
+ */
+function showLoading(show = true, text = 'กำลังโหลด...') {
+ const overlay = document.getElementById('loadingOverlay');
+ if (!overlay) return;
+
+ const loadingText = overlay.querySelector('.loading-text');
+ if (loadingText) {
+ loadingText.textContent = text;
+ }
+
+ if (show) {
+ overlay.classList.add('active');
+ } else {
+ overlay.classList.remove('active');
+ }
+}
+
+/**
+ * Show notification/alert message
+ * @param {string} message - Message to display
+ * @param {string} type - Type of alert ('success', 'warning', 'danger', 'info')
+ * @param {number} duration - How long to show (milliseconds)
+ */
+function showAlert(message, type = 'info', duration = 3000) {
+ // Remove existing alerts
+ const existingAlerts = document.querySelectorAll('.alert-notification');
+ existingAlerts.forEach(alert => alert.remove());
+
+ // Create new alert
+ const alert = document.createElement('div');
+ alert.className = `alert alert-${type} alert-notification animate-bounce-in`;
+ alert.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 10000;
+ max-width: 400px;
+ box-shadow: var(--shadow-heavy);
+ `;
+ alert.textContent = message;
+
+ document.body.appendChild(alert);
+
+ // Auto remove after duration
+ setTimeout(() => {
+ alert.style.animation = 'fadeInUp 0.3s ease-out reverse';
+ setTimeout(() => alert.remove(), 300);
+ }, duration);
+}
+
+/**
+ * Show modal popup
+ * @param {string} title - Modal title
+ * @param {string} content - Modal content (HTML)
+ * @param {Array} buttons - Array of button objects {text, class, onClick}
+ */
+function showModal(title, content, buttons = []) {
+ // Remove existing modal
+ const existingModal = document.querySelector('.modal-overlay');
+ if (existingModal) {
+ existingModal.remove();
+ }
+
+ // Create modal
+ const modalOverlay = document.createElement('div');
+ modalOverlay.className = 'modal-overlay';
+ modalOverlay.innerHTML = `
+
+ `;
+
+ document.body.appendChild(modalOverlay);
+
+ // Add event listeners
+ buttons.forEach((btn, index) => {
+ const buttonEl = modalOverlay.querySelectorAll('.modal-footer .btn')[index];
+ if (buttonEl && btn.onClick) {
+ buttonEl.addEventListener('click', btn.onClick);
+ }
+ });
+
+ // Show modal
+ setTimeout(() => {
+ modalOverlay.classList.add('active');
+ }, 10);
+
+ // Close on overlay click
+ modalOverlay.addEventListener('click', (e) => {
+ if (e.target === modalOverlay) {
+ closeModal(modalOverlay);
+ }
+ });
+
+ return modalOverlay;
+}
+
+/**
+ * Close modal
+ * @param {Element} modal - Modal element to close
+ */
+function closeModal(modal) {
+ if (!modal) return;
+
+ modal.classList.remove('active');
+ setTimeout(() => {
+ modal.remove();
+ }, 300);
+}
+
+/**
+ * Validate access code (group or admin)
+ * @param {string} code - Code to validate
+ * @returns {Object|null} User data if valid, null if invalid
+ */
+function validateAccessCode(code) {
+ const upperCode = code.toUpperCase().trim();
+
+ // Check group codes
+ if (APP_CONFIG.GROUP_CODES[upperCode]) {
+ return {
+ type: 'group',
+ code: upperCode,
+ data: APP_CONFIG.GROUP_CODES[upperCode]
+ };
+ }
+
+ // Check admin codes
+ if (APP_CONFIG.ADMIN_CODES[upperCode]) {
+ return {
+ type: 'admin',
+ code: upperCode,
+ data: APP_CONFIG.ADMIN_CODES[upperCode]
+ };
+ }
+
+ return null;
+}
+
+/**
+ * Save user session to localStorage
+ * @param {Object} userData - User data to save
+ */
+function saveUserSession(userData) {
+ try {
+ localStorage.setItem(APP_CONFIG.STORAGE_KEYS.USER_SESSION, JSON.stringify(userData));
+ } catch (error) {
+ console.error('Error saving user session:', error);
+ }
+}
+
+/**
+ * Get user session from localStorage
+ * @returns {Object|null} User data or null
+ */
+function getUserSession() {
+ try {
+ const data = localStorage.getItem(APP_CONFIG.STORAGE_KEYS.USER_SESSION);
+ return data ? JSON.parse(data) : null;
+ } catch (error) {
+ console.error('Error getting user session:', error);
+ return null;
+ }
+}
+
+/**
+ * Clear user session
+ */
+function clearUserSession() {
+ try {
+ localStorage.removeItem(APP_CONFIG.STORAGE_KEYS.USER_SESSION);
+ } catch (error) {
+ console.error('Error clearing user session:', error);
+ }
+}
+
+/**
+ * Format date to Thai format
+ * @param {Date} date - Date to format
+ * @returns {string} Formatted date string
+ */
+function formatThaiDate(date) {
+ const options = {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ locale: 'th-TH'
+ };
+ return date.toLocaleDateString('th-TH', options);
+}
+
+/**
+ * Get current week number
+ * @returns {number} Current week number
+ */
+function getCurrentWeek() {
+ const now = new Date();
+ const start = new Date(now.getFullYear(), 0, 1);
+ return Math.ceil(((now - start) / 86400000 + start.getDay() + 1) / 7);
+}
+
+/**
+ * Animate progress bar
+ * @param {Element} progressBar - Progress bar element
+ * @param {number} percentage - Target percentage
+ */
+function animateProgressBar(progressBar, percentage) {
+ if (!progressBar) return;
+
+ progressBar.style.setProperty('--progress-width', `${percentage}%`);
+ progressBar.style.width = `${percentage}%`;
+
+ // Add animation class
+ progressBar.classList.add('progress-fill');
+}
+
+/**
+ * Get progress color based on percentage
+ * @param {number} percentage - Progress percentage
+ * @returns {string} CSS class for color
+ */
+function getProgressColor(percentage) {
+ if (percentage < 30) return 'progress-bar-danger';
+ if (percentage < 70) return 'progress-bar-warning';
+ return 'progress-bar-success';
+}
+
+/**
+ * Debounce function
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in milliseconds
+ * @returns {Function} Debounced function
+ */
+function debounce(func, wait) {
+ let timeout;
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func(...args);
+ };
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+}
+
+/**
+ * Generate unique ID
+ * @returns {string} Unique ID string
+ */
+function generateId() {
+ return Date.now().toString(36) + Math.random().toString(36).substr(2);
+}
+
+/**
+ * Add ripple effect to button
+ * @param {Event} event - Click event
+ */
+function addRippleEffect(event) {
+ const button = event.currentTarget;
+ const ripple = button.querySelector('.button-ripple') ||
+ button.querySelector('.btn-ripple');
+
+ if (!ripple) return;
+
+ const rect = button.getBoundingClientRect();
+ const size = Math.max(rect.width, rect.height);
+ const x = event.clientX - rect.left - size / 2;
+ const y = event.clientY - rect.top - size / 2;
+
+ ripple.style.width = ripple.style.height = size + 'px';
+ ripple.style.left = x + 'px';
+ ripple.style.top = y + 'px';
+
+ ripple.classList.add('active');
+
+ setTimeout(() => {
+ ripple.classList.remove('active');
+ }, 600);
+}
+
+/**
+ * Initialize common event listeners
+ */
+function initializeCommonEvents() {
+ // Add ripple effect to buttons
+ document.addEventListener('click', (e) => {
+ if (e.target.matches('.btn, .cta-button, button')) {
+ addRippleEffect(e);
+ }
+ });
+
+ // Handle Enter key on inputs
+ document.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' && e.target.matches('input[type="text"], input[type="email"]')) {
+ const form = e.target.closest('form');
+ if (form) {
+ const submitButton = form.querySelector('button[type="submit"], .btn-submit');
+ if (submitButton) {
+ submitButton.click();
+ }
+ }
+ }
+ });
+
+ // Close modals with Escape key
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ const modal = document.querySelector('.modal-overlay.active');
+ if (modal) {
+ closeModal(modal);
+ }
+ }
+ });
+}
+
+// === EXPORT FOR MODULES ===
+window.Utils = {
+ showLoading,
+ showAlert,
+ showModal,
+ closeModal,
+ validateAccessCode,
+ saveUserSession,
+ getUserSession,
+ clearUserSession,
+ formatThaiDate,
+ getCurrentWeek,
+ animateProgressBar,
+ getProgressColor,
+ debounce,
+ generateId,
+ addRippleEffect,
+ APP_CONFIG
+};
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initializeCommonEvents);
\ No newline at end of file
diff --git a/assets/js/weekly-summary.js b/assets/js/weekly-summary.js
new file mode 100644
index 0000000..8b35271
--- /dev/null
+++ b/assets/js/weekly-summary.js
@@ -0,0 +1,329 @@
+/* 📊 Weekly Summary Logic */
+/* Display completed mission results */
+
+class WeeklySummaryManager {
+ constructor() {
+ this.userSession = null;
+ this.weeklyData = null;
+ this.init();
+ }
+
+ init() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => this.setupPage());
+ } else {
+ this.setupPage();
+ }
+ }
+
+ setupPage() {
+ // Check authentication
+ this.userSession = Utils.getUserSession();
+ if (!this.userSession || this.userSession.type !== 'group') {
+ window.location.href = 'index.html';
+ return;
+ }
+
+ // Load weekly data
+ this.loadWeeklyData();
+ this.setupHeader();
+ this.setupEventListeners();
+ this.renderSummary();
+ }
+
+ loadWeeklyData() {
+ try {
+ const data = localStorage.getItem(Utils.APP_CONFIG.STORAGE_KEYS.WEEKLY_DATA);
+ this.weeklyData = data ? JSON.parse(data) : this.createMockData();
+ } catch (error) {
+ console.error('Error loading weekly data:', error);
+ this.weeklyData = this.createMockData();
+ }
+ }
+
+ createMockData() {
+ // Create mock data for demonstration
+ return {
+ week: Utils.getCurrentWeek(),
+ date: new Date().toISOString(),
+ groupCode: this.userSession.code,
+ attendance: [
+ { name: 'สมชาย ใจดี', status: 'present', isNew: false },
+ { name: 'สมหญิง รักดี', status: 'absent', isNew: false },
+ { name: 'สมศรี สุขใจ', status: 'absent', isNew: false },
+ { name: 'สมพงษ์ มีความสุข', status: 'absent', isNew: true }
+ ],
+ announcements: [
+ { name: 'อลิซ สมิท', timestamp: new Date().toISOString() }
+ ],
+ media: [
+ { name: 'mission_photo.jpg', size: 2048000 }
+ ],
+ report: 'ได้แบ่งปันรากฐานความเชื่อกับ อลิซ สมิท เธอรู้สึกหนุนใจและมีความสุขมาก เราได้อธิษฐานร่วมกันและท้าทายให้เธอเติบโตในความเชื่อ'
+ };
+ }
+
+ setupHeader() {
+ const weekNumber = document.getElementById('weekNumber');
+ const groupAvatar = document.getElementById('groupAvatar');
+ const groupName = document.getElementById('groupName');
+ const completionDate = document.getElementById('completionDate');
+
+ if (weekNumber) {
+ weekNumber.textContent = this.weeklyData.week;
+ }
+
+ if (this.userSession && this.userSession.data) {
+ const groupData = this.userSession.data;
+
+ if (groupAvatar) {
+ groupAvatar.textContent = groupData.name.charAt(0);
+ }
+
+ if (groupName) {
+ groupName.textContent = groupData.name;
+ }
+ }
+
+ if (completionDate) {
+ completionDate.textContent = Utils.formatThaiDate(new Date(this.weeklyData.date));
+ }
+ }
+
+ setupEventListeners() {
+ const backToMissionBtn = document.getElementById('backToMissionBtn');
+ const startNewMissionBtn = document.getElementById('startNewMissionBtn');
+ const logoutButton = document.getElementById('logoutButton');
+
+ if (backToMissionBtn) {
+ backToMissionBtn.addEventListener('click', () => {
+ window.location.href = 'weekly-mission.html';
+ });
+ }
+
+ if (startNewMissionBtn) {
+ startNewMissionBtn.addEventListener('click', () => {
+ this.startNewMission();
+ });
+ }
+
+ if (logoutButton) {
+ logoutButton.addEventListener('click', () => {
+ this.handleLogout();
+ });
+ }
+ }
+
+ renderSummary() {
+ this.renderAttendanceSummary();
+ this.renderAnnouncementSummary();
+ this.renderMediaSummary();
+ this.renderReportSummary();
+ }
+
+ renderAttendanceSummary() {
+ const presentCount = document.getElementById('presentCount');
+ const absentCount = document.getElementById('absentCount');
+ const newMemberCount = document.getElementById('newMemberCount');
+ const presentMembers = document.getElementById('presentMembers');
+ const newMembers = document.getElementById('newMembers');
+
+ if (!this.weeklyData.attendance) return;
+
+ const present = this.weeklyData.attendance.filter(a => a.status === 'present');
+ const absent = this.weeklyData.attendance.filter(a => a.status === 'absent');
+ const newMembersData = this.weeklyData.attendance.filter(a => a.isNew);
+
+ if (presentCount) presentCount.textContent = present.length;
+ if (absentCount) absentCount.textContent = absent.length;
+ if (newMemberCount) newMemberCount.textContent = newMembersData.length;
+
+ if (presentMembers) {
+ const membersList = presentMembers.querySelector('.member-names');
+ if (membersList) {
+ membersList.innerHTML = '';
+ present.forEach(member => {
+ const li = document.createElement('li');
+ li.textContent = member.name;
+ membersList.appendChild(li);
+ });
+ }
+ }
+
+ if (newMembers) {
+ const membersList = newMembers.querySelector('.member-names');
+ if (membersList) {
+ membersList.innerHTML = '';
+ newMembersData.forEach(member => {
+ const li = document.createElement('li');
+ li.textContent = member.name;
+ membersList.appendChild(li);
+ });
+ }
+
+ // Hide section if no new members
+ if (newMembersData.length === 0) {
+ newMembers.style.display = 'none';
+ }
+ }
+ }
+
+ renderAnnouncementSummary() {
+ const announceCount = document.getElementById('announceCount');
+ const announceList = document.getElementById('announceList');
+
+ if (!this.weeklyData.announcements) return;
+
+ const count = this.weeklyData.announcements.length;
+
+ if (announceCount) {
+ announceCount.textContent = count;
+ }
+
+ if (announceList) {
+ const membersList = announceList.querySelector('.member-names');
+ if (membersList) {
+ membersList.innerHTML = '';
+ this.weeklyData.announcements.forEach(announce => {
+ const li = document.createElement('li');
+ li.textContent = announce.name;
+ membersList.appendChild(li);
+ });
+ }
+ }
+
+ // Update progress bar
+ const progressBar = document.querySelector('.announce-stats + .announce-list + .progress-indicator .progress-bar');
+ const progressText = document.querySelector('.progress-text');
+
+ if (progressBar && progressText) {
+ const percentage = Math.min((count / 5) * 100, 100);
+ progressBar.style.width = `${percentage}%`;
+ progressText.textContent = `${Math.round(percentage)}% ของเป้าหมาย 5 คน`;
+
+ // Update color based on progress
+ progressBar.className = 'progress-bar ' + Utils.getProgressColor(percentage);
+ }
+ }
+
+ renderMediaSummary() {
+ const mediaStatus = document.getElementById('mediaStatus');
+ const fileInfo = document.getElementById('fileInfo');
+
+ if (!this.weeklyData.media || this.weeklyData.media.length === 0) {
+ if (mediaStatus) {
+ mediaStatus.className = 'media-status warning';
+ mediaStatus.innerHTML = `
+ ⚠️
+ ยังไม่ได้อัพโหลด
+ `;
+ }
+ if (fileInfo) {
+ fileInfo.innerHTML = 'ไม่มีไฟล์
';
+ }
+ return;
+ }
+
+ if (fileInfo) {
+ fileInfo.innerHTML = '';
+ this.weeklyData.media.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'file-item';
+ fileItem.innerHTML = `
+ 📸
+ ${file.name}
+ `;
+ fileInfo.appendChild(fileItem);
+ });
+ }
+ }
+
+ renderReportSummary() {
+ const reportContent = document.getElementById('reportContent');
+
+ if (!this.weeklyData.report) {
+ if (reportContent) {
+ reportContent.innerHTML = 'ไม่มีรายงาน
';
+ }
+ return;
+ }
+
+ if (reportContent) {
+ const reportText = reportContent.querySelector('.report-text');
+ if (reportText) {
+ reportText.textContent = `"${this.weeklyData.report}"`;
+ }
+ }
+ }
+
+ startNewMission() {
+ Utils.showModal(
+ '🚀 เริ่มพันธกิจใหม่',
+ 'คุณต้องการเริ่มพันธกิจสัปดาห์ใหม่ใช่หรือไม่?
ข้อมูลของสัปดาห์ปัจจุบันจะถูกเก็บไว้
',
+ [
+ {
+ text: 'ยกเลิก',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'เริ่มใหม่',
+ class: 'btn-success',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ this.resetForNewMission();
+ }
+ }
+ ]
+ );
+ }
+
+ resetForNewMission() {
+ // Clear weekly data but keep user session
+ try {
+ localStorage.removeItem(Utils.APP_CONFIG.STORAGE_KEYS.WEEKLY_DATA);
+ } catch (error) {
+ console.error('Error clearing weekly data:', error);
+ }
+
+ Utils.showAlert('เริ่มพันธกิจใหม่เรียบร้อยแล้ว! 🚀', 'success');
+
+ setTimeout(() => {
+ window.location.href = 'weekly-mission.html';
+ }, 1500);
+ }
+
+ handleLogout() {
+ Utils.showModal(
+ 'ออกจากระบบ',
+ 'คุณต้องการออกจากระบบใช่หรือไม่?
',
+ [
+ {
+ text: 'ยกเลิก',
+ class: 'btn-outline',
+ onClick: () => {
+ Utils.closeModal(document.querySelector('.modal-overlay'));
+ }
+ },
+ {
+ text: 'ออกจากระบบ',
+ class: 'btn-secondary',
+ onClick: () => {
+ Utils.clearUserSession();
+ window.location.href = 'index.html';
+ }
+ }
+ ]
+ );
+ }
+}
+
+// Initialize weekly summary manager
+document.addEventListener('DOMContentLoaded', () => {
+ new WeeklySummaryManager();
+});
+
+// Export for testing
+window.WeeklySummaryManager = WeeklySummaryManager;
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0dead23
--- /dev/null
+++ b/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+ เข้าร่วมนิมิตชีวิตสุขสันต์กาฬสินธุ์ 2025 ✨
+
+
+
+
+
+
+
+
+
+
+
+
+
กำลังเข้าสู่ระบบ...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/weekly-summary.html b/weekly-summary.html
new file mode 100644
index 0000000..9f3684b
--- /dev/null
+++ b/weekly-summary.html
@@ -0,0 +1,167 @@
+
+
+
+
+
+ สรุปผลประจำสัปดาห์ - กาฬสินธุ์ 2025 ✨
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ มา
+
+
+ 3
+ ไม่มา
+
+
+ 1
+ สมาชิกใหม่
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ คน
+
+
ได้รับการประกาศ
+
+
+
+
+
20% ของเป้าหมาย 5 คน
+
+
+
+
+
+
+
+
+
+
+
+ 📸
+ mission_photo.jpg
+
+
+
+
+
+
+
+
+
+
+
+ "ได้แบ่งปันรากฐานความเชื่อกับ อลิซ สมิท เธอรู้สึกหนุนใจและมีความสุขมาก เราได้อธิษฐานร่วมกันและท้าทายให้เธอเติบโตในความเชื่อ"
+
+
+
+ แบ่งปันรากฐานความเชื่อ
+ หนุนใจ
+ ท้าทาย
+ อธิษฐาน
+
+
+
+
+
+
+