From a264523e12951dc6f77459ed598849ca192a7cef Mon Sep 17 00:00:00 2001 From: Admin Date: Wed, 29 Apr 2026 01:22:53 +0330 Subject: [PATCH] bugfix: the whole theming structure overhauled. light/dark mode icon added. --- frontend/src/app/(dashboard)/billing/page.tsx | 68 +++++----- frontend/src/app/(dashboard)/layout.tsx | 34 ++--- frontend/src/app/(dashboard)/today/page.tsx | 14 +- frontend/src/app/(public)/login/page.tsx | 38 +++--- frontend/src/app/(public)/page.tsx | 29 ++-- frontend/src/app/(public)/register/page.tsx | 64 +++++---- .../app/(public)/select-organization/page.tsx | 20 ++- frontend/src/app/layout.tsx | 10 +- frontend/src/components/ui/Badge.tsx | 8 +- frontend/src/components/ui/Button.tsx | 12 +- frontend/src/components/ui/Input.tsx | 12 +- .../src/components/ui/OrganizationCard.tsx | 14 +- frontend/src/components/ui/Sidebar.tsx | 16 +-- frontend/src/components/ui/ThemeToggle.tsx | 47 +++++++ frontend/src/lib/theme.ts | 30 ++++ frontend/src/styles/background-web.css | 59 ++++++++ frontend/src/styles/globals.css | 128 ++++++++++++++++-- frontend/src/styles/tokens.ts | 15 -- frontend/tailwind.config.ts | 19 --- frontend/tsconfig.json | 2 +- 20 files changed, 422 insertions(+), 217 deletions(-) create mode 100644 frontend/src/components/ui/ThemeToggle.tsx create mode 100644 frontend/src/lib/theme.ts create mode 100644 frontend/src/styles/background-web.css delete mode 100644 frontend/src/styles/tokens.ts delete mode 100644 frontend/tailwind.config.ts diff --git a/frontend/src/app/(dashboard)/billing/page.tsx b/frontend/src/app/(dashboard)/billing/page.tsx index c3fd3c1..a43a2d3 100644 --- a/frontend/src/app/(dashboard)/billing/page.tsx +++ b/frontend/src/app/(dashboard)/billing/page.tsx @@ -37,9 +37,9 @@ export default function BillingPage() {
{/* Header */}
-

Billing

+

Billing

@@ -71,14 +71,14 @@ export default function BillingPage() { />
{/* Filters */} -
+
setSearch(e.target.value)} - icon={} + icon={} />
@@ -86,9 +86,9 @@ export default function BillingPage() {
{/* Invoices Table - Matching your design */} -
+
- + - - - - - - - - - + {invoices.map((invoice) => ( - - + - - - - - @@ -167,14 +167,14 @@ export default function BillingPage() {
+ Invoice ID + Patient name + Date + Service + Total amount + Paid + Status + Action
+
{invoice.id} + {invoice.patient} + {invoice.date} + {invoice.service} + ${invoice.amount} + ${invoice.paid} @@ -158,7 +158,7 @@ export default function BillingPage() { -
{/* Pagination - Matching your design */} -
- -
+
Page 1 of 10
-
@@ -184,10 +184,10 @@ export default function BillingPage() { } function StatCard({ title, count, amount, color }: StatCardProps) { const colors: Record = { - blue: 'bg-blue-50 text-blue-700 border-blue-200', - yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200', - green: 'bg-green-50 text-green-700 border-green-200', - red: 'bg-red-50 text-red-700 border-red-200', + blue: 'bg-sky-900/30 text-sky-300 border-sky-700/60', + yellow: 'bg-amber-900/30 text-amber-300 border-amber-700/60', + green: 'bg-emerald-900/30 text-emerald-300 border-emerald-700/60', + red: 'bg-red-950/30 text-red-300 border-red-700/60', }; return ( diff --git a/frontend/src/app/(dashboard)/layout.tsx b/frontend/src/app/(dashboard)/layout.tsx index 446fdc3..be84b47 100644 --- a/frontend/src/app/(dashboard)/layout.tsx +++ b/frontend/src/app/(dashboard)/layout.tsx @@ -4,18 +4,13 @@ import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/lib/hooks/useAuth'; import Sidebar from '@/components/ui/Sidebar'; +import { ThemeToggle } from '@/components/ui/ThemeToggle'; import { LogOut } from 'lucide-react'; export default function DashboardLayout({ children }: { children: React.ReactNode }) { const { user, currentOrganization, isAuthReady, logout } = useAuth(); const router = useRouter(); - console.log('LAYOUT STATE:', { - user, - currentOrganization, - isAuthReady - }); - // ✅ AUTH GUARD (runs once per navigation group) useEffect(() => { if (!isAuthReady) return; @@ -34,7 +29,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod // ✅ LOADING ONLY FOR INITIAL LOAD if (!isAuthReady) { return ( -
+
Loading app...
); @@ -42,30 +37,37 @@ export default function DashboardLayout({ children }: { children: React.ReactNod if (!user || !currentOrganization) { return ( -
+
Loading workspace...
); } return ( -
+
-
-

{currentOrganization.name}

+
+

{currentOrganization.name}

-
- {user.name} -
- {children} {/* 🔥 THIS CHANGES */} +
+ {children} +
diff --git a/frontend/src/app/(dashboard)/today/page.tsx b/frontend/src/app/(dashboard)/today/page.tsx index 704bb9f..5e88ac9 100644 --- a/frontend/src/app/(dashboard)/today/page.tsx +++ b/frontend/src/app/(dashboard)/today/page.tsx @@ -1,17 +1,15 @@ export default function TodayPage() { return (
-

+

Welcome back Babak !!

-
- +
-
); @@ -27,10 +25,10 @@ function Card({ sub?: string; }) { return ( -
-

{title}

-

{value}

- {sub &&

{sub}

} +
+

{title}

+

{value}

+ {sub &&

{sub}

}
); } \ No newline at end of file diff --git a/frontend/src/app/(public)/login/page.tsx b/frontend/src/app/(public)/login/page.tsx index 7a29d2f..b546fa8 100644 --- a/frontend/src/app/(public)/login/page.tsx +++ b/frontend/src/app/(public)/login/page.tsx @@ -107,8 +107,8 @@ // } 'use client'; -import { useState, useEffect } from 'react'; // ← added useEffect -import { useRouter } from 'next/navigation'; // ← added this +import { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; @@ -127,15 +127,14 @@ const loginSchema = z.object({ type LoginForm = z.infer; export default function LoginPage() { - const { login, isLoading, user, isAuthReady } = useAuth(); // ← added user + isAuthReady - const router = useRouter(); // ← added + const { login, isLoading, user, isAuthReady } = useAuth(); + const router = useRouter(); const [error, setError] = useState(null); - // ✅ Redirect if user is already logged in (prevents loop & improves UX) useEffect(() => { if (isAuthReady && user) { - router.push('/today'); // Change to '/select-organization' if you want + router.push('/today'); } }, [user, isAuthReady, router]); @@ -156,34 +155,33 @@ export default function LoginPage() { } }; - // Optional: Show loading state while checking auth if (!isAuthReady) { return ( -
-

Loading...

+
+

Loading...

); } return ( -
+
- DyoLink + DyoLink -

+

Sign in to your account

-

+

Or{' '} - + start your free trial

-
+
} + icon={} /> } + icon={} />
@@ -208,14 +206,14 @@ export default function LoginPage() { id="remember-me" name="remember-me" type="checkbox" - className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded" + className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40" /> -
- + Forgot your password?
diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx index 9b4895a..b05dd4e 100644 --- a/frontend/src/app/(public)/page.tsx +++ b/frontend/src/app/(public)/page.tsx @@ -3,23 +3,24 @@ import Link from 'next/link'; import { useAuth } from '@/lib/hooks/useAuth'; import { Button } from '@/components/ui/Button'; +import { ThemeToggle } from '@/components/ui/ThemeToggle'; import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react'; export default function HomePage() { const { user } = useAuth(); return ( -
+
{/* Header */} -
+
- -
+
DyoLink
-
+
+ {user ? ( @@ -44,7 +45,7 @@ export default function HomePage() {
-

+

Connect Dental Clinics & Labs Seamlessly

@@ -66,32 +67,32 @@ export default function HomePage() { {/* Features */}
} + icon={} title="For Clinics" description="Manage patients, appointments, and send cases to labs instantly." /> } + icon={} title="For Labs" description="Receive cases, track progress, and communicate with clinics." /> } + icon={} title="Team Management" description="Add up to 5 team members during trial. Scale as you grow." /> } + icon={} title="30-Day Trial" description="Full access to all features. No credit card required." /> } + icon={} title="Real-time Updates" description="Get instant notifications on case status changes." /> } + icon={} title="Secure & Compliant" description="HIPAA-compliant with enterprise-grade security." /> @@ -100,7 +101,7 @@ export default function HomePage() { {/* Footer */} -