feat: Rearrange dashboard - pie chart + stats on top, spools middle, analytics bottom

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

client/src/pages/home/components/MaterialDistributionChart.tsx

@@ -20,7 +20,11 @@ const COLORS = [
   "#2f54eb", // geekblue
 ];
 
-export function MaterialDistributionChart() {
+interface MaterialDistributionChartProps {
+  square?: boolean;
+}
+
+export function MaterialDistributionChart({ square }: MaterialDistributionChartProps) {
   const t = useTranslate();
   const { token } = useToken();
 
@@ -59,20 +63,21 @@ export function MaterialDistributionChart() {
     <Card
       title={t("home.charts.material_distribution")}
       size="small"
-      style={{ marginBottom: 16 }}
+      style={square ? { aspectRatio: "1", display: "flex", flexDirection: "column" } : { marginBottom: 16 }}
+      styles={square ? { body: { flex: 1, padding: "8px 12px", display: "flex", flexDirection: "column" } } : undefined}
     >
-      <ResponsiveContainer width="100%" height={250}>
+      <ResponsiveContainer width="100%" height={square ? "100%" : 250}>
         <PieChart>
           <Pie
             data={chartData}
             cx="50%"
             cy="50%"
-            innerRadius={50}
-            outerRadius={80}
+            innerRadius={square ? 40 : 50}
+            outerRadius={square ? 70 : 80}
             paddingAngle={2}
             dataKey="value"
-            label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
-            labelLine={{ stroke: token.colorTextSecondary }}
+            label={square ? undefined : ({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+            labelLine={square ? false : { stroke: token.colorTextSecondary }}
           >
             {chartData.map((_, index) => (
               <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
@@ -86,6 +91,13 @@ export function MaterialDistributionChart() {
               borderRadius: token.borderRadius,
             }}
           />
+          {square && (
+            <Legend
+              layout="horizontal"
+              verticalAlign="bottom"
+              wrapperStyle={{ fontSize: 11 }}
+            />
+          )}
         </PieChart>
       </ResponsiveContainer>
     </Card>