TLCC_ADAPTED_STRUCTURE.md

TLCC Prototype — Adapted App Structure

อ้างอิงแนวคิดจากแอพ “ตีแบด - หาคอร์ท หาเพื่อนตีแบด” แล้วปรับเป็นบริบทคริสตจักร TLC CareChurch OS บน Space: https://huggingface.co/spaces/Suriyong/tlcc-prototype

1) Core Concept Mapping

ตีแบด App	TLCC Prototype Adaptation
หาคอร์ท	หาโบสถ์/ศูนย์นมัสการ/จุดนัดพบ/พื้นที่พันธกิจ
หาก๊วนตีแบด	หากลุ่มเซลล์/กลุ่มพันธกิจ/ทีมรับใช้
สร้างก๊วน	สร้างกลุ่ม / เปิดรับสมาชิก / นัดหมายกิจกรรม
จองคอร์ท	ลงทะเบียนกิจกรรม / จองพื้นที่ / นัดทีมรับใช้
Match Detail	Group / Event Detail
Chat ในก๊วน	Chat กลุ่มเซลล์/ทีมพันธกิจ
Tournament	ค่าย / อบรม / Conference / Outreach
Scoreboard / Stats	Dashboard ฝ่ายผู้นำ: Attendance, Reports, Engagement
Review สนาม	Feedback กิจกรรม / Prayer follow-up / Mission report

2) Existing TLCC Navigation

Space ปัจจุบันมี 5-tab bottom navigation:

หน้าหลัก  →  แผนที่  →  กลุ่ม  →  รายงาน  →  อื่นๆ
Home      →  Map     →  Groups →  Mission → More

และมี screens ใน index.html:

scr-home
scr-map
scr-groups
scr-mission
scr-events
scr-news
scr-more
scr-profile

3) Recommended Product Structure

[Splash / Loading]
    ↓
[Onboarding / Welcome]
    ↓
[Login / Select Role]
    ↓
[Home Dashboard]
    ├─ Sermon & Media
    ├─ Bible / Devotion
    ├─ Quick Report
    ├─ Calendar
    ├─ Ministry Groups
    ├─ Giving
    ├─ Map
    └─ Daily Devotion

[Map]
    ├─ Nearby Churches / TLC branches
    ├─ Mission locations
    ├─ Event venues
    └─ Location detail

[Groups]
    ├─ Cell groups
    ├─ Ministry teams
    ├─ Open groups
    ├─ Group detail
    └─ Join / Request / Contact leader

[Mission Report]
    ├─ Submit report
    ├─ Report history
    ├─ Approval status
    └─ Leader/Admin review

[More]
    ├─ Events
    ├─ News
    ├─ Profile
    ├─ Settings
    ├─ Help
    └─ Admin tools

4) Screen-by-Screen Structure

A. Home / หน้าหลัก

Purpose: เป็น dashboard กลางสำหรับสมาชิกทุกบทบาท

Components:

• Greeting Header: ชื่อผู้ใช้ + role + notification
• Hero Card: live sermon / campaign / announcement สำคัญ
• Highlight Carousel: event, group, news, mission campaign
• Quick Actions Grid:
  • เทศน์ & สื่อ
  • พระคัมภีร์
  • รายงาน
  • ปฏิทิน
  • กลุ่มพันธกิจ
  • ถวาย
  • แผนที่
  • เฝ้าเดี่ยว
• Events List: กิจกรรมที่กำลังจะมาถึง
• Dashboard Cards: attendance, group count, reports, serving stats
• Activity Feed: report ล่าสุด / group activity / announcement

B. Map / แผนที่

Adapted from “หาคอร์ท” → “หาสถานที่คริสตจักร/พันธกิจ”

Components:

• Map stage with pins
• Filter chips: โบสถ์, กลุ่มเซลล์, พันธกิจ, กิจกรรม, เปิดรับ
• Pin Detail Sheet: ชื่อสถานที่, เวลา/รอบนมัสการ, ผู้รับผิดชอบ, ระยะทาง, ปุ่มนำทาง, ปุ่มติดต่อ

C. Groups / กลุ่ม

Adapted from “หาก๊วน” → “หากลุ่มเซลล์ / ทีมรับใช้”

Components:

• Search Bar: ค้นหากลุ่ม / เขต / ผู้นำ
• Segment control: ทั้งหมด, กลุ่มเซลล์, ทีมรับใช้, เปิดรับสมาชิก
• Group Card: cover, type tag, group name, leader, location, meeting time, member capacity, join button
• Group Detail: description, schedule, members, leader contact, join request

