Dashboards & reports

// apps/<app>/src/api/salesDashboard.ts
import { z } from 'zod';
import { createEndpoint } from 'zitejs/backend';
import { zite } from 'zitejs/db';

export default createEndpoint({
  description: 'Sales dashboard stats',
  inputSchema: z.object({}),
  outputSchema: z.object({
    totalOrders: z.number(),
    totalRevenue: z.number(),
    revenueByDay: z.array(z.object({ date: z.string(), revenue: z.number() })),
  }),
  execute: async () => {
    const totals = await zite.sql({
      query: `
        SELECT
          COUNT(DISTINCT o.id) AS "totalOrders",
          COALESCE(SUM(i."price"), 0) AS "totalRevenue"
        FROM "Orders" o
        LEFT JOIN "ItemsOrders" l ON l."ordersId" = o.id
        LEFT JOIN "Items" i ON i.id = l."itemsId"
      `,
    });

    const byDay = await zite.sql({
      query: `
        SELECT
          to_char(o."orderPlacedAt", 'YYYY-MM-DD') AS date,
          COALESCE(SUM(i."price"), 0) AS revenue
        FROM "Orders" o
        LEFT JOIN "ItemsOrders" l ON l."ordersId" = o.id
        LEFT JOIN "Items" i ON i.id = l."itemsId"
        WHERE o."orderPlacedAt" >= now() - interval '14 days'
        GROUP BY 1
        ORDER BY 1 ASC
      `,
    });

    return {
      totalOrders: Number(totals.rows[0]?.totalOrders ?? 0),
      totalRevenue: Number(totals.rows[0]?.totalRevenue ?? 0),
      revenueByDay: byDay.rows.map(r => ({ date: String(r.date), revenue: Number(r.revenue) })),
    };
  },
});

import { useEffect, useState } from 'react';
import { salesDashboard, SalesDashboardOutputType } from 'zitejs/api';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';

export function Dashboard() {
  const [data, setData] = useState<SalesDashboardOutputType>();
  useEffect(() => { salesDashboard({}).then(setData); }, []);
  if (!data) return null;
  return (
    <ResponsiveContainer width="100%" height={240}>
      <BarChart data={data.revenueByDay}>
        <XAxis dataKey="date" /><YAxis />
        <Bar dataKey="revenue" />
      </BarChart>
    </ResponsiveContainer>
  );
}