mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 20:16:42 +00:00
Changes
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
parent
e0b7fa9942
commit
11d8c0c19a
7 changed files with 1229 additions and 0 deletions
267
src/routes/painel.cronjobs.$id.tsx
Normal file
267
src/routes/painel.cronjobs.$id.tsx
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
"use client";
|
||||
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { ArrowLeft, Clock, AlertTriangle, Pause, Play, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
useCronjob,
|
||||
useDeleteCronjob,
|
||||
useUpdateCronjobStatus,
|
||||
} from "@/hooks/use-cronjobs";
|
||||
import { useAvailableMcps, useUserIntegrations } from "@/hooks/use-integrations";
|
||||
|
||||
export const Route = createFileRoute("/painel/cronjobs/$id")({
|
||||
component: CronjobDetailPage,
|
||||
});
|
||||
|
||||
function CronjobDetailPage() {
|
||||
const { id } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const { data: job, isLoading, error } = useCronjob(id);
|
||||
const { data: mcps = [] } = useAvailableMcps();
|
||||
const { data: integrations = [] } = useUserIntegrations();
|
||||
const updateMut = useUpdateCronjobStatus();
|
||||
const deleteMut = useDeleteCronjob();
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="h-32 rounded-xl bg-muted/30 animate-pulse" />;
|
||||
}
|
||||
if (error || !job) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to="/painel/cronjobs">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="rounded-md border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
|
||||
Automação não encontrada.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const connectedMcpIds = new Set(
|
||||
integrations.filter((i) => i.status === "active").map((i) => i.mcp_id),
|
||||
);
|
||||
const requiredMcps = job.required_mcp_slugs
|
||||
.map((slug) => mcps.find((m) => m.slug === slug))
|
||||
.filter((m): m is NonNullable<typeof m> => !!m);
|
||||
const missingMcps = requiredMcps.filter((m) => !connectedMcpIds.has(m.id));
|
||||
|
||||
const isActive = job.status === "active";
|
||||
const isAutoPaused = job.status === "auto_paused";
|
||||
|
||||
async function toggle() {
|
||||
try {
|
||||
await updateMut.mutateAsync({
|
||||
id: job!.id,
|
||||
status: isActive ? "paused" : "active",
|
||||
});
|
||||
toast.success(isActive ? "Pausada." : "Ativada.");
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "Erro");
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
try {
|
||||
await deleteMut.mutateAsync(job!.id);
|
||||
toast.success("Excluída.");
|
||||
navigate({ to: "/painel/cronjobs" });
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "Erro");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to="/painel/cronjobs">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar para automações
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{job.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
{isActive && <Badge variant="success">Ativa</Badge>}
|
||||
{job.status === "paused" && <Badge variant="secondary">Pausada</Badge>}
|
||||
{isAutoPaused && (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<AlertTriangle className="h-3 w-3" /> Auto-pausada
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={toggle} disabled={updateMut.isPending}>
|
||||
{isActive ? (
|
||||
<>
|
||||
<Pause className="h-4 w-4 mr-2" /> Pausar
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-4 w-4 mr-2" /> Ativar
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-destructive"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" /> Excluir
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAutoPaused && job.auto_paused_reason && (
|
||||
<div className="rounded-md border border-destructive bg-destructive/10 p-4 text-sm">
|
||||
<p className="font-medium text-destructive">Auto-pausada</p>
|
||||
<p className="text-muted-foreground mt-1">{job.auto_paused_reason}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{missingMcps.length > 0 && isActive && (
|
||||
<div className="rounded-md border border-amber-500/40 bg-amber-500/10 p-4 text-sm">
|
||||
<p className="font-medium text-amber-700 dark:text-amber-400">
|
||||
Integrações necessárias não conectadas:
|
||||
</p>
|
||||
<ul className="list-disc list-inside mt-1 text-muted-foreground">
|
||||
{missingMcps.map((m) => (
|
||||
<li key={m.id}>{m.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button asChild size="sm" variant="outline" className="mt-3">
|
||||
<Link to="/painel/integracoes">Conectar agora</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-xl border border-border bg-card p-6 space-y-4">
|
||||
<Section label="Quando vai rodar" value={job.human_readable} />
|
||||
<Section label="Expressão cron" value={job.cron_expression} mono />
|
||||
<Section
|
||||
label="Próxima execução"
|
||||
value={
|
||||
job.next_run_at
|
||||
? new Date(job.next_run_at).toLocaleString("pt-BR", {
|
||||
timeZone: job.timezone,
|
||||
dateStyle: "full",
|
||||
timeStyle: "short",
|
||||
})
|
||||
: "—"
|
||||
}
|
||||
icon={<Clock className="h-4 w-4 text-muted-foreground" />}
|
||||
/>
|
||||
<Section
|
||||
label="Última execução"
|
||||
value={
|
||||
job.last_run_at
|
||||
? new Date(job.last_run_at).toLocaleString("pt-BR", {
|
||||
timeZone: job.timezone,
|
||||
dateStyle: "full",
|
||||
timeStyle: "short",
|
||||
})
|
||||
: "Nunca"
|
||||
}
|
||||
/>
|
||||
<Section label="Fuso horário" value={job.timezone} />
|
||||
<Section label="Descrição original (NL)" value={job.natural_language_input} />
|
||||
{job.description && <Section label="Notas" value={job.description} />}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Ação enviada ao agente
|
||||
</p>
|
||||
<pre className="mt-1 rounded-md bg-muted/40 p-3 text-sm whitespace-pre-wrap">
|
||||
{job.action_prompt}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground mb-2">
|
||||
Integrações necessárias
|
||||
</p>
|
||||
{requiredMcps.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Nenhuma.</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{requiredMcps.map((m) => {
|
||||
const ok = connectedMcpIds.has(m.id);
|
||||
return (
|
||||
<Badge key={m.id} variant={ok ? "success" : "destructive"}>
|
||||
{m.name} {ok ? "✓" : "(não conectado)"}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Excluir automação?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação remove permanentemente “{job.name}”.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleteMut.isPending}>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
remove();
|
||||
}}
|
||||
disabled={deleteMut.isPending}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{deleteMut.isPending ? "Excluindo..." : "Excluir"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">{label}</p>
|
||||
<p
|
||||
className={`mt-1 text-sm flex items-center gap-2 ${mono ? "font-mono" : ""}`}
|
||||
>
|
||||
{icon}
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
src/routes/painel.cronjobs.index.tsx
Normal file
124
src/routes/painel.cronjobs.index.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
"use client";
|
||||
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { CalendarClock, Plus, Lock } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useCronjobs, useUserJobsLimits } from "@/hooks/use-cronjobs";
|
||||
import { useAgentInstance } from "@/hooks/use-agent-instance";
|
||||
import { CronjobCard } from "@/components/mika/cronjobs/CronjobCard";
|
||||
|
||||
export const Route = createFileRoute("/painel/cronjobs/")({
|
||||
component: CronjobsPage,
|
||||
});
|
||||
|
||||
function CronjobsPage() {
|
||||
const { data: jobs = [], isLoading, error } = useCronjobs();
|
||||
const { data: limits } = useUserJobsLimits();
|
||||
const { data: agent } = useAgentInstance();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const agentReady = agent?.status === "active" || agent?.status === "ready";
|
||||
const planAllows = (limits?.max_jobs ?? 0) > 0;
|
||||
const limitReached =
|
||||
!!limits && limits.max_jobs !== null
|
||||
? (limits.current_jobs_count ?? 0) >= (limits.max_jobs ?? 0)
|
||||
: false;
|
||||
const canCreate = agentReady && planAllows && !limitReached;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<CalendarClock className="h-6 w-6 text-primary" /> Automações
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Crie cronjobs em linguagem natural — a IA traduz para você.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{limits && limits.max_jobs !== null && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<span className="font-semibold text-foreground">
|
||||
{limits.current_jobs_count ?? 0}
|
||||
</span>
|
||||
{" / "}
|
||||
{limits.max_jobs} automações
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => navigate({ to: "/painel/cronjobs/nova" })}
|
||||
disabled={!canCreate}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" /> Nova automação
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!agentReady && (
|
||||
<div className="rounded-md border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400">
|
||||
Seu agente ainda está sendo provisionado. As automações serão liberadas em seguida.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{agentReady && !planAllows && (
|
||||
<div className="rounded-md border border-border bg-muted/30 p-4 text-sm flex items-center justify-between gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="h-4 w-4 text-muted-foreground" />
|
||||
<span>
|
||||
Seu plano <strong>{limits?.plan_slug ?? "atual"}</strong> não inclui automações.
|
||||
</span>
|
||||
</div>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Link to="/painel/faturamento">Fazer upgrade</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{agentReady && planAllows && limitReached && (
|
||||
<div className="rounded-md border border-border bg-muted/30 p-4 text-sm">
|
||||
Você atingiu o limite de {limits?.max_jobs} automações do plano{" "}
|
||||
<strong>{limits?.plan_slug}</strong>. Pause ou exclua para criar novas, ou faça upgrade.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
|
||||
Erro ao carregar automações: {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-44 rounded-xl border border-border bg-muted/30 animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : jobs.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-border p-12 text-center space-y-3">
|
||||
<CalendarClock className="h-10 w-10 text-muted-foreground mx-auto" />
|
||||
<div>
|
||||
<p className="font-medium">Nenhuma automação ainda</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Comece descrevendo o que você quer automatizar em português.
|
||||
</p>
|
||||
</div>
|
||||
{canCreate && (
|
||||
<Button onClick={() => navigate({ to: "/painel/cronjobs/nova" })}>
|
||||
<Plus className="h-4 w-4 mr-2" /> Criar primeira automação
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{jobs.map((j) => (
|
||||
<CronjobCard key={j.id} job={j} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/routes/painel.cronjobs.nova.tsx
Normal file
28
src/routes/painel.cronjobs.nova.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CronjobWizard } from "@/components/mika/cronjobs/CronjobWizard";
|
||||
|
||||
export const Route = createFileRoute("/painel/cronjobs/nova")({
|
||||
component: NovaCronjobPage,
|
||||
});
|
||||
|
||||
function NovaCronjobPage() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link to="/painel/cronjobs">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar
|
||||
</Link>
|
||||
</Button>
|
||||
<h1 className="text-2xl font-bold">Nova automação</h1>
|
||||
<CronjobWizard
|
||||
onCreated={() => navigate({ to: "/painel/cronjobs" })}
|
||||
onCancel={() => navigate({ to: "/painel/cronjobs" })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue