add dbiz, add history

src/features/writing/components/WritingChecker.tsx

@@ -16,6 +16,7 @@ export function WritingChecker() {
   const [text, setText] = useState('')
   const [improvedExpanded, setImprovedExpanded] = useState(false)
   const [remaining, setRemaining] = useState(getRemainingChecks)
+  const [streamingText, setStreamingText] = useState('')
 
   const { mutate: checkWriting, isPending, isError, error, data: feedback, reset: resetMutation } = useWritingCheck()
   const { requireAuth } = useRequireAuth()
@@ -42,19 +43,25 @@ export function WritingChecker() {
   function handleSubmit() {
     if (!requireAuth()) return
     if (!canSubmit) return
-    checkWriting(text, {
-      onSuccess: () => {
-        if (user) {
-          awardActivity({ xp: XP_REWARDS.writing })
-          countTodayWritingSubmissions(user.id).then((used) => setRemaining(AUTH_LIMIT - used))
-        } else {
-          setRemaining(getRemainingChecks())
-        }
+    setStreamingText('')
+    checkWriting(
+      { content: text, onChunk: (chunk) => setStreamingText((prev) => prev + chunk) },
+      {
+        onSuccess: () => {
+          setStreamingText('')
+          if (user) {
+            awardActivity({ xp: XP_REWARDS.writing })
+            countTodayWritingSubmissions(user.id).then((used) => setRemaining(AUTH_LIMIT - used))
+          } else {
+            setRemaining(getRemainingChecks())
+          }
+        },
+        onError: () => {
+          setStreamingText('')
+          if (!user) setRemaining(getRemainingChecks())
+        },
       },
-      onError: () => {
-        if (!user) setRemaining(getRemainingChecks())
-      },
-    })
+    )
   }
 
   return (
@@ -78,8 +85,9 @@ export function WritingChecker() {
               value={text}
               onChange={(e) => setText(e.target.value.slice(0, MAX_CHARS))}
               rows={12}
+              dir="ltr"
               placeholder="Nhập bài writing của bạn vào đây... (TOEIC email, IELTS task, hoặc đoạn văn tự do)"
-              className="w-full resize-none rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:bg-white transition-colors"
+              className="w-full resize-none rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-left text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-blue-400 focus:bg-white transition-colors"
             />
             <div className="mt-3 flex items-center justify-between">
               <div className="flex items-center gap-1.5">
@@ -142,10 +150,21 @@ export function WritingChecker() {
           )}
 
           {isPending && (
-            <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col items-center justify-center text-center h-full min-h-48">
-              <div className="w-10 h-10 border-2 border-blue-100 border-t-blue-600 rounded-full animate-spin mb-4" />
-              <p className="text-sm text-slate-500 font-medium">AI đang phân tích bài viết...</p>
-              <p className="text-xs text-slate-400 mt-1">Thường mất 3–5 giây</p>
+            <div className="bg-slate-900 rounded-2xl border border-slate-700 p-5 min-h-48 flex flex-col">
+              <div className="flex items-center gap-2 mb-3 flex-shrink-0">
+                <div className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
+                <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">AI đang phân tích...</span>
+              </div>
+              {streamingText ? (
+                <pre className="text-xs text-green-300 font-mono whitespace-pre-wrap leading-relaxed overflow-auto flex-1">
+                  {streamingText}
+                  <span className="animate-pulse">▋</span>
+                </pre>
+              ) : (
+                <div className="flex items-center justify-center flex-1">
+                  <div className="w-6 h-6 border-2 border-slate-700 border-t-blue-400 rounded-full animate-spin" />
+                </div>
+              )}
             </div>
           )}
 

src/features/writing/components/WritingHistory.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react'
+import { useWritingHistory } from '@/hooks/use-writing-history'
+import { useAuthStore } from '@/store/auth-store'
+import type { WritingSubmission } from '@/types'
+
+function scoreColor(score: string) {
+  const n = parseFloat(score)
+  if (n >= 7) return 'bg-green-100 text-green-700'
+  if (n >= 5) return 'bg-amber-100 text-amber-700'
+  return 'bg-red-100 text-red-700'
+}
+
+function relativeTime(iso: string) {
+  const diff = Date.now() - new Date(iso).getTime()
+  const mins = Math.floor(diff / 60_000)
+  if (mins < 1) return 'vừa xong'
+  if (mins < 60) return `${mins} phút trước`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours} giờ trước`
+  return `${Math.floor(hours / 24)} ngày trước`
+}
+
+function SubmissionCard({ item }: { item: WritingSubmission }) {
+  const [open, setOpen] = useState(false)
+  const fb = item.feedback
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="w-full text-left p-4 flex items-start gap-3 hover:bg-slate-50 transition-colors"
+      >
+        <span className={`text-xs font-bold px-2 py-1 rounded-lg flex-shrink-0 mt-0.5 ${scoreColor(fb?.score ?? '0')}`}>
+          {fb?.score ?? '–'}
+        </span>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-slate-700 line-clamp-1">{item.content}</p>
+          <p className="text-xs text-slate-400 mt-0.5">{relativeTime(item.created_at)}</p>
+        </div>
+        <span className="material-symbols-outlined text-slate-400 flex-shrink-0 mt-0.5" style={{ fontSize: 18 }}>
+          {open ? 'expand_less' : 'expand_more'}
+        </span>
+      </button>
+
+      {open && fb && (
+        <div className="border-t border-slate-100 p-4 space-y-4">
+          <div>
+            <p className="text-xs text-slate-400 mb-2">Bài viết gốc</p>
+            <p className="text-xs text-slate-600 leading-relaxed whitespace-pre-wrap">{item.content}</p>
+          </div>
+
+          {fb.grammar?.length > 0 && (
+            <div>
+              <p className="text-xs font-semibold text-slate-600 mb-1.5 flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-red-500 inline-block" />
+                Ngữ pháp
+              </p>
+              <ul className="space-y-1">
+                {fb.grammar.map((g, i) => (
+                  <li key={i} className="text-xs text-slate-600 flex gap-1.5">
+                    <span className="text-red-400 flex-shrink-0">•</span>{g}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {fb.vocabulary?.length > 0 && (
+            <div>
+              <p className="text-xs font-semibold text-slate-600 mb-1.5 flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-amber-500 inline-block" />
+                Từ vựng
+              </p>
+              <ul className="space-y-1">
+                {fb.vocabulary.map((v, i) => (
+                  <li key={i} className="text-xs text-slate-600 flex gap-1.5">
+                    <span className="text-amber-400 flex-shrink-0">•</span>{v}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {fb.structure && (
+            <div>
+              <p className="text-xs font-semibold text-slate-600 mb-1">Cấu trúc</p>
+              <p className="text-xs text-slate-600">{fb.structure}</p>
+            </div>
+          )}
+
+          {fb.summary && (
+            <div className="bg-green-50 rounded-lg p-3">
+              <p className="text-xs font-semibold text-green-700 mb-1">Tổng nhận xét</p>
+              <p className="text-xs text-slate-600">{fb.summary}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WritingHistory() {
+  const user = useAuthStore((s) => s.user)
+  const { data: history, isLoading } = useWritingHistory()
+
+  if (!user) return null
+
+  return (
+    <section className="px-4 lg:px-6 pb-10 max-w-6xl mx-auto">
+      <h2 className="text-lg font-bold text-slate-800 mb-4">Lịch sử chấm bài</h2>
+
+      {isLoading && (
+        <div className="flex items-center gap-2 text-sm text-slate-400">
+          <div className="w-4 h-4 border-2 border-slate-200 border-t-blue-500 rounded-full animate-spin" />
+          Đang tải...
+        </div>
+      )}
+
+      {!isLoading && !history?.length && (
+        <div className="text-center py-10 text-slate-400">
+          <span className="material-symbols-outlined mb-2 block" style={{ fontSize: 36 }}>history</span>
+          <p className="text-sm">Chưa có bài nào được chấm.</p>
+        </div>
+      )}
+
+      {!!history?.length && (
+        <div className="space-y-2">
+          {history.map((item) => <SubmissionCard key={item.id} item={item} />)}
+        </div>
+      )}
+    </section>
+  )
+}