NS Marketing Planner — System Flow

flowchart LR subgraph Client["📱 Client (Vue 3)"] UI[Dashboard / Calendar / Editor / Video Studio] Pinia[(Pinia stores
auth · brand · content)] UI <--> Pinia end subgraph Supa["🗄️ Supabase"] Auth[Auth + RLS] DB[(PostgreSQL
14 tables)] Storage[Storage Buckets
media · videos · rendered] Fns[Edge Functions
Deno] end subgraph AI["🤖 AI Providers"] Claude[Claude Sonnet 4.6
caption · plan · recommend] Whisper[OpenAI Whisper
Thai transcription] Flux[Replicate Flux
image gen — optional] FFmpeg[ffmpeg worker
burn subtitle] end subgraph Distro["📤 Distribution (Phase 3)"] Meta[Meta Graph API
FB + IG] Line[LINE Messaging API] TT[TikTok API] end Pinia -- supabase-js --> Auth Pinia -- CRUD via RLS --> DB Pinia -- upload --> Storage Pinia -- functions.invoke --> Fns Fns --> Claude Fns --> Whisper Fns --> Flux Fns --> FFmpeg Fns -. future .-> Meta Fns -. future .-> Line Fns -. future .-> TT style Client fill:#e0f2fe,stroke:#0ea5e9 style Supa fill:#dcfce7,stroke:#22c55e style AI fill:#fef3c7,stroke:#f59e0b style Distro fill:#fce7f3,stroke:#ec4899

flowchart TD A([👤 Sign up / Login]) --> B[สร้าง Brand
tone · target · products · do_not_use] B --> C{มีแผนเดือนนี้?} C -- ไม่มี --> D[/สร้างแผน 30 วัน/
กรอก goal + channel] D --> E[🤖 Claude generate
30 days × N channels] E --> F[Preview → Save plan] F --> G[Content Calendar
month / week / kanban] C -- มีแล้ว --> G G --> H[เปิด Content card] H --> I[ปรับ caption ต่อ channel
shorter · sales · friendly · +#] H --> J[Generate image prompt
เลือก style → AI prompt] H --> K[Upload media / video] K --> L{มีวิดีโอ?} L -- yes --> M[Video Subtitle Studio
Whisper transcribe → edit → burn] I --> N[Status: draft → review] J --> N M --> N N --> O[/Approval queue/] O --> P{Owner approve?} P -- ✅ --> Q[Status: ready] P -- ❌ --> H Q --> R[Admin โพสต์
หรือ auto-post API] R --> S[Status: posted
+ external_url] S --> T[เก็บ performance อัตโนมัติ] T --> U[Analytics + AI recommend
เดือนถัดไป] U --> D style D fill:#fef3c7 style E fill:#fef3c7 style M fill:#fce7f3 style U fill:#dcfce7

erDiagram PROFILES ||--o{ BRANDS : owns PROFILES ||--o{ BRAND_MEMBERS : "" BRANDS ||--o{ BRAND_MEMBERS : has BRANDS ||--o{ CAMPAIGNS : "" BRANDS ||--o{ CONTENT_PLANS : "" BRANDS ||--o{ CONTENTS : "" BRANDS ||--o{ MEDIA_ASSETS : "" BRANDS ||--o{ VIDEOS : "" CAMPAIGNS ||--o{ CONTENT_PLANS : "" CONTENT_PLANS ||--o{ CONTENTS : "" CONTENTS ||--o{ CONTENT_CHANNELS : "" CONTENTS ||--o{ CONTENT_MEDIA : "" CONTENTS ||--o{ APPROVALS : "" CONTENTS ||--o{ CONTENT_COMMENTS : "" CONTENTS ||--o{ VIDEOS : "" MEDIA_ASSETS ||--o{ CONTENT_MEDIA : "" VIDEOS ||--o{ SUBTITLES : "" CONTENT_CHANNELS ||--o{ POST_PERFORMANCE : "" PROFILES { uuid id PK; text email; text full_name; user_role role } BRANDS { uuid id PK; text name; text tone_of_voice; jsonb products; text do_not_use } CONTENT_PLANS { uuid id PK; date month; text goal; channel_type[] channels } CONTENTS { uuid id PK; date scheduled_date; text topic; content_status status; text image_prompt } CONTENT_CHANNELS { uuid id PK; channel_type channel; text caption; bool is_ready } MEDIA_ASSETS { uuid id PK; media_type type; text url; text[] tags } VIDEOS { uuid id PK; text aspect_ratio; text transcription_status; jsonb subtitle_style } SUBTITLES { uuid id PK; int start_ms; int end_ms; text text } APPROVALS { uuid id PK; approval_status status; text comment } POST_PERFORMANCE { uuid id PK; int reach; int engagement; int clicks }

sequenceDiagram participant U as User participant V as Vue App participant S as Supabase participant EF as Edge Function participant C as Claude API participant W as Whisper API Note over U,C: Flow 1: สร้างแผน 30 วัน U->>V: กรอก goal + channels V->>EF: invoke('generate-content-plan', payload) EF->>C: POST /v1/messages (system+user, max 8192) C-->>EF: JSON array 30 days EF-->>V: { days: [...] } V->>S: insert content_plans + contents + content_channels V-->>U: ไป Calendar Note over U,W: Flow 2: Video subtitle U->>V: upload .mp4 V->>S: storage.upload + insert media_assets + videos U->>V: กด "ถอดเสียง AI" V->>EF: invoke('transcribe-video', {video_id}) EF->>S: fetch video URL EF->>W: POST /v1/audio/transcriptions (whisper-1, lang=th) W-->>EF: { segments: [...] } EF->>S: insert subtitles (start_ms, end_ms, text) EF-->>V: ok V-->>U: แสดง subtitle editor Note over U,C: Flow 3: AI recommendation U->>V: กด "แนะนำเดือนหน้า" V->>EF: invoke('recommend-next-month', {brand_id}) EF->>S: query top 30 by engagement EF->>C: วิเคราะห์ JSON performance C-->>EF: บทวิเคราะห์ + แนะนำ EF-->>V: { text }