Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: melhorias de UI e responsividade mobile

Browse Source 
- Corrigir layout truncado no card de parcelas (analise-parcelas)
- Empilhar cards de top estabelecimentos e categorias no mobile
- Ajustes gerais de responsividade em múltiplos componentes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-28 13:38:41 +00:00
parent 1718a2cb5c
commit 761c039244
26 changed files with 422 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/(dashboard)/dashboard/loading.tsx
View File

@@ -1,16 +1,20 @@
import { DashboardGridSkeleton } from "@/components/skeletons";
import { Skeleton } from "@/components/ui/skeleton";
/**
* Loading state para a página do dashboard
* Usa skeleton fiel ao layout final para evitar layout shift
* Estrutura: Welcome Banner → Month Picker → Section Cards → Widget Grid
*/
export default function DashboardLoading() {
return (
<main className="flex flex-col gap-6 px-6">
{/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
<main className="flex flex-col gap-4">
{/* Welcome Banner skeleton */}
<Skeleton className="h-[104px] w-full rounded-xl bg-foreground/10" />
{/* Dashboard content skeleton */}
{/* Month Picker skeleton */}
<Skeleton className="h-[56px] w-full rounded-xl bg-foreground/10" />
{/* Dashboard content skeleton (Section Cards + Widget Grid) */}
<DashboardGridSkeleton />
</main>
);

3
app/(dashboard)/layout.tsx
View File

@@ -59,7 +59,8 @@ export default async function DashboardLayout({
preLancamentosCount={preLancamentosCount}
notificationsSnapshot={notificationsSnapshot}
/>
<div className="flex flex-1 flex-col pt-14">
<div className="relative flex flex-1 flex-col pt-16">
<div className="pointer-events-none absolute inset-0 bg-linear-to-b from-primary/5 via-transparent to-transparent" />
<div className="@container/main flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4">
{children}

2
app/(dashboard)/top-estabelecimentos/page.tsx
View File

@@ -63,7 +63,7 @@ export default async function TopEstabelecimentosPage({
<HighlightsCards summary={data.summary} />
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<EstablishmentsList establishments={data.establishments} />
</div>

4
app/(landing-page)/page.tsx
View File

@@ -154,8 +154,8 @@ export default async function Page() {
return (
<div className="flex min-h-screen flex-col">
{/* Navigation */}
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
<div className="max-w-8xl mx-auto px-4 flex h-14 items-center justify-between">
<header className="sticky top-0 z-50 bg-card backdrop-blur-lg supports-backdrop-filter:bg-card/50">
<div className="max-w-8xl mx-auto px-4 flex h-16 items-center justify-between">
<Logo variant="compact" />
{/* Center Navigation Links */}

2
app/globals.css
View File

@@ -105,7 +105,7 @@
/* Base surfaces - warm dark with consistent hue family */
--background: oklch(18.5% 0.002 70);
--foreground: oklch(92% 0.015 80);
--card: oklch(24% 0.003 70);
--card: oklch(22.717% 0.00244 67.467);
--card-foreground: oklch(92% 0.015 80);
--popover: oklch(24% 0.003 70);
--popover-foreground: oklch(92% 0.015 80);