{/* track */}

{/* fill — solid red with floating water bubbles */} {pct > 0 && (

)}

{/* ❤️ heart with tartan at tip */} {pct > 0 && pct < 100 && (

)} {pct === 100 && (

)}

); }); // ========================================== // 🃏 COMPONENT: TaskCard (การ์ดงานแต่ละชิ้น) // ========================================== // ✏️ [แก้ได้] ในนี้แก้ได้: // - สีแถบซ้าย (channel bar): แก้สี hex ใน backgroundColor ของ div class="absolute left-2 top-3..." // - สีและข้อความ badge channel: แก้ใน className ของ ที่ครอบ task.channel // - ข้อความ badge ด่วน: แก้ "🔥 ด่วน" เป็นข้อความอื่น // - สถานะงาน (workStatus): แก้ label ใน WORK_STATUSES ด้านบน const TaskCard = React.memo(({ task, isAdmin, onEdit, onUpdateWorkStatus }) => { const workStatus = task.workStatus || 'รอออกแบบ'; const sc = WORK_STATUS_COLOR[workStatus] || WORK_STATUS_COLOR['รอออกแบบ']; const isDone = workStatus === 'เพ้นท์งานเสร็จเรียบร้อยค่ะ'; return (

isAdmin && onEdit(task)} className={`relative mb-2 rounded-[22px] p-3 transition-all shadow-sm backdrop-blur-sm ${isAdmin ? 'active:scale-[0.97] cursor-pointer' : ''}`} style={{ backgroundColor: '#ffffff', borderWidth: '1px', borderStyle: 'solid', borderColor: isDone ? '#D1FAE5' : COLORS.cardBorder, opacity: isDone ? 0.75 : 1 }} > {/* ✏️ [แก้ได้] แถบสีซ้ายตามช่องทาง */}

{/* แถวที่ 1: ชื่อลูกค้า + badge channel + payment + ด่วน | วันที่ */}

{task.client} {task.channel} {task.payment && ( 💳 {task.payment} )} {task.priority === 'urgent' && 🔥 งานเร่ง}

{new Date(task.deadline).toLocaleDateString('th-TH', { day: '2-digit', month: '2-digit', year: '2-digit' })}

{/* แถวที่ 2: ประเภทงานเป็น badge + รายละเอียด | สถานะงาน */}

{task.type} {task.details && ( ({task.details}) )}

{isAdmin ? ( ) : ( {workStatus} )}

{/* แถวที่ 3: designType ข้อความปกติ */} {task.designType && (

{task.designType}

)} {/* แถบเปอร์เซ็นต์ */}

); }); // ========================================== // 📅 COMPONENT: CalendarView (ปฏิทิน) // ========================================== // ✏️ [แก้ได้] ชื่อเดือน และชื่อวันใน header ของปฏิทิน const CalendarView = React.memo(({ currentMonth, setCurrentMonth, selectedDate, setSelectedDate, today, tasks }) => { const year = currentMonth.getFullYear(); const month = currentMonth.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const firstDay = new Date(year, month, 1).getDay(); const days = []; for (let i = 0; i < firstDay; i++) days.push(null); for (let i = 1; i <= daysInMonth; i++) days.push(i); // ✏️ [แก้ได้] ชื่อเดือนภาษาอังกฤษ — เปลี่ยนเป็นภาษาไทยหรืออื่น ๆ ได้ const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return ( // ✏️ [แก้ได้] สีพื้นหลังปฏิทิน — แก้ที่ COLORS.calendarBg, COLORS.cardBorder

{monthNames[month]} {year}

{/* ✏️ [แก้ได้] ชื่อวันใน header ปฏิทิน — เปลี่ยนเป็นภาษาไทย เช่น ['อา','จ','อ','พ','พฤ','ศ','ส'] */}

{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => (

{d}

))}

{days.map((day, index) => { if (!day) return

; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const isSelected = selectedDate === dateStr; const isToday = today === dateStr; const hasTasks = tasks.some(t => t.deadline === dateStr); return (

setSelectedDate(dateStr)} className={`relative w-10 h-10 flex flex-col items-center justify-center cursor-pointer transition-all ${ isSelected ? 'bg-[#CC0000] text-white rounded-full font-black shadow-md scale-105' : isToday ? 'text-[#CC0000] font-black bg-[#FFE0E0] rounded-full' : 'text-[#E53535] font-bold hover:bg-[#FFF5F5] hover:shadow-sm rounded-full' }`} style={isToday && !isSelected ? { borderWidth: '2px', borderColor: COLORS.cardBorder } : !isSelected ? { borderWidth: '0px' } : {}} > {day} {/* จุดแดงบนวันที่มีงาน */} {hasTasks && (

)}

); })}

); }); // ========================================== // 🏠 MAIN APP COMPONENT // ========================================== function App() { // ===== STATE: ข้อมูลหลัก ===== const [tasks, setTasks] = useState([]); // ✏️ [แก้ได้] ประเภทงาน default (ถ้า Google Sheets ยังไม่มีข้อมูล) const [taskTypes, setTaskTypes] = useState(['Logo', 'Banner', 'Artwork']); // ✏️ [แก้ได้] ช่องทาง default (ถ้า Google Sheets ยังไม่มีข้อมูล) const [channels, setChannels] = useState(['LINE', 'FB', 'IG']); const [paymentOptions, setPaymentOptions] = useState(['มัดจำ', 'เต็มจำนวน']); const [designTypeOptions, setDesignTypeOptions] = useState(['ลูกค้านำแบบมาเอง', 'ทางร้านออกแบบ', 'Omakase ฟรีสไตล์']); // ===== STATE: UI Loading ===== const [isLoading, setIsLoading] = useState(true); const [isSaving, setIsSaving] = useState(false); // ===== STATE: Navigation & View ===== const [view, setView] = useState('dashboard'); const [isCalendarView, setIsCalendarView] = useState(false); const [currentMonth, setCurrentMonth] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(() => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }); // ===== STATE: Modal ===== const [showModal, setShowModal] = useState(false); const [editingTask, setEditingTask] = useState(null); const [taskToDelete, setTaskToDelete] = useState(null); const [showAuthModal, setShowAuthModal] = useState(false); const [showImageModal, setShowImageModal] = useState(false); const [showBannerModal, setShowBannerModal] = useState(false); // ===== STATE: Search & Filter ===== const [searchQuery, setSearchQuery] = useState(''); const [filterType, setFilterType] = useState('all'); // ===== STATE: Admin & Auth ===== const [isAdmin, setIsAdmin] = useState(false); const [password, setPassword] = useState(''); const [authError, setAuthError] = useState(false); const [isVerifyingAuth, setIsVerifyingAuth] = useState(false); const [rememberDevice, setRememberDevice] = useState(true); // จดจำอุปกรณ์ (default ติ๊ก) // ===== STATE: Images ===== const [profileImage, setProfileImage] = useState(null); const [tempImageUrl, setTempImageUrl] = useState(''); const [bannerImage, setBannerImage] = useState(null); const [tempBannerUrl, setTempBannerUrl] = useState(''); const [isBannerVisible, setIsBannerVisible] = useState(true); // ===== STATE: Misc ===== const [selectedNextDate, setSelectedNextDate] = useState(''); const [isBouncing, setIsBouncing] = useState(false); // ===== STATE: Notes & Social Links ===== const [noteText, setNoteText] = useState('คิวงานวันนี้เริ่มช่วงบ่ายน้าา'); const [fbLink, setFbLink] = useState(''); const [igLink, setIgLink] = useState(''); const [tiktokLink, setTiktokLink] = useState(''); const [showSocialModal, setShowSocialModal] = useState(false); const [currentSocialPlatform, setCurrentSocialPlatform] = useState(''); const [tempSocialLink, setTempSocialLink] = useState(''); // ===== STATE: Cover Image & Link ===== const [coverImage, setCoverImage] = useState(null); const [coverLink, setCoverLink] = useState(''); const [showCoverModal, setShowCoverModal] = useState(false); const [tempCoverUrl, setTempCoverUrl] = useState(''); const [tempCoverLink, setTempCoverLink] = useState(''); // ===== STATE: Click Ripple Effect ===== const [clickRipples, setClickRipples] = useState([]); useEffect(() => { const handleGlobalClick = (e) => { if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT' || e.target.closest('a') || e.target.closest('form')) return; const id = Date.now() + Math.random(); setClickRipples(prev => [...prev, { id, x: e.clientX, y: e.clientY }]); setTimeout(() => setClickRipples(prev => prev.filter(r => r.id !== id)), 800); }; window.addEventListener('click', handleGlobalClick); return () => window.removeEventListener('click', handleGlobalClick); }, []); // ========================================== // 🌐 API: เรียกผ่าน Vercel Proxy (ไม่มี GAS URL ในหน้าบ้านแล้ว) // ========================================== const TOKEN_KEY = 'bin_admin_token'; const getToken = () => { try { return localStorage.getItem(TOKEN_KEY) || ''; } catch (e) { return ''; } }; const setToken = (t) => { try { localStorage.setItem(TOKEN_KEY, t); } catch (e) {} }; const clearToken = () => { try { localStorage.removeItem(TOKEN_KEY); } catch (e) {} }; // อ่าน exp จาก JWT payload (แค่กันหมดอายุฝั่ง client — signature ตรวจจริงที่ proxy) const tokenValid = (t) => { if (!t) return false; try { const p = JSON.parse(atob(t.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'))); return !p.exp || (Date.now() / 1000) < p.exp; } catch (e) { return false; } }; // ฟังก์ชันเรียก API (POST) ผ่าน proxy — แนบ Bearer token const fetchAPI = async (payload) => { try { const res = await fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8', 'Authorization': 'Bearer ' + getToken() }, body: JSON.stringify(payload) }); if (res.status === 401) { // token หมดอายุ/ไม่ถูกต้อง → ล้าง token + logout clearToken(); setIsAdmin(false); throw new Error('unauthorized'); } return await res.json(); } catch (error) { console.error("API Error:", error); throw error; } }; // ========================================== // 🔧 useEffect: โหลดข้อมูลครั้งแรก (GET Request) // ========================================== // ✏️ [แก้ได้] เปลี่ยน document.title เป็นชื่อแท็บที่ต้องการ useEffect(() => { document.title = "blossom in nails"; // ✏️ ชื่อ tab บน browser // restore สถานะแอดมินตอน refresh (ถ้า token ยังไม่หมดอายุ) if (tokenValid(getToken())) setIsAdmin(true); else clearToken(); fetch("/api/data?action=getInitialData") .then(res => res.json()) .then(response => { if (response.status === 'success') { setTasks(response.data.tasks || []); if (response.data.taskTypes && response.data.taskTypes.length > 0) setTaskTypes(response.data.taskTypes); if (response.data.channels && response.data.channels.length > 0) setChannels(response.data.channels); if (response.data.paymentOptions && response.data.paymentOptions.length > 0) setPaymentOptions(response.data.paymentOptions); if (response.data.designTypeOptions && response.data.designTypeOptions.length > 0) setDesignTypeOptions(response.data.designTypeOptions); if (response.data.profileImage) setProfileImage(response.data.profileImage); if (response.data.bannerImage) setBannerImage(response.data.bannerImage); if (response.data.bannerVisible !== undefined) setIsBannerVisible(response.data.bannerVisible); if (response.data.lockedNextDate) setSelectedNextDate(response.data.lockedNextDate); if (response.data.noteText !== undefined) setNoteText(response.data.noteText); if (response.data.fbLink !== undefined) setFbLink(response.data.fbLink); if (response.data.igLink !== undefined) setIgLink(response.data.igLink); if (response.data.tiktokLink !== undefined) setTiktokLink(response.data.tiktokLink); if (response.data.coverImage !== undefined) setCoverImage(response.data.coverImage || null); if (response.data.coverLink !== undefined) setCoverLink(response.data.coverLink); } setIsLoading(false); }) .catch(error => { console.error("Error loading data:", error); setIsLoading(false); }); }, []); // ========================================== // 🔐 handleAdminLogin: Login Admin // ========================================== // ✏️ [แก้ฝั่ง Google Apps Script] รหัสผ่าน Admin อยู่ใน Google Sheets Script ไม่ใช่ที่นี่ const handleAdminLogin = (e) => { e.preventDefault(); setIsVerifyingAuth(true); setAuthError(false); fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ password, remember: rememberDevice }) }) .then(async (res) => { setIsVerifyingAuth(false); if (res.ok) { const data = await res.json(); setToken(data.token); setIsAdmin(true); setShowAuthModal(false); setPassword(''); setAuthError(false); } else { setAuthError(true); } }) .catch(() => { setIsVerifyingAuth(false); setAuthError(true); }); }; // ========================================== // 📅 handleSetManualDate: ล็อค/ปลดล็อควัน NEXT QUEUE // ========================================== // ฟังก์ชันนี้ทำงานเมื่อ Admin เลือกวันที่ใน CompactStats // ส่ง dateVal = '' เพื่อกลับไปโหมด AUTO const handleSetManualDate = useCallback((dateVal) => { setSelectedNextDate(dateVal); fetchAPI({ action: 'saveLockedNextDate', dateStr: dateVal }); }, []); // ===== COMPUTED VALUES (useMemo) ===== const today = useMemo(() => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }, []); const todayTasks = useMemo(() => tasks.filter(t => t.deadline === today), [tasks, today]); const doneToday = useMemo(() => todayTasks.filter(t => t.status === 'done').length, [todayTasks]); const progress = todayTasks.length === 0 ? 0 : Math.round((doneToday / todayTasks.length) * 100); // ✏️ [แก้ได้] ฟังก์ชันคำนวณวัน NEXT QUEUE อัตโนมัติ // ปัจจุบัน: หาวันที่ยังไม่มีงาน ถ้าต้องการเปลี่ยน logic ให้แก้ตรงนี้ const nextQueueDate = useMemo(() => { if (selectedNextDate) return selectedNextDate; let checkDate = new Date(); for (let i = 0; i < 365; i++) { const y = checkDate.getFullYear(); const m = String(checkDate.getMonth() + 1).padStart(2, '0'); const d = String(checkDate.getDate()).padStart(2, '0'); const dateStr = `${y}-${m}-${d}`; const tasksOnDate = tasks.filter(t => t.deadline === dateStr); if (tasksOnDate.length === 0) return dateStr; checkDate.setDate(checkDate.getDate() + 1); } return today; }, [tasks, selectedNextDate]); // จำนวนงานที่ยังไม่เสร็จทั้งหมด const waitingCount = useMemo(() => tasks.filter(t => t.status !== 'done').length, [tasks]); // ========================================== // 🔄 toggleStatus: สลับสถานะ done ↔ todo (ปุ่ม ✓) // ========================================== const toggleStatus = useCallback((e, id) => { e.stopPropagation(); setTasks(prev => { return prev.map(t => { if (t.id === id) { const newStatus = t.status === 'done' ? 'todo' : 'done'; fetchAPI({ action: 'updateTaskStatus', taskId: id, newStatus: newStatus }); return { ...t, status: newStatus }; } return t; }); }); }, []); // ========================================== // 🔄 toggleDoing: สลับสถานะ doing ↔ todo (ปุ่ม Loader) // ========================================== const toggleDoing = useCallback((e, id) => { e.stopPropagation(); setTasks(prev => { return prev.map(t => { if (t.id === id) { const newStatus = t.status === 'doing' ? 'todo' : 'doing'; fetchAPI({ action: 'updateTaskStatus', taskId: id, newStatus: newStatus }); return { ...t, status: newStatus }; } return t; }); }); }, []); const handleEditTask = useCallback((task) => { setEditingTask(task); setShowModal(true); }, []); // ========================================== // 💾 handleSaveTask: บันทึก/อัปเดตงาน // ========================================== // ✏️ [แก้ได้] ถ้าต้องการเพิ่ม field ใหม่ในฟอร์ม ให้เพิ่ม formData.get('fieldName') ที่นี่ // แล้วเพิ่ม ในฟอร์มด้านล่างด้วย const handleSaveTask = (e) => { e.preventDefault(); setIsSaving(true); const formData = new FormData(e.target); const taskData = { id: editingTask ? editingTask.id : null, title: '', client: formData.get('client'), type: formData.get('type'), channel: formData.get('channel'), priority: formData.get('priority') ? 'urgent' : 'normal', deadline: formData.get('deadline'), details: formData.get('details'), workStatus: formData.get('workStatus') || 'รอออกแบบ', designType: formData.get('designType') || '', payment: formData.get('payment') || '', }; fetchAPI({ action: 'saveOrUpdateTask', task: taskData }) .then(res => { if (res.status === 'success') { setTasks(prev => editingTask ? prev.map(t => t.id === res.task.id ? res.task : t) : [...prev, res.task]); } setIsSaving(false); setShowModal(false); setEditingTask(null); }) .catch(() => { setIsSaving(false); }); }; // ========================================== // 🗑️ executeDeleteTask: ลบงานที่เลือก // ========================================== const executeDeleteTask = () => { if (!taskToDelete) return; setIsSaving(true); fetchAPI({ action: 'deleteTask', taskId: taskToDelete }) .then(() => { setTasks(prev => prev.filter(t => t.id !== taskToDelete)); setIsSaving(false); setShowModal(false); setEditingTask(null); setTaskToDelete(null); }) .catch(() => { setIsSaving(false); }); }; // ========================================== // 👁️ toggleBannerVisibility: แสดง/ซ่อนแบนเนอร์ // ========================================== const toggleBannerVisibility = (visible) => { setIsBannerVisible(visible); fetchAPI({ action: 'saveBannerVisibility', isVisible: visible }); }; // ========================================== // 🔄 updateWorkStatus: วนสถานะงานไปข้างหน้า // ========================================== const updateWorkStatus = useCallback((e, id, newWorkStatus) => { e.stopPropagation(); const newStatus = newWorkStatus === 'เพ้นท์งานเสร็จเรียบร้อยค่ะ' ? 'done' : newWorkStatus === 'รอออกแบบ' ? 'todo' : 'doing'; setTasks(prev => prev.map(t => { if (t.id === id) { fetchAPI({ action: 'updateTaskStatus', taskId: id, newStatus }); fetchAPI({ action: 'updateWorkStatus', taskId: id, workStatus: newWorkStatus }); return { ...t, status: newStatus, workStatus: newWorkStatus }; } return t; })); }, []); const triggerFlowerBounce = useCallback(() => { setIsBouncing(true); setTimeout(() => setIsBouncing(false), 500); }, []); const handleImageUpload = useCallback(() => { setShowImageModal(true); }, []); // ===== กรองงานสำหรับหน้า "ทั้งหมด" ===== // ✏️ [แก้ได้] เพิ่ม filter เพิ่มเติมได้ตรงนี้ เช่น filter ตาม channel const filteredAllTasks = useMemo(() => tasks.filter(t => { const matchSearch = t.type.toLowerCase().includes(searchQuery.toLowerCase()) || t.client.toLowerCase().includes(searchQuery.toLowerCase()); const matchFilter = filterType === 'all' || (filterType === 'pending' && t.status !== 'done') || (filterType === 'done' && t.status === 'done'); return matchSearch && matchFilter; }), [tasks, searchQuery, filterType]); const displayedTasks = isCalendarView ? filteredAllTasks.filter(t => t.deadline === selectedDate) : filteredAllTasks; // ========================================== // 🔄 Loading Screen // ========================================== // ✏️ [แก้ได้] ข้อความ "กำลังโหลดข้อมูล" ในหน้า loading if (isLoading) { return (

