From 6ef6bce21c4d148336165ecd1fae18b5c90c4927 Mon Sep 17 00:00:00 2001
From: jonLucas33 <joaolucaslopes296@gmail.com>
Date: Fri, 23 May 2025 21:11:41 -0300
Subject: [PATCH 1/4] Started Register Institution

---
 src/modules/school-management/routes.ts       |  42 ++-
 .../services/InstitutionService.ts            | 230 ++++++++++++-
 .../institution/DashboardInstitution.vue      | 312 ++++++++++++++++++
 .../institution/InstitutionDetailView.vue     | 160 +++++++++
 .../institution/InstitutionDetailsDesktop.vue | 266 +++++++++++++++
 .../institution/ListWithActionInstitution.vue | 160 +++++++++
 .../views/institution/RegisterInstitution.vue | 283 ++++++++++++++++
 .../institution/RegisterInstitutionMobile.vue | 264 +++++++++++++++
 8 files changed, 1712 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/school-management/views/institution/DashboardInstitution.vue
 create mode 100644 src/modules/school-management/views/institution/InstitutionDetailView.vue
 create mode 100644 src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
 create mode 100644 src/modules/school-management/views/institution/ListWithActionInstitution.vue
 create mode 100644 src/modules/school-management/views/institution/RegisterInstitution.vue
 create mode 100644 src/modules/school-management/views/institution/RegisterInstitutionMobile.vue

diff --git a/src/modules/school-management/routes.ts b/src/modules/school-management/routes.ts
index a78bfb7..d747771 100644
--- a/src/modules/school-management/routes.ts
+++ b/src/modules/school-management/routes.ts
@@ -1,4 +1,4 @@
-import { create, person, school, albums } from 'ionicons/icons'
+import { create, person, school, albums, business } from 'ionicons/icons'
 import DashboardFunction from './views/DashboardFunction.vue'
 import DashboardClassroom from './views/classroom/DashboardClassroom.vue'
 import RegisterClassroom from './views/classroom/RegisterClassroom.vue'
@@ -7,6 +7,9 @@ import ClassroomDetailsDesktop from './views/classroom/ClassroomDetailsDesktop.v
 import FunctionDetailsDesktop from './views/FunctionDetailsDesktop.vue'
 import RegisterFunction from './views/RegisterFunction.vue'
 // import RegisterSchool from './views/RegisterSchool.vue'
+import DashboardInstitution from './views/institution/DashboardInstitution.vue'
+import RegisterInstitution from './views/institution/RegisterInstitution.vue'
+import InstitutionDetailsDesktop from './views/institution/InstitutionDetailsDesktop.vue'
 
 const routes = [
   // {
@@ -233,6 +236,43 @@ const routes = [
       requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
     },
   },
