infoalloggi-monorepo/apps/infoalloggi/src/components/area-riservata/dashboard.tsx

import { api } from "~/utils/api";
import { LoadingPage } from "~/components/loading";
import type { UsersId } from "~/schemas/public/Users";
import { ServizioContainer } from "~/components/servizio/main";
import { AccordionComp } from "~/components/accordionComp";
import { useTranslation } from "~/providers/I18nProvider";
import TimeserieBarChart from "~/components/timeserieBarChart";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import TimeserieBarChartStacked from "~/components/timeserieBarChartStacked";

export const AdminDashboard = () => {
  const { data: stats, isLoading } = api.stats.adminDashStats.useQuery();

  if (isLoading) return <LoadingPage />;
  return (
    <div className="mx-1 flex-1 overflow-auto">
      <div className="mx-auto pt-4 pb-8">
        <div className="mx-3 items-start justify-between pb-3 md:flex">
          <div className="flex max-w-lg items-center gap-3">
            <h3 className="text-2xl font-bold">Admin Dashboard</h3>
          </div>
        </div>
        {!stats ? (
          <div className="text-red-500">Errore caricamento statistiche</div>
        ) : (
          <div className="grid grid-cols-1 gap-4 px-2 pt-4 sm:grid-cols-2 sm:px-4">
            <Card className="">
              <CardHeader>
                <CardTitle>Utenti</CardTitle>
                <CardDescription>
                  Numero totale di utenti registrati
                </CardDescription>
              </CardHeader>

              <CardContent className="flex h-full items-center justify-center text-6xl font-bold">
                {stats.userCount}
              </CardContent>
            </Card>
            <TimeserieBarChart
              title="Utenti registrati"
              timeserie={stats.userTimeserie}
            />

            <TimeserieBarChartStacked
              title="Servizi creati"
              valueALabel={stats.serviziTimeserie.valueALabel}
              valueBLabel={stats.serviziTimeserie.valueBLabel}
              timeserie={stats.serviziTimeserie.data}
            />

            <TimeserieBarChart
              title="Contatti generati"
              timeserie={stats.contattiTimeserie}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export const UserDashboard = ({ userId }: { userId: UsersId }) => {
  const { data: servizi, isLoading: loadingServizi } =
    api.servizio.getAllServizioAnnunci.useQuery({ userId });
  const { t } = useTranslation();
  return (
    <div className="mx-1 flex-1 overflow-auto">
      <div className="mx-auto pt-4">
        <div className="mx-3 items-start justify-between md:flex">
          <div className="flex max-w-lg items-center gap-3">
            <h3 className="text-2xl font-bold">Le tue ricerche</h3>
          </div>
        </div>

        <div className="flex flex-col space-y-5 px-2">
          {loadingServizi ? (
            <LoadingPage />
          ) : (
            servizi?.map((servizio, idx) => (
              <ServizioContainer
                key={idx}
                servizio={servizio}
                userId={userId}
                isAdmin={false}
              />
            ))
          )}
        </div>
        <AccordionComp
          texts={t.area_riservata.dash_accordion_minifaq}
          className="w-full max-w-full px-2 pt-4"
        />
      </div>
    </div>
  );
};