How to access user's first_name and last_name from customer's created_by_id in a custom Shopware 6 plugin?

I'm developing a custom plugin for Shopware 6 and I'm extending the sw-customer-base-info component. I need to display the first name and last name of the user who created a customer.

In the database, the customer table has a created_by_id field. This ID corresponds to a record in the user table, which contains the first_name and last_name fields I need.

Here's a simplified version of my current index.js:

import template from './sw-customer-base-info.html.twig';
const { Criteria } = Shopware.Data;

Shopware.Component.override('sw-customer-base-info', {
    inject: ['repositoryFactory'],
    template,
    
    computed: {
        userRepository() {
            return this.repositoryFactory.create('user');
        }
    },
    
    created() {
       
    }
});

How can I modify this code to:

1. Fetch the created_by_id from the current customer
2. Use this ID to get the corresponding user's first_name and last_name
3. Make this data available in my component's template

I'm new to Shopware 6 and its data handling, so a detailed explanation would be greatly appreciated.

Create a new file called sw-customer-base-info.html.twig in the <plugin root>/Resources/app/administration/src/module/extensions/sw-customer/component/sw-customer-base-info/ directory.

File contents sw-customer-base-info.html.twig:

{% block sw_customer_base_metadata_campaign %}
    {% parent %}

    {% block sw_customer_base_info_metadata_created_by_user %}
        <template v-if="customer.createdById && createdByUser">
            <sw-description-list>
                <dt class="sw-customer-base-info__label">
                    {{ $tc('sw-customer.baseInfo.labelCreatedByAdmin') }}
                </dt>

                <dd>
                    {{ createdByUser.firstName }} {{ createdByUser.lastName }}
                </dd>
            </sw-description-list>
        </template>
    {% endblock %}
{% endblock %}

If you need to refer to the user who created the customer, here's a snippet of code:

<router-link
        :to="{ name: 'sw.users.permissions.user.detail', params: { id: customer.createdById } }">
    {{ createdByUser.firstName }} {{ createdByUser.lastName }}
</router-link>

Create an index.js file in the same directory to override the sw-customer-base-info component.

File contents index.js:

import template from './sw-customer-base-info.html.twig';

const { Component, Context } = Shopware;

Component.override('sw-customer-base-info', {
    template,

    inject: ['repositoryFactory'],

    data() {
        return {
            createdByUser: null,
        };
    },

    computed: {
        userRepository() {
            return this.repositoryFactory.create('user');
        },
    },

    created() {
        this.loadUser();
    },

    methods: {
        async loadUser() {
            if (this.customer && this.customer.createdById) {
                this.createdByUser = await this.userRepository.get(this.customer.createdById, Context.api);
            }
        },
    },
});

Create a snippet folder in the <plugin root>/Resources/app/administration/src/module/extensions/sw-customer/ directory, then create the en-GB.json and de-DE.json files inside it.

File contents en-GB.json:

{
  "sw-customer": {
    "baseInfo": {
      "labelCreatedByAdmin": "Created by admin"
    }
  }
}

File contents de-DE.json:

{
  "sw-customer": {
    "baseInfo": {
      "labelCreatedByAdmin": "Erstellt von admin"
    }
  }
}

Create a main.js file inside administration/src folder.

File contents main.js:

import './module/extensions/sw-customer/component/sw-customer-base-info';

The result is shown in the screenshot below: