Directory / Profile Components

User Profile Features

เจาะลึกทุกกลไกภายในหน้า Profile ของผู้ใช้งาน ตั้งแต่ระบบยืนยันตัวตนแบบไฮบริด ไปจนถึงระบบจัดการข้อพิพาทและศูนย์รายได้จากพันธมิตร (Affiliate)

Insanely Detailed Features

40+ Points of Interest

1. Hybrid Authentication Logic

แกนหลักการระบุตัวตนแบบควบคู่ (Web2 + Web3)

Supabase Auth / localStorage

Supabase Native

ใช้ supabase.auth.getUser() เพื่อดึงข้อมูลผู้ใช้ที่ล็อกอินด้วยอีเมล/รหัสผ่าน

Wallet Identity

ตรวจสอบ 'user_wallet' จาก localStorage เพื่อระบุตัวตนผู้ใช้ระดับ Web3 (Metamask/Safe)

Profile Lookup

ทำการ Cross-match ระหว่าง Auth ID หรือ Wallet Address กับตาราง 'profiles' ในฐานข้อมูล

Security Guard

ระบบ Redirect อัตโนมัติ: หากไม่พบทั้ง Session และ Wallet จะถูกส่งไปหน้า /login ทันที

Live Module Preview

2. Visual Membership Hierarchy

ระบบชนชั้นสมาชิกและสิทธิพิเศษเชิงภาพลักษณ์

Profiles Table (tier column)

Tier Styles

6 ระดับ: Bronze (Deer), Silver (Wolf), Gold (Phoenix), Platinum (Unicorn), Rare Earth (Dragon), Bitcoin (Lion)

Dynamic Card UI

ใช้ฟังก์ชัน getTierStyle เพื่อเปลี่ยนสี Gradient, แอนิเมชัน และไอคอนตามระดับสมาชิกแบบ Real-time

Verification Status

Badges แสดงสถานะ: 'Identity Verified (KYC)' สำหรับคนผ่านยืนยันตัวตน และ 'Email Verified' สำหรับคนยืนยันอีเมล

Tier Up Logic

ระดับสมาชิกจะถูกอัปเดตอัตโนมัติจากหลังบ้านตามยอดการสั่งซื้อสะสม (Total Spent)

Live Module Preview

3. Avatar Customization Engine

ระบบสร้างและจัดการตัวตนเสมือน

DiceBear API / Supabase Storage

DiceBear Integration

เชื่อมต่อกับ api.dicebear.com เพื่อสร้าง SVG Avatar ตามสไตล์ต่างๆ (Avataaars, Bottts, etc.)

Seed Generation

ระบบ Randomize Seed เพื่อให้ผู้ใช้สามารถสุ่มเลือกรูปแบบที่พอใจได้ไม่จำกัด

Custom Upload

รองรับการอัปโหลดไฟล์ภาพจริง (.jpg, .png) จำกัดขนาด 2MB ต่อไฟล์ เก็บในบักเก็ต 'avatars'

Persistence

รูปโปรไฟล์จะถูกบันทึกลงฟิลด์ avatar_url ในโปรไฟล์ เพื่อใช้แสดงผลถาวรทั่วทั้งเว็บไซต์

Live Module Preview
Live Module Preview

4. Personal Info & Metadata

การจัดการข้อมูลพื้นฐานและฐานข้อมูลส่วนบุคคล

Profiles Table

Full Name Split

ระบะจัดการแยกชื่อ-นามสกุล และรวมเข้าด้วยกันเพื่อเก็บในฟิลด์ full_name อัตโนมัติ

Tax Identification

ฟิลด์ Tax ID สำหรับใช้ในการออกใบกำกับภาษีหรือทำธุรกรรมที่เป็นทางการ

Gender & DOB

เก็บข้อมูลเพศและวันเกิดเพื่อใช้ในการคัดกรองโปรโมชันหรือวิเคราะห์ข้อมูลลูกค้า (Analytic segments)

Bio Summary

พื้นที่สำหรับใส่คำแนะนำตัวสั้นๆ เพื่อแสดงผลในระบบ Community หรือหน้า Profile สาธารณะในอนาคต

Live Module Preview

5. Smart Address Management

ระบบจัดการที่อยู่จัดส่งอัจฉริยะ

Addresses Table

Multiple Entries

ผู้ใช้สามารถเพิ่มที่อยู่บ้าน, ที่ทำงาน หรือที่อยู่เพื่อนได้หลายรายการ (Unlimited entries)

Set as Default

ระบบป้องกันความผิดพลาด: การตั้งค่าที่อยู่หลักจะไปยกเลิก is_default ของที่อยู่อื่นให้อัตโนมัติ

Validation Logic

ฟอร์มบังคับใส่ข้อมูลที่จำเป็นครบถ้วน: ชื่อผู้รับ, เบอร์โทร, รพัสไปรษณีย์ และรายละเอียดที่อยู่

Edit/Delete Flow

ระบบ Modal แก้ไขที่อยู่แบบ In-place ไม่ต้องโหลดหน้าใหม่ (No-reload UI)

Live Module Preview

6. Order Lifecycle & Fulfillment

