From c5147921ed361178817d5d9fb7e4a472b7db3c3a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 24 Jul 2026 19:00:22 +0000
Subject: [PATCH] Fix low-contrast dark-theme text and Users row overlap on 6
 admin pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Analytics, Press Releases, Live Streams, Audit Reports, Procurement,
and Users were built with dark-theme classes (text-white, text-green-
200/*, bg-white/5, border-white/10) assuming a dark page background,
but the admin content area is actually light (bg-slate-50) — headings,
subtitles, stat labels, search placeholders, and pagination text were
all rendering nearly invisible (white/pale-green on white). Converted
all six to the light theme already used correctly elsewhere in the
admin panel (LGA Approvals, Wards, Payments, Allocations).

The Users list row had the same non-stacking layout bug fixed earlier
on LGA Approvals — avatar, name, badges, and Suspend/Ban buttons were
forced into one non-wrapping row, so on mobile names and emails
truncated to a single character ("K…", "ke…") and buttons crowded the
text. Now stacks properly on narrow screens.

Also found the root cause of a stray corrupted byte discovered while
editing press-releases: the previous session's arrow-mojibake fix
(sed replacing "â†" with "←") left a dangling C1 control byte (U+0090)
immediately after the arrow in 5 files, invisible in normal viewing
but preventing exact-string edits on those lines. Fixed at the byte
level and confirmed zero remaining control-character corruption
across the whole app/ tree.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UPJE5cNDtQ4j7yeg9Xjtxw
---
 app/(admin)/admin/analytics/page.tsx      | 82 +++++++++++------------
 app/(admin)/admin/audit-reports/page.tsx  | 16 ++---
 app/(admin)/admin/lgas/page.tsx           |  2 +-
 app/(admin)/admin/live-streams/page.tsx   |  6 +-
 app/(admin)/admin/press-releases/page.tsx | 18 ++---
 app/(admin)/admin/procurement/page.tsx    | 18 ++---
 app/(admin)/admin/revenue/page.tsx        |  2 +-
 app/(admin)/admin/users/page.tsx          | 68 ++++++++++---------
 8 files changed, 107 insertions(+), 105 deletions(-)

diff --git a/app/(admin)/admin/analytics/page.tsx b/app/(admin)/admin/analytics/page.tsx
index c5b44ad..5d6c40d 100644
--- a/app/(admin)/admin/analytics/page.tsx
+++ b/app/(admin)/admin/analytics/page.tsx
@@ -43,24 +43,24 @@ function StatCard({ icon: Icon, label, value, sub, color = "text-green-600" }: {
   sub?: string; color?: string;
 }) {
   return (
-    <div className="bg-white/5 border border-white/10 rounded-2xl p-5">
+    <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
       <div className="flex items-center gap-3 mb-3">
-        <div className="h-9 w-9 rounded-xl bg-green-600/20 flex items-center justify-center">
+        <div className="h-9 w-9 rounded-xl bg-green-100 flex items-center justify-center">
           <Icon className={`h-4 w-4 ${color}`} />
         </div>
-        <p className="text-sm text-green-200/70">{label}</p>
+        <p className="text-sm text-slate-500">{label}</p>
       </div>
-      <p className="text-3xl font-extrabold text-white">{value}</p>
-      {sub && <p className="text-xs text-green-300/50 mt-1">{sub}</p>}
+      <p className="text-3xl font-extrabold text-slate-900">{value}</p>
+      {sub && <p className="text-xs text-slate-400 mt-1">{sub}</p>}
     </div>
   );
 }
 
 function nairaK(koboStr: string) {
   const naira = (koboStr && koboStr !== "0" ? Number(BigInt(koboStr)) : 0) / 100;
-  if (naira >= 1_000_000) return `₦${(naira / 1_000_000).toFixed(1)}M`;
-  if (naira >= 1_000)     return `₦${(naira / 1_000).toFixed(1)}K`;
-  return `₦${naira.toFixed(2)}`;
+  if (naira >= 1_000_000) return `₦${(naira / 1_000_000).toFixed(1)}M`;
+  if (naira >= 1_000)     return `₦${(naira / 1_000).toFixed(1)}K`;
+  return `₦${naira.toFixed(2)}`;
 }
 
 export default function AdminAnalyticsPage() {
@@ -78,14 +78,14 @@ export default function AdminAnalyticsPage() {
   if (loading) {
     return (
       <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 space-y-4">
-        {[0,1,2].map((i) => <div key={i} className="h-32 bg-white/5 rounded-2xl animate-pulse" />)}
+        {[0,1,2].map((i) => <div key={i} className="h-32 bg-slate-100 rounded-2xl animate-pulse" />)}
       </div>
     );
   }
 
   if (!data) {
     return (
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 text-center text-green-200/60">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 text-center text-slate-400">
         Failed to load analytics.
       </div>
     );
@@ -102,10 +102,10 @@ export default function AdminAnalyticsPage() {
     <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <div className="mb-6">
         <div className="flex items-center gap-2 mb-1">
-          <Activity className="h-5 w-5 text-green-400" />
-          <h1 className="text-2xl font-bold text-white">Platform Analytics</h1>
+          <Activity className="h-5 w-5 text-green-600" />
+          <h1 className="text-2xl font-bold text-slate-900">Platform Analytics</h1>
         </div>
-        <p className="text-green-200/60 text-sm">Real-time overview of platform activity</p>
+        <p className="text-slate-500 text-sm">Real-time overview of platform activity</p>
       </div>
 
       {/* Key metrics */}
