feat: inital design for reminder page

boklisten · Dec 17, 2024 · 446a743 · 446a743
1 parent 6b904d9
commit 446a743
Show file tree

Hide file tree

Showing 13 changed files with 449 additions and 137 deletions.
diff --git a/src/app/admin/hurtigutdeling/page.tsx b/src/app/admin/hurtigutdeling/page.tsx
@@ -1,30 +1,21 @@
-import { Card, Container, Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import { Metadata } from "next";
+"use client";
+import { UserDetail } from "@boklisten/bl-model";
+import { PageContainer } from "@toolpad/core";
+import { useState } from "react";
 
-import RapidHandout from "@/components/RapidHandout";
-
-export const metadata: Metadata = {
-  title: "Hurtigutdeling",
-  description: "Adminverktøy for å raskt dele ut bøker.",
-};
+import RapidHandoutDetails from "@/components/RapidHandoutDetails";
+import UserDetailSearchField from "@/components/search/UserDetailSearchField";
 
 export default function HandoutPage() {
+  const [customer, setCustomer] = useState<UserDetail | null>(null);
   return (
-    <Card sx={{ paddingBottom: 4 }}>
-      <Container component="main" maxWidth="xs">
-        <Box
-          sx={{
-            marginTop: 2,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <Typography variant="h1">Hurtigutdeling</Typography>
-          <RapidHandout />
-        </Box>
-      </Container>
-    </Card>
+    <PageContainer>
+      <UserDetailSearchField
+        onSelectedResult={(userDetail) => {
+          setCustomer(userDetail);
+        }}
+      />
+      {customer && <RapidHandoutDetails customer={customer} />}
+    </PageContainer>
   );
 }
diff --git a/src/app/admin/kommunikasjon/overleveringer/page.tsx b/src/app/admin/kommunikasjon/overleveringer/page.tsx
@@ -1,9 +1,6 @@
 "use client";
-import { redirect } from "next/navigation";
-
-import { attachTokensToHref } from "@/components/AuthLinker";
-import BL_CONFIG from "@/utils/bl-config";
+import { PageContainer } from "@toolpad/core";
 
 export default function MatchesCommunicationPage() {
-  redirect(attachTokensToHref(BL_CONFIG.blAdmin.basePath + "messenger/match"));
+  return <PageContainer>matches</PageContainer>;
 }
diff --git a/src/app/admin/kommunikasjon/paaminnelser/page.tsx b/src/app/admin/kommunikasjon/paaminnelser/page.tsx
@@ -1,11 +1,54 @@
 "use client";
-import { redirect } from "next/navigation";
+import { CustomerItemType } from "@boklisten/bl-model";
+import { MessageMethod } from "@boklisten/bl-model/message/message-method/message-method";
+import { Grid2, Typography } from "@mui/material";
+import { PageContainer } from "@toolpad/core";
+import { useState } from "react";
 
-import { attachTokensToHref } from "@/components/AuthLinker";
-import BL_CONFIG from "@/utils/bl-config";
+import CustomerItemTypePicker from "@/components/admin/communication/CustomerItemTypePicker";
+import DeadlinePicker from "@/components/admin/communication/DeadlinePicker";
+import MessageMethodPicker from "@/components/admin/communication/MessageMethodPicker";
+import MultiBranchPicker from "@/components/admin/communication/MultiBranchPicker";
 
 export default function RemindersPage() {
-  redirect(
-    attachTokensToHref(BL_CONFIG.blAdmin.basePath + "messenger/reminder"),
+  const [deadline, setDeadline] = useState<Date | null>(null);
+  const [customerItemType, setCustomerItemType] =
+    useState<CustomerItemType | null>(null);
+  const [branchIDs, setBranchIDs] = useState<string[]>([]);
+  const [messageMethod, setMessageMethod] = useState<MessageMethod | null>(
+    null,
+  );
+
+  return (
+    <PageContainer>
+      <Grid2 container spacing={2} direction="column">
+        <MultiBranchPicker
+          onChange={(newBranchIDs) => {
+            setBranchIDs(newBranchIDs);
+          }}
+        />
+        <DeadlinePicker
+          onChange={(newDeadline) => {
+            setDeadline(newDeadline);
+          }}
+        />
+        <Grid2 container sx={{ justifyContent: "space-between" }} width={318}>
+          <CustomerItemTypePicker
+            onChange={(newCustomerItemType) => {
+              setCustomerItemType(newCustomerItemType);
+            }}
+          />
+          <MessageMethodPicker
+            onChange={(newMessageMethod) => {
+              setMessageMethod(newMessageMethod);
+            }}
+          />
+        </Grid2>
+        <Typography>Schools: {branchIDs.join(", ")}</Typography>
+        <Typography>Deadline: {String(deadline ?? "")}</Typography>
+        <Typography>CustomerItemType: {customerItemType ?? ""}</Typography>
+        <Typography>MessageMethod: {messageMethod ?? ""}</Typography>
+      </Grid2>
+    </PageContainer>
   );
 }
diff --git a/src/app/admin/kommunikasjon/page.tsx b/src/app/admin/kommunikasjon/page.tsx
@@ -1,10 +1,38 @@
 "use client";
-import { redirect } from "next/navigation";
+import { PageContainer } from "@toolpad/core";
 
-import { attachTokensToHref } from "@/components/AuthLinker";
-import BL_CONFIG from "@/utils/bl-config";
+import AdminNavigationCards from "@/components/AdminNavigationCards";
+import { COMMUNICATION_SUB_PAGES } from "@/utils/adminNavigation";
 
 export default function CommunicationRootPage() {
-  redirect(attachTokensToHref(BL_CONFIG.blAdmin.basePath + "messenger"));
-  // apply permission guard once implemented       <PagePermissionGuard requiredPermission={"admin"} />
+  /**
+   * TODO: estimat på antall mottakere
+   *
+   * Flow:
+   *     Velg kundegruppe
+   *     kunder med bokfrist | kunder med overleveringer
+   *
+   *     > Kunder med bokfrist
+   *     => Velg FRIST (Toggle buttons / date picker)
+   *     => Velg elevgruppe (privatist/vgs)
+   *     => Velg Skoler (Toggle button (alle / multi-select)
+   *     => Velg SMS eller E-post
+   *     >>> SMS => Fritekst
+   *     >>> E-post (TemplateID)
+   *
+   *     > Kunder med overleveringer
+   *     => Velg Skoler (Toggle button (alle / multi-select)
+   *     => Velg ALLE / sendere / mottakere / kun stand
+   *     => Velg SMS eller E-post (templateID)
+   *
+   */
+  return (
+    <PageContainer sx={{ justifyContent: "center" }}>
+      <AdminNavigationCards
+        navLinks={COMMUNICATION_SUB_PAGES}
+        label={"Velg anledning"}
+        rootPath={"/admin/kommunikasjon"}
+      />
+    </PageContainer>
+  );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -6,7 +6,7 @@ import { ReactNode, useEffect, useState } from "react";
 
 import { getUserPermission } from "@/api/auth";
 import PagePermissionGuard from "@/components/PagePermissionGuard";
-import { getAdminPagesNavigationLinks } from "@/utils/adminPageNavigation";
+import { getAdminPagesNavigationLinks } from "@/utils/adminNavigation";
 import theme from "@/utils/theme";
 
 export default function AdminLayout({ children }: { children: ReactNode }) {
@@ -32,11 +32,7 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
         homeUrl: "start",
       }}
     >
-      <DashboardLayout
-        defaultSidebarCollapsed={true} // TODO: remove this once we are fully migrated away from bl-admin
-      >
-        {children}
-      </DashboardLayout>
+      <DashboardLayout>{children}</DashboardLayout>
       <PagePermissionGuard requiredPermission={"employee"} />
     </AppProvider>
   );

diff --git a/src/app/admin/start/page.tsx b/src/app/admin/start/page.tsx
@@ -1,20 +1,28 @@
 "use client";
 import { Typography } from "@mui/material";
-import { PageContainer } from "@toolpad/core";
+import { Navigation, PageContainer } from "@toolpad/core";
+import { useEffect, useState } from "react";
 
+import { getUserPermission } from "@/api/auth";
 import AdminNavigationCards from "@/components/AdminNavigationCards";
+import { getAdminPagesNavigationLinks } from "@/utils/adminNavigation";
 
 export default function AdminStartPage() {
+  const [navLinks, setNavLinks] = useState<Navigation>([]);
+  useEffect(() => {
+    const userPermission = getUserPermission();
+    setNavLinks(getAdminPagesNavigationLinks(userPermission));
+  }, []);
   return (
     <PageContainer>
-      <Typography variant="h2" sx={{ textAlign: "center" }}>
+      <Typography variant="h2" sx={{ textAlign: "center", mb: 5 }}>
         Velkommen til <b>bl-admin</b>, Boklisten sitt administrasjonssystem for
         bøker!
       </Typography>
-      <Typography variant={"subtitle1"} sx={{ textAlign: "center" }}>
-        Trykk på et verktøy for å komme i gang!
-      </Typography>
-      <AdminNavigationCards />
+      <AdminNavigationCards
+        navLinks={navLinks}
+        label={"Trykk på et verktøy for å komme i gang!"}
+      />
     </PageContainer>
   );
 }
diff --git a/src/components/AdminNavigationCards.tsx b/src/components/AdminNavigationCards.tsx
@@ -8,46 +8,50 @@ import {
   Typography,
 } from "@mui/material";
 import { Navigation, NavigationPageItem } from "@toolpad/core";
-import { useEffect, useState } from "react";
 
-import { getUserPermission } from "@/api/auth";
 import DynamicLink from "@/components/DynamicLink";
-import { getAdminPagesNavigationLinks } from "@/utils/adminPageNavigation";
-
-export default function AdminNavigationCards() {
-  const [navLinks, setNavLinks] = useState<Navigation>([]);
-  useEffect(() => {
-    const userPermission = getUserPermission();
-    setNavLinks(getAdminPagesNavigationLinks(userPermission));
-  }, []);
 
+export default function AdminNavigationCards({
+  navLinks,
+  rootPath,
+  label,
+}: {
+  navLinks: Navigation;
+  label: string;
+  rootPath?: string;
+}) {
   return (
-    <Grid2 container spacing={2} sx={{ justifyContent: "center", mt: 5 }}>
-      {navLinks
-        .filter(
-          (navLink): navLink is NavigationPageItem => navLink.kind === "page",
-        )
-        .map((navLink) => (
-          <Grid2 key={navLink.title}>
-            <Card sx={{ width: 170 }}>
-              <DynamicLink
-                href={`/${navLink.segment ?? ""}`}
-                sx={{ color: "inherit" }}
-              >
-                <CardActionArea>
-                  <CardContent>
-                    <Stack
-                      sx={{ justifyContent: "center", alignItems: "center" }}
-                    >
-                      {navLink.icon}
-                      <Typography>{navLink.title}</Typography>
-                    </Stack>
-                  </CardContent>
-                </CardActionArea>
-              </DynamicLink>
-            </Card>
-          </Grid2>
-        ))}
-    </Grid2>
+    <>
+      <Typography variant={"subtitle1"} sx={{ textAlign: "center", mb: 2 }}>
+        {label}
+      </Typography>
+      <Grid2 container spacing={2} sx={{ justifyContent: "center" }}>
+        {navLinks
+          .filter(
+            (navLink): navLink is NavigationPageItem => navLink.kind === "page",
+          )
+          .map((navLink) => (
+            <Grid2 key={navLink.title}>
+              <Card sx={{ width: 170 }}>
+                <DynamicLink
+                  href={`${rootPath ?? ""}/${navLink.segment ?? ""}`}
+                  sx={{ color: "inherit" }}
+                >
+                  <CardActionArea>
+                    <CardContent>
+                      <Stack
+                        sx={{ justifyContent: "center", alignItems: "center" }}
+                      >
+                        {navLink.icon}
+                        <Typography>{navLink.title}</Typography>
+                      </Stack>
+                    </CardContent>
+                  </CardActionArea>
+                </DynamicLink>
+              </Card>
+            </Grid2>
+          ))}
+      </Grid2>
+    </>
   );
 }
diff --git a/src/components/RapidHandout.tsx b/src/components/RapidHandout.tsx
diff --git a/src/components/admin/communication/CustomerItemTypePicker.tsx b/src/components/admin/communication/CustomerItemTypePicker.tsx
@@ -0,0 +1,32 @@
+import { CustomerItemType } from "@boklisten/bl-model";
+import { Box, Typography } from "@mui/material";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { useState } from "react";
+
+export default function CustomerItemTypePicker({
+  onChange,
+}: {
+  onChange: (selectedCustomerItemType: CustomerItemType | null) => void;
+}) {
+  const [customerItemType, setCustomerItemType] = useState<string | null>(null);
+  return (
+    <Box>
+      <Typography variant={"h5"} sx={{ mb: 1 }}>
+        Kundetype
+      </Typography>
+      <ToggleButtonGroup
+        color="primary"
+        value={customerItemType}
+        exclusive
+        onChange={(_, newCustomerItemType) => {
+          onChange(newCustomerItemType);
+          setCustomerItemType(newCustomerItemType);
+        }}
+      >
+        <ToggleButton value={"rent"}>VGS</ToggleButton>
+        <ToggleButton value={"partly-payment"}>Privatist</ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+}