11f85e4b28
- Criar componente CompanionTab com layout reorganizado - Simplificar ApiTokensForm com lista de dispositivos mais compacta - Redesenhar página de relatórios de cartões com layout horizontal - Atualizar CardsOverview com stats em cards separados e lista compacta - Simplificar CardUsageChart removendo seletor de período (fixo 12 meses) - Criar CardInvoiceStatus com timeline minimalista - Atualizar skeletons para refletir novos layouts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
RiAndroidLine,
|
|
RiDownload2Line,
|
|
RiNotification3Line,
|
|
RiQrCodeLine,
|
|
RiShieldCheckLine,
|
|
} from "@remixicon/react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ApiTokensForm } from "./api-tokens-form";
|
|
|
|
interface ApiToken {
|
|
id: string;
|
|
name: string;
|
|
tokenPrefix: string;
|
|
lastUsedAt: Date | null;
|
|
lastUsedIp: string | null;
|
|
createdAt: Date;
|
|
expiresAt: Date | null;
|
|
revokedAt: Date | null;
|
|
}
|
|
|
|
interface CompanionTabProps {
|
|
tokens: ApiToken[];
|
|
}
|
|
|
|
const steps = [
|
|
{
|
|
icon: RiDownload2Line,
|
|
title: "Instale o app",
|
|
description: "Instale o APK.",
|
|
},
|
|
{
|
|
icon: RiQrCodeLine,
|
|
title: "Gere um token",
|
|
description: "Crie um token abaixo para autenticar.",
|
|
},
|
|
{
|
|
icon: RiNotification3Line,
|
|
title: "Configure permissões",
|
|
description: "Conceda acesso às notificações.",
|
|
},
|
|
{
|
|
icon: RiShieldCheckLine,
|
|
title: "Pronto!",
|
|
description: "Notificações serão enviadas ao OpenSheets.",
|
|
},
|
|
];
|
|
|
|
export function CompanionTab({ tokens }: CompanionTabProps) {
|
|
return (
|
|
<Card className="p-6">
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h2 className="text-lg font-bold">OpenSheets Companion</h2>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
|
|
<RiAndroidLine className="h-3 w-3" />
|
|
Android
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Capture notificações de transações dos seus apps de banco (Nubank,
|
|
Itaú, Bradesco, Inter, C6 e outros) e envie para sua caixa de
|
|
entrada.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Steps */}
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">
|
|
{steps.map((step, index) => (
|
|
<div key={step.title} className="flex items-start gap-2">
|
|
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
|
<step.icon className="h-4 w-4" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium leading-tight">
|
|
{index + 1}. {step.title}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-t" />
|
|
|
|
{/* Devices */}
|
|
<ApiTokensForm tokens={tokens} />
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|