From 3a7a0a1f594de56c452de732d83087c574fdef9f Mon Sep 17 00:00:00 2001
From: Daniel Liburd <dan.liburd@digital.justice.gov.uk>
Date: Tue, 7 Jan 2025 11:58:01 +0000
Subject: [PATCH] WIP - Introduce alleged offences task

---
 .../fixtures/applicationData.json             |  21 ++
 .../alleged-offences/allegedOffences.test.ts  | 141 ++++++++++++++
 .../alleged-offences/allegedOffences.ts       | 145 ++++++++++++++
 .../custom-forms/allegedOffenceData.test.ts   |  61 ++++++
 .../custom-forms/allegedOffenceData.ts        | 109 +++++++++++
 .../alleged-offences/index.ts                 |  12 ++
 .../apply/offence-information/index.ts        |   3 +-
 server/form-pages/utils/questions.ts          |  20 ++
 server/utils/checkYourAnswersUtils.ts         |   2 +-
 .../alleged-offences/alleged-offence-data.njk | 182 ++++++++++++++++++
 .../alleged-offences/alleged-offences.njk     |  76 ++++++++
 11 files changed, 770 insertions(+), 2 deletions(-)
 create mode 100644 server/form-pages/apply/offence-information/alleged-offences/allegedOffences.test.ts
 create mode 100644 server/form-pages/apply/offence-information/alleged-offences/allegedOffences.ts
 create mode 100644 server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.test.ts
 create mode 100644 server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.ts
 create mode 100644 server/form-pages/apply/offence-information/alleged-offences/index.ts
 create mode 100644 server/views/applications/pages/alleged-offences/alleged-offence-data.njk
 create mode 100644 server/views/applications/pages/alleged-offences/alleged-offences.njk

diff --git a/integration_tests/fixtures/applicationData.json b/integration_tests/fixtures/applicationData.json
index bb74855..db298f4 100644
--- a/integration_tests/fixtures/applicationData.json
+++ b/integration_tests/fixtures/applicationData.json
@@ -295,6 +295,27 @@
     ],
     "current-offences": {}
   },