{/* ✏️ [แก้ได้] สีพื้นหลัง loading badge — แก้ที่ COLORS.buttonBg, COLORS.cardBorder */}

{/* ✏️ [แก้ได้] ข้อความ loading */}

กำลังโหลดข้อมูล

); } // ========================================== // 🎨 MAIN RENDER // ========================================== return (

{ if (!v) clearToken(); setIsAdmin(v); }} setShowAuthModal={setShowAuthModal} handleImageUpload={handleImageUpload} profileImage={profileImage} /> {/* ===== Banner Section ===== */}

{bannerImage && isBannerVisible && ( // ✏️ [แก้ได้] สีขอบแบนเนอร์ — แก้ที่ COLORS.cardBorder

{isAdmin && ( // ✏️ [แก้ได้] สีพื้นหลังปุ่มบนแบนเนอร์ — แก้ที่ COLORS.bannerOverlayBg )} {isAdmin && ( // ✏️ [แก้ได้] สีพื้นหลังปุ่มซ่อนแบนเนอร์ — แก้ที่ COLORS.bannerOverlayBg )}

)} {bannerImage && !isBannerVisible && isAdmin && (

{/* ✏️ [แก้ได้] สีพื้นหลังปุ่มแสดงแบนเนอร์ — แก้ที่ COLORS.buttonBg, COLORS.cardBorder */}

)} {!bannerImage && isAdmin && ( // ✏️ [แก้ได้] สีขอบ placeholder แบนเนอร์ — แก้ที่ COLORS.cardBorder, COLORS.cardWhite

setShowBannerModal(true)} className="w-full h-16 rounded-[24px] border-[3px] border-dashed backdrop-blur-sm flex items-center justify-center cursor-pointer hover:opacity-80 transition-colors" style={{ borderColor: COLORS.cardBorder, backgroundColor: COLORS.cardWhite }}> {/* ✏️ [แก้ได้] ข้อความปุ่มเพิ่มแบนเนอร์ */} เพิ่มรูปแบนเนอร์ร้าน

)}

{/* ===== Main Content ===== */}

{/* ===== VIEW: Dashboard ===== */} {view === 'dashboard' ? (

{/* Cover Image Card */}

{ if (isAdmin) { setTempCoverUrl(coverImage || ''); setTempCoverLink(coverLink || ''); setShowCoverModal(true); } else if (coverLink) { window.open(coverLink, '_blank'); } }} className={`backdrop-blur-sm rounded-[28px] shadow-lg shadow-[#CC0000]/20 h-full relative overflow-hidden transition-all duration-300 ${isAdmin || coverLink ? 'cursor-pointer hover:scale-[1.02] active:scale-95' : ''}`} style={{ backgroundColor: COLORS.cardWhite, borderWidth: '1px', borderColor: COLORS.cardBorder }} > {coverImage ? ( Cover

) : (

{isAdmin && เพิ่มรูป}

)} {isAdmin && (

✏️

)}

{/* ===== Notes & Social Section ===== */}

NOTES

{/* กล่องข้อความ Note */}

{isAdmin ? ( setNoteText(e.target.value)} onBlur={(e) => { fetchAPI({ action: 'saveNoteText', noteText: e.target.value }); }} className="w-full bg-transparent outline-none text-[10px] font-bold" style={{ color: COLORS.textMain }} placeholder="เพิ่มข้อความโน้ต..." /> ) : ( {noteText} )}

{/* ปุ่ม Social Media: Facebook / Instagram / TikTok */}

{ if (isAdmin) { e.preventDefault(); setCurrentSocialPlatform('fb'); setTempSocialLink(fbLink); setShowSocialModal(true); } }} className="w-[42px] h-[42px] shrink-0 rounded-[14px] bg-white border border-white text-[#1877F2] flex items-center justify-center hover:scale-105 transition-all shadow-lg shadow-[#fec2db]/20 cursor-pointer" title="Facebook" > { if (isAdmin) { e.preventDefault(); setCurrentSocialPlatform('ig'); setTempSocialLink(igLink); setShowSocialModal(true); } }} className="w-[42px] h-[42px] shrink-0 rounded-[14px] bg-white border border-white text-[#C13584] flex items-center justify-center hover:scale-105 transition-all shadow-lg shadow-[#fec2db]/20 cursor-pointer" title="Instagram" > { if (isAdmin) { e.preventDefault(); setCurrentSocialPlatform('tiktok'); setTempSocialLink(tiktokLink); setShowSocialModal(true); } }} className="w-[42px] h-[42px] shrink-0 rounded-[14px] bg-white border border-white text-[#010101] flex items-center justify-center hover:scale-105 transition-all shadow-lg shadow-[#fec2db]/20 cursor-pointer" title="TikTok" >

{/* ✏️ [แก้ได้] ข้อความหัวข้อ "Today's Task" */}

Today's Task

{todayTasks.length > 0 ? todayTasks.map(t => ) : ( // ✏️ [แก้ได้] สีขอบ empty state — แก้ที่ COLORS.emptyStateBg

{/* ✏️ [แก้ได้] ข้อความเมื่อวันนี้ไม่มีงาน */}

Sky is clear ✨

)}

) : ( /* ===== VIEW: All Tasks ===== */

{/* ✏️ [แก้ได้] placeholder ช่องค้นหา */} {/* ✏️ [แก้ได้] สีพื้นหลังช่องค้นหา — แก้ที่ COLORS.searchInputBg */}

setSearchQuery(e.target.value)} className="w-full rounded-[22px] py-3 pl-10 pr-4 outline-none text-xs shadow-lg shadow-[#CC0000]/10 transition-all backdrop-blur-sm" style={{ backgroundColor: `${COLORS.searchInputBg}cc`, borderWidth: '2px', borderColor: COLORS.blue }} />

{/* ✏️ [แก้ได้] ข้อความปุ่ม filter: "ทั้งหมด", "ยังไม่ได้เริ่ม", "เสร็จแล้ว" */} {/* ✏️ [แก้ได้] สีพื้นหลังแถบ filter — แก้ที่ COLORS.filterBarBg, COLORS.cardBorder */}