@@ -123,22 +123,22 @@ export default function AdminAnalyticsPage() {
       {/* Charts */}
       <div className="grid lg:grid-cols-2 gap-6 mb-8">
         {/* Monthly revenue bar chart */}
-        <div className="bg-white/5 border border-white/10 rounded-2xl p-5">
-          <h2 className="text-sm font-semibold text-green-200/80 mb-4">Monthly Revenue (₦)</h2>
+        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
+          <h2 className="text-sm font-semibold text-slate-700 mb-4">Monthly Revenue (₦)</h2>
           {revenueChartData.length === 0 ? (
-            <div className="h-48 flex items-center justify-center text-sm text-green-200/40">
+            <div className="h-48 flex items-center justify-center text-sm text-slate-400">
               No revenue data yet
             </div>
           ) : (
             <ResponsiveContainer width="100%" height={200}>
               <BarChart data={revenueChartData} margin={{ top: 0, right: 8, bottom: 0, left: -20 }}>
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
-                <XAxis dataKey="month" tick={{ fontSize: 10, fill: "#6ee7b7" }} />
-                <YAxis tick={{ fontSize: 10, fill: "#6ee7b7" }}
-                  tickFormatter={(v) => `₦${(Number(v) / 1000).toFixed(0)}K`} />
+                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+                <XAxis dataKey="month" tick={{ fontSize: 10, fill: "#94a3b8" }} />
+                <YAxis tick={{ fontSize: 10, fill: "#94a3b8" }}
+                  tickFormatter={(v) => `₦${(Number(v) / 1000).toFixed(0)}K`} />
                 <Tooltip
-                  contentStyle={{ background: "#0f2d1a", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12, color: "#fff" }}
-                  formatter={(v) => [`₦${Number(v).toLocaleString()}`, "Revenue"]}
+                  contentStyle={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, color: "#0f172a" }}
+                  formatter={(v) => [`₦${Number(v).toLocaleString()}`, "Revenue"]}
                 />
                 <Bar dataKey="revenue" fill="#15803d" radius={[4,4,0,0]} />
               </BarChart>
@@ -147,8 +147,8 @@ export default function AdminAnalyticsPage() {
         </div>
 
         {/* LGA status pie */}
-        <div className="bg-white/5 border border-white/10 rounded-2xl p-5">
-          <h2 className="text-sm font-semibold text-green-200/80 mb-4">LGA Status Breakdown</h2>
+        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
+          <h2 className="text-sm font-semibold text-slate-700 mb-4">LGA Status Breakdown</h2>
           <ResponsiveContainer width="100%" height={200}>
             <PieChart>
               <Pie data={lgaStatusData} dataKey="value" nameKey="name"
@@ -158,7 +158,7 @@ export default function AdminAnalyticsPage() {
                 ))}
               </Pie>
               <Tooltip
-                contentStyle={{ background: "#0f2d1a", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12, color: "#fff" }}
+                contentStyle={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, color: "#0f172a" }}
                 formatter={(v, name) => [v, name]}
               />
             </PieChart>
