Date extensions list

src/Main.tsx

@@ -1,10 +1,8 @@
 import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Outlet } from 'react-router-dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { appId } from './constants';
 import './main.scss';
 
 const queryClient = new QueryClient();

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DateExtensionsPage from './DateExtensionsPage';
+import { useDateExtensions } from './data/apiHook';
+
+jest.mock('./data/apiHook', () => ({
+  useDateExtensions: jest.fn(),
+}));
+
+const mockDateExtensions = [
+  {
+    id: 1,
+    username: 'edByun',
+    fullname: 'Ed Byun',
+    email: '[email protected]',
+    graded_subsection: 'Three body diagrams',
+    extended_due_date: '2026-07-15'
+  },
+];
+
+describe('DateExtensionsPage', () => {
+  beforeEach(() => {
+    (useDateExtensions as jest.Mock).mockReturnValue({
+      data: { count: mockDateExtensions.length, results: mockDateExtensions },
+      isLoading: false,
+    });
+  });
+
+  const RenderWithRouter = () => (
+    <IntlProvider messages={{}}>
+      <MemoryRouter initialEntries={['/course-v1:edX+DemoX+Demo_Course']}>
+        <Routes>
+          <Route path="/:courseId" element={<DateExtensionsPage />} />
+        </Routes>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  it('renders page title', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+  });
+
+  it('renders add extension button', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('button', { name: /add individual extension/i })).toBeInTheDocument();
+  });
+
+  it('renders date extensions list', () => {
+    render(<RenderWithRouter />);
+    expect(screen.getByText('Ed Byun')).toBeInTheDocument();
+    expect(screen.getByText('Three body diagrams')).toBeInTheDocument();
+  });
+
+  it('shows loading state on table when fetching data', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({
+      data: { count: 0, results: [] },
+      isLoading: true,
+    });
+    render(<RenderWithRouter />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders reset link for each row', () => {
+    render(<RenderWithRouter />);
+    const resetLinks = screen.getAllByRole('button', { name: 'Reset Extensions' });
+    expect(resetLinks).toHaveLength(mockDateExtensions.length);
+  });
+});

src/dateExtensions/DateExtensionsPage.tsx

@@ -0,0 +1,29 @@
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import DateExtensionsList from './components/DateExtensionsList';
+import { Button, Container } from '@openedx/paragon';
+import { LearnerDateExtension } from './types';
+
+// const successMessage = 'Successfully reset due date for student Phu Nguyen for A subsection with two units (block-v1:SchemaAximWGU+WGU101+1+type@sequential+block@3984030755104708a86592cf23fb1ae4) to 2025-08-21 00:00';
+
+const DateExtensionsPage = () => {
+  const intl = useIntl();
+
+  const handleResetExtensions = (user: LearnerDateExtension) => {
+    // Implementation for resetting extensions will go here
+    console.log(user);
+  };
+
+  return (
+    <Container className="mt-4.5 mb-4 mx-4" fluid="xl">
+      <h3>{intl.formatMessage(messages.dateExtensionsTitle)}</h3>
+      <div className="d-flex align-items-center justify-content-between mb-3.5">
+        <p>filters</p>
+        <Button>+ {intl.formatMessage(messages.addIndividualExtension)}</Button>
+      </div>
+      <DateExtensionsList onResetExtensions={handleResetExtensions} />
+    </Container>
+  );
+};
+
+export default DateExtensionsPage;

src/dateExtensions/components/DateExtensionsList.test.tsx

