playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178 → 13.18.0.pre.alpha.PLAY8672199

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af16199bf3de903780fbe8aef3da42bc2864cdbed9ef37c559bd9c6e3b823ec8
-  data.tar.gz: 3d64795bc4c41d875381d33a8303280f184fe0cc4915471f6f1cf11455ef604f
+  metadata.gz: 548e17316f99aac7783410a352e43be456b73d035736c5ebe4bb90f036cec306
+  data.tar.gz: a68e86d6073d487d7566cde15535332ce66a5dd0a0d00d6a169071fc2ef9969a
 SHA512:
-  metadata.gz: fad31fe23e5f08b313d6e7b0d7c571c3ca20c08bd59d5e75b001009c8a2ccf2657eb84f3ac882093745458d494ca9d3d54056d83f76f06aafd6897f9c33285a4
-  data.tar.gz: f0e6431938db0f7fec379cf5c6374d89f7383a9cd6936c3b302811519c74f96fd40df04580f7a5c0c8bfb8ce889c15567ed3075f65e4d32d6e792a83b5e84140
+  metadata.gz: 9d73ab3a7bd6b2f19d7dac44591250b689d65fa456e61cf1c6b52f548f3b28ec9327f7a4465b42976d92680601ae5d0cdfca2824a395a649a434ea29bd246601
+  data.tar.gz: ff28178d376757325615d842b1d23db0909da38b892e49e2100468915fccf0cce4a815e35f3ae13247f1f7e79b476cc52cf89aefb848b677afe96df27ab05d83

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -22,14 +22,13 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
     setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
   };