+  {
+    path: '/Institution/list',
+    name: 'DashboardInstitution',
+    component: DashboardInstitution,
+    meta: {
+      moduleName: 'Schools',
+      moduleIcon: school,
+      icon: business,
+      name: 'Instituições',
+      order: 19,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
+  {
+    path: '/Institution/register/:id?',
+    name: 'RegisterInstitution',
+    component: RegisterInstitution,
+    meta: {
+      moduleName: 'Schools',
+      icon: create,
+      name: 'Registrar instituição',
+      order: 20,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
+  {
+    path: '/Institution/details/:id',
+    name: 'InstitutionDetails',
+    component: InstitutionDetailsDesktop,
+    meta: {
+      moduleName: 'Schools',
+      icon: business,
+      name: 'Detalhes da instituição',
+      order: 21,
+      requiredRole: ['ADMIN', 'GESTORMUNICIPAL', 'GESTORESCOLAR'],
+    },
+  },
 ]
 
 export default routes
diff --git a/src/modules/school-management/services/InstitutionService.ts b/src/modules/school-management/services/InstitutionService.ts
index 8f102bc..978b584 100644
--- a/src/modules/school-management/services/InstitutionService.ts
+++ b/src/modules/school-management/services/InstitutionService.ts
@@ -1,11 +1,233 @@
 import BaseService from '@/services/BaseService'
+import type { Institution } from '@prisma/client'
+import errorHandler from '@/utils/error-handler'
 
-const table = 'institution' as const
+interface InstitutionToSave {
+  id?: string
+  name: string
+  address?: string | null
+  city?: string | null
+  state?: string | null
+  postalCode?: string | null
+  phone?: string | null
+  email?: string | null
+  metadata?: any
+  tenantId?: string | null
+  userCreated?: string | null
+}
 
-type InstitutionTable = typeof table
+const table = 'institution' as const
 
-export default class InstitutionService extends BaseService<InstitutionTable> {
+export default class InstitutionService extends BaseService<Institution> {
   constructor() {
-    super(table) // Passando o nome da tabela para a classe base
+    super(table)
+  }
+
+  async getInstitutions() {
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .is('deletedAt', null)
+      .order('name')
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituições')
+      return []
+    }
+
+    return data as Institution[]
+  }
+
+  async getInstitutionById(id: string) {
+    if (!id) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .eq('id', id)
+      .is('deletedAt', null)
+      .maybeSingle()
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por ID')
+      return null
+    }
+
+    return data as Institution | null
+  }
+
+  async getInstitutionByName(name: string) {
+    if (!name) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .eq('name', name)
+      .is('deletedAt', null)
+      .maybeSingle()
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por nome')
+      return null
+    }
+
+    return data as Institution | null
+  }
+
+  async getInstitutionByNameInsensitive(name: string, excludeId?: string) {
+    if (!name) {
+      return null
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .ilike('name', name)
+      .is('deletedAt', null)
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituição por nome')
+      return null
+    }
+
+    const filtered = excludeId ? data.filter(item => item.id !== excludeId) : data
+    return filtered.length > 0 ? filtered[0] : null
+  }
+
+  async upsertInstitution(institution: InstitutionToSave) {
+    const now = new Date().toISOString()
+
+    // Verifica se já existe uma instituição com o mesmo nome (ignorando case)
+    const existingWithSameName = await this.getInstitutionByNameInsensitive(
+      institution.name,
+      institution.id,
+    )
+
+    if (existingWithSameName) {
+      throw new Error('Nome de instituição já existente')
+    }
+
+    let existing = null
+    if (institution.id) {
+      const { data, error: fetchError } = await this.client
+        .from(table)
+        .select('*')
+        .eq('id', institution.id)
+        .is('deletedAt', null)
+        .maybeSingle()
+
+      if (fetchError) {
+        errorHandler(fetchError, 'Erro ao buscar instituição existente por ID')
+      }
+      existing = data
+    }
+
+    const payload: Partial<Institution> & { id?: string } = {
+      name: institution.name,
+      address: institution.address || null,
+      city: institution.city || null,
+      state: institution.state || null,
+      postalCode: institution.postalCode || null,
+      phone: institution.phone || null,
+      email: institution.email || null,
+      metadata: institution.metadata || null,
+      tenantId: institution.tenantId || null,
+      userCreated: institution.userCreated || null,
+      deletedAt: null,
+      updatedAt: now,
+      ...(existing?.id && { id: existing.id }),
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .upsert(payload)
+      .select()
+
+    if (error) {
+      errorHandler(error, 'Erro ao inserir/atualizar instituição')
+    }
+    return data as Institution[]
+  }
+
+  async softDeleteInstitution(institutionId: string, userId?: string) {
+    if (!institutionId) {
+      errorHandler({ message: 'ID da instituição não fornecido' }, 'Erro ao apagar instituição')
+      return []
+    }
+
+    // Verificar escolas associadas
+    const { data: schools, error: schoolsError } = await this.client
+      .from('school')
+      .select('id')
+      .eq('institutionId', institutionId)
+      .is('deletedAt', null)
+
+    if (schoolsError) {
+      errorHandler(schoolsError, 'Erro ao verificar escolas associadas')
+      return []
+    }
+
+    if (schools && schools.length > 0) {
+      throw new Error('Não é possível excluir: existem escolas vinculadas a essa instituição.')
+    }
+
+    // Verificar cursos associados
+    const { data: courses, error: coursesError } = await this.client
+      .from('course')
+      .select('id')
+      .eq('institutionId', institutionId)
+      .is('deletedAt', null)
+
+    if (coursesError) {
+      errorHandler(coursesError, 'Erro ao verificar cursos associados')
+      return []
+    }
+
+    if (courses && courses.length > 0) {
+      throw new Error('Não é possível excluir: existem cursos vinculados a essa instituição.')
+    }
+
+    const now = new Date().toISOString()
+    const updateFields: Record<string, any> = {
+      deletedAt: now,
+      updatedAt: now,
+    }
+
+    if (userId) {
+      updateFields.updatedBy = userId
+    }
+
+    const { data, error } = await this.client
+      .from(table)
+      .update(updateFields)
+      .eq('id', institutionId)
+      .select()
+
+    if (error) {
+      errorHandler(error, 'Erro ao excluir instituição')
+      return []
+    }
+
+    return data as Institution[]
+  }
+
+  async getInstitutionsByFilter(filter: string) {
+    const { data, error } = await this.client
+      .from(table)
+      .select('*')
+      .or(`name.ilike.%${filter}%, city.ilike.%${filter}%, state.ilike.%${filter}%`)
+      .is('deletedAt', null)
+      .order('name')
+
+    if (error) {
+      errorHandler(error, 'Erro ao buscar instituições com filtro')
+      return []
+    }
+
+    return data as Institution[]
   }
 }
diff --git a/src/modules/school-management/views/institution/DashboardInstitution.vue b/src/modules/school-management/views/institution/DashboardInstitution.vue
new file mode 100644
index 0000000..a4671fe
--- /dev/null
+++ b/src/modules/school-management/views/institution/DashboardInstitution.vue
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { Institution } from '@prisma/client'
+import InstitutionDetailView from './InstitutionDetailView.vue'
+import ListWithActionInstitution from './ListWithActionInstitution.vue'
+import RegisterInstitutionMobile from './RegisterInstitutionMobile.vue'
+import ContentLayout from '@/components/theme/ContentLayout.vue'
+import showToast from '@/utils/toast-alert'
+import { IonButton, IonCard, IonCardHeader, IonCardTitle, IonCol, IonContent, IonIcon, IonModal, IonPage, IonRow, IonSearchbar, IonText } from '@ionic/vue'
+import { add, business } from 'ionicons/icons'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import InstitutionService from '../../services/InstitutionService'
+
+const router = useRouter()
+const route = router.currentRoute
+const institutionService = new InstitutionService()
+const dataList = ref<Institution[]>([])
+const searchQuery = ref('')
+const isModalAddInstitution = ref(false)
+const editingId = ref<string | undefined>(undefined)
+const seeModal = ref({ modal: false, data: undefined as any })
+const editModal = ref({ modal: false, data: undefined })
+const deleteModal = ref<{ modal: boolean, data: Institution | undefined }>({ modal: false, data: undefined })
+
+function delayModalOpen(modalState: any) {
+  modalState.modal = false
+  setTimeout(() => (modalState.modal = true), 10)
+}
+
+const adaptedDataList = computed(() => {
+  return dataList.value.map(item => ({
+    id: item.id,
+    name: item.name,
+    address: item.address,
+    city: item.city,
+    state: item.state,
+    postalCode: item.postalCode,
+    phone: item.phone,
+    email: item.email,
+    metadata: item.metadata,
+    createdAt: item.createdAt ? item.createdAt.toString() : undefined,
+    updatedAt: item.updatedAt ? item.updatedAt.toString() : undefined,
+    deletedAt: item.deletedAt ? item.deletedAt.toString() : undefined,
+  }))
+})
+
+const filteredDataList = computed(() => {
+  const filtered = searchQuery.value
+    ? adaptedDataList.value.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        || (item.city && item.city.toLowerCase().includes(searchQuery.value.toLowerCase()))
+        || (item.state && item.state.toLowerCase().includes(searchQuery.value.toLowerCase()))
+        || (item.email && item.email.toLowerCase().includes(searchQuery.value.toLowerCase())),
+      )
+    : adaptedDataList.value
+
+  return filtered.sort((a, b) => {
+    return a.name.localeCompare(b.name)
+  })
+})
+
+function setModalAddInstitution(open: boolean) {
+  if (open) {
+    delayModalOpen({ modal: isModalAddInstitution })
+  } else {
+    isModalAddInstitution.value = open
+  }
+}
+
+function navigateToRegister() {
+  if (isMobileDevice()) {
+    editingId.value = undefined
+    setModalAddInstitution(true)
+  }
+  else {
+    router.push({ name: 'RegisterInstitution' })
+  }
+}
+
+function setSeeModal(open: boolean) {
+  if (open) {
+    delayModalOpen(seeModal.value)
+  } else {
+    seeModal.value.modal = open
+  }
+}
+
+function setEditModal(open: boolean) {
+  if (open) {
+    delayModalOpen(editModal.value)
+  } else {
+    editModal.value.modal = open
+    loadInstitutions()
+  }
+}
+
+function setDeleteModal(open: boolean) {
+  if (open) {
+    delayModalOpen(deleteModal.value)
+  } else {
+    deleteModal.value.modal = open
+  }
+}
+
+async function loadInstitutions() {
+  try {
+    const institutions = await institutionService.getInstitutions()
+    dataList.value = institutions || []
+  }
+  catch (error) {
+    console.error('Erro ao carregar instituições:', error)
+  }
+}
+
+function isMobileDevice() {
+  return window.innerWidth <= 768
+}
+
+async function handleDelete() {
+  if (deleteModal.value?.data?.id) {
+    try {
+      await institutionService.softDeleteInstitution(deleteModal.value.data.id)
+      loadInstitutions()
+      setDeleteModal(false)
+      showToast('Instituição excluída com sucesso', 'top', 'success')
+    }
+    catch (error: any) {
+      console.error('Erro ao excluir instituição:', error)
+
+      if (error.message) {
+        if (error.message.includes('escolas vinculadas')) {
+          showToast('Não é possível excluir: Existem escolas vinculadas a essa instituição', 'top', 'warning')
+        } else if (error.message.includes('cursos vinculados')) {
+          showToast('Não é possível excluir: Existem cursos vinculados a essa instituição', 'top', 'warning')
+        } else {
+          showToast('Erro ao excluir: ' + error.message, 'top', 'danger')
+        }
+      } else {
+        showToast('Erro desconhecido ao excluir instituição', 'top', 'danger')
+      }
+    }
+  }
+  else {
+    console.error('ID da instituição não encontrado para exclusão:', deleteModal)
+  }
+}
+
+onMounted(() => {
+  loadInstitutions()
+})
+
+watch(
+  () => route.value.query,
+  (query) => {
+    if (query.refresh) {
+      loadInstitutions()
+    }
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <IonPage>
+    <ContentLayout>
+      <div class="ion-margin-top">
+        <IonRow class="ion-align-items-center ion-justify-content-between">
+          <IonCol size="10">
+            <IonSearchbar v-model="searchQuery" placeholder="Buscar instituição" />
+          </IonCol>
+          <IonCol size="2" class="ion-text-end">
+            <IonButton id="add-btn" expand="block" class="ion-text-uppercase" @click="navigateToRegister()">
+              <IonIcon slot="icon-only" :icon="add" class="ion-hide-sm-up" />
+              <IonIcon slot="start" :icon="add" class="ion-hide-sm-down" />
+              <span class="ion-hide-sm-down">Novo</span>
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <ListWithActionInstitution
+          :data-list="filteredDataList"
+          @update:delete="(event) => {
+            deleteModal = event;
+            setDeleteModal(true);
+          }"
+          @update:edit="(event) => {
+            if (isMobileDevice()) {
+              editingId = event.data?.id
+              setEditModal(true)
+            }
+            else {
+              router.push({ name: 'RegisterInstitution', params: { id: event.data?.id } })
+            }
+          }"
+          @update:see="(event) => {
+            if (isMobileDevice()) {
+              seeModal = event
+              setSeeModal(true)
+            }
+            else {
+              router.push({ name: 'InstitutionDetails', params: { id: event.data?.id } })
+            }
+          }"
+        />
+
+        <IonModal
+          :is-open="isModalAddInstitution"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @ion-modal-did-dismiss="setModalAddInstitution(false)"
+        >
+          <RegisterInstitutionMobile
+            @saved="loadInstitutions(); setModalAddInstitution(false)"
+            @cancel="setModalAddInstitution(false)"
+            @success="(message, color) => { showToast(message, 'top', color); }"
+            @error="(message, color) => { showToast(message, 'top', color); }"
+          />
+        </IonModal>
+
+        <IonModal
+          :is-open="editModal.modal"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @ion-modal-did-dismiss="setEditModal(false)"
+        >
+          <IonContent>
+            <RegisterInstitutionMobile
+              :edit-id="editingId"
+              @saved="loadInstitutions(); setEditModal(false)"
+              @cancel="setEditModal(false)"
+              @success="(message, color) => { showToast(message, 'top', color); }"
+              @error="(message, color) => { showToast(message, 'top', color); }"
+            />
+          </IonContent>
+        </IonModal>
+
+        <IonModal
+          :is-open="seeModal.modal"
+          :expand-to-scroll="false"
+          :initial-breakpoint="0.95"
+          :breakpoints="[0, 0.7, 0.95, 1]"
+          @did-dismiss="setSeeModal(false)"
+        >
+          <IonContent>
+            <InstitutionDetailView
+              :items="seeModal.data"
+              name="Detalhes da instituição"
+              @close="setSeeModal(false)"
+              @edit="() => {
+                editingId = seeModal.data?.id;
+                setSeeModal(false);
+                setEditModal(true);
+              }"
+            />
+          </IonContent>
+        </IonModal>
+
+        <IonModal id="delete-modal" :is-open="deleteModal.modal" @ion-modal-did-dismiss="setDeleteModal(false)">
+          <IonCard class="ion-no-margin">
+            <IonCardHeader>
+              <IonCardTitle>Excluir instituição</IonCardTitle>
+              <IonText class="ion-padding-vertical">
+                Tem certeza que deseja excluir esta instituição?
+              </IonText>
+              <div style="display: flex;">
+                <IonButton
+                  size="small"
+                  style="margin-left: auto; margin-right: 8px; text-transform: capitalize;"
+                  color="medium"
+                  @click="setDeleteModal(false)"
+                >
+                  Cancelar
+                </IonButton>
+                <IonButton
+                  style="text-transform: capitalize;"
+                  size="small"
+                  color="danger"
+                  @click="handleDelete()"
+                >
+                  Confirmar
+                </IonButton>
+              </div>
+            </IonCardHeader>
+          </IonCard>
+        </IonModal>
+      </div>
+    </ContentLayout>
+  </IonPage>
+</template>
+
+<style scoped>
+ion-searchbar {
+  --background: var(--ion-color-light);
+}
+
+ion-segment {
+  --background: rgba(var(--ion-color-tertiary-rgb), 0.15);
+  --color: var(--ion-color-secondary);
+}
+
+.custom-button {
+  max-width: 120px;
+}
+#delete-modal {
+  --width: 300px;
+  --height: auto;
+  --border-radius: 10px;
+  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+}
+</style>
diff --git a/src/modules/school-management/views/institution/InstitutionDetailView.vue b/src/modules/school-management/views/institution/InstitutionDetailView.vue
new file mode 100644
index 0000000..2b715f9
--- /dev/null
+++ b/src/modules/school-management/views/institution/InstitutionDetailView.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="ion-padding">
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonButton @click="emit('close')">
+            <IonIcon :icon="chevronBack" slot="icon-only"></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>{{ name }}</IonTitle>
+        <IonButtons slot="end">
+          <IonButton @click="emit('edit')">
+            <IonIcon :icon="create" slot="icon-only"></IonIcon>
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    <IonCard class="ion-margin-top">
+      <IonCardHeader>
+        <IonCardTitle>Informações da Instituição</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <IonList lines="none">
+          <IonItem>
+            <IonLabel>
+              <h2>Nome</h2>
+              <p>{{ items?.name || 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>Endereço</h2>
+              <p>{{ items?.address || 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>Cidade/Estado</h2>
+              <p>
+                {{ items?.city || 'Não informada' }}{{ items?.state ? `/${items.state}` : '' }}
+              </p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>CEP</h2>
+              <p>{{ items?.postalCode || 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>Telefone</h2>
+              <p>{{ items?.phone || 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>E-mail</h2>
+              <p>{{ items?.email || 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+        </IonList>
+      </IonCardContent>
+    </IonCard>
+
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Dados de Sistema</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <IonList lines="none">
+          <IonItem>
+            <IonLabel>
+              <h2>Criado em</h2>
+              <p>{{ items?.createdAt ? formatDate(items.createdAt) : 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+          
+          <IonItem>
+            <IonLabel>
+              <h2>Última atualização</h2>
+              <p>{{ items?.updatedAt ? formatDate(items.updatedAt) : 'Não informado' }}</p>
+            </IonLabel>
+          </IonItem>
+        </IonList>
+      </IonCardContent>
+    </IonCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue'
+import { chevronBack, create } from 'ionicons/icons'
+
+const props = defineProps({
+  items: {
+    type: Object,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: 'Detalhes da Instituição',
+  },
+})
+
+const emit = defineEmits(['close', 'edit'])
+
+function formatDate(dateString: string) {
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch (error) {
+    return dateString || 'Data inválida'
+  }
+}
+</script>
+
+<style scoped>
+ion-item {
+  --padding-start: 0;
+}
+
+ion-item h2 {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ion-color-medium);
+}
+
+ion-item p {
+  font-size: 16px;
+  margin-top: 4px;
+  color: var(--ion-color-dark);
+}
+</style>
diff --git a/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
new file mode 100644
index 0000000..dd64d69
--- /dev/null
+++ b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import type { Institution } from '@prisma/client'
+import ContentLayout from '@/components/theme/ContentLayout.vue'
+import { IonButton, IonCol, IonGrid, IonPage, IonRow } from '@ionic/vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import InstitutionService from '../../services/InstitutionService'
+
+const route = useRoute()
+const router = useRouter()
+const institutionService = new InstitutionService()
+const institutionDetails = ref<Institution | null>(null)
+const loading = ref(true)
+
+async function loadInstitutionDetails() {
+  try {
+    loading.value = true
+    const id = route.params.id as string
+    if (!id) {
+      router.push({ name: 'DashboardInstitution' })
+      return
+    }
+
+    const data = await institutionService.getInstitutionById(id)
+    institutionDetails.value = data
+  }
+  catch (error) {
+    console.error('Erro ao carregar detalhes da instituição:', error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function formatDate(dateString: string | null | undefined): string {
+  if (!dateString) return '-'
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+  catch (error) {
+    console.error('Erro ao formatar data:', error)
+    return '-'
+  }
+}
+
+function navigateToEdit() {
+  if (institutionDetails.value?.id) {
+    router.push({ name: 'RegisterInstitution', params: { id: institutionDetails.value.id } })
+  }
+}
+
+function goBack() {
+  router.back()
+}
+
+onMounted(() => {
+  loadInstitutionDetails()
+})
+
+watch(
+  () => route.params,
+  () => {
+    loadInstitutionDetails()
+  },
+)
+</script>
+
+<template>
+  <IonPage>
+    <ContentLayout>
+      <div v-if="loading" class="ion-text-center ion-padding">
+        <p>Carregando detalhes da instituição...</p>
+      </div>
+      <div v-else-if="institutionDetails" class="institution-details-container">
+        <h1 class="institution-title">
+          {{ institutionDetails.name }}
+        </h1>
+
+        <div class="detail-section">
+          <h2 class="section-title">
+            Informações básicas
+          </h2>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Nome</span>
+                  <span class="detail-value">{{ institutionDetails.name || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">E-mail</span>
+                  <span class="detail-value">{{ institutionDetails.email || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Telefone</span>
+                  <span class="detail-value">{{ institutionDetails.phone || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">CEP</span>
+                  <span class="detail-value">{{ institutionDetails.postalCode || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        <div class="detail-section">
+          <h2 class="section-title">
+            Endereço
+          </h2>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="12">
+                <div class="detail-item">
+                  <span class="detail-label">Endereço completo</span>
+                  <span class="detail-value">{{ institutionDetails.address || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Cidade</span>
+                  <span class="detail-value">{{ institutionDetails.city || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Estado</span>
+                  <span class="detail-value">{{ institutionDetails.state || '-' }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        <div class="detail-section">
+          <h2 class="section-title">
+            Informações do sistema
+          </h2>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Data de criação</span>
+                  <span class="detail-value">{{ formatDate(institutionDetails.createdAt) }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Última atualização</span>
+                  <span class="detail-value">{{ formatDate(institutionDetails.updatedAt) }}</span>
+                </div>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        <div class="fixed-footer">
+          <IonGrid>
+            <IonRow>
+              <IonCol size="6">
+                <IonButton color="danger" expand="full" @click="goBack()">Fechar</IonButton>
+              </IonCol>
+              <IonCol size="6">
+                <IonButton color="secondary" expand="full" @click="navigateToEdit()">Editar</IonButton>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+      </div>
+
+      <div v-else class="ion-text-center ion-padding">
+        <p>Instituição não encontrada</p>
+        <IonButton color="medium" @click="goBack()">
+          Voltar
+        </IonButton>
+      </div>
+    </ContentLayout>
+  </IonPage>
+</template>
+
+<style scoped>
+.institution-details-container {
+  padding: 16px;
+  padding-bottom: 80px; /* Espaço para o footer fixo */
+}
+
+.institution-title {
+  margin-bottom: 16px;
+  color: var(--ion-color-secondary);
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.detail-section {
+  margin-bottom: 24px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  color: var(--ion-color-secondary);
+  font-size: 1.2rem;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.detail-item {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-label {
+  font-size: 0.9rem;
+  color: var(--ion-color-secondary);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.detail-value {
+  font-size: 1rem;
+}
+
+.fixed-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  padding: 12px 16px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+@media (max-width: 768px) {
+  .detail-section {
+    padding: 12px;
+  }
+  
+  .institution-details-container {
+    padding-bottom: 90px; /* Mais espaço no mobile */
+  }
+}
+</style>
diff --git a/src/modules/school-management/views/institution/ListWithActionInstitution.vue b/src/modules/school-management/views/institution/ListWithActionInstitution.vue
new file mode 100644
index 0000000..6b3f8e1
--- /dev/null
+++ b/src/modules/school-management/views/institution/ListWithActionInstitution.vue
@@ -0,0 +1,160 @@
+<template>
+  <IonCard v-if="true">
+    <IonCardHeader color="secondary">
+      <div style="display: flex; align-items: center; height: 15px;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px; font-size: 16pt;" />
+        <IonCardTitle style="font-size: medium;">
+          Lista de instituições ({{ props.dataList.length }})
+        </IonCardTitle>
+      </div>
+    </IonCardHeader>
+
+    <div v-if="true">
+      <IonCardContent class="ion-no-padding">
+        <IonList>
+          <div v-if="innerWidth < 992">
+            <IonItemSliding
+              v-for="(item, index) in props.dataList" :key="index" ref="itemSliding"
+              @ion-did-open="() => handleSwipeOpened(index)"
+              @ion-did-close="() => handleSwipeClosed(index)"
+            >
+              <IonItem>
+                <IonLabel color="primary" class="ion-no-margin institution-name" style="margin-top: 5px; margin-bottom: 5px;">
+                  <h2>{{ item.name || 'Instituição sem nome' }}</h2>
+                  <p>
+                    <span v-if="item.city || item.state">{{ item.city || '' }}{{ item.state ? `/${item.state}` : '' }}</span>
+                    <span v-if="item.phone"> - {{ item.phone }}</span>
+                  </p>
+                </IonLabel>
+                <IonIcon :icon="isOpen[index] ? arrowForward : arrowBack" style="font-size: 18pt;" />
+              </IonItem>
+
+              <IonItemOptions side="end" style="border-bottom: 1px solid rgba(var(--ion-color-primary-rgb), 0.2);">
+                <IonItemOption color="tertiary" @click="emits('update:see', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="eye" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption color="primary" @click="emits('update:edit', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="pencilSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption color="danger" @click="emits('update:delete', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon :icon="trashSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+              </IonItemOptions>
+            </IonItemSliding>
+          </div>
+          <div v-else>
+            <IonItem v-for="(item, index) in props.dataList" :key="index">
+              <IonLabel color="primary" class="ion-no-margin institution-name" style="margin-top: 5px; margin-bottom: 5px;">
+                <h2>{{ item.name || 'Instituição sem nome' }}</h2>
+              </IonLabel>
+              <div style="display: flex; min-height: 100%;">
+                <IonItemOption style="background-color: white;" @click="emits('update:see', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="tertiary" :icon="eye" size="large" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:edit', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="primary" :icon="pencilSharp" size="large" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:delete', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="danger" :icon="trashSharp" size="large" />
+                  </div>
+                </IonItemOption>
+              </div>
+            </IonItem>
+          </div>
+        </IonList>
+      </IonCardContent>
+    </div>
+  </IonCard>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+} from '@ionic/vue'
+import { arrowBack, arrowForward, businessOutline, eye, pencilSharp, trashSharp } from 'ionicons/icons'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+interface Props {
+  dataList: {
+    id: string
+    name: string
+    address?: string | null
+    city?: string | null
+    state?: string | null
+    postalCode?: string | null
+    phone?: string | null
+    email?: string | null
+    createdAt?: string
+    updatedAt?: string | null
+    deletedAt?: string | null
+  }[]
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['update:see', 'update:edit', 'update:delete'])
+
+const isOpen = ref<boolean[]>([])
+const itemSliding = ref<(InstanceType<typeof IonItemSliding> | null)[]>([])
+
+const innerWidth = ref(window.innerWidth)
+
+function updateInnerWidth() {
+  innerWidth.value = window.innerWidth
+}
+
+function handleSwipeOpened(index: number) {
+  isOpen.value[index] = true
+}
+
+function handleSwipeClosed(index: number) {
+  isOpen.value[index] = false
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateInnerWidth)
+  isOpen.value = Array.from<boolean>({ length: props.dataList.length }).fill(false)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateInnerWidth)
+})
+</script>
+
+<style scoped>
+.institution-name h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.institution-name p {
+  font-size: 14px;
+  color: var(--ion-color-medium);
+}
+</style>
diff --git a/src/modules/school-management/views/institution/RegisterInstitution.vue b/src/modules/school-management/views/institution/RegisterInstitution.vue
new file mode 100644
index 0000000..930c52e
--- /dev/null
+++ b/src/modules/school-management/views/institution/RegisterInstitution.vue
@@ -0,0 +1,283 @@
+<template>
+  <IonPage>
+    <ContentLayout>
+      <div class="ion-padding">
+        <IonRow class="ion-align-items-center ion-margin-bottom">
+          <IonCol size="8">
+            <IonTitle class="ion-no-padding">
+              {{ isEditing ? 'Editar Instituição' : 'Nova Instituição' }}
+            </IonTitle>
+          </IonCol>
+          <IonCol size="4" class="ion-text-end">
+            <IonButton color="medium" fill="outline" class="ion-margin-end" @click="navigateBack">
+              Cancelar
+            </IonButton>
+            <IonButton type="submit" :disabled="isSubmitting" @click="saveForm">
+              Salvar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <IonCard>
+          <IonCardContent>
+            <form @submit.prevent="saveForm">
+              <IonGrid>
+                <IonRow>
+                  <IonCol size="12" size-md="8">
+                    <IonItem>
+                      <IonLabel position="stacked">Nome <IonText color="danger">*</IonText></IonLabel>
+                      <IonInput
+                        v-model="values.name"
+                        type="text"
+                        placeholder="Nome da instituição"
+                        :maxlength="100"
+                        required
+                        @ion-change="validateName"
+                      ></IonInput>
+                      <IonNote v-if="errors.name" color="danger">{{ errors.name }}</IonNote>
+                    </IonItem>
+                  </IonCol>
+                </IonRow>
+
+                <IonRow>
+                  <IonCol size="12">
+                    <IonItem>
+                      <IonLabel position="stacked">Endereço</IonLabel>
+                      <IonInput
+                        v-model="values.address"
+                        type="text"
+                        placeholder="Endereço da instituição"
+                        :maxlength="255"
+                      ></IonInput>
+                    </IonItem>
+                  </IonCol>
+                </IonRow>
+
+                <IonRow>
+                  <IonCol size="12" size-md="6">
+                    <IonItem>
+                      <IonLabel position="stacked">Cidade</IonLabel>
+                      <IonInput
+                        v-model="values.city"
+                        type="text"
+                        placeholder="Cidade"
+                        :maxlength="100"
+                      ></IonInput>
+                    </IonItem>
+                  </IonCol>
+                  <IonCol size="12" size-md="2">
+                    <IonItem>
+                      <IonLabel position="stacked">Estado</IonLabel>
+                      <IonInput
+                        v-model="values.state"
+                        type="text"
+                        placeholder="UF"
+                        :maxlength="2"
+                      ></IonInput>
+                    </IonItem>
+                  </IonCol>
+                  <IonCol size="12" size-md="4">
+                    <IonItem>
+                      <IonLabel position="stacked">CEP</IonLabel>
+                      <IonInput
+                        v-model="values.postalCode"
+                        type="text"
+                        placeholder="CEP"
+                        :maxlength="10"
+                      ></IonInput>
+                    </IonItem>
+                  </IonCol>
+                </IonRow>
+
+                <IonRow>
+                  <IonCol size="12" size-md="6">
+                    <IonItem>
+                      <IonLabel position="stacked">Telefone</IonLabel>
+                      <IonInput
+                        v-model="values.phone"
+                        type="tel"
+                        placeholder="Telefone de contato"
+                        :maxlength="15"
+                      ></IonInput>
+                    </IonItem>
+                  </IonCol>
+                  <IonCol size="12" size-md="6">
+                    <IonItem>
+                      <IonLabel position="stacked">E-mail</IonLabel>
+                      <IonInput
+                        v-model="values.email"
+                        type="email"
+                        placeholder="E-mail de contato"
+                        :maxlength="255"
+                        @ion-change="validateEmail"
+                      ></IonInput>
+                      <IonNote v-if="errors.email" color="danger">{{ errors.email }}</IonNote>
+                    </IonItem>
+                  </IonCol>
+                </IonRow>
+              </IonGrid>
+            </form>
+          </IonCardContent>
+        </IonCard>
+
+        <IonRow class="ion-margin-top">
+          <IonCol class="ion-text-end">
+            <IonButton color="medium" fill="outline" class="ion-margin-end" @click="navigateBack">
+              Cancelar
+            </IonButton>
+            <IonButton type="submit" :disabled="isSubmitting" @click="saveForm">
+              Salvar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      </div>
+    </ContentLayout>
+  </IonPage>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCol,
+  IonGrid,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+} from '@ionic/vue'
+import ContentLayout from '@/components/theme/ContentLayout.vue'
+import { onMounted, ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import showToast from '@/utils/toast-alert'
+import InstitutionService from '../../services/InstitutionService'
+
+const router = useRouter()
+const route = useRoute()
+const institutionService = new InstitutionService()
+const isSubmitting = ref(false)
+const isEditing = computed(() => !!route.params.id)
+
+const values = ref({
+  name: '',
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: ''
+})
+
+const errors = ref({
+  name: '',
+  email: ''
+})
+
+onMounted(async () => {
+  if (isEditing.value) {
+    await loadInstitution()
+  }
+})
+
+async function loadInstitution() {
+  try {
+    const id = route.params.id as string
+    const institution = await institutionService.getInstitutionById(id)
+    if (institution) {
+      values.value.name = institution.name || ''
+      values.value.address = institution.address || ''
+      values.value.city = institution.city || ''
+      values.value.state = institution.state || ''
+      values.value.postalCode = institution.postalCode || ''
+      values.value.phone = institution.phone || ''
+      values.value.email = institution.email || ''
+    }
+  } catch (error) {
+    console.error('Erro ao carregar instituição:', error)
+    showToast('Erro ao carregar instituição', 'top', 'danger')
+  }
+}
+
+function validateName() {
+  if (!values.value.name.trim()) {
+    errors.value.name = 'Nome é obrigatório'
+    return false
+  }
+  errors.value.name = ''
+  return true
+}
+
+function validateEmail() {
+  if (!values.value.email) {
+    errors.value.email = ''
+    return true
+  }
+  
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(values.value.email)) {
+    errors.value.email = 'E-mail inválido'
+    return false
+  }
+  
+  errors.value.email = ''
+  return true
+}
+
+function validateForm() {
+  const nameValid = validateName()
+  const emailValid = validateEmail()
+  return nameValid && emailValid
+}
+
+async function saveForm() {
+  if (!validateForm()) {
+    return
+  }
+
+  isSubmitting.value = true
+
+  try {
+    const payload = {
+      id: isEditing.value ? route.params.id as string : undefined,
+      name: values.value.name,
+      address: values.value.address,
+      city: values.value.city,
+      state: values.value.state,
+      postalCode: values.value.postalCode,
+      phone: values.value.phone,
+      email: values.value.email,
+    }
+
+    const result = await institutionService.upsertInstitution(payload)
+    
+    if (result) {
+      showToast(`Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso`, 'top', 'success')
+      navigateBack(true)
+    }
+  } catch (error: any) {
+    console.error('Erro ao salvar instituição:', error)
+    showToast(error.message || 'Erro ao salvar instituição', 'top', 'danger')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+function navigateBack(refresh = false) {
+  if (refresh) {
+    router.push({ name: 'DashboardInstitution', query: { refresh: 'true' } })
+  } else {
+    router.push({ name: 'DashboardInstitution' })
+  }
+}
+</script>
+
+<style scoped>
+ion-item {
+  --padding-start: 0;
+}
+</style>
diff --git a/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
new file mode 100644
index 0000000..19dfa58
--- /dev/null
+++ b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
@@ -0,0 +1,264 @@
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonButton @click="cancelForm">
+            <IonIcon :icon="chevronBack" slot="icon-only"></IonIcon>
+          </IonButton>
+        </IonButtons>
+        <IonTitle>{{ isEditing ? 'Editar Instituição' : 'Nova Instituição' }}</IonTitle>
+        <IonButtons slot="end">
+          <IonButton @click="saveForm" :disabled="isSubmitting">
+            <IonIcon :icon="checkmark" slot="icon-only"></IonIcon>
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    <IonContent class="ion-padding">
+      <form @submit.prevent="saveForm">
+        <IonList>
+          <IonItem>
+            <IonLabel position="stacked">Nome <IonText color="danger">*</IonText></IonLabel>
+            <IonInput
+              v-model="values.name"
+              type="text"
+              placeholder="Nome da instituição"
+              :maxlength="100"
+              required
+              @ion-change="validateName"
+            ></IonInput>
+            <IonNote v-if="errors.name" color="danger">{{ errors.name }}</IonNote>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Endereço</IonLabel>
+            <IonInput
+              v-model="values.address"
+              type="text"
+              placeholder="Endereço da instituição"
+              :maxlength="255"
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Cidade</IonLabel>
+            <IonInput
+              v-model="values.city"
+              type="text"
+              placeholder="Cidade"
+              :maxlength="100"
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Estado</IonLabel>
+            <IonInput
+              v-model="values.state"
+              type="text"
+              placeholder="UF"
+              :maxlength="2"
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">CEP</IonLabel>
+            <IonInput
+              v-model="values.postalCode"
+              type="text"
+              placeholder="CEP"
+              :maxlength="10"
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Telefone</IonLabel>
+            <IonInput
+              v-model="values.phone"
+              type="tel"
+              placeholder="Telefone de contato"
+              :maxlength="15"
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">E-mail</IonLabel>
+            <IonInput
+              v-model="values.email"
+              type="email"
+              placeholder="E-mail de contato"
+              :maxlength="255"
+              @ion-change="validateEmail"
+            ></IonInput>
+            <IonNote v-if="errors.email" color="danger">{{ errors.email }}</IonNote>
+          </IonItem>
+        </IonList>
+      </form>
+    </IonContent>
+
+    <IonFooter>
+      <IonToolbar>
+        <IonRow>
+          <IonCol>
+            <IonButton expand="block" color="medium" @click="cancelForm">Cancelar</IonButton>
+          </IonCol>
+          <IonCol>
+            <IonButton expand="block" @click="saveForm" :disabled="isSubmitting">Salvar</IonButton>
+          </IonCol>
+        </IonRow>
+      </IonToolbar>
+    </IonFooter>
+  </IonPage>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue'
+import { checkmark, chevronBack } from 'ionicons/icons'
+import { onMounted, ref, computed } from 'vue'
+import InstitutionService from '../../services/InstitutionService'
+
+const props = defineProps({
+  editId: {
+    type: String,
+    default: '',
+  }
+})
+
+const emit = defineEmits(['saved', 'cancel', 'success', 'error'])
+
+const institutionService = new InstitutionService()
+const isSubmitting = ref(false)
+const isEditing = computed(() => !!props.editId)
+
+const values = ref({
+  name: '',
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: ''
+})
+
+const errors = ref({
+  name: '',
+  email: ''
+})
+
+onMounted(async () => {
+  if (props.editId) {
+    await loadInstitution()
+  }
+})
+
+async function loadInstitution() {
+  try {
+    const institution = await institutionService.getInstitutionById(props.editId)
+    if (institution) {
+      values.value.name = institution.name || ''
+      values.value.address = institution.address || ''
+      values.value.city = institution.city || ''
+      values.value.state = institution.state || ''
+      values.value.postalCode = institution.postalCode || ''
+      values.value.phone = institution.phone || ''
+      values.value.email = institution.email || ''
+    }
+  } catch (error) {
+    console.error('Erro ao carregar instituição:', error)
+    emit('error', 'Erro ao carregar instituição', 'danger')
+  }
+}
+
+function validateName() {
+  if (!values.value.name.trim()) {
+    errors.value.name = 'Nome é obrigatório'
+    return false
+  }
+  errors.value.name = ''
+  return true
+}
+
+function validateEmail() {
+  if (!values.value.email) {
+    errors.value.email = ''
+    return true
+  }
+  
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(values.value.email)) {
+    errors.value.email = 'E-mail inválido'
+    return false
+  }
+  
+  errors.value.email = ''
+  return true
+}
+
+function validateForm() {
+  const nameValid = validateName()
+  const emailValid = validateEmail()
+  return nameValid && emailValid
+}
+
+async function saveForm() {
+  if (!validateForm()) {
+    return
+  }
+
+  isSubmitting.value = true
+
+  try {
+    const payload = {
+      id: isEditing.value ? props.editId : undefined,
+      name: values.value.name,
+      address: values.value.address,
+      city: values.value.city,
+      state: values.value.state,
+      postalCode: values.value.postalCode,
+      phone: values.value.phone,
+      email: values.value.email,
+    }
+
+    const result = await institutionService.upsertInstitution(payload)
+    
+    if (result) {
+      emit('success', `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso`, 'success')
+      emit('saved')
+    }
+  } catch (error: any) {
+    console.error('Erro ao salvar instituição:', error)
+    emit('error', error.message || 'Erro ao salvar instituição', 'danger')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+function cancelForm() {
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+ion-item {
+  --padding-start: 0;
+}
+</style>

From eae3a94138fadc90fd93fe895cd6f486aa4c4b40 Mon Sep 17 00:00:00 2001
From: jonLucas33 <joaolucaslopes296@gmail.com>
Date: Mon, 26 May 2025 01:03:28 -0300
Subject: [PATCH 2/4] Added masks and api cep

---
 .../institution/InstitutionDetailsDesktop.vue |  39 +-
 .../views/institution/RegisterInstitution.vue | 618 ++++++++++++------
 src/utils/imasks.ts                           |  10 +
 3 files changed, 432 insertions(+), 235 deletions(-)

diff --git a/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
index dd64d69..9acf50a 100644
--- a/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
+++ b/src/modules/school-management/views/institution/InstitutionDetailsDesktop.vue
@@ -110,12 +110,6 @@ watch(
                   <span class="detail-value">{{ institutionDetails.phone || '-' }}</span>
                 </div>
               </IonCol>
-              <IonCol size="12" size-md="6">
-                <div class="detail-item">
-                  <span class="detail-label">CEP</span>
-                  <span class="detail-value">{{ institutionDetails.postalCode || '-' }}</span>
-                </div>
-              </IonCol>
             </IonRow>
           </IonGrid>
         </div>
@@ -126,9 +120,15 @@ watch(
           </h2>
           <IonGrid>
             <IonRow>
-              <IonCol size="12">
+              <IonCol size="12" size-md="6">
                 <div class="detail-item">
-                  <span class="detail-label">Endereço completo</span>
+                  <span class="detail-label">CEP</span>
+                  <span class="detail-value">{{ institutionDetails.postalCode || '-' }}</span>
+                </div>
+              </IonCol>
+              <IonCol size="12" size-md="6">
+                <div class="detail-item">
+                  <span class="detail-label">Logradouro</span>
                   <span class="detail-value">{{ institutionDetails.address || '-' }}</span>
                 </div>
               </IonCol>
@@ -137,36 +137,29 @@ watch(
             <IonRow>
               <IonCol size="12" size-md="6">
                 <div class="detail-item">
-                  <span class="detail-label">Cidade</span>
-                  <span class="detail-value">{{ institutionDetails.city || '-' }}</span>
+                  <span class="detail-label">Número</span>
+                  <span class="detail-value">{{ '-' }}</span>
                 </div>
               </IonCol>
               <IonCol size="12" size-md="6">
                 <div class="detail-item">
-                  <span class="detail-label">Estado</span>
-                  <span class="detail-value">{{ institutionDetails.state || '-' }}</span>
+                  <span class="detail-label">Bairro</span>
+                  <span class="detail-value">{{ '-' }}</span>
                 </div>
               </IonCol>
             </IonRow>
-          </IonGrid>
-        </div>
 
-        <div class="detail-section">
-          <h2 class="section-title">
-            Informações do sistema
-          </h2>
-          <IonGrid>
             <IonRow>
               <IonCol size="12" size-md="6">
                 <div class="detail-item">
-                  <span class="detail-label">Data de criação</span>
-                  <span class="detail-value">{{ formatDate(institutionDetails.createdAt) }}</span>
+                  <span class="detail-label">Cidade</span>
+                  <span class="detail-value">{{ institutionDetails.city || '-' }}</span>
                 </div>
               </IonCol>
               <IonCol size="12" size-md="6">
                 <div class="detail-item">
-                  <span class="detail-label">Última atualização</span>
-                  <span class="detail-value">{{ formatDate(institutionDetails.updatedAt) }}</span>
+                  <span class="detail-label">Estado</span>
+                  <span class="detail-value">{{ institutionDetails.state || '-' }}</span>
                 </div>
               </IonCol>
             </IonRow>
diff --git a/src/modules/school-management/views/institution/RegisterInstitution.vue b/src/modules/school-management/views/institution/RegisterInstitution.vue
index 930c52e..a9f669e 100644
--- a/src/modules/school-management/views/institution/RegisterInstitution.vue
+++ b/src/modules/school-management/views/institution/RegisterInstitution.vue
@@ -1,158 +1,18 @@
-<template>
-  <IonPage>
-    <ContentLayout>
-      <div class="ion-padding">
-        <IonRow class="ion-align-items-center ion-margin-bottom">
-          <IonCol size="8">
-            <IonTitle class="ion-no-padding">
-              {{ isEditing ? 'Editar Instituição' : 'Nova Instituição' }}
-            </IonTitle>
-          </IonCol>
-          <IonCol size="4" class="ion-text-end">
-            <IonButton color="medium" fill="outline" class="ion-margin-end" @click="navigateBack">
-              Cancelar
-            </IonButton>
-            <IonButton type="submit" :disabled="isSubmitting" @click="saveForm">
-              Salvar
-            </IonButton>
-          </IonCol>
-        </IonRow>
-
-        <IonCard>
-          <IonCardContent>
-            <form @submit.prevent="saveForm">
-              <IonGrid>
-                <IonRow>
-                  <IonCol size="12" size-md="8">
-                    <IonItem>
-                      <IonLabel position="stacked">Nome <IonText color="danger">*</IonText></IonLabel>
-                      <IonInput
-                        v-model="values.name"
-                        type="text"
-                        placeholder="Nome da instituição"
-                        :maxlength="100"
-                        required
-                        @ion-change="validateName"
-                      ></IonInput>
-                      <IonNote v-if="errors.name" color="danger">{{ errors.name }}</IonNote>
-                    </IonItem>
-                  </IonCol>
-                </IonRow>
-
-                <IonRow>
-                  <IonCol size="12">
-                    <IonItem>
-                      <IonLabel position="stacked">Endereço</IonLabel>
-                      <IonInput
-                        v-model="values.address"
-                        type="text"
-                        placeholder="Endereço da instituição"
-                        :maxlength="255"
-                      ></IonInput>
-                    </IonItem>
-                  </IonCol>
-                </IonRow>
-
-                <IonRow>
-                  <IonCol size="12" size-md="6">
-                    <IonItem>
-                      <IonLabel position="stacked">Cidade</IonLabel>
-                      <IonInput
-                        v-model="values.city"
-                        type="text"
-                        placeholder="Cidade"
-                        :maxlength="100"
-                      ></IonInput>
-                    </IonItem>
-                  </IonCol>
-                  <IonCol size="12" size-md="2">
-                    <IonItem>
-                      <IonLabel position="stacked">Estado</IonLabel>
-                      <IonInput
-                        v-model="values.state"
-                        type="text"
-                        placeholder="UF"
-                        :maxlength="2"
-                      ></IonInput>
-                    </IonItem>
-                  </IonCol>
-                  <IonCol size="12" size-md="4">
-                    <IonItem>
-                      <IonLabel position="stacked">CEP</IonLabel>
-                      <IonInput
-                        v-model="values.postalCode"
-                        type="text"
-                        placeholder="CEP"
-                        :maxlength="10"
-                      ></IonInput>
-                    </IonItem>
-                  </IonCol>
-                </IonRow>
-
-                <IonRow>
-                  <IonCol size="12" size-md="6">
-                    <IonItem>
-                      <IonLabel position="stacked">Telefone</IonLabel>
-                      <IonInput
-                        v-model="values.phone"
-                        type="tel"
-                        placeholder="Telefone de contato"
-                        :maxlength="15"
-                      ></IonInput>
-                    </IonItem>
-                  </IonCol>
-                  <IonCol size="12" size-md="6">
-                    <IonItem>
-                      <IonLabel position="stacked">E-mail</IonLabel>
-                      <IonInput
-                        v-model="values.email"
-                        type="email"
-                        placeholder="E-mail de contato"
-                        :maxlength="255"
-                        @ion-change="validateEmail"
-                      ></IonInput>
-                      <IonNote v-if="errors.email" color="danger">{{ errors.email }}</IonNote>
-                    </IonItem>
-                  </IonCol>
-                </IonRow>
-              </IonGrid>
-            </form>
-          </IonCardContent>
-        </IonCard>
-
-        <IonRow class="ion-margin-top">
-          <IonCol class="ion-text-end">
-            <IonButton color="medium" fill="outline" class="ion-margin-end" @click="navigateBack">
-              Cancelar
-            </IonButton>
-            <IonButton type="submit" :disabled="isSubmitting" @click="saveForm">
-              Salvar
-            </IonButton>
-          </IonCol>
-        </IonRow>
-      </div>
-    </ContentLayout>
-  </IonPage>
-</template>
-
 <script setup lang="ts">
 import {
   IonButton,
-  IonCard,
-  IonCardContent,
   IonCol,
+  IonContent,
+  IonFooter,
   IonGrid,
-  IonInput,
-  IonItem,
-  IonLabel,
-  IonNote,
+  IonHeader,
   IonPage,
   IonRow,
-  IonText,
   IonTitle,
+  IonToolbar,
 } from '@ionic/vue'
-import ContentLayout from '@/components/theme/ContentLayout.vue'
-import { onMounted, ref, computed } from 'vue'
+import { ErrorMessage, Field, Form } from 'vee-validate'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import showToast from '@/utils/toast-alert'
 import InstitutionService from '../../services/InstitutionService'
@@ -162,8 +22,10 @@ const route = useRoute()
 const institutionService = new InstitutionService()
 const isSubmitting = ref(false)
 const isEditing = computed(() => !!route.params.id)
+const pageTitle = computed(() => isEditing.value ? 'Editar Instituição' : 'Nova Instituição')
 
-const values = ref({
+const initialFormValues = {
+  id: '',
   name: '',
   address: '',
   city: '',
@@ -171,12 +33,11 @@ const values = ref({
   postalCode: '',
   phone: '',
   email: ''
-})
+}
 
-const errors = ref({
-  name: '',
-  email: ''
-})
+const formValues = ref({ ...initialFormValues })
+
+const form = ref<any>(null)
 
 onMounted(async () => {
   if (isEditing.value) {
@@ -184,18 +45,58 @@ onMounted(async () => {
   }
 })
 
+async function buscarEndereco(cep: string) {
+  try {
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
+    const data = await response.json();
+    if (data.erro) {
+      throw new Error('CEP não encontrado');
+    }
+    return data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+// Watcher para o campo de CEP para autocompletar os campos de endereço
+watch(() => formValues.value.postalCode, async (novoCep) => {
+  if (!novoCep) return;
+  
+  const cepLimpo = String(novoCep).replace(/\D/g, '');
+  if (cepLimpo && cepLimpo.length === 8) {
+    const endereco = await buscarEndereco(cepLimpo);
+    if (endereco) {
+      // Atualiza os valores do formulário
+      formValues.value.address = endereco.logradouro || '';
+      formValues.value.city = endereco.localidade || '';
+      formValues.value.state = endereco.uf || '';
+      
+      // Atualiza os valores nos campos do formulário vee-validate
+      if (form.value) {
+        form.value.setFieldValue('address', endereco.logradouro || '');
+        form.value.setFieldValue('city', endereco.localidade || '');
+        form.value.setFieldValue('state', endereco.uf || '');
+      }
+    }
+  }
+})
+
 async function loadInstitution() {
   try {
     const id = route.params.id as string
     const institution = await institutionService.getInstitutionById(id)
     if (institution) {
-      values.value.name = institution.name || ''
-      values.value.address = institution.address || ''
-      values.value.city = institution.city || ''
-      values.value.state = institution.state || ''
-      values.value.postalCode = institution.postalCode || ''
-      values.value.phone = institution.phone || ''
-      values.value.email = institution.email || ''
+      formValues.value = {
+        id: institution.id || '',
+        name: institution.name || '',
+        address: institution.address || '',
+        city: institution.city || '',
+        state: institution.state || '',
+        postalCode: institution.postalCode || '',
+        phone: institution.phone || '',
+        email: institution.email || ''
+      }
     }
   } catch (error) {
     console.error('Erro ao carregar instituição:', error)
@@ -203,70 +104,47 @@ async function loadInstitution() {
   }
 }
 
-function validateName() {
-  if (!values.value.name.trim()) {
-    errors.value.name = 'Nome é obrigatório'
-    return false
-  }
-  errors.value.name = ''
-  return true
-}
-
-function validateEmail() {
-  if (!values.value.email) {
-    errors.value.email = ''
-    return true
-  }
-  
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  if (!emailRegex.test(values.value.email)) {
-    errors.value.email = 'E-mail inválido'
-    return false
-  }
-  
-  errors.value.email = ''
-  return true
-}
-
-function validateForm() {
-  const nameValid = validateName()
-  const emailValid = validateEmail()
-  return nameValid && emailValid
-}
-
-async function saveForm() {
-  if (!validateForm()) {
-    return
-  }
+const saveButtonEnabled = computed(() => {
+  // Habilita o botão se pelo menos o nome estiver preenchido
+  return !!formValues.value.name
+})
 
+async function handleSubmit(values: any) {
   isSubmitting.value = true
-
+  
   try {
-    const payload = {
+    const institutionData = {
       id: isEditing.value ? route.params.id as string : undefined,
-      name: values.value.name,
-      address: values.value.address,
-      city: values.value.city,
-      state: values.value.state,
-      postalCode: values.value.postalCode,
-      phone: values.value.phone,
-      email: values.value.email,
+      name: values.name.trim(),
+      address: values.address?.trim() || '',
+      city: values.city?.trim() || '',
+      state: values.state?.trim() || '',
+      postalCode: values.postalCode?.trim() || '', // Usando o nome padronizado postalCode
+      phone: values.phone?.trim() || '',
+      email: values.email?.trim() || '',
     }
 
-    const result = await institutionService.upsertInstitution(payload)
+    await institutionService.upsertInstitution(institutionData)
     
-    if (result) {
-      showToast(`Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso`, 'top', 'success')
-      navigateBack(true)
-    }
-  } catch (error: any) {
+    showToast(
+      `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso!`,
+      'top',
+      'success'
+    )
+    
+    navigateBack(true)
+  } catch (error) {
     console.error('Erro ao salvar instituição:', error)
-    showToast(error.message || 'Erro ao salvar instituição', 'top', 'danger')
+    showToast('Erro ao salvar instituição', 'top', 'danger')
   } finally {
     isSubmitting.value = false
   }
 }
 
+function resetForm() {
+  formValues.value = { ...initialFormValues }
+}
+
 function navigateBack(refresh = false) {
   if (refresh) {
     router.push({ name: 'DashboardInstitution', query: { refresh: 'true' } })
@@ -276,8 +154,324 @@ function navigateBack(refresh = false) {
 }
 </script>
 
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle class="page-title">
+          {{ pageTitle }}
+        </IonTitle>
+      </IonToolbar>
+      <div class="toolbar-accent" />
+    </IonHeader>
+
+    <IonContent :scroll-y="true" class="ion-padding content-with-footer">
+      <Form id="institution-form" ref="form" :key="formValues.id || 'new'" :initial-values="formValues" @submit="handleSubmit">
+        <IonGrid>
+          <div class="section-header">
+            <h2>Informações Básicas</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="name" label="Nome da instituição" rules="required|min:3|max:100">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.name"
+                    type="text"
+                    class="floating-native"
+                    maxlength="101"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Nome da instituição </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="name">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h2>Endereço</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+                <Field v-slot="{ field }" name="postalCode" label="CEP" rules="required|cep" >
+                  <div class="floating-input">
+                    <input 
+                      v-bind="field" 
+                      v-model="formValues.postalCode"
+                      v-imask="{ mask: '00000-000' }"
+                      type="text" 
+                      class="floating-native" 
+                      placeholder=" "
+                      @input="field.onInput"
+                    >
+                    <label class="floating-label"><span>CEP </span><span class="required-text">(Obrigatório)</span></label>
+                  </div>
+                  <ErrorMessage v-slot="{ message }" name="postalCode">
+                    <div class="error-message">
+                      {{ message }}
+                    </div>
+                  </ErrorMessage>
+                </Field>
+            </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="address" label="Endereço" rules="max:255">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.address"
+                    type="text"
+                    class="floating-native"
+                    maxlength="255"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Logradouro</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="address">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="city" label="Cidade" rules="max:100">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.city"
+                    type="text"
+                    class="floating-native"
+                    maxlength="100"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Cidade</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="city">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="state" label="Estado" rules="max:2">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.state"
+                    type="text"
+                    class="floating-native"
+                    maxlength="2"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>UF</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="state">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h2>Contato</h2>
+          </div>
+
+          <IonRow>
+            <IonCol size="12" size-md="6">
+                <Field v-slot="{ field }" name="phone" label="Telefone" rules="required|phone">
+                  <div class="floating-input">
+                    <input 
+                      v-bind="field" 
+                      v-model="formValues.phone"
+                      v-imask="{ mask: '(00) 00000-0000' }"
+                      type="tel" 
+                      class="floating-native" 
+                      placeholder=" "
+                      @input="field.onInput"
+                    >
+                    <label class="floating-label"><span>Telefone </span><span class="required-text">(Obrigatório)</span></label>
+                  </div>
+                  <ErrorMessage v-slot="{ message }" name="phone">
+                    <div class="error-message">
+                      {{ message }}
+                    </div>
+                  </ErrorMessage>
+                </Field>
+              </IonCol>
+            <IonCol size="12" size-md="6">
+              <Field v-slot="{ field }" name="email" label="E-mail" rules="email|max:255">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.email"
+                    type="email"
+                    class="floating-native"
+                    maxlength="255"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>E-mail</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="email">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </Form>
+    </IonContent>
+
+    <IonFooter>
+      <IonToolbar>
+        <IonGrid>
+          <IonRow class="action-buttons-fixed">
+            <IonCol size="6">
+              <IonButton color="danger" expand="block" @click="navigateBack">Cancelar</IonButton>
+            </IonCol>
+            <IonCol size="6">
+              <IonButton expand="block" type="submit" form="institution-form" :disabled="!saveButtonEnabled">Salvar</IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonToolbar>
+    </IonFooter>
+  </IonPage>
+</template>
+
 <style scoped>
-ion-item {
-  --padding-start: 0;
+.page-title {
+  font-weight: bold; 
+  color: var(--ion-color-secondary);
+}
+
+.section-header {
+  margin: 16px 0 8px 0;
+}
+
+.section-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ion-color-secondary);
+  margin: 0;
+  border-bottom: 1px solid var(--ion-color-medium-shade);
+  padding-bottom: 8px;
+}
+
+.floating-input {
+  position: relative;
+  margin-bottom: 16px;
+  border: 1px solid var(--ion-color-primary);
+  border-radius: 4px;
+  margin-top: 24px;
+  height: 56px;
+}
+
+.floating-native {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  font-size: 1rem;
+  color: var(--ion-color-dark-tint);
+  display: flex;
+  align-items: center;
+  transition: background-color 0.2s;
+}
+
+.floating-native:focus {
+  background-color: transparent;
+}
+
+.floating-input:focus-within {
+  border-color: var(--ion-color-secondary);
+  box-shadow: none;
+}
+
+.floating-label {
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+  background: white;
+  padding: 0 4px;
+  font-size: 1rem;
+  pointer-events: none;
+  transition: 0.2s ease all;
+  color: var(--ion-color-medium-shade);
+}
+
+.top-label {
+  top: 8px;
+  transform: translateY(0);
+}
+
+.floating-native::placeholder {
+  color: transparent;
+}
+
+.floating-native:focus ~ .floating-label,
+.floating-native:not(:placeholder-shown) ~ .floating-label {
+  top: -10px;
+  transform: translateY(0);
+  font-size: 0.75rem;
+  color: var(--ion-color-primary);
+  background: white;
+  padding: 0 4px;
+  z-index: 1;
+}
+
+.required-text {
+  color: var(--ion-color-danger);
+  font-size: 12px;
+}
+
+.error-message {
+  color: var(--ion-color-danger);
+  font-size: 0.8rem;
+  margin-top: 4px;
+  padding-left: 16px;
+}
+
+.select-input {
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.content-with-footer {
+  --padding-bottom: 100px;
+}
+
+.toolbar-accent {
+  height: 4px;
+  background: var(--ion-color-primary);
+}
+
+.action-buttons-fixed {
+  padding: 8px;
 }
 </style>
diff --git a/src/utils/imasks.ts b/src/utils/imasks.ts
index c54fae5..6b6b2bb 100644
--- a/src/utils/imasks.ts
+++ b/src/utils/imasks.ts
@@ -3,12 +3,22 @@ import IMask from 'imask'
 
 export default {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (el.tagName === 'INPUT') {
+      IMask(el, binding.value)
+      return
+    }
+
     const htmlInput = el.querySelector('input')
     if (htmlInput) {
       IMask(htmlInput, binding.value)
     }
   },
   updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (el.tagName === 'INPUT') {
+      IMask(el, binding.value)
+      return
+    }
+
     const htmlInput = el.querySelector('input')
     if (htmlInput) {
       IMask(htmlInput, binding.value)

From 7ad6ee679ecc9cd293ca9ac16832e01214a67595 Mon Sep 17 00:00:00 2001
From: jonLucas33 <joaolucaslopes296@gmail.com>
Date: Mon, 26 May 2025 12:38:09 -0300
Subject: [PATCH 3/4] Adjusuts to navigation from edit page to create page

---
 .../views/institution/RegisterInstitution.vue | 92 +++++++++++++++----
 1 file changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/modules/school-management/views/institution/RegisterInstitution.vue b/src/modules/school-management/views/institution/RegisterInstitution.vue
index a9f669e..f10f137 100644
--- a/src/modules/school-management/views/institution/RegisterInstitution.vue
+++ b/src/modules/school-management/views/institution/RegisterInstitution.vue
@@ -12,7 +12,7 @@ import {
   IonToolbar,
 } from '@ionic/vue'
 import { ErrorMessage, Field, Form } from 'vee-validate'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onActivated, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import showToast from '@/utils/toast-alert'
 import InstitutionService from '../../services/InstitutionService'
@@ -36,12 +36,36 @@ const initialFormValues = {
 }
 
 const formValues = ref({ ...initialFormValues })
+const originalFormValues = ref({ ...initialFormValues })
+const hasChanges = ref(false)
 
 const form = ref<any>(null)
 
+watch(
+  () => ({ ...formValues.value }),
+  () => {
+    if (isEditing.value) {
+      checkForChanges()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
 onMounted(async () => {
   if (isEditing.value) {
     await loadInstitution()
+  } else {
+    formValues.value = { ...initialFormValues }
+    originalFormValues.value = { ...initialFormValues }
+    hasChanges.value = false
+  }
+})
+
+onActivated(() => {
+  if (!isEditing.value) {
+    formValues.value = { ...initialFormValues }
+    originalFormValues.value = { ...initialFormValues }
+    hasChanges.value = false
   }
 })
 
@@ -59,20 +83,29 @@ async function buscarEndereco(cep: string) {
   }
 }
 
-// Watcher para o campo de CEP para autocompletar os campos de endereço
-watch(() => formValues.value.postalCode, async (novoCep) => {
+watch(() => formValues.value.postalCode, async (novoCep, antigoCep) => {
+  if (!novoCep || novoCep !== antigoCep) {
+    formValues.value.address = '';
+    formValues.value.city = '';
+    formValues.value.state = '';
+    
+    if (form.value) {
+      form.value.setFieldValue('address', '');
+      form.value.setFieldValue('city', '');
+      form.value.setFieldValue('state', '');
+    }
+  }
+  
   if (!novoCep) return;
   
   const cepLimpo = String(novoCep).replace(/\D/g, '');
   if (cepLimpo && cepLimpo.length === 8) {
     const endereco = await buscarEndereco(cepLimpo);
     if (endereco) {
-      // Atualiza os valores do formulário
       formValues.value.address = endereco.logradouro || '';
       formValues.value.city = endereco.localidade || '';
       formValues.value.state = endereco.uf || '';
       
-      // Atualiza os valores nos campos do formulário vee-validate
       if (form.value) {
         form.value.setFieldValue('address', endereco.logradouro || '');
         form.value.setFieldValue('city', endereco.localidade || '');
@@ -87,7 +120,7 @@ async function loadInstitution() {
     const id = route.params.id as string
     const institution = await institutionService.getInstitutionById(id)
     if (institution) {
-      formValues.value = {
+      const loadedValues = {
         id: institution.id || '',
         name: institution.name || '',
         address: institution.address || '',
@@ -97,6 +130,10 @@ async function loadInstitution() {
         phone: institution.phone || '',
         email: institution.email || ''
       }
+      
+      formValues.value = { ...loadedValues }
+      originalFormValues.value = { ...loadedValues }
+      hasChanges.value = false
     }
   } catch (error) {
     console.error('Erro ao carregar instituição:', error)
@@ -104,9 +141,32 @@ async function loadInstitution() {
   }
 }
 
+function checkForChanges() {
+  if (!isEditing.value) return
+
+  const hasNameChanged = formValues.value.name !== originalFormValues.value.name
+  const hasAddressChanged = formValues.value.address !== originalFormValues.value.address
+  const hasCityChanged = formValues.value.city !== originalFormValues.value.city
+  const hasStateChanged = formValues.value.state !== originalFormValues.value.state
+  const hasPostalCodeChanged = formValues.value.postalCode !== originalFormValues.value.postalCode
+  const hasPhoneChanged = formValues.value.phone !== originalFormValues.value.phone
+  const hasEmailChanged = formValues.value.email !== originalFormValues.value.email
+
+  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged || 
+                    hasStateChanged || hasPostalCodeChanged || hasPhoneChanged || 
+                    hasEmailChanged
+}
+
 const saveButtonEnabled = computed(() => {
-  // Habilita o botão se pelo menos o nome estiver preenchido
-  return !!formValues.value.name
+  if (!isEditing.value) {
+    const anyFieldFilled = !!formValues.value.name || !!formValues.value.address || 
+                         !!formValues.value.city || !!formValues.value.state || 
+                         !!formValues.value.postalCode || !!formValues.value.phone || 
+                         !!formValues.value.email
+    return anyFieldFilled
+  }
+  
+  return hasChanges.value
 })
 
 async function handleSubmit(values: any) {
@@ -119,7 +179,7 @@ async function handleSubmit(values: any) {
       address: values.address?.trim() || '',
       city: values.city?.trim() || '',
       state: values.state?.trim() || '',
-      postalCode: values.postalCode?.trim() || '', // Usando o nome padronizado postalCode
+      postalCode: values.postalCode?.trim() || '',
       phone: values.phone?.trim() || '',
       email: values.email?.trim() || '',
     }
@@ -132,7 +192,7 @@ async function handleSubmit(values: any) {
       'success'
     )
     
-    navigateBack(true)
+    resetForm()
   } catch (error) {
     console.error('Erro ao salvar instituição:', error)
     showToast('Erro ao salvar instituição', 'top', 'danger')
@@ -142,16 +202,10 @@ async function handleSubmit(values: any) {
 }
 
 function resetForm() {
-  formValues.value = { ...initialFormValues }
+  router.back()
 }
 
-function navigateBack(refresh = false) {
-  if (refresh) {
-    router.push({ name: 'DashboardInstitution', query: { refresh: 'true' } })
-  } else {
-    router.push({ name: 'DashboardInstitution' })
-  }
-}
+
 </script>
 
 <template>
@@ -347,7 +401,7 @@ function navigateBack(refresh = false) {
         <IonGrid>
           <IonRow class="action-buttons-fixed">
             <IonCol size="6">
-              <IonButton color="danger" expand="block" @click="navigateBack">Cancelar</IonButton>
+              <IonButton color="danger" expand="block" @click="resetForm">Cancelar</IonButton>
             </IonCol>
             <IonCol size="6">
               <IonButton expand="block" type="submit" form="institution-form" :disabled="!saveButtonEnabled">Salvar</IonButton>

From a92f407e8ebfab0bdcc7d7439859286184ffd5d6 Mon Sep 17 00:00:00 2001
From: jonLucas33 <joaolucaslopes296@gmail.com>
Date: Fri, 30 May 2025 01:07:35 -0300
Subject: [PATCH 4/4] Added mobile for institution

---
 .../institution/DashboardInstitution.vue      |  34 +-
 .../institution/InstitutionDetailView.vue     | 316 +++++----
 .../views/institution/RegisterInstitution.vue | 198 +++---
 .../institution/RegisterInstitutionMobile.vue | 667 ++++++++++++------
 4 files changed, 779 insertions(+), 436 deletions(-)

diff --git a/src/modules/school-management/views/institution/DashboardInstitution.vue b/src/modules/school-management/views/institution/DashboardInstitution.vue
index a4671fe..657fe05 100644
--- a/src/modules/school-management/views/institution/DashboardInstitution.vue
+++ b/src/modules/school-management/views/institution/DashboardInstitution.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { Institution } from '@prisma/client'
-import InstitutionDetailView from './InstitutionDetailView.vue'
-import ListWithActionInstitution from './ListWithActionInstitution.vue'
-import RegisterInstitutionMobile from './RegisterInstitutionMobile.vue'
 import ContentLayout from '@/components/theme/ContentLayout.vue'
 import showToast from '@/utils/toast-alert'
 import { IonButton, IonCard, IonCardHeader, IonCardTitle, IonCol, IonContent, IonIcon, IonModal, IonPage, IonRow, IonSearchbar, IonText } from '@ionic/vue'
-import { add, business } from 'ionicons/icons'
+import { add } from 'ionicons/icons'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import InstitutionService from '../../services/InstitutionService'
+import InstitutionDetailView from './InstitutionDetailView.vue'
+import ListWithActionInstitution from './ListWithActionInstitution.vue'
+import RegisterInstitutionMobile from './RegisterInstitutionMobile.vue'
 
 const router = useRouter()
 const route = router.currentRoute
@@ -61,8 +61,10 @@ const filteredDataList = computed(() => {
 
 function setModalAddInstitution(open: boolean) {
   if (open) {
-    delayModalOpen({ modal: isModalAddInstitution })
-  } else {
+    isModalAddInstitution.value = false
+    setTimeout(() => (isModalAddInstitution.value = true), 10)
+  }
+  else {
     isModalAddInstitution.value = open
   }
 }
@@ -80,7 +82,8 @@ function navigateToRegister() {
 function setSeeModal(open: boolean) {
   if (open) {
     delayModalOpen(seeModal.value)
-  } else {
+  }
+  else {
     seeModal.value.modal = open
   }
 }
@@ -88,7 +91,8 @@ function setSeeModal(open: boolean) {
 function setEditModal(open: boolean) {
   if (open) {
     delayModalOpen(editModal.value)
-  } else {
+  }
+  else {
     editModal.value.modal = open
     loadInstitutions()
   }
@@ -97,7 +101,8 @@ function setEditModal(open: boolean) {
 function setDeleteModal(open: boolean) {
   if (open) {
     delayModalOpen(deleteModal.value)
-  } else {
+  }
+  else {
     deleteModal.value.modal = open
   }
 }
@@ -130,12 +135,15 @@ async function handleDelete() {
       if (error.message) {
         if (error.message.includes('escolas vinculadas')) {
           showToast('Não é possível excluir: Existem escolas vinculadas a essa instituição', 'top', 'warning')
-        } else if (error.message.includes('cursos vinculados')) {
+        }
+        else if (error.message.includes('cursos vinculados')) {
           showToast('Não é possível excluir: Existem cursos vinculados a essa instituição', 'top', 'warning')
-        } else {
-          showToast('Erro ao excluir: ' + error.message, 'top', 'danger')
         }
-      } else {
+        else {
+          showToast(`Erro ao excluir: ${error.message}`, 'top', 'danger')
+        }
+      }
+      else {
         showToast('Erro desconhecido ao excluir instituição', 'top', 'danger')
       }
     }
diff --git a/src/modules/school-management/views/institution/InstitutionDetailView.vue b/src/modules/school-management/views/institution/InstitutionDetailView.vue
index 2b715f9..c8e5842 100644
--- a/src/modules/school-management/views/institution/InstitutionDetailView.vue
+++ b/src/modules/school-management/views/institution/InstitutionDetailView.vue
@@ -1,130 +1,45 @@
-<template>
-  <div class="ion-padding">
-    <IonHeader>
-      <IonToolbar>
-        <IonButtons slot="start">
-          <IonButton @click="emit('close')">
-            <IonIcon :icon="chevronBack" slot="icon-only"></IonIcon>
-          </IonButton>
-        </IonButtons>
-        <IonTitle>{{ name }}</IonTitle>
-        <IonButtons slot="end">
-          <IonButton @click="emit('edit')">
-            <IonIcon :icon="create" slot="icon-only"></IonIcon>
-          </IonButton>
-        </IonButtons>
-      </IonToolbar>
-    </IonHeader>
-
-    <IonCard class="ion-margin-top">
-      <IonCardHeader>
-        <IonCardTitle>Informações da Instituição</IonCardTitle>
-      </IonCardHeader>
-      <IonCardContent>
-        <IonList lines="none">
-          <IonItem>
-            <IonLabel>
-              <h2>Nome</h2>
-              <p>{{ items?.name || 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>Endereço</h2>
-              <p>{{ items?.address || 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>Cidade/Estado</h2>
-              <p>
-                {{ items?.city || 'Não informada' }}{{ items?.state ? `/${items.state}` : '' }}
-              </p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>CEP</h2>
-              <p>{{ items?.postalCode || 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>Telefone</h2>
-              <p>{{ items?.phone || 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>E-mail</h2>
-              <p>{{ items?.email || 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-        </IonList>
-      </IonCardContent>
-    </IonCard>
-
-    <IonCard>
-      <IonCardHeader>
-        <IonCardTitle>Dados de Sistema</IonCardTitle>
-      </IonCardHeader>
-      <IonCardContent>
-        <IonList lines="none">
-          <IonItem>
-            <IonLabel>
-              <h2>Criado em</h2>
-              <p>{{ items?.createdAt ? formatDate(items.createdAt) : 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-          
-          <IonItem>
-            <IonLabel>
-              <h2>Última atualização</h2>
-              <p>{{ items?.updatedAt ? formatDate(items.updatedAt) : 'Não informado' }}</p>
-            </IonLabel>
-          </IonItem>
-        </IonList>
-      </IonCardContent>
-    </IonCard>
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   IonButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle,
-  IonHeader,
+  IonCol,
+  IonContent,
+  IonGrid,
   IonIcon,
-  IonItem,
+  IonItemDivider,
   IonLabel,
   IonList,
-  IonTitle,
-  IonToolbar,
+  IonPage,
+  IonRow,
+  IonText,
 } from '@ionic/vue'
-import { chevronBack, create } from 'ionicons/icons'
+import {
+  businessOutline,
+  calendarOutline,
+  callOutline,
+  locationOutline,
+  mailOutline,
+  mapOutline,
+  timeOutline,
+} from 'ionicons/icons'
 
-const props = defineProps({
+interface Props {
   items: {
-    type: Object,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: 'Detalhes da Instituição',
-  },
-})
-
-const emit = defineEmits(['close', 'edit'])
+    id?: string
+    name: string
+    address?: string
+    city?: string
+    state?: string
+    postalCode?: string
+    phone?: string
+    email?: string
+    createdAt?: string
+    updatedAt?: string
+  }
+  name?: string
+}
 
+const props = defineProps<Props>()
+const emits = defineEmits(['close', 'edit'])
 function formatDate(dateString: string) {
   try {
     const date = new Date(dateString)
@@ -135,26 +50,171 @@ function formatDate(dateString: string) {
       hour: '2-digit',
       minute: '2-digit',
     })
-  } catch (error) {
+  }
+  catch (error) {
+    console.error('Erro ao formatar data:', error)
     return dateString || 'Data inválida'
   }
 }
 </script>
 
+<template>
+  <IonPage>
+    <IonContent class="ion-padding">
+      <!-- Título no mesmo estilo do formulário -->
+      <div class="style-purple-lane" style="display: flex; align-items: center;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px;" />
+        {{ props.name }}
+      </div>
+
+      <div class="institution-detail-content">
+        <!-- Informações gerais header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações gerais
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Nome da instituição -->
+          <div style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="businessOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.name || 'Não informado' }}
+            </IonText>
+          </div>
+
+          <!-- Endereço da instituição -->
+          <div v-if="props.items.address" style="display: flex; align-items: flex-start; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px; margin-top: 3px;" :icon="locationOutline" />
+            <IonText color="primary" style="font-size: 11pt;">
+              {{ props.items.address }}
+            </IonText>
+          </div>
+
+          <!-- Cidade e Estado -->
+          <div v-if="props.items.city || props.items.state" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mapOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.city || 'Não informada' }}{{ props.items.state ? ` - ${props.items.state}` : '' }}
+            </IonText>
+          </div>
+
+          <!-- CEP -->
+          <div v-if="props.items.postalCode" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mailOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              CEP: {{ props.items.postalCode }}
+            </IonText>
+          </div>
+        </IonList>
+
+        <!-- Informações de contato header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding ion-margin-top"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações de contato
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Telefone -->
+          <div v-if="props.items.phone" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="callOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.phone }}
+            </IonText>
+          </div>
+
+          <!-- E-mail -->
+          <div v-if="props.items.email" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="mailOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              {{ props.items.email }}
+            </IonText>
+          </div>
+        </IonList>
+
+        <!-- Informações do sistema header -->
+        <IonItemDivider
+          style="border-color: rgba(var(--ion-color-primary-rgb), 0.25);"
+          class="ion-no-padding ion-margin-top"
+        >
+          <IonLabel color="primary" class="ion-no-margin">
+            Informações do sistema
+          </IonLabel>
+        </IonItemDivider>
+
+        <IonList>
+          <!-- Data de criação -->
+          <div v-if="props.items.createdAt" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="calendarOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              Criado em: {{ formatDate(props.items.createdAt) }}
+            </IonText>
+          </div>
+
+          <!-- Data de atualização -->
+          <div v-if="props.items.updatedAt" style="display: flex; align-items: center; padding: 6px;">
+            <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="timeOutline" />
+            <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
+              Atualizado em: {{ formatDate(props.items.updatedAt) }}
+            </IonText>
+          </div>
+        </IonList>
+      </div>
+    </IonContent>
+
+    <div>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="6">
+            <IonButton :disabled="false" color="danger" expand="full" @click="emits('close', false)">
+              Fechar
+            </IonButton>
+          </IonCol>
+          <IonCol size="6">
+            <IonButton :disabled="false" color="secondary" expand="full" @click="emits('edit', true)">
+              Editar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </div>
+  </IonPage>
+</template>
+
 <style scoped>
-ion-item {
-  --padding-start: 0;
+.style-purple-lane {
+  background: rgba(var(--ion-color-secondary-rgb), 0.15);
+  color: var(--ion-color-secondary);
+  padding: 2px;
+  margin: 8px 2px;
+  border-radius: 4px;
+}
+
+.institution-detail-content {
+  padding: 16px 0;
+}
+
+.abbreviation-tag {
+  display: flex;
+  justify-content: flex-start;
+  margin: 10px 0;
 }
 
-ion-item h2 {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ion-color-medium);
+ion-chip {
+  --background: rgba(var(--ion-color-primary-rgb), 0.15);
+  --color: var(--ion-color-primary);
 }
 
-ion-item p {
-  font-size: 16px;
-  margin-top: 4px;
-  color: var(--ion-color-dark);
+.description-text {
+  white-space: pre-line;
+  line-height: 1.5;
 }
 </style>
diff --git a/src/modules/school-management/views/institution/RegisterInstitution.vue b/src/modules/school-management/views/institution/RegisterInstitution.vue
index f10f137..92b2acc 100644
--- a/src/modules/school-management/views/institution/RegisterInstitution.vue
+++ b/src/modules/school-management/views/institution/RegisterInstitution.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import showToast from '@/utils/toast-alert'
 import {
   IonButton,
   IonCol,
@@ -13,8 +14,7 @@ import {
 } from '@ionic/vue'
 import { ErrorMessage, Field, Form } from 'vee-validate'
 import { computed, onActivated, onMounted, ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import showToast from '@/utils/toast-alert'
+import { useRoute, useRouter } from 'vue-router'
 import InstitutionService from '../../services/InstitutionService'
 
 const router = useRouter()
@@ -32,7 +32,7 @@ const initialFormValues = {
   state: '',
   postalCode: '',
   phone: '',
-  email: ''
+  email: '',
 }
 
 const formValues = ref({ ...initialFormValues })
@@ -48,13 +48,14 @@ watch(
       checkForChanges()
     }
   },
-  { deep: true, immediate: true }
+  { deep: true, immediate: true },
 )
 
 onMounted(async () => {
   if (isEditing.value) {
     await loadInstitution()
-  } else {
+  }
+  else {
     formValues.value = { ...initialFormValues }
     originalFormValues.value = { ...initialFormValues }
     hasChanges.value = false
@@ -71,45 +72,47 @@ onActivated(() => {
 
 async function buscarEndereco(cep: string) {
   try {
-    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
-    const data = await response.json();
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
+    const data = await response.json()
     if (data.erro) {
-      throw new Error('CEP não encontrado');
+      throw new Error('CEP não encontrado')
     }
-    return data;
-  } catch (error) {
-    console.error(error);
-    return null;
+    return data
+  }
+  catch (error) {
+    console.error(error)
+    return null
   }
 }
 
 watch(() => formValues.value.postalCode, async (novoCep, antigoCep) => {
   if (!novoCep || novoCep !== antigoCep) {
-    formValues.value.address = '';
-    formValues.value.city = '';
-    formValues.value.state = '';
-    
+    formValues.value.address = ''
+    formValues.value.city = ''
+    formValues.value.state = ''
+
     if (form.value) {
-      form.value.setFieldValue('address', '');
-      form.value.setFieldValue('city', '');
-      form.value.setFieldValue('state', '');
+      form.value.setFieldValue('address', '')
+      form.value.setFieldValue('city', '')
+      form.value.setFieldValue('state', '')
     }
   }
-  
-  if (!novoCep) return;
-  
-  const cepLimpo = String(novoCep).replace(/\D/g, '');
+
+  if (!novoCep)
+    return
+
+  const cepLimpo = String(novoCep).replace(/\D/g, '')
   if (cepLimpo && cepLimpo.length === 8) {
-    const endereco = await buscarEndereco(cepLimpo);
+    const endereco = await buscarEndereco(cepLimpo)
     if (endereco) {
-      formValues.value.address = endereco.logradouro || '';
-      formValues.value.city = endereco.localidade || '';
-      formValues.value.state = endereco.uf || '';
-      
+      formValues.value.address = endereco.logradouro || ''
+      formValues.value.city = endereco.localidade || ''
+      formValues.value.state = endereco.uf || ''
+
       if (form.value) {
-        form.value.setFieldValue('address', endereco.logradouro || '');
-        form.value.setFieldValue('city', endereco.localidade || '');
-        form.value.setFieldValue('state', endereco.uf || '');
+        form.value.setFieldValue('address', endereco.logradouro || '')
+        form.value.setFieldValue('city', endereco.localidade || '')
+        form.value.setFieldValue('state', endereco.uf || '')
       }
     }
   }
@@ -128,21 +131,23 @@ async function loadInstitution() {
         state: institution.state || '',
         postalCode: institution.postalCode || '',
         phone: institution.phone || '',
-        email: institution.email || ''
+        email: institution.email || '',
       }
-      
+
       formValues.value = { ...loadedValues }
       originalFormValues.value = { ...loadedValues }
       hasChanges.value = false
     }
-  } catch (error) {
+  }
+  catch (error) {
     console.error('Erro ao carregar instituição:', error)
     showToast('Erro ao carregar instituição', 'top', 'danger')
   }
 }
 
 function checkForChanges() {
-  if (!isEditing.value) return
+  if (!isEditing.value)
+    return
 
   const hasNameChanged = formValues.value.name !== originalFormValues.value.name
   const hasAddressChanged = formValues.value.address !== originalFormValues.value.address
@@ -152,26 +157,26 @@ function checkForChanges() {
   const hasPhoneChanged = formValues.value.phone !== originalFormValues.value.phone
   const hasEmailChanged = formValues.value.email !== originalFormValues.value.email
 
-  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged || 
-                    hasStateChanged || hasPostalCodeChanged || hasPhoneChanged || 
-                    hasEmailChanged
+  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged
+    || hasStateChanged || hasPostalCodeChanged || hasPhoneChanged
+    || hasEmailChanged
 }
 
 const saveButtonEnabled = computed(() => {
   if (!isEditing.value) {
-    const anyFieldFilled = !!formValues.value.name || !!formValues.value.address || 
-                         !!formValues.value.city || !!formValues.value.state || 
-                         !!formValues.value.postalCode || !!formValues.value.phone || 
-                         !!formValues.value.email
+    const anyFieldFilled = !!formValues.value.name || !!formValues.value.address
+      || !!formValues.value.city || !!formValues.value.state
+      || !!formValues.value.postalCode || !!formValues.value.phone
+      || !!formValues.value.email
     return anyFieldFilled
   }
-  
+
   return hasChanges.value
 })
 
 async function handleSubmit(values: any) {
   isSubmitting.value = true
-  
+
   try {
     const institutionData = {
       id: isEditing.value ? route.params.id as string : undefined,
@@ -185,27 +190,30 @@ async function handleSubmit(values: any) {
     }
 
     await institutionService.upsertInstitution(institutionData)
-    
+
     showToast(
       `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso!`,
       'top',
-      'success'
+      'success',
     )
-    
+
     resetForm()
-  } catch (error) {
+  }
+  catch (error) {
     console.error('Erro ao salvar instituição:', error)
     showToast('Erro ao salvar instituição', 'top', 'danger')
-  } finally {
+  }
+  finally {
     isSubmitting.value = false
   }
 }
 
 function resetForm() {
-  router.back()
+  router.push({
+    name: 'DashboardInstitution',
+    query: { refresh: Date.now().toString() },
+  })
 }
-
-
 </script>
 
 <template>
@@ -256,25 +264,25 @@ function resetForm() {
 
           <IonRow>
             <IonCol size="12" size-md="6">
-                <Field v-slot="{ field }" name="postalCode" label="CEP" rules="required|cep" >
-                  <div class="floating-input">
-                    <input 
-                      v-bind="field" 
-                      v-model="formValues.postalCode"
-                      v-imask="{ mask: '00000-000' }"
-                      type="text" 
-                      class="floating-native" 
-                      placeholder=" "
-                      @input="field.onInput"
-                    >
-                    <label class="floating-label"><span>CEP </span><span class="required-text">(Obrigatório)</span></label>
+              <Field v-slot="{ field }" name="postalCode" label="CEP" rules="required|cep">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.postalCode"
+                    v-imask="{ mask: '00000-000' }"
+                    type="text"
+                    class="floating-native"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>CEP </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="postalCode">
+                  <div class="error-message">
+                    {{ message }}
                   </div>
-                  <ErrorMessage v-slot="{ message }" name="postalCode">
-                    <div class="error-message">
-                      {{ message }}
-                    </div>
-                  </ErrorMessage>
-                </Field>
+                </ErrorMessage>
+              </Field>
             </IonCol>
             <IonCol size="12" size-md="6">
               <Field v-slot="{ field }" name="address" label="Endereço" rules="max:255">
@@ -350,28 +358,28 @@ function resetForm() {
 
           <IonRow>
             <IonCol size="12" size-md="6">
-                <Field v-slot="{ field }" name="phone" label="Telefone" rules="required|phone">
-                  <div class="floating-input">
-                    <input 
-                      v-bind="field" 
-                      v-model="formValues.phone"
-                      v-imask="{ mask: '(00) 00000-0000' }"
-                      type="tel" 
-                      class="floating-native" 
-                      placeholder=" "
-                      @input="field.onInput"
-                    >
-                    <label class="floating-label"><span>Telefone </span><span class="required-text">(Obrigatório)</span></label>
+              <Field v-slot="{ field }" name="phone" label="Telefone" rules="required|phone">
+                <div class="floating-input">
+                  <input
+                    v-bind="field"
+                    v-model="formValues.phone"
+                    v-imask="{ mask: '(00) 00000-0000' }"
+                    type="tel"
+                    class="floating-native"
+                    placeholder=" "
+                    @input="field.onInput"
+                  >
+                  <label class="floating-label"><span>Telefone </span><span class="required-text">(Obrigatório)</span></label>
+                </div>
+                <ErrorMessage v-slot="{ message }" name="phone">
+                  <div class="error-message">
+                    {{ message }}
                   </div>
-                  <ErrorMessage v-slot="{ message }" name="phone">
-                    <div class="error-message">
-                      {{ message }}
-                    </div>
-                  </ErrorMessage>
-                </Field>
-              </IonCol>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
             <IonCol size="12" size-md="6">
-              <Field v-slot="{ field }" name="email" label="E-mail" rules="email|max:255">
+              <Field v-slot="{ field }" name="email" label="E-mail" rules="email|max:100">
                 <div class="floating-input">
                   <input
                     v-bind="field"
@@ -401,10 +409,14 @@ function resetForm() {
         <IonGrid>
           <IonRow class="action-buttons-fixed">
             <IonCol size="6">
-              <IonButton color="danger" expand="block" @click="resetForm">Cancelar</IonButton>
+              <IonButton color="danger" expand="block" @click="resetForm">
+                Cancelar
+              </IonButton>
             </IonCol>
             <IonCol size="6">
-              <IonButton expand="block" type="submit" form="institution-form" :disabled="!saveButtonEnabled">Salvar</IonButton>
+              <IonButton expand="block" type="submit" form="institution-form" :disabled="!saveButtonEnabled">
+                Salvar
+              </IonButton>
             </IonCol>
           </IonRow>
         </IonGrid>
@@ -415,7 +427,7 @@ function resetForm() {
 
 <style scoped>
 .page-title {
-  font-weight: bold; 
+  font-weight: bold;
   color: var(--ion-color-secondary);
 }
 
diff --git a/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
index 19dfa58..5843ddb 100644
--- a/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
+++ b/src/modules/school-management/views/institution/RegisterInstitutionMobile.vue
@@ -1,169 +1,134 @@
-<template>
-  <IonPage>
-    <IonHeader>
-      <IonToolbar>
-        <IonButtons slot="start">
-          <IonButton @click="cancelForm">
-            <IonIcon :icon="chevronBack" slot="icon-only"></IonIcon>
-          </IonButton>
-        </IonButtons>
-        <IonTitle>{{ isEditing ? 'Editar Instituição' : 'Nova Instituição' }}</IonTitle>
-        <IonButtons slot="end">
-          <IonButton @click="saveForm" :disabled="isSubmitting">
-            <IonIcon :icon="checkmark" slot="icon-only"></IonIcon>
-          </IonButton>
-        </IonButtons>
-      </IonToolbar>
-    </IonHeader>
-
-    <IonContent class="ion-padding">
-      <form @submit.prevent="saveForm">
-        <IonList>
-          <IonItem>
-            <IonLabel position="stacked">Nome <IonText color="danger">*</IonText></IonLabel>
-            <IonInput
-              v-model="values.name"
-              type="text"
-              placeholder="Nome da instituição"
-              :maxlength="100"
-              required
-              @ion-change="validateName"
-            ></IonInput>
-            <IonNote v-if="errors.name" color="danger">{{ errors.name }}</IonNote>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">Endereço</IonLabel>
-            <IonInput
-              v-model="values.address"
-              type="text"
-              placeholder="Endereço da instituição"
-              :maxlength="255"
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">Cidade</IonLabel>
-            <IonInput
-              v-model="values.city"
-              type="text"
-              placeholder="Cidade"
-              :maxlength="100"
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">Estado</IonLabel>
-            <IonInput
-              v-model="values.state"
-              type="text"
-              placeholder="UF"
-              :maxlength="2"
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">CEP</IonLabel>
-            <IonInput
-              v-model="values.postalCode"
-              type="text"
-              placeholder="CEP"
-              :maxlength="10"
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">Telefone</IonLabel>
-            <IonInput
-              v-model="values.phone"
-              type="tel"
-              placeholder="Telefone de contato"
-              :maxlength="15"
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position="stacked">E-mail</IonLabel>
-            <IonInput
-              v-model="values.email"
-              type="email"
-              placeholder="E-mail de contato"
-              :maxlength="255"
-              @ion-change="validateEmail"
-            ></IonInput>
-            <IonNote v-if="errors.email" color="danger">{{ errors.email }}</IonNote>
-          </IonItem>
-        </IonList>
-      </form>
-    </IonContent>
-
-    <IonFooter>
-      <IonToolbar>
-        <IonRow>
-          <IonCol>
-            <IonButton expand="block" color="medium" @click="cancelForm">Cancelar</IonButton>
-          </IonCol>
-          <IonCol>
-            <IonButton expand="block" @click="saveForm" :disabled="isSubmitting">Salvar</IonButton>
-          </IonCol>
-        </IonRow>
-      </IonToolbar>
-    </IonFooter>
-  </IonPage>
-</template>
-
 <script setup lang="ts">
 import {
   IonButton,
-  IonButtons,
   IonCol,
   IonContent,
-  IonFooter,
-  IonHeader,
+  IonGrid,
   IonIcon,
   IonInput,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonNote,
   IonPage,
   IonRow,
-  IonText,
-  IonTitle,
-  IonToolbar,
 } from '@ionic/vue'
-import { checkmark, chevronBack } from 'ionicons/icons'
-import { onMounted, ref, computed } from 'vue'
+import { businessOutline } from 'ionicons/icons'
+import { ErrorMessage, Field, Form } from 'vee-validate'
+import { computed, onMounted, ref, watch } from 'vue'
 import InstitutionService from '../../services/InstitutionService'
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: '',
-  }
-})
+const props = defineProps<{
+  editId?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'saved'): void
+  (e: 'cancel'): void
+  (e: 'error', message: string, color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'): void
+  (e: 'success', message: string, color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'): void
+}>()
 
-const emit = defineEmits(['saved', 'cancel', 'success', 'error'])
+const form = ref<any>(null)
 
 const institutionService = new InstitutionService()
-const isSubmitting = ref(false)
-const isEditing = computed(() => !!props.editId)
 
-const values = ref({
+const formValues = ref({
+  id: '',
   name: '',
   address: '',
   city: '',
   state: '',
   postalCode: '',
   phone: '',
-  email: ''
+  email: '',
 })
 
-const errors = ref({
+const originalFormValues = ref({
+  id: '',
   name: '',
-  email: ''
+  address: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  phone: '',
+  email: '',
 })
 
+const hasChanges = ref(false)
+const isEditing = computed(() => Boolean(props.editId))
+const modalTitle = computed(() => isEditing.value ? 'Editar instituição' : 'Nova instituição')
+
+const saveButtonEnabled = computed(() => {
+  if (!isEditing.value) {
+    const enabled = !!formValues.value.name || !!formValues.value.address
+      || !!formValues.value.city || !!formValues.value.state
+      || !!formValues.value.postalCode || !!formValues.value.phone
+      || !!formValues.value.email
+    return enabled
+  }
+
+  return hasChanges.value
+})
+
+function checkForChanges() {
+  if (!isEditing.value)
+    return
+
+  const hasNameChanged = formValues.value.name !== originalFormValues.value.name
+  const hasAddressChanged = formValues.value.address !== originalFormValues.value.address
+  const hasCityChanged = formValues.value.city !== originalFormValues.value.city
+  const hasStateChanged = formValues.value.state !== originalFormValues.value.state
+  const hasPostalCodeChanged = formValues.value.postalCode !== originalFormValues.value.postalCode
+  const hasPhoneChanged = formValues.value.phone !== originalFormValues.value.phone
+  const hasEmailChanged = formValues.value.email !== originalFormValues.value.email
+
+  hasChanges.value = hasNameChanged || hasAddressChanged || hasCityChanged
+    || hasStateChanged || hasPostalCodeChanged || hasPhoneChanged
+    || hasEmailChanged
+}
+
+// Observar mudanças em todos os campos do formulário
+watch(
+  () => ({ ...formValues.value }),
+  () => {
+    if (isEditing.value) {
+      checkForChanges()
+    }
+  },
+  { deep: true },
+)
+
+// Observar especificamente mudanças no CEP
+watch(() => formValues.value.postalCode, async (novoCep, antigoCep) => {
+  if (!novoCep || novoCep !== antigoCep) {
+    formValues.value.address = ''
+    formValues.value.city = ''
+    formValues.value.state = ''
+
+    if (form.value) {
+      form.value.setFieldValue('address', '')
+      form.value.setFieldValue('city', '')
+      form.value.setFieldValue('state', '')
+    }
+  }
+
+  if (!novoCep)
+    return
+
+  const cepLimpo = String(novoCep).replace(/\D/g, '')
+  if (cepLimpo && cepLimpo.length === 8) {
+    const endereco = await buscarEndereco(cepLimpo)
+    if (endereco) {
+      formValues.value.address = endereco.logradouro || ''
+      formValues.value.city = endereco.localidade || ''
+      formValues.value.state = endereco.uf || ''
+
+      if (form.value) {
+        form.value.setFieldValue('address', endereco.logradouro || '')
+        form.value.setFieldValue('city', endereco.localidade || '')
+        form.value.setFieldValue('state', endereco.uf || '')
+      }
+    }
+  }
+}, { immediate: true })
+
 onMounted(async () => {
   if (props.editId) {
     await loadInstitution()
@@ -172,93 +137,391 @@ onMounted(async () => {
 
 async function loadInstitution() {
   try {
-    const institution = await institutionService.getInstitutionById(props.editId)
+    const institution = await institutionService.getInstitutionById(props.editId!)
     if (institution) {
-      values.value.name = institution.name || ''
-      values.value.address = institution.address || ''
-      values.value.city = institution.city || ''
-      values.value.state = institution.state || ''
-      values.value.postalCode = institution.postalCode || ''
-      values.value.phone = institution.phone || ''
-      values.value.email = institution.email || ''
+      const loadedValues = {
+        id: institution.id || '',
+        name: institution.name || '',
+        address: institution.address || '',
+        city: institution.city || '',
+        state: institution.state || '',
+        postalCode: institution.postalCode || '',
+        phone: institution.phone || '',
+        email: institution.email || '',
+      }
+
+      formValues.value = { ...loadedValues }
+      originalFormValues.value = { ...loadedValues }
+      hasChanges.value = false
     }
-  } catch (error) {
+  }
+  catch (error) {
     console.error('Erro ao carregar instituição:', error)
-    emit('error', 'Erro ao carregar instituição', 'danger')
+    emits('error', 'Erro ao carregar instituição', 'danger')
   }
 }
 
-function validateName() {
-  if (!values.value.name.trim()) {
-    errors.value.name = 'Nome é obrigatório'
-    return false
-  }
-  errors.value.name = ''
-  return true
-}
+async function handleSubmit(values: any) {
+  try {
+    const institutionData = {
+      id: isEditing.value ? props.editId : undefined,
+      name: values.name.trim(),
+      address: values.address?.trim() || '',
+      city: values.city?.trim() || '',
+      state: values.state?.trim() || '',
+      postalCode: values.postalCode?.trim() || '',
+      phone: values.phone?.trim() || '',
+      email: values.email?.trim() || '',
+    }
+
+    await institutionService.upsertInstitution(institutionData)
 
-function validateEmail() {
-  if (!values.value.email) {
-    errors.value.email = ''
-    return true
+    emits('success', `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso!`, 'success')
+    handleSaved()
   }
-  
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  if (!emailRegex.test(values.value.email)) {
-    errors.value.email = 'E-mail inválido'
-    return false
+  catch (error) {
+    console.error('Erro ao salvar instituição:', error)
+    emits('error', 'Erro ao salvar instituição', 'danger')
   }
-  
-  errors.value.email = ''
-  return true
 }
 
-function validateForm() {
-  const nameValid = validateName()
-  const emailValid = validateEmail()
-  return nameValid && emailValid
+function handleCancel() {
+  emits('cancel')
 }
 
-async function saveForm() {
-  if (!validateForm()) {
-    return
-  }
-
-  isSubmitting.value = true
+function handleSaved() {
+  emits('saved')
+}
 
+async function buscarEndereco(cep: string) {
   try {
-    const payload = {
-      id: isEditing.value ? props.editId : undefined,
-      name: values.value.name,
-      address: values.value.address,
-      city: values.value.city,
-      state: values.value.state,
-      postalCode: values.value.postalCode,
-      phone: values.value.phone,
-      email: values.value.email,
+    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
+    const data = await response.json()
+    if (data.erro) {
+      throw new Error('CEP não encontrado')
     }
+    return data
+  }
+  catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+function formatCEP(event: any) {
+  let value = event.target.value.replace(/\D/g, '')
+  if (value.length > 5) {
+    value = `${value.substring(0, 5)}-${value.substring(5)}`
+  }
+  formValues.value.postalCode = value.substring(0, 9)
 
-    const result = await institutionService.upsertInstitution(payload)
-    
-    if (result) {
-      emit('success', `Instituição ${isEditing.value ? 'atualizada' : 'cadastrada'} com sucesso`, 'success')
-      emit('saved')
+  // Acionar busca de CEP quando completar 8 dígitos
+  const cepLimpo = value.replace(/\D/g, '')
+  if (cepLimpo.length === 8) {
+    preencherEnderecoPorCEP(cepLimpo)
+  }
+}
+
+async function preencherEnderecoPorCEP(cepLimpo: string) {
+  const endereco = await buscarEndereco(cepLimpo)
+  if (endereco) {
+    formValues.value.address = endereco.logradouro || ''
+    formValues.value.city = endereco.localidade || ''
+    formValues.value.state = endereco.uf || ''
+
+    if (form.value) {
+      form.value.setFieldValue('address', endereco.logradouro || '')
+      form.value.setFieldValue('city', endereco.localidade || '')
+      form.value.setFieldValue('state', endereco.uf || '')
     }
-  } catch (error: any) {
-    console.error('Erro ao salvar instituição:', error)
-    emit('error', error.message || 'Erro ao salvar instituição', 'danger')
-  } finally {
-    isSubmitting.value = false
   }
 }
 
-function cancelForm() {
-  emit('cancel')
+function formatPhone(event: any) {
+  let value = event.target.value.replace(/\D/g, '')
+  if (value.length > 2) {
+    value = `(${value.substring(0, 2)}) ${value.substring(2)}`
+  }
+  if (value.length > 10) {
+    value = `${value.substring(0, 10)}-${value.substring(10)}`
+  }
+  formValues.value.phone = value.substring(0, 16)
 }
 </script>
 
+<template>
+  <IonPage>
+    <IonContent class="ion-padding ion-no-padding">
+      <div class="style-purple-lane" style="display: flex; align-items: center;">
+        <IonIcon :icon="businessOutline" style="margin-right: 10px;" />
+        {{ modalTitle }}
+      </div>
+
+      <Form
+        id="institution-form-mobile"
+        ref="form"
+        :key="formValues.id || 'new'"
+        :initial-values="formValues"
+        @submit="handleSubmit"
+      >
+        <IonGrid>
+          <div class="section-header">
+            <h3>Informações Básicas</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="name" label="Nome da instituição" rules="required|min:3|max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.name"
+                  label="Nome da instituição"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o nome da instituição"
+                  class="custom-input"
+                  :maxlength="101"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="name">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h3>Endereço</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="postalCode" label="CEP" rules="required|cep">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.postalCode"
+                  label="CEP"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o CEP (00000-000)"
+                  class="custom-input"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="formatCEP"
+                />
+                <ErrorMessage v-slot="{ message }" name="postalCode">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field }" name="address" label="Logradouro" rules="max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.address"
+                  label="Logradouro"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o logradouro"
+                  class="custom-input"
+                  :maxlength="101"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="address">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12" size-md="8">
+              <Field v-slot="{ field }" name="city" label="Cidade" rules="max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.city"
+                  label="Cidade"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite a cidade"
+                  class="custom-input"
+                  :maxlength="101"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="city">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+
+            <IonCol size="12" size-md="4">
+              <Field v-slot="{ field }" name="state" label="Estado" rules="max:2">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.state"
+                  label="Estado"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="UF"
+                  class="custom-input"
+                  :maxlength="2"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="state">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <div class="section-header">
+            <h3>Contato</h3>
+          </div>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="phone" label="Telefone" rules="required|phone">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.phone"
+                  label="Telefone"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o telefone (00) 00000-0000"
+                  class="custom-input"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="formatPhone"
+                />
+                <ErrorMessage v-slot="{ message }" name="phone">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <Field v-slot="{ field, errors }" name="email" label="E-mail" rules="email|max:100">
+                <IonInput
+                  v-bind="field"
+                  v-model="formValues.email"
+                  label="E-mail"
+                  label-placement="stacked"
+                  fill="outline"
+                  placeholder="Digite o e-mail"
+                  class="custom-input"
+                  :maxlength="25"
+                  :class="{ 'has-error': errors.length > 0 }"
+                  @ion-input="field.onInput"
+                />
+                <ErrorMessage v-slot="{ message }" name="email">
+                  <div class="error-message">
+                    {{ message }}
+                  </div>
+                </ErrorMessage>
+              </Field>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </Form>
+    </IonContent>
+
+    <div>
+      <IonGrid>
+        <IonRow>
+          <IonCol size="6">
+            <IonButton color="danger" expand="block" @click="handleCancel()">
+              Cancelar
+            </IonButton>
+          </IonCol>
+          <IonCol size="6">
+            <IonButton expand="block" type="submit" form="institution-form-mobile" :disabled="!saveButtonEnabled">
+              Salvar
+            </IonButton>
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </div>
+  </IonPage>
+</template>
+
 <style scoped>
-ion-item {
-  --padding-start: 0;
+.style-purple-lane {
+  background: rgba(var(--ion-color-secondary-rgb), 0.15);
+  color: var(--ion-color-secondary);
+  padding: 2px;
+  margin: 8px 2px;
+  border-radius: 4px;
+}
+
+.section-header {
+  padding: 4px 0;
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+.section-header h3 {
+  color: var(--ion-color-primary);
+  margin: 4px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.custom-input {
+  margin-bottom: 15px;
+}
+
+.has-error {
+  --border-color: var(--ion-color-danger) !important;
+}
+
+.error-message {
+  color: var(--ion-color-danger);
+  font-size: 12px;
+  margin-top: -12px;
+  margin-bottom: 10px;
+  padding-left: 16px;
+}
+
+ion-content {
+  --padding-bottom: 80px;
+}
+
+.fixed-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
+  z-index: 999;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-grid {
+  padding: 0;
+  margin: 0;
+}
+
+.footer-button {
+  margin: 0;
+  --border-radius: 0;
+  height: 50px;
 }
 </style>