{/* ✏️ [แก้ได้] ข้อความปุ่มสลับ calendar/list */} {/* ✏️ [แก้ได้] สีพื้นหลังปุ่มสลับ — แก้ที่ COLORS.buttonBg, COLORS.cardBorder */}

{isCalendarView && }

{displayedTasks.length > 0 ? displayedTasks.map(t => ) : ( // ✏️ [แก้ได้] สีขอบ empty state — แก้ที่ COLORS.emptyStateBg, COLORS.cardBorder

{/* ✏️ [แก้ได้] ข้อความเมื่อหาไม่เจองาน */}

{isCalendarView ? "วันนี้คิวว่าง ✨" : "No records found ✨"}

)}

{/* ===== Bottom Navigation Bar ===== */} {/* ✏️ [แก้ได้] ไอคอน Navigation Bar ล่าง — เปลี่ยน เป็น icon อื่นได้ */} {/* ✏️ [แก้ได้] สีพื้นหลัง Navigation Bar — แก้ที่ COLORS.navBarBg, COLORS.cardBorder */}

{/* ไอคอน Home */}

{/* ไอคอน All Tasks */} {/* ปุ่ม + เพิ่มงาน (แสดงเฉพาะ Admin) */} {/* ✏️ [แก้ได้] สีขอบปุ่ม + — แก้ที่ COLORS.cardBorder */} {isAdmin && (

)}

