Building a React Admin Dashboard with Tremor Library

...
import { DashboardPage } from "./pages/dashboard";

function App() {
  ...

  return (
    <BrowserRouter>
      <GitHubBanner />
      <RefineKbarProvider>
        <Refine
          i18nProvider={i18nProvider}
          routerProvider={routerBindings}
          ...
        >
          <Routes>
            <Route
              element={
                <Layout>
                  <Outlet />
                </Layout>
              }
            >
              ...
              <Route path="/categories">
                <Route index element={<CategoryList />} />
                <Route path="create" element={<CategoryCreate />} />
                <Route path="edit/:id" element={<CategoryEdit />} />
                <Route path="show/:id" element={<CategoryShow />} />
              </Route>
              <Route path="/dashboard">
                <Route index element={<DashboardPage />} />
              </Route>
              <Route path="*" element={<ErrorComponent />} />
            </Route>
          </Routes>

          <RefineKbar />
          <UnsavedChangesNotifier />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default App;

import React from "react";
import {
  Card,
  Grid,
  Title,
  Text,
  Tab,
  TabList,
  TabGroup,
  TabPanel,
  TabPanels,
} from "@tremor/react";

export const DashboardPage: React.FC = () => {
  return (
    <main className="m-2">
      <Title>Dashboard</Title>
      <Text>View core metrics on the state of your company.</Text>
      <TabGroup className="mt-6">
        <TabList>
          <Tab>Overview</Tab>
          <Tab>Details</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
              <Card>
                <div className="h-28" />
              </Card>
              <Card>
                <div className="h-28" />
              </Card>
              <Card>
                <div className="h-28" />
              </Card>
            </Grid>
            <div className="mt-6">
              <Card>
                <div className="h-80" />
              </Card>
            </div>
          </TabPanel>
          <TabPanel>
            <div className="mt-6">
              <Card>
                <div className="h-96" />
              </Card>
            </div>
          </TabPanel>
        </TabPanels>
      </TabGroup>
    </main>
  );
};

import React from "react";
import {
  Card,
  Grid,
  Title,
  Text,
  Tab,
  TabList,
  TabGroup,
  TabPanel,
  TabPanels,
} from "@tremor/react";

import { useApiUrl, useCustom } from "@refinedev/core";
import dayjs from "dayjs";

const query = {
  start: dayjs().subtract(7, "days").startOf("day"),
  end: dayjs().startOf("day"),
};

export const DashboardPage: React.FC = () => {
  const API_URL = useApiUrl("metrics");

  const { data: dailyRevenue } = useCustom({
    url: `${API_URL}/dailyRevenue`,
    method: "get",
    config: {
      query,
    },
  });

  const { data: dailyOrders } = useCustom({
    url: `${API_URL}/dailyOrders`,
    method: "get",
    config: {
      query,
    },
  });

  const { data: newCustomers } = useCustom({
    url: `${API_URL}/newCustomers`,
    method: "get",
    config: {
      query,
    },
  });

  return <main className="m-2">...</main>;
};

import React from "react";
import {
  Card,
  Grid,
  Title,
  Text,
  Tab,
  TabList,
  TabGroup,
  TabPanel,
  TabPanels,
} from "@tremor/react";

import { useApiUrl, useCustom } from "@refinedev/core";
import dayjs from "dayjs";

const query = {
  start: dayjs().subtract(7, "days").startOf("day"),
  end: dayjs().startOf("day"),
};

import { KpiCard } from "./kpiCard";

const calculatePercentage = (total: number, target: number): number => {
  return Math.round((total / target) * 100 * 100) / 100;
};

export const DashboardPage: React.FC = () => {
  const API_URL = useApiUrl("metrics");

  const { data: dailyRevenue } = useCustom({
    url: `${API_URL}/dailyRevenue`,
    method: "get",
    config: {
      query,
    },
  });

  const { data: dailyOrders } = useCustom({
    url: `${API_URL}/dailyOrders`,
    method: "get",
    config: {
      query,
    },
  });

  const { data: newCustomers } = useCustom({
    url: `${API_URL}/newCustomers`,
    method: "get",
    config: {
      query,
    },
  });

  return (
    <main className="m-2">
      <Title>Dashboard</Title>
      <Text>View core metrics on the state of your company.</Text>
      <TabGroup className="mt-6">
        <TabList>
          <Tab>Overview</Tab>
          <Tab>Details</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
              <KpiCard
                title="Weekly Revenue"
                total={`$ ${dailyRevenue?.data.total ?? 0}`}
                trend={dailyRevenue?.data.trend ?? 0}
                target="$ 10,500"
                percentage={calculatePercentage(
                  dailyRevenue?.data.total ?? 0,
                  10_500,
                )}
              />
              <KpiCard
                title="Weekly Orders"
                total={`${dailyOrders?.data.total ?? 0}`}
                trend={dailyOrders?.data.trend ?? 0}
                target="500"
                percentage={calculatePercentage(
                  dailyOrders?.data.total ?? 0,
                  500,
                )}
              />
              <KpiCard
                title="New Customers"
                total={`${newCustomers?.data.total ?? 0}`}
                trend={newCustomers?.data.trend ?? 0}
                target="200"
                percentage={calculatePercentage(
                  newCustomers?.data.total ?? 0,
                  200,
                )}
              />
            </Grid>
            <div className="mt-6">
              <Card>
                <div className="h-80" />
              </Card>
            </div>
          </TabPanel>
          <TabPanel>
            <div className="mt-6">
              <Card>
                <div className="h-96" />
              </Card>
            </div>
          </TabPanel>
        </TabPanels>
      </TabGroup>
    </main>
  );
};

import { useState } from "react";
import {
  AreaChart,
  Card,
  Flex,
  Text,
  Title,
  Icon,
  TabGroup,
  TabList,
  Tab,
} from "@tremor/react";

import { InformationCircleIcon } from "@heroicons/react/24/solid";

interface IObject {
  date: string;
  value: string;
}

interface IProps {
  revenue: IObject[];
  orders: IObject[];
  customers: IObject[];
}

// Basic formatters for the chart values
const dollarFormatter = (value: number) =>
  `$ ${Intl.NumberFormat("us").format(value).toString()}`;

const numberFormatter = (value: number) =>
  `${Intl.NumberFormat("us").format(value).toString()}`;

const formatDate = new Intl.DateTimeFormat("en-US", {
  month: "short",
  year: "numeric",
  day: "numeric",
});

export function ChartView({ revenue, orders, customers }: IProps) {
  const [selectedKpi, setSelectedKpi] = useState(0);

  // map formatters by selectedKpi
  const formatters: { [key: string]: any } = {
    revenue: dollarFormatter,
    orders: numberFormatter,
    customers: numberFormatter,
  };

  let data = revenue;
  if (selectedKpi === 1) {
    data = orders;
  }

  if (selectedKpi === 2) {
    data = customers;
  }

  const transformedData = data.map((dataObj) => {
    const date = new Date(dataObj.date);
    dataObj.date = formatDate.format(date);

    return dataObj;
  });

  return (
    <Card>
      <div className="md:flex justify-between">
        <div>
          <Flex
            justifyContent="start"
            className="space-x-0.5"
            alignItems="center"
          >
            <Title> Performance History </Title>
            <Icon
              icon={InformationCircleIcon}
              variant="simple"
              tooltip="Shows daily performance change"
            />
          </Flex>
          <Text> Daily increase or decrease per domain </Text>
        </div>
        <div className="mt-6 md:mt-0">
          <TabGroup
            index={selectedKpi}
            onIndexChange={(idx) => setSelectedKpi(idx)}
          >
            <TabList>
              <Tab>Revenue</Tab>
              <Tab>Orders</Tab>
              <Tab>Customers</Tab>
            </TabList>
          </TabGroup>
        </div>
      </div>
      <AreaChart
        data={transformedData}
        index="date"
        categories={["value"]}
        colors={["blue"]}
        showLegend={true}
        valueFormatter={formatters[selectedKpi]}
        yAxisWidth={56}
        className="h-96 mt-8"
      />
    </Card>
  );
}

import React from "react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

import {
  Card,
  Table,
  TableHead,
  TableRow,
  TableHeaderCell,
  TableBody,
  TableCell,
  Text,
  Title,
  Button,
  Flex,
  TextInput,
  Icon,
  DeltaType,
  BadgeDelta,
  Select,
  SelectItem,
} from "@tremor/react";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronDoubleLeftIcon,
  ChevronDoubleRightIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/solid";

const formatCurrency = Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

const formatDate = Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  timeStyle: "medium",
});

