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

feature: button and badge components updated.

Browse Source
This commit is contained in:
Admin
2026-05-06 02:20:19 +03:30
parent adfb5b436e
commit 6258477860
8 changed files with 89 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
// src/app/(dashboard)/billing/page.tsx
'use client';
import { useState } from 'react';
import { Search, Filter, Plus } from 'lucide-react';
import { Search } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { Badge } from '@/components/ui/common/Badge';
@@ -44,11 +44,9 @@ export default function BillingPage() {
<h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
<Button
variant="primary"
className="flex items-center gap-2"
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
>
<Plus className="h-4 w-4 icon-flat" />
New Invoice
</Button>
</div>
@@ -129,7 +127,7 @@ export default function BillingPage() {
<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-text-muted uppercase tracking-wider">
<th className="px-6 py-3 text-center 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-text-muted uppercase tracking-wider">
@@ -158,7 +156,7 @@ export default function BillingPage() {
<td className="px-6 py-4 text-sm text-text-primary">
${invoice.paid}
</td>
<td className="px-6 py-4">
<td className="px-6 py-4 text-center align-middle">
<Badge
variant={statusColors[invoice.status as keyof typeof statusColors]}
className="capitalize"

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

@@ -1,7 +1,6 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { Check, Copy, Search, Send } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import {
organizationApi,
@@ -9,6 +8,7 @@ import {
type CounterpartSearchResultDto,
} from '@/lib/api/organization';
import { Button } from '@/components/ui/common/Button';
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
import { Input } from '@/components/ui/common/Input';
import type { ApiError } from '@/types/api';
@@ -39,6 +39,13 @@ function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInvit
window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
}
/** First letter uppercase, rest lowercase (e.g. ACTIVE → Active). */
function formatOrganizationStatusLabel(status: string): string {
if (!status) return status;
const lower = status.toLowerCase();
return lower.charAt(0).toUpperCase() + lower.slice(1);
}
function formatApiMessage(err: unknown): string {
if (!err || typeof err !== 'object') return 'Something went wrong';
const m = (err as ApiError).message;
@@ -202,7 +209,6 @@ export default function OrganizationsPage() {
placeholder={`Search by ${counterpartLabel.toLowerCase()} name, email, or phone`}
/>
<Button type="button" isLoading={searchLoading} onClick={() => void runSearch()}>
<Search className="w-4 h-4 mr-2" />
Search
</Button>
</div>
@@ -238,7 +244,6 @@ export default function OrganizationsPage() {
disabled={!selectedResult}
onClick={() => void createLink()}
>
<Send className="w-4 h-4 mr-2" />
Request link
</Button>
</div>
@@ -303,9 +308,12 @@ export default function OrganizationsPage() {
<td className="p-3 text-text-primary">{item.organizationName}</td>
<td className="p-3 text-text-secondary">{item.ownerEmail}</td>
<td className="p-3">
<span className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-text-primary">
{item.status}
</span>
<Badge
variant={organizationLinkStatusVariant(item.status)}
fixedWidth
>
{formatOrganizationStatusLabel(item.status)}
</Badge>
</td>
<td className="p-3">
{item.kind === 'INVITATION' &&
@@ -327,14 +335,7 @@ export default function OrganizationsPage() {
}
}}
>
{copiedId === item.id ? (
<Check className="w-4 h-4" />
) : (
<Copy className="w-4 h-4" />
)}
<span className="ml-1">
{copiedId === item.id ? 'Copied' : 'Copy link'}
</span>
{copiedId === item.id ? 'Copied' : 'Copy link'}
</Button>
)}
</td>

3
frontend/src/app/(dashboard)/patients/page.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { patientsApi } from '@/lib/api/patients';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -160,7 +159,6 @@ export default function PatientsPage() {
<h1 className="text-2xl font-semibold text-text-primary">Patients</h1>
<Button
variant="primary"
className="flex items-center gap-2"
disabled={!canEditPatients}
onClick={() => {
if (!canEditPatients) return;
@@ -168,7 +166,6 @@ export default function PatientsPage() {
}}
title={!canEditPatients ? 'Read-only access for this organization.' : undefined}
>
<Plus className="h-4 w-4 icon-flat" />
New Patient
</Button>
</div>

7
frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
View File

@@ -5,6 +5,7 @@ import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
import { Button } from '@/components/ui/common/Button';
import type { SubscriptionAlertData } from '@/types/subscription';
const PLAN_OPTIONS = [
@@ -176,9 +177,9 @@ export default function SubscriptionsSettingsPage() {
);
})}
</div>
<button
<Button
type="button"
className="inline-flex items-center justify-center rounded-[var(--radius-md)] bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60"
variant="primary"
onClick={() => {
const selectedPlanLabel = selectedPlan?.name ?? 'the selected plan';
setPurchaseNotice(
@@ -187,7 +188,7 @@ export default function SubscriptionsSettingsPage() {
}}
>
Start purchase process
</button>
</Button>
{purchaseNotice && (
<div className="rounded-[var(--radius-md)] border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
<p className="text-sm text-emerald-200">{purchaseNotice}</p>

30
frontend/src/app/(dashboard)/staff/page.tsx
View File

@@ -16,10 +16,11 @@ import {
formatAccessSummary,
type FeaturePermState,
} from './staff-permission-form';
import { UserPlus, Pencil, Trash2, Copy, Check, X, Clock3 } from 'lucide-react';
import { Pencil, Trash2, Copy, Check, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
import { Button } from '@/components/ui/common/Button';
import { Badge } from '@/components/ui/common/Badge';
import { Input } from '@/components/ui/common/Input';
import { Checkbox } from '@/components/ui/common/Checkbox';
import type { ApiError } from '@/types/api';
@@ -335,7 +336,6 @@ export default function StaffPage() {
className="shrink-0"
title={!canEdit ? 'Read-only access for this organization.' : undefined}
>
<UserPlus className="w-4 h-4 mr-2" />
Invite member
</Button>
</div>
@@ -410,14 +410,7 @@ export default function StaffPage() {
}
}}
>
{copiedInviteMembershipId === lastInviteInfo.membershipId ? (
<Check className="w-4 h-4" />
) : (
<Copy className="w-4 h-4" />
)}
<span className="ml-1">
{copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
</span>
{copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
</Button>
</div>
<p className="text-xs text-text-muted">
@@ -438,7 +431,7 @@ export default function StaffPage() {
<th className="p-3 font-medium">Name</th>
<th className="p-3 font-medium">Email</th>
<th className="p-3 font-medium">Role</th>
<th className="p-3 font-medium">Status</th>
<th className="p-3 font-medium text-center">Status</th>
<th className="p-3 font-medium">Access</th>
<th className="p-3 font-medium w-28">Actions</th>
</tr>
@@ -455,20 +448,13 @@ export default function StaffPage() {
<span className="text-text-secondary">Staff</span>
)}
</td>
<td className="p-3 align-middle">
<td className="p-3 align-middle text-center">
{m.isOwner || m.invitationStatus === 'ACTIVE' ? (
<span className="inline-flex items-center rounded-full border border-emerald-600/40 bg-emerald-600/15 px-2 py-0.5 text-xs text-emerald-400">
Active
</span>
<Badge variant="success">Active</Badge>
) : m.invitationStatus === 'PENDING' ? (
<span className="inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/15 px-2 py-0.5 text-xs text-amber-300">
<Clock3 className="h-3 w-3" />
Pending
</span>
<Badge variant="warning">Pending</Badge>
) : (
<span className="inline-flex items-center rounded-full border border-red-500/40 bg-red-500/15 px-2 py-0.5 text-xs text-red-300">
Expired
</span>
<Badge variant="danger">Expired</Badge>
)}
</td>
<td className="p-3 text-text-secondary max-w-md">