Skip to content
Snapshot Docs

Admin Dashboard

A complete admin dashboard with sidebar navigation, live KPI stats, a CRUD data table backed by API calls, and create/edit/delete flows with loading and error handling.

import { createSnapshot } from "@lastshotlabs/snapshot";
import {
  LayoutBase, NavBase, NavUserMenuBase, ContainerBase,
  GridBase, RowBase, ColumnBase, SpacerBase,
  StatCardBase, DataTableBase, ButtonBase,
  ModalBase, DrawerBase, ConfirmDialogBase,
  InputField, SelectField, AlertBase, SkeletonBase,
  resolveTokens,
} from "@lastshotlabs/snapshot/ui";
import { useState, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";


const snap = createSnapshot({
  apiUrl: "/api",
  loginPath: "/login",
  homePath: "/",
});


const snapshotCss = resolveTokens({
  flavor: "neutral",
  overrides: {
    colors: { primary: "#3b82f6" },
    font: { sans: "Inter" },
  },
});


// ── Types ─────────────────────────────────────────────────────────────────


interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "member";
  status: "active" | "inactive";
}


interface Stats {
  revenue: number;
  revenueTrend: number;
  users: number;
  usersTrend: number;
  orders: number;
  ordersTrend: number;
  conversion: number;
  conversionTrend: number;
}


// ── App Shell ─────────────────────────────────────────────────────────────


export function AdminApp() {
  const { user, isLoading } = snap.useUser();
  const { mutate: logout } = snap.useLogout();


  if (isLoading) return null;
  if (!user) return null;


  return (
    <snap.QueryProvider>
      <LayoutBase
        variant="sidebar"
        nav={
          <NavBase
            variant="sidebar"
            logo={{ text: "Admin", path: "/" }}
            items={[
              { label: "Dashboard", path: "/", icon: "home" },
              { label: "Users", path: "/users", icon: "users" },
              { label: "Orders", path: "/orders", icon: "shopping-cart" },
              { label: "Settings", path: "/settings", icon: "settings" },
            ]}
            collapsible
          />
        }
      >
        <ContainerBase maxWidth="xl" padding="lg">
          <RowBase justify="between" align="center">
            <h1>Dashboard</h1>
            <NavUserMenuBase
              userName={user.name}
              userAvatar={user.avatarUrl}
              items={[
                { label: "Profile", icon: "user", onClick: () => (window.location.href = "/profile") },
                { label: "Sign out", icon: "log-out", onClick: () => logout() },
              ]}
            />
          </RowBase>
          <SpacerBase size="lg" />
          <StatsRow />
          <SpacerBase size="xl" />
          <UsersTable />
        </ContainerBase>
      </LayoutBase>
    </snap.QueryProvider>
  );
}


// ── Stats Row ─────────────────────────────────────────────────────────────


function StatsRow() {
  const { data: stats, isLoading } = useQuery<Stats>({
    queryKey: ["/stats/dashboard"],
    queryFn: () => snap.api.get("/stats/dashboard"),
  });


  if (isLoading) {
    return (
      <GridBase columns={4} gap="md">
        {[1, 2, 3, 4].map((i) => <SkeletonBase key={i} height="120px" />)}
      </GridBase>
    );
  }


  return (
    <GridBase columns={4} gap="md">
      <StatCardBase
        label="Total Revenue"
        value={`$${(stats?.revenue ?? 0).toLocaleString()}`}
        icon="dollar-sign"
        trend={{
          direction: (stats?.revenueTrend ?? 0) >= 0 ? "up" : "down",
          value: `${(stats?.revenueTrend ?? 0) >= 0 ? "+" : ""}${stats?.revenueTrend ?? 0}%`,
          percentage: Math.abs(stats?.revenueTrend ?? 0),
          sentiment: (stats?.revenueTrend ?? 0) >= 0 ? "positive" : "negative",
        }}
      />
      <StatCardBase
        label="Active Users"
        value={(stats?.users ?? 0).toLocaleString()}
        icon="users"
        trend={{
          direction: (stats?.usersTrend ?? 0) >= 0 ? "up" : "down",
          value: `${(stats?.usersTrend ?? 0) >= 0 ? "+" : ""}${stats?.usersTrend ?? 0}%`,
          percentage: Math.abs(stats?.usersTrend ?? 0),
          sentiment: (stats?.usersTrend ?? 0) >= 0 ? "positive" : "negative",
        }}
      />
      <StatCardBase
        label="Orders"
        value={(stats?.orders ?? 0).toLocaleString()}
        icon="shopping-cart"
        trend={{
          direction: (stats?.ordersTrend ?? 0) >= 0 ? "up" : "down",
          value: `${(stats?.ordersTrend ?? 0) >= 0 ? "+" : ""}${stats?.ordersTrend ?? 0}%`,
          percentage: Math.abs(stats?.ordersTrend ?? 0),
          sentiment: (stats?.ordersTrend ?? 0) >= 0 ? "positive" : "negative",
        }}
      />
      <StatCardBase
        label="Conversion"
        value={`${stats?.conversion ?? 0}%`}
        icon="percent"
        trend={{
          direction: (stats?.conversionTrend ?? 0) >= 0 ? "up" : "down",
          value: `${(stats?.conversionTrend ?? 0) >= 0 ? "+" : ""}${stats?.conversionTrend ?? 0}%`,
          percentage: Math.abs(stats?.conversionTrend ?? 0),
          sentiment: (stats?.conversionTrend ?? 0) >= 0 ? "positive" : "neutral",
        }}
      />
    </GridBase>
  );
}


