simplify heroui layouts and add sonarqube workflow

frontend/src/components/shared/StatCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@heroui/react';
+import { Card, CardContent, Chip } from '@heroui/react';
 import type { ReactNode } from 'react';
 
 type Props = {
@@ -10,13 +10,15 @@ type Props = {
 };
 
 export function StatCard({ icon, label, value, trend, color = 'primary' }: Props) {
+  const chipColor = color === 'default' ? 'default' : color;
+
   return (
-    <Card className="border border-default-100 bg-gradient-to-br from-default-50/20 to-background hover:border-default-200 transition-all">
+    <Card>
       <CardContent className="flex flex-col gap-2 p-4">
         <div className="flex items-center justify-between">
-          <div className={`flex size-9 items-center justify-center rounded-xl bg-${color}-500/10 text-${color}-400`}>
-            {icon}
-          </div>
+          <Chip color={chipColor} size="sm" variant="flat" startContent={icon}>
+            {label}
+          </Chip>
           {trend && (
             <span className={`text-tiny font-medium ${trend.startsWith('+') ? 'text-success-400' : trend.startsWith('-') ? 'text-danger-400' : 'text-default-400'}`}>
               {trend}
@@ -24,7 +26,7 @@ export function StatCard({ icon, label, value, trend, color = 'primary' }: Props
           )}
         </div>
         <div className="text-2xl font-bold tracking-tight">{value}</div>
-        <div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
+        <div className="text-tiny text-default-500">{label}</div>
       </CardContent>
     </Card>
   );