WIP: transport sector ui

app/src/app/[lng]/[inventory]/data/[step]/SubsectorDrawer.tsx

@@ -264,7 +264,6 @@ export function SubsectorDrawer({
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     if (!subSector) return;
     logger.debug("Subsector data", data);
-    console.log(data);
 
     const results = await resolvePromisesSequentially(
       Object.keys(data.subcategoryData).map((subCategoryId) => {
@@ -510,23 +509,26 @@ export function SubsectorDrawer({
                         <h2>
                           <AccordionButton px="16px">
                             <HStack w="full" p={0} m={0}>
-                              {
-                                !isDirty && !isScopeCompleted(scope.value, scopeData) ? "": isScopeCompleted(scope.value, scopeData) && isValid && !isDirty? (
-                                  <Tag color="interactive.tertiary" border="none">
-                                    <BsCheckCircle
-                                      color="interactive.tertiary"
-                                      size="32px"
-                                    />
-                                  </Tag>
-                                ) : (
-                                  <Tag
-                                    color="sentiment.negativeDefault"
-                                    border="none"
-                                  >
-                                    <RiErrorWarningLine size="32px" />
-                                  </Tag>
-                                )
-                              }
+                              {!isDirty &&
+                              !isScopeCompleted(scope.value, scopeData) ? (
+                                ""
+                              ) : isScopeCompleted(scope.value, scopeData) &&
+                                isValid &&
+                                !isDirty ? (
+                                <Tag color="interactive.tertiary" border="none">
+                                  <BsCheckCircle
+                                    color="interactive.tertiary"
+                                    size="32px"
+                                  />
+                                </Tag>
+                              ) : (
+                                <Tag
+                                  color="sentiment.negativeDefault"
+                                  border="none"
+                                >
+                                  <RiErrorWarningLine size="32px" />
+                                </Tag>
+                              )}
                               <Box as="span" flex="1" textAlign="left" w="full">
                                 <Heading
                                   size="title.md"
@@ -545,7 +547,16 @@ export function SubsectorDrawer({
                                 >
                                   {scope.label}
                                 </Text>
-                                {!isDirty && isScopeCompleted(scope.value, scopeData) ? null : isScopeCompleted(scope.value, scopeData) && isValid && !isDirty? (
+                                {!isDirty &&
+                                isScopeCompleted(
+                                  scope.value,
+                                  scopeData,
+                                ) ? null : isScopeCompleted(
+                                    scope.value,
+                                    scopeData,
+                                  ) &&
+                                  isValid &&
+                                  !isDirty ? (
                                   <Text
                                     color="sentiment.negativeDefault"
                                     size="body.md"
@@ -555,7 +566,9 @@ export function SubsectorDrawer({
                                   >
                                     {t("save-missing-scope-info")}
                                   </Text>
-                                ): ""}
+                                ) : (
+                                  ""
+                                )}
                               </Box>
 
                               <AccordionIcon

app/src/app/[lng]/[inventory]/data/[step]/[subsector]/page.tsx

@@ -7,6 +7,7 @@ import AddActivityModal from "@/components/Modals/add-activity-modal";
 import HeadingText from "@/components/heading-text";
 import LoadingState from "@/components/loading-state";
 import { useTranslation } from "@/i18n/client";
+import { RootState } from "@/lib/store";
 import { api } from "@/services/api";
 import { AddIcon, ArrowBackIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import {
@@ -59,11 +60,12 @@ import { FaNetworkWired } from "react-icons/fa";
 import { FiTrash2 } from "react-icons/fi";
 import { MdMoreVert, MdOutlineHomeWork } from "react-icons/md";
 import { TbTrash } from "react-icons/tb";
+import { useDispatch, useSelector } from "react-redux";
 
 function SubSectorPage({
-  params: { lng, step, inventory },
+  params: { lng, step, inventory, subsector },
 }: {
-  params: { lng: string; step: string; inventory: string };
+  params: { lng: string; step: string; inventory: string; subsector: string };
 }) {
   const router = useRouter();
   const { t } = useTranslation(lng, "data");
@@ -136,8 +138,6 @@ function SubSectorPage({
   } = useDisclosure();
 
   const { data } = api.useMockDataQuery({});
-  console.log(data);
-
   const [isLoadingScope1, setIsloadingScope1] = useState(false);
   const [isLoadingScope2, setIsloadingScope2] = useState(false);
 
@@ -155,6 +155,22 @@ function SubSectorPage({
     }, 1000);
   };
 
+  const getSectorName = (currentStep: string) => {
+    switch (currentStep) {
+      case "1":
+        return t("stationary-energy");
+      case "2":
+        return t("transportation");
+      case "3":
+        return t("waste");
+      default:
+        return t("stationary-energy");
+    }
+  };
+  const subsectorData = useSelector(
+    (state: RootState) => state.subsector.subsector,
+  );
+
   return (
     <>
       <div className="pt-16 pb-16 w-[1090px] max-w-full mx-auto px-4">
@@ -186,15 +202,15 @@ function SubSectorPage({
               </BreadcrumbItem>
               <BreadcrumbItem>
                 <BreadcrumbLink
-                  href={`/${inventory}/data/1`}
+                  href={`/${inventory}/data/${step}`}
                   color="content.tertiary"
                 >
-                  {t("stationary-energy")}
+                  {getSectorName(step)}
                 </BreadcrumbLink>
               </BreadcrumbItem>
               <BreadcrumbItem>
                 <BreadcrumbLink href="#" color="content.link">
-                  {t("commercial-and-institutional-buildings")}
+                  {subsectorData?.subsectorName}
                 </BreadcrumbLink>
               </BreadcrumbItem>
             </Breadcrumb>
@@ -206,7 +222,9 @@ function SubSectorPage({
           </Box>
           <Box display="flex" gap="16px" flexDirection="column">
             <Text fontFamily="heading" fontSize="headline.md" fontWeight="bold">
-              I.1.2 {t("commercial-and-institutional-buildings")}
+              {subsectorData?.referenceNumber +
+                " " +
+                subsectorData?.subsectorName}
             </Text>
             <Text
               fontFamily="heading"

app/src/app/[lng]/[inventory]/data/[step]/page.tsx

@@ -17,6 +17,7 @@ import {
   clear,
   removeFile,
 } from "@/features/city/inventoryDataSlice";
+import { setSubsector, clearSubsector } from "@/features/city/subsectorSlice";
 import { useTranslation } from "@/i18n/client";
 import { RootState } from "@/lib/store";
 import { ScopeAttributes } from "@/models/Scope";
@@ -604,19 +605,31 @@ export default function AddDataSteps({
     };
   }, []);
 
+  const getCurrentStepParam = (currentStepName: string) => {
+    switch (currentStepName) {
+      case t("stationary-energy"):
+        return 1;
+      case t("transportation"):
+        return 2;
+      case t("waste"):
+        return 3;
+      default:
+        return 1;
+    }
+  };
+
   return (
     <>
       <Box id="top" />
       <Box
         bg="background.backgroundLight"
-        ml="-2px"
         borderColor="border.neutral"
         borderBottomWidth={scrollPosition > 0 ? "1px" : ""}
-        className={`fixed z-10 top-[0px] w-full pt-[130px]`}
+        className={`fixed z-10 top-[0px] w-full pt-[130px] h-[400px]`}
         mt={scrollPosition > 0 ? "-200px" : ""}
       >
         <div className=" w-[1090px] max-w-full mx-auto px-4">
-          <Box w="full" display="flex" alignItems="center" gap="16px" mb="64px">
+          <Box w="full" display="flex" alignItems="center" gap="16px" mb="35px">
             <Button
               variant="ghost"
               leftIcon={<ArrowBackIcon boxSize={6} />}
@@ -783,9 +796,18 @@ export default function AddDataSteps({
                     w="full"
                     className="hover:drop-shadow-xl transition-shadow"
                     onClick={() => {
-                      console.log(subSector);
-                      router.push(`/${inventory}/data/1/${subSector.sectorId}`);
-                      // onSubsectorClick(subSector);
+                      dispatch(
+                        setSubsector({
+                          subsectorName: subSector.subsectorName,
+                          scopeId: "",
+                          sectorId: subSector.sectorId,
+                          subsectorId: subSector.subsectorId,
+                          referenceNumber: subSector.referenceNumber,
+                        }),
+                      );
+                      router.push(
+                        `/${inventory}/data/${getCurrentStepParam(currentStep.title)}/${subSector.sectorId}`,
+                      );
                     }}
                     key={subSector.subsectorId}
                   >

app/src/features/city/subsectorSlice.ts

@@ -0,0 +1,31 @@
+import { RootState } from "@/lib/store";
+import { SubSectorAttributes } from "@/models/SubSector";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface SubsectorState {
+  subsector?: SubSectorAttributes;
+}
+
+const initialState = {
+  city: undefined,
+} as SubsectorState;
+
+export const subsectorSlice = createSlice({
+  name: "subsector",
+  // state type is inferred from the initial state
+  initialState,
+  reducers: {
+    setSubsector: (state, action: PayloadAction<SubSectorAttributes>) => {
+      state.subsector = action.payload;
+    },
+    clearSubsector: (state) => {
+      state.subsector = undefined;
+    },
+  },
+});
+
+export const { clearSubsector, setSubsector } = subsectorSlice.actions;
+
+export const selectSubsector = (state: RootState) => state.subsector.subsector;
+
+export default subsectorSlice.reducer;

app/src/lib/store.ts

@@ -5,6 +5,7 @@ import cityReducer from "@/features/city/citySlice";
 import openclimateCityReducer from "@/features/city/openclimateCitySlice";
 import openclimateCityDataReducer from "@/features/city/openclimateCityDataSlice";
 import inventoryDataReducer from "@/features/city/inventoryDataSlice";
+import subsectorReducer from "@/features/city/subsectorSlice";
 
 import {
   persistStore,
@@ -25,6 +26,7 @@ const reducer = combineReducers({
   city: cityReducer,
   openClimateCity: openclimateCityReducer,
   openClimateCityData: openclimateCityDataReducer,
+  subsector: subsectorReducer,
 });
 
 const persistConfig = {