const getDeltaType = (status: number): DeltaType => {
  // Order is Pending or Ready
  if (status === 1 || status === 2) return "unchanged";
  // Order is on its way
  if (status === 3) return "moderateIncrease";
  // Order has been delivered
  if (status === 4) return "increase";
  // Order has been cancelled
  if (status === 5) return "decrease";
  // Status is unknown
  return "decrease";
};

export const Details = () => {
  const columns = React.useMemo<ColumnDef<any>[]>(
    () => [
      {
        id: "id",
        accessorKey: "id",
        header: "No.",
        enableColumnFilter: false,
      },
      {
        id: "amount",
        accessorKey: "amount",
        cell: ({ getValue }) => formatCurrency.format(+getValue<any>()),
        header: "Amount",
        enableColumnFilter: false,
      },
      {
        id: "fullName",
        accessorKey: "fullName",
        header: "Ordered By",
        meta: {
          filterOperator: "contains",
        },
      },

      {
        id: "gender",
        accessorKey: "gender",
        header: "Gender",
        enableColumnFilter: false,
      },
      {
        id: "gsm",
        accessorKey: "gsm",
        header: "Tel",
        enableColumnFilter: false,
      },
      {
        id: "address",
        accessorKey: "address",
        header: "Delivery Address",
        meta: {
          filterOperator: "contains",
        },
      },
      {
        id: "status",
        accessorKey: "status",
        cell: function render({ row, getValue }) {
          const deltaType = getDeltaType(row?.original?.statusId ?? 0);
          return (
            <BadgeDelta deltaType={deltaType}>{getValue<any>()}</BadgeDelta>
          );
        },
        header: "Delivery Status",
        enableColumnFilter: false,
      },
      {
        id: "createdAt",
        accessorKey: "createdAt",
        header: "Created At",
        cell: function render({ getValue }) {
          return formatDate.format(new Date(getValue<any>()));
        },
        enableColumnFilter: false,
      },
    ],
    [],
  );

  const {
    getHeaderGroups,
    getRowModel,
    refineCore: {
      tableQueryResult: { data: tableData },
    },
    getState,
    setPageIndex,
    getCanPreviousPage,
    getPageCount,
    getCanNextPage,
    nextPage,
    previousPage,
    setPageSize,
  } = useTable({
    columns,
    refineCoreProps: {
      dataProviderName: "metrics",
      resource: "orders",
      filters: {
        mode: "off",
      },
      queryOptions: {
        select(data) {
          const retrievedData = data.data;
          const transformedData = [];
          for (const dataObj of retrievedData) {
            const {
              id,
              amount,
              orderNumber,
              createdAt,
              user: { fullName, gender, gsm },
              address,
              status,
            } = dataObj;

            transformedData.push({
              id,
              amount: `${amount}`,
              orderNumber,
              createdAt,
              fullName,
              gender,
              gsm,
              address: address?.text,
              status: status?.text,
              statusId: status?.id,
            });
          }

          return { data: transformedData, total: data.total };
        },
      },
    },
  });

  return (
    <Card>
      <Flex justifyContent="start" className="space-x-0.5" alignItems="center">
        <Title>Customer Orders</Title>
        <Icon
          icon={InformationCircleIcon}
          variant="simple"
          tooltip="Shows customer orders"
        />
      </Flex>

      <Table>
        <TableHead>
          {getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <TableHeaderCell key={header.id}>
                  {!header.isPlaceholder && (
                    <>
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                      {header.column.getCanFilter() ? (
                        <TextInput
                          value={
                            (header.column.getFilterValue() as string) ?? ""
                          }
                          placeholder={`Enter ${header.column.id}`}
                          onChange={(e) => {
                            const { value } = e.target;
                            header.column.setFilterValue(value);
                          }}
                        />
                      ) : null}
                    </>
                  )}
                </TableHeaderCell>
              ))}
            </TableRow>
          ))}
        </TableHead>
        <TableBody>
          {getRowModel().rows.map((row) => (
            <TableRow key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Flex
        className="mt-2  flex-wrap gap-2"
        justifyContent="between"
        alignItems="center"
      >
        <Flex className="w-4/8 flex-wrap gap-2">
          <Button
            size="xs"
            icon={ChevronDoubleLeftIcon}
            iconPosition="left"
            onClick={() => setPageIndex(0)}
            disabled={!getCanPreviousPage()}
          >
            First Page
          </Button>
          <Button
            size="xs"
            icon={ChevronLeftIcon}
            iconPosition="left"
            onClick={() => previousPage()}
            disabled={!getCanPreviousPage()}
          >
            Previous Page
          </Button>
          <Button
            size="xs"
            icon={ChevronRightIcon}
            iconPosition="right"
            onClick={() => nextPage()}
            disabled={!getCanNextPage()}
          >
            Next Page
          </Button>
          <Button
            size="xs"
            icon={ChevronDoubleRightIcon}
            iconPosition="right"
            onClick={() => setPageIndex(getPageCount() - 1)}
            disabled={!getCanNextPage()}
          >
            Last Page
          </Button>
        </Flex>
        <Text className="w-1/8">
          Page {getState().pagination.pageIndex + 1} of {getPageCount()}{" "}
        </Text>
        <TextInput
          type="text"
          placeholder="Enter Page"
          className="max-w-xs w-1/8"
          defaultValue={`${getState().pagination.pageIndex + 1}`}
          onChange={(e) => {
            const { value } = e.target;
            if (isNaN(Number(value))) {
              return;
            }
            const page = value ? Number(value) - 1 : 0;
            setPageIndex(page);
          }}
        />

        <Select
          className="w-2/8"
          onValueChange={(value) => setPageSize(Number(value))}
        >
          {[10, 20, 30, 40, 50].map((pageSize) => (
            <SelectItem key={pageSize} value={`${pageSize}`}>
              {pageSize}
            </SelectItem>
          ))}
        </Select>
      </Flex>
    </Card>
  );
};