import type { Metadata } from "next";

import { Example } from "@/components/design-system/example";
import { OnThisPage } from "@/components/design-system/on-this-page";
import { PageHeader } from "@/components/design-system/page-header";
import { SalesReportBookSection } from "@/components/design-system/sections/sales-lists-demo";
import { SupplierPurchasesSection } from "@/components/design-system/sections/lists-demo";
import { CustomerReportsSection } from "@/components/design-system/sections/records-more-demo";
import { Section } from "@/components/design-system/section";
import { DashboardPanelsPattern } from "@/components/design-system/sections/layout-patterns/dashboard-panels-demo";
import { InsightsSection } from "@/components/design-system/sections/operations/insights-demo";
import { ReportingSection } from "@/components/design-system/sections/operations/reporting";
import { ReportsMoreSection } from "@/components/design-system/sections/operations/reports-more-demo";
import { SalesReportsSection } from "@/components/design-system/sections/operations/sales-reports-demo";
import { SalesTrendSection } from "@/components/design-system/sections/report-charts-demo";
import { MoreChartsSection } from "@/components/design-system/sections/more-charts-demo";

export const metadata: Metadata = { title: "Reports | Medora Design System" };

export default function ReportsPage() {
  return (
    <>
      <PageHeader
        title="Reports"
        description="Report tooling and the reports themselves: filters, comparisons and insights, the financial overview and general report, the owner's executive pack, and which dashboard panels each role sees."
      />
      <OnThisPage />
      <ReportingSection />
      <SalesTrendSection />
      <MoreChartsSection />
      <InsightsSection />
      <ReportsMoreSection />
      <SalesReportBookSection />
      <SalesReportsSection />
      <CustomerReportsSection />
      <SupplierPurchasesSection />
      <Section
        id="dashboard-panels"
        title="Dashboard panels per role"
        description="Each dashboard panel is a permission, switched on or off per role (DB-14). The dashboard renders only the allowed panels and closes up; a role with none gets an explanation. Admin always sees every panel. Sensitive panels (profit, money owed, cash) are marked, and the save bar names any sensitive figure you're about to give a role. The rest of each role's permissions are under Roles and users."
      >
        <Example title="Assign panels, then preview" description="Tick Gross profit for Cashier and watch the save bar and the preview" bare>
          <DashboardPanelsPattern />
        </Example>
      </Section>
    </>
  );
}