@openedx/frontend-app-instructor-dashboard 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/certificates/CertificatesPage.d.ts

@@ -1,2 +1,3 @@
+import './CertificatesPage.scss';
 declare const CertificatesPage: () => import("react/jsx-runtime").JSX.Element;
 export default CertificatesPage;

package/dist/certificates/CertificatesPage.js

@@ -1,6 +1,166 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Card, Container, Tab, Tabs } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { useAlert } from '../providers/AlertProvider';
+import { filterCertificates, parseLearnersCount } from '../utils/formatters';
+import CertificatesPageHeader from './components/CertificatesPageHeader';
+import IssuedCertificatesTab from './components/IssuedCertificatesTab';
+import GenerationHistoryTable from './components/GenerationHistoryTable';
+import GrantExceptionsModal from './components/GrantExceptionsModal';
+import InvalidateCertificateModal from './components/InvalidateCertificateModal';
+import RemoveInvalidationModal from './components/RemoveInvalidationModal';
+import DisableCertificatesModal from './components/DisableCertificatesModal';
+import { dummyCertificateData } from './data/dummyData';
+import { useGrantBulkExceptions, useInstructorTasks, useInvalidateCertificate, useRemoveException, useRemoveInvalidation, useToggleCertificateGeneration, } from './data/apiHook';
+import { CertificateFilter, CertificateStatus, SpecialCase } from './types';
+import { CERTIFICATES_PAGE_SIZE, TAB_KEYS, MODAL_TITLES, ALERT_VARIANTS } from './constants';
+import { getErrorMessage } from './utils/errorHandling';
+import messages from './messages';
+import './CertificatesPage.scss';
 const CertificatesPage = () => {
-    return (_jsx("div", { children: _jsx("h3", { children: "Certificates" }) }));
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const { showToast, showModal } = useAlert();
+    const [filter, setFilter] = useState(CertificateFilter.ALL_LEARNERS);
+    const [search, setSearch] = useState('');
+    const [certificatesPage, setCertificatesPage] = useState(0);
+    const [tasksPage, setTasksPage] = useState(0);
+    const [activeTab, setActiveTab] = useState(TAB_KEYS.ISSUED);
+    const [selectedUsername, setSelectedUsername] = useState('');
+    const [selectedEmail, setSelectedEmail] = useState('');
+    const [isCertificateGenerationEnabled, setIsCertificateGenerationEnabled] = useState(true);
+    const [isGrantExceptionsOpen, setIsGrantExceptionsOpen] = useState(false);
+    const [isInvalidateCertificateOpen, setIsInvalidateCertificateOpen] = useState(false);
+    const [isRemoveInvalidationOpen, setIsRemoveInvalidationOpen] = useState(false);
+    const [isDisableCertificatesOpen, setIsDisableCertificatesOpen] = useState(false);
+    const { data: tasksData, isLoading: isLoadingTasks, } = useInstructorTasks(courseId, {
+        page: tasksPage,
+        pageSize: CERTIFICATES_PAGE_SIZE,
+    });
+    const { mutate: grantExceptions, isPending: isGrantingExceptions } = useGrantBulkExceptions(courseId);
+    const { mutate: invalidateCert, isPending: isInvalidating } = useInvalidateCertificate(courseId);
+    const { mutate: removeExcept } = useRemoveException(courseId);
+    const { mutate: removeInval, isPending: isRemovingInvalidation } = useRemoveInvalidation(courseId);
+    const { mutate: toggleGeneration, isPending: isTogglingGeneration } = useToggleCertificateGeneration(courseId);
+    const matchesFilter = useCallback((item) => {
+        switch (filter) {
+            case CertificateFilter.RECEIVED:
+                return item.certificateStatus === CertificateStatus.RECEIVED;
+            case CertificateFilter.NOT_RECEIVED:
+                return item.certificateStatus === CertificateStatus.NOT_RECEIVED;
+            case CertificateFilter.AUDIT_PASSING:
+                return item.certificateStatus === CertificateStatus.AUDIT_PASSING;
+            case CertificateFilter.AUDIT_NOT_PASSING:
+                return item.certificateStatus === CertificateStatus.AUDIT_NOT_PASSING;
+            case CertificateFilter.ERROR_STATE:
+                return item.certificateStatus === CertificateStatus.ERROR_STATE;
+            case CertificateFilter.GRANTED_EXCEPTIONS:
+                return item.specialCase === SpecialCase.EXCEPTION;
+            case CertificateFilter.INVALIDATED:
+                return item.specialCase === SpecialCase.INVALIDATION;
+            case CertificateFilter.ALL_LEARNERS:
+            default:
+                return true;
+        }
+    }, [filter]);
+    const filteredData = useMemo(() => filterCertificates(dummyCertificateData, matchesFilter, search), [matchesFilter, search]);
+    const handleGrantExceptions = useCallback((learners, notes) => {
+        const count = parseLearnersCount(learners);
+        grantExceptions({ learners, notes }, {
+            onSuccess: () => {
+                setIsGrantExceptionsOpen(false);
+                showToast(intl.formatMessage(messages.exceptionsGrantedToast, { count }));
+            },
+            onError: (error) => {
+                showModal({
+                    title: MODAL_TITLES.ERROR,
+                    message: getErrorMessage(error, intl.formatMessage(messages.errorGrantException)),
+                    variant: ALERT_VARIANTS.DANGER,
+                });
+            },
+        });
+    }, [grantExceptions, showToast, showModal, intl]);
+    const handleInvalidateCertificate = useCallback((learners, notes) => {
+        const count = parseLearnersCount(learners);
+        invalidateCert({ learners, notes }, {
+            onSuccess: () => {
+                setIsInvalidateCertificateOpen(false);
+                showToast(intl.formatMessage(messages.certificatesInvalidatedToast, { count }));
+            },
+            onError: (error) => {
+                showModal({
+                    title: MODAL_TITLES.ERROR,
+                    message: getErrorMessage(error, intl.formatMessage(messages.errorInvalidateCertificate)),
+                    variant: ALERT_VARIANTS.DANGER,
+                });
+            },
+        });
+    }, [invalidateCert, showToast, showModal, intl]);
+    const handleRemoveException = useCallback((username, email) => {
+        removeExcept({ username }, {
+            onSuccess: () => {
+                showToast(intl.formatMessage(messages.exceptionRemovedToast, { email }));
+            },
+            onError: (error) => {
+                showModal({
+                    title: MODAL_TITLES.ERROR,
+                    message: getErrorMessage(error, intl.formatMessage(messages.errorRemoveException)),
+                    variant: ALERT_VARIANTS.DANGER,
+                });
+            },
+        });
+    }, [removeExcept, showToast, showModal, intl]);
+    const handleRemoveInvalidationClick = useCallback((username, email) => {
+        setSelectedUsername(username);
+        setSelectedEmail(email);
+        setIsRemoveInvalidationOpen(true);
+    }, []);
+    const handleRemoveInvalidationConfirm = useCallback(() => {
+        removeInval({ username: selectedUsername }, {
+            onSuccess: () => {
+                setIsRemoveInvalidationOpen(false);
+                setSelectedUsername('');
+                setSelectedEmail('');
+                showToast(intl.formatMessage(messages.invalidationRemovedToast, { email: selectedEmail }));
+            },
+            onError: (error) => {
+                showModal({
+                    title: MODAL_TITLES.ERROR,
+                    message: getErrorMessage(error, intl.formatMessage(messages.errorRemoveInvalidation)),
+                    variant: ALERT_VARIANTS.DANGER,
+                });
+            },
+        });
+    }, [removeInval, selectedUsername, selectedEmail, showToast, showModal, intl]);
+    const handleToggleCertificateGeneration = useCallback(() => {
+        const newState = !isCertificateGenerationEnabled;
+        toggleGeneration(newState, {
+            onSuccess: () => {
+                setIsCertificateGenerationEnabled(newState);
+                setIsDisableCertificatesOpen(false);
+                showToast(newState
+                    ? intl.formatMessage(messages.successEnableCertificates)
+                    : intl.formatMessage(messages.successDisableCertificates));
+            },
+            onError: (error) => {
+                showModal({
+                    title: MODAL_TITLES.ERROR,
+                    message: getErrorMessage(error, intl.formatMessage(messages.errorToggleCertificateGeneration)),
+                    variant: ALERT_VARIANTS.DANGER,
+                });
+            },
+        });
+    }, [isCertificateGenerationEnabled, toggleGeneration, showToast, showModal, intl]);
+    const handleRegenerateCertificates = useCallback(() => {
+        // TODO: Implement when API is ready
+    }, []);
+    return (_jsxs(Container, { className: "mt-4.5 mb-4", fluid: true, children: [_jsx(CertificatesPageHeader, { onGrantExceptions: () => setIsGrantExceptionsOpen(true), onInvalidateCertificate: () => setIsInvalidateCertificateOpen(true), onDisableCertificates: () => setIsDisableCertificatesOpen(true) }), _jsx(Card, { variant: "muted", className: "pt-3 pt-md-4 pb-4 pb-md-6 certificates-card", children: _jsxs(Tabs, { activeKey: activeTab, onSelect: (key) => setActiveTab(key || TAB_KEYS.ISSUED), className: "mx-4", variant: "button-group", children: [_jsx(Tab, { eventKey: TAB_KEYS.ISSUED, title: intl.formatMessage(messages.issuedCertificatesTab), children: _jsx(IssuedCertificatesTab, { data: filteredData, isLoading: false, itemCount: filteredData.length, pageCount: Math.ceil(filteredData.length / CERTIFICATES_PAGE_SIZE), search: search, onSearchChange: setSearch, filter: filter, onFilterChange: setFilter, currentPage: certificatesPage, onPageChange: setCertificatesPage, onRemoveException: handleRemoveException, onRemoveInvalidation: handleRemoveInvalidationClick, onRegenerateCertificates: handleRegenerateCertificates }) }), _jsx(Tab, { eventKey: TAB_KEYS.HISTORY, title: intl.formatMessage(messages.generationHistoryTab), children: _jsx("div", { className: "d-flex flex-column mt-3 mt-md-4", children: _jsx(GenerationHistoryTable, { data: (tasksData === null || tasksData === void 0 ? void 0 : tasksData.results) || [], isLoading: isLoadingTasks, itemCount: (tasksData === null || tasksData === void 0 ? void 0 : tasksData.count) || 0, pageCount: (tasksData === null || tasksData === void 0 ? void 0 : tasksData.numPages) || 0, currentPage: tasksPage, onPageChange: setTasksPage }) }) })] }) }), _jsx(GrantExceptionsModal, { isOpen: isGrantExceptionsOpen, onClose: () => setIsGrantExceptionsOpen(false), onSubmit: handleGrantExceptions, isSubmitting: isGrantingExceptions }), _jsx(InvalidateCertificateModal, { isOpen: isInvalidateCertificateOpen, onClose: () => setIsInvalidateCertificateOpen(false), onSubmit: handleInvalidateCertificate, isSubmitting: isInvalidating }), _jsx(RemoveInvalidationModal, { isOpen: isRemoveInvalidationOpen, email: selectedEmail, onClose: () => {
+                    setIsRemoveInvalidationOpen(false);
+                    setSelectedUsername('');
+                    setSelectedEmail('');
+                }, onConfirm: handleRemoveInvalidationConfirm, isSubmitting: isRemovingInvalidation }), _jsx(DisableCertificatesModal, { isOpen: isDisableCertificatesOpen, isEnabled: isCertificateGenerationEnabled, onClose: () => setIsDisableCertificatesOpen(false), onConfirm: handleToggleCertificateGeneration, isSubmitting: isTogglingGeneration })] }));
 };
 export default CertificatesPage;
 //# sourceMappingURL=CertificatesPage.js.map

