admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Merge pull request 'bugfix: the whole theming structure overhauled. light/dark mode icon added.' (#2) from bugfix/theming-patched into master

Browse Source 
Reviewed-on: http://178.131.50.201:3000/admin/dyolink/pulls/2
This commit was merged in pull request #2.
This commit is contained in:
admin
2026-04-29 01:46:06 +03:30
parent bdd889ac09 a264523e12
commit 1128fca81a
20 changed files with 422 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/app/(dashboard)/billing/page.tsx
View File

@@ -37,9 +37,9 @@ export default function BillingPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-gray-900">Billing</h1> <h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
<Button variant="primary" className="flex items-center gap-2"> <Button variant="primary" className="flex items-center gap-2">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4 icon-flat" />
New Invoice New Invoice
</Button> </Button>
</div> </div>
@@ -71,14 +71,14 @@ export default function BillingPage() {
/> />
</div> </div>
{/* Filters */} {/* Filters */}
<div className="bg-white p-4 rounded-xl shadow-sm border"> <div className="surface-card p-4">
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="flex-1"> <div className="flex-1">
<Input <Input
placeholder="Search patients..." placeholder="Search patients..."
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
icon={<Search className="h-4 w-4 text-gray-400" />} icon={<Search className="h-4 w-4 icon-flat" />}
/> />
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -86,9 +86,9 @@ export default function BillingPage() {
<button <button
key={status} key={status}
onClick={() => setStatusFilter(status)} onClick={() => setStatusFilter(status)}
className={`px-4 py-2 rounded-lg text-sm font-medium capitalize ${statusFilter === status className={`px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium capitalize border ${statusFilter === status
? 'bg-primary-50 text-primary-700 border border-primary-200' ? 'bg-primary-soft text-primary border-primary/50'
: 'text-gray-600 hover:bg-gray-50' : 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
}`} }`}
> >
{status} {status}
@@ -98,55 +98,55 @@ export default function BillingPage() {
</div> </div>
</div> </div>
{/* Invoices Table - Matching your design */} {/* Invoices Table - Matching your design */}
<div className="bg-white rounded-xl shadow-sm border overflow-hidden"> <div className="surface-card overflow-hidden">
<table className="w-full"> <table className="w-full">
<thead className="bg-gray-50 border-b"> <thead className="bg-background-secondary/70 border-b border-border">
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Invoice ID Invoice ID
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Patient name Patient name
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Date Date
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Service Service
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Total amount Total amount
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Paid Paid
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Status Status
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Action Action
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-border/60">
{invoices.map((invoice) => ( {invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-gray-50"> <tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-gray-900"> <td className="px-6 py-4 text-sm font-medium text-text-primary">
{invoice.id} {invoice.id}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-900"> <td className="px-6 py-4 text-sm text-text-primary">
{invoice.patient} {invoice.patient}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-500"> <td className="px-6 py-4 text-sm text-text-secondary">
{invoice.date} {invoice.date}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-900"> <td className="px-6 py-4 text-sm text-text-primary">
{invoice.service} {invoice.service}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-900"> <td className="px-6 py-4 text-sm text-text-primary">
${invoice.amount} ${invoice.amount}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-900"> <td className="px-6 py-4 text-sm text-text-primary">
${invoice.paid} ${invoice.paid}
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
@@ -158,7 +158,7 @@ export default function BillingPage() {
</Badge> </Badge>
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<button className="text-primary-600 hover:text-primary-800 text-sm"> <button className="text-primary hover:opacity-90 text-sm">
Edit Edit
</button> </button>
</td> </td>
@@ -167,14 +167,14 @@ export default function BillingPage() {
</tbody> </tbody>
</table> </table>
{/* Pagination - Matching your design */} {/* Pagination - Matching your design */}
<div className="px-6 py-4 border-t flex justify-between items-center bg-gray-50"> <div className="px-6 py-4 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
<button className="text-sm text-gray-600 hover:text-gray-900"> <button className="text-sm text-text-secondary hover:text-text-primary">
← Previous ← Previous
</button> </button>
<div className="text-sm text-gray-600"> <div className="text-sm text-text-secondary">
Page 1 of 10 Page 1 of 10
</div> </div>
<button className="text-sm text-gray-600 hover:text-gray-900"> <button className="text-sm text-text-secondary hover:text-text-primary">
Next → Next →
</button> </button>
</div> </div>
@@ -184,10 +184,10 @@ export default function BillingPage() {
} }
function StatCard({ title, count, amount, color }: StatCardProps) { function StatCard({ title, count, amount, color }: StatCardProps) {
const colors: Record<StatCardColor, string> = { const colors: Record<StatCardColor, string> = {
blue: 'bg-blue-50 text-blue-700 border-blue-200', blue: 'bg-sky-900/30 text-sky-300 border-sky-700/60',
yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200', yellow: 'bg-amber-900/30 text-amber-300 border-amber-700/60',
green: 'bg-green-50 text-green-700 border-green-200', green: 'bg-emerald-900/30 text-emerald-300 border-emerald-700/60',
red: 'bg-red-50 text-red-700 border-red-200', red: 'bg-red-950/30 text-red-300 border-red-700/60',
}; };
return ( return (

34
frontend/src/app/(dashboard)/layout.tsx
View File

@@ -4,18 +4,13 @@ import { useEffect } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth'; import { useAuth } from '@/lib/hooks/useAuth';
import Sidebar from '@/components/ui/Sidebar'; import Sidebar from '@/components/ui/Sidebar';
import { ThemeToggle } from '@/components/ui/ThemeToggle';
import { LogOut } from 'lucide-react'; import { LogOut } from 'lucide-react';
export default function DashboardLayout({ children }: { children: React.ReactNode }) { export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const { user, currentOrganization, isAuthReady, logout } = useAuth(); const { user, currentOrganization, isAuthReady, logout } = useAuth();
const router = useRouter(); const router = useRouter();
console.log('LAYOUT STATE:', {
user,
currentOrganization,
isAuthReady
});
// ✅ AUTH GUARD (runs once per navigation group) // ✅ AUTH GUARD (runs once per navigation group)
useEffect(() => { useEffect(() => {
if (!isAuthReady) return; if (!isAuthReady) return;
@@ -34,7 +29,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
// ✅ LOADING ONLY FOR INITIAL LOAD // ✅ LOADING ONLY FOR INITIAL LOAD
if (!isAuthReady) { if (!isAuthReady) {
return ( return (
<div className="h-screen flex items-center justify-center"> <div className="h-screen flex items-center justify-center app-web-bg">
Loading app... Loading app...
</div> </div>
); );
@@ -42,30 +37,37 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
if (!user || !currentOrganization) { if (!user || !currentOrganization) {
return ( return (
<div className="h-screen flex items-center justify-center"> <div className="h-screen flex items-center justify-center app-web-bg">
Loading workspace... Loading workspace...
</div> </div>
); );
} }
return ( return (
<div className="flex h-screen bg-[#020d1a] text-white"> <div className="flex h-screen app-web-bg text-text-primary">
<Sidebar /> <Sidebar />
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<header className="flex justify-between px-6 py-4 border-b border-white/10"> <header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
<h2>{currentOrganization.name}</h2> <h2 className="text-lg font-medium">{currentOrganization.name}</h2>
<div className="flex gap-4"> <div className="flex items-center gap-4">
<span>{user.name}</span> <ThemeToggle />
<button onClick={logout}> <span className="text-sm text-text-secondary">{user.name}</span>
<LogOut /> <button
onClick={logout}
className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
>
<LogOut className="w-4 h-4 icon-flat" />
Logout
</button> </button>
</div> </div>
</header> </header>
<main className="p-6 flex-1 overflow-y-auto"> <main className="p-6 flex-1 overflow-y-auto">
{children} {/* 🔥 THIS CHANGES */} <div className="surface-panel p-6 min-h-full">
{children}
</div>
</main> </main>
</div> </div>
</div> </div>

14
frontend/src/app/(dashboard)/today/page.tsx
View File

@@ -1,17 +1,15 @@
export default function TodayPage() { export default function TodayPage() {
return ( return (
<div> <div>
<h1 className="text-2xl font-bold mb-6"> <h1 className="text-2xl font-semibold mb-6">
Welcome back Babak !! Welcome back Babak !!
</h1> </h1>
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<Card title="Today's Appointments" value="12" sub="Monday 2/5/2026" /> <Card title="Today's Appointments" value="12" sub="Monday 2/5/2026" />
<Card title="Active Patients" value="675" /> <Card title="Active Patients" value="675" />
<Card title="New Lab Case" value="5" sub="35 ↑" /> <Card title="New Lab Case" value="5" sub="35 ↑" />
<Card title="Today invoices" value="1200$" sub="21,300 $" /> <Card title="Today invoices" value="1200$" sub="21,300 $" />
</div> </div>
</div> </div>
); );
@@ -27,10 +25,10 @@ function Card({
sub?: string; sub?: string;
}) { }) {
return ( return (
<div className="bg-white/5 border border-white/10 p-4 rounded-xl"> <div className="surface-card p-4">
<p className="text-sm text-gray-300">{title}</p> <p className="text-sm text-text-secondary">{title}</p>
<p className="text-2xl font-bold mt-2">{value}</p> <p className="text-2xl font-semibold mt-2">{value}</p>
{sub && <p className="text-xs text-gray-400 mt-1">{sub}</p>} {sub && <p className="text-xs text-text-muted mt-1">{sub}</p>}
</div> </div>
); );
} }

38
frontend/src/app/(public)/login/page.tsx
View File

@@ -107,8 +107,8 @@
// } // }
'use client'; 'use client';
import { useState, useEffect } from 'react'; // ← added useEffect import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation'; // ← added this import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod'; import * as z from 'zod';
@@ -127,15 +127,14 @@ const loginSchema = z.object({
type LoginForm = z.infer<typeof loginSchema>; type LoginForm = z.infer<typeof loginSchema>;
export default function LoginPage() { export default function LoginPage() {
const { login, isLoading, user, isAuthReady } = useAuth(); // ← added user + isAuthReady const { login, isLoading, user, isAuthReady } = useAuth();
const router = useRouter(); // ← added const router = useRouter();
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// ✅ Redirect if user is already logged in (prevents loop & improves UX)
useEffect(() => { useEffect(() => {
if (isAuthReady && user) { if (isAuthReady && user) {
router.push('/today'); // Change to '/select-organization' if you want router.push('/today');
} }
}, [user, isAuthReady, router]); }, [user, isAuthReady, router]);
@@ -156,34 +155,33 @@ export default function LoginPage() {
} }
}; };
// Optional: Show loading state while checking auth
if (!isAuthReady) { if (!isAuthReady) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen app-web-bg flex items-center justify-center">
<p>Loading...</p> <p className="text-text-secondary">Loading...</p>
</div> </div>
); );
} }
return ( return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
<Link href="/" className="flex justify-center"> <Link href="/" className="flex justify-center">
<span className="text-3xl font-bold text-primary-600">DyoLink</span> <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
</Link> </Link>
<h2 className="mt-6 text-center text-3xl font-exbol text-gray-900"> <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
Sign in to your account Sign in to your account
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600"> <p className="mt-2 text-center text-sm text-text-secondary">
Or{' '} Or{' '}
<Link href="/register" className="font-medium text-primary-600 hover:text-primary-500"> <Link href="/register" className="font-medium text-primary hover:opacity-90">
start your free trial start your free trial
</Link> </Link>
</p> </p>
</div> </div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div className="surface-card py-8 px-4 sm:px-10">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}> <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
<Input <Input
label="Email address" label="Email address"
@@ -191,7 +189,7 @@ export default function LoginPage() {
type="email" type="email"
placeholder="you@example.com" placeholder="you@example.com"
error={errors.email?.message} error={errors.email?.message}
icon={<Mail className="h-5 w-5 text-gray-400" />} icon={<Mail className="h-5 w-5 icon-flat" />}
/> />
<Input <Input
label="Password" label="Password"
@@ -199,7 +197,7 @@ export default function LoginPage() {
type="password" type="password"
placeholder="••••••••" placeholder="••••••••"
error={errors.password?.message} error={errors.password?.message}
icon={<Lock className="h-5 w-5 text-gray-400" />} icon={<Lock className="h-5 w-5 icon-flat" />}
/> />
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -208,14 +206,14 @@ export default function LoginPage() {
id="remember-me" id="remember-me"
name="remember-me" name="remember-me"
type="checkbox" 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"
/> />
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900"> <label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
Remember me Remember me
</label> </label>
</div> </div>
<div className="text-sm"> <div className="text-sm">
<Link href="/forgot-password" className="font-medium text-primary-600 hover:text-primary-500"> <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
Forgot your password? Forgot your password?
</Link> </Link>
</div> </div>

29
frontend/src/app/(public)/page.tsx
View File

@@ -3,23 +3,24 @@
import Link from 'next/link'; import Link from 'next/link';
import { useAuth } from '@/lib/hooks/useAuth'; import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button'; import { Button } from '@/components/ui/Button';
import { ThemeToggle } from '@/components/ui/ThemeToggle';
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react'; import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
export default function HomePage() { export default function HomePage() {
const { user } = useAuth(); const { user } = useAuth();
return ( return (
<div className="min-h-screen bg-background-primary"> <div className="min-h-screen app-web-bg text-text-primary">
{/* Header */} {/* Header */}
<header className="border-b border-border bg-background-secondary/80 backdrop-blur-sm fixed top-0 w-full z-10"> <header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
<div className="container mx-auto px-4 py-4 flex justify-between items-center"> <div className="container mx-auto px-4 py-4 flex justify-between items-center">
<div className="text-2xl font-semibold text-text-primary">
<div className="text-2xl font-semibold text-primary">
DyoLink DyoLink
</div> </div>
<div className="flex gap-3"> <div className="flex items-center gap-3">
<ThemeToggle />
{user ? ( {user ? (
<Link href="/today"> <Link href="/today">
<Button variant="primary">Dashboard</Button> <Button variant="primary">Dashboard</Button>
@@ -44,7 +45,7 @@ export default function HomePage() {
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-5xl md:text-6xl font-semibold text-text-primary mb-6 leading-tight"> <h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
Connect Dental Clinics & Labs Connect Dental Clinics & Labs
<span className="text-primary"> Seamlessly</span> <span className="text-primary"> Seamlessly</span>
</h1> </h1>
@@ -66,32 +67,32 @@ export default function HomePage() {
{/* Features */} {/* Features */}
<div className="mt-20 grid md:grid-cols-3 gap-6"> <div className="mt-20 grid md:grid-cols-3 gap-6">
<FeatureCard <FeatureCard
icon={<Building2 className="h-6 w-6" />} icon={<Building2 className="h-6 w-6 icon-flat" />}
title="For Clinics" title="For Clinics"
description="Manage patients, appointments, and send cases to labs instantly." description="Manage patients, appointments, and send cases to labs instantly."
/> />
<FeatureCard <FeatureCard
icon={<Beaker className="h-6 w-6" />} icon={<Beaker className="h-6 w-6 icon-flat" />}
title="For Labs" title="For Labs"
description="Receive cases, track progress, and communicate with clinics." description="Receive cases, track progress, and communicate with clinics."
/> />
<FeatureCard <FeatureCard
icon={<Users className="h-6 w-6" />} icon={<Users className="h-6 w-6 icon-flat" />}
title="Team Management" title="Team Management"
description="Add up to 5 team members during trial. Scale as you grow." description="Add up to 5 team members during trial. Scale as you grow."
/> />
<FeatureCard <FeatureCard
icon={<Calendar className="h-6 w-6" />} icon={<Calendar className="h-6 w-6 icon-flat" />}
title="30-Day Trial" title="30-Day Trial"
description="Full access to all features. No credit card required." description="Full access to all features. No credit card required."
/> />
<FeatureCard <FeatureCard
icon={<Clock className="h-6 w-6" />} icon={<Clock className="h-6 w-6 icon-flat" />}
title="Real-time Updates" title="Real-time Updates"
description="Get instant notifications on case status changes." description="Get instant notifications on case status changes."
/> />
<FeatureCard <FeatureCard
icon={<Shield className="h-6 w-6" />} icon={<Shield className="h-6 w-6 icon-flat" />}
title="Secure & Compliant" title="Secure & Compliant"
description="HIPAA-compliant with enterprise-grade security." description="HIPAA-compliant with enterprise-grade security."
/> />
@@ -100,7 +101,7 @@ export default function HomePage() {
</main> </main>
{/* Footer */} {/* Footer */}
<footer className="border-t border-border bg-background-secondary"> <footer className="border-t border-border/70 bg-background-secondary/80">
<div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary"> <div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary">
<div>© 2026 DyoLink. All rights reserved.</div> <div>© 2026 DyoLink. All rights reserved.</div>
@@ -130,7 +131,7 @@ function FeatureCard({
description: string; description: string;
}) { }) {
return ( return (
<div className="bg-background-card border border-border rounded-2xl p-5 transition-all hover:border-primary hover:shadow-[0_0_20px_rgba(0,194,255,0.15)]"> <div className="surface-card p-5 transition-all hover:border-primary/70 hover:shadow-[0_0_20px_rgba(0,194,255,0.12)]">
<div className="text-primary mb-4"> <div className="text-primary mb-4">
{icon} {icon}

64
frontend/src/app/(public)/register/page.tsx
View File

@@ -5,7 +5,6 @@ import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod'; import * as z from 'zod';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react'; import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth'; import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button'; import { Button } from '@/components/ui/Button';
@@ -30,7 +29,6 @@ type RegisterForm = z.infer<typeof registerSchema>;
export default function RegisterPage() { export default function RegisterPage() {
const { registerTrial, isLoading } = useAuth(); const { registerTrial, isLoading } = useAuth();
const router = useRouter();
const [step, setStep] = useState(1); const [step, setStep] = useState(1);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -72,42 +70,42 @@ export default function RegisterPage() {
} }
}; };
return ( return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
<Link href="/" className="flex justify-center"> <Link href="/" className="flex justify-center">
<span className="text-3xl font-bold text-primary-600">DyoLink</span> <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
</Link> </Link>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
Start your 30-day free trial Start your 30-day free trial
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600"> <p className="mt-2 text-center text-sm text-text-secondary">
Already have an account?{' '} Already have an account?{' '}
<Link href="/login" className="font-medium text-primary-600 hover:text-primary-500"> <Link href="/login" className="font-medium text-primary hover:opacity-90">
Sign in Sign in
</Link> </Link>
</p> </p>
</div> </div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div className="surface-card py-8 px-4 sm:px-10">
{/* Progress Steps */} {/* Progress Steps */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-primary-600 text-white' : 'bg-gray-200 text-gray-600'}`}> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
1 1
</div> </div>
<div className={`ml-2 text-sm font-medium ${step >= 1 ? 'text-primary-600' : 'text-gray-500' <div className={`ml-2 text-sm font-medium ${step >= 1 ? 'text-primary' : 'text-text-muted'
}`}> }`}>
Account Account
</div> </div>
</div> </div>
<ChevronRight className="h-5 w-5 text-gray-400" /> <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
<div className="flex items-center"> <div className="flex items-center">
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 2 ? 'bg-primary-600 text-white' : 'bg-gray-200 text-gray-600'}`}> <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 2 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
2 2
</div> </div>
<div className={`ml-2 text-sm font-medium ${step >= 2 ? 'text-primary-600' : 'text-gray-500' <div className={`ml-2 text-sm font-medium ${step >= 2 ? 'text-primary' : 'text-text-muted'
}`}> }`}>
Organization Organization
</div> </div>
@@ -115,10 +113,10 @@ export default function RegisterPage() {
</div> </div>
</div> </div>
{/* Trial Info Banner */} {/* Trial Info Banner */}
<div className="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100"> <div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
<h3 className="text-sm font-medium text-blue-800 mb-2">Your trial <h3 className="text-sm font-medium text-text-primary mb-2">Your trial
includes:</h3> includes:</h3>
<ul className="text-sm text-blue-700 space-y-1"> <ul className="text-sm text-text-secondary space-y-1">
<li className="flex items-center"> <li className="flex items-center">
<span className="mr-2">✓</span> Up to 5 team members <span className="mr-2">✓</span> Up to 5 team members
</li> </li>
@@ -139,7 +137,7 @@ export default function RegisterPage() {
{...register('name')} {...register('name')}
placeholder="John Doe" placeholder="John Doe"
error={errors.name?.message} error={errors.name?.message}
icon={<User className="h-5 w-5 text-gray-400" />} icon={<User className="h-5 w-5 icon-flat" />}
/> />
<Input <Input
label="Email address" label="Email address"
@@ -147,7 +145,7 @@ export default function RegisterPage() {
type="email" type="email"
placeholder="you@example.com" placeholder="you@example.com"
error={errors.email?.message} error={errors.email?.message}
icon={<Mail className="h-5 w-5 text-gray-400" />} icon={<Mail className="h-5 w-5 icon-flat" />}
/> />
<Input <Input
label="Password" label="Password"
@@ -155,7 +153,7 @@ export default function RegisterPage() {
type="password" type="password"
placeholder="••••••••" placeholder="••••••••"
error={errors.password?.message} error={errors.password?.message}
icon={<Lock className="h-5 w-5 text-gray-400" />} icon={<Lock className="h-5 w-5 icon-flat" />}
/> />
<Input <Input
label="Confirm password" label="Confirm password"
@@ -163,7 +161,7 @@ export default function RegisterPage() {
type="password" type="password"
placeholder="••••••••" placeholder="••••••••"
error={errors.confirmPassword?.message} error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 text-gray-400" />} icon={<Lock className="h-5 w-5 icon-flat" />}
/> />
<Button <Button
type="button" type="button"
@@ -182,10 +180,10 @@ export default function RegisterPage() {
{...register('organizationName')} {...register('organizationName')}
placeholder="Sunshine Dental Clinic" placeholder="Sunshine Dental Clinic"
error={errors.organizationName?.message} error={errors.organizationName?.message}
icon={<Building2 className="h-5 w-5 text-gray-400" />} icon={<Building2 className="h-5 w-5 icon-flat" />}
/> />
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-text-secondary mb-2">
Organization type Organization type
</label> </label>
<input type="hidden" {...register('organizationType')} /> <input type="hidden" {...register('organizationType')} />
@@ -195,11 +193,11 @@ export default function RegisterPage() {
onClick={() => { onClick={() => {
setValue('organizationType', 'CLINIC', { shouldValidate: true }); setValue('organizationType', 'CLINIC', { shouldValidate: true });
}} }}
className={`p-4 border rounded-lg text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary-600 bg-primary-50 text-primary-700' className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-gray-300 hover:border-gray-400' : 'border-border text-text-secondary hover:border-border-strong'
}`} }`}
> >
<Building2 className="h-8 w-8 mx-auto mb-2" /> <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
<span className="text-sm font-medium">Dental Clinic</span> <span className="text-sm font-medium">Dental Clinic</span>
</button> </button>
<button <button
@@ -207,12 +205,12 @@ export default function RegisterPage() {
onClick={() => { onClick={() => {
setValue('organizationType', 'LAB', { shouldValidate: true }); setValue('organizationType', 'LAB', { shouldValidate: true });
}} }}
className={`p-4 border rounded-lg text-center transition-colors ${organizationType === 'LAB' className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'LAB'
? 'border-primary-600 bg-primary-50 text-primary-700' ? 'border-primary/60 bg-primary-soft text-text-primary'
: 'border-gray-300 hover:border-gray-400' : 'border-border text-text-secondary hover:border-border-strong'
}`} }`}
> >
<Building2 className="h-8 w-8 mx-auto mb-2" /> <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
<span className="text-sm font-medium">Dental Lab</span> <span className="text-sm font-medium">Dental Lab</span>
</button> </button>
</div> </div>
@@ -221,7 +219,7 @@ export default function RegisterPage() {
)} )}
</div> </div>
{error && ( {error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg"> <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-600">{error}</p> <p className="text-sm text-red-600">{error}</p>
</div> </div>
)} )}
@@ -245,13 +243,13 @@ export default function RegisterPage() {
</> </>
)} )}
</form> </form>
<p className="mt-6 text-xs text-center text-gray-500"> <p className="mt-6 text-xs text-center text-text-muted">
By signing up, you agree to our{' '} By signing up, you agree to our{' '}
<Link href="/terms" className="text-primary-600 hover:text-primary-500"> <Link href="/terms" className="text-primary hover:opacity-90">
Terms of Service Terms of Service
</Link>{' '} </Link>{' '}
and{' '} and{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-500"> <Link href="/privacy" className="text-primary hover:opacity-90">
Privacy Policy Privacy Policy
</Link> </Link>
</p> </p>

20
frontend/src/app/(public)/select-organization/page.tsx
View File

@@ -1,13 +1,11 @@
'use client'; 'use client';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth'; import { useAuth } from '@/lib/hooks/useAuth';
import { Building2, Beaker } from 'lucide-react'; import { Building2, Beaker } from 'lucide-react';
export default function SelectOrganizationPage() { export default function SelectOrganizationPage() {
const { organizations, selectOrganization, isLoading } = useAuth(); const { organizations, selectOrganization, isLoading } = useAuth();
const router = useRouter();
// ✅ Auto-redirect if only one organization // ✅ Auto-redirect if only one organization
useEffect(() => { useEffect(() => {
@@ -18,13 +16,13 @@ export default function SelectOrganizationPage() {
const getIcon = (type: string) => { const getIcon = (type: string) => {
return type === 'CLINIC' return type === 'CLINIC'
? <Building2 className="h-8 w-8" /> ? <Building2 className="h-8 w-8 icon-flat" />
: <Beaker className="h-8 w-8" />; : <Beaker className="h-8 w-8 icon-flat" />;
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">Loading organizations...</p> <p className="text-text-secondary">Loading organizations...</p>
</div> </div>
); );
@@ -32,17 +30,17 @@ export default function SelectOrganizationPage() {
if (!organizations.length) { if (!organizations.length) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">No organizations found.</p> <p className="text-text-secondary">No organizations found.</p>
</div> </div>
); );
} }
return ( return (
<div className="min-h-screen bg-background-secondary flex items-center justify-center p-4"> <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
<div className="max-w-2xl w-full"> <div className="max-w-2xl w-full">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-3xl font-bold text-text-primary"> <h1 className="text-3xl font-semibold text-text-primary">
Choose Organization Choose Organization
</h1> </h1>
<p className="text-text-secondary mt-2"> <p className="text-text-secondary mt-2">
@@ -55,9 +53,9 @@ export default function SelectOrganizationPage() {
<button <button
key={org.id} key={org.id}
onClick={() => selectOrganization(org.id)} onClick={() => selectOrganization(org.id)}
className="bg-white p-6 rounded-xl shadow-sm border border-border hover:border-primary-300 hover:shadow-md transition-all text-left flex items-center gap-4" className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
> >
<div className="p-3 bg-primary-50 rounded-lg text-primary-600"> <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
{getIcon(org.type)} {getIcon(org.type)}
</div> </div>
@@ -70,7 +68,7 @@ export default function SelectOrganizationPage() {
</p> </p>
</div> </div>
<div className="text-primary-600 text-sm"> <div className="text-primary text-sm">
Continue → Continue →
</div> </div>
</button> </button>

10
frontend/src/app/layout.tsx
View File

@@ -1,7 +1,10 @@
// src/app/layout.tsx // src/app/layout.tsx
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import Script from 'next/script';
import '@/styles/globals.css'; import '@/styles/globals.css';
import '@/styles/background-web.css';
import { AuthProvider } from '@/lib/hooks/useAuth'; import { AuthProvider } from '@/lib/hooks/useAuth';
import { THEME_STORAGE_KEY } from '@/lib/theme';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'DyoLink - Dental Clinic & Lab Communication Hub', title: 'DyoLink - Dental Clinic & Lab Communication Hub',
@@ -13,9 +16,14 @@ export default function RootLayout({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const themeInit = `(function(){try{var k=${JSON.stringify(THEME_STORAGE_KEY)};var t=localStorage.getItem(k);document.documentElement.setAttribute('data-theme',t==='light'||t==='dark'?t:'dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body> <body>
<Script id="theme-init" strategy="beforeInteractive">
{themeInit}
</Script>
<AuthProvider> <AuthProvider>
{children} {children}
</AuthProvider> </AuthProvider>

8
frontend/src/components/ui/Badge.tsx
View File

@@ -10,10 +10,10 @@ interface BadgeProps {
} }
const variantStyles: Record<BadgeVariant, string> = { const variantStyles: Record<BadgeVariant, string> = {
success: 'bg-green-50 text-green-700 border-green-200', success: 'bg-emerald-900/30 text-emerald-300 border-emerald-700/60',
warning: 'bg-yellow-50 text-yellow-700 border-yellow-200', warning: 'bg-amber-900/30 text-amber-300 border-amber-700/60',
danger: 'bg-red-50 text-red-700 border-red-200', danger: 'bg-red-950/30 text-red-300 border-red-700/60',
default: 'bg-gray-50 text-gray-700 border-gray-200', default: 'bg-background-secondary text-text-secondary border-border',
}; };
export function Badge({ export function Badge({

12
frontend/src/components/ui/Button.tsx
View File

@@ -24,24 +24,24 @@ export const Button: React.FC<ButtonProps> = ({
...props ...props
}) => { }) => {
const baseClasses = const baseClasses =
'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 ' + 'inline-flex items-center justify-center rounded-[var(--radius-md)] font-medium transition-all duration-200 ' +
'focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed'; 'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed';
const variantClasses: Record<ButtonVariant, string> = { const variantClasses: Record<ButtonVariant, string> = {
primary: primary:
'bg-primary text-black hover:opacity-90', 'bg-primary text-primary-contrast hover:brightness-105 shadow-[0_0_0_1px_var(--color-primary-soft)]',
secondary: secondary:
'bg-background-secondary text-text-primary hover:bg-background-card', 'bg-surface-elevated text-text-primary border border-border hover:border-border-strong',
outline: outline:
'border border-border text-text-primary hover:bg-background-card', 'border border-border text-text-primary hover:bg-background-card/70',
danger: danger:
'bg-red-600 text-white hover:bg-red-700', 'bg-red-600 text-white hover:bg-red-700',
ghost: ghost:
'text-text-secondary hover:bg-background-card', 'text-text-secondary hover:text-text-primary hover:bg-background-card/70',
}; };
const sizeClasses: Record<ButtonSize, string> = { const sizeClasses: Record<ButtonSize, string> = {

12
frontend/src/components/ui/Input.tsx
View File

@@ -25,7 +25,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
<div className="relative"> <div className="relative">
{icon && ( {icon && (
<div className="absolute inset-y-0 left-0 pl-3 flex items-center text-text-secondary pointer-events-none"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center text-text-muted pointer-events-none">
{icon} {icon}
</div> </div>
)} )}
@@ -34,19 +34,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
ref={ref} ref={ref}
id={inputId} id={inputId}
className={` className={`
w-full rounded-lg border w-full rounded-[var(--radius-md)] border
${error ? 'border-red-500' : 'border-border'} ${error ? 'border-red-500' : 'border-border'}
bg-background-secondary text-text-primary bg-background-secondary/90 text-text-primary
${icon ? 'pl-10' : 'pl-4'} pr-4 py-2 ${icon ? 'pl-10' : 'pl-4'} pr-4 py-2
placeholder:text-text-secondary placeholder:text-text-muted
focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:cursor-not-allowed
transition-all duration-200 transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]
${className} ${className}
`} `}

14
frontend/src/components/ui/OrganizationCard.tsx
View File

@@ -18,21 +18,21 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
return ( return (
<button <button
onClick={() => onSelect(organization.id)} onClick={() => onSelect(organization.id)}
className="w-full bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:border-primary-300 hover:shadow-md transition-all text-left flex items-center gap-4 group" className="w-full surface-card p-6 hover:border-primary/60 transition-all text-left flex items-center gap-4 group"
> >
<div className="p-3 bg-primary-50 rounded-lg text-primary-600"> <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
<Icon className="h-8 w-8" /> <Icon className="h-8 w-8 icon-flat" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900">{organization.name}</h3> <h3 className="text-lg font-semibold text-text-primary">{organization.name}</h3>
<p className="text-sm text-gray-500">{typeText}</p> <p className="text-sm text-text-secondary">{typeText}</p>
{organization.plan && ( {organization.plan && (
<p className="text-xs text-gray-400 mt-1"> <p className="text-xs text-text-muted mt-1">
Plan: {organization.plan.name} • {organization.plan.maxUsers} users Plan: {organization.plan.name} • {organization.plan.maxUsers} users
</p> </p>
)} )}
</div> </div>
<ChevronRight className="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors" /> <ChevronRight className="h-5 w-5 icon-flat text-text-muted group-hover:text-primary transition-colors" />
</button> </button>
); );
}; };

16
frontend/src/components/ui/Sidebar.tsx
View File

@@ -26,9 +26,9 @@ export default function Sidebar() {
const router = useRouter(); const router = useRouter();
return ( return (
<aside className="w-64 bg-[#071a2f] text-white flex flex-col p-4"> <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col p-4">
<div className="mb-8"> <div className="mb-6 pb-4 border-b border-border">
<h1 className="text-xl font-bold">DyoLink</h1> <h1 className="text-xl font-semibold tracking-tight">DyoLink</h1>
</div> </div>
<nav className="flex flex-col gap-2"> <nav className="flex flex-col gap-2">
@@ -40,14 +40,14 @@ export default function Sidebar() {
<button <button
key={item.name} key={item.name}
onClick={() => router.push(item.path)} onClick={() => router.push(item.path)}
className={`flex items-center gap-3 p-3 rounded-lg transition ${ className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
isActive isActive
? 'bg-primary-600' ? 'bg-primary-soft border-primary/60 text-text-primary'
: 'hover:bg-white/10' : 'border-border/50 text-text-secondary hover:bg-background-card/70 hover:text-text-primary hover:border-border'
}`} }`}
> >
<Icon className="w-5 h-5" /> <Icon className="w-[18px] h-[18px] icon-flat" />
<span>{item.name}</span> <span className="text-sm">{item.name}</span>
</button> </button>
); );
})} })}

47
frontend/src/components/ui/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,47 @@
'use client';
import { useEffect, useState } from 'react';
import { Moon, Sun } from 'lucide-react';
import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';
export function ThemeToggle() {
const [mode, setMode] = useState<ThemeMode | null>(null);
useEffect(() => {
setMode(getStoredTheme());
}, []);
const handleClick = () => {
const current = getStoredTheme();
const next: ThemeMode = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
setMode(next);
};
if (mode === null) {
return (
<span
className="inline-flex h-9 w-9 shrink-0 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80"
aria-hidden
/>
);
}
const isDark = mode === 'dark';
return (
<button
type="button"
onClick={handleClick}
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
title={isDark ? 'Light mode' : 'Dark mode'}
>
{isDark ? (
<Sun className="h-[18px] w-[18px] icon-flat" />
) : (
<Moon className="h-[18px] w-[18px] icon-flat" />
)}
</button>
);
}

30
frontend/src/lib/theme.ts Normal file
View File

@@ -0,0 +1,30 @@
export const THEME_STORAGE_KEY = 'dyolink-theme';
export type ThemeMode = 'light' | 'dark';
export function getStoredTheme(): ThemeMode {
if (typeof window === 'undefined') return 'dark';
try {
const v = localStorage.getItem(THEME_STORAGE_KEY);
if (v === 'light' || v === 'dark') return v;
} catch {
/* ignore */
}
return 'dark';
}
export function applyTheme(mode: ThemeMode) {
if (typeof document === 'undefined') return;
document.documentElement.setAttribute('data-theme', mode);
try {
localStorage.setItem(THEME_STORAGE_KEY, mode);
} catch {
/* ignore */
}
}
export function toggleTheme(): ThemeMode {
const next: ThemeMode = getStoredTheme() === 'dark' ? 'light' : 'dark';
applyTheme(next);
return next;
}

59
frontend/src/styles/background-web.css Normal file
View File

@@ -0,0 +1,59 @@
.app-web-bg {
position: relative;
isolation: isolate;
background-color: var(--color-background-primary);
overflow: hidden;
}
.app-web-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: calc(var(--web-opacity) * 0.9);
background: radial-gradient(circle at 84% 73%, rgba(12, 126, 196, 0.14), transparent 44%);
}
.app-web-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.96;
background:
/* crisp bright edges (zoomed-out composition) */
linear-gradient(150deg, transparent 77.35%, var(--web-line-strong) 77.48%, var(--web-line-strong) 77.56%, transparent 77.69%),
linear-gradient(122deg, transparent 69.65%, var(--web-line-strong) 69.78%, var(--web-line-strong) 69.86%, transparent 69.99%),
linear-gradient(31deg, transparent 77.75%, var(--web-line-strong) 77.88%, var(--web-line-strong) 77.96%, transparent 78.09%),
linear-gradient(8deg, transparent 80.95%, var(--web-line-strong) 81.08%, var(--web-line-strong) 81.16%, transparent 81.29%),
linear-gradient(171deg, transparent 86.75%, var(--web-line-strong) 86.88%, var(--web-line-strong) 86.96%, transparent 87.09%),
linear-gradient(39deg, transparent 88.45%, var(--web-line-strong) 88.58%, var(--web-line-strong) 88.66%, transparent 88.79%),
/* secondary mesh lines */
linear-gradient(145deg, transparent 75.65%, var(--web-line) 75.77%, var(--web-line) 75.84%, transparent 75.96%),
linear-gradient(18deg, transparent 83.15%, var(--web-line) 83.27%, var(--web-line) 83.34%, transparent 83.46%),
linear-gradient(58deg, transparent 89.25%, var(--web-line) 89.37%, var(--web-line) 89.44%, transparent 89.56%),
linear-gradient(112deg, transparent 81.85%, var(--web-line) 81.97%, var(--web-line) 82.04%, transparent 82.16%),
linear-gradient(176deg, transparent 92.25%, var(--web-line) 92.37%, var(--web-line) 92.44%, transparent 92.56%),
/* compact nodes (less blur) */
radial-gradient(circle at 84% 73%, var(--web-glow) 0 0.12rem, transparent 0.34rem),
radial-gradient(circle at 76.5% 81.5%, var(--web-glow) 0 0.11rem, transparent 0.32rem),
radial-gradient(circle at 92.5% 86.2%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 86.2% 66.8%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 97.2% 58.6%, var(--web-glow) 0 0.08rem, transparent 0.26rem),
radial-gradient(circle at 73.8% 93.1%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
radial-gradient(circle at 88.4% 96.1%, var(--web-glow) 0 0.08rem, transparent 0.26rem);
background-repeat: no-repeat;
background-size: 112% 112%;
background-position: right -4% bottom -4%;
mask-image: linear-gradient(to right, transparent 0 52%, rgba(0, 0, 0, 0.58) 64%, black 76%);
}
@media (max-width: 900px) {
.app-web-bg::after {
background-size: 126% 126%;
background-position: right -14% bottom -6%;
mask-image: linear-gradient(to right, transparent 0 34%, rgba(0, 0, 0, 0.56) 50%, black 66%);
}
}

128
frontend/src/styles/globals.css
View File

@@ -1,40 +1,140 @@
@import "tailwindcss"; @import "tailwindcss";
/* 🎨 Design Tokens (CSS-based, no JS dependency) */ /* Light theme tokens (future-ready) */
:root { :root[data-theme="light"] {
--color-background-primary: #0B1A2B; --radius-sm: 6px;
--color-background-secondary: #0F2236; --radius-md: 8px;
--color-background-card: #132A42; --radius-lg: 12px;
--color-text-primary: #FFFFFF; --color-background-primary: #f6f9fc;
--color-text-secondary: #A0AEC0; --color-background-secondary: #ffffff;
--color-background-card: #ffffff;
--color-surface-elevated: #f8fbff;
--color-border: #1F3A5F; --color-text-primary: #0f172a;
--color-text-secondary: #475569;
--color-text-muted: #64748b;
--color-primary: #009CAE; --color-border: #d2dcec;
--color-border-strong: #aec0de;
--color-primary: #009cae;
--color-primary-contrast: #031014;
--color-primary-soft: rgba(0, 156, 174, 0.16);
--color-icon: #e1bc72;
--web-opacity: 0.12;
--web-line: rgba(0, 188, 255, 0.32);
--web-glow: rgba(0, 188, 255, 0.42);
}
/* Dark theme tokens */
:root[data-theme="dark"] {
--color-background-primary: #000c1c;
--color-background-secondary: #0b1a2b;
--color-background-card: #14253d;
--color-surface-elevated: #1b2f4e;
--color-text-primary: #f5f9ff;
--color-text-secondary: #b6c6dd;
--color-text-muted: #8ea3bf;
--color-border: #29456a;
--color-border-strong: #3b5f8f;
--color-primary: #09a9bc;
--color-primary-contrast: #001117;
--color-primary-soft: rgba(9, 169, 188, 0.2);
--color-icon: #f3bb4b;
}
/* Default theme = dark */
:root {
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--color-background-primary: #000c1c;
--color-background-secondary: #0a1520;
--color-background-card: #14253d;
--color-surface-elevated: #1b2f4e;
--color-text-primary: #f5f9ff;
--color-text-secondary: #b6c6dd;
--color-text-muted: #8ea3bf;
--color-border: #29456a;
--color-border-strong: #3b5f8f;
--color-primary: #09a9bc;
--color-primary-contrast: #001117;
--color-primary-soft: rgba(9, 169, 188, 0.2);
--color-icon: #f3bb4b;
--web-opacity: 0.14;
--web-line: rgba(59, 153, 220, 0.34);
--web-line-strong: rgba(73, 214, 255, 0.78);
--web-glow: rgba(48, 204, 255, 0.55);
} }
/* Tailwind theme mapping */
@theme inline { @theme inline {
--color-background-primary: var(--color-background-primary); --color-background-primary: var(--color-background-primary);
--color-background-secondary: var(--color-background-secondary); --color-background-secondary: var(--color-background-secondary);
--color-background-card: var(--color-background-card); --color-background-card: var(--color-background-card);
--color-surface-elevated: var(--color-surface-elevated);
--color-text-primary: var(--color-text-primary); --color-text-primary: var(--color-text-primary);
--color-text-secondary: var(--color-text-secondary); --color-text-secondary: var(--color-text-secondary);
--color-text-muted: var(--color-text-muted);
--color-border: var(--color-border); --color-border: var(--color-border);
--color-border-strong: var(--color-border-strong);
--color-primary: var(--color-primary); --color-primary: var(--color-primary);
--color-primary-contrast: var(--color-primary-contrast);
--color-primary-soft: var(--color-primary-soft);
} }
/* Base styles */ html,
html, body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
html {
color-scheme: dark;
}
html[data-theme='light'] {
color-scheme: light;
}
body { body {
background-color: #f9fafb; /* light gray */ background-color: var(--color-background-primary);
color: #111827; /* dark text */ color: var(--color-text-primary);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} }
.surface-card {
background: color-mix(in srgb, var(--color-background-card) 92%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.surface-panel {
background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.icon-flat {
stroke-width: 1.9;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Global icon color override (easy to revert) */
.lucide {
color: var(--color-icon);
stroke: currentColor;
}

15
frontend/src/styles/tokens.ts
View File

@@ -1,15 +0,0 @@
export const colors = {
primary: {
DEFAULT: '#00C2FF',
},
background: {
primary: '#0B1A2B',
secondary: '#0F2236',
card: '#132A42',
},
text: {
primary: '#FFFFFF',
secondary: '#A0AEC0',
},
border: '#1F3A5F',
};

19
frontend/tailwind.config.ts
View File

@@ -1,19 +0,0 @@
//import type { Config } from 'tailwindcss';
//import { colors } from './src/styles/tokens';
//const config: Config = {
// content: [
// './src/**/*.{js,ts,jsx,tsx}',
// ],
// theme: {
// extend: {
// colors,
// borderRadius: {
// xl: '12px',
// '2xl': '16px',
// },
// },
// },
//};
//export default config;

2
frontend/tsconfig.json
View File

@@ -35,7 +35,7 @@
"src/**/*.mts", // 👈 CHANGED: Looks in src folder "src/**/*.mts", // 👈 CHANGED: Looks in src folder
".next/types/**/*.ts", ".next/types/**/*.ts",
".next/dev/types/**/*.ts" ".next/dev/types/**/*.ts"
, "tailwind.config.ts" ], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"
] ]