Skeleten for show unprocessed application (#1313)

* Skeleten for show unprocessed application

* Removed unneccessary line changes

* Fix broken code

* Fixed breadcrumb

* Added count of applicants

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx

@@ -82,7 +82,14 @@ export function RecruitmentGangOverviewPage() {
       >
         {t(KEY.recruitment_show_applicants_without_interview)}
       </Button>
-      <Button theme="white" rounded={true} link={ROUTES.frontend.admin_information_create}>
+      <Button
+        theme="white"
+        rounded={true}
+        link={reverse({
+          pattern: ROUTES.frontend.admin_recruitment_show_unprocessed_applicants,
+          urlParams: { recruitmentId },
+        })}
+      >
         {t(KEY.recruitment_show_unprocessed_applicants)}
       </Button>
       <Button

frontend/src/PagesAdmin/RecruitmentUnprocessedApplicantsPage/RecruitmentUnprocessedApplicantsPage.tsx

@@ -0,0 +1,62 @@
+import { useTitle } from '~/hooks';
+import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
+import { KEY } from '~/i18n/constants';
+import { Button, Table } from '~/Components';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
+import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const data = [
+  ['John Doe', 'High', '[email protected]', 'Frontend Developer', 'vil ha'],
+  ['Jane Smith', 'Medium', '[email protected]', 'Backend Developer', 'reservert'],
+  ['Michael Johnson', 'Low', '[email protected]', 'Data Scientist', 'automatisk avslag'],
+  ['Emily Davis', 'High', '[email protected]', 'Full Stack Developer', 'ikke satt'],
+  ['John Doe', 'Medium', '[email protected]', 'Project Manager', 'vil ha'],
+  ['Chris Brown', 'Low', '[email protected]', 'QA Engineer', 'reservert'],
+];
+
+export function RecruitmentUnprocessedApplicantsPage() {
+  const { t } = useTranslation();
+  const { recruitmentId } = useParams();
+  const title = t(KEY.recruitment_unprocessed_applicants);
+  useTitle(title);
+  useEffect(() => {}, [t]);
+
+  // Count the total number of rows
+  const totalRows = data.length;
+
+  const tableColumns = [
+    { content: t(KEY.recruitment_applicant), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_priority), sortable: true, hideSortButton: false },
+    { content: t(KEY.common_email), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_application), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_recruiter_status), sortable: true, hideSortButton: false },
+  ];
+
+  const header = (
+    <>
+      <Button
+        theme="success"
+        rounded={true}
+        link={reverse({
+          pattern: ROUTES.frontend.admin_recruitment_gang_overview,
+          urlParams: { recruitmentId: recruitmentId },
+        })}
+      >
+        {t(KEY.common_go_back)}
+      </Button>
+      {/* Display the total number of applicants */}
+      <p>
+        {t(KEY.recruitment_applicants)}: {totalRows}
+      </p>
+    </>
+  );
+
+  return (
+    <AdminPageLayout title={title} header={header}>
+      <Table columns={tableColumns} data={data} />
+    </AdminPageLayout>
+  );
+}

frontend/src/PagesAdmin/RecruitmentUnprocessedApplicantsPage/index.ts

@@ -0,0 +1 @@
+export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';

frontend/src/PagesAdmin/index.ts

@@ -14,19 +14,20 @@ export { InformationFormAdminPage } from './InformationFormAdminPage';
 export { InterviewNotesPage } from './InterviewNotesAdminPage';
 export { OpeningHoursAdminPage } from './OpeningHoursAdminPage';
 export { RecruitmentAdminPage } from './RecruitmentAdminPage';
+export { RecruitmentApplicantAdminPage } from './RecruitmentApplicantAdminPage';
 export { RecruitmentFormAdminPage } from './RecruitmentFormAdminPage';
 export { RecruitmentGangAdminPage } from './RecruitmentGangAdminPage';
+export { RecruitmentGangAllApplicantsAdminPage } from './RecruitmentGangAllApplicantsAdminPage';
 export { RecruitmentGangOverviewPage } from './RecruitmentGangOverviewPage';
+export { RecruitmentOverviewPage } from './RecruitmentOverviewPage';
 export { RecruitmentPositionFormAdminPage } from './RecruitmentPositionFormAdminPage';
 export { RecruitmentPositionOverviewPage } from './RecruitmentPositionOverviewPage';
+export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';
 export { RecruitmentUsersWithoutThreeInterviewCriteriaPage } from './RecruitmentUsersWithoutThreeInterviewCriteriaPage';
-export { RecruitmentGangAllApplicantsAdminPage } from './RecruitmentGangAllApplicantsAdminPage';
-export { RecruitmentApplicantAdminPage } from './RecruitmentApplicantAdminPage';
 export { SaksdokumentAdminPage } from './SaksdokumentAdminPage';
 export { SaksdokumentFormAdminPage } from './SaksdokumentFormAdminPage';
