feat(skilavottord): Add municipality

apps/skilavottord/README.md

@@ -16,17 +16,17 @@ See role description further down.
 ### Dev
 
 - [Dev - role: company](https://beta.dev01.devland.is/app/skilavottord/deregister-vehicle)
-- [Dev - role: fund](https://beta.dev01.devland.is/app/skilavottord/recycled-vehicles)
+- [Dev - role: fund/municipality](https://beta.dev01.devland.is/app/skilavottord/recycled-vehicles)
 
 ### Staging
 
 - [Staging - role: company](https://beta.staging01.devland.is/app/skilavottord/deregister-vehicle)
-- [Staging - role: fund](https://beta.staging01.devland.is/app/skilavottord/recycled-vehicles)
+- [Staging - role: fund/municipality](https://beta.staging01.devland.is/app/skilavottord/recycled-vehicles)
 
 ### Prod
 
 - [Prod - role: company](https://island.is/app/skilavottord/deregister-vehicle)
-- [Prod - role: fund](https://island.is/app/skilavottord/recycled-vehicles)
+- [Prod - role: fund/municipality](https://island.is/app/skilavottord/recycled-vehicles)
 
 ## Getting started
 
@@ -106,7 +106,7 @@ URL:
 If users are registered as an employee of a recycling company, they can log in
 here to deregister vehicles that citizens have marked for recycling.
 
-### Fund frontend
+### Fund/municipality frontend
 
 URL:
 [https://island.is/app/skilavottord/recycled-vehicles](https://island.is/app/skilavottord/recycled-vehicles)

apps/skilavottord/web/auth/utils.ts

@@ -9,29 +9,35 @@ type Page =
   | 'accessControl'
   | 'accessControlCompany'
   | 'companyInfo'
-  | 'deregisterVehicleKM'
 
-export const isDeveloper = (role: Role) => role === Role.developer
+export const hasDeveloperRole = (role: Role | undefined) =>
+  role === Role.developer
+export const hasMunicipalityRole = (role: Role | undefined) =>
+  role === Role.municipality
+
+export const hasRecyclingFundRole = (role: Role | undefined) =>
+  role === Role.recyclingFund
 
 export const hasPermission = (page: Page, role: Role) => {
   if (!role) return false
 
   if (role === Role.developer) return true
 
   const permittedRoutes = {
-    recyclingCompany: [
-      'deregisterVehicle',
-      'companyInfo',
-      'deregisterVehicleKM',
-    ],
+    recyclingCompany: ['deregisterVehicle', 'companyInfo'],
     recyclingCompanyAdmin: [
       'deregisterVehicle',
       'companyInfo',
       'accessControlCompany',
-      'deregisterVehicleKM',
     ],
     citizen: ['myCars', 'recycleVehicle'],
-    recyclingFund: ['recycledVehicles', 'recyclingCompanies', 'accessControl'],
+    recyclingFund: [
+      'recycledVehicles',
+      'recyclingCompanies',
+      'accessControl',
+      'municipalities',
+    ],
+    municipality: ['recycledVehicles', 'recyclingCompanies', 'accessControl'],
   }
 
   return permittedRoutes[role].includes(page)

apps/skilavottord/web/components/NavigationLinks/NavigationLinks.tsx

@@ -0,0 +1,53 @@
+import { hasMunicipalityRole } from '@island.is/skilavottord-web/auth/utils'
+import { UserContext } from '@island.is/skilavottord-web/context'
+import { useI18n } from '@island.is/skilavottord-web/i18n'
+import { useContext } from 'react'
+import Sidenav from '../Sidenav/Sidenav'
+
+export const NavigationLinks = ({
+  activeSection,
+}: {
+  activeSection: number
+}) => {
+  const {
+    t: { recyclingFundSidenav: sidenavText, routes },
+  } = useI18n()
+
+  const { user } = useContext(UserContext)
+
+  let title = sidenavText.title
+  if (hasMunicipalityRole(user?.role)) {
+    title = sidenavText.municipalityTitle
+  }
+
+  return (
+    <Sidenav
+      title={title}
+      sections={[
+        {
+          icon: 'car',
+          title: `${sidenavText.recycled}`,
+          link: `${routes.recycledVehicles}`,
+        },
+        {
+          icon: 'people',
+          title: `${sidenavText.municipalities}`,
+          link: `${routes.municipalities.baseRoute}`,
+          hidden: hasMunicipalityRole(user?.role),
+        },
+        {
+          icon: 'business',
+          title: `${sidenavText.companies}`,
+          link: `${routes.recyclingCompanies.baseRoute}`,
+        },
+        {
+          icon: 'lockClosed',
+          title: `${sidenavText.accessControl}`,
+          link: `${routes.accessControl}`,
+        },
+      ]}
+      activeSection={activeSection}
+    />
+  )
+}
+export default NavigationLinks

apps/skilavottord/web/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+
+import {
+  Box,
+  GridColumn,
+  GridRow,
+  Text,
+  Tooltip,
+} from '@island.is/island-ui/core'
+
+export const PageHeader: FC<{ title: string; info: string }> = ({
+  title,
+  info,
+}) => {
+  return (
+    <Box display="flex" alignItems="flexStart" justifyContent="spaceBetween">
+      <GridRow>
+        <GridColumn order={[2, 1]}>
+          <Text variant="h1" as="h1" marginBottom={4}>
+            {title}
+          </Text>
+        </GridColumn>
+        <GridColumn order={[1, 2]}>
+          <Tooltip text={info} />
+        </GridColumn>
+      </GridRow>
+    </Box>
+  )
+}
+export default PageHeader

apps/skilavottord/web/components/Sidenav/Sidenav.tsx

@@ -1,17 +1,10 @@
-import React, { FC } from 'react'
-import {
-  Box,
-  Divider,
-  FocusableBox,
-  Icon,
-  Stack,
-  Text,
-} from '@island.is/island-ui/core'
+import { Box, FocusableBox, Icon, Stack, Text } from '@island.is/island-ui/core'
 
 interface SidenavSection {
   title: string
   link: string
   icon?: string
+  hidden?: boolean
 }
 
 interface SidenavProps {
@@ -20,7 +13,7 @@ interface SidenavProps {
   activeSection: number
 }
 
-type SidenavIcon = 'car' | 'business' | 'lockClosed'
+type SidenavIcon = 'car' | 'business' | 'lockClosed' | 'municipality'
 
 export const Sidenav = ({ title, sections, activeSection }: SidenavProps) => (
   <Box background="blue100" padding={4} borderRadius="large">
@@ -30,7 +23,7 @@ export const Sidenav = ({ title, sections, activeSection }: SidenavProps) => (
       </Text>
       <Stack space={3}>
         {sections.map((section, index) => {
-          if (!section?.title) return null
+          if (!section?.title || section.hidden) return null
           return (
             <FocusableBox
               key={index}

apps/skilavottord/web/i18n/locales/en.json

@@ -365,9 +365,11 @@
   },
   "recyclingFundSidenav": {
     "title": "Service",
+    "municipalityTitle": "Municipality",
     "recycled": "Recycled cars",
     "companies": "Recycling companies",
-    "accessControl": "Access Control"
+    "accessControl": "Access Control",
+    "municipalities": "Municipalities"
   },
   "recyclingCompanies": {
     "title": "Recycling companies",
@@ -390,7 +392,8 @@
     },
     "buttons": {
       "add": "Add recycling company",
-      "view": "View"
+      "view": "View",
+      "addMunicipality": "Add municipality"
     },
     "recyclingCompany": {
       "view": {
@@ -409,32 +412,32 @@
       "form": {
         "inputs": {
           "companyId": {
-            "label": "Company ID",
-            "placeholder": "Company ID",
+            "label": "ID",
+            "placeholder": "ID",
             "rules": {
-              "required": "Company ID is required"
+              "required": "ID is required"
             }
           },
           "companyName": {
-            "label": "Company name",
-            "placeholder": "Company name",
+            "label": "Name",
+            "placeholder": "Name",
             "rules": {
-              "required": "Company name is required"
+              "required": "Name is required"
             }
           },
           "nationalId": {
-            "label": "Company national ID",
-            "placeholder": "Company national ID",
+            "label": "National ID",
+            "placeholder": "National ID",
             "rules": {
-              "required": "Company national ID is required",
+              "required": "National ID is required",
               "validate": "National ID is incorrect"
             }
           },
           "email": {
-            "label": "Company email",
-            "placeholder": "Company email",
+            "label": "Email",
+            "placeholder": "Email",
             "rules": {
-              "required": "Company email is required",
+              "required": "Email is required",
               "validate": "Invalid email"
             }
           },
@@ -575,6 +578,13 @@
           "rules": {
             "required": "Partner is required"
           }
+        },
+        "municipality": {
+          "label": "Municipality",
+          "placeholder": "Municipality",
+          "rules": {
+            "required": "Municipality is required"
+          }
         }
       },
       "buttons": {
@@ -627,6 +637,29 @@
       "baseRoute": "/en/company-info",
       "add": "/en/company-info/edit",
       "edit": "/en/company-info/add"
+    },
+    "municipalities": {
+      "baseRoute": "/en/municipalities",
+      "add": "/en/municipalities/add",
+      "edit": "/en/municipalities/[id]"
+    }
+  },
+  "municipalities": {
+    "title": "Municipalities",
+    "municipality": {
+      "view": {
+        "title": "Municipality",
+        "breadcrumb": "View",
+        "info": "You can update the municipality. Please confirm that the information are correct.",
+        "updated": "Updated",
+        "deleted": "Deleted"
+      },
+      "add": {
+        "title": "Add municipality",
+        "breadcrumb": "Add new",
+        "info": "Adding a new municipality will make it available to access control. Please verify that the municipality information is correct.",
+        "added": "Added"
+      }
     }
   }
 }