package/dist/certificates/CertificatesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CertificatesPage.js","sourceRoot":"","sources":["../../src/certificates/CertificatesPage.tsx"],"names":[],"mappings":";AAAA,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,wBACE,wCAAqB,GACjB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["const CertificatesPage = () => {\n  return (\n    <div>\n      <h3>Certificates</h3>\n    </div>\n  );\n};\n\nexport default CertificatesPage;\n"]}
+{"version":3,"file":"CertificatesPage.js","sourceRoot":"","sources":["../../src/certificates/CertificatesPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { Card, Container, Tab, Tabs } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useAlert } from '@src/providers/AlertProvider';\nimport { filterCertificates, parseLearnersCount } from '@src/utils/formatters';\nimport CertificatesPageHeader from './components/CertificatesPageHeader';\nimport IssuedCertificatesTab from './components/IssuedCertificatesTab';\nimport GenerationHistoryTable from './components/GenerationHistoryTable';\nimport GrantExceptionsModal from './components/GrantExceptionsModal';\nimport InvalidateCertificateModal from './components/InvalidateCertificateModal';\nimport RemoveInvalidationModal from './components/RemoveInvalidationModal';\nimport DisableCertificatesModal from './components/DisableCertificatesModal';\nimport { dummyCertificateData } from './data/dummyData';\nimport {\n  useGrantBulkExceptions,\n  useInstructorTasks,\n  useInvalidateCertificate,\n  useRemoveException,\n  useRemoveInvalidation,\n  useToggleCertificateGeneration,\n} from './data/apiHook';\nimport { CertificateFilter, CertificateStatus, SpecialCase } from './types';\nimport { CERTIFICATES_PAGE_SIZE, TAB_KEYS, MODAL_TITLES, ALERT_VARIANTS } from './constants';\nimport { getErrorMessage } from './utils/errorHandling';\nimport messages from './messages';\nimport './CertificatesPage.scss';\n\nconst CertificatesPage = () => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const { showToast, showModal } = useAlert();\n\n  const [filter, setFilter] = useState<CertificateFilter>(CertificateFilter.ALL_LEARNERS);\n  const [search, setSearch] = useState('');\n  const [certificatesPage, setCertificatesPage] = useState(0);\n  const [tasksPage, setTasksPage] = useState(0);\n  const [activeTab, setActiveTab] = useState(TAB_KEYS.ISSUED);\n  const [selectedUsername, setSelectedUsername] = useState('');\n  const [selectedEmail, setSelectedEmail] = useState('');\n  const [isCertificateGenerationEnabled, setIsCertificateGenerationEnabled] = useState(true);\n\n  const [isGrantExceptionsOpen, setIsGrantExceptionsOpen] = useState(false);\n  const [isInvalidateCertificateOpen, setIsInvalidateCertificateOpen] = useState(false);\n  const [isRemoveInvalidationOpen, setIsRemoveInvalidationOpen] = useState(false);\n  const [isDisableCertificatesOpen, setIsDisableCertificatesOpen] = useState(false);\n\n  const {\n    data: tasksData,\n    isLoading: isLoadingTasks,\n  } = useInstructorTasks(courseId, {\n    page: tasksPage,\n    pageSize: CERTIFICATES_PAGE_SIZE,\n  });\n\n  const { mutate: grantExceptions, isPending: isGrantingExceptions } = useGrantBulkExceptions(courseId);\n  const { mutate: invalidateCert, isPending: isInvalidating } = useInvalidateCertificate(courseId);\n  const { mutate: removeExcept } = useRemoveException(courseId);\n  const { mutate: removeInval, isPending: isRemovingInvalidation } = useRemoveInvalidation(courseId);\n  const { mutate: toggleGeneration, isPending: isTogglingGeneration } = useToggleCertificateGeneration(courseId);\n\n  const matchesFilter = useCallback((item: typeof dummyCertificateData[0]) => {\n    switch (filter) {\n      case CertificateFilter.RECEIVED:\n        return item.certificateStatus === CertificateStatus.RECEIVED;\n      case CertificateFilter.NOT_RECEIVED:\n        return item.certificateStatus === CertificateStatus.NOT_RECEIVED;\n      case CertificateFilter.AUDIT_PASSING:\n        return item.certificateStatus === CertificateStatus.AUDIT_PASSING;\n      case CertificateFilter.AUDIT_NOT_PASSING:\n        return item.certificateStatus === CertificateStatus.AUDIT_NOT_PASSING;\n      case CertificateFilter.ERROR_STATE:\n        return item.certificateStatus === CertificateStatus.ERROR_STATE;\n      case CertificateFilter.GRANTED_EXCEPTIONS:\n        return item.specialCase === SpecialCase.EXCEPTION;\n      case CertificateFilter.INVALIDATED:\n        return item.specialCase === SpecialCase.INVALIDATION;\n      case CertificateFilter.ALL_LEARNERS:\n      default:\n        return true;\n    }\n  }, [filter]);\n\n  const filteredData = useMemo(\n    () => filterCertificates(dummyCertificateData, matchesFilter, search),\n    [matchesFilter, search],\n  );\n\n  const handleGrantExceptions = useCallback((learners: string, notes: string) => {\n    const count = parseLearnersCount(learners);\n    grantExceptions(\n      { learners, notes },\n      {\n        onSuccess: () => {\n          setIsGrantExceptionsOpen(false);\n          showToast(intl.formatMessage(messages.exceptionsGrantedToast, { count }));\n        },\n        onError: (error) => {\n          showModal({\n            title: MODAL_TITLES.ERROR,\n            message: getErrorMessage(error, intl.formatMessage(messages.errorGrantException)),\n            variant: ALERT_VARIANTS.DANGER,\n          });\n        },\n      },\n    );\n  }, [grantExceptions, showToast, showModal, intl]);\n\n  const handleInvalidateCertificate = useCallback((learners: string, notes: string) => {\n    const count = parseLearnersCount(learners);\n    invalidateCert(\n      { learners, notes },\n      {\n        onSuccess: () => {\n          setIsInvalidateCertificateOpen(false);\n          showToast(intl.formatMessage(messages.certificatesInvalidatedToast, { count }));\n        },\n        onError: (error) => {\n          showModal({\n            title: MODAL_TITLES.ERROR,\n            message: getErrorMessage(error, intl.formatMessage(messages.errorInvalidateCertificate)),\n            variant: ALERT_VARIANTS.DANGER,\n          });\n        },\n      },\n    );\n  }, [invalidateCert, showToast, showModal, intl]);\n\n  const handleRemoveException = useCallback((username: string, email: string) => {\n    removeExcept(\n      { username },\n      {\n        onSuccess: () => {\n          showToast(intl.formatMessage(messages.exceptionRemovedToast, { email }));\n        },\n        onError: (error) => {\n          showModal({\n            title: MODAL_TITLES.ERROR,\n            message: getErrorMessage(error, intl.formatMessage(messages.errorRemoveException)),\n            variant: ALERT_VARIANTS.DANGER,\n          });\n        },\n      },\n    );\n  }, [removeExcept, showToast, showModal, intl]);\n\n  const handleRemoveInvalidationClick = useCallback((username: string, email: string) => {\n    setSelectedUsername(username);\n    setSelectedEmail(email);\n    setIsRemoveInvalidationOpen(true);\n  }, []);\n\n  const handleRemoveInvalidationConfirm = useCallback(() => {\n    removeInval(\n      { username: selectedUsername },\n      {\n        onSuccess: () => {\n          setIsRemoveInvalidationOpen(false);\n          setSelectedUsername('');\n          setSelectedEmail('');\n          showToast(intl.formatMessage(messages.invalidationRemovedToast, { email: selectedEmail }));\n        },\n        onError: (error) => {\n          showModal({\n            title: MODAL_TITLES.ERROR,\n            message: getErrorMessage(error, intl.formatMessage(messages.errorRemoveInvalidation)),\n            variant: ALERT_VARIANTS.DANGER,\n          });\n        },\n      },\n    );\n  }, [removeInval, selectedUsername, selectedEmail, showToast, showModal, intl]);\n\n  const handleToggleCertificateGeneration = useCallback(() => {\n    const newState = !isCertificateGenerationEnabled;\n    toggleGeneration(newState, {\n      onSuccess: () => {\n        setIsCertificateGenerationEnabled(newState);\n        setIsDisableCertificatesOpen(false);\n        showToast(\n          newState\n            ? intl.formatMessage(messages.successEnableCertificates)\n            : intl.formatMessage(messages.successDisableCertificates),\n        );\n      },\n      onError: (error) => {\n        showModal({\n          title: MODAL_TITLES.ERROR,\n          message: getErrorMessage(error, intl.formatMessage(messages.errorToggleCertificateGeneration)),\n          variant: ALERT_VARIANTS.DANGER,\n        });\n      },\n    });\n  }, [isCertificateGenerationEnabled, toggleGeneration, showToast, showModal, intl]);\n\n  const handleRegenerateCertificates = useCallback(() => {\n    // TODO: Implement when API is ready\n  }, []);\n\n  return (\n    <Container className=\"mt-4.5 mb-4\" fluid>\n      <CertificatesPageHeader\n        onGrantExceptions={() => setIsGrantExceptionsOpen(true)}\n        onInvalidateCertificate={() => setIsInvalidateCertificateOpen(true)}\n        onDisableCertificates={() => setIsDisableCertificatesOpen(true)}\n      />\n\n      <Card variant=\"muted\" className=\"pt-3 pt-md-4 pb-4 pb-md-6 certificates-card\">\n        <Tabs\n          activeKey={activeTab}\n          onSelect={(key) => setActiveTab(key || TAB_KEYS.ISSUED)}\n          className=\"mx-4\"\n          variant=\"button-group\"\n        >\n          <Tab eventKey={TAB_KEYS.ISSUED} title={intl.formatMessage(messages.issuedCertificatesTab)}>\n            <IssuedCertificatesTab\n              data={filteredData}\n              isLoading={false}\n              itemCount={filteredData.length}\n              pageCount={Math.ceil(filteredData.length / CERTIFICATES_PAGE_SIZE)}\n              search={search}\n              onSearchChange={setSearch}\n              filter={filter}\n              onFilterChange={setFilter}\n              currentPage={certificatesPage}\n              onPageChange={setCertificatesPage}\n              onRemoveException={handleRemoveException}\n              onRemoveInvalidation={handleRemoveInvalidationClick}\n              onRegenerateCertificates={handleRegenerateCertificates}\n            />\n          </Tab>\n          <Tab eventKey={TAB_KEYS.HISTORY} title={intl.formatMessage(messages.generationHistoryTab)}>\n            <div className=\"d-flex flex-column mt-3 mt-md-4\">\n              <GenerationHistoryTable\n                data={tasksData?.results || []}\n                isLoading={isLoadingTasks}\n                itemCount={tasksData?.count || 0}\n                pageCount={tasksData?.numPages || 0}\n                currentPage={tasksPage}\n                onPageChange={setTasksPage}\n              />\n            </div>\n          </Tab>\n        </Tabs>\n      </Card>\n\n      <GrantExceptionsModal\n        isOpen={isGrantExceptionsOpen}\n        onClose={() => setIsGrantExceptionsOpen(false)}\n        onSubmit={handleGrantExceptions}\n        isSubmitting={isGrantingExceptions}\n      />\n      <InvalidateCertificateModal\n        isOpen={isInvalidateCertificateOpen}\n        onClose={() => setIsInvalidateCertificateOpen(false)}\n        onSubmit={handleInvalidateCertificate}\n        isSubmitting={isInvalidating}\n      />\n      <RemoveInvalidationModal\n        isOpen={isRemoveInvalidationOpen}\n        email={selectedEmail}\n        onClose={() => {\n          setIsRemoveInvalidationOpen(false);\n          setSelectedUsername('');\n          setSelectedEmail('');\n        }}\n        onConfirm={handleRemoveInvalidationConfirm}\n        isSubmitting={isRemovingInvalidation}\n      />\n      <DisableCertificatesModal\n        isOpen={isDisableCertificatesOpen}\n        isEnabled={isCertificateGenerationEnabled}\n        onClose={() => setIsDisableCertificatesOpen(false)}\n        onConfirm={handleToggleCertificateGeneration}\n        isSubmitting={isTogglingGeneration}\n      />\n    </Container>\n  );\n};\n\nexport default CertificatesPage;\n"]}

