Add new and returning attendees report

.claude/commands/fix-issue.md

@@ -0,0 +1,74 @@
+---
+description: Read a GitHub issue, branch, plan, fix, and open a PR
+argument-hint: [issue-number]
+allowed-tools: Bash(gh issue view:*), Bash(gh issue list:*), Bash(gh project item-add:*), Bash(gh project item-edit:*), Bash(git checkout:*), Bash(git branch:*), Bash(git add:*), Bash(git commit:*), Bash(git push:*), Bash(gh pr create:*), Bash(gh pr edit:*), Bash(gh api:*), Bash(git status:*), Bash(git diff:*), Bash(git rev-parse:*), Bash(git log:*), Bash(yarn run tsc:*), Bash(bin/rails test:*), Bash(bundle exec rubocop:*), Bash(python3:*), Read, Write, Edit, Glob, Grep
+---
+
+## Issue to fix
+
+Issue number: $ARGUMENTS
+
+## Step 1: Read the issue
+
+Fetch the issue details:
+
+Issue content: !`gh issue view $ARGUMENTS --json title,body,labels,comments`
+
+## Step 2: Move the issue to "In Progress"
+
+Add the issue to the Intercode project board and set its status to "In Progress":
+
+```bash
+ISSUE_URL=$(gh issue view $ARGUMENTS --json url --jq '.url')
+ITEM_ID=$(gh project item-add 1 --owner neinteractiveliterature --url "$ISSUE_URL" --format json | python3 -c "import sys,json; print(json.load(sys.stdin)['id'])")
+gh project item-edit --id "$ITEM_ID" --field-id PVTSSF_lADOABuqO84AAdTMzgAPetE --project-id PVT_kwDOABuqO84AAdTM --single-select-option-id 47fc9ee4
+```
+
+## Step 3: Create a branch
+
+- Derive a short, descriptive branch name from the issue title (use kebab-case, prefix with the issue number, e.g. `1234-fix-login-bug`)
+- Check out a new branch from `main`: `git checkout -b <branch-name>`
+
+## Step 4: Plan
+
+Before writing any code:
+
+1. Explore the codebase to understand the relevant area(s) affected by the issue
+2. Read the CLAUDE.md and agent-docs/ files if you need context about conventions
+3. Formulate a clear plan: which files to change and what changes to make
+4. Present the plan to the user and **wait for approval** before proceeding
+
+## Step 5: Implement the fix
+
+- Follow all conventions described in CLAUDE.md and the agent-docs/ topic guides
+- Make the minimum changes necessary to fix the issue
+- For TypeScript changes: run `yarn run tsc --noEmit` to check for type errors
+- For Ruby changes: run `bin/rails test` on the relevant test file(s)
+- Fix any errors before proceeding
+
+## Step 6: Commit
+
+- Stage all changes with `git add`
+- Write a concise, descriptive commit message referencing the issue (e.g. `Fix login bug (#1234)`)
+- Commit the changes
+
+## Step 7: Open a PR
+
+1. Push the branch: `git push -u origin <branch-name>`
+2. Create a PR with `gh pr create`:
+   - Title should summarize the fix
+   - Body should reference the issue (`Fixes #<issue-number>`) and briefly describe what changed
+3. Add labels using the GitHub REST API (required — gh pr edit is broken):
+
+   ```
+   gh api repos/neinteractiveliterature/intercode/issues/<PR-number>/labels -X POST -f 'labels[]=<category>' -f 'labels[]=<version-bump>'
+   ```
+
+   - Pick one category label: `bug`, `enhancement`, `feature`, `performance`, `refactor`, `documentation`, `testing`, `dependencies`
+   - Pick one version bump label: `major`, `minor`, `patch`
+
+## Important notes
+
+- Do not skip the planning step or proceed without user approval
+- Do not make changes beyond what is needed to fix the issue
+- If you encounter an error you cannot resolve after 2-3 attempts, stop and ask the user for direction

.github/workflows/ci.yml

