Add account hierarchy framework with migrations, RLS policies, and UI components

apps/web/components/stats-card.tsx

@@ -12,30 +12,38 @@ interface StatsCardProps {
  * Reusable stat card with icon + value + label + optional trend.
  * Used on dashboard and list pages.
  */
-export function StatsCard({ title, value, icon, description, trend }: StatsCardProps) {
+export function StatsCard({
+  title,
+  value,
+  icon,
+  description,
+  trend,
+}: StatsCardProps) {
   return (
     <Card>
       <CardContent className="p-6">
         <div className="flex items-center justify-between">
           <div className="space-y-1">
-            <p className="text-sm font-medium text-muted-foreground">{title}</p>
+            <p className="text-muted-foreground text-sm font-medium">{title}</p>
             <p className="text-2xl font-bold">{value}</p>
             {description && (
-              <p className="text-xs text-muted-foreground">{description}</p>
+              <p className="text-muted-foreground text-xs">{description}</p>
             )}
           </div>
           {icon && (
-            <div className="rounded-full bg-primary/10 p-3 text-primary">
+            <div className="bg-primary/10 text-primary rounded-full p-3">
               {icon}
             </div>
           )}
         </div>
         {trend && (
           <div className="mt-2 flex items-center text-xs">
-            <span className={trend.value >= 0 ? 'text-green-600' : 'text-red-600'}>
+            <span
+              className={trend.value >= 0 ? 'text-green-600' : 'text-red-600'}
+            >
               {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
             </span>
-            <span className="ml-1 text-muted-foreground">{trend.label}</span>
+            <span className="text-muted-foreground ml-1">{trend.label}</span>
           </div>
         )}
       </CardContent>