fix: formatting without data

src/components/Admin/tabs/ModuleActivityReport.jsx

@@ -156,8 +156,7 @@ const ModuleActivityReport = ({ enterpriseId }) => {
           />,
         ]}
       >
-        <DataTable.TableControlBar />
-        <DataTable.Table />
+        <DataTable.TableControlBar />  
         <DataTable.EmptyTable
           content={intl.formatMessage({
             id: 'adminPortal.LPR.moduleActivityReport.table.empty',

src/components/EnterpriseApp/EnterpriseAppRoutes.jsx

@@ -20,7 +20,7 @@ import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
 import ContentHighlights from '../ContentHighlights';
 import LearnerCreditManagementRoutes from '../learner-credit-management';
 import PeopleManagementPage from '../PeopleManagement';
-import GroupDetailPage from '../PeopleManagement/GroupDetailPage';
+import GroupDetailPage from '../PeopleManagement/GroupDetailPage/GroupDetailPage';
 
 const EnterpriseAppRoutes = ({
   email,

src/components/PeopleManagement/DeleteGroupModal.jsx → src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx

@@ -8,10 +8,10 @@ import {
 } from '@openedx/paragon';
 import { RemoveCircleOutline } from '@openedx/paragon/icons';
 
-import GeneralErrorModal from './GeneralErrorModal';
-import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import GeneralErrorModal from '../GeneralErrorModal';
+import { ROUTE_NAMES } from '../../EnterpriseApp/data/constants';
 
-import LmsApiService from '../../data/services/LmsApiService';
+import LmsApiService from '../../../data/services/LmsApiService';
 
 const DeleteGroupModal = ({
   group, isOpen, close,

src/components/PeopleManagement/EditGroupNameModal.jsx → src/components/PeopleManagement/GroupDetailPage/EditGroupNameModal.jsx

@@ -6,9 +6,9 @@ import {
   ActionRow, Form, ModalDialog, Spinner, StatefulButton, useToggle,
 } from '@openedx/paragon';
 
-import MAX_LENGTH_GROUP_NAME from './constants';
-import LmsApiService from '../../data/services/LmsApiService';
-import GeneralErrorModal from './GeneralErrorModal';
+import { MAX_LENGTH_GROUP_NAME } from '../constants';
+import LmsApiService from '../../../data/services/LmsApiService';
+import GeneralErrorModal from '../GeneralErrorModal';
 
 const EditGroupNameModal = ({
   group, isOpen, close, handleNameUpdate,

src/components/PeopleManagement/GroupDetailPage.jsx → src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx

@@ -6,11 +6,11 @@ import {
 } from '@openedx/paragon';
 import { Delete, Edit } from '@openedx/paragon/icons';
 
-import { useEnterpriseGroupUuid } from '../learner-credit-management/data';
-import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { useEnterpriseGroupUuid } from '../../learner-credit-management/data';
+import { ROUTE_NAMES } from '../../EnterpriseApp/data/constants';
 import DeleteGroupModal from './DeleteGroupModal';
 import EditGroupNameModal from './EditGroupNameModal';
-import formatDates from './utils';
+import formatDates from '../utils';
 
 const GroupDetailPage = () => {
   const intl = useIntl();

src/components/PeopleManagement/OrgMemberCard.jsx

@@ -0,0 +1,92 @@
+import { Avatar, Card, Col, Row } from '@openedx/paragon';
+
+const OrgMemberCard = ({ original }) => {
+  const { name, email, joinedOrg, enrollments } = original;
+
+  return (
+    <Card orientation="horizontal">
+      <Card.Body>
+        <Card.Section className="pb-1">
+        <Row className="d-flex flex-row">
+          <Col xs={2}>
+            <Avatar size="lg" />
+          </Col>
+          <Col>
+            <Row>
+              <h3 className="pt-2">{name}</h3>
+            </Row>
+            <Row>
+              <p>{email}</p>
+            </Row>            
+          </Col>
+          <Col>
+            <h5 className="pt-2 text-uppercase">Joined org</h5>
+            {joinedOrg}
+          </Col>
+          <Col>
+            <h5 className="pt-2 text-uppercase">Enrollments </h5>
+            {enrollments}
+          </Col>
+        </Row>
+        </Card.Section>
+      </Card.Body>
+    </Card>
+  //    <Card
+  //    className="mb-4 org-member-card"
+  //    orientation="horizontal"
+  //  >
+  //    <Card.Body>
+  //      <Card.Section>
+
+
+
+  //          <Col>
+  //            <h3>
+  //              {name}
+  //              {/* <FormattedMessage
+  //                id="executive.education.external.course.enrollment.page.registration.summarycard.title"
+  //                defaultMessage="Registration summary:"
+  //                description="Title for the registration summary card on the executive education course enrollment page"
+  //              /> */}
+  //            </h3>
+  //            <br />
+  //            <p className="small font-weight-light text-gray-500 font-italic">
+  //              {/* <FormattedMessage
+  //                id="executive.education.external.course.enrollment.page.course"
+  //                defaultMessage="This course is covered by the Learner Credit provided by your organization."
+  //                description="Message about the course being covered by the Learner Credit"
+  //              /> */}
+  //              {email}
+  //            </p>
+  //          </Col>
+  //          <Col xs={12} lg={{ span: 5, offset: 2 }}>
+  //            <div className="registration-details rounded-lg border p-3">
+  //              <Row>
+  //                <Col xs={12} lg={{ span: 6, offset: 0 }} className="small font-weight-light text-gray-500 justify-content-start">
+  //                  {/* <FormattedMessage
+  //                    id="executive.education.external.course.enrollment.page.registration.total.message"
+  //                    defaultMessage="Registration total:"
+  //                    description="Total registration cost for the executive education course"
+  //                  /> */}
+  //                  {joinedOrg}
+  //                </Col>
+  //                <Col xs={12} lg={{ span: 6, offset: 0 }} className="justify-content-end">
+  //                  <div className="d-flex justify-content-end small font-weight-light text-gray-500 mr-2.5">
+  //                    {/* <FormattedMessage
+  //                      id="executive.education.external.course.enrollment.page.registration.tax.included"
+  //                      defaultMessage="Tax included"
+  //                      description="Message about tax being included in the registration cost"
+  //                    /> */}
+  //                    {enrollments}
+  //                  </div>
+  //                </Col>
+  //              </Row>
+  //            </div>
+  //          </Col>
+  //      </Card.Section>
+  //    </Card.Body>
+  //  </Card>
+  );
+};
+
+export default OrgMemberCard;

src/components/PeopleManagement/PeopleManagementTable.jsx

@@ -0,0 +1,79 @@
+import { CardView, Container, DataTable, TextFilter } from "@openedx/paragon";
+import { useIntl } from "@edx/frontend-platform/i18n";
+
+import OrgMemberCard from "./OrgMemberCard";
+
+const PeopleManagementTable = () => {
+  const pageSize = 10;
+  const intl = useIntl();
+  // const tableColumns = [
+  //   {
+  //     Header: "Name",
+  //     accessor: "name",
+  //   },
+  //   {
+  //     Header: "Email",
+  //     accessor: "email",
+  //   },
+  //   {
+  //     Header: "Joined org",
+  //     accessor: "joinedOrg",
+  //   },
+  //   {
+  //     Header: "Enrollments",
+  //     accessor: "enrollments",
+  //   },
+  // ];
+
+  return (
+    <DataTable
+      className="pt-4 mt-4"
+      isFilterable
+      isSortable
+      defaultColumnValues={{ Filter: TextFilter }}
+      // isLoading={isFetching}
+      isPaginated
+      manualPagination
+      initialState={{
+        pageSize,
+        pageIndex: 0,
+      }}
+      // itemCount={paginatedData.itemCount}
+      // pageCount={paginatedData.pageCount}
+      // fetchData={fetchData}
+      // data={paginatedData.data}
+      data={[
+        {
+          name: "April Ludgate",
+          email: "[email protected]",
+          joinedOrg: "Jan 21, 2021",
+          enrollments: 3,
+        },
+        {
+          name: "Ben Wyatt",
+          email: "[email protected]",
+          joinedOrg: "Oct 31, 2022",
+          enrollments: 1,
+        },
+      ]}
+      columns={tableColumns}>
+      <DataTable.TableControlBar />
+      <CardView
+        className="d-block"
+        CardComponent={OrgMemberCard}
+        columnSizes={{ xs: 12 }}
+      />
+      {/* <DataTable.Table /> */}
+      {/* <DataTable.EmptyTable
+      content={intl.formatMessage({
+        id: 'peopleManagement.dataTable.empty',
+        defaultMessage: 'No results found.',
+        description: 'Message displayed when the table has no data.',
+      })}
+    /> */}
+      <DataTable.TableFooter />
+    </DataTable>
+  );
+};
+
+export default PeopleManagementTable;

src/components/PeopleManagement/_PeopleManagement.scss

@@ -10,4 +10,12 @@
 
 .collapsible-basic .collapsible-trigger {
   justify-content: right;
+}
+
+// .org-member-card {
+//   width: 100%;
+// }
+
+.pgn__card-grid__card-item {
+  width: 100%;
 }

src/components/PeopleManagement/index.jsx

@@ -13,6 +13,7 @@ import CreateGroupModal from './CreateGroupModal';
 import { useAllEnterpriseGroups } from '../learner-credit-management/data';
 import ZeroState from './ZeroState';
 import GroupCardGrid from './GroupCardGrid';
+import PeopleManagementTable from './PeopleManagementTable';
 
 const PeopleManagementPage = ({ enterpriseId }) => {
   const intl = useIntl();
@@ -39,6 +40,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
     }
   }, [data]);
 
+
   return (
     <>
       <Helmet title={PAGE_TITLE} />
@@ -78,16 +80,37 @@ const PeopleManagementPage = ({ enterpriseId }) => {
               description="CTA button text to open new group modal."
             />
           </Button>
-          <CreateGroupModal isModalOpen={isModalOpen} openModel={openModal} closeModal={closeModal} />
+          <CreateGroupModal
+            isModalOpen={isModalOpen}
+            openModel={openModal}
+            closeModal={closeModal}
+          />
         </ActionRow>
         {groups && groups.length > 0 ? (
-          <GroupCardGrid groups={groups} />) : <ZeroState />}
+          <GroupCardGrid groups={groups} />
+        ) : (
+          <ZeroState />
+        )}
+        <h3 className="mt-3">
+          <FormattedMessage
+            id="adminPortal.peopleManagement.dataTable.title"
+            defaultMessage="Your organization's members"
+            description="Title for people management data table."
+          />
+        </h3>
+        <FormattedMessage
+          className="mb-4"
+          id="adminPortal.peopleManagement.dataTable.subtitle"
+          defaultMessage="View all members of your organization."
+          description="Subtitle for people management members data table."
+        />
+        <PeopleManagementTable />
       </div>
     </>
   );
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   enterpriseId: state.portalConfiguration.enterpriseId,
 });
 

src/components/PeopleManagement/tests/GroupDetailPage.test.jsx

@@ -8,7 +8,7 @@ import { Provider } from 'react-redux';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { useEnterpriseGroupUuid } from '../../learner-credit-management/data';
-import GroupDetailPage from '../GroupDetailPage';
+import GroupDetailPage from '../GroupDetailPage/GroupDetailPage';
 import LmsApiService from '../../../data/services/LmsApiService';
 
 const TEST_ENTERPRISE_SLUG = 'test-enterprise';

src/components/learner-credit-management/invite-modal/InviteModalContent.jsx

@@ -16,7 +16,7 @@ import InviteModalMembershipInfo from './InviteModalMembershipInfo';
 import InviteModalBudgetCard from './InviteModalBudgetCard';
 import InviteModalPermissions from './InviteModalPermissions';
 import InviteSummaryCount from './InviteSummaryCount';
-import MAX_LENGTH_GROUP_NAME from '../../PeopleManagement/constants';
+import { MAX_LENGTH_GROUP_NAME } from '../../PeopleManagement/constants';
 
 const InviteModalContent = ({
   onEmailAddressesChange,