Add more tests

frontend/src/components/dashboard/DataQualityPanel.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { Button } from '../Button'
+
+interface DataQualityPanelProps {
+  completenessRate: number
+  completeCount: number
+  incompleteCount: number
+  pendingCount: number
+  isLoading?: boolean
+  onViewIncomplete?: () => void
+}
+
+export const DataQualityPanel: React.FC<DataQualityPanelProps> = ({
+  completenessRate,
+  completeCount,
+  incompleteCount,
+  pendingCount,
+  isLoading = false,
+  onViewIncomplete,
+}) => {
+  const radius = 54
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (completenessRate / 100) * circumference
+
+  return (
+    <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
+      <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
+        Data Quality
+      </h2>
+
+      <div className="flex items-center gap-6">
+        <div className="relative">
+          <svg width="120" height="120" className="transform -rotate-90">
+            <circle
+              cx="60"
+              cy="60"
+              r={radius}
+              stroke="#E5E7EB"
+              strokeWidth="12"
+              fill="none"
+            />
+            <circle
+              cx="60"
+              cy="60"
+              r={radius}
+              stroke="#22C55E"
+              strokeWidth="12"
+              fill="none"
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={isLoading ? circumference : strokeDashoffset}
+              className="transition-all duration-500"
+            />
+          </svg>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-3xl font-bold text-warm-text-primary">
+              {isLoading ? '...' : `${Math.round(completenessRate)}%`}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex-1">
+          <p className="text-sm text-warm-text-secondary mb-4">
+            Annotation Complete
+          </p>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-green-500 rounded-full" />
+                Complete
+              </span>
+              <span className="font-medium">{isLoading ? '...' : completeCount}</span>
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-orange-500 rounded-full" />
+                Incomplete
+              </span>
+              <span className="font-medium">{isLoading ? '...' : incompleteCount}</span>
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-blue-500 rounded-full" />
+                Pending
+              </span>
+              <span className="font-medium">{isLoading ? '...' : pendingCount}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {onViewIncomplete && incompleteCount > 0 && (
+        <div className="mt-4 pt-4 border-t border-warm-border">
+          <button
+            onClick={onViewIncomplete}
+            className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+          >
+            View Incomplete Docs
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}