REGISTRATION DETAILS – Mockup
[email protected] · admin
Log Out
REGISTRATION DETAILS
2023/24
Currently: Table view
MOCKUP REVIEW TOOL (v18 — school-year indicator) — apply a sample selection:
MOCKUP REVIEW TOOL (not part of the real feature) — currently showing:
Registration Snapshot
An application can contain multiple students. Click any number below to open the full application grid for that group — search, inline-edit, or delete records.
An application can contain multiple students. Click any number below to open the full application grid for that group — search, inline-edit, or delete records.
Current Totals
481 applications containing
486 students
486 students
By Grade
41 rows| Grade | Gen. Apps | Gen. Students | Sibling Apps | Sibling Students | Total Apps | Total Students | |
|---|---|---|---|---|---|---|---|
| Totals | 449 | 454 | 32 | 32 | 481 | 486 | |
More views can be added here without changing the underlying data
Total Students by Grade (top 15 by volume)
What this chart shows
This chart shows how many students applied for each grade or program. The longest bar is the grade that the most students want. The bars are put in order from most students to fewest, so the top of the list is always the busiest grade.
Overall General vs. Sibling Split
What this chart shows
This circle shows two groups of students. The blue part is students who applied the normal way. The gold part is students who already have a brother or sister at the school, so they get priority. A bigger gold part means more students got in through sibling priority this year.
General vs. Sibling by Grade
What this chart shows
Each bar is one grade. The blue part of the bar is students who applied the normal way. The gold part on top is students who get priority because they have a brother or sister already at the school. If a bar has a big gold part, that grade has a lot of sibling applicants this year.
Applications vs. Students by Grade — gap shows multi-student applications (siblings applying together)
What this chart shows
Each grade has two bars. The gray bar is how many application forms came in. The blue bar is how many students those forms cover. When the blue bar is taller than the gray bar, it means some families applied together on one form — like two brothers or sisters on the same application.
Compare School Years
Demo data — requires new backend aggregation, see notes belowThis school has 5 years of history — new schools would see fewer, or the option grayed out in year one.
to
Pick a few grades to track — too many lines gets hard to read.
Select at least one school year and click "Render Chart" to see the comparison.
Charts summarize the full result set — switch to Table to drill into individual applications.
v13 chart review note: a sample charts file was reviewed for additional ideas. Two of its four charts (an overall General/Sibling donut, and an Applications-vs-Students grouped bar) were functionally identical to charts already on this page and were not added — duplicating them would mean two chart options answering the same question. Two ideas were genuinely new and were incorporated: a per-grade General/Sibling stacked bar (new chart, below), and a "trend by grade across years" angle folded into the existing Year-over-Year builder as a second mode rather than a separate chart, since it shares the same year-selection UI.
Developer implementation notes (SaaS-safe):
- No separate Roster button/column. Every count (Gen. Apps, Gen. Students, Sibling Apps, Sibling Students, Total Apps, Total Students) is a hyperlink into the existing drill-down application grid — matching current production behavior exactly, just carried into the new layout.
- Grouping key is parsed from the grade/program label (leading grade token before the first hyphen). Rows with no parseable grade (e.g. "Not in school") fall into an "Other" group rather than being dropped or erroring.
- Totals row is pinned as a table
<tfoot>, not just the last data row — stays visually distinct and, with FixedHeader/footer, could stay visible while scrolling. - Card view always renders every row — it never hides data. At
CARD_WARNING_THRESHOLD(13) rows or more, a banner appears above the cards suggesting Table/Charts; below that, no banner renders at all, so a 5-row K-5 school sees a clean grid with no message. The "recommended" badge on the view toggle, and the recommendation hint next to the "Default view on login" control, both read from this same constant, so all three pieces of UI can never disagree with each other. - "By Grade" replaces "By Grade/Program" throughout — Program is a California-specific concept (Seat Based vs. Home Study); the row label itself already carries that detail (e.g. "1-Home Study Program"), so "Grade" is the label that's accurate for every school, not just multi-program ones.
- Chart view is now a dropdown of independent panes, each built once on first selection. Adding another chart is a new
<option>+ a new pane + a case inbuildChart()— no change to the other charts or the underlying data fetch. - v8: Year-over-Year builder. All figures in this chart are fabricated client-side for demo purposes only — there is no real backend endpoint behind them. Shipping this for real requires a new aggregation endpoint: monthly totals, grouped by school year and by grade, for however many years of history a school has. That is a materially different query shape than every other view on this page (which only ever answer "give me the current snapshot"), and should be scoped and estimated separately from the rest of this page's rebuild.
- Year checkboxes, grade filter, and month range are all "configure, then render" — unlike Cards/Table/other Charts, which load and display immediately. New schools with less than a year of history would see this option with fewer (or zero) selectable years rather than hidden entirely, so the feature is discoverable even before it's useful to them.
- v9: "Copy image" on every chart. Uses
canvas.toBlob()+ the Clipboard API to copy the chart directly to the system clipboard — no app is launched, nothing leaves the browser. Falls back to a plain PNG download if the browser doesn't support writing images to the clipboard (older Firefox, mainly), so the button always produces something usable either way. This only works for canvas-based content (the charts); doing the same for Cards or Table would need a DOM-to-canvas library like html2canvas and should be scoped as a separate, heavier feature if wanted. - v10/v11: branded footer baked into the exported image. A small "INTEGRITY6 | CHARTER SCHOOL | ENROLLMENT INTELLIGENCE" line is composited onto the canvas before it's copied or downloaded — not added as separate clipboard text, since most paste targets (Outlook, Gmail, Slack) only honor one clipboard item and would silently drop a text-only attribution. Deliberately kept quiet: one gray line, uniform font/weight/size throughout, a 1px divider instead of a bold accent bar — meant to read as a photo credit on a board packet slide, not as an ad. Text is vertically centered on the footer band (not baseline-anchored) specifically to avoid clipping descenders like the "g" in "Integrity6." Fonts/colors here intentionally come from the integrity6.com marketing site, not the admin app's own Bootstrap styling — this artifact is marketing collateral leaving the building, the on-screen tool is not. QA target for the clipboard-image feature: Chrome N-1 per standing supportability policy; Safari/Firefox fall back to a plain download and are fixed as-needed.
- v12: chart title baked into the export, plus breathing room before the footer. Without this, pasting the image elsewhere loses all context — just bars/lines with no label. Title is read from each button's
data-title(static charts) ordata-title-el(year-over-year, since its title changes based on the user's selections) at click time, so it always matches what's on screen. A ~28px whitespace gap now separates the chart from the footer band so the two don't feel like one cluttered block. - v13: "General vs. Sibling by Grade" (new chart). Aggregates every program row up to pure grade level (summing General/Sibling students across programs within a grade) and renders as a stacked bar, ordered by grade sequence (TK→12), not by volume — a deliberately different lens from the existing volume-sorted "Total Students by Grade" chart. This fills a real gap: neither the overall split donut (no per-grade breakdown) nor the volume chart (no General/Sibling split) show which specific grades carry the most sibling-preference concentration.
- v13: Year-over-Year "Compare by" mode. Two modes now share one config panel and one result chart/canvas: "Month within selected years" (original — one line per year, plotted across months, for one grade) and "School year (grade trend over time)" (new — one line per grade, plotted across years, no month breakdown). Both are still 100% fabricated demo data pending the same backend work described above; the mode toggle only changes which axis the years/grades occupy, not the data-readiness status.
- v13: interpretation guides on every chart. Each chart now has a short, plain-language "What this chart shows" box beneath it — written at a level that assumes no prior familiarity with enrollment terminology (no "cohort," "aggregate," "longitudinal," etc.). This is aimed at registrars, who are the primary users of this page and are not assumed to be data-savvy.
- v13: consistent "Copy image" button wording. Every chart's copy button now reads "Share this chart? Click to copy an image" — previously this varied by chart (some said "Copy image," one had a longer variant), which read as inconsistent across an otherwise uniform set of controls.
- v14: Date Range options now match production exactly — Please Select Date Range, Custom, Yesterday, Today, Last 3 days, Last Week, Last 2 Weeks, Last 3 Weeks, Last Month, Last Quarter, All. Note this list dropped "Last 2 Months," which was present in an earlier production reference but not in the canonical list confirmed for this build — worth a quick sanity check against the live app before shipping in case that option is still expected to exist somewhere.
- v14: fixed a real bug — the Total Students footer total was misaligned/missing. The table declares 8 DataTables columns (a hidden grouping column plus 7 visible ones), but the static
<tfoot>only had 7 cell-slots (a 1-cell "Totals" label instead of a 2-cell colspan accounting for the hidden column), which shifted every footer value one column left and dropped the last one off the edge. Restoredcolspan="2"on the Totals label to match. General lesson for anyone editing this table further: any time a column is added/removed from thecolumnsconfig, the footer's colspan needs to be rechecked against it — the two aren't automatically kept in sync. - v14: redesigned the "default view on login" control. Previously it used the same button-group-of-pills visual pattern as the real Cards/Table/Charts toggle, positioned close to it — testing surfaced that users would click the preference control by mistake, thinking it was the toggle. Fixed two ways at once: (1) changed it from button pills to a plain dropdown, so it no longer visually pattern-matches the toggle, and (2) moved it up next to the page title, physically separated from the toggle instead of sitting directly above it. Either change alone likely would have helped; both together should make the mis-click essentially impossible.
- v14: "Copy table as image." Added the same copy-to-clipboard/download-fallback/branded-footer pipeline used for charts, but for the Table view. Since a table isn't canvas-based the way a Chart.js chart is, this uses the html2canvas library to render the visible table DOM (current sort order, current search filter, current row-group expand/collapse state, and the Totals footer) into a canvas first, then feeds that into the exact same
compositeWithFooter()function already used for charts — no duplicated branding logic. Button shows a brief "Preparing image…" state while html2canvas runs, since rendering a large table can take a moment longer than a chart. Note: this captures whatever is currently expanded/visible — if row groups are collapsed, the image shows them collapsed too, matching "share what's on screen," which is the same behavior already established for charts. - v15: "Export" dropdown on the Table view, with one working item — Export to Excel. Deliberately built as a dropdown menu, not a single button, even though only one option exists today — this is an architectural choice, not a visible one: no other options are shown grayed-out or "coming soon," since none are committed yet (a Google Sheets export was discussed and explicitly set aside for a future, separately-scoped decision, given it would require building Google OAuth sign-in and passing Google's app verification/review process — real new infrastructure, not a variation on this export). The intent is that adding a second real option later is "add a menu item," not "redesign the control." This mockup demonstrates the Excel export using the SheetJS library entirely client-side, generating a real, valid .xlsx file (with a header row and the same Totals row shown in the table) directly from the same
tableDataarray that already powers Cards/Table/Charts — production should follow whichever export pattern (client-side vs. server-generated) is already standard for the "Export to Excel" buttons elsewhere in the application, for consistency; the technique shown here is illustrative, not prescriptive. - v16: ambient "what's new" message. A quiet, non-modal banner above the Registration Snapshot box that proactively surfaces a genuine recent-activity signal on login — in keeping with the same philosophy as the existing "Tell Me When" feature (the app telling the admin something, rather than the admin having to go looking). Deliberately NOT random: the window (today → 3 days → week → 10 days → 2 weeks → 3 weeks → month) is checked smallest-to-largest and the first one clearing a minimum activity threshold is used, and the grade(s) mentioned are whichever ones actually drove that activity — only the sentence phrasing rotates. If no window clears the threshold, no message is shown at all; there is intentionally no "no new applications" message, since this page is also the first thing shown in sales demos and a flat/quiet message there would be a bad look for reasons unrelated to the product. Dismissible per session via
sessionStorageso it doesn't repeat on every page load within the same visit. Production should compute this from the same rolling-date-window query pattern the Date Range filter (FR-12) already uses — this is very likely a reuse of existing query capability, not new aggregation logic. The "MOCKUP REVIEW TOOL" control and its three scenarios exist only so this behavior (including the correctly-empty state) can be evaluated without a real backend — remove entirely before this reaches production; it is clearly labeled to avoid being mistaken for a real feature. - v17: Sibling Preference priority rule. At each window, sibling-preference activity is now checked before general activity, using a lower threshold (2, vs. 3 for general) — a sibling preference application has real operational weight (a guaranteed seat, which changes remaining capacity), so it's worth surfacing even at smaller counts than general volume would need. Demo data entries changed shape from
{ daysAgo, grade, count }to{ daysAgo, grade, general, sibling }to carry both counts per day/grade — this split already exists everywhere else on this page (every row already separates General from Sibling Preference), so this is very likely the same data at day-level granularity, not a new field. Both thresholds (3 and 2) are named constants and are tuning values, not fixed rules — flag to Peter if real-world usage suggests they should move. - v18: School-year indicator for multi-year selections. The badge beside the page title (upper right) is the at-a-glance answer to "which year(s) am I looking at?" Production schools can have many years in the School Year(s) multi-select (this mockup now shows 8: 2016/17–2023/24), so listing every selected year in the badge doesn't scale — 8 years written out is roughly 80 characters, which wraps under the title on laptop widths and dominates the header. Instead the badge follows a fixed set of display rules (all in one function,
formatYearBadge()):- Always chronological, regardless of the order the user clicked the checkboxes.
- 1 year: shown exactly as today (e.g.
2023/24) — no visual change from v17 for the common case. - Runs of 3 or more consecutive years collapse to a range with an en-dash (e.g.
2016/17 – 2023/24). "Consecutive" means adjacent in that school's own year list, so a gap is never hidden inside a range — a range always means every year between the endpoints is included. Runs of 2 are listed individually, since a range is no shorter. - Separate years/ranges are joined with a middle dot (e.g.
2016/17 · 2020/21 · 2023/24). - When a range is shown, a year count is appended (e.g.
(8 years)) so the reader knows the range is inclusive without doing arithmetic. - At most 3 segments are shown. Beyond that, the first 2 are shown followed by
+N more, where N is the number of years not displayed (e.g. alternating years:2016/17 · 2018/19 +2 more). This caps the badge at roughly 50 characters in the worst case. - Full list on hover/focus: whenever more than one year is selected, a tooltip lists every selected year in full. The badge is keyboard-focusable and carries the same full list as its
aria-label, so the abbreviation never hides information from screen-reader users.
