user_dashboard.ts

import {
  Stack,
  Table,
  Title,
  TextInput,
  useComponentState,
  Card,
  Markdown,
  Button,
} from "@airplane/views";
import * as React from "react";

const rowActions = [
  {
    slug: "update_team_domain",
    label: "Save"
  },
  {
    slug: "delete_team",
    label: "Delete"
  },
  (row) => (
    row.stripeCustomerId ? <Button size="sm" variant="light" compact onClick={() => {
      window.open(`https://dashboard.stripe.com/customers/${row.stripeCustomerId}`, "_blank");
    }}>
      Open Stripe
    </Button> : undefined
  )
]

// Views documentation: https://docs.airplane.dev/views/getting-started
const TeamDashboard = () => {
  const [query, setQuery] = React.useState("");
  const queryState = useComponentState("query");
  const accountsState = useComponentState("accounts");
  const selectedTeam = accountsState.selectedRow;

  const handleKeyDown = (ev) => {
    if (ev.key === "Enter") {
      setQuery(queryState.value);
    }
  }

  return (
    <Stack>
      <Title>Dashboard</Title>

      <TextInput id="query" placeholder="Search teams…" onKeyDown={handleKeyDown} autoComplete="off" />

      {query && <>
        <Table
          id="accounts"
          title="Teams"
          task={{ slug: "lookup_team", params: { query } }}
          columns={[{
            id: "domain",
            label: "Domain",
            canEdit: true
          }]}
          rowActions={rowActions}
          hiddenColumnIDs={["stripeCustomerId", "stripeSubscriptionId"]}
          rowSelection="single"
          defaultPageSize={25}
        />
        {selectedTeam && (
          <Table
            title="Users"
            task={{
              slug: "list_users",
              params: { team_id: selectedTeam.id },
            }}
            hiddenColumnIDs={["id"]}
            defaultPageSize={25}
          />
        )}
      </>}
    </Stack>
  );
};

export default TeamDashboard;