You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- UI: The 'date of birth' field is indented slightly more than the other fields, making it shorter. This is probably because of the label being too long. Keep the label and make all input fiels equally wide, aligned to the left edge of the longest label. This is a more consistent and visually balanced layout.
10
+
- UI: The 'date of birth' and 'gender' fields both have a default "random" option, but this is shown in different ways: the date picker is has 'default' text greyed out, while the gender select has an explicit "— random —" option. Make these consistent by showing a 'random' greyed-out option in the gender select, and removing the "— random —" option. This makes it clearer that both fields have a random default, and reduces visual clutter in the gender select.
11
+
- UI: After generating a number, the result card is shown to the right of the form, which looks a bit disconnected. Move the result card below the form, centered, to create a more cohesive and balanced layout. This also allows more space for the result card, which can be wider and easier to read. Make the result card always visible, but show placeholder text (e.g. "Your generated SSIN will appear here") before the first generation, to indicate where the output will be. This improves the user experience by providing a clear and consistent layout, and guiding the user on where to look for the results.
12
+
- UI: In the result card, the copy buttons are shown as buttons next to the result fields. Integrate them as icons inside the input fields, aligned to the right, to save space and create a cleaner look. This also makes it more intuitive that clicking the icon will copy the field value. Use a standard copy icon (e.g. clipboard) for this purpose.
13
+
14
+
---
15
+
16
+
**Steps**
17
+
18
+
### Phase 1 — Consistent field alignment (`id-number-generator.vue`)
19
+
1. Remove the built-in `label` prop from all `c-select` usages (Country, Gender) — place labels manually outside the component instead, matching the existing manual rows.
20
+
2. Wrap the whole options form in a CSS grid: `display: grid; grid-template-columns: 140px 1fr` — each row contributes one label cell and one input cell, ensuring all inputs start at the same horizontal position regardless of which component renders them.
21
+
3. The `n-date-picker` and `n-switch` rows already use manual labels; adjust their label width to match the grid column (140 px).
22
+
23
+
### Phase 2 — Consistent "random" placeholder for gender (`id-number-generator.vue`)
24
+
4. Remove `{ value: '', label: '— Random —' }` from `genderOptions`; the array should only contain `Male` and `Female`.
25
+
5. Change `selectedGender` initial value from `''` to `null` (type `string | null`).
26
+
6. Add `placeholder="Random"` to the gender `c-select` — the component renders placeholder text greyed out when no option is selected, matching the date picker's greyed-out `"Random"` placeholder text.
27
+
7. Update the `generate()` function: treat `selectedGender.value === null` the same as the existing empty-string guard (random fallback in the service).
28
+
29
+
### Phase 3 — Result card below, always visible (`id-number-generator.vue`)
30
+
8. Wrap both `<c-card>` elements in a single `<div flex flex-col gap-4>` container. The tool layout assigns `flex: 0 1 600px` to each *direct* child of `.tool-content`; wrapping in one `div` forces both cards into a single column of that width.
31
+
9. Remove `v-if="result"` from the result card so it is always rendered.
32
+
10. Inside the result card, show a centred, muted placeholder paragraph (e.g. `"Your generated SSIN will appear here"`) when `result` is `null`, and hide it once a result exists (`v-if="!result"`).
33
+
11. Keep the result rows under `v-if="result"` so they only appear after the first generation.
**What**: Complete `id-number-generator` to generate valid Belgian SSINs (nationaal registernummer / numéro national), with optional user inputs and "Generate" button, displaying both formatted and raw output.
4
+
5
+
---
6
+
7
+
### Belgian SSIN format
8
+
`YY.MM.DD-SSS.CC` — 11 digits total:
9
+
-`YYMMDD` — date of birth
10
+
-`SSS` — serial: **odd** (001–997) for males, **even** (002–998) for females
11
+
-`CC` — checksum: `97 − (9-digit-number mod 97)`, left-padded to 2 digits; for births ≥ 2000, prepend `"2"` to the 9 digits before the mod
12
+
13
+
---
14
+
15
+
**Steps**
16
+
17
+
### Phase 1 — Service layer (`id-number-generator.service.ts`)
-`fictitious: false` (default) → serial in low range (001–499 odd for male, 002–498 even for female)
22
+
-`fictitious: true` → serial in high range (501–997 odd for male, 500–998 even for female); these numbers are never assigned to real persons by the Belgian registry
23
+
- Checksum: `97 − (YYMMDDSS % 97)`, prepend `"2"` for year ≥ 2000
0 commit comments