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

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

@@ -37,9 +37,9 @@ export default function BillingPage() {
<div className="space-y-6">
{/* Header */}
<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">
<Plus className="h-4 w-4" />
<Plus className="h-4 w-4 icon-flat" />
New Invoice
</Button>
</div>
@@ -71,14 +71,14 @@ export default function BillingPage() {
/>
</div>
{/* 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-1">
<Input
placeholder="Search patients..."
value={search}
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 className="flex gap-2">
@@ -86,9 +86,9 @@ export default function BillingPage() {
<button
key={status}
onClick={() => setStatusFilter(status)}
className={`px-4 py-2 rounded-lg text-sm font-medium capitalize ${statusFilter === status
? 'bg-primary-50 text-primary-700 border border-primary-200'
: 'text-gray-600 hover:bg-gray-50'
className={`px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium capitalize border ${statusFilter === status
? 'bg-primary-soft text-primary border-primary/50'
: 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
}`}
>
{status}
@@ -98,55 +98,55 @@ export default function BillingPage() {
</div>
</div>
{/* 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">
<thead className="bg-gray-50 border-b">
<thead className="bg-background-secondary/70 border-b border-border">
<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
</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
</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
</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
</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
</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
</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
</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
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tbody className="divide-y divide-border/60">
{invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-gray-50">
<td className="px-6 py-4 text-sm font-medium text-gray-900">
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-text-primary">
{invoice.id}
</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}
</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}
</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}
</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}
</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}
</td>
<td className="px-6 py-4">
@@ -158,7 +158,7 @@ export default function BillingPage() {
</Badge>
</td>
<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
</button>
</td>
@@ -167,14 +167,14 @@ export default function BillingPage() {
</tbody>
</table>
{/* Pagination - Matching your design */}
<div className="px-6 py-4 border-t flex justify-between items-center bg-gray-50">
<button className="text-sm text-gray-600 hover:text-gray-900">
<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-text-secondary hover:text-text-primary">
← Previous
</button>
<div className="text-sm text-gray-600">
<div className="text-sm text-text-secondary">
Page 1 of 10
</div>
<button className="text-sm text-gray-600 hover:text-gray-900">
<button className="text-sm text-text-secondary hover:text-text-primary">
Next →
</button>
</div>
@@ -184,10 +184,10 @@ export default function BillingPage() {
}
function StatCard({ title, count, amount, color }: StatCardProps) {
const colors: Record<StatCardColor, string> = {
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 (

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

@@ -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 (
<div className="h-screen flex items-center justify-center">
<div className="h-screen flex items-center justify-center app-web-bg">
Loading app...
</div>
);
@@ -42,30 +37,37 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
if (!user || !currentOrganization) {
return (
<div className="h-screen flex items-center justify-center">
<div className="h-screen flex items-center justify-center app-web-bg">
Loading workspace...
</div>
);
}
return (
<div className="flex h-screen bg-[#020d1a] text-white">
<div className="flex h-screen app-web-bg text-text-primary">
<Sidebar />
<div className="flex-1 flex flex-col">
<header className="flex justify-between px-6 py-4 border-b border-white/10">
<h2>{currentOrganization.name}</h2>
<header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
<h2 className="text-lg font-medium">{currentOrganization.name}</h2>
<div className="flex gap-4">
<span>{user.name}</span>
<button onClick={logout}>
<LogOut />
<div className="flex items-center gap-4">
<ThemeToggle />
<span className="text-sm text-text-secondary">{user.name}</span>
<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>
</div>
</header>
<main className="p-6 flex-1 overflow-y-auto">
{children} {/* 🔥 THIS CHANGES */}
<div className="surface-panel p-6 min-h-full">
{children}
</div>
</main>
</div>
</div>

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

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