@@ -0,0 +1,56 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DateExtensionsList, { DateExtensionListProps } from './DateExtensionsList';
+import { renderWithIntl } from '../../testUtils';
+import { useDateExtensions } from '../data/apiHook';
+
+const mockData = [
+  {
+    id: 1,
+    username: 'test_user',
+    fullname: 'Test User',
+    email: '[email protected]',
+    graded_subsection: 'Test Section',
+    extended_due_date: '2024-01-01'
+  }
+];
+
+jest.mock('../data/apiHook', () => ({
+  useDateExtensions: jest.fn(),
+}));
+
+const mockResetExtensions = jest.fn();
+
+describe('DateExtensionsList', () => {
+  const renderComponent = (props: DateExtensionListProps) => renderWithIntl(
+    <DateExtensionsList {...props} />
+  );
+
+  it('renders loading state on the table', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ isLoading: true, data: { count: 0, results: [] } });
+    renderComponent({});
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders table with data', async () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ isLoading: false, data: { count: mockData.length, results: mockData } });
+    renderComponent({ onResetExtensions: mockResetExtensions });
+    const user = userEvent.setup();
+    expect(screen.getByText('test_user')).toBeInTheDocument();
+    expect(screen.getByText('Test User')).toBeInTheDocument();
+    expect(screen.getByText('[email protected]')).toBeInTheDocument();
+    expect(screen.getByText('Test Section')).toBeInTheDocument();
+    expect(screen.getByText('2024-01-01')).toBeInTheDocument();
+    const resetExtensions = screen.getByRole('button', { name: /reset extensions/i });
+    expect(resetExtensions).toBeInTheDocument();
+    await user.click(resetExtensions);
+    expect(mockResetExtensions).toHaveBeenCalledWith(mockData[0]);
+  });
+
+  it('renders empty table when no data provided', () => {
+    (useDateExtensions as jest.Mock).mockReturnValue({ data: { count: 0, results: [] } });
+    renderComponent({});
+    expect(screen.queryByText('test_user')).not.toBeInTheDocument();
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+});

src/dateExtensions/components/DateExtensionsList.tsx

@@ -0,0 +1,76 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Button, DataTable } from '@openedx/paragon';
+import messages from '../messages';
+import { LearnerDateExtension } from '../types';
+import { useDateExtensions } from '../data/apiHook';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+
+// For testing purposes, will be deleted once backend is ready
+// const mockDateExtensions = [
+//   { id: 1, username: 'edByun', fullname: 'Ed Byun', email: '[email protected]', graded_subsection: 'Three body diagrams', extended_due_date: '2026-07-15' },
+//   { id: 2, username: 'dianaSalas', fullname: 'Diana Villalvazo', email: '[email protected]', graded_subsection: 'Three body diagrams', extended_due_date: '2026-07-15' },
+// ];
+
+const DATE_EXTENSIONS_PAGE_SIZE = 25;
+
+export interface DateExtensionListProps {
+  onResetExtensions?: (user: LearnerDateExtension) => void,
+}
+
+interface DataTableFetchDataProps {
+  pageIndex: number,
+}
+
+const DateExtensionsList = ({
+  onResetExtensions = () => {},
+}: DateExtensionListProps) => {
+  const intl = useIntl();
+  const { courseId } = useParams();
+  const [page, setPage] = useState(0);
+  const { data = { count: 0, results: [] }, isLoading } = useDateExtensions(courseId ?? '', {
+    page,
+    pageSize: DATE_EXTENSIONS_PAGE_SIZE
+  });
+
+  const pageCount = Math.ceil(data.count / DATE_EXTENSIONS_PAGE_SIZE);
+
+  const tableColumns = [
+    { accessor: 'username', Header: intl.formatMessage(messages.username) },
+    { accessor: 'fullname', Header: intl.formatMessage(messages.fullname) },
+    { accessor: 'email', Header: intl.formatMessage(messages.email) },
+    { accessor: 'graded_subsection', Header: intl.formatMessage(messages.gradedSubsection) },
+    { accessor: 'extended_due_date', Header: intl.formatMessage(messages.extendedDueDate) },
+    { accessor: 'reset', Header: intl.formatMessage(messages.reset) },
+  ];
+
+  const tableData = data.results.map(item => ({
+    ...item,
+    reset: <Button variant="link" size="inline" onClick={() => onResetExtensions(item)}>Reset Extensions</Button>,
+  }));
+
+  const handleFetchData = (data: DataTableFetchDataProps) => {
+    setPage(data.pageIndex);
+  };
+
+  return (
+    <DataTable
+      columns={tableColumns}
+      data={tableData}
+      fetchData={handleFetchData}
+      initialState={{
+        pageIndex: page,
+        pageSize: DATE_EXTENSIONS_PAGE_SIZE,
+      }}
+      isLoading={isLoading}
+      isPaginated
+      itemCount={data.count}
+      manualFilters
+      manualPagination
+      pageSize={DATE_EXTENSIONS_PAGE_SIZE}
+      pageCount={pageCount}
+    />
+  );
+};
+
+export default DateExtensionsList;

src/dateExtensions/data/api.ts