-  const RowHasChildren = row.original.children ? true : false
-  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -37,7 +36,7 @@ export const CustomCell = ({
           columnGap="xs"
           orientation="row"
       >
-        {renderButton ? (
+        {!RowWithoutChildren ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -54,7 +53,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={renderButton? "none" : "xs"}>
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
           {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from "react"
+import React from "react"
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
 import { Row, Table } from "@tanstack/react-table"
 
-import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
@@ -13,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -28,11 +27,7 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext);
-
   const numberOfColumns = table.getAllFlatColumns().length
-  const rowHasChildren = row.original.children ? true : false
-  const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
 
   return (
     <tr className="custom-row bg-silver">
@@ -47,13 +42,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && canExpand ? (
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={canExpand ? "none" : "xs"}
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
 }`;
 
-const isToggleExpansionEnabledLoading =
-  header.index === 0 &&
-  loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-  
-const isToggleExpansionEnabled =
-  header.index === 0 &&
-  !loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-
   return (
     <th
         align="right"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
-          {isToggleExpansionEnabled && (
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {isToggleExpansionEnabledLoading &&(
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import { flexRender, Row } from "@tanstack/react-table"
 
@@ -13,47 +10,28 @@ import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
-  className?: string;
   collapsibleTrail?: boolean
-  id?: string;
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
-  className,
   collapsibleTrail = true,
-  id,
   subRowHeaders,
-  ...props
 }: TableBodyProps) => {
-
   const {
-    columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
-    inlineRowLoading,
     loading,
     table,
   } = useContext(AdvancedTableContext)
-
-  const classes = classnames(
-    buildCss("pb_advanced_table_body"),
-    globalProps(props),
-    className
-  );
-
   return (
     <>
-      <tbody className={classes} 
-          id={id}
-      >
+      <tbody>
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
+          const rowHasNoChildren = !row.original.children?.length
           const numberOfColumns = table.getAllFlatColumns().length
-          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
 
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -69,7 +47,7 @@ export const TableBody = ({
               )}
 
               <tr
-                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                  className={`${isExpandable ? "bg-silver" : "bg-white"} ${
                     row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
                   }`}
                   id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -101,11 +79,9 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isDataLoading ? (
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}
-                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                  >
+                  <td colSpan={numberOfColumns}>
                     <LoadingInline />
                   </td>
                 </tr>

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
-  className?: string
   enableSorting?: boolean
-  id?: string;
+  headerId?: string
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
-  className,
   enableSorting = false,
-  id,
+  headerId,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
-  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
-  const classes = classnames(
-    buildCss("pb_advanced_table_header"),
-    globalProps(props),
-    className
-  );
-
-
   return (
     <>
-      <thead className={classes}
-          id={id}
-      >
+      <thead>
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ export const TableHeader = ({
                   handleExpandOrCollapse={handleExpandOrCollapse}
                   header={header}
                   headerChildren={children}
+                  headerId={headerId}
                   key={`${header.id}-header`}
                   loading={loading}
                   sortIcon={sortIcon}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -24,9 +24,10 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      targetParent === undefined
+      row.getCanExpand() &&
+      (targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId
+        : targetParent === row.parentId)
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (targetParent === row.parentId) {
+      if (row.getCanExpand() && targetParent === row.parentId) {
         updateExpandedRows[row.id] = !isExpansionConsistent
           ? true
           : !row.getIsExpanded()

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -28,12 +28,10 @@ type AdvancedTableProps = {
   className?: string;
   columnDefinitions: DataType[];
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header" | "none";
+  enableToggleExpansion?: "all" | "header";
   expandedControl?: DataType;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
-  inlineRowLoading?: boolean;
   loading?: boolean | string;
   onRowToggleClick?: (arg: Row<DataType>) => void;
   onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -53,10 +51,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
-    inlineRowLoading = false,
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
@@ -108,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell
-                onRowToggleClick={onRowToggleClick}
-                row={row} 
+            <CustomCell row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -201,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     globalProps(props),
@@ -211,22 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
+            table,
             handleExpandOrCollapse,
-            inlineRowLoading,
             loading,
+            enableToggleExpansion,
+            toggleExpansionIcon,
             setExpanded,
+            expanded,
             sortControl,
-            table,
-            toggleExpansionIcon,
           }}
       >
         <Table

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
 }); 
-
-test("Generates Table.Header default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header className="custom-header" />
-      <AdvancedTable.Body />
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('thead')
-  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
-});
-
-test("Generates Table.Body default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body className="custom-body-classname"/>
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('tbody')
-  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -9,5 +9,4 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: inline Row Loading
 

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -7,4 +7,3 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -57,6 +57,10 @@
     margin-bottom: 16px;
   }
 
+  &[class*=rails] > [class^=pb_date_picker_kit] {
+    margin-bottom: 0px;
+  }
+
   & > [class^=pb_date_picker_kit]:not(:last-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -7,7 +7,7 @@ module Playbook
                         default: false
 
       def classname
-        generate_classname("pb_form_group_kit", full_width_class)
+        generate_classname("pb_form_group_kit", full_width_class) + form_group_rails
       end
 
     private
@@ -15,6 +15,10 @@ module Playbook
       def full_width_class
         full_width ? "full" : nil
       end
+
+      def form_group_rails
+        " rails"
+      end
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.18.0"
-  VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178"
+  VERSION = "13.18.0.pre.alpha.PLAY8672199"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
+  version: 13.18.0.pre.alpha.PLAY8672199
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-02-19 00:00:00.000000000 Z
+date: 2024-02-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -293,8 +293,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
@@ -309,7 +307,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
-- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
 - app/pb_kits/playbook/pb_advanced_table/docs/index.js
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
-
-const AdvancedTableInlineRowLoading = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  //Render the subRow header rows
-  const subRowHeaders = ["Quarter", "Month", "Day"]
-
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          inlineRowLoading
-          tableData={MOCK_DATA_INLINE_LOADING}
-          {...props}
-      >
-        <AdvancedTable.Header />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-      </AdvancedTable>
-    </div>
-  );
-};
-
-export default AdvancedTableInlineRowLoading;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -1,5 +0,0 @@
-As a default, the kit assumes that the dataset provided to it at first render is the complete dataset and renders the row level expansion buttons, the toggleAllExpansion buttons in the subrow headers (if any), etc based on that dataset. However, if the dev wants to set up a more complicated querying logic that for instance, runs a query on each expansion button click, then they can use the `inlineRowLoading` prop. This prop, if present, assumes that any item in the dataset that has an empty children array WILL have children even if it does not have any on first render. The kit therefore renders the correct buttons as well as adding an inline Loading state for the row with that empty children array. 
-
-In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
-
-This prop is set to `false` by default. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js

@@ -1,200 +0,0 @@
-export const MOCK_DATA_INLINE_LOADING = [
-    {
-      year: "2021",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "20",
-      scheduledMeetings: "10",
-      attendanceRate: "51%",
-      completedClasses: "3",
-      classCompletionRate: "33%",
-      graduatedStudents: "19",
-      children: [],
-    },
-    {
-      year: "2022",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "25",
-      scheduledMeetings: "17",
-      attendanceRate: "75%",
-      completedClasses: "5",
-      classCompletionRate: "45%",
-      graduatedStudents: "32",
-      children: [
-        {
-          year: "2022",
-          quarter: "Q1",
-          month: null,
-          day: null,
-          newEnrollments: "2",
-          scheduledMeetings: "35",
-          attendanceRate: "32%",
-          completedClasses: "15",
-          classCompletionRate: "52%",
-          graduatedStudents: "36",
-          children: [
-            {
-              year: "2022",
-              quarter: "Q1",
-              month: "January",
-              day: null,
-              newEnrollments: "16",
-              scheduledMeetings: "20",
-              attendanceRate: "11%",
-              completedClasses: "13",
-              classCompletionRate: "47%",
-              graduatedStudents: "28",
-              children: [
-                {
-                  year: "2022",
-                  quarter: "Q1",
-                  month: "January",
-                  day: "15",
-                  newEnrollments: "34",
-                  scheduledMeetings: "28",
-                  attendanceRate: "97%",
-                  completedClasses: "20",
-                  classCompletionRate: "15%",
-                  graduatedStudents: "17",
-                },
-                {
-                  year: "2022",
-                  quarter: "Q1",
-                  month: "January",
-                  day: "25",
-                  newEnrollments: "43",
-                  scheduledMeetings: "23",
-                  attendanceRate: "66%",
-                  completedClasses: "26",
-                  classCompletionRate: "47%",
-                  graduatedStudents: "9",
-                },
-              ],
-            },
-            {
-              year: "2022",
-              quarter: "Q1",
-              month: "May",
-              day: null,
-              newEnrollments: "20",
-              scheduledMeetings: "41",
-              attendanceRate: "95%",
-              completedClasses: "26",
-              classCompletionRate: "83%",
-              graduatedStudents: "43",
-              children: [
-                {
-                  year: "2011",
-                  quarter: "Q1",
-                  month: "May",
-                  day: "2",
-                  newEnrollments: "19",
-                  scheduledMeetings: "35",
-                  attendanceRate: "69%",
-                  completedClasses: "8",
-                  classCompletionRate: "75%",
-                  graduatedStudents: "23",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      year: "2023",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "10",
-      scheduledMeetings: "15",
-      attendanceRate: "65%",
-      completedClasses: "4",
-      classCompletionRate: "49%",
-      graduatedStudents: "29",
-      children: [
-        {
-          year: "2023",
-          quarter: "Q1",
-          month: null,
-          day: null,
-          newEnrollments: "2",
-          scheduledMeetings: "35",
-          attendanceRate: "32%",
-          completedClasses: "15",
-          classCompletionRate: "52%",
-          graduatedStudents: "36",
-          children: [
-            {
-              year: "2023",
-              quarter: "Q1",
-              month: "March",
-              day: null,
-              newEnrollments: "16",
-              scheduledMeetings: "20",
-              attendanceRate: "11%",
-              completedClasses: "13",
-              classCompletionRate: "47%",
-              graduatedStudents: "28",
-              children: [
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "March",
-                  day: "10",
-                  newEnrollments: "34",
-                  scheduledMeetings: "28",
-                  attendanceRate: "97%",
-                  completedClasses: "20",
-                  classCompletionRate: "15%",
-                  graduatedStudents: "17",
-                },
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "March",
-                  day: "11",
-                  newEnrollments: "43",
-                  scheduledMeetings: "23",
-                  attendanceRate: "66%",
-                  completedClasses: "26",
-                  classCompletionRate: "47%",
-                  graduatedStudents: "9",
-                },
-              ],
-            },
-            {
-              year: "2023",
-              quarter: "Q1",
-              month: "April",
-              day: null,
-              newEnrollments: "20",
-              scheduledMeetings: "41",
-              attendanceRate: "95%",
-              completedClasses: "26",
-              classCompletionRate: "83%",
-              graduatedStudents: "43",
-              children: [
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "April",
-                  day: "15",
-                  newEnrollments: "19",
-                  scheduledMeetings: "35",
-                  attendanceRate: "69%",
-                  completedClasses: "8",
-                  classCompletionRate: "75%",
-                  graduatedStudents: "23",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
-