diff --git a/documentation/demopages/common/mijn-percelen.scss b/documentation/demopages/common/mijn-percelen.scss index 863db51008..a12ffb7243 100644 --- a/documentation/demopages/common/mijn-percelen.scss +++ b/documentation/demopages/common/mijn-percelen.scss @@ -23,6 +23,10 @@ grid-template-columns: 600px 1fr; } + .rvo-main--mijn-percelen-samenvatting { + grid-template-columns: 750px 1fr; + } + .rvo-main--mijn-percelen-sidebar-active { grid-template-columns: 288px 1fr; height: 85vh; @@ -283,6 +287,10 @@ padding-inline-start: 0; } } + + .rvo-table-cell:not(first-child) { + width: 40px; + } } .rvo-table-row--alert { @@ -299,4 +307,41 @@ z-index: 2; } } + + .rvo-value-line-through { + text-decoration: line-through; + } + + .rvo-fake-checkbox summary::-webkit-details-marker, + .rvo-fake-checkbox summary::marker { + display: none; + } + + .rvo-fake-checkbox summary { + display: flex; + gap: var(--rvo-space-xs); + position: relative; + } + + .rvo-fake-checkbox summary::before { + background-color: var(--rvo-color-wit); + border: 1px solid var(--rvo-color-logoblauw); + border-radius: 3px; + content: ""; + display: block; + height: 24px; + width: 24px; + } + + .rvo-fake-checkbox[open] summary::after { + background-color: var(--rvo-color-logoblauw); + border-radius: 3px; + content: ""; + display: block; + height: 20px; + left: 2px; + position: absolute; + top: 3px; + width: 21px; + } } diff --git a/documentation/demopages/mijnpercelen/PerceelEdit.tsx b/documentation/demopages/mijnpercelen/PerceelEdit.tsx index 5a81867f03..4d1e7fc4d8 100644 --- a/documentation/demopages/mijnpercelen/PerceelEdit.tsx +++ b/documentation/demopages/mijnpercelen/PerceelEdit.tsx @@ -126,6 +126,7 @@ const PerceelEdit = () => { expandableHelperText={true} expandableHelperTextTitle="Meer uitleg" helperText="Geef uw perceel een herkenbare en logische naam. Dat maakt uw lijst met percelen overzichtelijk wanneer u landschapselementen heeft geregistreerd. U ziet dan makkelijk bij welk perceel een landschapselement hoort." + value="Sloot bij de buren" > { - +
+ Ik stop met het gebruik van dit perceel + +
+ = { + title: "Demo pagina's/Mijn Percelen/Samenvatting", + component: Samenvatting, + parameters: { + status: { + type: 'WORK IN PROGRESS', + }, + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { name: 'Samenvatting' }; diff --git a/documentation/demopages/mijnpercelen/Samenvatting.tsx b/documentation/demopages/mijnpercelen/Samenvatting.tsx new file mode 100644 index 0000000000..7e868f3ed9 --- /dev/null +++ b/documentation/demopages/mijnpercelen/Samenvatting.tsx @@ -0,0 +1,195 @@ +import { MenuBar } from '@nl-rvo/components'; +import '../common/rhs-update.scss'; +import '../common/mijn-percelen.scss'; + +const Samenvatting = () => { + return ( + +
+
+ +
+
+ +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Huidig + + Na wijziging + + Huidig + + Na wijziging +
Totaal grond in gebruik of beheer177,73150,08,8890,0
+
+ Gebruikstitel +
Eigendom173,751,04,8390,2
Overige exploitatievormen1,7522,042,330,2114
+
+ Gewas (zonder landschapselementen) +
Aardappelen, bestrijdingsmaatregel AM (2025)0,01,02,100,2
Aardappelen, poot TBM (2016)2,7521,012,330,25
Aardappelen, zetmeel (2017)2368,0110,121,44
Aardbeien op stellingen, productie (2706)0,7521,066,330,24
Aardperen (1949)2,750,041,330,1
+
+
+
+
+
+ +
+
+
+ + ); +}; + +export default Samenvatting; diff --git a/documentation/demopages/mijnpercelen/Startpagina.tsx b/documentation/demopages/mijnpercelen/Startpagina.tsx index 0066e254a8..6715626182 100644 --- a/documentation/demopages/mijnpercelen/Startpagina.tsx +++ b/documentation/demopages/mijnpercelen/Startpagina.tsx @@ -177,9 +177,11 @@ const Startpagina = () => {

Wil onze medewerker meekijken?

- +
+ +
diff --git a/documentation/demopages/mijnpercelen/Versturen.stories.tsx b/documentation/demopages/mijnpercelen/Versturen.stories.tsx new file mode 100644 index 0000000000..a8e5bf7f9d --- /dev/null +++ b/documentation/demopages/mijnpercelen/Versturen.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Versturen from './Versturen'; + +const meta: Meta = { + title: "Demo pagina's/Mijn Percelen/Versturen", + component: Versturen, + parameters: { + status: { + type: 'WORK IN PROGRESS', + }, + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { name: 'Versturen' }; diff --git a/documentation/demopages/mijnpercelen/Versturen.tsx b/documentation/demopages/mijnpercelen/Versturen.tsx new file mode 100644 index 0000000000..62adc8a7fc --- /dev/null +++ b/documentation/demopages/mijnpercelen/Versturen.tsx @@ -0,0 +1,239 @@ +import { Button, Heading, LayoutColumnRow, MenuBar } from '@nl-rvo/components'; +import '../common/rhs-update.scss'; +import '../common/mijn-percelen.scss'; + +const Versturen = () => { + return ( + +
+
+ +
+
+ +
+
+
+ +
+
+ + {/* + + Terug naar mijn.rvo.nl + */} +
+ +
+ +

+ Heeft u alle wijzigingen in uw percelen opgeslagen? +

+ + +

+ Het systeem controleert de wijzigingen. Start de controle niet vanzelf? +

+

+ + Start controle + +

+ +

+ + Bekijk hieronder de wijzigingen + + . Als u akkoord bent met de aanpassingen kunt u de wijzigingen versturen. +

+

+ +

+
+
+ + + +
+
+
+ + + 1,2495 ha 1,3495 ha + +
+
+ Grasland, blijvend + + van 15-01-2023 tot 25-03-2025 + +
+
+
+
+ + 2,395 ha +
+
+ + Mais Aardappelen + + + van 15-01-2023 tot 25-03-2025 + +
+
+
+
+ + 1,565 ha +
+
+ Grasland + + van 15-01-2023 tot 15-01-2024 + +
+
+
+
+ + + 1,100 ha 0,8495 ha + +
+
+ Grasland, blijvend + + van 15-01-2023 tot 25-03-2025 + +
+
+
+ +
+ +
+ +
+
+
+
+ + +
+ +

Wil onze medewerker meekijken?

+
+ +
+
+ +
+
+
+ + ); +}; + +export default Versturen;