optimizations

resources/js/components/profile/tabs/TabStats.jsx

@@ -18,7 +18,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
  * TabStats
  * KPI overview cards. Charts can be added here once chart infrastructure exists.
  */
-export default function TabStats({ stats, followerCount }) {
+export default function TabStats({ stats, followerCount, followAnalytics }) {
   const kpis = [
     { icon: 'fa-eye',           label: 'Profile Views',     value: stats?.profile_views_count,            color: 'text-sky-400' },
     { icon: 'fa-images',        label: 'Uploads',           value: stats?.uploads_count,                  color: 'text-violet-400' },
@@ -29,6 +29,12 @@ export default function TabStats({ stats, followerCount }) {
     { icon: 'fa-trophy',        label: 'Awards Received',   value: stats?.awards_received_count,          color: 'text-yellow-400' },
     { icon: 'fa-comment',       label: 'Comments Received', value: stats?.comments_received_count,        color: 'text-orange-400' },
   ]
+  const trendCards = [
+    { icon: 'fa-arrow-trend-up', label: 'Followers Today', value: followAnalytics?.daily?.gained ?? 0, color: 'text-emerald-400' },
+    { icon: 'fa-user-minus', label: 'Unfollows Today', value: followAnalytics?.daily?.lost ?? 0, color: 'text-rose-400' },
+    { icon: 'fa-chart-line', label: 'Weekly Net', value: followAnalytics?.weekly?.net ?? 0, color: 'text-sky-400' },
+    { icon: 'fa-percent', label: 'Weekly Growth %', value: followAnalytics?.weekly?.growth_rate ?? 0, color: 'text-amber-400' },
+  ]
 
   const hasStats = stats !== null && stats !== undefined
 
@@ -56,6 +62,15 @@ export default function TabStats({ stats, followerCount }) {
               <KpiCard key={kpi.label} {...kpi} />
             ))}
           </div>
+          <h3 className="mt-8 mb-4 text-xs font-semibold uppercase tracking-widest text-slate-500 flex items-center gap-2">
+            <i className="fa-solid fa-user-group text-emerald-400 fa-fw" />
+            Follow Growth
+          </h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+            {trendCards.map((card) => (
+              <KpiCard key={card.label} {...card} />
+            ))}
+          </div>
           <p className="text-xs text-slate-600 mt-6 text-center">
             More detailed analytics (charts, trends) coming soon.
           </p>