feat: add Review Management module and UI layout fixes

src/components/dashboard/RevenueChart.tsx

@@ -0,0 +1,76 @@
+import { RevenueDataPoint } from '@/types/dashboard';
+import { formatCurrency } from '@/data/mockData';
+
+interface RevenueChartProps {
+  data: RevenueDataPoint[];
+}
+
+export function RevenueChart({ data }: RevenueChartProps) {
+  const maxValue = Math.max(...data.map(d => Math.max(d.revenue, d.payouts)));
+  
+  return (
+    <div className="neu-card p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-bold text-foreground">Revenue vs Payouts</h2>
+          <p className="text-sm text-muted-foreground">Last 7 days comparison</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <span className="h-3 w-3 rounded-sm bg-accent" />
+            <span className="text-sm text-muted-foreground">Revenue</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="h-3 w-3 rounded-sm bg-success" />
+            <span className="text-sm text-muted-foreground">Payouts</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Chart Area */}
+      <div className="h-64 flex items-end gap-4 pt-8 pb-4">
+        {data.map((point, index) => (
+          <div key={index} className="flex-1 flex flex-col items-center gap-2">
+            <div className="w-full flex items-end justify-center gap-1 h-48">
+              {/* Revenue Bar */}
+              <div 
+                className="w-5 bg-accent rounded-t-md transition-all duration-300 hover:bg-ocean-blue"
+                style={{ 
+                  height: `${(point.revenue / maxValue) * 100}%`,
+                  minHeight: '8px'
+                }}
+                title={formatCurrency(point.revenue)}
+              />
+              {/* Payout Bar */}
+              <div 
+                className="w-5 bg-success rounded-t-md transition-all duration-300 hover:opacity-80"
+                style={{ 
+                  height: `${(point.payouts / maxValue) * 100}%`,
+                  minHeight: '8px'
+                }}
+                title={formatCurrency(point.payouts)}
+              />
+            </div>
+            <span className="text-xs font-medium text-muted-foreground">{point.day}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Summary */}
+      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/50">
+        <div className="text-center">
+          <p className="text-2xl font-bold text-foreground">
+            {formatCurrency(data.reduce((sum, d) => sum + d.revenue, 0))}
+          </p>
+          <p className="text-sm text-muted-foreground">Total Revenue</p>
+        </div>
+        <div className="text-center">
+          <p className="text-2xl font-bold text-foreground">
+            {formatCurrency(data.reduce((sum, d) => sum + d.payouts, 0))}
+          </p>
+          <p className="text-sm text-muted-foreground">Total Payouts</p>
+        </div>
+      </div>
+    </div>
+  );
+}