@@ -167,37 +167,37 @@ export default function AdminAnalyticsPage() {
       </div>
 
       {/* User role breakdown */}
-      <div className="bg-white/5 border border-white/10 rounded-2xl p-5 mb-6">
-        <h2 className="text-sm font-semibold text-green-200/80 mb-4">User Breakdown by Role</h2>
+      <div className="bg-white border border-slate-200 rounded-2xl p-5 mb-6 shadow-sm">
+        <h2 className="text-sm font-semibold text-slate-700 mb-4">User Breakdown by Role</h2>
         <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
           {userRoleData.map(({ name, value }) => (
-            <div key={name} className="text-center p-3 rounded-xl bg-white/5">
-              <p className="text-xl font-bold text-white">{value.toLocaleString()}</p>
-              <p className="text-xs text-green-200/50 mt-1">{name.replace("_", " ")}</p>
+            <div key={name} className="text-center p-3 rounded-xl bg-slate-50">
+              <p className="text-xl font-bold text-slate-900">{value.toLocaleString()}</p>
+              <p className="text-xs text-slate-500 mt-1">{name.replace("_", " ")}</p>
             </div>
           ))}
         </div>
       </div>
 
       {/* Top LGAs by posts */}
-      <div className="bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
-        <div className="px-5 py-4 border-b border-white/10 flex items-center gap-2">
-          <TrendingUp className="h-4 w-4 text-green-400" />
-          <h2 className="text-sm font-semibold text-green-200/80">Top LGAs by Content</h2>
+      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+        <div className="px-5 py-4 border-b border-slate-100 flex items-center gap-2">
+          <TrendingUp className="h-4 w-4 text-green-600" />
+          <h2 className="text-sm font-semibold text-slate-700">Top LGAs by Content</h2>
         </div>
         {data.topLgasByPosts.length === 0 ? (
-          <div className="py-10 text-center text-sm text-green-200/40">No data yet</div>
+          <div className="py-10 text-center text-sm text-slate-400">No data yet</div>
         ) : (
-          <div className="divide-y divide-white/5">
+          <div className="divide-y divide-slate-100">
             {data.topLgasByPosts.map((lga, idx) => (
               <div key={lga.id} className="flex items-center gap-4 px-5 py-4">
-                <span className="text-sm font-bold text-green-400/60 w-5 text-center">{idx + 1}</span>
+                <span className="text-sm font-bold text-green-600/70 w-5 text-center">{idx + 1}</span>
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-semibold text-white truncate">{lga.lgaName} LGA</p>
-                  <p className="text-xs text-green-200/40 mt-0.5">{lga.state} · {lga.status}</p>
+                  <p className="text-sm font-semibold text-slate-900 truncate">{lga.lgaName} LGA</p>
+                  <p className="text-xs text-slate-400 mt-0.5">{lga.state} · {lga.status}</p>
                 </div>
-                <div className="flex items-center gap-1 text-sm font-bold text-green-300">
-                  <FileText className="h-3.5 w-3.5 text-green-400/60" />
+                <div className="flex items-center gap-1 text-sm font-bold text-green-700">
+                  <FileText className="h-3.5 w-3.5 text-green-600/70" />
                   {lga._count.posts}
                 </div>
               </div>
diff --git a/app/(admin)/admin/audit-reports/page.tsx b/app/(admin)/admin/audit-reports/page.tsx
index 6da7a43..93d53d4 100644
--- a/app/(admin)/admin/audit-reports/page.tsx
+++ b/app/(admin)/admin/audit-reports/page.tsx
@@ -119,10 +119,10 @@ export default function AdminAuditReportsPage() {
       <div className="mb-6 flex items-start justify-between gap-4">
         <div>
           <div className="flex items-center gap-2 mb-1">
-            <ClipboardList className="h-5 w-5 text-green-400" />
-            <h1 className="text-2xl font-bold text-white">Audit Reports</h1>
+            <ClipboardList className="h-5 w-5 text-green-600" />
+            <h1 className="text-2xl font-bold text-slate-900">Audit Reports</h1>
           </div>
-          <p className="text-green-200/60 text-sm">{total.toLocaleString()} audit report records</p>
+          <p className="text-slate-500 text-sm">{total.toLocaleString()} audit report records</p>
         </div>
         <button
           onClick={() => setShowForm(true)}
@@ -138,7 +138,7 @@ export default function AdminAuditReportsPage() {
         <input
           type="text" placeholder="Search LGA or report title…"
           value={search} onChange={(e) => setSearch(e.target.value)}
-          className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-white/20 bg-white/10 text-white placeholder:text-green-200/40 text-sm focus:outline-none focus:border-green-400"
+          className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder:text-slate-400 text-sm focus:outline-none focus:border-green-400"
         />
       </div>
 
@@ -192,13 +192,13 @@ export default function AdminAuditReportsPage() {
 
       {/* Pagination */}
       {Math.ceil(total / PAGE) > 1 && (
-        <div className="mt-5 flex items-center justify-between text-white">
-          <p className="text-sm text-green-200/60">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
+        <div className="mt-5 flex items-center justify-between">
+          <p className="text-sm text-slate-500">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
           <div className="flex gap-2">
             <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">← Prev</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">← Prev</button>
             <button onClick={() => setPage((p) => p + 1)} disabled={(page + 1) * PAGE >= total}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">Next →</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">Next →</button>
           </div>
         </div>
       )}
diff --git a/app/(admin)/admin/lgas/page.tsx b/app/(admin)/admin/lgas/page.tsx
index f47ac93..2932408 100644
--- a/app/(admin)/admin/lgas/page.tsx
+++ b/app/(admin)/admin/lgas/page.tsx
@@ -637,7 +637,7 @@ export default function AdminLGAsPage() {
           <div className="flex gap-2">
             <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}
               className="px-4 py-2 rounded-xl border border-slate-200 text-sm disabled:opacity-40 hover:border-green-400 transition-colors">
-              ← Prev
+              ← Prev
             </button>
             <button onClick={() => setPage((p) => p + 1)} disabled={(page + 1) * PAGE >= total}
               className="px-4 py-2 rounded-xl border border-slate-200 text-sm disabled:opacity-40 hover:border-green-400 transition-colors">
diff --git a/app/(admin)/admin/live-streams/page.tsx b/app/(admin)/admin/live-streams/page.tsx
index c6ab91e..91768c9 100644
--- a/app/(admin)/admin/live-streams/page.tsx
+++ b/app/(admin)/admin/live-streams/page.tsx
@@ -125,15 +125,15 @@ export default function AdminLiveStreamsPage() {
       <div className="mb-6 flex items-start justify-between gap-4">
         <div>
           <div className="flex items-center gap-2 mb-1">
-            <Radio className="h-5 w-5 text-green-400" />
-            <h1 className="text-2xl font-bold text-white">Live Streams</h1>
+            <Radio className="h-5 w-5 text-green-600" />
+            <h1 className="text-2xl font-bold text-slate-900">Live Streams</h1>
             {liveCount > 0 && (
               <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500 text-white text-xs font-bold">
                 <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" /> {liveCount} LIVE
               </span>
             )}
           </div>
-          <p className="text-green-200/60 text-sm">{streams.length} total streams</p>
+          <p className="text-slate-500 text-sm">{streams.length} total streams</p>
         </div>
         <button onClick={() => setShowForm(true)}
           className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-green-600 hover:bg-green-700 text-white text-sm font-semibold">
diff --git a/app/(admin)/admin/press-releases/page.tsx b/app/(admin)/admin/press-releases/page.tsx
index 8f59636..80d6819 100644
--- a/app/(admin)/admin/press-releases/page.tsx
+++ b/app/(admin)/admin/press-releases/page.tsx
@@ -155,13 +155,13 @@ export default function AdminPressReleasesPage() {
       <div className="mb-6 flex items-start justify-between gap-4">
         <div className="min-w-0">
           <div className="flex items-center gap-2 mb-1">
-            <Newspaper className="h-5 w-5 text-green-400 shrink-0" />
-            <h1 className="text-2xl font-bold text-white">Press Releases</h1>
+            <Newspaper className="h-5 w-5 text-green-600 shrink-0" />
+            <h1 className="text-2xl font-bold text-slate-900">Press Releases</h1>
             {pendingCount > 0 && (
               <span className="px-2 py-0.5 rounded-full bg-amber-500 text-white text-xs font-bold">{pendingCount} pending</span>
             )}
           </div>
-          <p className="text-green-200/60 text-sm">{total.toLocaleString()} total records</p>
+          <p className="text-slate-500 text-sm">{total.toLocaleString()} total records</p>
         </div>
         <button onClick={() => setShowForm(true)}
           className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-green-600 hover:bg-green-700 text-white text-sm font-semibold shrink-0">
@@ -174,13 +174,13 @@ export default function AdminPressReleasesPage() {
         <div className="relative flex-1 min-w-[200px]">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
           <input type="text" placeholder="Search title or entity…" value={q} onChange={(e) => setQ(e.target.value)}
-            className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-white/20 bg-white/10 text-white placeholder:text-green-200/40 text-sm focus:outline-none focus:border-green-400" />
+            className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder:text-slate-400 text-sm focus:outline-none focus:border-green-400" />
         </div>
         <div className="flex gap-2 flex-wrap">
           {(["", "PENDING", "PUBLISHED", "REJECTED"] as const).map((s) => (
             <button key={s} onClick={() => { setStatusFilter(s); setPage(0); }}
               className={`px-3 py-2 rounded-xl text-xs font-semibold border transition-colors ${
-                statusFilter === s ? "bg-green-600 text-white border-green-600" : "border-white/20 text-green-200/70 hover:bg-white/10"
+                statusFilter === s ? "bg-green-600 text-white border-green-600" : "border-slate-200 text-slate-500 hover:bg-slate-50"
               }`}>{s === "" ? "All" : s.charAt(0) + s.slice(1).toLowerCase()}</button>
           ))}
         </div>
@@ -265,13 +265,13 @@ export default function AdminPressReleasesPage() {
 
       {/* Pagination */}
       {Math.ceil(total / PAGE) > 1 && (
-        <div className="mt-5 flex items-center justify-between text-white">
-          <p className="text-sm text-green-200/60">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
+        <div className="mt-5 flex items-center justify-between">
+          <p className="text-sm text-slate-500">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
           <div className="flex gap-2">
             <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">← Prev</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">← Prev</button>
             <button onClick={() => setPage((p) => p + 1)} disabled={(page + 1) * PAGE >= total}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">Next →</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">Next →</button>
           </div>
         </div>
       )}
diff --git a/app/(admin)/admin/procurement/page.tsx b/app/(admin)/admin/procurement/page.tsx
index 7f7da0e..115cf25 100644
--- a/app/(admin)/admin/procurement/page.tsx
+++ b/app/(admin)/admin/procurement/page.tsx
@@ -124,10 +124,10 @@ export default function AdminProcurementPage() {
       <div className="mb-6 flex items-start justify-between gap-4">
         <div className="min-w-0">
           <div className="flex items-center gap-2 mb-1">
-            <FileText className="h-5 w-5 text-green-400 shrink-0" />
-            <h1 className="text-2xl font-bold text-white">Procurement Contracts</h1>
+            <FileText className="h-5 w-5 text-green-600 shrink-0" />
+            <h1 className="text-2xl font-bold text-slate-900">Procurement Contracts</h1>
           </div>
-          <p className="text-green-200/60 text-sm">{total.toLocaleString()} contract records</p>
+          <p className="text-slate-500 text-sm">{total.toLocaleString()} contract records</p>
         </div>
         <button
           onClick={() => setShowForm(true)}
@@ -143,7 +143,7 @@ export default function AdminProcurementPage() {
         <input
           type="text" placeholder="Search title or contractor…"
           value={search} onChange={(e) => setSearch(e.target.value)}
-          className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-white/20 bg-white/10 text-white placeholder:text-green-200/40 text-sm focus:outline-none focus:border-green-400"
+          className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder:text-slate-400 text-sm focus:outline-none focus:border-green-400"
         />
       </div>
 
@@ -192,13 +192,13 @@ export default function AdminProcurementPage() {
 
       {/* Pagination */}
       {Math.ceil(total / PAGE) > 1 && (
-        <div className="mt-5 flex items-center justify-between text-white">
-          <p className="text-sm text-green-200/60">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
+        <div className="mt-5 flex items-center justify-between">
+          <p className="text-sm text-slate-500">Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}</p>
           <div className="flex gap-2">
             <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">← Prev</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">← Prev</button>
             <button onClick={() => setPage((p) => p + 1)} disabled={(page + 1) * PAGE >= total}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">Next →</button>
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">Next →</button>
           </div>
         </div>
       )}
@@ -254,7 +254,7 @@ export default function AdminProcurementPage() {
                 {[
                   { key: "title",      label: "Contract Title *",  placeholder: "e.g. Construction of Ward 3 Road" },
                   { key: "contractor", label: "Contractor Name *", placeholder: "e.g. ABC Construction Ltd" },
-                  { key: "value",      label: "Contract Value (₦) *", placeholder: "e.g. 15000000" },
+                  { key: "value",      label: "Contract Value (₦) *", placeholder: "e.g. 15000000" },
                 ].map(({ key, label, placeholder }) => (
                   <div key={key}>
                     <label className="text-xs font-semibold text-slate-700 block mb-1.5">{label}</label>
diff --git a/app/(admin)/admin/revenue/page.tsx b/app/(admin)/admin/revenue/page.tsx
index 3337047..07455b3 100644
--- a/app/(admin)/admin/revenue/page.tsx
+++ b/app/(admin)/admin/revenue/page.tsx
@@ -166,7 +166,7 @@ export default function AdminRevenuePage() {
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
               <XAxis dataKey="date" tick={{ fontSize: 11 }} />
-              <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `₦${(v / 1000).toFixed(0)}k`} />
+              <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `₦${(v / 1000).toFixed(0)}k`} />
               <Tooltip
                 formatter={(value) =>
                   new Intl.NumberFormat("en-NG", {
diff --git a/app/(admin)/admin/users/page.tsx b/app/(admin)/admin/users/page.tsx
index 4cce163..4bc0578 100644
--- a/app/(admin)/admin/users/page.tsx
+++ b/app/(admin)/admin/users/page.tsx
@@ -132,18 +132,18 @@ export default function AdminUsersPage() {
     <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
       <div className="mb-6">
         <div className="flex items-center gap-2 mb-1">
-          <Users className="h-5 w-5 text-green-400" />
-          <h1 className="text-2xl font-bold text-white">User Management</h1>
+          <Users className="h-5 w-5 text-green-600" />
+          <h1 className="text-2xl font-bold text-slate-900">User Management</h1>
         </div>
-        <p className="text-green-200/60 text-sm">{total.toLocaleString()} total accounts</p>
+        <p className="text-slate-500 text-sm">{total.toLocaleString()} total accounts</p>
       </div>
 
       {/* Role tabs */}
-      <div className="flex gap-1 bg-white/10 p-1 rounded-xl mb-4 overflow-x-auto">
+      <div className="flex gap-1 bg-slate-100 p-1 rounded-xl mb-4 overflow-x-auto">
         {ROLE_TABS.map(({ label, value }) => (
           <button key={value} onClick={() => setRoleTab(value)}
             className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
-              roleTab === value ? "bg-green-600 text-white" : "text-green-100/70 hover:bg-white/10 hover:text-white"
+              roleTab === value ? "bg-white shadow-sm text-slate-900" : "text-slate-500 hover:bg-white/60"
             }`}>
             {label}
           </button>
@@ -157,15 +157,15 @@ export default function AdminUsersPage() {
           <input
             type="text" placeholder="Search name or email…"
             value={search} onChange={(e) => setSearch(e.target.value)}
-            className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-white/20 bg-white/10 text-white placeholder:text-green-200/40 text-sm focus:outline-none focus:border-green-400"
+            className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 bg-white text-slate-800 placeholder:text-slate-400 text-sm focus:outline-none focus:border-green-400"
           />
         </div>
         <select value={status} onChange={(e) => setStatus(e.target.value as StatusFilter)}
-          className="px-3 py-2.5 rounded-xl border border-white/20 bg-white/10 text-sm text-white focus:outline-none focus:border-green-400">
-          <option value="ALL" className="text-slate-900">All Status</option>
-          <option value="ACTIVE" className="text-slate-900">Active</option>
-          <option value="BANNED" className="text-slate-900">Banned</option>
-          <option value="SUSPENDED" className="text-slate-900">Suspended</option>
+          className="px-3 py-2.5 rounded-xl border border-slate-200 bg-white text-sm text-slate-700 focus:outline-none focus:border-green-400">
+          <option value="ALL">All Status</option>
+          <option value="ACTIVE">Active</option>
+          <option value="BANNED">Banned</option>
+          <option value="SUSPENDED">Suspended</option>
         </select>
       </div>
 
@@ -192,27 +192,29 @@ export default function AdminUsersPage() {
           <div className="divide-y divide-slate-100">
             {users.map((user) => (
               <div key={user.id}>
-                <div className="flex items-center gap-4 px-5 py-3.5 hover:bg-slate-50 transition-colors">
-                  {/* Avatar */}
-                  <div className="h-9 w-9 rounded-full bg-green-100 flex items-center justify-center text-green-700 font-bold text-sm shrink-0">
-                    {user.name.charAt(0).toUpperCase()}
-                  </div>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3.5 hover:bg-slate-50 transition-colors">
+                  <div className="flex items-center gap-3 min-w-0">
+                    {/* Avatar */}
+                    <div className="h-9 w-9 rounded-full bg-green-100 flex items-center justify-center text-green-700 font-bold text-sm shrink-0">
+                      {user.name.charAt(0).toUpperCase()}
+                    </div>
 
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-sm font-semibold text-slate-900 truncate">{user.name}</span>
-                      <RoleBadge role={user.role} />
-                      {user.isBanned && (
-                        <span className="px-1.5 py-0.5 rounded text-xs bg-red-100 text-red-700 font-semibold">BANNED</span>
-                      )}
-                      {!user.isBanned && user.suspendedUntil && new Date(user.suspendedUntil) > new Date() && (
-                        <span className="px-1.5 py-0.5 rounded text-xs bg-orange-100 text-orange-700 font-semibold">SUSPENDED</span>
-                      )}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-semibold text-slate-900 truncate">{user.name}</span>
+                        <RoleBadge role={user.role} />
+                        {user.isBanned && (
+                          <span className="px-1.5 py-0.5 rounded text-xs bg-red-100 text-red-700 font-semibold">BANNED</span>
+                        )}
+                        {!user.isBanned && user.suspendedUntil && new Date(user.suspendedUntil) > new Date() && (
+                          <span className="px-1.5 py-0.5 rounded text-xs bg-orange-100 text-orange-700 font-semibold">SUSPENDED</span>
+                        )}
+                      </div>
+                      <p className="text-xs text-slate-400 mt-0.5 truncate">{user.email}</p>
                     </div>
-                    <p className="text-xs text-slate-400 mt-0.5 truncate">{user.email}</p>
                   </div>
 
-                  <div className="flex items-center gap-1.5 shrink-0">
+                  <div className="flex items-center gap-1.5 flex-wrap sm:justify-end sm:shrink-0">
                     {user.isBanned ? (
                       <button onClick={() => runAction(user.id, "activate")} disabled={acting === user.id}
                         className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-green-700 hover:bg-green-800 text-white text-xs font-semibold disabled:opacity-40">
@@ -273,17 +275,17 @@ export default function AdminUsersPage() {
 
       {/* Pagination */}
       {Math.ceil(total / PAGE) > 1 && (
-        <div className="mt-5 flex items-center justify-between text-white">
-          <p className="text-sm text-green-200/60">
+        <div className="mt-5 flex items-center justify-between">
+          <p className="text-sm text-slate-500">
             Showing {page * PAGE + 1}–{Math.min((page + 1) * PAGE, total)} of {total}
           </p>
           <div className="flex gap-2">
             <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">
-              ← Prev
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">
+              ← Prev
             </button>
             <button onClick={() => setPage((p) => p + 1)} disabled={(page + 1) * PAGE >= total}
-              className="px-4 py-2 rounded-xl border border-white/20 text-sm disabled:opacity-40 hover:bg-white/10">
+              className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm disabled:opacity-40 hover:bg-slate-50">
               Next →
             </button>
           </div>