@fleetbase/registry-bridge-engine 0.0.1

package/addon/styles/registry-bridge-engine.css

@@ -0,0 +1,142 @@
+.developer-extensions-index-container {
+    margin: auto;
+    padding: 2rem 2.25rem;
+}
+
+.flb--modal.flb--default-modal > .flb--modal-dialog > .flb--modal-content > .flb--modal-header,
+.flb--modal.flb--default-modal > .flb--modal-dialog > .flb--modal-content > .flb--modal-header.flb--extension-modal-header {
+    align-items: start;
+    padding-bottom: 0;
+}
+
+.modal-title--extension-icon-wrapper {
+    width: 5rem;
+    height: 5rem;
+    margin-right: 0.75rem;
+}
+
+.flb--extension-tag {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.375rem 1rem;
+    border-radius: 0.5rem;
+}
+
+.flb--modal.flb--extension-modal > .flb--modal-dialog > .flb--modal-content > .flb--modal-body > .modal-body-container {
+    padding-top: 0;
+}
+
+.flb--extension-screenshots-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.flb--extension-screenshot {
+    width: 150px;
+    height: 85px;
+    border: 3px #fff solid;
+    border-radius: 0.5rem;
+    margin-right: 1rem;
+}
+
+body[data-theme='dark'] .flb--extension-screenshot {
+    border: 3px #202a37 solid;
+}
+
+.flb--extension-screenshot-lightbox {
+    position: absolute;
+    z-index: 999999;
+    inset: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(0 0 0 / 45%);
+}
+
+.flb--extension-screenshot-lightbox > .flb--extension-screenshot {
+    width: 600px;
+    height: 350px;
+    box-shadow:
+        0 10px 15px -3px rgb(0 0 0 / 10%),
+        0 4px 6px -4px rgb(0 0 0 / 10%);
+}
+
+body[data-theme='dark'] .flb--modal.flb--default-modal.finalize-extension-purchase,
+body[data-theme='light'] .flb--modal.flb--default-modal.finalize-extension-purchase,
+.flb--modal.flb--default-modal.finalize-extension-purchase {
+    pointer-events: none !important;
+}
+
+.flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close,
+body[data-theme='dark'] .flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close,
+body[data-theme='light'] .flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close {
+    display: none !important;
+    pointer-events: none;
+}
+
+.flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content,
+body[data-theme='dark'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content,
+body[data-theme='light'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content {
+    background-color: #fff;
+}
+
+.flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header,
+body[data-theme='dark'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header,
+body[data-theme='light'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header {
+    display: none !important;
+}
+
+.extension-card-container {
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 5%);
+    width: 11rem;
+}
+
+body[data-theme='dark'] .extension-card-container {
+    border-color: #4b5563;
+}
+
+.extension-card-container > .extension-card-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem 0.5rem 0 0;
+    width: 100%;
+    height: 9rem;
+}
+
+.extension-card-container > .extension-card-icon-container > img {
+    width: 100%;
+    height: 9rem;
+    object-fit: cover;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.extension-card-container > .extension-card-body-container {
+    text-align: left;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+    background-color: white;
+    border-top: 1px solid #e5e7eb;
+    min-height: 5.5rem;
+}
+
+body[data-theme='dark'] .extension-card-container > .extension-card-body-container {
+    border-top-color: #4b5563;
+    background-color: #111827;
+}
+
+.extension-card-grid-container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    margin-left: -2rem;
+}
+
+.extension-card-grid-container > * {
+    margin-left: 2rem;
+    margin-bottom: 2rem;
+}

package/addon/templates/application.hbs

@@ -0,0 +1,26 @@
+<EmberWormhole @to="sidebar-menu-items">
+    <Layout::Sidebar::Item @route="console.extensions.installed" @icon="inbox">Installed</Layout::Sidebar::Item>
+    <Layout::Sidebar::Item @route="console.extensions.purchased" @icon="bag-shopping">Purchased</Layout::Sidebar::Item>
+    <Layout::Sidebar::Panel @open={{true}} @title="Explore">
+        <Layout::Sidebar::Item @route="console.extensions.explore.index" @icon="shapes">Explore All</Layout::Sidebar::Item>
+        {{#each this.categories as |category|}}
+            <LinkTo @route="explore.category" @model={{category}} class="next-nav-item">
+                <div class="next-nav-item-icon-container">
+                    <FaIcon @icon={{category.icon}} @size="sm" />
+                </div>
+                <div class="truncate w-10/12">{{category.name}}</div>
+                <div class="next-nav-item-right-side"></div>
+            </LinkTo>
+        {{/each}}
+    </Layout::Sidebar::Panel>
+    <Layout::Sidebar::Panel @open={{true}} @title="Developers">
+        <Layout::Sidebar::Item @route="console.extensions.developers.extensions" @icon="box-archive">Extensions</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.extensions.developers.analytics" @icon="chart-simple">Analytics</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.extensions.developers.payments" @icon="cash-register">Payments</Layout::Sidebar::Item>
+    </Layout::Sidebar::Panel>
+    <Spacer @height="200px" />
+</EmberWormhole>
+
+<Layout::Section::Container>
+    {{outlet}}
+</Layout::Section::Container>

package/addon/templates/developers/analytics.hbs

@@ -0,0 +1,83 @@
+<Layout::Section::Header @title="Analytics">
+    <DropdownButton
+        class="h-8"
+        @text={{if this.selectedExtension this.selectedExtension.name "Select Extension"}}
+        @textClass="text-sm mr-2"
+        @buttonClass="flex-row-reverse w-44 justify-between"
+        @icon="caret-down"
+        @iconClass="mr-0i"
+        @size="xs"
+        @iconPrefix="fas"
+        @triggerClass="hidden md:flex"
+        as |dd|
+    >
+        <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+            <div class="p-1">
+                {{#each @model as |extension|}}
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.selectExtension extension)}}>
+                        <div class="flex-1 flex flex-row items-center">
+                            <div class="w-6">
+                                <FaIcon @icon="box-archive" />
+                            </div>
+                            <span>{{extension.name}}</span>
+                        </div>
+                        <div>
+                            {{#if (eq this.selectedExtension.id extension.id)}}
+                                <FaIcon @icon="check" class="text-green-500" />
+                            {{/if}}
+                        </div>
+                    </a>
+                {{/each}}
+            </div>
+        </div>
+    </DropdownButton>
+</Layout::Section::Header>
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container">
+        <div class="max-w-3xl mx-auto mt-4">
+            <div class="content">
+                <div class="h-10">
+                    {{#if this.getExtensionAnalytics.isRunning}}
+                        <div class="flex items-center justify-center">
+                            <Spinner
+                                @loadingMessage={{concat "Loading analytical metrics for " this.selectedExtension.name}}
+                                @loadingMessageClass="ml-2 text-black dark:text-white"
+                                @wrapperClass="flex flex-row items-center"
+                            />
+                        </div>
+                    {{/if}}
+                </div>
+                {{#if this.selectedExtension}}
+                    <ExtensionModalTitle @extension={{this.selectedExtension}} class="mb-6" />
+                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                        {{#each-in this.metrics as |key value|}}
+                            <StatWidget @title={{humanize key}} @value={{value}} />
+                        {{/each-in}}
+                    </div>
+                {{else}}
+                    <div class="flex items-center justify-center flex-col mb-12">
+                        <h1 class="text-black dark:text-white text-lg font-semibold mb-2">Extension Analytics Viewer</h1>
+                        <p class="text-gray-600 dark:text-gray-400">Please select an extension from the list to load and display its associated analytics. Once selected, detailed performance metrics and data
+                            insights will be rendered here.</p>
+                    </div>
+                    <div class="extension-card-grid-container">
+                        {{#each @model as |extension|}}
+                            <button type="button" class="extension-card-container hover:opacity-50" {{on "click" (fn this.selectExtension extension)}}>
+                                <div class="extension-card-icon-container">
+                                    <Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+                                </div>
+                                <div class="extension-card-body-container">
+                                    <div class="flex flex-col">
+                                        <div class="font-semibold text-sm block">{{extension.name}}</div>
+                                        <div class="text-xs truncate">{{n-a extension.description}}</div>
+                                    </div>
+                                </div>
+                            </button>
+                        {{/each}}
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</Layout::Section::Body>

package/addon/templates/developers/credentials.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/developers/extensions/edit/bundles.hbs

@@ -0,0 +1,71 @@
+<div class="flex-1">
+    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.bundles"}} @open={{true}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <div class="px-4 pb-4 pt-2">
+            <div>
+                <FileUpload
+                    @name={{t "registry-bridge.developers.extensions.extension-form.upload-new-bundle"}}
+                    @accept={{join "," this.acceptedBundleTypes}}
+                    @onFileAdded={{perform this.uploadBundle}}
+                    as |queue|
+                >
+                    <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{not queue.files.length}}>
+                        {{#if queue.files.length}}
+                            <div class="mr-1.5">
+                                <Spinner />
+                            </div>
+                            <span>
+                                {{t "common.uploading"}}
+                            </span>
+                        {{else}}
+                            <FaIcon @icon="box-archive" class="mr-1.5" />
+                            <span>
+                                {{t "registry-bridge.developers.extensions.extension-form.upload-new-bundle"}}
+                            </span>
+                        {{/if}}
+                    </a>
+                </FileUpload>
+            </div>
+            {{#unless this.createBundle.isIdle}}
+                <div class="flex flex-row items-center mt-4">
+                    <Spinner @wrapperClass="flex flex-row items-center space-x-2" @loadingMessage="Creating a new bundle..." />
+                </div>
+            {{/unless}}
+            {{#if this.lastError}}
+                <div class="flex flex-row items-center mt-4 rounded-lg shadow-sm bg-red-100 border-red-200 text-red-900 px-4 py-2 text-xs">
+                    <FaIcon @icon="triangle-exclamation" @size="sm" class="text-red-800" />
+                    <span class="ml-2">{{this.lastError}}</span>
+                </div>
+            {{/if}}
+        </div>
+        {{#if @model.length}}
+            <div class="next-table-wrapper auto-height">
+                <table>
+                    <thead>
+                        <tr>
+                            <th {{set-width "175px"}}>ID</th>
+                            <th {{set-width "145px"}}>Filename</th>
+                            <th {{set-width "80px"}}>Bundle</th>
+                            <th {{set-width "80px"}}>Version</th>
+                            <th {{set-width "165px"}}>Date Uploaded</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#each @model as |bundle|}}
+                            <tr>
+                                <td>{{bundle.bundle_id}}</td>
+                                <td>{{bundle.bundle_filename}}</td>
+                                <td>{{bundle.bundle_number}}</td>
+                                <td>{{bundle.version}}</td>
+                                <td>{{bundle.createdAt}}</td>
+                                <td>
+                                    <Badge @status={{bundle.status}} />
+                                </td>
+                            </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        {{/if}}
+    </ContentPanel>
+</div>

package/addon/templates/developers/extensions/edit/details.hbs

@@ -0,0 +1,16 @@
+<div class="flex-1">
+    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <InputGroup
+            @name={{t "registry-bridge.developers.extensions.extension-form.extension-id"}}
+            @value={{@model.public_id}}
+            @disabled={{true}}
+            @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-id-help-text"}}
+        />
+        <InputGroup
+            @name={{t "registry-bridge.developers.extensions.extension-form.bundle-id"}}
+            @value={{@model.current_bundle_id}}
+            @disabled={{true}}
+            @helpText={{t "registry-bridge.developers.extensions.extension-form.bundle-id-help-text"}}
+        />
+    </ContentPanel>
+</div>

package/addon/templates/developers/extensions/edit/index.hbs

@@ -0,0 +1 @@
+<ExtensionForm @extension={{@model}} />

package/addon/templates/developers/extensions/edit/monetize.hbs

@@ -0,0 +1,3 @@
+<div class="flex-1">
+    <ExtensionMonetizeForm @extension={{@model}} />
+</div>

package/addon/templates/developers/extensions/edit.hbs

@@ -0,0 +1,48 @@
+<Layout::Section::Header @title={{concat (t "registry-bridge.developers.extensions.extension") ": " @model.name}}>
+    <div class="flex items-center mr-2">
+        <Badge @status={{@model.status}} />
+    </div>
+    <Button @type="default" @size="sm" @icon="arrow-left" @text={{t "common.back"}} @onClick={{transition-to "developers.extensions"}} @wrapperClass="mr-2" />
+    <Button @type="primary" @size="sm" @icon="save" @text={{t "common.save"}} @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} @wrapperClass="mr-2" />
+    <Button
+        @type="magic"
+        @size="sm"
+        @icon="paper-plane"
+        @text={{t "registry-bridge.developers.extensions.extension-form.submit-for-review"}}
+        @helpText={{this.isReadyMessage}}
+        @onClick={{this.submitForReview}}
+        @disabled={{not this.isReady}}
+        @isLoading={{not this.startReview.isIdle}}
+    />
+</Layout::Section::Header>
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto py-4 px-10">
+        <div class="fleetops-pill-tabs">
+            <nav>
+                <LinkTo @route="developers.extensions.edit.index" class="ui-tab">
+                    <FaIcon @icon="cog" class="mr-1" />
+                    <span>{{t "registry-bridge.developers.extensions.submission"}}</span>
+                </LinkTo>
+                <LinkTo @route="developers.extensions.edit.details" class="ui-tab">
+                    <FaIcon @icon="circle-info" class="mr-1" />
+                    <span>{{t "registry-bridge.developers.extensions.details"}}</span>
+                </LinkTo>
+                <LinkTo @route="developers.extensions.edit.bundles" class="ui-tab">
+                    <FaIcon @icon="box-archive" class="mr-1" />
+                    <span>{{t "registry-bridge.developers.extensions.bundles"}}</span>
+                </LinkTo>
+                <LinkTo @route="developers.extensions.edit.monetize" class="ui-tab">
+                    <FaIcon @icon="money-bill-1" class="mr-1" />
+                    <span>{{t "registry-bridge.developers.extensions.monetize"}}</span>
+                </LinkTo>
+            </nav>
+        </div>
+    </div>
+    <div class="container">
+        <div class="max-w-3xl mx-auto mt-4">
+            {{outlet}}
+        </div>
+    </div>
+    <Spacer @height="500px" />
+</Layout::Section::Body>

package/addon/templates/developers/extensions/index.hbs

@@ -0,0 +1,27 @@
+<Layout::Section::Header @title={{t "registry-bridge.developers.extensions.extensions"}}>
+    <Button @type="primary" @size="sm" @icon="circle-plus" @text={{t "registry-bridge.developers.extensions.create-new-extension"}} @onClick={{transition-to "developers.extensions.new"}} />
+</Layout::Section::Header>
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="m-auto p-8">
+        <div class="extension-card-grid-container">
+            {{#each (filter-by "isNew" false @model) as |extension|}}
+                <button type="button" class="extension-card-container hover:opacity-50" {{on "click" (transition-to "developers.extensions.edit" extension)}}>
+                    <div class="extension-card-icon-container">
+                        <Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+                    </div>
+                    <div class="extension-card-body-container">
+                        <div class="flex flex-col">
+                            <div class="font-semibold text-sm block">{{extension.name}}</div>
+                            <div class="text-xs truncate">{{n-a extension.description}}</div>
+                        </div>
+                        <div>
+                            <Badge @status={{extension.status}} />
+                        </div>
+                    </div>
+                </button>
+            {{/each}}
+        </div>
+    </div>
+    <Spacer @height="300px" />
+</Layout::Section::Body>

package/addon/templates/developers/extensions/new.hbs

@@ -0,0 +1,39 @@
+<Layout::Section::Header @title={{t "registry-bridge.developers.extensions.new-extension"}} />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container">
+        <div class="max-w-3xl mx-auto mt-4">
+            <div class="flex-1 px-6">
+                <ContentPanel
+                    @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}}
+                    @open={{true}}
+                    @pad={{true}}
+                    @panelBodyClass="bg-white dark:bg-gray-800"
+                >
+                    <InputGroup
+                        @name={{t "registry-bridge.developers.extensions.extension-form.extension-name"}}
+                        @value={{this.extension.name}}
+                        @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-name-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "registry-bridge.developers.extensions.extension-form.extension-description"}}
+                        @wrapperClass="mb-0i"
+                        @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-description-help-text"}}
+                    >
+                        <Textarea
+                            @value={{this.extension.description}}
+                            placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-description"}}
+                            class="form-input w-full"
+                            rows="3"
+                        />
+                    </InputGroup>
+                </ContentPanel>
+                <div class="mt-4 flex items-center space-x-4">
+                    <Button @size="lg" @type="primary" @text="Continue" @icon="check" @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} />
+                    <Button @size="lg" @type="default" @text="Cancel" @icon="times" @onClick={{this.cancel}} />
+                </div>
+            </div>
+        </div>
+    </div>
+    <Spacer @height="500px" />
+</Layout::Section::Body>

package/addon/templates/developers/extensions.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/developers/payments/index.hbs

@@ -0,0 +1,33 @@
+<Layout::Section::Header @title="Payments">
+    <div class="flex flex-row space-x-1">
+        <span class="text-sm text-black dark:text-white font-bold">Total Amount:</span>
+        <span class="text-sm text-black dark:text-white">{{format-currency @model.total_amount "USD"}}</span>
+    </div>
+</Layout::Section::Header>
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    {{#unless this.hasStripeConnectAccount}}
+        <div class="container">
+            <div class="max-w-3xl mx-auto mt-4">
+                <div class="content">
+                    <div class="flex flex-col items-center justify-center">
+                        <h1 class="text-lg font-semibold mb-1">Your account is not setup to accept payments yet.</h1>
+                        <p class="text-sm mb-2">To accept payments for extensions, you must complete the onboard process via Stripe.</p>
+                        <Button @type="primary" @size="lg" @text="Start payments onboard" @onClick={{transition-to "developers.payments.onboard"}} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/unless}}
+    <Table
+        @rows={{@model.data}}
+        @columns={{this.columns}}
+        @selectable={{false}}
+        @canSelectAll={{false}}
+        @onSetup={{fn (mut this.table)}}
+        @pagination={{true}}
+        @paginationMeta={{@model.meta}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+    />
+</Layout::Section::Body>

package/addon/templates/developers/payments/onboard.hbs

@@ -0,0 +1,48 @@
+<Layout::Section::Header @title="Payments Onboard" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container">
+        <div class="max-w-3xl mx-auto mt-4">
+            <div class="content">
+                <div class="onboard-header">
+                    <h2 id="title" class="text-base font-semibold mb-1 {{if this.onboardCompleted 'text-green-700'}}">
+                        {{#if this.onboardCompleted}}
+                            <FaIcon @icon="check" @size="sm" class="text-green-700" />
+                            Onboarding was completed successfully!
+                        {{else}}
+                            Complete this onboard process to accept payments via Fleetbase.
+                        {{/if}}
+                    </h2>
+                    <p id="subtitle" class="text-sm mb-2">
+                        {{#if this.onboardCompleted}}
+                            Your onboard was successful and you're now able to sell and receive payments for published extensions.
+                        {{else}}
+                            Extension authors who wish to receive payments for their published extensions must complete this onboarding.
+                        {{/if}}
+                    </p>
+                    <div class="flex mb-2">
+                        {{#if this.onboardCompleted}}
+                            <Button @icon="check" @type="primary" @size="lg" @text="Continue" @onClick={{transition-to "developers.payments"}} @disabled={{this.onboardInProgress}} />
+                        {{else}}
+                            <Button
+                                @icon="play"
+                                @type="default"
+                                @size="lg"
+                                @text={{if this.onboardInProgress "Onboard in progress" "Start onboard now"}}
+                                @onClick={{perform this.startOnboard}}
+                                @isLoading={{this.startOnboard.isRunning}}
+                                @disabled={{this.onboardInProgress}}
+                            />
+                        {{/if}}
+                    </div>
+                </div>
+                <div
+                    id="embedded-onboarding-container"
+                    class="min-h-20 bg-gray-50 dark:bg-gray-100 shadow-md rounded-lg border border-gray-300 dark:border-gray-900 {{unless this.onboardInProgress 'hidden'}}"
+                    {{did-insert (fn this.createTrackedElement "embeddedOnboardingContainer")}}
+                >
+                </div>
+            </div>
+        </div>
+    </div>
+</Layout::Section::Body>

package/addon/templates/developers/payments.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/developers.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/explore/category.hbs

@@ -0,0 +1,12 @@
+<Layout::Section::Header @searchQuery={{this.query}} @onSearch={{perform this.search}} @title={{t "registry-bridge.developers.extensions.explore.explore-extensions"}} />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="m-auto p-8">
+        <div class="extension-card-grid-container">
+            {{#each this.extensions as |extension|}}
+                <ExtensionCard @extension={{extension}} />
+            {{/each}}
+        </div>
+    </div>
+    <Spacer @height="300px" />
+</Layout::Section::Body>

package/addon/templates/explore/index.hbs

@@ -0,0 +1,12 @@
+<Layout::Section::Header @searchQuery={{this.query}} @onSearch={{perform this.search}} @title={{t "registry-bridge.developers.extensions.explore.explore-extensions"}} />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="m-auto p-8">
+        <div class="extension-card-grid-container">
+            {{#each @model as |extension|}}
+                <ExtensionCard @extension={{extension}} />
+            {{/each}}
+        </div>
+    </div>
+    <Spacer @height="300px" />
+</Layout::Section::Body>

package/addon/templates/explore.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/installed.hbs

@@ -0,0 +1,32 @@
+<Layout::Section::Header @title={{t "registry-bridge.installed.title"}} />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="m-auto p-8">
+        <div class="extension-card-grid-container">
+            {{#each @model as |extension|}}
+                <div class="extension-card-container">
+                    <div class="extension-card-icon-container">
+                        <Image src={{extension.icon_url}} alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+                    </div>
+                    <div class="extension-card-body-container">
+                        <div class="flex flex-col">
+                            <div class="font-semibold text-sm block">{{extension.name}}</div>
+                            <div class="text-xs">{{n-a extension.description}}</div>
+                        </div>
+                        <div class="pt-1 space-y-2">
+                            <Button
+                                @type="default"
+                                @text={{t "registry-bridge.common.about-extension" extensionName=extension.name}}
+                                @icon="circle-info"
+                                @onClick={{fn this.about extension}}
+                                class="w-full"
+                            />
+                            <Button @type="danger" @text={{t "registry-bridge.common.uninstall"}} @icon="trash" @onClick={{fn this.uninstall extension}} class="w-full" />
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+    <Spacer @height="300px" />
+</Layout::Section::Body>