Add Back Office application

README.md

@@ -5,8 +5,8 @@ Hi and welcome to the Meldingen front-end repository!
 This monorepo houses three separate front-ends:
 
 - Public: where the general public can create and view nuisance reports.
-- Backoffice: where professionals can handle these reports.
-- Admin: where admins can manage the Public and Backoffice apps.
+- Back Office: where professionals can handle these reports.
+- Admin: where admins can manage the Public and Back Office apps.
 
 [Read the docs](./docs/README.md) for more information on the project architecture and plug-in choices.
 

apps/admin/README.md

@@ -1,6 +1,6 @@
 # Admin
 
-The Admin application allows admins to manage the Public and Backoffice apps.
+The Admin application allows admins to manage the Public and Back Office apps.
 
 It allows an admin to...
 

apps/back-office/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["**/page.tsx", "**/layout.tsx", "next.config.ts"],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ]
+}

apps/back-office/.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "*.md": ["markdownlint", "prettier --check"],
+  "*.{js,jsx,ts,tsx}": ["prettier --check", "tsc-files --noEmit"],
+  "*.{css,scss}": ["stylelint --allow-empty-input", "prettier --check"]
+}

apps/back-office/README.md

@@ -0,0 +1,8 @@
+# Back Office
+
+The Back Office application is a tool for service providers to handle nuisance reports
+created with the Public application.
+
+## Getting started
+
+Run `npm run dev:back-office` in the root directory to start the Back Office app.

apps/back-office/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/back-office/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+}
+
+export default nextConfig

apps/back-office/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "back-office",
+  "version": "0.1.0",
+  "description": "Front-end for the back office of the Meldingen application",
+  "author": "Gemeente Amsterdam",
+  "license": "EUPL-1.2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --port 3002",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "next": "15.2.0-canary.63"
+  },
+  "devDependencies": {
+    "eslint-config-next": "15.1.7"
+  }
+}

apps/back-office/src/app/Overview.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+
+import { Overview } from './Overview'
+
+describe('Overview', () => {
+  it('should render correctly', () => {
+    render(<Overview />)
+
+    expect(screen.getByText('Back Office')).toBeInTheDocument()
+  })
+})

apps/back-office/src/app/Overview.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { Paragraph } from '@amsterdam/design-system-react'
+import { Grid } from '@meldingen/ui'
+
+export const Overview = () => (
+  <Grid paddingBottom="large" paddingTop="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+      <Paragraph>Back Office</Paragraph>
+    </Grid.Cell>
+  </Grid>
+)

apps/back-office/src/app/global.css

@@ -0,0 +1,5 @@
+body {
+  font-family: 'Amsterdam Sans', Arial, sans-serif;
+  margin-block: 0;
+  margin-inline: 0;
+}

apps/back-office/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
+
+import '@amsterdam/design-system-tokens/dist/index.css'
+import '@amsterdam/design-system-assets/font/index.css'
+import '@amsterdam/design-system-css/dist/index.css'
+
+import './global.css'
+
+export const metadata: Metadata = {
+  description: 'Beheer van meldingen over de openbare ruimte',
+}
+
+const RootLayout = ({ children }: { children: ReactNode }) => (
+  <html lang="nl">
+    <body>{children}</body>
+  </html>
+)
+
+export default RootLayout

apps/back-office/src/app/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+import { Overview } from './Overview'
+
+export const metadata: Metadata = {
+  title: 'Overzicht meldingen openbare ruimte - Gemeente Amsterdam',
+}
+
+export default async () => <Overview />

apps/back-office/src/mocks/endpoints.ts

@@ -0,0 +1 @@
+export const ENDPOINTS = {}

apps/back-office/src/mocks/handlers.ts

@@ -0,0 +1 @@
+export const handlers = []

apps/back-office/src/mocks/node.ts

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node'
+
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

apps/back-office/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "types": ["vitest/globals"]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/back-office/vite.config.ts

@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+  test: {
+    coverage: {
+      enabled: true,
+      include: ['src/**/*.{js,jsx,ts,tsx}'],
+    },
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['./vitest.setup.ts'],
+    watch: false,
+  },
+})

apps/back-office/vitest.setup.ts

@@ -0,0 +1,10 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import '@testing-library/jest-dom/vitest'
+import { beforeAll, afterEach, afterAll } from 'vitest'
+
+import { server } from './src/mocks/node'
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())

docs/0001-libraries-and-frameworks.md

@@ -7,7 +7,7 @@ Our applications are built using [React](https://react.dev/) as the frontend lib
 React is the standard UI library for the City of Amsterdam, making it easier to find developers and maintain the project.
 Also, the [Amsterdam Design System](https://github.com/amsterdam/design-system) provides React components that we can utilize.
 
-The Public App uses React with [Next.js](https://nextjs.org/) as the frontend framework,
+The Public and Back Office applications use React with [Next.js](https://nextjs.org/) as the frontend framework,
 handling routing, data fetching, caching, and server-side rendering.
 
 The Admin application is based on [React-admin](https://marmelab.com/react-admin/) and

docs/0006-monorepo-tooling.md

@@ -1,6 +1,6 @@
 # Monorepo tooling
 
-The 3 Meldingen front-ends (Public, Backoffice, Admin) are stored in a single repo.
+The 3 Meldingen front-ends (Public, Back Office, Admin) are stored in a single repo.
 This is called a monorepo. You can find these front-ends in the `/apps` directory.
 
 The front-ends make use of both external and internal libraries.

docs/0007-forms.md

@@ -1,7 +1,7 @@
 # Forms
 
 Meldingen revolves for a large part around forms.
-Our Admin app allows admins to create and update forms, which are shown in our Public and Backoffice apps.
+Our Admin app allows admins to create and update forms, which are shown in our Public and Back Office apps.
 
 To make dealing with forms easier, we use [Form.io](https://form.io/).
 Form.io allows us to easily build forms, using the included [Builder](https://help.form.io/developers/form-development/form-builder),

docs/README.md

@@ -5,8 +5,8 @@
 Meldingen is an application with three separate front-ends:
 
 - Public: where the general public can create nuisance reports.
-- Backoffice: where professionals can handle these reports.
-- Admin: where admins can manage the Public and Backoffice apps.
+- Back Office: where professionals can handle these reports.
+- Admin: where admins can manage the Public and Back Office apps.
 
 ```mermaid
 graph TD
@@ -21,7 +21,7 @@ graph TD
     "]
     PFE -->|Signal| BE
     BE -->|Form config| BFE["
-        Backoffice Frontend
+        Back Office Frontend
 
         - Maken en afhandelen melding
     "]

package.json

@@ -17,9 +17,11 @@
     "build": "pnpm run /^build:/",
     "build:admin": "pnpm -F=admin build",
     "build:public": "pnpm -F=public build",
+    "build:back-office": "pnpm -F=back-office build",
     "dev": "pnpm run /^dev:/",
     "dev:admin": "pnpm -F=admin dev",
     "dev:public": "pnpm -F=public dev",
+    "dev:back-office": "pnpm -F=back-office dev",
     "generate-api-client": "openapi-ts",
     "lint": "pnpm run /^lint:/ && npm run prettier && pnpm -r --no-bail lint && pnpm -r --no-bail typecheck",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",