style: corrige cor padrao de input e adiciona padrao suface

src/components/defaults/DefaultInput.vue

@@ -13,9 +13,9 @@
         :error-message="errorMessage"
         :rules
         :outlined
+        :bg-color
         :class="inputClass"
         :input-class="nativeInputClass"
-        :bg-color="bgColor"
         @update:model-value="error = null"
       >
         <template v-for="(_, slotName) in $slots" #[slotName]>
@@ -68,7 +68,7 @@ const { label, nativeInputClass, inputClass, rules, icon, bgColor, outlined } =
     },
     bgColor: {
       type: String,
-      default: "suface",
+      default: "white",
     },
     outlined: {
       type: Boolean,

src/components/shared/PartnerCardComponent.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="partner-card column items-center q-pa-md">
+    <div class="partner-avatar flex flex-center q-mb-md">
+      <img
+        v-if="partner.avatarUrl"
+        :src="partner.avatarUrl"
+        class="avatar-img"
+      />
+      <span v-else class="avatar-initials text-white text-weight-bold">
+        {{ initials }}
+      </span>
+    </div>
+
+    <div class="full-width column q-gutter-sm">
+      <DefaultInput
+        :model-value="partner.social_name"
+        label="Nome social"
+        outlined
+        disable
+        bg-color="suface"
+      />
+
+      <DefaultInput
+        :model-value="partner.role"
+        label="Função"
+        outlined
+        disable
+        bg-color="suface"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import DefaultInput from "../defaults/DefaultInput.vue";
+
+const { partner } = defineProps({
+  partner: {
+    type: Object,
+    default: () => ({
+      social_name: null,
+      role: null,
+      avatarUrl: null,
+      color: "#ff8340",
+    }),
+  },
+});
+
+const initials = computed(() => {
+  if (!partner.social_name) return "";
+  return partner.social_name
+    .split(" ")
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase())
+    .join("");
+});
+</script>
+
+<style scoped>
+.partner-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+}
+
+.partner-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: v-bind("partner.color || '#ff8340'");
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-initials {
+  font-size: 28px;
+}
+</style>

src/css/app.scss

@@ -104,9 +104,7 @@ input[type="number"]::-webkit-outer-spin-button {
   }
 }
 
-.q-field__control {
-  background: #fff !important;
-}
+
 
 
 .q-field--standout.q-field--rounded .q-field__control {

src/pages/unit/tabs/PartnersTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md">
     <template v-if="view === 'list'">
-      <div class="row justify-end">
+      <div class="row justify-end q-mb-md">
         <q-btn
           icon="add"
           color="primary"
@@ -9,6 +9,12 @@
           @click="view = 'form'"
         />
       </div>
+
+      <div class="row q-col-gutter-md">
+        <div v-for="(partner, index) in partners" :key="index" class="col-3">
+          <PartnerCardComponent :partner />
+        </div>
+      </div>
     </template>
 
     <template v-else>
@@ -137,10 +143,15 @@
 import { ref } from "vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import AvatarImageComponent from "src/components/shared/AvatarImageComponent.vue";
+import PartnerCardComponent from "src/components/shared/PartnerCardComponent.vue";
 import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
 
 const view = ref("list");
 
+const partners = ref([
+  { social_name: null, role: null, avatarUrl: null, color: "#ff8340" },
+]);
+
 const { form } = useFormUpdateTracker({
   full_name: null,
   social_name: null,