@@ -0,0 +1,18 @@
+import { camelCaseObject, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { getApiBaseUrl } from '../../data/api';
+import { DateExtensionsResponse } from '../types';
+
+export interface PaginationQueryKeys {
+  page: number,
+  pageSize: number,
+}
+
+export const getDateExtensions = async (
+  courseId: string,
+  pagination: PaginationQueryKeys
+): Promise<DateExtensionsResponse> => {
+  const { data } = await getAuthenticatedHttpClient().get(
+    `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/unit_extensions/?page=${pagination.page}&page_size=${pagination.pageSize}`
+  );
+  return camelCaseObject(data);
+};

src/dateExtensions/data/apiHook.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { getDateExtensions, PaginationQueryKeys } from './api';
+import { dateExtensionsQueryKeys } from './queryKeys';
+
+export const useDateExtensions = (courseId: string, pagination: PaginationQueryKeys) => (
+  useQuery({
+    queryKey: dateExtensionsQueryKeys.byCoursePaginated(courseId, pagination),
+    queryFn: () => getDateExtensions(courseId, pagination),
+  })
+);

src/dateExtensions/data/queryKeys.ts

@@ -0,0 +1,8 @@
+import { appId } from '../../constants';
+import { PaginationQueryKeys } from './api';
+
+export const dateExtensionsQueryKeys = {
+  all: [appId, 'dateExtensions'] as const,
+  byCourse: (courseId: string) => [...dateExtensionsQueryKeys.all, courseId] as const,
+  byCoursePaginated: (courseId: string, pagination: PaginationQueryKeys) => [...dateExtensionsQueryKeys.byCourse(courseId), pagination.page] as const,
+};

src/dateExtensions/messages.ts

@@ -0,0 +1,46 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  dateExtensionsTitle: {
+    id: 'instruct.dateExtensions.page.title',
+    defaultMessage: 'Viewing Granted Extensions',
+    description: 'Title for date extensions page',
+  },
+  addIndividualExtension: {
+    id: 'instruct.dateExtensions.page.addIndividualExtension',
+    defaultMessage: 'Add Individual Extension',
+    description: 'Button text for adding an individual date extension',
+  },
+  username: {
+    id: 'instruct.dateExtensions.page.tableHeader.username',
+    defaultMessage: 'User Name',
+    description: 'Label for the user name column in the date extensions table',
+  },
+  fullname: {
+    id: 'instruct.dateExtensions.page.tableHeader.fullname',
+    defaultMessage: 'Full Name',
+    description: 'Label for the full name column in the date extensions table',
+  },
+  email: {
+    id: 'instruct.dateExtensions.page.tableHeader.email',
+    defaultMessage: 'Email',
+    description: 'Label for the email column in the date extensions table',
+  },
+  gradedSubsection: {
+    id: 'instruct.dateExtensions.page.tableHeader.gradedSubsection',
+    defaultMessage: 'Graded Subsection',
+    description: 'Label for the graded subsection column in the date extensions table',
+  },
+  extendedDueDate: {
+    id: 'instruct.dateExtensions.page.tableHeader.extendedDueDate',
+    defaultMessage: 'Extended Due Date',
+    description: 'Label for the extended due date column in the date extensions table',
+  },
+  reset: {
+    id: 'instruct.dateExtensions.page.tableHeader.reset',
+    defaultMessage: 'Reset',
+    description: 'Label for the reset column in the date extensions table',
+  },
+});
+
+export default messages;

src/dateExtensions/types.ts

@@ -0,0 +1,15 @@
+export interface LearnerDateExtension {
+  id: number,
+  username: string,
+  fullname: string,
+  email: string,
+  graded_subsection: string,
+  extended_due_date: string,
+}
+
+export interface DateExtensionsResponse {
+  count: number,
+  next: string | null,
+  previous: string | null,
+  results: LearnerDateExtension[],
+}

src/routes.tsx

@@ -1,5 +1,6 @@
 import CohortsPage from './cohorts/CohortsPage';
 import CourseInfoPage from './courseInfo/CourseInfoPage';
+import DateExtensionsPage from './dateExtensions/DateExtensionsPage';
 import Main from './Main';
 
 const routes = [
@@ -23,10 +24,10 @@ const routes = [
         path: 'cohorts',
         element: <CohortsPage />
       },
-      // {
-      //   path: 'extensions',
-      //   element: <ExtensionsPage />
-      // },
+      {
+        path: 'date_extensions',
+        element: <DateExtensionsPage />
+      },
       // {
       //   path: 'student_admin',
       //   element: <StudentAdminPage />