add: dev compose, fix: ui bugs on vendor

docker-compose.dev.yml

@@ -0,0 +1,15 @@
+services:
+  app:
+    environment:
+      NODE_ENV: development
+      WATCHPACK_POLLING: "true"
+    command: sh -c "npm install && npm run dev"
+    volumes:
+      - .:/app
+      - app_node_modules:/app/node_modules
+      - app_next:/app/.next
+    restart: unless-stopped
+
+volumes:
+  app_node_modules:
+  app_next:

next.config.ts

@@ -48,6 +48,10 @@ const nextConfig: NextConfig = {
   allowedDevOrigins: [
     "https://precontributive-tribally-dione.ngrok-free.dev",
     "https://*.ngrok-free.dev",
+    "https://*.ngrok-free.app",
+    "https://brave-destined-gelding.ngrok-free.app",
+    "brave-destined-gelding.ngrok-free.app",
+    "*.ngrok-free.app",
     "https://*.ngrok.io",
   ],
   reactCompiler: true,

saad.commands

@@ -0,0 +1,3 @@
+docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build
+
+docker compose -f docker-compose.yml -f docker-compose.dev.yml down

src/app/dashboard/orders/[orderId]/page.tsx

@@ -169,8 +169,8 @@ export default function OrderDetailsPage() {
                     {/* Order Summary & Status - Symmetric Top Grid */}
                     <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
                         {/* Order Date */}
-                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col justify-between">
+                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col gap-3">
-                            <div className="flex items-center gap-2 text-slate-400 mb-3">
+                            <div className="flex items-center gap-2 text-slate-400 mb-0">
                                 <Calendar className="w-4 h-4" />
                                 <span className="text-xs font-bold uppercase tracking-wider">Order Date</span>
                             </div>
@@ -180,8 +180,8 @@ export default function OrderDetailsPage() {
                         </div>
 
                         {/* Total Amount */}
-                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col justify-between">
+                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col gap-3">
-                            <div className="flex items-center gap-2 text-slate-400 mb-3">
+                            <div className="flex items-center gap-2 text-slate-400 mb-0">
                                 <DollarSign className="w-4 h-4" />
                                 <span className="text-xs font-bold uppercase tracking-wider">Total Amount</span>
                             </div>
@@ -191,13 +191,13 @@ export default function OrderDetailsPage() {
                         </div>
 
                         {/* Payment Status */}
-                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col justify-between">
+                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col gap-3">
-                            <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">
+                            <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block">
                                 Payment Status
                             </span>
                             <div>
                                 <span
-                                    className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${
+                                    className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 whitespace-nowrap ${
                                         order.financial_status === "paid"
                                             ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
                                             : "bg-red-500/20 text-red-400 border border-red-500/30"
@@ -210,13 +210,13 @@ export default function OrderDetailsPage() {
                         </div>
 
                         {/* Fulfillment Status */}
-                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col justify-between">
+                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 flex flex-col gap-3">
-                            <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">
+                            <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block">
                                 Fulfillment Status
                             </span>
                             <div>
                                 <span
-                                    className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${
+                                    className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 whitespace-nowrap ${
                                         order.fulfillment_status === "fulfilled"
                                             ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
                                             : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
@@ -236,7 +236,7 @@ export default function OrderDetailsPage() {
                     {/* Main Content Grid */}
                     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                         {/* Left Column - Customer & Shipping */}
-                        <div className="lg:col-span-1 space-y-6">
+                        <div className="lg:col-span-1 space-y-6 min-w-0">
                             {/* Customer — always shown; placeholder when nothing is linked */}
                             <div className="bg-white/5 rounded-xl p-5 border border-white/10">
                                 <div className="flex items-center gap-2 text-slate-400 mb-4">
@@ -295,11 +295,10 @@ export default function OrderDetailsPage() {
                                 </div>
                             )}
                         </div>
-                    </div>
 
-                    {/* Centered Order Items Card */}
+                        {/* Middle Column - Order Items */}
-                    <div className="mt-6 max-w-5xl mx-auto w-full">
+                        <div className="lg:col-span-2 min-w-0">
-                        <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                            <div className="bg-white/5 rounded-xl p-5 border border-white/10 w-full">
                             <div className="flex items-center gap-2 text-slate-400 mb-5">
                                 <Package className="w-4 h-4" />
                                 <span className="text-xs font-bold uppercase tracking-wider">Order Items</span>
@@ -373,9 +372,10 @@ export default function OrderDetailsPage() {
                                 <p className="text-slate-300 text-sm leading-relaxed">{order.note}</p>
                             </div>
                         )}
+                        </div>
+                    </div>
                     </div>
                 </div>
             </div>
-        </div>
     )
 }

src/app/globals.css

@@ -26,9 +26,10 @@ html[data-theme="light"] {
   --background: #f8fafc;
   --foreground: #020617;
   --primary: var(--color-indigo-accent);
-  --glass-bg: rgba(255, 255, 255, 0.9);
+  /* Slightly darker glass so containers/text contrast stays crisp in light mode */
-  --glass-border: rgba(148, 163, 184, 0.35);
+  --glass-bg: rgba(255, 255, 255, 0.82);
-  --glass-card: rgba(255, 255, 255, 0.95);
+  --glass-border: rgba(148, 163, 184, 0.55);
+  --glass-card: rgba(255, 255, 255, 0.88);
   --dashboard-bg: #f9fafb;
   --dashboard-mesh: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(191, 219, 254, 0.6), transparent),
     radial-gradient(ellipse 60% 40% at 100% 50%, rgba(221, 214, 254, 0.5), transparent),
@@ -99,6 +100,14 @@ html[data-theme="light"] .text-slate-200 {
   color: #374151 !important;
 }
 
+html[data-theme="light"] .text-slate-500 {
+  color: #475569 !important;
+}
+
+html[data-theme="light"] .text-slate-600 {
+  color: #334155 !important;
+}
+
 /* Sidebar & header backgrounds in light mode */
 html[data-theme="light"] .bg-slate-900\/70 {
   background-color: rgba(255, 255, 255, 0.98) !important;
@@ -112,11 +121,57 @@ html[data-theme="light"] .bg-slate-900\/50 {
 
 /* Small chips / badges that were pure white text */
 html[data-theme="light"] .bg-white\/10 {
-  background-color: rgba(15, 23, 42, 0.04);
+  /* Darken a bit for better legibility on glass */
+  background-color: rgba(15, 23, 42, 0.065) !important;
+}
+
+html[data-theme="light"] .border-white\/10 {
+  border-color: rgba(148, 163, 184, 0.45) !important;
 }
 
 html[data-theme="light"] .bg-white\/5 {
-  background-color: rgba(15, 23, 42, 0.03);
+  background-color: rgba(15, 23, 42, 0.045) !important;
+}
+
+html[data-theme="light"] .border-white\/5 {
+  border-color: rgba(148, 163, 184, 0.25) !important;
+}
+
+/* ------------------------------ */
+/* Dark mode contrast improvements */
+/* ------------------------------ */
+/* Many components use Tailwind text/border colors (e.g. text-slate-400)
+   on top of glass backgrounds (bg-white/5, border-white/10). In dark mode
+   some of these become too low-contrast, so we raise their readability
+   globally without touching component logic. */
+html:not([data-theme="light"]) .text-slate-400 {
+  color: #cbd5e1 !important;
+}
+html:not([data-theme="light"]) .text-slate-500 {
+  color: #94a3b8 !important;
+}
+html:not([data-theme="light"]) .text-slate-300 {
+  color: #e2e8f0 !important;
+}
+html:not([data-theme="light"]) .text-slate-200 {
+  color: #e5e7eb !important;
+}
+html:not([data-theme="light"]) .text-slate-600 {
+  color: #a3b3c6 !important;
+}
+
+/* Make glass container backgrounds and borders more visible */
+html:not([data-theme="light"]) .bg-white\/5 {
+  background-color: rgba(255, 255, 255, 0.065) !important;
+}
+html:not([data-theme="light"]) .bg-white\/10 {
+  background-color: rgba(255, 255, 255, 0.125) !important;
+}
+html:not([data-theme="light"]) .border-white\/5 {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+}
+html:not([data-theme="light"]) .border-white\/10 {
+  border-color: rgba(148, 163, 184, 0.42) !important;
 }
 
 

src/components/Sidebar.tsx

@@ -99,6 +99,10 @@ export function Sidebar({ showLogo = true, className }: SidebarProps) {
     const pathname = usePathname()
     const { theme } = useTheme()
     const isLight = theme === "light"
+    const isRouteActive = (href: string) => {
+        if (href === "/dashboard") return pathname === "/dashboard"
+        return pathname === href || pathname.startsWith(`${href}/`)
+    }
 
     return (
         <div className={cn(
@@ -131,10 +135,10 @@ export function Sidebar({ showLogo = true, className }: SidebarProps) {
                             className={cn(
                                 "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer rounded-xl transition-all duration-200 ease-out border border-transparent",
                                 isLight
-                                    ? pathname.startsWith(route.href)
+                                    ? isRouteActive(route.href)
                                         ? "text-indigo-600 bg-indigo-50 border-indigo-100"
                                         : "text-slate-600 hover:text-indigo-600 hover:bg-slate-50"
-                                    : pathname.startsWith(route.href)
+                                    : isRouteActive(route.href)
                                         ? "text-white bg-white/10 border-white/10"
                                         : "text-slate-400 hover:text-white hover:bg-white/10"
                             )}
@@ -144,7 +148,7 @@ export function Sidebar({ showLogo = true, className }: SidebarProps) {
                                 {route.label}
                             </div>
                         </Link>
-                        {route.subRoutes && pathname.startsWith(route.href) && (
+                        {route.subRoutes && isRouteActive(route.href) && (
                             <div className="ml-8 mt-1 space-y-1">
                                 {route.subRoutes.map((sub) => (
                                     <Link