ประวัติการสั่งซื้อและสถานะการจัดส่ง

Orders / Order Items / Products

Automated Sync

รัน rpc 'check_order_automations' ทุกครั้งที่โหลดหน้าประวัติเพื่อซิงก์สถานะล่าสุดจาก Gateway

Rich Order Items

ดึงรูปภาพและชื่อสินค้าจาก Metadata ของสินค้าจริงมาแสดงแม้ในประวัติย้อนหลัง

Shipping Linkage

แสดง Tracking Number พร้อมระบุ Shipping Provider (Kerry, Flash, EMS) อย่างชัดเจน

Receipt Confirmation

ปุ่ม 'Confirm Receipt' สำหรับผู้ใช้เพื่อยืนยันการรับของ ซึ่งจะไปกระตุ้นการคำนวณคะแนน/Tier

Live Module Preview

7. Customer Satisfaction Review

ระบบให้คะแนนสินค้า (Post-Purchase Feedback)

Reviews Table

Dynamic Star Rating

ใช้ Interactive Star UI ให้ผู้ใช้เลือก 1-5 ดาว พร้อมคำอธิบายความพึงพอใจ

Variant-base Link

ระบบฉลาดพอที่จะ Clean Product ID (ตัด Variant ออก) เพื่อให้คะแนนรวมไปอยู่ที่สินค้าหลัก

Anti-re-review

เช็คสถานะ hasReviewed ในแต่ละรายการสินค้าเพื่อปิดปุ่มรีวิวหากทำไปแล้ว

Real-time Display

รีวิวที่บันทึกแล้วจะมีผลต่อคะแนนเฉลี่ยหน้าสินค้า (Product Page) ทันที

Live Module Preview

8. Dispute & Escrow Protection

ศูนย์ช่วยเหลือและแจ้งปัญหาออเดอร์

Disputes Table / Cloud Storage

Guided Dispute

หมวดหมู่ปัญหา: ไม่ได้รับสินค้า (Not Received), สินค้าเสียหาย (Damaged), ได้ไม่ตรงปก (Wrong Item)

Evidence Collection

จุดอัปโหลดไฟล์หลักฐาน (Evidence Images) จำกัด 3 รูป เก็บในบักเก็ต 'chat-images' เพื่อความเป็นส่วนตัว

Resolution Status

ออเดอร์จะถูกล็อกสถานะเป็น 'dispute' ทันที ทำให้แอดมินรู้ว่าห้ามโอนเงินให้ผู้ขาย (Escrow Logic)

Admin Alerts

เมื่อเปิด Dispute ระบบจะส่งสัญญาณเตือนไปยัง Admin Dashboard เพื่อให้เข้ามาดูแลแบบเร่งด่วน

Live Module Preview

9. Affiliate Revenue & Payouts

ศูนย์สร้างรายได้จากการแนะนำ (Partnership)

Affiliate Referrals / Database Functions

Real-time Stats

Dashboard สรุป: จำนวนผู้สมัครผ่านลิงก์ (Referral Count), ยอดขายรวม และรายได้คอมมิชชันสะสม

payout Tiers

แยกยอดเงินคอมมิชชันตามสถานะ: Pending (รอตรวจ), Approved (อนุมัติแล้ว), Paid (จ่ายแล้ว)

Request Withdrawal

ปุ่มถอนเงินสำหรับยอดที่ 'Approved' โดยจะส่งลิงก์พร้อมข้อความอัตโนมัติไปหาแอดมินทาง Telegram

Withdrawal Cooldown

ล็อคการถอนเงิน 24 ชั่วโมงต่อครั้งเพื่อความปลอดภัยและป้องกันการสแปมระบบ

Live Module Preview

10. Integrated Chat Center

ระบบสื่อสารสดกับฝ่ายสนับสนุน (Concierge)

ChatCenter.jsx / Messages

Persistence Chat

ประวัติการแชทถูกเก็บไว้ใน Database ทำให้สามารถคุยต่อเนื่องได้แม้จะย้ายเครื่อง

File/Image Support

รองรับการส่งรูปหลักฐานและ Attachment ต่างๆ ผ่าน UI แชทที่ทำความสะอาดมาอย่างดี

Order Referencing

สามารถเลือก 'แนบเลขที่ใบสั่งซื้อ' ไปในแชทเพื่อให้แอดมินตรวจสอบข้อมูลได้รวดเร็วขึ้น

Emoji & Stickers

ระบบ Emoji Picker และ Sticker Gallery ที่ช่วยสร้างบรรยากาศที่ดีในการรับบริการ

Live Module Preview

/ Data Flow & States

State Store

เก็บ User Context ไว้ใน React State เพื่อลดการยิง API ซ้ำซ้อน (Caching mechanism locally)

RLS Policies

ข้อมูลทุกส่วนถูกป้องกันด้วย Row Level Security (RLS) ทำให้ผู้ใช้ดึงได้เฉพาะข้อมูลของตัวเองเท่านั้น

Asset Buckets

จัดสรร 'avatars' และ 'chat-images' แยกออกจากกันชัดเจนเพื่อจัดการนโยบายการเข้าถึงไฟล์ต่างกัน