{/* ========================================== 🪟 MODAL: เพิ่ม/แก้ไขงาน ========================================== */} {showModal && (

{/* ✏️ [แก้ได้] สีพื้นหลัง modal — แก้ที่ COLORS.modalBg, COLORS.cardBorder */}

{/* ✏️ [แก้ได้] ชื่อ title modal */}

{editingTask ? 'แก้ไขคิวงาน ✨' : 'เพิ่มคิวใหม่ ✨'}

{isSaving && (

{/* ✏️ [แก้ได้] ข้อความ "กำลังบันทึก..." */} กำลังบันทึก...

)} {/* ✏️ [แก้ได้] label checkbox ด่วน */} {/* ✏️ [แก้ได้] สีพื้นหลัง checkbox — แก้ที่ COLORS.buttonBg */}

งานเร่ง 🔥

{/* ✏️ [แก้ได้] placeholder ฟอร์ม */} {/* ✏️ [แก้ได้] สีพื้นหลัง input — แก้ที่ COLORS.cardInner */}

{/* datalist ประเภทงาน — option มาจาก taskTypes state */} {taskTypes.map(type => {/* datalist ลูกค้าสั่งงานที่ */} {/* datalist ออกแบบเพิ่มเติมไหม */} {designTypeOptions.map(o => {/* datalist ชำระ */} {paymentOptions.map(o =>

{/* ✏️ [แก้ได้] placeholder textarea รายละเอียด */} {/* ✏️ [แก้ได้] ช่องสถานะการทำงาน */}

🍅

{/* ✏️ [แก้ได้] label "วันที่ต้องใช้งาน" */} วันที่ต้องใช้งาน

{/* ✏️ [แก้ได้] สีพื้นหลัง date input — แก้ที่ COLORS.cardInner */}

{/* ✏️ [แก้ได้] ข้อความปุ่ม Save */} {editingTask && ( )}

{/* ✏️ [แก้ได้] ข้อความปุ่มปิด modal */}

)} {/* ========================================== 🔐 MODAL: Login Admin ========================================== */} {showAuthModal && (

{/* ✏️ [แก้ได้] สีพื้นหลัง modal login — แก้ที่ COLORS.modalBg, COLORS.cardBorder */}

{/* ✏️ [แก้ได้] ชื่อ modal Login */}

เข้าสู่ระบบ Admin

{/* ✏️ [แก้ได้] สีพื้นหลัง input password — แก้ที่ COLORS.cardInner */} { setPassword(e.target.value); setAuthError(false); }} className={`w-full p-3.5 rounded-2xl border outline-none text-[11px] shadow-sm transition-all text-center tracking-widest ${authError ? 'border-red-300 focus:border-red-400' : 'border-gray-100 focus:border-[#FFB3B3]'}`} style={{ backgroundColor: COLORS.cardInner }} placeholder="ใส่รหัสผ่าน" disabled={isVerifyingAuth} /> {/* ✏️ [แก้ได้] ข้อความ error รหัสผ่านผิด */} {authError &&

รหัสผ่านไม่ถูกต้อง!

} {/* ✅ จดจำอุปกรณ์นี้ (30 วัน) — default ติ๊ก */} setRememberDevice(e.target.checked)} className="w-3.5 h-3.5 accent-[#E8000D]" disabled={isVerifyingAuth} /> จดจำอุปกรณ์นี้ (30 วัน)

)} {/* ========================================== 🖼️ MODAL: เปลี่ยนรูปโปรไฟล์ ========================================== */} {showImageModal && (

{/* ✏️ [แก้ได้] สีพื้นหลัง modal เปลี่ยนรูป — แก้ที่ COLORS.modalBg, COLORS.cardBorder */}

{ e.preventDefault(); if (tempImageUrl) { let finalUrl = tempImageUrl; // แปลง Google Drive share link → direct image URL const match = finalUrl.match(/\/file\/d\/([a-zA-Z0-9_-]+)/) || finalUrl.match(/id=([a-zA-Z0-9_-]+)/) || finalUrl.match(/\/d\/([a-zA-Z0-9_-]+)/); if (match && match[1]) { finalUrl = `https://lh3.googleusercontent.com/d/${match[1]}`; } setProfileImage(finalUrl); fetchAPI({ action: 'saveProfileImage', imageUrl: finalUrl }); } setShowImageModal(false); setTempImageUrl(''); }} className="backdrop-blur-xl w-full max-w-xs rounded-[35px] p-6 shadow-2xl animate-slideUp" style={{ backgroundColor: `${COLORS.modalBg}f2`, borderWidth: '1px', borderColor: COLORS.cardBorder }}> {/* ✏️ [แก้ได้] ชื่อ modal เปลี่ยนรูปโปรไฟล์ */}

เปลี่ยนรูปโปรไฟล์ 🐰

{/* ✏️ [แก้ได้] สีพื้นหลัง input URL — แก้ที่ COLORS.cardInner */} setTempImageUrl(e.target.value)} className="w-full p-3.5 rounded-2xl border border-gray-100 outline-none text-[11px] shadow-sm focus:border-[#FFB3B3] transition-all text-center" style={{ backgroundColor: COLORS.cardInner }} placeholder="วางลิงก์รูปภาพ Google Drive ที่นี่..." />

)} {/* ========================================== 🖼️ MODAL: เปลี่ยนแบนเนอร์ร้าน ========================================== */} {showBannerModal && (

{/* ✏️ [แก้ได้] สีพื้นหลัง modal แบนเนอร์ — แก้ที่ COLORS.modalBg, COLORS.cardBorder */}

{ e.preventDefault(); if (tempBannerUrl) { let finalUrl = tempBannerUrl; // แปลง Google Drive share link → direct image URL const match = finalUrl.match(/\/file\/d\/([a-zA-Z0-9_-]+)/) || finalUrl.match(/id=([a-zA-Z0-9_-]+)/) || finalUrl.match(/\/d\/([a-zA-Z0-9_-]+)/); if (match && match[1]) { finalUrl = `https://lh3.googleusercontent.com/d/${match[1]}`; } setBannerImage(finalUrl); toggleBannerVisibility(true); fetchAPI({ action: 'saveBannerImage', imageUrl: finalUrl }); } setShowBannerModal(false); setTempBannerUrl(''); }} className="backdrop-blur-xl w-full max-w-xs rounded-[35px] p-6 shadow-2xl animate-slideUp" style={{ backgroundColor: `${COLORS.modalBg}f2`, borderWidth: '1px', borderColor: COLORS.cardBorder }}> {/* ✏️ [แก้ได้] ชื่อ modal เปลี่ยนแบนเนอร์ */}

เปลี่ยนแบนเนอร์

{/* ✏️ [แก้ได้] สีพื้นหลัง input URL — แก้ที่ COLORS.cardInner */} setTempBannerUrl(e.target.value)} className="w-full p-3.5 rounded-2xl border border-gray-100 outline-none text-[11px] shadow-sm focus:border-[#FFB3B3] transition-all text-center" style={{ backgroundColor: COLORS.cardInner }} placeholder="วางลิงก์รูปภาพ Google Drive..." />

)} {/* ========================================== 🖼️ MODAL: รูปปกและลิงก์ ========================================== */} {showCoverModal && (

{ e.preventDefault(); let finalUrl = tempCoverUrl; const match = finalUrl.match(/\/file\/d\/([a-zA-Z0-9_-]+)/) || finalUrl.match(/id=([a-zA-Z0-9_-]+)/) || finalUrl.match(/\/d\/([a-zA-Z0-9_-]+)/); if (match && match[1]) { finalUrl = `https://lh3.googleusercontent.com/d/${match[1]}`; } setCoverImage(finalUrl || null); setCoverLink(tempCoverLink); fetchAPI({ action: 'saveCoverImage', imageUrl: finalUrl, link: tempCoverLink }); setShowCoverModal(false); setTempCoverUrl(''); setTempCoverLink(''); }} className="backdrop-blur-xl w-full max-w-xs rounded-[35px] p-6 shadow-2xl animate-slideUp" style={{ backgroundColor: `${COLORS.modalBg}f2`, borderWidth: '1px', borderColor: COLORS.cardBorder }}>

รูปปก ✨

รูปและลิงก์ปลายทางสำหรับการ์ดขวาบน

setTempCoverUrl(e.target.value)} className="w-full p-3.5 rounded-2xl border border-gray-100 outline-none text-[11px] shadow-sm focus:border-[#FFB3B3] transition-all text-center" style={{ backgroundColor: COLORS.cardInner }} placeholder="วางลิงก์รูปภาพ..." /> setTempCoverLink(e.target.value)} className="w-full p-3.5 rounded-2xl border border-gray-100 outline-none text-[11px] shadow-sm focus:border-[#FFB3B3] transition-all text-center" style={{ backgroundColor: COLORS.cardInner }} placeholder="ลิงก์ปลายทาง (https://...)" /> {coverImage && ( )}

)} {/* ========================================== 🔗 MODAL: แก้ไขลิงก์ Social Media ========================================== */} {showSocialModal && (

{currentSocialPlatform === 'fb' ? '🔵 Facebook' : currentSocialPlatform === 'ig' ? '🩷 Instagram' : '⚫ TikTok'}

วางลิงก์ช่องทางติดต่อ

setTempSocialLink(e.target.value)} className="w-full p-3.5 rounded-2xl border border-gray-100 outline-none text-[11px] shadow-sm focus:border-[#FFB3B3] transition-all" style={{ backgroundColor: COLORS.cardInner }} placeholder="https://..." />

)} {/* ========================================== 🗑️ MODAL: ยืนยันการลบงาน ========================================== */} {taskToDelete && (

{/* ✏️ [แก้ได้] สีพื้นหลัง modal ลบ — แก้ที่ COLORS.modalBg, COLORS.cardBorder */}

{/* ✏️ [แก้ได้] ข้อความยืนยันการลบ */}

ยืนยันการลบ?

คุณต้องการลบคิวงานนี้ใช่หรือไม่
(ไม่สามารถกู้คืนได้)

{/* ✏️ [แก้ได้] ข้อความปุ่ม "ยกเลิก" และ "ลบข้อมูล" */}

)}

{/* ========================================== 🎬 CSS Animations ========================================== ✏️ [แก้ได้] ปรับ animation ต่าง ๆ ที่นี่: - float / float-reverse: เมฆและ blob เคลื่อนที่ - breathe: ดอกไม้หายใจ - float-particle-1/2/3: จุดลอยรอบดอกไม้ - spin-slow: หมุนช้า (ไอคอน Loader ตอน doing) - slideUp / fadeIn: animation modal - text-wave: ชื่อแอปใน header */} {/* ===== Click Ripple Overlay ===== */} {clickRipples.map(ripple => (

{/* 💖 หัวใจเส้นขอบกระจายตัว */} {/* ✨ ดาววิ้งๆ ดวงที่ 1 */} {/* ✨ ดาววิ้งๆ ดวงที่ 2 */} {/* ✨ ดาววิ้งๆ ดวงที่ 3 */}

))}

); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

{/* ✏️ [แก้ได้] เปลี่ยนชื่อแอปที่นี่ */} {"blossom.in.nails".split('').map((char, index) => ( {char} ))}

{monthNames[month]} {year}