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

bugfix: the whole theming structure overhauled. light/dark mode icon added.

Browse Source
This commit is contained in:
Admin
2026-04-29 01:22:53 +03:30
parent bdd889ac09
commit a264523e12
20 changed files with 422 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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<typeof loginSchema>;
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<string | null>(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 (
<div className="min-h-screen flex items-center justify-center">
<p>Loading...</p>
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">Loading...</p>
</div>
);
}
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">
<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>
<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
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
<p className="mt-2 text-center text-sm text-text-secondary">
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
</Link>
</p>
</div>
<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)}>
<Input
label="Email address"
@@ -191,7 +189,7 @@ export default function LoginPage() {
type="email"
placeholder="you@example.com"
error={errors.email?.message}
icon={<Mail className="h-5 w-5 text-gray-400" />}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label="Password"
@@ -199,7 +197,7 @@ export default function LoginPage() {
type="password"
placeholder="••••••••"
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">
@@ -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"
/>
<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
</label>
</div>
<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?
</Link>
</div>

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

@@ -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 (
<div className="min-h-screen bg-background-primary">
<div className="min-h-screen app-web-bg text-text-primary">
{/* 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="text-2xl font-semibold text-primary">
<div className="text-2xl font-semibold text-text-primary">
DyoLink
</div>
<div className="flex gap-3">
<div className="flex items-center gap-3">
<ThemeToggle />
{user ? (
<Link href="/today">
<Button variant="primary">Dashboard</Button>
@@ -44,7 +45,7 @@ export default function HomePage() {
<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
<span className="text-primary"> Seamlessly</span>
</h1>
@@ -66,32 +67,32 @@ export default function HomePage() {
{/* Features */}
<div className="mt-20 grid md:grid-cols-3 gap-6">
<FeatureCard
icon={<Building2 className="h-6 w-6" />}
icon={<Building2 className="h-6 w-6 icon-flat" />}
title="For Clinics"
description="Manage patients, appointments, and send cases to labs instantly."
/>
<FeatureCard
icon={<Beaker className="h-6 w-6" />}
icon={<Beaker className="h-6 w-6 icon-flat" />}
title="For Labs"
description="Receive cases, track progress, and communicate with clinics."
/>
<FeatureCard
icon={<Users className="h-6 w-6" />}
icon={<Users className="h-6 w-6 icon-flat" />}
title="Team Management"
description="Add up to 5 team members during trial. Scale as you grow."
/>
<FeatureCard
icon={<Calendar className="h-6 w-6" />}
icon={<Calendar className="h-6 w-6 icon-flat" />}
title="30-Day Trial"
description="Full access to all features. No credit card required."
/>
<FeatureCard
icon={<Clock className="h-6 w-6" />}
icon={<Clock className="h-6 w-6 icon-flat" />}
title="Real-time Updates"
description="Get instant notifications on case status changes."
/>
<FeatureCard
icon={<Shield className="h-6 w-6" />}
icon={<Shield className="h-6 w-6 icon-flat" />}
title="Secure & Compliant"
description="HIPAA-compliant with enterprise-grade security."
/>
@@ -100,7 +101,7 @@ export default function HomePage() {
</main>
{/* 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>© 2026 DyoLink. All rights reserved.</div>
@@ -130,7 +131,7 @@ function FeatureCard({
description: string;
}) {
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">
{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 * as z from 'zod';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/Button';
@@ -30,7 +29,6 @@ type RegisterForm = z.infer<typeof registerSchema>;
export default function RegisterPage() {
const { registerTrial, isLoading } = useAuth();
const router = useRouter();
const [step, setStep] = useState(1);
const [error, setError] = useState<string | null>(null);
@@ -72,42 +70,42 @@ export default function RegisterPage() {
}
};
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">
<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>
<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
</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?{' '}
<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
</Link>
</p>
</div>
<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 */}
<div className="mb-8">
<div className="flex items-center justify-between">
<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
</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
</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={`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
</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
</div>
@@ -115,10 +113,10 @@ export default function RegisterPage() {
</div>
</div>
{/* Trial Info Banner */}
<div className="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
<h3 className="text-sm font-medium text-blue-800 mb-2">Your trial
<div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
<h3 className="text-sm font-medium text-text-primary mb-2">Your trial
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">
<span className="mr-2">✓</span> Up to 5 team members
</li>
@@ -139,7 +137,7 @@ export default function RegisterPage() {
{...register('name')}
placeholder="John Doe"
error={errors.name?.message}
icon={<User className="h-5 w-5 text-gray-400" />}
icon={<User className="h-5 w-5 icon-flat" />}
/>
<Input
label="Email address"
@@ -147,7 +145,7 @@ export default function RegisterPage() {
type="email"
placeholder="you@example.com"
error={errors.email?.message}
icon={<Mail className="h-5 w-5 text-gray-400" />}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label="Password"
@@ -155,7 +153,7 @@ export default function RegisterPage() {
type="password"
placeholder="••••••••"
error={errors.password?.message}
icon={<Lock className="h-5 w-5 text-gray-400" />}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Input
label="Confirm password"
@@ -163,7 +161,7 @@ export default function RegisterPage() {
type="password"
placeholder="••••••••"
error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 text-gray-400" />}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Button
type="button"
@@ -182,10 +180,10 @@ export default function RegisterPage() {
{...register('organizationName')}
placeholder="Sunshine Dental Clinic"
error={errors.organizationName?.message}
icon={<Building2 className="h-5 w-5 text-gray-400" />}
icon={<Building2 className="h-5 w-5 icon-flat" />}
/>
<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
</label>
<input type="hidden" {...register('organizationType')} />
@@ -195,11 +193,11 @@ export default function RegisterPage() {
onClick={() => {
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'
: 'border-gray-300 hover:border-gray-400'
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary/60 bg-primary-soft text-text-primary'
: '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>
</button>
<button
@@ -207,12 +205,12 @@ export default function RegisterPage() {
onClick={() => {
setValue('organizationType', 'LAB', { shouldValidate: true });
}}
className={`p-4 border rounded-lg text-center transition-colors ${organizationType === 'LAB'
? 'border-primary-600 bg-primary-50 text-primary-700'
: 'border-gray-300 hover:border-gray-400'
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'LAB'
? 'border-primary/60 bg-primary-soft text-text-primary'
: '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>
</button>
</div>
@@ -221,7 +219,7 @@ export default function RegisterPage() {
)}
</div>
{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>
</div>
)}
@@ -245,13 +243,13 @@ export default function RegisterPage() {
</>
)}
</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{' '}
<Link href="/terms" className="text-primary-600 hover:text-primary-500">
<Link href="/terms" className="text-primary hover:opacity-90">
Terms of Service
</Link>{' '}
and{' '}
<Link href="/privacy" className="text-primary-600 hover:text-primary-500">
<Link href="/privacy" className="text-primary hover:opacity-90">
Privacy Policy
</Link>
</p>

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

@@ -1,13 +1,11 @@
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { Building2, Beaker } from 'lucide-react';
export default function SelectOrganizationPage() {
const { organizations, selectOrganization, isLoading } = useAuth();
const router = useRouter();
// ✅ Auto-redirect if only one organization
useEffect(() => {
@@ -18,13 +16,13 @@ export default function SelectOrganizationPage() {
const getIcon = (type: string) => {
return type === 'CLINIC'
? <Building2 className="h-8 w-8" />
: <Beaker className="h-8 w-8" />;
? <Building2 className="h-8 w-8 icon-flat" />
: <Beaker className="h-8 w-8 icon-flat" />;
};
if (isLoading) {
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>
</div>
);
@@ -32,17 +30,17 @@ export default function SelectOrganizationPage() {
if (!organizations.length) {
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>
</div>
);
}
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="text-center mb-8">
<h1 className="text-3xl font-bold text-text-primary">
<h1 className="text-3xl font-semibold text-text-primary">
Choose Organization
</h1>
<p className="text-text-secondary mt-2">
@@ -55,9 +53,9 @@ export default function SelectOrganizationPage() {
<button
key={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)}
</div>
@@ -70,7 +68,7 @@ export default function SelectOrganizationPage() {
</p>
</div>
<div className="text-primary-600 text-sm">
<div className="text-primary text-sm">
Continue →
</div>
</button>