D. Mission Report / รายงาน

Equivalent to operational reporting module

Components:

• Report Form: area/ministry, date, attendance, decisions/prayer count, summary, photo placeholder, submit
• Report Status: Draft, Submitted, Approved, Needs review
• Leader/Admin Review: filter, approve/comment, export summary

E. Events / ปฏิทินกิจกรรม

Adapted from Tournament/Booking flow

Components:

• Event list
• Event category chips: นมัสการ, ค่าย, อบรม, Outreach, Youth
• Event Detail: cover, title, date/time/location, capacity, registration CTA, contact person
• Registration states: Open, Full, Registered, Waitlist

F. News / ข่าวสาร

Components:

• News feed cards
• Category tags
• Detail page / modal
• Share button
• Save/Favorite

G. Profile / โปรไฟล์

Components:

• Avatar + name + role badge
• Role switcher: Member / Leader / Admin
• Stats: Attendance, Reports, Groups, Serving hours
• Menu: My Groups, My Events, Giving History, Settings, Help

5) Role-Based Access

Member

• View home, map, groups, events, news
• Join groups
• Register events
• Submit basic report or prayer request

Leader

• Manage own groups
• Approve join requests
• Submit mission reports
• View group attendance
• Create events for own ministry

Admin

• Full dashboard
• Approve reports
• Manage users/groups/events
• Export analytics
• Publish announcements/news

6) Suggested Data Models

type User = {
  id: string
  name: string
  role: 'member' | 'leader' | 'admin'
  avatar?: string
  phone?: string
  ministryIds: string[]
  groupIds: string[]
}

type Location = {
  id: string
  name: string
  type: 'church' | 'cell' | 'mission' | 'event'
  address: string
  lat: number
  lng: number
  contactUserId?: string
  serviceTimes?: string[]
}

type Group = {
  id: string
  name: string
  type: 'cell' | 'ministry' | 'youth' | 'worship' | 'outreach'
  leaderId: string
  locationId?: string
  meetingTime: string
  capacity: number
  memberCount: number
  isOpen: boolean
}

type Event = {
  id: string
  title: string
  category: 'service' | 'camp' | 'training' | 'outreach' | 'youth'
  startAt: string
  endAt?: string
  locationId?: string
  capacity?: number
  registeredCount: number
  status: 'open' | 'full' | 'closed'
}

type MissionReport = {
  id: string
  reporterId: string
  ministryId: string
  area: string
  date: string
  attendance: number
  decisions?: number
  prayerRequests?: number
  summary: string
  status: 'draft' | 'submitted' | 'approved' | 'needs_review'
}

type Announcement = {
  id: string
  title: string
  body: string
  category: 'news' | 'urgent' | 'event' | 'sermon'
  publishedAt: string
  authorId: string
}

7) Recommended API Endpoints

GET    /api/home/summary
GET    /api/locations?type=&lat=&lng=&radius=
GET    /api/locations/:id
GET    /api/groups?type=&open=&q=
GET    /api/groups/:id
POST   /api/groups/:id/join
GET    /api/events?category=&status=
GET    /api/events/:id
POST   /api/events/:id/register
GET    /api/reports?status=&ministryId=&dateFrom=&dateTo=
POST   /api/reports
PATCH  /api/reports/:id/approve
GET    /api/profile/me
PATCH  /api/profile/me

8) MVP Priority

1. Home dashboard + quick actions
2. Groups discovery + group detail + join request
3. Mission report form + report history
4. Event list + event registration
5. Map with branch/mission pins
6. Role-based dashboard for Leader/Admin
7. Chat or contact layer
8. Analytics/export

9) Direct UI Adaptation Notes for Current index.html

Current prototype already has most UI primitives:

• bottom-nav works for 5 tabs
• quick-grid maps well to TLCC quick actions
• group-card-enhanced can represent Cell/Ministry groups
• map-stage can represent church/mission locations
• report-card and form styles can support Mission Reports
• profile-role-badge and role-segment already support Member/Leader/Admin

Recommended next implementation:

• Keep current 5 tabs
• Rename/align sections with TLCC domain terms consistently
• Add detail states/modals for Group Detail, Event Detail, Location Detail
• Add in-memory mock data arrays first, then connect API later