Initial commit: MOPC platform with Docker deployment setup

Full Next.js 15 platform with tRPC, Prisma, PostgreSQL, NextAuth.
Includes production Dockerfile (multi-stage, port 7600), docker-compose
with registry-based image pull, Gitea Actions CI workflow, nginx config
for portal.monaco-opc.com, deployment scripts, and DEPLOYMENT.md guide.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/charts/score-distribution.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface ScoreDistributionProps {
+  data: { score: number; count: number }[]
+  averageScore: number
+  totalScores: number
+}
+
+const COLORS = [
+  '#de0f1e', // 1 - red (poor)
+  '#e6382f',
+  '#ed6141',
+  '#f38a52',
+  '#f8b364', // 5 - yellow (average)
+  '#c9c052',
+  '#99cc41',
+  '#6ad82f',
+  '#3be31e',
+  '#0bd90f', // 10 - green (excellent)
+]
+
+export function ScoreDistributionChart({
+  data,
+  averageScore,
+  totalScores,
+}: ScoreDistributionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>Score Distribution</span>
+          <span className="text-sm font-normal text-muted-foreground">
+            Avg: {averageScore.toFixed(2)} ({totalScores} scores)
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[300px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={data}
+              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis
+                dataKey="score"
+                label={{
+                  value: 'Score',
+                  position: 'insideBottom',
+                  offset: -10,
+                }}
+              />
+              <YAxis
+                label={{
+                  value: 'Count',
+                  angle: -90,
+                  position: 'insideLeft',
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--card))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '6px',
+                }}
+                formatter={(value: number | undefined) => [value ?? 0, 'Count']}
+                labelFormatter={(label) => `Score: ${label}`}
+              />
+              <Bar dataKey="count" radius={[4, 4, 0, 0]}>
+                {data.map((_, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index]} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}