@fleetbase/storefront-engine 0.0.1

package/addon/templates/networks/index/network/stores.hbs

@@ -0,0 +1,164 @@
+<div class="flex flex-col md:flex-row justify-start md:justify-between mb-6">
+    <div class="flex-1 pb-4 md:pb-0 md:pr-4">
+        {{#if this.stores.length}}
+            <div>
+                <h4 class="font-semibold dark:text-gray-50 mb-4">{{pluralize @model.meta.total "Store"}} in your network</h4>
+                <p class="dark:text-gray-100">
+                    You can organize your network by creating categories and dragging stores into the categories.
+                </p>
+            </div>
+        {{else}}
+            <h1 class="font-semibold dark:text-gray-50 mb-4">This network is empty</h1>
+            <p class="dark:text-gray-100">
+                Grow your network by sending invitations to others to create a storefront or add their existing storefront to your network. Optionally you may also add your own stores to your network to begin.
+            </p>
+        {{/if}}
+    </div>
+    <div class="flex items-start">
+        <Button @wrapperClass="mr-2 flex-shrink-0" @type="default" @icon="folder" @text="Add Category" @onClick={{fn this.createNewCategory this.network}} />
+        <Button @wrapperClass="mr-2 flex-shrink-0" @type="default" @icon="paper-plane" @text="Invite stores" @onClick={{fn this.invite this.network}} />
+        <Button @wrapperClass="flex-shrink-0" @type="default" @icon="plus" @iconPrefix="fas" @text="Add stores" @onClick={{fn this.addStores this.network}} />
+    </div>
+</div>
+
+<EmberDragula @options={{this.dragulaConfig}} @onReady={{this.setDragulaInstance}} as |d|>
+    <div>
+        <div class="flex items-center mb-6">
+            {{#if this.category}}
+                <div>
+                    <div class="flex items-center mb-3">
+                        <FaIcon @prefix="fas" @icon="folder" @size="2x" class="text-blue-400 mr-3" />
+                        {{#if this.category.parent_category}}
+                            <div class="dark:text-blue-400 flex flex-row items-center">
+                                <span class="text-xl font-bold">{{this.category.parent_category.name}}</span>
+                                {{#if this.category.parent_category.icon}}
+                                    <FaIcon @icon={{this.category.parent_category.icon}} class="ml-1" />
+                                {{/if}}
+                            </div>
+                            <span class="mx-2">
+                                <FaIcon @icon="chevron-right" @prefix="fas" class="dark:text-blue-400 -mb-px" />
+                            </span>
+                        {{/if}}
+                        <div class="dark:text-blue-400 flex flex-row items-center">
+                            <span class="text-xl font-bold">{{this.category.name}}</span>
+                            {{#if this.category.icon}}
+                                <FaIcon @icon={{this.category.icon}} class="ml-1" />
+                            {{/if}}
+                        </div>
+                        {{#if this.isLoading}}
+                            <div class="ml-2 flex items-center">
+                                <Spinner class="mr-2 text-sky-400" />
+                                <span class="dark:text-sky-100 text-xs">Loading...</span>
+                            </div>
+                        {{/if}}
+                    </div>
+                    <div class="flex items-center">
+                        <Button @wrapperClass="mr-2" @icon="long-arrow-alt-left" @text="Back" @onClick={{fn this.leaveCategory this.category.parent_category}} />
+                        <Button @wrapperClass="mr-2" @icon="plus" @iconPrefix="fas" @text="Add Sub-Category" @onClick={{fn this.createNewSubCategory this.category}} />
+                        <Button @wrapperClass="mr-2" @icon="edit" @text="Edit Category" @onClick={{fn this.editCategory this.category}} />
+                        <Button @type="danger" @wrapperClass="mr-4" @icon="trash" @text="Delete Category" @onClick={{fn this.deleteCategory this.category}} />
+                    </div>
+                </div>
+            {{else}}
+                <div class="flex items-center">
+                    <FaIcon @prefix="fas" @icon="folder" @size="2x" class="text-blue-400 mr-2" />
+                    <span class="text-xl font-bold dark:text-blue-400">Top Level</span>
+                </div>
+                {{#if this.isLoading}}
+                    <div class="ml-2 flex items-center">
+                        <Spinner class="mr-2 text-sky-400" />
+                        <span class="dark:text-sky-100 text-xs">Loading...</span>
+                    </div>
+                {{/if}}
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if this.category}}
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 mb-6">
+            {{#each this.subCategories as |category|}}
+                <d.Container class="dragula-container network-folder" data-category={{category.id}}>
+                    <a href="javascript:;" class="block" {{on "click" (fn this.enterCategory category)}}>
+                        <div class="flex items-center justify-center mb-3">
+                            <FaIcon @prefix="fas" @icon="folder" @size={{if (media 'isMobile') "4x" "5x"}} class="text-blue-400" />
+                        </div>
+                        <div class="flex items-center justify-center">
+                            <div class="flex flex-col items-center justify-center rounded-md border bg-blue-400 border-blue-400 px-4 py-1 text-center text-blue-100 font-semibold truncate w-40">
+                                {{category.name}}
+                                {{#each-in category.translations as |lang translation|}}
+                                    <div>{{translation.name}}</div>
+                                {{/each-in}}
+                            </div>
+                        </div>
+                    </a>
+                </d.Container>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 mb-6">
+            {{#each this.categories as |category|}}
+                <d.Container class="dragula-container network-folder" data-category={{category.id}}>
+                    <a href="javascript:;" class="block" {{on "click" (fn this.enterCategory category)}}>
+                        <div class="flex items-center justify-center mb-3">
+                            <FaIcon @prefix="fas" @icon="folder" @size={{if (media 'isMobile') "4x" "5x"}} class="text-blue-400" />
+                        </div>
+                        <div class="flex items-center justify-center">
+                            <div class="flex flex-col items-center justify-center rounded-md border bg-blue-400 border-blue-400 px-4 py-1 text-center text-blue-100 font-semibold truncate w-40">
+                                {{category.name}}
+                                {{#each-in category.translations as |lang translation|}}
+                                    <div>{{translation.name}}</div>
+                                {{/each-in}}
+                            </div>
+                        </div>
+                    </a>
+                </d.Container>
+            {{/each}}
+        </div>
+    {{/if}}
+
+    <d.Container class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 {{if this.isLoading 'hidden'}}">
+        {{#each this.stores as |store|}}
+            <div class="network-store" data-store={{store.id}}>
+                <div class="rounded-md border dark:border-gray-800 shadow-sm">
+                    <div class="p-4 flex items-center justify-center rounded-t-md h-36" {{background-url store.backdrop_url overlay=true}}>
+                        <img src={{store.logo_url}} class="w-32" alt={{store.name}} />
+                    </div>
+                    <div class="border-t dark:border-gray-800 px-4 py-2">
+                        <div class="flex items-center justify-between">
+                            <div class="flex-1 dark:text-gray-100 truncate">
+                                {{store.name}}
+                            </div>
+                            <div>
+                                <DropdownButton @size="xs" @icon="cog" @iconPrefix="fas" @textClass="block truncate" as |dd|>
+                                    <div class="next-dd-menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                        <div class="px-1">
+                                            <div class="next-dd-title">
+                                                Store Options
+                                            </div>
+                                        </div>
+                                        <div class="next-dd-menu-seperator"></div>
+                                        <div class="px-1">
+                                            {{!-- <a href="javascript:;" class="next-dd-item" role="menuitem">
+                                                <FaIcon @icon="receipt" class="mr-2" />
+                                                <span>View orders via network</span>
+                                            </a>
+                                            <a href="javascript:;" class="next-dd-item" role="menuitem">
+                                                <FaIcon @icon="users" class="mr-2" />
+                                                <span>View customers via network</span>
+                                            </a> --}}
+                                            <a href="javascript:;" class="next-dd-item text-danger" role="menuitem" {{on "click" (fn this.dropdownAction dd "removeStore" store this.network)}}>
+                                                <FaIcon @icon="vote-nay" class="mr-2 text-red-500" />
+                                                <span>Remove store from network</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </DropdownButton>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </d.Container>
+</EmberDragula>
+<div class="mb-96 h-96 block w-full"></div>

package/addon/templates/networks/index/network.hbs

@@ -0,0 +1,38 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width={{if (media "isAnyDesktop") "868px"}}>
+    <Overlay::Header @title="Manage Network" @onPressCancel={{this.transitionBack}} />
+
+    <Overlay::Body class="p-0i" @increaseInnerBodyHeightBy="0" @wrapperClass="space-y-4 pt-4">
+        <div class="flex flex-col">
+            <div class="px-4 flex items-center section-header-title mb-4">
+                <FaIcon @icon="network-wired" @size="lg" class="text-sky-500 mr-3" />
+                <h3 class="text-lg font-semibold dark:text-white">
+                    {{@model.name}}
+                </h3>
+            </div>
+            <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+                <div class="ui-tabs">
+                    <nav>
+                        <LinkTo @route="networks.index.network.index" class="ui-tab">
+                            <FaIcon @icon="cogs" class="mr-2" />
+                            <span>Settings</span>
+                        </LinkTo>
+                        <LinkTo @route="networks.index.network.stores" class="ui-tab">
+                            <FaIcon @icon="store" class="mr-2" />
+                            <span>Stores</span>
+                        </LinkTo>
+                        <LinkTo @route="networks.index.network.orders" class="ui-tab">
+                            <FaIcon @icon="file-invoice-dollar" class="mr-2" />
+                            <span>Orders</span>
+                        </LinkTo>
+                        <LinkTo @route="networks.index.network.customers" class="ui-tab">
+                            <FaIcon @icon="users" class="mr-2" />
+                            <span>Customers</span>
+                        </LinkTo>
+                    </nav>
+                </div>
+            </div>
+        </div>
+
+        <div class="p-6">{{outlet}}</div>
+    </Overlay::Body>
+</Overlay>

package/addon/templates/networks/index.hbs

@@ -0,0 +1,60 @@
+<Layout::Section::Header @title="Networks" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" class="mr-2" @onClick={{this.createNetwork}} />
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    <div class="h-screen overflow-y-scroll p-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 lg:gap-4">
+            {{#each @model as |network|}}
+                <div class="mr-4 w-full">
+                    <div class="rounded-md border dark:border-gray-700 shadow-sm">
+                        <div class="p-4 flex items-center justify-center rounded-t-md h-36" {{background-url network.backdrop_url overlay=true}}>
+                            <Image src={{network.logo_url}} class="w-32" alt={{network.name}} @fallbackSrc="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/image-file-icon.png" />
+                        </div>
+                        <div class="border-t dark:border-gray-700 px-4 py-2">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <LinkTo @route="networks.index.network" @model={{network}} class="font-bold text-lg text-gray-700 dark:text-gray-100">{{network.name}}</LinkTo>
+                                </div>
+                                <div>
+                                    <DropdownButton @renderInPlace={{true}} @size="xs" @icon="cog" @iconPrefix="fas" @textClass="block truncate text-gray-700 dark:text-gray-100" as |dd|>
+                                        <div class="next-dd-menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                            <div class="px-1">
+                                                <div class="next-dd-title">
+                                                    Network Options
+                                                </div>
+                                            </div>
+                                            <div class="next-dd-menu-seperator"></div>
+                                            <div class="px-1">
+                                                <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.manageNetwork network)}}>
+                                                    <div class="w-7">
+                                                        <FaIcon @icon="network-wired" class="mr-2" />
+                                                    </div>
+                                                    <span>Manage Network</span>
+                                                </a>
+                                                <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.sendInvites network)}}>
+                                                    <div class="w-7">
+                                                        <FaIcon @icon="envelope-open-text" class="mr-2" />
+                                                    </div>
+                                                    <span>Send Invites</span>
+                                                </a>
+                                                <a href="javascript:;" class="next-dd-item text-red-500 hover:bg-opacity-75" role="menuitem" {{on "click" (dropdown-fn dd this.deleteNetwork network)}}>
+                                                    <div class="w-7">
+                                                        <FaIcon @icon="trash" class="mr-2 text-red-500" />
+                                                    </div>
+                                                    <span class="text-red-500">Delete Network</span>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </DropdownButton>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Layout::Section::Body>
+
+{{outlet}}

package/addon/templates/orders/index/edit.hbs

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

package/addon/templates/orders/index/new.hbs

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

package/addon/templates/orders/index/view.hbs

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

package/addon/templates/orders/index.hbs

@@ -0,0 +1,22 @@
+<Layout::Section::Header @title="Orders" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+    {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteOrders)}}>
+                        Delete Orders
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" />
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+
+{{outlet}}

package/addon/templates/products/index/category/edit.hbs

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

package/addon/templates/products/index/category/new.hbs

@@ -0,0 +1,248 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @containerClass="border-l border-transparent dark:border-gray-700">
+    <Overlay::Header @title={{this.overlayTitle}} @titleClass="truncate" @titleWrapperClass="w-3/4" @headerLeftClass="w-70pc" @headerLeftInnerClass="w-full flex-1" @onPressCancel={{this.transitionBack}}>
+        <Button @icon={{this.overlayActionButtonIcon}} @type="primary" @text={{this.overlayActionButtonTitle}} @onClick={{this.saveProduct}} @isLoading={{this.isSaving}} @isSubscriptionRequired={{true}} />
+    </Overlay::Header>
+
+    <Overlay::Body @increaseInnerBodyHeightBy="0" @wrapperClass="new-order-overlay-body px-4 space-y-4 pt-4">
+        <InputGroup @name="Product Name" @value={{this.product.name}} @helpText="Enter your product's name" />
+        <InputGroup @name="Product Description" @helpText="Enter a description of your product">
+            <Textarea @value={{this.product.description}} class="form-input w-full" placeholder="Enter a description of your product...." rows={{4}} />
+        </InputGroup>
+        <InputGroup @name="Product Tags">
+            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{this.product.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                {{tag}}
+            </TagInput>
+        </InputGroup>
+        <InputGroup @name="Product SKU" @value={{this.product.sku}} @helpText="Enter product SKU if applicable" />
+        <div class="grid grid-cols-2 gap-2">
+            <InputGroup @name="Price" @helpText="Enter a price users will pay to purchase this product">
+                <MoneyInput class="w-full" @currency={{this.product.currency}} @value={{this.product.price}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+            </InputGroup>
+            <InputGroup @name="Sale Price" @helpText="Optionally add a sale price for the product if the product is put on sale">
+                <MoneyInput class="w-full" @currency={{this.product.currency}} @value={{this.product.sale_price}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+            </InputGroup>
+        </div>
+
+        <ContentPanel @title="Metadata" @open={{this.product.meta_array.length}} @actionButtons={{this.metadataButtons}} @pad={{true}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#each this.product.meta_array as |metaField index|}}
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                    <div class="input-group">
+                        <div class="flex justify-between items-center mb-1">
+                            <Input class="form-input border-0 px-2 py-1 m-0 bg-white dark:bg-gray-900 shadow-none" @value={{metaField.label}} placeholder={{metaField.label}} />
+                            <a href="javascript:;" class="text-xs" tabindex="-1" {{on "click" (fn this.removeMetaField index)}}>
+                                <FaIcon @icon="trash" @size="sm" class="mr-1" /> Remove
+                            </a>
+                        </div>
+                        <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} />
+                    </div>
+                </div>
+            {{/each}}
+        </ContentPanel>
+
+        <InputGroup>
+            <TranslationsEditor @value={{this.product.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut this.product.translations)}} />
+        </InputGroup>
+
+        <div class="store-boolean-settings">
+            <div class="input-group mb-0">
+                <Checkbox @value={{this.product.is_service}} @onToggle={{fn (mut this.product.is_service)}}>
+                    <FaIcon @icon="house-leave" class="text-indigo-400 mx-2" /><span class="dark:text-gray-100 text-sm">This is a service</span>
+                </Checkbox>
+            </div>
+
+            {{#if this.product.is_service}}
+                <div class="input-group mb-0">
+                    <Checkbox @value={{this.product.is_bookable}} @onToggle={{fn (mut this.product.is_bookable)}}>
+                        <FaIcon @icon="calendar-star" class="text-yellow-400 mx-2" /><span class="dark:text-gray-100 text-sm">This service is bookable</span>
+                    </Checkbox>
+                </div>
+            {{/if}}
+
+            <div class="input-group mb-0">
+                <Checkbox @value={{this.product.is_on_sale}} @onToggle={{fn (mut this.product.is_on_sale)}}>
+                    <FaIcon @icon="badge-percent" class="text-blue-400 mx-2" /><span class="dark:text-gray-100 text-sm">This product is on sale</span>
+                </Checkbox>
+            </div>
+
+            <div class="input-group">
+                <Checkbox @value={{this.product.is_recommended}} @onToggle={{fn (mut this.product.is_recommended)}}>
+                    <FaIcon @icon="check" class="text-green-400 mx-2" /><span class="dark:text-gray-100 text-sm">This product is recommended</span>
+                </Checkbox>
+            </div>
+
+            <div class="input-group">
+                <Checkbox @value={{this.product.is_available}} @onToggle={{fn (mut this.product.is_available)}}>
+                    <FaIcon @icon="eye" class="text-blue-400 mx-2" /><span class="dark:text-gray-100 text-sm">This product is available</span>
+                </Checkbox>
+            </div>
+        </div>
+
+        <ContentPanel @title="Variants" @open={{this.product.variants.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="content-panel-body p-4">
+                <div class="flex items-center justify-end">
+                    <Button @text="New Variant" @icon="plus" @iconPrefix="fas" @onClick={{this.createProductVariant}} />
+                </div>
+            </div>
+            <Tabs as |Tab|>
+                {{#each this.product.variants as |variant|}}
+                    <Tab @title={{variant.name}}>
+                        <div class="px-4 py-3">
+                            <div class="flex items-center justify-end mb-3">
+                                <Button class="mr-2" @type="danger" @text="Remove Variant" @icon="trash" @onClick={{fn this.removeProductVariant variant}} />
+                                <Button class="mr-2" @type="warning" @text="Edit Variant" @icon="pencil" @onClick={{fn this.editProductVariant variant}} />
+                                <Button @text={{concat "New " (lowercase variant.name) " option"}} @icon="plus" @iconPrefix="fas" @onClick={{fn this.addVariantOption variant}} />
+                            </div>
+                            <div class="space-y-2">
+                                {{#each variant.options as |variantOption index|}}
+                                    <div class="grid grid-cols-9 gap-1 px-3 py-2 rounded-md dark:bg-gray-900 bg-gray-50">
+                                        <div class="col-span-2">
+                                            <Input @type="text" @value={{variantOption.name}} class="form-input w-full" placeholder="Option Name" />
+                                        </div>
+                                        <div class="col-span-4">
+                                            <Input @type="text" @value={{variantOption.description}} class="form-input w-full" placeholder="Option Description" />
+                                        </div>
+                                        <div class="col-span-2">
+                                            <MoneyInput class="w-full" @currency={{this.product.currency}} @canSelectCurrency={{false}} @value={{variantOption.additional_cost}} />
+                                        </div>
+                                        <div class="flex items-center justify-center text-center text-sm">
+                                            <a href="javascript:;" {{on "click" (fn this.removeVariantOption variant index)}}>Remove</a>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    </Tab>
+                {{/each}}
+            </Tabs>
+        </ContentPanel>
+
+        <ContentPanel @title="Add-Ons" @open={{this.product.addon_categories.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="px-4 py-3">
+                <div class="flex items-center justify-end mb-3">
+                    <Button @text="Select Addon Categories" @icon="plus" @iconPrefix="fas" @onClick={{this.selectAddonCategory}} />
+                </div>
+                <div class="space-y-2">
+                    {{#each this.product.addon_categories as |addonCategory index|}}
+                        <div>
+                            <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-900 dark:text-gray-100 mb-2">
+                                <div class="flex-1 flex items-center">
+                                    <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
+                                    <div class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100">
+                                        {{addonCategory.name}}
+                                    </div>
+                                </div>
+                                <div class="flex items-center">
+                                    <a href="javascript:;" class="destroy-action opacity-50 hover:opacity-100 text-sm" {{on "click" (fn this.removeAddonCategory index)}}>Remove</a>
+                                </div>
+                            </div>
+                            <div class="space-y-2 mb-2">
+                                {{#each addonCategory.category.addons as |addon|}}
+                                    <div class="grid grid-cols-10 gap-1 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-900 dark:text-gray-100 dark:bg-gray-800 bg-gray-200">
+                                        <div class="flex items-center">
+                                            <Checkbox @value={{not-in-array addon.id addonCategory.excluded_addons}} @onToggle={{fn this.excludeAddon index addon}} />
+                                        </div>
+                                        <div class="col-span-3 flex items-center">
+                                            {{addon.name}}
+                                        </div>
+                                        <div class="col-span-4">
+                                            {{addon.description}}
+                                        </div>
+                                        <div class="col-span-2">
+                                            {{format-currency addon.price}}
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        </ContentPanel>
+
+        <ContentPanel @title="Availability" @open={{this.product.hours.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="px-4 py-3">
+                <ScheduleManager @subject={{this.product}} @subjectKey="product_uuid" @hourModelType="product-hour" class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2" />
+            </div>
+        </ContentPanel>
+
+        <ContentPanel @title="Images & Videos" @open={{this.product.files.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="px-6 space-y-4">
+                {{#if this.isUploading}}
+                    <div class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
+                        <div class="flex items-center justify-center py-5">
+                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage="Uploading..." />
+                        </div>
+                    </div>
+                {{else}}
+                    {{#let (file-queue name="files" onFileAdded=this.queueFile accept=(join "," this.acceptedFileTypes)) as |queue|}}
+                        <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
+                            {{#if dropzone.active}}
+                                {{#if dropzone.valid}}
+                                    Drop to upload
+                                {{else}}
+                                    Invalid
+                                {{/if}}
+                            {{else if queue.files.length}}
+                                <div class="my-2">
+                                    <FaIcon @icon="photo-video" class="text-indigo-500 mr-2" />
+                                    {{pluralize queue.files.length "file"}} ready for upload.
+                                </div>
+                                <div class="my-2">({{queue.progress}}%)</div>
+                            {{else}}
+                                <h4 class="font-semibold mb-8">
+                                    <FaIcon @icon="photo-video" @size="2x" class="text-indigo-500 mr-2" /> Upload Images & Videos
+                                </h4>
+                                <div>
+                                    {{#if dropzone.supported}}
+                                        <p class="text-base font-semibold my-5">Drag and drop image and video files onto this dropzone</p>
+                                    {{/if}}
+                                    <FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{fn this.queueFile}}>
+                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">or select files to upload.</a>
+                                    </FileUpload>
+                                </div>
+                            {{/if}}
+                        </FileDropzone>
+                    {{/let}}
+                    {{#if this.uploadQueue}}
+                        <div class="mx-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <span class="leading-6 dark:text-gray-100">Upload Queue</span>
+                            </div>
+                            <div class="space-y-2 mb-4">
+                                {{#each this.uploadQueue as |file|}}
+                                    <div class="flex items-center justify-between bg-green-100 border border-green-800 dark:border-green-800 py-1.5 shadow-sm rounded-lg px-4">
+                                        <div class="text-sm text-green-900">{{file.name}}</div>
+                                        <div class="flex items-center text-sm">
+                                            <Spinner class="text-green-900 mr-2" />
+                                            <span class="font-bold text-green-900">{{round file.progress}}%</span>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/if}}
+                    <div>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+                            {{#each this.product.files as |file|}}
+                                <FileRecord @file={{file}} @fileIconClass={{if (eq this.product.primary_image_uuid file.id) 'border-blue-400'}} @onDelete={{this.removeFile}}>
+                                    <div class="flex items-center justify-evenly">
+                                        <Button @icon="magic" @text="Make Primary" @size="xs" @textClass="text-xs truncate" @onClick={{fn this.makePrimaryFile file}} @disabled={{eq this.product.primary_image_uuid file.id}} />
+                                    </div>
+                                </FileRecord>
+                            {{/each}}
+                        </div>
+                    </div>
+                {{/if}}
+            </div>
+        </ContentPanel>
+
+        <ContentPanel @title="Youtube Videos" @open={{this.product.youtube_urls.length}} @wrapperClass="mb-12" @panelBodyWrapperClass="p-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <p class="text-sm">Add YouTube video urls to assosciate with this product or service.</p>
+            <div class="input-group">
+                <ArrayInput @data={{this.product.youtube_urls}} @placeholder="Enter youtube video url" @onDataChanged={{fn (mut this.product.youtube_urls)}}>
+                    <InputLabel @labelText="Youtube Video URLs" @helpText="Input product youtube video urls if applicable." />
+                </ArrayInput>
+            </div>
+        </ContentPanel>
+    </Overlay::Body>
+</Overlay>

package/addon/templates/products/index/category.hbs

@@ -0,0 +1,41 @@
+<Layout::Section::Header @title={{concat this.category.name " Products"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @type="default" @text="Edit this category" @icon="edit" @onClick={{fn this.editCategory this.category}} @disabled={{not this.category}} @wrapperClass="mr-2" />
+    <Button @type="danger" @text="Delete this category" @icon="trash" @onClick={{this.deleteCategory}} @disabled={{not this.category}} />
+</Layout::Section::Header>
+
+<div class="h-screen overflow-y-scroll p-6">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {{#each @model as |product|}}
+            <div class="border border-gray-200 bg-white dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 text-center rounded-md px-2 py-3">
+                <div class="flex flex-col items-center justify-center overflow-hidden">
+                    <div class="mb-3 flex items-center justify-center">
+                        <img src={{product.primary_image_url}} alt={{product.name}} class="w-24 h-24" />
+                    </div>
+                    <h4 class="font-semibold mb-1">{{product.name}}</h4>
+                    <p class="text-sm truncate">{{product.description}}</p>
+                    <p class="mb-2 text-sm text-green-400">{{format-currency product.price product.currency}}</p>
+                    <div class="flex items-center justify-evenly space-x-4">
+                        <LinkTo @route="products.index.category.edit" @model={{product}} class="text-sm">
+                            <FaIcon @icon="pencil" class="mr-1" />
+                            <span class="destroy-action">Edit</span>
+                        </LinkTo>
+                        <a href="javascript:;" class="destroy-action text-sm" {{on "click" (fn this.deleteProduct product)}}>
+                            <FaIcon @icon="trash" class="text-red-500 mr-1" />
+                            <span class="destroy-action">Delete</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        {{else}}
+            <div>
+                <h3 class="dark:text-gray-100 text-opacity-75 text-sm">No products</h3>
+            </div>
+        {{/each}}
+    </div>
+</div>
+
+<Layout::Section::Footer>
+    <Pagination @meta={{@model.meta}} @currentPage={{this.page}} @onPageChange={{fn (mut this.page)}} />
+</Layout::Section::Footer>
+
+{{outlet}}

package/addon/templates/products/index/index/edit.hbs

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