Index: chapterx-frontend/src/pages/writer/CreateChapterPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateChapterPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateChapterPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, BookOpen } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { Chapter } from '../../types'
+
+export const CreateChapterPage: React.FC = () => {
+  const { storyId } = useParams<{ storyId: string }>()
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { stories, chapters, addChapter } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [form, setForm] = useState({ title: '', content: '' })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(false)
+
+  const story = stories.find(s => s.story_id === Number(storyId))
+  const storyChapters = chapters.filter(c => c.story_id === Number(storyId))
+  const wordCount = form.content.trim().split(/\s+/).filter(Boolean).length
+
+  if (!story) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-2xl text-white mb-4">Story not found</h2>
+        <Button onClick={() => navigate('/writer')}>Back</Button>
+      </div>
+    )
+  }
+
+  const validate = () => {
+    const e: Record<string, string> = {}
+    if (!form.title.trim()) e.title = 'Chapter title is required'
+    if (!form.content.trim()) e.content = 'Chapter content is required'
+    if (wordCount < 10) e.content = 'Chapter must be at least 10 words'
+    setErrors(e)
+    return Object.keys(e).length === 0
+  }
+
+  const handleSubmit = async (isPublished: boolean) => {
+    if (!validate() || !currentUser) return
+    setLoading(true)
+    await new Promise(r => setTimeout(r, 400))
+    const chapter: Chapter = {
+      chapter_id: Date.now(),
+      story_id: Number(storyId),
+      title: form.title.trim(),
+      content: form.content.trim(),
+      chapter_number: storyChapters.length + 1,
+      word_count: wordCount,
+      view_count: 0,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      is_published: isPublished,
+    }
+    addChapter(chapter)
+    addToast(isPublished ? 'Chapter published!' : 'Chapter saved as draft!')
+    navigate(`/writer/edit-story/${storyId}`)
+    setLoading(false)
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center gap-3 mb-8">
+        <button onClick={() => navigate(`/writer/edit-story/${storyId}`)} className="text-slate-400 hover:text-white transition-colors">
+          <ArrowLeft size={20} />
+        </button>
+        <div>
+          <p className="text-slate-400 text-sm">{story.title}</p>
+          <h1 className="font-serif text-2xl font-bold text-white">New Chapter</h1>
+          <p className="text-slate-500 text-xs mt-0.5">Chapter {storyChapters.length + 1}</p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Chapter Title *</label>
+          <input
+            value={form.title}
+            onChange={e => { setForm(f => ({ ...f, title: e.target.value })); setErrors(e => ({ ...e, title: '' })) }}
+            placeholder="The Awakening..."
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 font-serif text-lg ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <label className="text-sm font-medium text-slate-300">Chapter Content *</label>
+            <div className="flex items-center gap-2 text-xs text-slate-500">
+              <BookOpen size={12} />
+              <span className={wordCount > 100 ? 'text-emerald-400' : wordCount > 50 ? 'text-amber-400' : 'text-slate-500'}>
+                {wordCount.toLocaleString()} words
+              </span>
+            </div>
+          </div>
+          <textarea
+            value={form.content}
+            onChange={e => { setForm(f => ({ ...f, content: e.target.value })); setErrors(e => ({ ...e, content: '' })) }}
+            placeholder="Begin your chapter here..."
+            rows={20}
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif text-base leading-relaxed ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+        </div>
+
+        <div className="flex gap-3 pt-4 border-t border-slate-700">
+          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit(false)} loading={loading}>
+            Save as Draft
+          </Button>
+          <Button className="flex-1" onClick={() => handleSubmit(true)} loading={loading}>
+            Publish Chapter
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
Index: chapterx-frontend/src/pages/writer/CreateStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,190 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Feather, ArrowLeft, X } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { Story } from '../../types'
+
+const ALL_GENRES = ['Fantasy', 'Sci-Fi', 'Romance', 'Historical Fiction', 'Adventure', 'Thriller', 'Mystery', 'Horror', 'Contemporary', 'Poetry']
+
+export const CreateStoryPage: React.FC = () => {
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { addStory } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [form, setForm] = useState({
+    title: '',
+    short_description: '',
+    content: '',
+    genres: [] as string[],
+    mature_content: false,
+  })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(false)
+
+  const validate = () => {
+    const e: Record<string, string> = {}
+    if (!form.title.trim()) e.title = 'Title is required'
+    if (!form.short_description.trim()) e.short_description = 'Description is required'
+    if (form.short_description.length > 280) e.short_description = 'Max 280 characters'
+    if (!form.content.trim()) e.content = 'Story content is required'
+    if (form.genres.length === 0) e.genres = 'Select at least one genre'
+    setErrors(e)
+    return Object.keys(e).length === 0
+  }
+
+  const handleSubmit = async (status: 'draft' | 'published') => {
+    if (!validate() || !currentUser) return
+    setLoading(true)
+    await new Promise(r => setTimeout(r, 500))
+    const story: Story = {
+      story_id: Date.now(),
+      ...form,
+      user_id: currentUser.user_id,
+      author_username: currentUser.username,
+      status,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      total_likes: 0,
+      total_comments: 0,
+      total_chapters: 0,
+      total_views: 0,
+    }
+    addStory(story)
+    addToast(status === 'published' ? 'Story published!' : 'Draft saved!')
+    navigate(`/writer/edit-story/${story.story_id}`)
+    setLoading(false)
+  }
+
+  const toggleGenre = (g: string) => {
+    setForm(f => ({
+      ...f,
+      genres: f.genres.includes(g) ? f.genres.filter(x => x !== g) : [...f.genres, g],
+    }))
+    setErrors(e => ({ ...e, genres: '' }))
+  }
+
+  const setField = (field: string, value: string | boolean) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setErrors(e => ({ ...e, [field]: '' }))
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center gap-3 mb-8">
+        <button onClick={() => navigate('/writer')} className="text-slate-400 hover:text-white transition-colors">
+          <ArrowLeft size={20} />
+        </button>
+        <div>
+          <h1 className="font-serif text-2xl font-bold text-white">Create New Story</h1>
+          <p className="text-slate-400 text-sm mt-0.5">Tell your story to the world</p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {/* Title */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
+          <input
+            value={form.title}
+            onChange={e => setField('title', e.target.value)}
+            placeholder="The Chronicles of Eldoria..."
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+        </div>
+
+        {/* Short description */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
+          <textarea
+            value={form.short_description}
+            onChange={e => setField('short_description', e.target.value)}
+            placeholder="When the last dragon awakens..."
+            rows={3}
+            maxLength={280}
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          <div className="flex justify-between items-center mt-1">
+            {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
+            <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
+          <textarea
+            value={form.content}
+            onChange={e => setField('content', e.target.value)}
+            placeholder="Begin your story here. This is the introduction that readers will see..."
+            rows={8}
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+        </div>
+
+        {/* Genres */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
+          <div className="flex flex-wrap gap-2 mb-2">
+            {ALL_GENRES.map(g => (
+              <button
+                key={g}
+                type="button"
+                onClick={() => toggleGenre(g)}
+                className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
+                  form.genres.includes(g)
+                    ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
+                    : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
+                }`}
+              >
+                {form.genres.includes(g) && <span className="mr-1">✓</span>}
+                {g}
+              </button>
+            ))}
+          </div>
+          {form.genres.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1">
+              {form.genres.map(g => (
+                <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+                  {g}
+                  <button onClick={() => toggleGenre(g)}><X size={10} /></button>
+                </span>
+              ))}
+            </div>
+          )}
+          {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+        </div>
+
+        {/* Mature content */}
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setField('mature_content', !form.mature_content)}
+            className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
+          >
+            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
+          </button>
+          <div>
+            <p className="text-white text-sm font-medium">Mature Content (18+)</p>
+            <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 pt-4 border-t border-slate-700">
+          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
+            Save as Draft
+          </Button>
+          <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
+            <Feather size={16} />
+            Publish Story
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
Index: chapterx-frontend/src/pages/writer/EditChapterPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/EditChapterPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/EditChapterPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Save, Globe, BookOpen } from 'lucide-react'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { AISuggestionPanel } from '../../components/writer/AISuggestionPanel'
+
+export const EditChapterPage: React.FC = () => {
+  const { chapterId } = useParams<{ chapterId: string }>()
+  const navigate = useNavigate()
+  const { stories, chapters, updateChapter } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [saving, setSaving] = useState(false)
+
+  const chapter = chapters.find(c => c.chapter_id === Number(chapterId))
+  const story = chapter ? stories.find(s => s.story_id === chapter.story_id) : null
+
+  const [form, setForm] = useState({ title: '', content: '' })
+
+  useEffect(() => {
+    if (chapter) {
+      setForm({ title: chapter.title, content: chapter.content })
+    }
+  }, [chapter?.chapter_id])
+
+  if (!chapter || !story) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-2xl text-white mb-4">Chapter not found</h2>
+        <Button onClick={() => navigate('/writer')}>Back</Button>
+      </div>
+    )
+  }
+
+  const wordCount = form.content.trim().split(/\s+/).filter(Boolean).length
+
+  const handleSave = async (publish?: boolean) => {
+    setSaving(true)
+    await new Promise(r => setTimeout(r, 400))
+    updateChapter(chapter.chapter_id, {
+      ...form,
+      word_count: wordCount,
+      is_published: publish !== undefined ? publish : chapter.is_published,
+    })
+    addToast('Chapter saved!')
+    setSaving(false)
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate(`/writer/edit-story/${story.story_id}`)}
+            className="text-slate-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft size={20} />
+          </button>
+          <div>
+            <p className="text-slate-400 text-sm">{story.title} · Chapter {chapter.chapter_number}</p>
+            <h1 className="font-serif text-2xl font-bold text-white">Edit Chapter</h1>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          {!chapter.is_published && (
+            <Button size="sm" variant="secondary" onClick={() => handleSave(true)} loading={saving}>
+              <Globe size={14} />
+              Publish
+            </Button>
+          )}
+          <Button size="sm" onClick={() => handleSave()} loading={saving}>
+            <Save size={14} />
+            Save
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Editor */}
+        <div className="lg:col-span-2 space-y-5">
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Chapter Title</label>
+            <input
+              value={form.title}
+              onChange={e => setForm(f => ({ ...f, title: e.target.value }))}
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:outline-none focus:border-indigo-500 font-serif text-lg"
+            />
+          </div>
+          <div>
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="text-sm font-medium text-slate-300">Content</label>
+              <span className="flex items-center gap-1 text-xs text-slate-500">
+                <BookOpen size={12} />
+                {wordCount.toLocaleString()} words
+              </span>
+            </div>
+            <textarea
+              value={form.content}
+              onChange={e => setForm(f => ({ ...f, content: e.target.value }))}
+              rows={24}
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:outline-none focus:border-indigo-500 resize-y font-serif text-base leading-relaxed"
+            />
+          </div>
+
+          <div className={`text-xs px-3 py-2 rounded-lg flex items-center gap-2 ${
+            chapter.is_published
+              ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
+              : 'bg-amber-500/10 text-amber-400 border border-amber-500/20'
+          }`}>
+            {chapter.is_published ? 'Published — visible to readers' : 'Draft — not visible to readers'}
+          </div>
+        </div>
+
+        {/* AI Suggestions panel */}
+        <div>
+          <AISuggestionPanel chapterId={chapter.chapter_id} storyId={chapter.story_id} />
+        </div>
+      </div>
+    </div>
+  )
+}
Index: chapterx-frontend/src/pages/writer/EditStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/EditStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/EditStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Plus, Save, Globe, Archive, Trash2 } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { ChapterList } from '../../components/story/ChapterList'
+import { CollaboratorManager } from '../../components/writer/CollaboratorManager'
+import { Modal } from '../../components/ui/Modal'
+
+const ALL_GENRES = ['Fantasy', 'Sci-Fi', 'Romance', 'Historical Fiction', 'Adventure', 'Thriller', 'Mystery', 'Horror', 'Contemporary', 'Poetry']
+
+export const EditStoryPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { stories, chapters, updateStory, deleteStory, updateStoryStatus } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [deleteConfirm, setDeleteConfirm] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  const story = stories.find(s => s.story_id === Number(id))
+
+  const [form, setForm] = useState({
+    title: '',
+    short_description: '',
+    content: '',
+    genres: [] as string[],
+    mature_content: false,
+  })
+
+  useEffect(() => {
+    if (story) {
+      setForm({
+        title: story.title,
+        short_description: story.short_description,
+        content: story.content,
+        genres: [...story.genres],
+        mature_content: story.mature_content,
+      })
+    }
+  }, [story?.story_id])
+
+  if (!story) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-2xl text-white mb-4">Story not found</h2>
+        <Button onClick={() => navigate('/writer')}>Back to Dashboard</Button>
+      </div>
+    )
+  }
+
+  const canEdit = currentUser?.user_id === story.user_id || currentUser?.role === 'admin'
+  if (!canEdit) navigate('/writer')
+
+  const storyChapters = chapters.filter(c => c.story_id === story.story_id)
+
+  const handleSave = async () => {
+    setSaving(true)
+    await new Promise(r => setTimeout(r, 400))
+    updateStory(story.story_id, { ...form, updated_at: new Date().toISOString() })
+    addToast('Story updated!')
+    setSaving(false)
+  }
+
+  const handleDelete = () => {
+    deleteStory(story.story_id)
+    addToast('Story deleted', 'info')
+    navigate('/writer')
+  }
+
+  const toggleGenre = (g: string) =>
+    setForm(f => ({
+      ...f,
+      genres: f.genres.includes(g) ? f.genres.filter(x => x !== g) : [...f.genres, g],
+    }))
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-3">
+          <button onClick={() => navigate('/writer')} className="text-slate-400 hover:text-white transition-colors">
+            <ArrowLeft size={20} />
+          </button>
+          <div>
+            <h1 className="font-serif text-2xl font-bold text-white">Edit Story</h1>
+            <p className="text-slate-400 text-sm mt-0.5">Status: <span className="capitalize text-white">{story.status}</span></p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          {story.status === 'draft' && (
+            <Button size="sm" variant="secondary" onClick={() => { updateStoryStatus(story.story_id, 'published'); addToast('Story published!') }}>
+              <Globe size={14} />
+              Publish
+            </Button>
+          )}
+          {story.status === 'published' && (
+            <Button size="sm" variant="ghost" onClick={() => { updateStoryStatus(story.story_id, 'archived'); addToast('Story archived', 'info') }}>
+              <Archive size={14} />
+              Archive
+            </Button>
+          )}
+          <Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>
+            <Trash2 size={14} />
+          </Button>
+          <Button size="sm" onClick={handleSave} loading={saving}>
+            <Save size={14} />
+            Save
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Form */}
+        <div className="lg:col-span-2 space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Title</label>
+            <input
+              value={form.title}
+              onChange={e => setForm(f => ({ ...f, title: e.target.value }))}
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:outline-none focus:border-indigo-500 font-serif text-lg"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description</label>
+            <textarea
+              value={form.short_description}
+              onChange={e => setForm(f => ({ ...f, short_description: e.target.value }))}
+              rows={3}
+              maxLength={280}
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:outline-none focus:border-indigo-500 resize-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content</label>
+            <textarea
+              value={form.content}
+              onChange={e => setForm(f => ({ ...f, content: e.target.value }))}
+              rows={6}
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:outline-none focus:border-indigo-500 resize-y font-serif"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">Genres</label>
+            <div className="flex flex-wrap gap-2">
+              {ALL_GENRES.map(g => (
+                <button
+                  key={g}
+                  type="button"
+                  onClick={() => toggleGenre(g)}
+                  className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
+                    form.genres.includes(g)
+                      ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
+                      : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
+                  }`}
+                >
+                  {g}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setForm(f => ({ ...f, mature_content: !f.mature_content }))}
+              className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative`}
+            >
+              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
+            </button>
+            <span className="text-sm text-slate-300">Mature Content (18+)</span>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Chapters */}
+          <div className="bg-slate-800 border border-slate-700 rounded-2xl p-5">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-white font-semibold">Chapters</h3>
+              <Button size="sm" onClick={() => navigate(`/writer/create-chapter/${story.story_id}`)}>
+                <Plus size={13} />
+                Add
+              </Button>
+            </div>
+            <ChapterList
+              chapters={storyChapters}
+              storyId={story.story_id}
+              showEditLinks
+              onEdit={cid => navigate(`/writer/edit-chapter/${cid}`)}
+            />
+          </div>
+
+          {/* Collaborators */}
+          <CollaboratorManager
+            storyId={story.story_id}
+            storyTitle={story.title}
+            ownerId={story.user_id}
+          />
+        </div>
+      </div>
+
+      {/* Delete confirm */}
+      <Modal isOpen={deleteConfirm} onClose={() => setDeleteConfirm(false)} title="Delete Story" size="sm">
+        <div className="space-y-4">
+          <p className="text-slate-300 text-sm">
+            Are you sure you want to permanently delete "{story.title}"? This cannot be undone.
+          </p>
+          <div className="flex gap-3">
+            <Button variant="secondary" className="flex-1" onClick={() => setDeleteConfirm(false)}>Cancel</Button>
+            <Button variant="danger" className="flex-1" onClick={handleDelete}>
+              <Trash2 size={14} />
+              Delete
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
Index: chapterx-frontend/src/pages/writer/WriterDashboard.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/WriterDashboard.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,151 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Plus, BookOpen, Eye, Heart, MessageCircle, TrendingUp, Bell } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useNotificationStore } from '../../store/notificationStore'
+import { Button } from '../../components/ui/Button'
+import { StatusBadge } from '../../components/ui/Badge'
+import { StoryAnalytics } from '../../components/writer/StoryAnalytics'
+
+function timeAgo(str: string): string {
+  const diff = Date.now() - new Date(str).getTime()
+  const m = Math.floor(diff / 60000)
+  if (m < 1) return 'just now'
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h ago`
+  return `${Math.floor(h / 24)}d ago`
+}
+
+export const WriterDashboard: React.FC = () => {
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { stories } = useStoryStore()
+  const { notifications } = useNotificationStore()
+
+  if (!currentUser) return null
+
+  const myStories = stories.filter(s => s.user_id === currentUser.user_id)
+  const published = myStories.filter(s => s.status === 'published')
+  const drafts = myStories.filter(s => s.status === 'draft')
+  const totalViews = myStories.reduce((acc, s) => acc + s.total_views, 0)
+  const totalLikes = myStories.reduce((acc, s) => acc + s.total_likes, 0)
+
+  const recentNotifs = notifications.slice(0, 5)
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="font-serif text-3xl font-bold text-white">
+            Welcome back, {currentUser.name}!
+          </h1>
+          <p className="text-slate-400 mt-1">Here's how your stories are performing</p>
+        </div>
+        <Button onClick={() => navigate('/writer/create-story')}>
+          <Plus size={16} />
+          New Story
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        {[
+          { icon: <BookOpen size={20} className="text-indigo-300" />, label: 'Total Stories', value: myStories.length, sub: `${published.length} published`, color: 'bg-indigo-500/20' },
+          { icon: <Eye size={20} className="text-blue-300" />, label: 'Total Views', value: totalViews.toLocaleString(), sub: 'All time', color: 'bg-blue-500/20' },
+          { icon: <Heart size={20} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), sub: 'Across all stories', color: 'bg-rose-500/20' },
+          { icon: <TrendingUp size={20} className="text-emerald-300" />, label: 'Drafts', value: drafts.length, sub: 'In progress', color: 'bg-emerald-500/20' },
+        ].map(s => (
+          <div key={s.label} className="bg-slate-800 border border-slate-700 rounded-2xl p-5">
+            <div className={`w-10 h-10 rounded-xl ${s.color} flex items-center justify-center mb-3`}>
+              {s.icon}
+            </div>
+            <p className="text-2xl font-bold text-white">{s.value}</p>
+            <p className="text-slate-400 text-sm mt-0.5">{s.label}</p>
+            <p className="text-slate-600 text-xs mt-0.5">{s.sub}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* My stories */}
+        <div className="lg:col-span-2">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="font-serif text-xl font-bold text-white">My Stories</h2>
+          </div>
+          {myStories.length === 0 ? (
+            <div className="bg-slate-800 border border-slate-700 rounded-2xl p-12 text-center">
+              <BookOpen size={40} className="mx-auto mb-4 text-slate-600" />
+              <h3 className="text-white font-medium mb-2">No stories yet</h3>
+              <p className="text-slate-500 text-sm mb-4">Start your writing journey today!</p>
+              <Button onClick={() => navigate('/writer/create-story')}>
+                <Plus size={14} />
+                Create Your First Story
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {myStories.map(story => (
+                <div key={story.story_id} className="flex items-center gap-4 p-4 bg-slate-800 border border-slate-700 rounded-xl hover:border-indigo-500/40 transition-colors">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="text-white font-medium text-sm truncate">{story.title}</h3>
+                      <StatusBadge status={story.status} />
+                    </div>
+                    <div className="flex items-center gap-3 text-slate-500 text-xs">
+                      <span className="flex items-center gap-1"><Eye size={11} /> {story.total_views.toLocaleString()}</span>
+                      <span className="flex items-center gap-1"><Heart size={11} /> {story.total_likes}</span>
+                      <span className="flex items-center gap-1"><MessageCircle size={11} /> {story.total_comments}</span>
+                      <span>{story.total_chapters} chapters</span>
+                    </div>
+                  </div>
+                  <div className="flex gap-2 flex-shrink-0">
+                    <Button size="sm" variant="ghost" onClick={() => navigate(`/story/${story.story_id}`)}>View</Button>
+                    <Button size="sm" variant="secondary" onClick={() => navigate(`/writer/edit-story/${story.story_id}`)}>Edit</Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Recent notifications */}
+        <div>
+          <div className="flex items-center gap-2 mb-4">
+            <Bell size={16} className="text-amber-400" />
+            <h2 className="font-serif text-xl font-bold text-white">Recent Activity</h2>
+          </div>
+          <div className="space-y-2">
+            {recentNotifs.length === 0 ? (
+              <div className="text-center py-8 text-slate-500 text-sm">No recent activity</div>
+            ) : (
+              recentNotifs.map(n => (
+                <div key={n.notification_id} className={`p-3 rounded-xl border text-sm ${
+                  !n.is_read ? 'bg-indigo-500/5 border-indigo-500/20' : 'bg-slate-800 border-slate-700'
+                }`}>
+                  <p className="text-white text-xs font-medium">{n.title}</p>
+                  <p className="text-slate-400 text-xs mt-0.5 line-clamp-2">{n.message}</p>
+                  <p className="text-slate-600 text-xs mt-1">{timeAgo(n.created_at)}</p>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Analytics */}
+      {myStories.some(s => s.status === 'published') && (
+        <div className="mt-10">
+          <div className="flex items-center gap-2 mb-6">
+            <TrendingUp size={18} className="text-indigo-400" />
+            <h2 className="font-serif text-xl font-bold text-white">Analytics</h2>
+            <span className="text-slate-500 text-sm">(Story: The Chronicles of Eldoria)</span>
+          </div>
+          <StoryAnalytics />
+        </div>
+      )}
+    </div>
+  )
+}