@@ -308,6 +308,8 @@ jobs:
       - minitest
       - minitest-system
     steps:
+      - name: Check out repository
+        uses: actions/checkout@v5
       - name: Download Minitest coverage
         uses: actions/download-artifact@v6
         with:
@@ -323,8 +325,6 @@ jobs:
         with:
           name: vitest-coverage
           path: vitest-coverage
-      - name: Check out repository
-        uses: actions/checkout@v5
       - name: Merge coverage reports
         run: ruby scripts/merge_coverage.rb merged-coverage.xml minitest-coverage/coverage.xml vitest-coverage/cobertura-coverage.xml minitest-system-coverage/coverage.xml
       - name: Generate Coverage Report

app/graphql/types/convention_reports_type.rb

@@ -13,6 +13,10 @@ class Types::ConventionReportsType < Types::BaseObject
   field :events_by_choice, [Types::EventWithChoiceCountsType], null: false do
     description "A report of events people signed up for along with which numbered choice they were for that person."
   end
+  field :new_and_returning_attendees, Types::NewAndReturningAttendeesType, null: false do
+    description "A report of attendees split into those who are new to this organization's conventions " \
+                  "and those who have attended before."
+  end
   field :sales_count_by_product_and_payment_amount, [Types::SalesCountByProductAndPaymentAmountType], null: false do
     description "A breakdown of all product and ticket sales in this convention."
   end

app/graphql/types/new_and_returning_attendees_type.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+class Types::NewAndReturningAttendeesType < Types::BaseObject
+  description "A report grouping convention attendees into those new to the organization " \
+                "and those who have attended before."
+
+  field :organization_attendance_counts,
+        [Types::OrganizationAttendanceCountType],
+        null: false,
+        description:
+          "Attendance counts per attendee across all conventions in the organization, " \
+            "used to distinguish new attendees from returning ones."
+end

app/graphql/types/organization_attendance_count_type.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+class Types::OrganizationAttendanceCountType < Types::BaseObject
+  description "Attendance data for a single attendee across all conventions in the organization."
+
+  field :attended_conventions,
+        [Types::ConventionType],
+        null: false,
+        description: "All conventions in the organization that this attendee has attended."
+  field :current_convention_user_con_profile,
+        Types::UserConProfileType,
+        null: false,
+        description: "The attendee's profile for the current convention."
+  field :user_con_profiles,
+        [Types::UserConProfileType],
+        null: false,
+        description: "IDs of all the attendee's profiles across conventions in the organization."
+  field :user_id, ID, null: false, description: "The ID of the user account for this attendee." # rubocop:disable GraphQL/ExtractType
+
+  def attended_conventions
+    dataloader.with(Sources::ModelById, Convention).load_all(object.attended_convention_ids)
+  end
+
+  def user_con_profiles
+    dataloader.with(Sources::ModelById, UserConProfile).load_all(object.user_con_profile_ids)
+  end
+end

app/javascript/AppRouter.tsx