+  "alleged-offences": {
+    "alleged-offence-data": [
+      {
+        "titleAndNumber": "Arson",
+        "offenceCategory": "Arson",
+        "offenceDate-day": "5",
+        "offenceDate-month": "6",
+        "offenceDate-year": "1940",
+        "summary": "summary detail"
+      },
+      {
+        "titleAndNumber": "Stalking",
+        "offenceCategory": "Stalking",
+        "offenceDate-day": "6",
+        "offenceDate-month": "7",
+        "offenceDate-year": "2023",
+        "summary": "more summary detail"
+      }
+    ],
+    "alleged-offences": {}
+  },
   "offending-history": {
     "any-previous-convictions": { "hasAnyPreviousConvictions": "yesRelevantRisk" },
     "offence-history-data": [
diff --git a/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.test.ts b/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.test.ts
new file mode 100644
index 0000000..16b6564
--- /dev/null
+++ b/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.test.ts
@@ -0,0 +1,141 @@
+import { itShouldHaveNextValue, itShouldHavePreviousValue } from '../../../shared-examples'
+import { personFactory, applicationFactory } from '../../../../testutils/factories/index'
+import AllegedOffences from './allegedOffences'
+import AllegedOffenceData from './custom-forms/allegedOffenceData'
+
+jest.mock('./custom-forms/allegedOffenceData')
+
+describe('AllegedOffences', () => {
+  const application = applicationFactory.build({ person: personFactory.build({ name: 'Roger Smith' }) })
+
+  const applicationWithData = applicationFactory.build({
+    person: personFactory.build({ name: 'Roger Smith' }),
+    data: {
+      'alleged-offences': {
+        'alleged-offence-data': [
+          {
+            titleAndNumber: 'Stalking',
+            offenceCategory: 'stalkingOrHarassment',
+            'offenceDate-day': '1',
+            'offenceDate-month': '2',
+            'offenceDate-year': '2023',
+            summary: 'summary detail',
+          },
+          {
+            titleAndNumber: 'Arson',
+            offenceCategory: 'arson',
+            'offenceDate-day': '5',
+            'offenceDate-month': '6',
+            'offenceDate-year': '1940',
+            summary: 'second summary detail',
+          },
+        ],
+      },
+    },
+  })
+
+  describe('title', () => {
+    it('personalises the page title', () => {
+      const page = new AllegedOffences({}, application)
+
+      expect(page.title).toEqual('Alleged offences for Roger Smith')
+    })
+  })
+
+  describe('alleged offence data', () => {
+    describe('when there is alleged offence data on the application', () => {
+      it('assigns them to the offences field on the page', () => {
+        const page = new AllegedOffences({}, applicationWithData)
+
+        expect(page.offences).toEqual([
+          {
+            titleAndNumber: 'Stalking',
+            offenceCategoryTag: '<strong class="govuk-tag govuk-tag--blue">Stalking or Harassment</strong>',
+            offenceCategoryText: 'Stalking or Harassment',
+            offenceDate: '1 February 2023',
+            summary: 'summary detail',
+            removeLink: `/applications/${applicationWithData.id}/tasks/alleged-offences/pages/alleged-offence-data/0/removeFromList?redirectPage=alleged-offences`,
+          },
+          {
+            titleAndNumber: 'Arson',
+            offenceCategoryTag: '<strong class="govuk-tag govuk-tag--yellow">Arson</strong>',
+            offenceCategoryText: 'Arson',
+            offenceDate: '5 June 1940',
+            summary: 'second summary detail',
+            removeLink: `/applications/${applicationWithData.id}/tasks/alleged-offences/pages/alleged-offence-data/1/removeFromList?redirectPage=alleged-offences`,
+          },
+        ])
+      })
+    })
+  })
+
+  itShouldHaveNextValue(new AllegedOffences({}, application), '')
+  itShouldHavePreviousValue(new AllegedOffences({}, application), 'taskList')
+
+  describe('errors', () => {
+    it('returns an empty object where there is alleged offence data', () => {
+      const page = new AllegedOffences({}, applicationWithData)
+      expect(page.errors()).toEqual({})
+    })
+
+    it('returns an error where there is no alleged offence data', () => {
+      const page = new AllegedOffences({}, application)
+      expect(page.errors()).toEqual({ offenceList: 'Alleged offences must be added to the application' })
+    })
+  })
+
+  describe('response', () => {
+    it('returns the offence information', () => {
+      const page = new AllegedOffences({}, applicationWithData)
+      expect(page.response()).toEqual({
+        'Alleged offence 1':
+          'Stalking\r\nStalking or Harassment\r\n1 February 2023\r\n\nSummary: summary detail',
+        'Alleged offence 2':
+          'Arson\r\nArson\r\n5 June 1940\r\n\nSummary: second summary detail',
+      })
+    })
+
+    it('returns empty object when there are no offences', () => {
+      const page = new AllegedOffences({}, application)
+      expect(page.response()).toEqual({})
+    })
+  })
+
+  describe('getOffenceTagColour', () => {
+    const categories = [
+      ['stalkingOrHarassment', 'blue'],
+      ['weaponsOrFirearms', 'red'],
+      ['arson', 'yellow'],
+      ['violence', 'pink'],
+      ['domesticAbuse', 'purple'],
+      ['hateCrime', 'green'],
+      ['drugs', 'custom-brown'],
+      ['other', 'grey'],
+      ['undefinedCategory', 'grey'],
+    ]
+    it.each(categories)('returns correct colour for category %s', (category, colour) => {
+      const page = new AllegedOffences({}, applicationWithData)
+      expect(page.getOffenceTagColour(category)).toEqual(colour)
+    })
+  })
+
+  describe('initialize', () => {
+    it('returns AllegedOffenceData page if there is no alleged offences data', () => {
+      const allegedOffenceDataPageConstructor = jest.fn()
+
+      ;(AllegedOffenceData as jest.Mock).mockImplementation(() => {
+        return allegedOffenceDataPageConstructor
+      })
+
+      AllegedOffences.initialize({}, application)
+
+      expect(AllegedOffenceData).toHaveBeenCalledWith({}, application)
+    })
+
+    it('returns AllegedOffence page if there is alleged offences data', async () => {
+      const page = (await AllegedOffences.initialize({}, applicationWithData)) as AllegedOffences
+
+      expect(page.title).toBe('Alleged offences for Roger Smith')
+    })
+  })
+})
diff --git a/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.ts b/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.ts
new file mode 100644
index 0000000..3801dc5
--- /dev/null
+++ b/server/form-pages/apply/offence-information/alleged-offences/allegedOffences.ts
@@ -0,0 +1,145 @@
+import type { TaskListErrors } from '@approved-premises/ui'
+import { Cas2Application as Application } from '@approved-premises/api'
+import { Page } from '../../../utils/decorators'
+import TaskListPage from '../../../taskListPage'
+import AllegedOffenceData, { AllegedOffenceDataBody } from './custom-forms/allegedOffenceData'
+import { DateFormats } from '../../../../utils/dateUtils'
+import { createQueryString, nameOrPlaceholderCopy } from '../../../../utils/utils'
+import paths from '../../../../paths/apply'
+import { getQuestions } from '../../../utils/questions'
+
+type AllegedOffencesBody = { offenceList: string }
+
+type AllegedOffencesUI = {
+  titleAndNumber: string
+  offenceCategoryTag: string
+  offenceCategoryText: string
+  offenceDate: string
+  summary: string
+  removeLink: string
+}
+
+@Page({
+  name: 'alleged-offences',
+  bodyProperties: ['offenceList'],
+})
+export default class AllegedOffences implements TaskListPage {
+  personName = nameOrPlaceholderCopy(this.application.person)
+
+  documentTitle = 'Alleged offences'
+
+  title = `Alleged offences for ${this.personName}`
+
+  body: AllegedOffencesBody
+
+  offences: AllegedOffencesUI[]
+
+  pageName = 'alleged-offences'
+
+  dataPageName = 'alleged-offence-data'
+
+  taskName = 'alleged-offences'
+
+  allegedOffenceQuestions = getQuestions('')['alleged-offences']['alleged-offence-data']
+
+  constructor(
+    body: Partial<AllegedOffencesBody>,
+    private readonly application: Application,
+  ) {
+    if (application.data[this.taskName]?.[this.dataPageName]) {
+      const AllegedOffencesData = application.data[this.taskName][this.dataPageName] as [AllegedOffenceDataBody]
+
+      const query = {
+        redirectPage: this.pageName,
+      }
+
+      this.offences = AllegedOffencesData.map((offence, index) => {
+        const offenceDate = DateFormats.dateAndTimeInputsToUiDate(offence, 'offenceDate')
+
+        const offenceCategoryText =
+          this.allegedOffenceQuestions.offenceCategory.answers[
+            offence.offenceCategory as keyof typeof this.allegedOffenceQuestions.offenceCategory.answers
+          ]
+
+        return {
+          titleAndNumber: offence.titleAndNumber,
+          offenceCategoryTag: this.getOffenceCategoryTag(offence.offenceCategory, offenceCategoryText),
+          offenceCategoryText,
+          offenceDate,
+          summary: offence.summary,
+          removeLink: `${paths.applications.removeFromList({
+            id: application.id,
+            task: this.taskName,
+            page: this.dataPageName,
+            index: index.toString(),
+          })}?${createQueryString(query)}`,
+        }
+      })
+    }
+    this.body = body as AllegedOffencesBody
+  }
+
+  static async initialize(body: Partial<AllegedOffenceDataBody>, application: Application) {
+    if (!application.data['alleged-offences']?.['alleged-offence-data']) {
+      return new AllegedOffenceData(body, application)
+    }
+    return new AllegedOffences({}, application)
+  }
+
+  previous() {
+    return 'taskList'
+  }
+
+  next() {
+    return ''
+  }
+
+  errors() {
+    const errors: TaskListErrors<this> = {}
+
+    if (!this.application.data['alleged-offences']?.['alleged-offence-data'].length) {
+      errors.offenceList = 'Alleged offences must be added to the application'
+    }
+
+    return errors
+  }
+
+  response() {
+    const response: Record<string, string> = {}
+
+    this.offences?.forEach((offence, index) => {
+      const { titleAndNumber, offenceCategoryText, offenceDate, summary } = offence
+      response[`Alleged offence ${index + 1}`] =
+        `${titleAndNumber}\r\n${offenceCategoryText}\r\n${offenceDate}\r\n\nSummary: ${summary}`
+    })
+
+    return response
+  }
+
+  getOffenceCategoryTag(offenceCategory: string, offenceCategoryText: string) {
+    return `<strong class="govuk-tag govuk-tag--${this.getOffenceTagColour(
+      offenceCategory,
+    )}">${offenceCategoryText}</strong>`
+  }
+
+  getOffenceTagColour(offenceCategory: string) {
+    switch (offenceCategory) {
+      case 'stalkingOrHarassment':
+        return 'blue'
+      case 'weaponsOrFirearms':
+        return 'red'
+      case 'arson':
+        return 'yellow'
+      case 'violence':
+        return 'pink'
+      case 'domesticAbuse':
+        return 'purple'
+      case 'hateCrime':
+        return 'green'
+      case 'drugs':
+        return 'custom-brown'
+      default:
+        return 'grey'
+    }
+  }
+}
diff --git a/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.test.ts b/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.test.ts
new file mode 100644
index 0000000..eea5e29
--- /dev/null
+++ b/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.test.ts
@@ -0,0 +1,61 @@
+import { itShouldHaveNextValue, itShouldHavePreviousValue } from '../../../../shared-examples'
+import { personFactory, applicationFactory } from '../../../../../testutils/factories/index'
+import AllegedOffenceData from './allegedOffenceData'
+
+describe('AllegedOffenceData', () => {
+  const application = applicationFactory.build({ person: personFactory.build({ name: 'Roger Smith' }) })
+
+  const allegedOffenceData = [
+    {
+      titleAndNumber: 'Stalking',
+      offenceCategory: 'Arson',
+      'offenceDate-day': '1',
+      'offenceDate-month': '2',
+      'offenceDate-year': '2023',
+      summary: 'summary detail',
+    },
+  ]
+
+  describe('title', () => {
+    it('has a page title', () => {
+      const page = new AllegedOffenceData({}, application)
+
+      expect(page.title).toEqual(`Add Roger Smith's alleged offence details`)
+    })
+  })
+
+  itShouldHaveNextValue(new AllegedOffenceData({}, application), 'alleged-offences')
+  itShouldHavePreviousValue(new AllegedOffenceData({}, application), 'alleged-offences')
+
+  describe('errors', () => {
+    describe('when there are no errors', () => {
+      it('returns empty object', () => {
+        const page = new AllegedOffenceData(allegedOffenceData[0], application)
+        expect(page.errors()).toEqual({})
+      })
+    })
+
+    describe('when there are errors', () => {
+      const requiredFields = [
+        ['titleAndNumber', 'Enter the offence title'],
+        ['offenceCategory', 'Select the offence type'],
+        ['offenceDate', 'Enter the date the offence was committed'],
+        ['summary', 'Enter a summary of the offence'],
+      ]
+
+      it.each(requiredFields)('it includes a validation error for %s', (field, message) => {
+        const page = new AllegedOffenceData({ offenceCategory: 'choose' }, application)
+        const errors = page.errors()
+
+        expect(errors[field as keyof typeof errors]).toEqual(message)
+      })
+    })
+
+    describe('response', () => {
+      it('returns empty object', () => {
+        const page = new AllegedOffenceData({}, application)
+        expect(page.response()).toEqual({})
+      })
+    })
+  })
+})
diff --git a/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.ts b/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.ts
new file mode 100644
index 0000000..5e11eef
--- /dev/null
+++ b/server/form-pages/apply/offence-information/alleged-offences/custom-forms/allegedOffenceData.ts
@@ -0,0 +1,109 @@
+import type { SelectItem, TaskListErrors, YesOrNo } from '@approved-premises/ui'
+import { Cas2Application } from '@approved-premises/api'
+import { Page } from '../../../../utils/decorators'
+import TaskListPage from '../../../../taskListPage'
+import { dateAndTimeInputsAreValidDates } from '../../../../../utils/dateUtils'
+import { getQuestions } from '../../../../utils/questions'
+import { nameOrPlaceholderCopy } from '../../../../../utils/utils'
+
+export type AllegedOffenceDataBody = {
+  titleAndNumber: string
+  offenceCategory: string
+  offenceDate: string
+  'offenceDate-day': string
+  'offenceDate-month': string
+  'offenceDate-year': string
+  summary: string
+}
+
+@Page({
+  name: 'alleged-offence-data',
+  bodyProperties: [
+    'titleAndNumber',
+    'offenceCategory',
+    'offenceDate-day',
+    'offenceDate-month',
+    'offenceDate-year',
+    'summary',
+  ],
+})
+export default class AllegedOffenceData implements TaskListPage {
+  personName = nameOrPlaceholderCopy(this.application.person)
+
+  documentTitle = 'Add a alleged offence'
+
+  title = `Add ${this.personName}'s alleged offence details`
+
+  body: AllegedOffenceDataBody
+
+  taskName = 'alleged-offences'
+
+  pageName = 'alleged-offence-data'
+
+  questions = getQuestions('')['alleged-offences']['alleged-offence-data']
+
+  offenceCategories: Array<SelectItem>
+
+  hasPreviouslySavedAnAllegedOffence: boolean
+
+  constructor(
+    body: Partial<AllegedOffenceDataBody>,
+    private readonly application: Cas2Application,
+  ) {
+    this.body = body as AllegedOffenceDataBody
+    this.offenceCategories = this.getCategoriesAsItemsForSelect(this.body.offenceCategory)
+    this.hasPreviouslySavedAnAllegedOffence = Boolean(application.data['alleged-offences']?.['alleged-offence-data'])
+  }
+
+  private getCategoriesAsItemsForSelect(selectedItem: string): Array<SelectItem> {
+    const items = [
+      {
+        value: 'choose',
+        text: 'Choose type',
+        selected: selectedItem === '',
+      },
+    ]
+    Object.keys(this.questions.offenceCategory.answers).forEach(value => {
+      items.push({
+        value,
+        text: this.questions.offenceCategory.answers[
+          value as keyof typeof this.questions.offenceCategory.answers
+        ] as string,
+        selected: selectedItem === value,
+      })
+    })
+
+    return items
+  }
+
+  previous() {
+    return 'alleged-offences'
+  }
+
+  next() {
+    return 'alleged-offences'
+  }
+
+  errors() {
+    const errors: TaskListErrors<this> = {}
+
+    if (!this.body.titleAndNumber) {
+      errors.titleAndNumber = 'Enter the offence title'
+    }
+    if (this.body.offenceCategory === 'choose') {
+      errors.offenceCategory = 'Select the offence type'
+    }
+    if (!dateAndTimeInputsAreValidDates(this.body, 'offenceDate')) {
+      errors.offenceDate = 'Enter the date the offence was committed'
+    }
+    if (!this.body.summary) {
+      errors.summary = 'Enter a summary of the offence'
+    }
+
+    return errors
+  }
+
+  response() {
+    return {}
+  }
+}
diff --git a/server/form-pages/apply/offence-information/alleged-offences/index.ts b/server/form-pages/apply/offence-information/alleged-offences/index.ts
new file mode 100644
index 0000000..9e76c5b
--- /dev/null
+++ b/server/form-pages/apply/offence-information/alleged-offences/index.ts
@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+
+import { Task } from '../../../utils/decorators'
+import AllegedOffenceData from './custom-forms/allegedOffenceData'
+import AllegedOffencesIndexPage from './allegedOffences'
+
+@Task({
+  name: 'Add alleged offences',
+  slug: 'alleged-offences',
+  pages: [AllegedOffencesIndexPage, AllegedOffenceData],
+})
+export default class AllegedOffences {}
diff --git a/server/form-pages/apply/offence-information/index.ts b/server/form-pages/apply/offence-information/index.ts
index 3a2de09..d71127f 100644
--- a/server/form-pages/apply/offence-information/index.ts
+++ b/server/form-pages/apply/offence-information/index.ts
@@ -3,9 +3,10 @@
 import { Section } from '../../utils/decorators'
 import OffendingHistory from './offending-history'
 import CommunitySupervisionAndCurrentOffences from './community-supervision-and-current-offences'
+import AllegedOffences from './alleged-offences'
 
 @Section({
   title: 'Offence information',
-  tasks: [CommunitySupervisionAndCurrentOffences, OffendingHistory],
+  tasks: [AllegedOffences, CommunitySupervisionAndCurrentOffences, OffendingHistory],
 })
 export default class OffenceInformation {}
diff --git a/server/form-pages/utils/questions.ts b/server/form-pages/utils/questions.ts
index 8c9f76a..305f3f3 100644
--- a/server/form-pages/utils/questions.ts
+++ b/server/form-pages/utils/questions.ts
@@ -21,6 +21,9 @@ export const getQuestions = (name: string) => {
   const offenceSummaryHintHtml =
     '<div id="offence-details-hint" class="govuk-hint"> <p class="govuk-hint">Include:</p> <ul class="govuk-list govuk-list--bullet govuk-hint"> <li>what happened (excluding names and other sensitive information)</li> <li>where it happened (excluding addresses)</li><li>when it happened</li><li>damage or injury caused</li><li>weapon type</li><li>motivations for the offence</li><li>if a violent offence, the relationship to the victim</li></ul></div>'
 
+  const allegationSummaryHintHtml =
+    '<div id="allegation-details-hint" class="govuk-hint"> <p class="govuk-hint">Include:</p> <ul class="govuk-list govuk-list--bullet govuk-hint"> <li>what is alleged to have happened (excluding names and other sensitive information)</li> <li>where it is alleged to have happened (excluding addresses)</li><li>when it is alleged to have happened</li><li>damage or injury alleged</li><li>alleged weapon type</li><li>alleged motivations for the offence</li><li>if a violent offence, the relationship to the alleged victim</li></ul></div>'
+
   return {
     'confirm-eligibility': {
       'confirm-eligibility': {
@@ -781,6 +784,23 @@ export const getQuestions = (name: string) => {
         },
       },
     },
+    'alleged-offences': {
+      'alleged-offence-data': {
+        titleAndNumber: {
+          question: 'Offence title',
+          hint: "For example, 'Stalking'",
+        },
+        offenceCategory,
+        offenceDate: {
+          question: 'When is it alleged that they committed the offence?',
+          hint: `For example, ${dateExample}`,
+        },
+        summary: {
+          question: 'Provide a summary of the allegations',
+          hint: allegationSummaryHintHtml,
+        },
+      },
+    },
     'offending-history': {
       'any-previous-convictions': {
         hasAnyPreviousConvictions: {
diff --git a/server/utils/checkYourAnswersUtils.ts b/server/utils/checkYourAnswersUtils.ts
index 62e80ca..b4e7262 100644
--- a/server/utils/checkYourAnswersUtils.ts
+++ b/server/utils/checkYourAnswersUtils.ts
@@ -301,7 +301,7 @@ export const getApplicantDetails = (application: Application | Cas2SubmittedAppl
 export const removeAnyOldPageKeys = (questions: any, task: string, applicationPageKeys: string[]): string[] => {
   const latestPageKeys = Object.keys(questions[task])
   const matchedKeys = applicationPageKeys.filter(
-    key => latestPageKeys.includes(key) || ['acct', 'current-offences', 'offence-history'].includes(key),
+    key => latestPageKeys.includes(key) || ['acct', 'current-offences', 'alleged-offences', 'offence-history'].includes(key),
   )
   return matchedKeys
 }
diff --git a/server/views/applications/pages/alleged-offences/alleged-offence-data.njk b/server/views/applications/pages/alleged-offences/alleged-offence-data.njk
new file mode 100644
index 0000000..59354a2
--- /dev/null
+++ b/server/views/applications/pages/alleged-offences/alleged-offence-data.njk
@@ -0,0 +1,182 @@
+{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
+{% from "govuk/components/select/macro.njk" import govukSelect %}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+{% from "../../../components/formFields/form-page-date-input/macro.njk" import formPageDateInput %}
+{% from "../../../components/formFields/form-page-text-area/macro.njk" import formPageTextArea %}
+
+{% extends "../layout.njk" %}
+
+{% set outstandingChargesFollowUpHintHtml %}
+<p class="govuk-hint">Include details where the applicant's behaviour could be a risk to:</p>
+
+<ul class="govuk-list govuk-list--bullet govuk-hint">
+  <li>
+        the applicant themselves
+      </li>
+  <li>
+        other people staying at the property
+      </li>
+  <li>
+        staff members
+      </li>
+  <li>
+        neighbours
+      </li>
+  <li>
+        visitors
+      </li>
+  <li>
+        contractors
+      </li>
+  <li>
+        the property (for example, arson)
+      </li>
+</ul>
+{% endset %}
+
+{% set outstandingChargesFollowUp %}
+{{
+      formPageTextArea(
+        {
+          fieldName: 'outstandingChargesDetail',
+          label: {
+            text: page.questions.outstandingChargesDetail.question,
+            classes: "govuk-label--s"
+          },
+          hint: { html: outstandingChargesFollowUpHintHtml }
+        },
+        fetchContext()
+      )
+    }}
+{% endset %}
+
+{% block content %}
+
+  <div class="govuk-grid-row">
+    <div class="{{ columnClasses | default("govuk-grid-column-two-thirds") }}">
+      {{ showErrorSummary(errorSummary) }}
+
+      {% if successMessages %}
+        {% for message in successMessages %}
+          {{ govukNotificationBanner({
+                html: '<h3 class="govuk-!-margin-top-2">' + message + '</h3>',
+                type: 'success',
+                titleId: 'success-title'
+              }) }}
+        {% endfor %}
+      {% endif %}
+      <h1 class="govuk-heading-l govuk-!-margin-bottom-4">{{ page.title }}</h1>
+      <div class="govuk-body">
+        <p>Add one offence at a time. For example, you should record 3 drug-related offences as 3 separate offences.</p>
+      </div>
+
+      <form id="form" action="{{ paths.applications.appendToList({ id: applicationId, task: page.taskName, page: page.name }) }}?_method=PUT" method="post" autocomplete="off">
+        <input type="hidden" name="_csrf" value="{{ csrfToken }}"/>
+
+        {{
+            formPageInput(
+              {
+                label: { 
+                  text: page.questions.titleAndNumber.question,
+                  classes: "govuk-label--m" 
+                },
+                classes: "govuk-input--width-20",
+                fieldName: "titleAndNumber",
+                hint: {
+                  text: page.questions.titleAndNumber.hint
+                }
+              },
+              fetchContext()
+            )
+        }}
+
+        {{
+            govukSelect({
+                  label: { 
+                    text: page.questions.offenceCategory.question,
+                    classes: "govuk-label--m" 
+                  },
+                  hint: {
+                    text: page.questions.offenceCategory.hint
+                  },
+                  id: "offenceCategory",
+                  name: "offenceCategory",
+                  items: page.offenceCategories,
+                  errorMessage: errors.offenceCategory
+              })
+        }}
+
+        {{ 
+          formPageDateInput( {
+            hint: {
+              text: page.questions.offenceDate.hint
+            },
+            fieldName: "offenceDate",
+            fieldset: {
+              legend: {
+                text: page.questions.offenceDate.question,
+                classes: "govuk-fieldset__legend--m"
+              }
+            },
+            items: dateFieldValues('offenceDate', errors)
+            }, 
+            fetchContext()) 
+        }}
+
+        {{
+            formPageTextArea(
+              {
+                fieldName: "summary",
+                label: {
+                  text: page.questions.summary.question,
+                  classes: "govuk-label--m"
+                },
+                hint: {
+                  html: page.questions.summary.hint
+                }
+              },
+              fetchContext()
+            )
+        }}
+
+        <div>
+          {{ govukButton({
+            id: "add-another",
+            text: "Save and add another",
+            classes: "govuk-button--secondary govuk-!-margin-bottom-4"
+          }) }}
+        </div>
+
+        {% block button %}
+          <div class="govuk-button-group">
+            {{ govukButton({
+                  text: "Save and continue"
+              }) }}
+
+            {%if page.hasPreviouslySavedAnAllegedOffence %}
+              <a class="govuk-link" href="{{ paths.applications.pages.show({ id: applicationId, task: 'alleged-offences', page: 'alleged-offences' }) }}">
+                Cancel
+              </a>
+            {% endif %}
+          </div>
+        {% endblock %}
+      </form>
+    </div>
+  </div>
+
+{% endblock %}
+
+{% block extraScripts %}
+  <script type="text/javascript" nonce="{{ cspNonce }}">
+    function addRedirect(event) {
+      const form = document.getElementById('form')
+      form.action = form.action + '&redirectPage=alleged-offence-data'
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+      document
+        .getElementById('add-another')
+        .addEventListener('click', (event) => addRedirect(event));
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/server/views/applications/pages/alleged-offences/alleged-offences.njk b/server/views/applications/pages/alleged-offences/alleged-offences.njk
new file mode 100644
index 0000000..7653b63
--- /dev/null
+++ b/server/views/applications/pages/alleged-offences/alleged-offences.njk
@@ -0,0 +1,76 @@
+{% extends "../layout.njk" %}
+
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+{% from "../../../components/formFields/form-page-date-input/macro.njk" import formPageDateInput %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
+{% extends "../layout.njk" %}
+
+{% block questions %}
+
+  <h1 class="govuk-heading-l govuk-!-margin-bottom-4">{{ page.title }}</h1>
+
+  <p>The CAS-2 referral team needs an overview of all alleged offences to assess risk and make sure people are placed safely.</p>
+
+  {{ govukButton({
+    text: "Add an alleged offence",
+    href: paths.applications.pages.show({ id: applicationId, task: 'alleged-offences', page: 'alleged-offence-data' }),
+    classes: "govuk-button--secondary"
+  }) }}
+
+  {% if page.offences | length %}
+
+    {% for offence in page.offences %}
+
+      {{ govukSummaryList({
+          card: {
+            title: {
+              text: offence.titleAndNumber,
+              classes:  "govuk-summary-card__title-wrapper--flex-end"
+            },
+            actions: {
+              items: [
+                {
+                  href: offence.removeLink,
+                  text: "Remove",
+                  visuallyHiddenText: offence.titleAndNumber +" offence"
+                }
+              ]
+            }  
+          },
+          rows: [
+            {
+              key: {
+                text: 'Type:'
+              },
+              value: {
+                html: offence.offenceCategoryTag
+              }
+            },
+            {
+              key: {
+                text: 'Offence date:'
+              },
+              value: {
+                text: offence.offenceDate
+              }
+            },
+            {
+              key: {
+                text: 'Offence details:'
+              },
+              value: {
+                text: offence.summary
+              }
+            }
+          ]
+        }) }}
+
+    {% endfor %}
+
+  {% else %}
+    <p class="govuk-body govuk-!-font-weight-bold">There are no alleged offences to show.</p>
+  {% endif %}
+
+{% endblock %}