feat(backend): API & Database Scaling Part 49 / Advanced Logic Part 39 (#294)#850
Merged
Wilfred007 merged 5 commits intoMay 30, 2026
Merged
Annotations
10 errors and 2 warnings
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L91
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Notifications"
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
>
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L84
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/switch to light mode/i`
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L75
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/switch to light mode/i`
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L68
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Appearance"
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
>
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L59
TestingLibraryElementError: Unable to find an accessible element with the role "combobox" and name "Language"
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
>
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L52
TestingLibraryElementError: Unable to find an accessible element with the role "option" and name "English"
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
>
|
|
Run Tests:
frontend/src/__tests__/Settings.test.tsx#L46
TestingLibraryElementError: Unable to find an accessible element with the role "combobox" and name "Language"
Here are the accessible roles:
paragraph:
Name "":
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)]"
/>
Name "":
<p
class="text-sm text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-bold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-xs font-semibold text-[var(--text)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-1"
/>
Name "":
<p
class="text-sm font-semibold text-[var(--muted)]"
/>
Name "":
<p
class="text-xs text-[var(--muted)] mt-2"
/>
--------------------------------------------------
heading:
Name "Settings":
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
/>
Name "Language":
<h2
class="text-lg font-bold text-[var(--text)]"
/>
--------------------------------------------------
button:
Name "Select English":
<button
aria-label="Select English"
class="relative rounded-2xl border p-4 text-left transition border-[var(--accent)] bg-[color:rgba(74,240,184,0.08)]"
type="button"
/>
Name "Select Español":
<button
aria-label="Select Español"
class="relative rounded-2xl border p-4 text-left transition border-hi bg-[var(--surface-hi)]/70 hover:border-[var(--accent)]/50"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex-1 flex flex-col items-center justify-start p-6 md:p-12 max-w-4xl mx-auto w-full"
>
<div
class="w-full mb-8 md:mb-12 flex items-end justify-between border-b border-hi pb-6 md:pb-8"
>
<div>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
User Preferences
</p>
<h1
class="text-3xl md:text-4xl font-black mb-2 tracking-tight mt-2"
>
Settings
</h1>
<p
class="text-sm text-[var(--muted)]"
>
Manage your application preferences and account settings
</p>
</div>
</div>
<div
class="w-full space-y-6"
>
<div
class="card glass noise p-6 md:p-8"
>
<div
class="flex items-center gap-3 mb-6"
>
<div
class="rounded-2xl border border-[var(--border)] bg-[var(--surface-hi)] p-2.5"
>
<svg
aria-hidden="true"
class="lucide lucide-globe h-5 w-5 text-[var(--accent)]"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
/>
<path
d="M2 12h20"
/>
</svg>
</div>
<div>
<h2
class="text-lg font-bold text-[var(--text)]"
>
Language
</h2>
<p
class="text-sm text-[var(--muted)] mt-1"
>
Choose your preferred language
</p>
</div>
</div>
<div
class="grid gap-3 sm:grid-cols-2"
>
|
|
Run Tests:
frontend/src/__tests__/PayrollAnalytics.test.tsx#L123
TestingLibraryElementError: Unable to find a label with the text of: Area chart
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex w-full flex-1 flex-col items-center justify-start px-4 py-6 sm:px-6 lg:px-8"
>
<div
class="w-full max-w-7xl space-y-6 sm:space-y-8"
>
<div
class="card glass noise border-[var(--border-hi)] p-6 sm:p-8"
>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
Data Insights
</p>
<h1
class="mt-2 text-3xl sm:text-4xl font-black tracking-tight text-[var(--text)]"
>
Payroll
<span
class="text-[var(--accent)]"
>
Analytics
</span>
</h1>
<p
class="mt-3 text-sm sm:text-base leading-6 text-[var(--muted)] max-w-3xl"
>
Comprehensive trends, currency distribution, department breakdown, and payment success metrics to help you make informed decisions.
</p>
</div>
<div>
<div
class="p-4 sm:p-6"
>
<p
class="text-[10px] font-bold uppercase tracking-[0.24em] text-[var(--muted)] mb-4"
>
Date Range
</p>
<div
class="flex flex-wrap gap-2 mb-4"
>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
3M
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
6M
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
YTD
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
1Y
</button>
</div>
<div
class="flex flex-wrap gap-4 sm:gap-6 items-end"
>
<div
class="flex-1 min-w-[200px]"
>
<label
class="block text-sm font-semibold text-[var(--text)] mb-2"
for="start-date"
>
Start Date
</label>
<input
aria-label="Select start date for analytics"
class="w-full border border-[var(--border)] rounded-xl p-3 text-sm bg-[var(--surface)] text-[var(--text)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition"
id="start-date"
type="date"
value="2026-01-01"
/>
</div>
<div
class="flex-1 min-w-[200px]"
>
<label
class="block text-sm font-semibold text-[var(--text)] mb-2"
for="end-date"
>
End Date
</label>
<input
aria-label="Select end date for analytics"
class="w-full border border-[var(--border)] rounded-xl p-3 text-sm bg-[var(--surface)] text-[var(--text)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition"
id="end-date"
type="date"
|
|
Run Tests:
frontend/src/__tests__/PayrollAnalytics.test.tsx#L117
TestingLibraryElementError: Unable to find a label with the text of: Line chart
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex w-full flex-1 flex-col items-center justify-start px-4 py-6 sm:px-6 lg:px-8"
>
<div
class="w-full max-w-7xl space-y-6 sm:space-y-8"
>
<div
class="card glass noise border-[var(--border-hi)] p-6 sm:p-8"
>
<p
class="text-[11px] font-bold uppercase tracking-[0.24em] text-[var(--muted)]"
>
Data Insights
</p>
<h1
class="mt-2 text-3xl sm:text-4xl font-black tracking-tight text-[var(--text)]"
>
Payroll
<span
class="text-[var(--accent)]"
>
Analytics
</span>
</h1>
<p
class="mt-3 text-sm sm:text-base leading-6 text-[var(--muted)] max-w-3xl"
>
Comprehensive trends, currency distribution, department breakdown, and payment success metrics to help you make informed decisions.
</p>
</div>
<div>
<div
class="p-4 sm:p-6"
>
<p
class="text-[10px] font-bold uppercase tracking-[0.24em] text-[var(--muted)] mb-4"
>
Date Range
</p>
<div
class="flex flex-wrap gap-2 mb-4"
>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
3M
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
6M
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
YTD
</button>
<button
aria-pressed="false"
class="px-3 py-1 rounded-lg text-xs font-bold transition border border-[var(--border)] text-[var(--muted)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
1Y
</button>
</div>
<div
class="flex flex-wrap gap-4 sm:gap-6 items-end"
>
<div
class="flex-1 min-w-[200px]"
>
<label
class="block text-sm font-semibold text-[var(--text)] mb-2"
for="start-date"
>
Start Date
</label>
<input
aria-label="Select start date for analytics"
class="w-full border border-[var(--border)] rounded-xl p-3 text-sm bg-[var(--surface)] text-[var(--text)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition"
id="start-date"
type="date"
value="2026-01-01"
/>
</div>
<div
class="flex-1 min-w-[200px]"
>
<label
class="block text-sm font-semibold text-[var(--text)] mb-2"
for="end-date"
>
End Date
</label>
<input
aria-label="Select end date for analytics"
class="w-full border border-[var(--border)] rounded-xl p-3 text-sm bg-[var(--surface)] text-[var(--text)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] transition"
id="end-date"
type="date"
|
|
Run Tests:
frontend/src/__tests__/Home.test.tsx#L62
Error: expect(element).toHaveAttribute("aria-labelledby", "home-hero-title") // element.getAttribute("aria-labelledby") === "home-hero-title"
Expected the element to have attribute:
aria-labelledby="home-hero-title"
Received:
null
❯ src/__tests__/Home.test.tsx:62:18
|
|
Complete job
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/cache@v3, actions/checkout@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
Post Run actions/checkout@v4
The process '/usr/bin/git' failed with exit code 128
|
background
wait
wait-all
cancel
parallel
Loading