mechanic-pwa/mechanic-pwa/frontend/src/pages/ActionMenu.tsx

import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { getMe } from "@/api/me";
import { logout } from "@/api/auth";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

interface ActionTile {
  key: string;
  title: string;
  description: string;
  emoji: string;
  onClick: () => void;
  disabled?: boolean;
  comingSoon?: boolean;
}

export default function ActionMenu() {
  const navigate = useNavigate();
  const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000 });

  const tiles: ActionTile[] = [
    {
      key: "inspect",
      title: "Осмотр",
      description: "Создать или продолжить осмотр машины",
      emoji: "🔍",
      onClick: () => navigate("/vehicles?action=inspect"),
    },
    {
      key: "repair",
      title: "Ремонт",
      description: "Лента ремонтов парка + создать новый",
      emoji: "🔧",
      onClick: () => navigate("/repairs"),
    },
  ];

  return (
    <div className="min-h-screen bg-background">
      <header className="flex items-center justify-between p-4 border-b">
        <div>
          <h1 className="text-xl font-semibold">Premium Механик</h1>
          {meQuery.data && (
            <p className="text-xs text-muted-foreground">{meQuery.data.name}</p>
          )}
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => {
            logout();
            navigate("/login", { replace: true });
          }}
        >
          Выйти
        </Button>
      </header>

      <main className="container max-w-2xl py-8 space-y-4">
        <h2 className="text-lg font-semibold text-muted-foreground">
          Что делаем?
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {tiles.map((t) => (
            <Card
              key={t.key}
              onClick={t.disabled ? undefined : t.onClick}
              className={
                "p-5 transition-shadow " +
                (t.disabled
                  ? "opacity-50 cursor-not-allowed"
                  : "cursor-pointer hover:shadow-md active:shadow-sm")
              }
            >
              <div className="flex items-start gap-3">
                <div className="text-3xl leading-none">{t.emoji}</div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <h3 className="font-semibold text-base">{t.title}</h3>
                    {t.comingSoon && (
                      <span className="text-[10px] uppercase tracking-wide bg-muted text-muted-foreground rounded px-1.5 py-0.5">
                        скоро
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-muted-foreground mt-1">
                    {t.description}
                  </p>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </main>
    </div>
  );
}