พัฒนา UI Components สำหรับระบบพันธกิจบ้าน - Forms และ Dashboard

[jgarise]

พัฒนา UI Components สำหรับระบบพันธกิจบ้าน

🎯 วัตถุประสงค์

สร้าง UI Components ที่สมบูรณ์สำหรับระบบบันทึกข้อมูลกลุ่มพันธกิจบ้าน พร้อมฟีเจอร์สมัยใหม่และ Dashboard แบบ Real-time

📝 ส่วนที่ 1: ฟอร์มลงทะเบียนกลุ่ม (Group Registration Form)

Component Structure

interface GroupRegistrationForm {
  groupName: string;
  team: string;
  activityDays: string[];  // Multi-select
  timeSlot: {
    start: string;
    end: string;
  };
  location: {
    province: string;
    district: string;
    subDistrict: string;
    village: string;
    address: string;
  };
  groupLeader: string;
  careGroup: string;
  coordinator: string;
  totalMembers: number;
  coordinatorPhoto: File;
  locationMap: string | File;
  groupPhoto: File;
}

Form Fields Details

Field	Type	Component	Validation
ชื่อกลุ่ม	Text	TextInput	Required, Min 2 chars
ทีม	Dropdown	Select	Required
วันกิจกรรม	Multi-Select	CheckboxGroup	At least 1 day
เวลา	Time Range	TimePicker	Required
จังหวัด	Dropdown	CascadingSelect	Required
อำเภอ	Dropdown	CascadingSelect	Required
ตำบล	Dropdown	CascadingSelect	Required
หมู่บ้าน	Dropdown	CascadingSelect	Required
สถานที่	Text	TextArea	Required
ผู้รับผิดชอบ	Text	TextInput	Required
กลุ่มแคร์	Text	TextInput	Required
ผู้ประสานงาน	Text	TextInput	Required
จำนวนสมาชิก	Number	NumberInput	Min 1
ภาพประสานงาน	File	ImageUpload	JPG/PNG, Max 5MB
แผนที่	Map/File	MapPicker/FileUpload	Required
ภาพกลุ่ม	File	ImageUpload	JPG/PNG, Max 10MB

👥 ส่วนที่ 2: ทะเบียนสมาชิก (Member Registry)

Component Structure

interface MemberRegistration {
  id?: number;
  memberOrder: number;
  firstName: string;
  lastName: string;
  nickname: string;
  age: number;
  occupation: string;
  workplace: string;
  maritalStatus: 'โสด' | 'แต่งงาน' | 'อย่าร้าง';
  faithDate: Date;
  responseAttitude: 'ดี' | 'ปานกลาง' | 'น้อย';
  participationFrequency: 'ประจำ' | '2-3 ครั้ง/เดือน' | '1-2 ครั้ง/เดือน' | 'นานๆครั้ง';
  growthTarget: string;
  targetRole: string;
  targetQuarter: 'Q1' | 'Q2' | 'Q3' | 'Q4';
  growthMentor: string;
}

Member Form Features

• Bulk Add: เพิ่มสมาชิกหลายคนพร้อมกัน
• Import CSV: นำเข้าข้อมูลจากไฟล์ Excel/CSV
• Photo Upload: รูปโปรไฟล์สมาชิก
• Auto-Complete: ชื่อที่เคยกรอกแล้ว
• Validation: ตรวจสอบข้อมูลซ้ำ

📊 ส่วนที่ 3: Dashboard Components

1. Overview Cards

interface OverviewStats {
  totalGroups: number;
  totalMembers: number;
  totalVillages: number;
  totalCareGroups: number;
  groupsWithCoordinators: number;
}

2. Activity Charts

• Participation Line Chart: กราฟการเข้าร่วมรายสัปดาห์/เดือน
• Group Comparison Bar Chart: เปรียบเทียบกลุ่ม
• Attendance Pie Chart: สัดส่วนการเข้าร่วม
• Progress Ring Chart: ความคืบหน้าเป้าหมาย

3. Goal Tracking

interface GoalProgress {
  quarter: 'Q1' | 'Q2' | 'Q3' | 'Q4';
  totalTargets: number;
  completedTargets: number;
  inProgressTargets: number;
  milestones: Milestone[];
}

4. Alert System

• Low Attendance Alert: กลุ่มที่เข้าร่วมน้อย
• Inactive Members: สมาชิกที่ไม่เข้าร่วม > 3 สัปดาห์
• Upcoming Events: กิจกรรมที่ใกล้ถึง
• Goal Deadlines: เป้าหมายที่ใกล้ครบกำหนด

🎨 UI Design System

Color Palette

:root {
  --primary: #3B82F6;      /* Blue */
  --secondary: #8B5CF6;    /* Purple */
  --success: #10B981;      /* Green */
  --warning: #F59E0B;      /* Orange */
  --danger: #EF4444;       /* Red */
  --info: #06B6D4;         /* Cyan */
  --light: #F8FAFC;        /* Light Gray */
  --dark: #1E293B;         /* Dark Gray */
}

Component Styling

• Cards: Glassmorphism effect with backdrop-blur
• Buttons: Gradient backgrounds with hover animations
• Forms: Clean, spacious layout with focus states
• Charts: Animated with smooth transitions
• Icons: Lucide React icons with consistent sizing

Responsive Breakpoints

/* Mobile First */
.container {
  @apply px-4 sm:px-6 lg:px-8;
  max-width: 1200px;
  margin: 0 auto;
}

/* Breakpoints */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */

📱 Mobile-First Features

Touch-Friendly Design

• Large Buttons: Min 44px touch targets
• Swipe Gestures: Navigate between form steps
• Pull-to-Refresh: Update dashboard data
• Haptic Feedback: iOS/Android vibration

Offline Capabilities

• Local Storage: Save form data locally
• Sync Indicator: Show connection status
• Queue Actions: Store actions when offline

🛠️ Technical Implementation

Frontend Stack

{
  "framework": "Next.js 14",
  "language": "TypeScript",
  "styling": "Tailwind CSS",
  "components": "Headless UI",
  "charts": "Chart.js / Recharts",
  "forms": "React Hook Form + Zod",
  "animations": "Framer Motion",
  "icons": "Lucide React",
  "maps": "Google Maps API"
}

Form Validation Schema

import { z } from 'zod';

const GroupRegistrationSchema = z.object({
  groupName: z.string().min(2, 'ชื่อกลุ่มต้องมีอย่างน้อย 2 ตัวอักษร'),
  team: z.string().min(1, 'กรุณาเลือกทีม'),
  activityDays: z.array(z.string()).min(1, 'กรุณาเลือกวันกิจกรรมอย่างน้อย 1 วัน'),
  timeSlot: z.object({
    start: z.string(),
    end: z.string()
  }),
  // ... more validation rules
});

Database Schema Updates

-- เพิ่มฟิลด์ใหม่ในตาราง groups