[WIP] Добавил wrapper на формы страницы медкаточек

src/pages/medcards/TheMedcards.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .medcards-wrapper.flex.flex-col
+  .medcards-wrapper.flex.flex-col.w-full
     table-patients
     medical-card-search
 </template>

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Пациент на приеме", title-link="Медкарта")
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "CurrentPatientForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Пациенты на сегодня", :quantity="13", title-link="Календарь")
+    .flex gwiefujm
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "TodaysPatientsForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Недавно просмотренные медкарты")
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "ViewedMedicalRecordsForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/medcards/components/MedcardFormWrapper.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+  .form-wrapper.flex.flex-col.w-full.rounded
+    .header.flex.items-center.text-sm.font-bold.justify-between.w-full.px-6.py-5
+      .left-side.flex.gap-x-2.items-center
+        span {{title}}
+        .grey-color(v-if="quantity") {{quantity}}
+      .link.flex.items-center.cursor-pointer(v-if="titleLink", @click="link")
+        span.font-medium {{ titleLink }}
+    slot
+</template>
+
+<script>
+export default {
+  name: "MedcardFormWrapper",
+  props: {
+    title: String,
+    titleLink: String,
+    link: Function,
+    quantity: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrapper
+  height: 360px
+  background: var(--default-white)
+  color: var(--font-dark-blue-color)
+
+.header
+  max-height: 62px
+  border-bottom: 1px solid var(--gray-scondary)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.link
+  color: var(--btn-blue-color)
+  &:hover
+    opacity: 0.7
+</style>

src/pages/medcards/components/TablePatients.vue

@@ -1,9 +1,23 @@
 <template lang="pug">
-  .table-wrapper.flex
+  .table-wrapper.flex.gap-x-2    
+    todays-patients-form
+    current-patient-form
+    viewed-medical-records-form
 </template>
 
 <script>
+import CurrentPatientForm from "./BasicDataForms/CurrentPatientForm.vue";
+import TodaysPatientsForm from "./BasicDataForms/TodaysPatientsForm.vue";
+import ViewedMedicalRecordsForm from "./BasicDataForms/ViewedMedicalRecordsForm.vue";
+
 export default {
   name: "TablePatients",
+  components: {
+    TodaysPatientsForm,
+    CurrentPatientForm,
+    ViewedMedicalRecordsForm,
+  },
 };
 </script>
+
+<style lang="sass" scoped></style>