Feature/add citizen resume viewer

package.json

@@ -38,8 +38,11 @@
 		"semantic-release:test": "semantic-release --dry-run --no-ci"
 	},
 	"dependencies": {
+		"@vee-validate/i18n": "^4.15.1",
+		"@vee-validate/rules": "^4.15.1",
 		"@vueuse/core": "^13.9.0",
-		"lodash": "^4.17.21"
+		"lodash": "^4.17.21",
+		"luxon": "^3.7.2"
 	},
 	"peerDependencies": {
 		"@sysvale/cuida": "^3.148.0",

src/App.vue

@@ -13,14 +13,23 @@
 		>
 			Change Model
 		</CdsButton>
+
+		<CdsFlexbox justify="center" style="background-color: grey; padding: 30px">
+			<div style="width: 1000px;">
+				<CitizenResumeViewer :citizen="citizen" />
+			</div>
+		</CdsFlexbox>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import CitizenSelect from './components/CitizenSelect.vue';
+import CitizenResumeViewer from './components/CitizenResumeViewer.vue';
 const citizen = ref<CitizenSelectModelType>(null);
 
+changeModel();
+
 function changeModel() {
 	console.log('no change model')
 	citizen.value = {
@@ -34,7 +43,7 @@ function changeModel() {
 		'birth_date': '1946-10-02',
 		'phone': '38 4017-7733',
 		'cellphone': '83 7530-1849',
-		'email': 'Delta1@hotmail.com',
+		'email': 'joaopaulosncastro@sysvale.com.br',
 		'address': {
 			'cep': '44443',
 			'street': 'Jakubowski Manors',
@@ -47,7 +56,7 @@ function changeModel() {
 		'race': 'black',
 		'co_cidadao': 2852,
 		'is_dead': true,
-		'pregnant': false,
+		'pregnant': true,
 		'identification_document': '040516263',
 		'issuing_agency': 'SSP'
 	}

src/components/CitizenSummaryViewer.vue

@@ -0,0 +1,91 @@
+<template>
+	<div
+		class="citizen-resume-viewer"
+		:class="{ 'citizen-resume-viewer--limit-width': !fluid }"
+	>
+		<CdsBox fluid>
+			<CdsFlexbox
+				gap="6"
+				direction="column"
+			>
+				<CdsFlexbox
+					justify="space-between"
+				>
+					<CdsFlexbox
+						gap="3"
+						align="center"
+					>
+						<CdsText
+							as="subheading-2"
+							no-margin
+							font-weight="semibold"
+							color="n-700"
+						>
+							{{ smartTitleCase(citizen.name) }}
+						</CdsText>
+						<CdsBadge
+							v-if="internalCitizen?.isPregnant"
+							size="sm"
+							variant="pink"
+						>
+							Gestante
+						</CdsBadge>
+					</CdsFlexbox>
+					<CdsFlexbox gap="3">
+						<CdsIconButton
+							size="sm"
+							tooltip-text="Editar"
+							icon="edit-outline"
+							@cds-click="emits('edit')"
+						/>
+						<CdsIconButton
+							size="sm"
+							tooltip-text="Fechar"
+							icon="x-outline"
+							@cds-click="emits('close')"
+						/>
+					</CdsFlexbox>
+				</CdsFlexbox>
+				<SummarySection
+					v-if="internalCitizen"
+					title="Dados pessoais"
+					:items="internalCitizen.personalInfo"
+				/>
+				<SummarySection
+					v-if="internalCitizen"
+					title="Informações de contato"
+					:items="internalCitizen?.contactInfo"
+				/>
+			</CdsFlexbox>
+		</CdsBox>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { smartTitleCase } from '@sysvale/foundry';
+import { Citizen as CitizenModel } from '@/models/Citizen';
+import SummarySection from './InternalComponents/SummarySection.vue';
+
+const props = defineProps<{ citizen: Citizen, fluid?: boolean }>();
+
+const emits = defineEmits(['edit', 'close']);
+
+const internalCitizen = ref<CitizenModel>();
+
+onMounted(() => {
+	internalCitizen.value = new CitizenModel(props.citizen);
+});
+
+watch(props.citizen, (newValue) => {
+	internalCitizen.value = new CitizenModel(newValue);
+})
+</script>
+
+<style lang="scss" scoped>
+.citizen-resume-viewer {
+	&--limit-width {
+		width: 800px;
+	}
+}
+</style>