-export { SultenReservationAdminPage } from './SultenReservationAdminPage';
 export { SultenMenuAdminPage } from './SultenMenuAdminPage';
 export { SultenMenuItemFormAdminPage } from './SultenMenuItemFormAdminPage';
-export { RecruitmentOverviewPage } from './RecruitmentOverviewPage';
+export { SultenReservationAdminPage } from './SultenReservationAdminPage';
 export { UsersAdminPage } from './UsersAdminPage';

frontend/src/i18n/constants.ts

@@ -282,6 +282,7 @@ export const KEY = {
   recruitment_administrate: 'recruitment_administrate',
   recruitment_administrate_positions: 'recruitment_administrate_positions',
   recruitment_administrate_applications: 'recruitment_administrate_applications',
+  recruitment_unprocessed_applicants: 'recruitment_unprocessed_applicants',
   recruitment_administrate_reservations: 'recruitment_administrate_reservations',
   recruitment_my_applications: 'recruitment_my_applications',
   recruitment_all_applications: 'recruitment_all_applications',

frontend/src/i18n/translations.ts

@@ -272,6 +272,7 @@ export const nb: Record<KeyValues, string> = {
   [KEY.recruitment_administrate]: 'Administrer opptak',
   [KEY.recruitment_administrate_positions]: 'Administrer stillinger',
   [KEY.recruitment_administrate_applications]: 'Administrer søknader',
+  [KEY.recruitment_unprocessed_applicants]: 'Uprossesserte søkere',
   [KEY.recruitment_administrate_reservations]: 'Administrer reservasjoner',
   [KEY.shown_application_deadline]: 'Vist søknadsfrist',
   [KEY.actual_application_deadlin]: 'Faktisk søknadsfrist',
@@ -685,6 +686,7 @@ export const en: Record<KeyValues, string> = {
   [KEY.recruitment_administrate]: 'Administrate recruitment',
   [KEY.recruitment_administrate_positions]: 'Administrate positions',
   [KEY.recruitment_administrate_applications]: 'Administrate applications',
+  [KEY.recruitment_unprocessed_applicants]: 'Unprocessed applicants',
   [KEY.recruitment_administrate_reservations]: 'Administrate reservations',
   [KEY.actual_application_deadlin]: 'Actual deadline',
   [KEY.shown_application_deadline]: 'Displayed deadline',

frontend/src/router/router.tsx

@@ -50,6 +50,7 @@ import {
   RecruitmentUsersWithoutInterviewGangPage,
   RecruitmentUsersWithoutThreeInterviewCriteriaPage,
   RecruitmentApplicantAdminPage,
+  RecruitmentUnprocessedApplicantsPage,
   SaksdokumentFormAdminPage,
   SaksdokumentAdminPage,
   RecruitmentFormAdminPage,
@@ -411,6 +412,26 @@ export const router = createBrowserRouter(
               },
             }}
           >
+            <Route
+              path={ROUTES.frontend.admin_recruitment_show_unprocessed_applicants}
+              element={<RecruitmentUnprocessedApplicantsPage />}
+              loader={recruitmentLoader}
+              handle={{
+                crumb: ({ recruitment }: RecruitmentLoader) => {
+                  if (!recruitment) return <span>{t(KEY.common_unknown)}</span>;
+                  return (
+                    <Link
+                      url={reverse({
+                        pattern: ROUTES.frontend.admin_recruitment_show_unprocessed_applicants,
+                        urlParams: { recruitmentId: recruitment.id },
+                      })}
+                    >
+                      {t(KEY.recruitment_show_unprocessed_applicants)}
+                    </Link>
+                  );
+                },
+              }}
+            />
             <Route
               path={ROUTES.frontend.admin_recruitment_gang_overview}
               element={<PermissionRoute required={[]} element={<RecruitmentGangOverviewPage />} />}

frontend/src/routes/frontend.ts

@@ -86,6 +86,7 @@ export const ROUTES_FRONTEND = {
   admin_recruitment_gang_all_applications: '/control-panel/recruitment/:recruitmentId/:gangId/all-applications/',
   admin_recruitment_gang_users_without_interview:
     '/control-panel/recruitment/:recruitmentId/:gangId/users-without-interviews/',
+  admin_recruitment_show_unprocessed_applicants: '/control-panel/recruitment/:recruitmentId/unprocessed-applicants/',
   admin_sulten_menu: '/control-panel/lyche/menu',
   admin_sulten_menuitem_create: '/control-panel/lyche/menuitems/create',
   admin_sulten_menuitem_edit: '/control-panel/lyche/menuitems/edit/:id',