create style for badge 3party and introduce in ThirdPartyRenderBox.vue

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss

@@ -0,0 +1,16 @@
+@import 'ChillMainAssets/module/bootstrap/shared';
+
+.badge {
+    &.bg-thirdparty-company {
+        //@extend .bg-info;
+        background-color: $yellow;
+    }
+    &.bg-thirdparty-child {
+        //@extend .bg-chill-blue;
+        background-color: $chill-blue;
+    }
+    &.bg-thirdparty-contact {
+        //@extedn .bg-secondary;
+        background-color: $secondary;
+    }
+}

src/Bundle/ChillThirdPartyBundle/Resources/public/chill/index.js

@@ -0,0 +1 @@
+require('./chillthirdparty.scss');

src/Bundle/ChillThirdPartyBundle/Resources/public/page/index/index.js

@@ -1,2 +1,2 @@
-require('./chillthirdparty.scss');
+require('./index_3party.scss');
 

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -13,6 +13,16 @@
                     </a>
                     <span class="name">{{ thirdparty.text }}</span>
 
+                    <span class="badge bg-thirdparty-child" v-if="thirdparty.kind == 'child'">
+                        {{ $t('thirdparty.child')}}
+                    </span>
+                    <span class="badge bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
+                       {{ $t('thirdparty.company')}}
+                    </span>
+                    <span class="badge bg-thirdparty-contact" v-else="thirdparty.kind == 'contact'">
+                        {{ $t('thirdparty.contact')}}
+                    </span>
+
                     <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
                     <span v-if="options.addEntity ==  true && thirdparty.type === 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
 
@@ -57,11 +67,23 @@
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
+const i18n = {
+    messages: {
+        fr: {
+            tparty: {
+                contact: "Personne physique",
+                company: "Personne morale"
+            }
+        }
+    }
+};
+
 export default {
     name: "ThirdPartyRenderBox",
     components: {
         AddressRenderBox
     },
+    i18n,
     props: ['thirdparty', 'options'],
     computed: {
         isMultiline: function() {

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -24,13 +24,17 @@
            <div class="form-check">
                <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
                <label for="tpartyKindInstitution" class="required">
-                   {{ $t('tparty.company')}}
+                   <span class="badge bg-thirdparty-company">
+                       {{ $t('tparty.company')}}
+                   </span>
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
                <label for="tpartyKindContact" class="required">
-                   {{ $t('tparty.contact')}}
+                   <span class="badge bg-thirdparty-contact">
+                       {{ $t('tparty.contact')}}
+                   </span>
                </label>
            </div>
        </div>