DevOps/JUNOHUB-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: dev compose, fix: ui bugs on vendor

Browse Source
This commit is contained in:
Saad Mohsin 2026-03-31 16:48:17 +05:00
parent 508dbab7d4
commit 036ad53acb
6 changed files with 105 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docker-compose.dev.yml Normal file
View File

@ -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:

4
next.config.ts
View File

@ -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,

3
saad.commands Normal file
View File

@ -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

30
src/app/dashboard/orders/[orderId]/page.tsx
View File

@ -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="flex items-center gap-2 text-slate-400 mb-3">
<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-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="flex items-center gap-2 text-slate-400 mb-3">
<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-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">
<span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">
<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">
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">
<span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">
<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">
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 */}
<div className="mt-6 max-w-5xl mx-auto w-full">
<div className="bg-white/5 rounded-xl p-5 border border-white/10">
{/* Middle Column - Order Items */}
<div className="lg:col-span-2 min-w-0">
<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>
@ -377,5 +376,6 @@ export default function OrderDetailsPage() {
</div>
</div>
</div>
</div>
)
}

65
src/app/globals.css
View File

@ -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);
--glass-border: rgba(148, 163, 184, 0.35);
--glass-card: rgba(255, 255, 255, 0.95);
/* Slightly darker glass so containers/text contrast stays crisp in light mode */
--glass-bg: rgba(255, 255, 255, 0.82);
--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;
}

10
src/components/Sidebar.tsx
View File

@ -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