# 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:

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

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

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

## 3) Recommended Product Structure

```text
[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

```ts
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

```http
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