@@ -682,6 +682,7 @@ const commonInConventionRoutes: RouteObject[] = [
     path: '/reports',
     element: <AuthorizationRequiredRouteGuard abilities={['can_read_reports']} />,
     children: [
+      { path: 'new_and_returning_attendees', lazy: () => import('./Reports/NewAndReturningAttendees') },
       { path: 'attendance_by_payment_amount', lazy: () => import('./Reports/AttendanceByPaymentAmount') },
       { path: 'event_provided_tickets', lazy: () => import('./Reports/EventProvidedTickets') },
       { path: 'events_by_choice', lazy: () => import('./Reports/EventsByChoice') },

app/javascript/Reports/NewAndReturningAttendees.tsx

@@ -0,0 +1,233 @@
+import { LoaderFunction, useLoaderData, RouterContextProvider, Link } from 'react-router';
+import { useTranslation } from 'react-i18next';
+
+import usePageTitle from '../usePageTitle';
+import { NewAndReturningAttendeesQueryData, NewAndReturningAttendeesQueryDocument } from './queries.generated';
+import { apolloClientContext } from 'AppContexts';
+import { ReactNode, useMemo, useState } from 'react';
+import sortBy from 'lodash/sortBy';
+import { joinReact } from 'RenderingUtils';
+import { Convention } from 'graphqlTypes.generated';
+import classNames from 'classnames';
+
+export const loader: LoaderFunction<RouterContextProvider> = async ({ context }) => {
+  const client = context.get(apolloClientContext);
+  const { data } = await client.query<NewAndReturningAttendeesQueryData>({
+    query: NewAndReturningAttendeesQueryDocument,
+  });
+  return data;
+};
+
+type AttendeeProfile =
+  NewAndReturningAttendeesQueryData['convention']['reports']['new_and_returning_attendees']['organization_attendance_counts'][number];
+
+function ConventionLink({ convention }: { convention: Pick<Convention, 'domain' | 'name'> }) {
+  return (
+    <a href={new URL(`//${convention.domain}`, window.location.href).toString()} target="_blank" rel="noreferrer">
+      {convention.name}
+    </a>
+  );
+}
+
+function AttendeeRow({ attendee }: { attendee: AttendeeProfile }) {
+  const { t } = useTranslation();
+  const [showAll, setShowAll] = useState(false);
+  const attendedConventions = useMemo(
+    () =>
+      sortBy([...attendee.attended_conventions], (convention) =>
+        convention.starts_at ? new Date(convention.starts_at).getTime() : 0,
+      ),
+    [attendee.attended_conventions],
+  );
+
+  return (
+    <tr>
+      <td>
+        <Link to={`/user_con_profiles/${attendee.current_convention_user_con_profile.id}`}>
+          {attendee.current_convention_user_con_profile.name_inverted}
+        </Link>
+      </td>
+      <td>
+        <a href={`mailto:${attendee.current_convention_user_con_profile.email}`}>
+          {attendee.current_convention_user_con_profile.email}
+        </a>
+      </td>
+      <td>
+        {attendedConventions.length <= 3 || showAll ? (
+          joinReact(
+            attendedConventions.map((convention) => <ConventionLink key={convention.id} convention={convention} />),
+            ', ',
+          )
+        ) : (
+          <>
+            {joinReact(
+              attendedConventions
+                .slice(0, 3)
+                .map((convention) => <ConventionLink key={convention.id} convention={convention} />),
+              ', ',
+            )}
+            ,{' '}
+            <a
+              onClick={(event) => {
+                event.preventDefault();
+                setShowAll(true);
+              }}
+              href="#"
+            >
+              {t('admin.reports.newAndReturningAttendees.moreConventions', { count: attendedConventions.length - 3 })}
+            </a>
+          </>
+        )}
+      </td>
+    </tr>
+  );
+}
+
+function SortableHeader<ColumnName extends string>({
+  columnName,
+  sortColumn,
+  reverse,
+  children,
+  setSortColumn,
+  setReverse,
+}: {
+  columnName: ColumnName;
+  sortColumn: ColumnName;
+  reverse: boolean;
+  children: ReactNode;
+  setSortColumn: React.Dispatch<React.SetStateAction<ColumnName>>;
+  setReverse: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <th
+      className={classNames('cursor-pointer', {
+        'fw-bold': sortColumn === columnName,
+        'fw-normal': sortColumn !== columnName,
+      })}
+      onClick={() => {
+        if (sortColumn === columnName) {
+          setReverse((prevReverse) => !prevReverse);
+        } else {
+          setSortColumn(columnName);
+          setReverse(false);
+        }
+      }}
+    >
+      {children}
+      {/* eslint-disable-next-line i18next/no-literal-string */}
+      {sortColumn === columnName && (reverse ? ' ▼' : ' ▲')}
+    </th>
+  );
+}
+
+function AttendeeTable({ attendees }: { attendees: AttendeeProfile[] }) {
+  const { t } = useTranslation();
+  const [sortColumn, setSortColumn] = useState<'name' | 'email' | 'conventions'>('name');
+  const [reverse, setReverse] = useState(false);
+
+  const attendeesSorted = useMemo(() => {
+    const attendeesAsc = [...attendees].sort((a, b) => {
+      if (sortColumn === 'name') {
+        return a.current_convention_user_con_profile.name_inverted.localeCompare(
+          b.current_convention_user_con_profile.name_inverted,
+          undefined,
+          { sensitivity: 'base' },
+        );
+      } else if (sortColumn === 'email') {
+        return (a.current_convention_user_con_profile.email ?? '').localeCompare(
+          b.current_convention_user_con_profile.email ?? '',
+          undefined,
+          { sensitivity: 'base' },
+        );
+      } else {
+        return a.attended_conventions.length - b.attended_conventions.length;
+      }
+    });
+
+    if (reverse) {
+      return attendeesAsc.reverse();
+    } else {
+      return attendeesAsc;
+    }
+  }, [attendees, reverse, sortColumn]);
+
+  return (
+    <table className="table table-striped">
+      <thead>
+        <tr>
+          <SortableHeader
+            columnName="name"
+            sortColumn={sortColumn}
+            reverse={reverse}
+            setSortColumn={setSortColumn}
+            setReverse={setReverse}
+          >
+            {t('admin.reports.newAndReturningAttendees.nameHeader')}
+          </SortableHeader>
+          <SortableHeader
+            columnName="email"
+            sortColumn={sortColumn}
+            reverse={reverse}
+            setSortColumn={setSortColumn}
+            setReverse={setReverse}
+          >
+            {t('admin.reports.newAndReturningAttendees.emailHeader')}
+          </SortableHeader>
+          <SortableHeader
+            columnName="conventions"
+            sortColumn={sortColumn}
+            reverse={reverse}
+            setSortColumn={setSortColumn}
+            setReverse={setReverse}
+          >
+            {t('admin.reports.newAndReturningAttendees.conventionsHeader')}
+          </SortableHeader>
+        </tr>
+      </thead>
+      <tbody>
+        {attendeesSorted.map((attendee) => (
+          <AttendeeRow key={attendee.user_id} attendee={attendee} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function NewAndReturningAttendees() {
+  const { t } = useTranslation();
+  const data = useLoaderData() as NewAndReturningAttendeesQueryData;
+  usePageTitle(t('admin.reports.newAndReturningAttendees.title'));
+
+  const { organization_attendance_counts } = data.convention.reports.new_and_returning_attendees;
+  const newAttendeeCount = useMemo(
+    () => organization_attendance_counts.filter((oac) => oac.attended_conventions.length < 2).length,
+    [organization_attendance_counts],
+  );
+  const returningAttendeeCount = useMemo(
+    () => organization_attendance_counts.filter((oac) => oac.attended_conventions.length >= 2).length,
+    [organization_attendance_counts],
+  );
+
+  return (
+    <>
+      <h1 className="mb-4">{t('admin.reports.newAndReturningAttendees.title')}</h1>
+
+      <div className="card mb-4">
+        <div className="card-body">
+          <dl className="row mb-0">
+            <dt className="col-sm-6">{t('admin.reports.newAndReturningAttendees.newAttendeesLabel')}</dt>
+            <dd className="col-sm-6">{newAttendeeCount}</dd>
+            <dt className="col-sm-6">{t('admin.reports.newAndReturningAttendees.returningAttendeesLabel')}</dt>
+            <dd className="col-sm-6">{returningAttendeeCount}</dd>
+            <dt className="col-sm-6">{t('admin.reports.newAndReturningAttendees.totalLabel')}</dt>
+            <dd className="col-sm-6">{organization_attendance_counts.length}</dd>
+          </dl>
+        </div>
+      </div>
+
+      <AttendeeTable attendees={organization_attendance_counts} />
+    </>
+  );
+}
+
+export const Component = NewAndReturningAttendees;