package/dist/certificates/CertificatesPage.scss

@@ -0,0 +1,81 @@
+.filter-dropdown-item {
+  &:hover,
+  &.active {
+    text-decoration: none;
+    color: var(--pgn-color-menu-item-hover-color);
+    border-color: var(--pgn-color-menu-item-hover-border);
+    background: var(--pgn-color-menu-item-hover-bg);
+  }
+
+  &.active {
+    font-weight: 600;
+  }
+}
+
+.certificates-filter-dropdown,
+.certificate-actions-dropdown {
+  position: relative;
+  z-index: 1050;
+
+  .dropdown-menu {
+    position: absolute;
+    z-index: 9999;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
+
+.certificate-actions-dropdown {
+  position: static;
+
+  .dropdown-toggle {
+    position: relative;
+    z-index: 1;
+  }
+
+  .dropdown-menu {
+    will-change: transform;
+  }
+}
+
+.certificates-card {
+  position: relative;
+  overflow: visible;
+  overflow-x: hidden;
+
+  .card-body,
+  .pgn__tabs,
+  .tab-content,
+  .tab-pane {
+    overflow: visible;
+  }
+}
+
+.certificates-tab-container {
+  overflow: visible;
+}
+
+.certificates-table-wrapper {
+  overflow-x: auto;
+  overflow-y: visible;
+  position: relative;
+}
+
+.certificates-card .pgn__data-table-layout {
+  overflow: visible;
+
+  table,
+  tbody,
+  tr,
+  td {
+    position: relative;
+  }
+}
+
+.certificates-card {
+  .pgn__data-table-footer,
+  .pgn__data-table-pagination {
+    position: relative;
+    z-index: 1;
+  }
+}

package/dist/certificates/components/CertificateTable.d.ts

@@ -0,0 +1,14 @@
+import type { CertificateData, CertificateFilter } from '../types';
+interface CertificateTableProps {
+    data: CertificateData[];
+    isLoading: boolean;
+    itemCount: number;
+    pageCount: number;
+    currentPage: number;
+    filter: CertificateFilter;
+    onPageChange: (pageIndex: number) => void;
+    onRemoveException: (username: string, email: string) => void;
+    onRemoveInvalidation: (username: string, email: string) => void;
+}
+declare const CertificateTable: ({ data, isLoading, itemCount, filter, onRemoveException, onRemoveInvalidation, }: CertificateTableProps) => import("react/jsx-runtime").JSX.Element;
+export default CertificateTable;

package/dist/certificates/components/CertificateTable.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { DataTable, Dropdown, IconButton, Icon, TableFooter } from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import { CertificateFilter as FilterEnum } from '../types';
+import { CERTIFICATES_TABLE_PAGE_SIZE } from '../constants';
+import messages from '../messages';
+const CertificateTable = ({ data, isLoading, itemCount, filter, onRemoveException, onRemoveInvalidation, }) => {
+    const intl = useIntl();
+    const baseColumns = useMemo(() => [
+        {
+            Header: intl.formatMessage(messages.columnUsername),
+            accessor: 'username',
+        },
+        {
+            Header: intl.formatMessage(messages.columnEmail),
+            accessor: 'email',
+        },
+        {
+            Header: intl.formatMessage(messages.columnEnrollmentTrack),
+            accessor: 'enrollmentTrack',
+        },
+        {
+            Header: intl.formatMessage(messages.columnCertificateStatus),
+            accessor: 'certificateStatus',
+        },
+        {
+            Header: intl.formatMessage(messages.columnSpecialCase),
+            accessor: 'specialCase',
+        },
+    ], [intl]);
+    const conditionalColumns = useMemo(() => {
+        const columns = [];
+        if (filter === FilterEnum.ALL_LEARNERS || filter === FilterEnum.GRANTED_EXCEPTIONS) {
+            columns.push({
+                Header: intl.formatMessage(messages.columnExceptionGranted),
+                accessor: 'exceptionGranted',
+            }, {
+                Header: intl.formatMessage(messages.columnExceptionNotes),
+                accessor: 'exceptionNotes',
+            });
+        }
+        if (filter === FilterEnum.ALL_LEARNERS || filter === FilterEnum.INVALIDATED) {
+            columns.push({
+                Header: intl.formatMessage(messages.columnInvalidatedBy),
+                accessor: 'invalidatedBy',
+            }, {
+                Header: intl.formatMessage(messages.columnInvalidationDate),
+                accessor: 'invalidationDate',
+                Cell: ({ value }) => {
+                    if (!value)
+                        return null;
+                    return (_jsx(_Fragment, { children: intl.formatDate(new Date(value), {
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                        }) }));
+                },
+            }, {
+                Header: intl.formatMessage(messages.columnInvalidationNote),
+                accessor: 'invalidationNote',
+            });
+        }
+        return columns;
+    }, [filter, intl]);
+    const additionalColumns = useMemo(() => {
+        if (filter !== FilterEnum.GRANTED_EXCEPTIONS && filter !== FilterEnum.INVALIDATED) {
+            return [];
+        }
+        return [
+            {
+                id: 'actions',
+                Header: intl.formatMessage(messages.columnActions),
+                Cell: ({ row }) => (_jsxs(Dropdown, { className: "certificate-actions-dropdown", children: [_jsx(Dropdown.Toggle, { id: `actions-dropdown-${row.original.username}`, as: IconButton, src: MoreVert, iconAs: Icon, variant: "secondary", alt: intl.formatMessage(messages.columnActions) }), _jsxs(Dropdown.Menu, { alignRight: true, children: [filter === FilterEnum.GRANTED_EXCEPTIONS && (_jsx(Dropdown.Item, { onClick: () => onRemoveException(row.original.username, row.original.email), children: intl.formatMessage(messages.removeExceptionAction) })), filter === FilterEnum.INVALIDATED && (_jsx(Dropdown.Item, { onClick: () => onRemoveInvalidation(row.original.username, row.original.email), children: intl.formatMessage(messages.removeInvalidationAction) }))] })] })),
+            },
+        ];
+    }, [filter, intl, onRemoveException, onRemoveInvalidation]);
+    const allColumns = useMemo(() => [...baseColumns, ...conditionalColumns, ...additionalColumns], [baseColumns, conditionalColumns, additionalColumns]);
+    return (_jsxs(DataTable, { columns: allColumns, data: data, isLoading: isLoading, isPaginated: true, itemCount: itemCount, initialState: { pageIndex: 0, pageSize: CERTIFICATES_TABLE_PAGE_SIZE }, children: [_jsx(DataTable.Table, {}), _jsx(DataTable.EmptyTable, { content: intl.formatMessage(messages.noDataMessage) }), _jsx(TableFooter, {})] }));
+};
+export default CertificateTable;
+//# sourceMappingURL=CertificateTable.js.map

package/dist/certificates/components/CertificateTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CertificateTable.js","sourceRoot":"","sources":["../../../src/certificates/components/CertificateTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { DataTable, Dropdown, IconButton, Icon, TableFooter } from '@openedx/paragon';\nimport { MoreVert } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport type { CertificateData, CertificateFilter } from '../types';\nimport { CertificateFilter as FilterEnum } from '../types';\nimport { CERTIFICATES_TABLE_PAGE_SIZE } from '../constants';\nimport messages from '../messages';\n\ninterface CertificateTableProps {\n  data: CertificateData[],\n  isLoading: boolean,\n  itemCount: number,\n  pageCount: number,\n  currentPage: number,\n  filter: CertificateFilter,\n  onPageChange: (pageIndex: number) => void,\n  onRemoveException: (username: string, email: string) => void,\n  onRemoveInvalidation: (username: string, email: string) => void,\n}\n\ninterface ColumnType {\n  Header: string,\n  accessor?: string,\n  id?: string,\n  Cell?: ({ row, value }: { row?: { original: CertificateData }, value?: string }) => JSX.Element | null,\n}\n\nconst CertificateTable = ({\n  data,\n  isLoading,\n  itemCount,\n  filter,\n  onRemoveException,\n  onRemoveInvalidation,\n}: CertificateTableProps) => {\n  const intl = useIntl();\n\n  const baseColumns = useMemo(\n    () => [\n      {\n        Header: intl.formatMessage(messages.columnUsername),\n        accessor: 'username',\n      },\n      {\n        Header: intl.formatMessage(messages.columnEmail),\n        accessor: 'email',\n      },\n      {\n        Header: intl.formatMessage(messages.columnEnrollmentTrack),\n        accessor: 'enrollmentTrack',\n      },\n      {\n        Header: intl.formatMessage(messages.columnCertificateStatus),\n        accessor: 'certificateStatus',\n      },\n      {\n        Header: intl.formatMessage(messages.columnSpecialCase),\n        accessor: 'specialCase',\n      },\n    ],\n    [intl],\n  );\n\n  const conditionalColumns = useMemo(() => {\n    const columns: ColumnType[] = [];\n\n    if (filter === FilterEnum.ALL_LEARNERS || filter === FilterEnum.GRANTED_EXCEPTIONS) {\n      columns.push(\n        {\n          Header: intl.formatMessage(messages.columnExceptionGranted),\n          accessor: 'exceptionGranted',\n        },\n        {\n          Header: intl.formatMessage(messages.columnExceptionNotes),\n          accessor: 'exceptionNotes',\n        },\n      );\n    }\n\n    if (filter === FilterEnum.ALL_LEARNERS || filter === FilterEnum.INVALIDATED) {\n      columns.push(\n        {\n          Header: intl.formatMessage(messages.columnInvalidatedBy),\n          accessor: 'invalidatedBy',\n        },\n        {\n          Header: intl.formatMessage(messages.columnInvalidationDate),\n          accessor: 'invalidationDate',\n          Cell: ({ value }: { value?: string }) => {\n            if (!value) return null;\n            return (\n              <>\n                {intl.formatDate(new Date(value), {\n                  year: 'numeric',\n                  month: '2-digit',\n                  day: '2-digit',\n                  hour: '2-digit',\n                  minute: '2-digit',\n                })}\n              </>\n            );\n          },\n        },\n        {\n          Header: intl.formatMessage(messages.columnInvalidationNote),\n          accessor: 'invalidationNote',\n        },\n      );\n    }\n\n    return columns;\n  }, [filter, intl]);\n\n  const additionalColumns = useMemo(() => {\n    if (filter !== FilterEnum.GRANTED_EXCEPTIONS && filter !== FilterEnum.INVALIDATED) {\n      return [];\n    }\n\n    return [\n      {\n        id: 'actions',\n        Header: intl.formatMessage(messages.columnActions),\n        Cell: ({ row }: { row: { original: CertificateData } }) => (\n          <Dropdown className=\"certificate-actions-dropdown\">\n            <Dropdown.Toggle\n              id={`actions-dropdown-${row.original.username}`}\n              as={IconButton}\n              src={MoreVert}\n              iconAs={Icon}\n              variant=\"secondary\"\n              alt={intl.formatMessage(messages.columnActions)}\n            />\n            <Dropdown.Menu alignRight>\n              {filter === FilterEnum.GRANTED_EXCEPTIONS && (\n                <Dropdown.Item\n                  onClick={() => onRemoveException(row.original.username, row.original.email)}\n                >\n                  {intl.formatMessage(messages.removeExceptionAction)}\n                </Dropdown.Item>\n              )}\n              {filter === FilterEnum.INVALIDATED && (\n                <Dropdown.Item\n                  onClick={() => onRemoveInvalidation(row.original.username, row.original.email)}\n                >\n                  {intl.formatMessage(messages.removeInvalidationAction)}\n                </Dropdown.Item>\n              )}\n            </Dropdown.Menu>\n          </Dropdown>\n        ),\n      },\n    ];\n  }, [filter, intl, onRemoveException, onRemoveInvalidation]);\n\n  const allColumns = useMemo(\n    () => [...baseColumns, ...conditionalColumns, ...additionalColumns],\n    [baseColumns, conditionalColumns, additionalColumns],\n  );\n\n  return (\n    <DataTable\n      columns={allColumns}\n      data={data}\n      isLoading={isLoading}\n      isPaginated\n      itemCount={itemCount}\n      initialState={{ pageIndex: 0, pageSize: CERTIFICATES_TABLE_PAGE_SIZE }}\n    >\n      <DataTable.Table />\n      <DataTable.EmptyTable content={intl.formatMessage(messages.noDataMessage)} />\n      <TableFooter />\n    </DataTable>\n  );\n};\n\nexport default CertificateTable;\n"]}

package/dist/certificates/components/CertificatesPageHeader.d.ts

@@ -0,0 +1,7 @@
+interface CertificatesPageHeaderProps {
+    onGrantExceptions: () => void;
+    onInvalidateCertificate: () => void;
+    onDisableCertificates: () => void;
+}
+declare const CertificatesPageHeader: ({ onGrantExceptions, onInvalidateCertificate, onDisableCertificates, }: CertificatesPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default CertificatesPageHeader;

package/dist/certificates/components/CertificatesPageHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconButton, Stack } from '@openedx/paragon';
+import { Add, Close, MoreVert } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+const CertificatesPageHeader = ({ onGrantExceptions, onInvalidateCertificate, onDisableCertificates, }) => {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3", children: [_jsx("h3", { className: "text-primary-700 mb-0", children: intl.formatMessage(messages.pageTitle) }), _jsxs(Stack, { direction: "horizontal", gap: 2, className: "flex-wrap", children: [_jsx(IconButton, { src: MoreVert, alt: intl.formatMessage(messages.disableCertificatesButton), onClick: onDisableCertificates }), _jsx(Button, { variant: "outline-primary", iconBefore: Close, onClick: onInvalidateCertificate, className: "text-nowrap", children: intl.formatMessage(messages.invalidateCertificateButton) }), _jsx(Button, { variant: "primary", iconBefore: Add, onClick: onGrantExceptions, className: "text-nowrap", children: intl.formatMessage(messages.grantExceptionsButton) })] })] }));
+};
+export default CertificatesPageHeader;
+//# sourceMappingURL=CertificatesPageHeader.js.map

package/dist/certificates/components/CertificatesPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CertificatesPageHeader.js","sourceRoot":"","sources":["../../../src/certificates/components/CertificatesPageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAQnC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,iBAAiB,EACjB,uBAAuB,EACvB,qBAAqB,GACO,EAAE,EAAE;IAChC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,2GAA2G,aACxH,aAAI,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAM,EACnF,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,WAAW,aACzD,KAAC,UAAU,IACT,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EAC3D,OAAO,EAAE,qBAAqB,GAC9B,EACF,KAAC,MAAM,IACL,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAC,aAAa,YAEtB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,GAClD,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,UAAU,EAAE,GAAG,EACf,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAC,aAAa,YAEtB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,GAC5C,IACH,IACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { Button, IconButton, Stack } from '@openedx/paragon';\nimport { Add, Close, MoreVert } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '../messages';\n\ninterface CertificatesPageHeaderProps {\n  onGrantExceptions: () => void,\n  onInvalidateCertificate: () => void,\n  onDisableCertificates: () => void,\n}\n\nconst CertificatesPageHeader = ({\n  onGrantExceptions,\n  onInvalidateCertificate,\n  onDisableCertificates,\n}: CertificatesPageHeaderProps) => {\n  const intl = useIntl();\n\n  return (\n    <div className=\"d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3\">\n      <h3 className=\"text-primary-700 mb-0\">{intl.formatMessage(messages.pageTitle)}</h3>\n      <Stack direction=\"horizontal\" gap={2} className=\"flex-wrap\">\n        <IconButton\n          src={MoreVert}\n          alt={intl.formatMessage(messages.disableCertificatesButton)}\n          onClick={onDisableCertificates}\n        />\n        <Button\n          variant=\"outline-primary\"\n          iconBefore={Close}\n          onClick={onInvalidateCertificate}\n          className=\"text-nowrap\"\n        >\n          {intl.formatMessage(messages.invalidateCertificateButton)}\n        </Button>\n        <Button\n          variant=\"primary\"\n          iconBefore={Add}\n          onClick={onGrantExceptions}\n          className=\"text-nowrap\"\n        >\n          {intl.formatMessage(messages.grantExceptionsButton)}\n        </Button>\n      </Stack>\n    </div>\n  );\n};\n\nexport default CertificatesPageHeader;\n"]}

package/dist/certificates/components/CertificatesToolbar.d.ts

@@ -0,0 +1,10 @@
+import { CertificateFilter } from '../types';
+interface CertificatesToolbarProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    filter: CertificateFilter;
+    onFilterChange: (value: CertificateFilter) => void;
+    onRegenerateCertificates: () => void;
+}
+declare const CertificatesToolbar: ({ search, onSearchChange, filter, onFilterChange, onRegenerateCertificates, }: CertificatesToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default CertificatesToolbar;

package/dist/certificates/components/CertificatesToolbar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, SearchField } from '@openedx/paragon';
+import { SpinnerIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import FilterDropdown from './FilterDropdown';
+import messages from '../messages';
+const CertificatesToolbar = ({ search, onSearchChange, filter, onFilterChange, onRegenerateCertificates, }) => {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center justify-content-between mb-4 mx-4 mt-3 gap-3", children: [_jsxs("div", { className: "d-flex flex-column flex-sm-row align-items-stretch gap-2", children: [_jsx(SearchField, { onSubmit: onSearchChange, onChange: onSearchChange, placeholder: intl.formatMessage(messages.searchPlaceholder), value: search, className: "flex-grow-1 w-100 w-sm-auto", style: { minWidth: 'min(400px, 100%)' } }), _jsx(FilterDropdown, { value: filter, onChange: onFilterChange, className: "flex-shrink-0 w-100 w-sm-auto" })] }), _jsx(Button, { variant: "outline-primary", iconBefore: SpinnerIcon, onClick: onRegenerateCertificates, className: "text-nowrap", children: intl.formatMessage(messages.regenerateCertificatesButton) })] }));
+};
+export default CertificatesToolbar;
+//# sourceMappingURL=CertificatesToolbar.js.map

package/dist/certificates/components/CertificatesToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CertificatesToolbar.js","sourceRoot":"","sources":["../../../src/certificates/components/CertificatesToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,QAAQ,MAAM,aAAa,CAAC;AAUnC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,EACN,cAAc,EACd,MAAM,EACN,cAAc,EACd,wBAAwB,GACC,EAAE,EAAE;IAC7B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,uHAAuH,aACpI,eAAK,SAAS,EAAC,0DAA0D,aACvE,KAAC,WAAW,IACV,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAC3D,KAAK,EAAE,MAAM,EACb,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GACvC,EACF,KAAC,cAAc,IACb,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,+BAA+B,GACzC,IACE,EACN,KAAC,MAAM,IACL,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,wBAAwB,EACjC,SAAS,EAAC,aAAa,YAEtB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,GACnD,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { Button, SearchField } from '@openedx/paragon';\nimport { SpinnerIcon } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport FilterDropdown from './FilterDropdown';\nimport { CertificateFilter } from '../types';\nimport messages from '../messages';\n\ninterface CertificatesToolbarProps {\n  search: string,\n  onSearchChange: (value: string) => void,\n  filter: CertificateFilter,\n  onFilterChange: (value: CertificateFilter) => void,\n  onRegenerateCertificates: () => void,\n}\n\nconst CertificatesToolbar = ({\n  search,\n  onSearchChange,\n  filter,\n  onFilterChange,\n  onRegenerateCertificates,\n}: CertificatesToolbarProps) => {\n  const intl = useIntl();\n\n  return (\n    <div className=\"d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center justify-content-between mb-4 mx-4 mt-3 gap-3\">\n      <div className=\"d-flex flex-column flex-sm-row align-items-stretch gap-2\">\n        <SearchField\n          onSubmit={onSearchChange}\n          onChange={onSearchChange}\n          placeholder={intl.formatMessage(messages.searchPlaceholder)}\n          value={search}\n          className=\"flex-grow-1 w-100 w-sm-auto\"\n          style={{ minWidth: 'min(400px, 100%)' }}\n        />\n        <FilterDropdown\n          value={filter}\n          onChange={onFilterChange}\n          className=\"flex-shrink-0 w-100 w-sm-auto\"\n        />\n      </div>\n      <Button\n        variant=\"outline-primary\"\n        iconBefore={SpinnerIcon}\n        onClick={onRegenerateCertificates}\n        className=\"text-nowrap\"\n      >\n        {intl.formatMessage(messages.regenerateCertificatesButton)}\n      </Button>\n    </div>\n  );\n};\n\nexport default CertificatesToolbar;\n"]}

package/dist/certificates/components/DisableCertificatesModal.d.ts

@@ -0,0 +1,9 @@
+interface DisableCertificatesModalProps {
+    isOpen: boolean;
+    isEnabled: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    isSubmitting: boolean;
+}
+declare const DisableCertificatesModal: ({ isOpen, isEnabled, onClose, onConfirm, isSubmitting, }: DisableCertificatesModalProps) => import("react/jsx-runtime").JSX.Element;
+export default DisableCertificatesModal;

package/dist/certificates/components/DisableCertificatesModal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+const DisableCertificatesModal = ({ isOpen, isEnabled, onClose, onConfirm, isSubmitting, }) => {
+    const intl = useIntl();
+    const title = isEnabled
+        ? intl.formatMessage(messages.disableCertificatesModalTitle)
+        : intl.formatMessage(messages.enableCertificatesModalTitle);
+    const message = isEnabled
+        ? intl.formatMessage(messages.disableCertificatesModalMessage)
+        : intl.formatMessage(messages.enableCertificatesModalMessage);
+    return (_jsxs(ModalDialog, { title: title, onClose: onClose, isOpen: isOpen, size: "sm", hasCloseButton: false, isOverflowVisible: false, children: [_jsx("div", { className: "mx-4 mt-4 mb-2.5", children: _jsx("p", { children: message }) }), _jsx(ModalDialog.Footer, { children: _jsxs(ActionRow, { children: [_jsx(Button, { variant: "tertiary", onClick: onClose, disabled: isSubmitting, children: intl.formatMessage(messages.cancel) }), _jsx(Button, { variant: "primary", onClick: onConfirm, disabled: isSubmitting, children: intl.formatMessage(messages.confirm) })] }) })] }));
+};
+export default DisableCertificatesModal;
+//# sourceMappingURL=DisableCertificatesModal.js.map

package/dist/certificates/components/DisableCertificatesModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisableCertificatesModal.js","sourceRoot":"","sources":["../../../src/certificates/components/DisableCertificatesModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAUnC,MAAM,wBAAwB,GAAG,CAAC,EAChC,MAAM,EACN,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,GACkB,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,KAAK,GAAG,SAAS;QACrB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC;QAC5D,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,SAAS;QACvB,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC;QAC9D,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;IAEhE,OAAO,CACL,MAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,IAAI,EACT,cAAc,EAAE,KAAK,EACrB,iBAAiB,EAAE,KAAK,aAExB,cAAK,SAAS,EAAC,kBAAkB,YAC/B,sBAAI,OAAO,GAAK,GACZ,EACN,KAAC,WAAW,CAAC,MAAM,cACjB,MAAC,SAAS,eACR,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,YAChE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAC7B,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,YACjE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,GAC9B,IACC,GACO,IACT,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { ActionRow, Button, ModalDialog } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '../messages';\n\ninterface DisableCertificatesModalProps {\n  isOpen: boolean,\n  isEnabled: boolean,\n  onClose: () => void,\n  onConfirm: () => void,\n  isSubmitting: boolean,\n}\n\nconst DisableCertificatesModal = ({\n  isOpen,\n  isEnabled,\n  onClose,\n  onConfirm,\n  isSubmitting,\n}: DisableCertificatesModalProps) => {\n  const intl = useIntl();\n\n  const title = isEnabled\n    ? intl.formatMessage(messages.disableCertificatesModalTitle)\n    : intl.formatMessage(messages.enableCertificatesModalTitle);\n\n  const message = isEnabled\n    ? intl.formatMessage(messages.disableCertificatesModalMessage)\n    : intl.formatMessage(messages.enableCertificatesModalMessage);\n\n  return (\n    <ModalDialog\n      title={title}\n      onClose={onClose}\n      isOpen={isOpen}\n      size=\"sm\"\n      hasCloseButton={false}\n      isOverflowVisible={false}\n    >\n      <div className=\"mx-4 mt-4 mb-2.5\">\n        <p>{message}</p>\n      </div>\n      <ModalDialog.Footer>\n        <ActionRow>\n          <Button variant=\"tertiary\" onClick={onClose} disabled={isSubmitting}>\n            {intl.formatMessage(messages.cancel)}\n          </Button>\n          <Button variant=\"primary\" onClick={onConfirm} disabled={isSubmitting}>\n            {intl.formatMessage(messages.confirm)}\n          </Button>\n        </ActionRow>\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nexport default DisableCertificatesModal;\n"]}

package/dist/certificates/components/FilterDropdown.d.ts

@@ -0,0 +1,8 @@
+import { CertificateFilter } from '../types';
+interface FilterDropdownProps {
+    value: CertificateFilter;
+    onChange: (value: CertificateFilter) => void;
+    className?: string;
+}
+declare const FilterDropdown: ({ value, onChange, className }: FilterDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default FilterDropdown;

package/dist/certificates/components/FilterDropdown.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from '@openedx/paragon';
+import { FilterList } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import { CertificateFilter } from '../types';
+import messages from '../messages';
+const FILTER_OPTIONS = [
+    {
+        value: CertificateFilter.ALL_LEARNERS,
+        messageKey: 'filterAllLearners',
+    },
+    {
+        value: CertificateFilter.RECEIVED,
+        messageKey: 'filterReceived',
+    },
+    {
+        value: CertificateFilter.NOT_RECEIVED,
+        messageKey: 'filterNotReceived',
+    },
+    {
+        value: CertificateFilter.AUDIT_PASSING,
+        messageKey: 'filterAuditPassing',
+    },
+    {
+        value: CertificateFilter.AUDIT_NOT_PASSING,
+        messageKey: 'filterAuditNotPassing',
+    },
+    {
+        value: CertificateFilter.ERROR_STATE,
+        messageKey: 'filterErrorState',
+    },
+    {
+        value: CertificateFilter.GRANTED_EXCEPTIONS,
+        messageKey: 'filterGrantedExceptions',
+    },
+    {
+        value: CertificateFilter.INVALIDATED,
+        messageKey: 'filterInvalidated',
+    },
+];
+const FilterDropdown = ({ value, onChange, className }) => {
+    const intl = useIntl();
+    const selectedOption = FILTER_OPTIONS.find((option) => option.value === value);
+    const selectedLabel = selectedOption
+        ? intl.formatMessage(messages[selectedOption.messageKey])
+        : intl.formatMessage(messages.filterAllLearners);
+    return (_jsxs(Dropdown, { className: `certificates-filter-dropdown ${className || ''}`, children: [_jsx(Dropdown.Toggle, { id: "filter-dropdown", variant: "outline-primary", className: "d-flex align-items-center justify-content-between w-100", children: _jsxs("span", { className: "d-flex align-items-center", children: [_jsx(FilterList, { className: "mr-2" }), selectedLabel] }) }), _jsx(Dropdown.Menu, { children: FILTER_OPTIONS.map((option) => (_jsx(Dropdown.Item, { active: option.value === value, onClick: () => onChange(option.value), className: "filter-dropdown-item", children: intl.formatMessage(messages[option.messageKey]) }, option.value))) })] }));
+};
+export default FilterDropdown;
+//# sourceMappingURL=FilterDropdown.js.map

package/dist/certificates/components/FilterDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.js","sourceRoot":"","sources":["../../../src/certificates/components/FilterDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,QAAQ,MAAM,aAAa,CAAC;AAQnC,MAAM,cAAc,GAAG;IACrB;QACE,KAAK,EAAE,iBAAiB,CAAC,YAAY;QACrC,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,QAAQ;QACjC,UAAU,EAAE,gBAAgB;KAC7B;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,YAAY;QACrC,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,aAAa;QACtC,UAAU,EAAE,oBAAoB;KACjC;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,iBAAiB;QAC1C,UAAU,EAAE,uBAAuB;KACpC;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,WAAW;QACpC,UAAU,EAAE,kBAAkB;KAC/B;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,kBAAkB;QAC3C,UAAU,EAAE,yBAAyB;KACtC;IACD;QACE,KAAK,EAAE,iBAAiB,CAAC,WAAW;QACpC,UAAU,EAAE,mBAAmB;KAChC;CACO,CAAC;AAEX,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAuB,EAAE,EAAE;IAC7E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,cAAc;QAClC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAEnD,OAAO,CACL,MAAC,QAAQ,IAAC,SAAS,EAAE,gCAAgC,SAAS,IAAI,EAAE,EAAE,aACpE,KAAC,QAAQ,CAAC,MAAM,IACd,EAAE,EAAC,iBAAiB,EACpB,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,yDAAyD,YAEnE,gBAAM,SAAS,EAAC,2BAA2B,aACzC,KAAC,UAAU,IAAC,SAAS,EAAC,MAAM,GAAG,EAC9B,aAAa,IACT,GACS,EAClB,KAAC,QAAQ,CAAC,IAAI,cACX,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,KAAC,QAAQ,CAAC,IAAI,IAEZ,MAAM,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,SAAS,EAAC,sBAAsB,YAE/B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAL3C,MAAM,CAAC,KAAK,CAMH,CACjB,CAAC,GACY,IACP,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { Dropdown } from '@openedx/paragon';\nimport { FilterList } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport { CertificateFilter } from '../types';\nimport messages from '../messages';\n\ninterface FilterDropdownProps {\n  value: CertificateFilter,\n  onChange: (value: CertificateFilter) => void,\n  className?: string,\n}\n\nconst FILTER_OPTIONS = [\n  {\n    value: CertificateFilter.ALL_LEARNERS,\n    messageKey: 'filterAllLearners',\n  },\n  {\n    value: CertificateFilter.RECEIVED,\n    messageKey: 'filterReceived',\n  },\n  {\n    value: CertificateFilter.NOT_RECEIVED,\n    messageKey: 'filterNotReceived',\n  },\n  {\n    value: CertificateFilter.AUDIT_PASSING,\n    messageKey: 'filterAuditPassing',\n  },\n  {\n    value: CertificateFilter.AUDIT_NOT_PASSING,\n    messageKey: 'filterAuditNotPassing',\n  },\n  {\n    value: CertificateFilter.ERROR_STATE,\n    messageKey: 'filterErrorState',\n  },\n  {\n    value: CertificateFilter.GRANTED_EXCEPTIONS,\n    messageKey: 'filterGrantedExceptions',\n  },\n  {\n    value: CertificateFilter.INVALIDATED,\n    messageKey: 'filterInvalidated',\n  },\n] as const;\n\nconst FilterDropdown = ({ value, onChange, className }: FilterDropdownProps) => {\n  const intl = useIntl();\n\n  const selectedOption = FILTER_OPTIONS.find((option) => option.value === value);\n  const selectedLabel = selectedOption\n    ? intl.formatMessage(messages[selectedOption.messageKey])\n    : intl.formatMessage(messages.filterAllLearners);\n\n  return (\n    <Dropdown className={`certificates-filter-dropdown ${className || ''}`}>\n      <Dropdown.Toggle\n        id=\"filter-dropdown\"\n        variant=\"outline-primary\"\n        className=\"d-flex align-items-center justify-content-between w-100\"\n      >\n        <span className=\"d-flex align-items-center\">\n          <FilterList className=\"mr-2\" />\n          {selectedLabel}\n        </span>\n      </Dropdown.Toggle>\n      <Dropdown.Menu>\n        {FILTER_OPTIONS.map((option) => (\n          <Dropdown.Item\n            key={option.value}\n            active={option.value === value}\n            onClick={() => onChange(option.value)}\n            className=\"filter-dropdown-item\"\n          >\n            {intl.formatMessage(messages[option.messageKey])}\n          </Dropdown.Item>\n        ))}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n};\n\nexport default FilterDropdown;\n"]}

package/dist/certificates/components/GenerationHistoryTable.d.ts

@@ -0,0 +1,11 @@
+import type { InstructorTask } from '../types';
+interface GenerationHistoryTableProps {
+    data: InstructorTask[];
+    isLoading: boolean;
+    itemCount: number;
+    pageCount: number;
+    currentPage: number;
+    onPageChange: (pageIndex: number) => void;
+}
+declare const GenerationHistoryTable: ({ data, isLoading, itemCount, pageCount, currentPage, onPageChange, }: GenerationHistoryTableProps) => import("react/jsx-runtime").JSX.Element;
+export default GenerationHistoryTable;