Add rejecting application reservation unit option

apps/admin-ui/src/App.tsx

@@ -34,7 +34,7 @@ const ResourceEditorView = dynamic(
 );
 
 const ApplicationDetails = dynamic(
-  () => import("./component/applications/ApplicationDetails")
+  () => import("./spa/applications/[id]/index")
 );
 
 const ReservationUnits = dynamic(

apps/admin-ui/src/component/Unit/UnitsTable.tsx

@@ -16,38 +16,48 @@ type Props = {
   isLoading?: boolean;
 };
 
-const getColConfig = (t: TFunction, isMyUnits?: boolean) => [
-  {
-    headerName: t("Units.headings.name"),
-    key: "nameFi",
-    transform: ({ nameFi, pk }: UnitNode) => (
-      <TableLink href={isMyUnits ? myUnitUrl(pk ?? 0) : unitUrl(pk ?? 0)}>
-        {truncate(nameFi ?? "-", MAX_UNIT_NAME_LENGTH)}
-      </TableLink>
-    ),
-    width: "50%",
-    isSortable: true,
-  },
-  {
-    headerName: t("Units.headings.serviceSector"),
-    key: "serviceSector",
-    isSortable: false,
-    transform: (unit: UnitNode) =>
-      (unit?.serviceSectors || [])
-        .map((serviceSector) => serviceSector?.nameFi)
-        .join(","),
-    width: "25%",
-  },
-  {
-    headerName: t("Units.headings.reservationUnitCount"),
-    key: "typeFi",
-    isSortable: false,
-    transform: (unit: UnitNode) => (
-      <> {unit?.reservationunitSet?.length ?? 0} </>
-    ),
-    width: "25%",
-  },
-];
+type ColumnType = {
+  headerName: string;
+  key: string;
+  transform?: (unit: UnitNode) => JSX.Element | string;
+  width: string;
+  isSortable: boolean;
+};
+
+function getColConfig(t: TFunction, isMyUnits?: boolean): ColumnType[] {
+  return [
+    {
+      headerName: t("Units.headings.name"),
+      key: "nameFi",
+      transform: ({ nameFi, pk }: UnitNode) => (
+        <TableLink href={isMyUnits ? myUnitUrl(pk ?? 0) : unitUrl(pk ?? 0)}>
+          {truncate(nameFi ?? "-", MAX_UNIT_NAME_LENGTH)}
+        </TableLink>
+      ),
+      width: "50%",
+      isSortable: true,
+    },
+    {
+      headerName: t("Units.headings.serviceSector"),
+      key: "serviceSector",
+      isSortable: false,
+      transform: (unit: UnitNode) =>
+        (unit?.serviceSectors || [])
+          .map((serviceSector) => serviceSector?.nameFi)
+          .join(","),
+      width: "25%",
+    },
+    {
+      headerName: t("Units.headings.reservationUnitCount"),
+      key: "typeFi",
+      isSortable: false,
+      transform: (unit: UnitNode) => (
+        <> {unit?.reservationunitSet?.length ?? 0} </>
+      ),
+      width: "25%",
+    },
+  ];
+}
 
 export function UnitsTable({
   sort,

apps/admin-ui/src/helpers/index.ts

@@ -2,6 +2,10 @@
 import {
   type ReservationNode,
   ReservationTypeChoice,
+  ApplicantTypeChoice,
+  type ApplicationNode,
+  ApplicationSectionStatusChoice,
+  ApplicationStatusChoice,
 } from "common/types/gql-types";
 import { addSeconds } from "date-fns";
 
@@ -61,3 +65,53 @@ export const reservationToInterval = (
     type: x.type ?? undefined,
   };
 };
+
+export function getApplicantName(app: ApplicationNode): string {
+  if (app.applicantType === ApplicantTypeChoice.Individual) {
+    const { firstName, lastName } = app.contactPerson || {};
+    return `${firstName || "-"} ${lastName || "-"}`;
+  }
+  return app.organisation?.name || "-";
+}
+
+export function getApplicationStatusColor(
+  status: ApplicationStatusChoice,
+  size: "s" | "l"
+): string {
+  switch (status) {
+    case ApplicationStatusChoice.Handled:
+      return "var(--color-info)";
+    case ApplicationStatusChoice.InAllocation:
+      return "var(--color-alert-dark)";
+    case ApplicationStatusChoice.Received:
+    case ApplicationStatusChoice.Draft:
+    case ApplicationStatusChoice.ResultsSent:
+      return "var(--color-white)";
+    case ApplicationStatusChoice.Expired:
+    case ApplicationStatusChoice.Cancelled:
+    default:
+      switch (size) {
+        case "s":
+          return "var(--color-error)";
+        case "l":
+        default:
+          return "var(--color-error-dark)";
+      }
+  }
+}
+
+export function getApplicationSectiontatusColor(
+  status: ApplicationSectionStatusChoice
+): string {
+  switch (status) {
+    case ApplicationSectionStatusChoice.Reserved:
+    case ApplicationSectionStatusChoice.Unallocated:
+    case ApplicationSectionStatusChoice.InAllocation:
+      return "var(--color-alert-dark)";
+    case ApplicationSectionStatusChoice.Handled:
+      return "var(--color-success)";
+    case ApplicationSectionStatusChoice.Failed:
+    default:
+      return "var(--color-error)";
+  }
+}

apps/admin-ui/src/i18n/messages.ts

@@ -200,6 +200,8 @@ const translations: ITranslations = {
     mutationFailed: ["Muutos epäonnistui"],
     noPermission: ["Sinulla ei ole käyttöoikeutta."],
     mutationNoDataReturned: ["Odottamaton vastaus."],
+    cantRejectAlreadyAllocated: ["Jo jaettua vuoroa ei voi hylätä."],
+    formValidationError: ["Lomakkeessa on virheitä. {{ message }}"],
     descriptive: {
       "Reservation overlaps with reservation before due to buffer time.": [
         "Varaus menee päällekkäin edellisen varauksen kanssa tauon takia.",
@@ -413,6 +415,9 @@ const translations: ITranslations = {
     numTurns: ["Vuorojen määrä"],
     authenticatedUser: ["Tunnistautunut käyttäjä"],
     emptyFilterPageName: ["hakemusta"],
+    rejected: ["Hylätty"],
+    btnReject: ["Hylkää"],
+    btnRevert: ["Palauta"],
     headings: {
       id: ["id"],
       customer: ["Hakija"],