// ── Users CRUD Table ──────────────────────────────────────────────────────


function UsersTable() {
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState({ column: "name", direction: "asc" as "asc" | "desc" });
  const pageSize = 10;


  // Fetch users with server-side pagination, search, and sorting
  const url = `/users?page=${page}&pageSize=${pageSize}&search=${search}&sort=${sort.column}&order=${sort.direction}`;
  const { data, isLoading, error } = useQuery<{ items: User[]; total: number }>({
    queryKey: ["/users", page, pageSize, search, sort.column, sort.direction],
    queryFn: () => snap.api.get(url),
  });


  // Mutations
  const createMutation = useMutation({
    mutationFn: (user: Omit<User, "id">) => snap.api.post("/users", user),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["/users"] }),
  });


  const updateMutation = useMutation({
    mutationFn: (user: User) => snap.api.patch(`/users/${user.id}`, user),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["/users"] }),
  });


  const deleteMutation = useMutation({
    mutationFn: (id: string) => snap.api.delete(`/users/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["/users"] }),
  });


  // Overlay state
  const [createOpen, setCreateOpen] = useState(false);
  const [editUser, setEditUser] = useState<User | null>(null);
  const [deleteUser, setDeleteUser] = useState<User | null>(null);
  const [successMsg, setSuccessMsg] = useState<string | null>(null);


  const showSuccess = (msg: string) => {
    setSuccessMsg(msg);
    setTimeout(() => setSuccessMsg(null), 3000);
  };


  const columns = [
    { field: "name" as const, label: "Name", sortable: true },
    { field: "email" as const, label: "Email", sortable: true },
    { field: "role" as const, label: "Role", format: "badge" as const, badgeColors: { admin: "blue", member: "gray" } },
    { field: "status" as const, label: "Status", format: "badge" as const, badgeColors: { active: "green", inactive: "red" } },
  ];


  return (
    <>
      {successMsg && <AlertBase severity="success" onClose={() => setSuccessMsg(null)}>{successMsg}</AlertBase>}


      <RowBase justify="between" align="center">
        <h2>Users</h2>
        <ButtonBase label="Add User" icon="plus" onClick={() => setCreateOpen(true)} />
      </RowBase>
      <SpacerBase size="md" />


      <DataTableBase
        columns={columns}
        rows={data?.items ?? []}
        isLoading={isLoading}
        error={error?.message}
        emptyMessage="No users found"
        searchable
        search={search}
        onSearchChange={setSearch}
        sort={sort}
        onSortChange={(col) => setSort((prev) =>
          prev.column === col
            ? { column: col, direction: prev.direction === "asc" ? "desc" : "asc" }
            : { column: col, direction: "asc" }
        )}
        pagination={{
          currentPage: page,
          totalPages: Math.ceil((data?.total ?? 0) / pageSize),
          pageSize,
          totalRows: data?.total ?? 0,
        }}
        onPageChange={setPage}
        hoverable
        striped
        rowActions={[
          { label: "Edit", icon: "edit", onAction: (row) => setEditUser(row as User) },
          { label: "Delete", icon: "trash", variant: "destructive", onAction: (row) => setDeleteUser(row as User) },
        ]}
      />


      {/* Create Modal */}
      <UserFormModal
        title="Create User"
        open={createOpen}
        onClose={() => { setCreateOpen(false); createMutation.reset(); }}
        onSave={(user) => {
          createMutation.mutate(user, {
            onSuccess: () => { setCreateOpen(false); showSuccess(`${user.name} created`); },
          });
        }}
        isPending={createMutation.isPending}
        error={createMutation.error?.message}
      />


      {/* Edit Drawer */}
      <EditUserDrawer
        user={editUser}
        onClose={() => { setEditUser(null); updateMutation.reset(); }}
        onSave={(updated) => {
          updateMutation.mutate(updated, {
            onSuccess: () => { setEditUser(null); showSuccess(`${updated.name} updated`); },
          });
        }}
        isPending={updateMutation.isPending}
        error={updateMutation.error?.message}
      />


      {/* Delete Confirmation */}
      <ConfirmDialogBase
        title="Delete User"
        description={`Are you sure you want to delete ${deleteUser?.name}? This action cannot be undone.`}
        open={deleteUser !== null}
        onClose={() => { setDeleteUser(null); deleteMutation.reset(); }}
        onConfirm={() => {
          if (deleteUser) {
            const name = deleteUser.name;
            deleteMutation.mutate(deleteUser.id, {
              onSuccess: () => showSuccess(`${name} deleted`),
            });
            setDeleteUser(null);
          }
        }}
        confirmLabel="Delete"
        confirmVariant="destructive"
      />
    </>
  );
}


// ── Create User Modal ─────────────────────────────────────────────────────


function UserFormModal({ title, open, onClose, onSave, isPending, error }: {
  title: string;
  open: boolean;
  onClose: () => void;
  onSave: (user: Omit<User, "id">) => void;
  isPending: boolean;
  error?: string;
}) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<"admin" | "member">("member");


  const handleClose = () => {
    setName(""); setEmail(""); setRole("member");
    onClose();
  };


  return (
    <ModalBase
      title={title}
      open={open}
      onClose={handleClose}
      footer={[
        { label: "Cancel", variant: "outline", onClick: handleClose },
        {
          label: isPending ? "Creating..." : "Create",
          onClick: () => onSave({ name, email, role, status: "active" }),
          disabled: isPending || !name || !email,
        },
      ]}
    >
      <ColumnBase gap="md">
        {error && <AlertBase severity="error">{error}</AlertBase>}
        <InputField label="Name" value={name} onChange={setName} required />
        <InputField label="Email" type="email" value={email} onChange={setEmail} required />
        <SelectField
          label="Role"
          value={role}
          onChange={(v) => setRole(v as "admin" | "member")}
          options={[{ label: "Admin", value: "admin" }, { label: "Member", value: "member" }]}
        />
      </ColumnBase>
    </ModalBase>
  );
}


// ── Edit User Drawer ──────────────────────────────────────────────────────


function EditUserDrawer({ user, onClose, onSave, isPending, error }: {
  user: User | null;
  onClose: () => void;
  onSave: (user: User) => void;
  isPending: boolean;
  error?: string;
}) {
  const [draft, setDraft] = useState<User | null>(null);


  // Sync draft when a new user is opened for editing
  useEffect(() => {
    if (user) setDraft({ ...user });
  }, [user?.id]);


  const activeUser = draft ?? user;


  return (
    <DrawerBase
      title="Edit User"
      side="right"
      size="md"
      open={user !== null}
      onClose={() => { setDraft(null); onClose(); }}
      footer={[
        { label: "Cancel", variant: "outline", onClick: () => { setDraft(null); onClose(); } },
        {
          label: isPending ? "Saving..." : "Save",
          onClick: () => { if (activeUser) onSave(activeUser); },
          disabled: isPending,
        },
      ]}
    >
      {activeUser && (
        <ColumnBase gap="md">
          {error && <AlertBase severity="error">{error}</AlertBase>}
          <InputField label="Name" value={activeUser.name} onChange={(v) => setDraft({ ...activeUser, name: v })} />
          <InputField label="Email" type="email" value={activeUser.email} onChange={(v) => setDraft({ ...activeUser, email: v })} />
          <SelectField
            label="Role"
            value={activeUser.role}
            onChange={(v) => setDraft({ ...activeUser, role: v as "admin" | "member" })}
            options={[{ label: "Admin", value: "admin" }, { label: "Member", value: "member" }]}
          />
          <SelectField
            label="Status"
            value={activeUser.status}
            onChange={(v) => setDraft({ ...activeUser, status: v as "active" | "inactive" })}
            options={[{ label: "Active", value: "active" }, { label: "Inactive", value: "inactive" }]}
          />
        </ColumnBase>
      )}
    </DrawerBase>
  );
}

What this includes

Section titled “What this includes”
  • Sidebar navigation with collapsible menu
  • User dropdown with sign-out
  • Live KPI stats fetched from /stats/dashboard with skeleton loading
  • Server-paginated data table with search, sorting, and row actions
  • Create user modal with loading state and error display
  • Edit user drawer with draft state so edits don’t mutate the original
  • Delete confirmation with loading state
  • Success alerts that auto-dismiss after 3 seconds
  • Query invalidation so the table refreshes after every mutation

API contract

Section titled “API contract”

This recipe expects your Slingshot backend to expose:

MethodEndpointPurpose
GET/stats/dashboardReturns Stats object
GET/users?page=&pageSize=&search=&sort=&order=Returns { items: User[], total: number }
POST/usersCreates a user, returns User
PATCH/users/:idUpdates a user, returns User
DELETE/users/:idDeletes a user
Section titled “Related”