@fleetbase/fleetops-engine 0.0.1

package/addon/components/modals/service-area-form.hbs

@@ -0,0 +1,31 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @value={{@options.serviceArea.name}} @name="Service Area Name" @helpText="Set a display name for the service area." @required={{true}} />
+        <InputGroup @name="Service Area Type" @helpText="Select the type definition for this service area .">
+            <Select
+                @options={{@options.serviceAreaTypes}}
+                @value={{@options.serviceArea.type}}
+                @onSelect={{fn (mut @options.serviceArea.type)}}
+                @placeholder="Select service area type..."
+                class="w-full"
+            />
+        </InputGroup>
+        <InputGroup
+            @type="color"
+            @value={{@options.serviceArea.stroke_color}}
+            @name="Service Area Border Color"
+            @helpText="Customize the border color for this service area."
+            class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
+        />
+        <InputGroup
+            @type="color"
+            @value={{@options.serviceArea.color}}
+            @name="Service Area Color"
+            @helpText="Customize the fill color for this service area."
+            class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
+        />
+        <InputGroup @name="Service Area Country" @helpText="Optionally set the country in which this service area is located or based in.">
+            <CountrySelect class="w-full form-input" @value={{@options.serviceArea.country}} @onChange={{fn (mut @options.serviceArea.country)}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/set-password.hbs

@@ -0,0 +1,15 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
+            <div>
+                <FaIcon @icon="info-circle" class="text-blue-900 mr-4" />
+            </div>
+            <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
+                Welcome to Fleetbase! Before you get started, set a new password to continue below.
+            </p>
+        </div>
+
+        <InputGroup @name="New Password" @value={{@options.password}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 8 characters to continue." />
+        <InputGroup @name="Confirm Password" @value={{@options.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 8 characters to continue." />
+    </div>
+</Modal::Default>

package/addon/components/modals/uninstall-prompt.hbs

@@ -0,0 +1,21 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container space-y-4">
+        <div class="flex">
+            <div>
+                <div class="flex items-center justify-center p-3 rounded-full bg-red-50 shadow mr-4">
+                    <FaIcon @icon="trash" class="text-red-900" @size="2x" />
+                </div>
+            </div>
+            <div class="flex-1 dark:text-gray-100">
+                <p class="text-base mb-2">You are attempting to uninstall the extension "{{or @options.extensionName}}".
+                    Are you sure you wish to proceed with this uninstallation?</p>
+                <small>All configuration and customized settings will be lost.</small>
+            </div>
+        </div>
+        {{#if @options.isUninstalling}}
+            <div>
+                <ProgressBar @task="uninstall" @color="red" @progress={{@options.uninstallProgress}} />
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/user-form.hbs

@@ -0,0 +1,56 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6">
+                <img src={{@options.user.avatar_url}} alt={{@options.user.name}} class="w-32 h-32 rounded-md" />
+                <FileUpload @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} as |queue|>
+                    <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                        {{#if queue.files.length}}
+                            <Spinner class="mr-1" />
+                            <span>
+                                Uploading...
+                            </span>
+                        {{else}}
+                            <FaIcon @icon="image" class="mr-1" />
+                            <span>
+                                Upload new
+                            </span>
+                        {{/if}}
+                    </a>
+                </FileUpload>
+            </div>
+            <div class="flex-1">
+                <div class="grid grid-cols-2 gap-3 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <label>
+                            Name
+                        </label>
+                        <Input @value={{@options.user.name}} type="text" class="w-full form-input" placeholder="Name" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Email
+                        </label>
+                        <Input @value={{@options.user.email}} type="text" class="w-full form-input" placeholder="Email" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Phone
+                        </label>
+                        <PhoneInput @value={{@options.user.phone}} @onInput={{fn (mut @options.user.phone)}} class="form-input w-full" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Country
+                        </label>
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.user.country}} @onChange={{fn (mut @options.user.country)}} placeholder="Country" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/vehicle-details.hbs

@@ -0,0 +1,227 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-col md:flex-row">
+            <div class="lg:flex-none lg:w-40 mb-4 md:mb-0">
+                <div class="w-32">
+                    <Image src={{@options.vehicle.photo_url}} @fallbackSrc={{@options.vehicle.avatar_url}} alt={{@options.vehicle.name}} height="128" width="128" class="h-32 w-32" />
+                </div>
+            </div>
+            <div class="flex-1 space-y-4">
+                <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+                        <div class="field-info-container">
+                            <div class="field-name">Name</div>
+                            <div class="field-value">{{n-a @options.vehicle.name}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Vehicle</div>
+                            <div class="field-value">{{n-a @options.vehicle.internal_id}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Plate Number</div>
+                            <div class="field-value">{{n-a @options.vehicle.plate_number}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">VIN Number</div>
+                            <div class="field-value">{{n-a @options.vehicle.vin}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Make</div>
+                            <div class="field-value">{{n-a @options.vehicle.name}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Model</div>
+                            <div class="field-value">{{n-a @options.vehicle.model}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Year</div>
+                            <div class="field-value">{{n-a @options.vehicle.year}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Status</div>
+                            <Badge @status={{@options.vehicle.status}} />
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2 mb-2 mt-2">
+                        <div class="col-span-2">
+                            <div class="field-info-container">
+                                <div class="field-name">Driver Assigned</div>
+                                <div class="field-value">
+                                    {{#if @options.vehicle.driver}}
+                                        <DriverCard class="dark:bg-gray-800 rounded-md px-3 py-2" @driver={{@options.vehicle.driver}} @onClick={{@options.viewDriver}} />
+                                    {{else}}
+                                        <span>No driver assigned</span>
+                                    {{/if}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+                        <div>
+                            <Image alt={{@options.vehicle.public_id}} src={{@options.vehicle.avatar_url}} class="w-24 h-24" />
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Model Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="field-info-container">
+                            <div class="field-name">0 to 100 Kph</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_0_to_100_kph}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Body</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_body}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Doors</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_doors}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Drive</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_drive}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Length (mm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_length_mm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Seats</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_seats}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Top Speed (kph)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_top_speed_kph}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Transmission Type</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_transmission_type}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Weight (kg)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_weight_kg}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Wheelbase (mm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_wheelbase_mm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Width (mm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_width_mm}}</div>
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Engine Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="field-info-container">
+                            <div class="field-name">Engine Bore (mm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_bore_mm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">CC</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_cc}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Compression</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_compression}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Cylinders</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_cyl}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Position</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_position}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Power (ps)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_power_ps}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Power (rpm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_power_rpm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Stroke (mm))</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_stroke_mm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Torque (nm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_torque_nm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Torque (rpm)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_torque_rpm}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Valves Per Cylinder</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_valves_per_cyl}}</div>
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Fuel Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="field-info-container">
+                            <div class="field-name">Fuel</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_engine_fuel}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Fuel Cap (l)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_fuel_cap_l}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Liters Per km City</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_lkm_city}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Liters Per km Highway)</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_lkm_hwy}}</div>
+                        </div>
+
+                        <div class="field-info-container">
+                            <div class="field-name">Liters Per km Mixed</div>
+                            <div class="field-value">{{n-a @options.vehicle.model_lkm_mixed}}</div>
+                        </div>
+                    </div>
+                </ContentPanel>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/vehicle-form.hbs

@@ -0,0 +1,282 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6">
+                <Image src={{@options.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{@options.vehicle.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} class="w-32" />
+            </div>
+            <div class="flex-1 space-y-4">
+                <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="input-group mb-2">
+                            <label>
+                                Internal ID
+                            </label>
+                            <Input @value={{@options.vehicle.internal_id}} type="text" class="w-full form-input" placeholder="Internal ID" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Plate Number
+                            </label>
+                            <Input @value={{@options.vehicle.plate_number}} type="text" class="w-full form-input" placeholder="Plate Number" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                VIN Number
+                            </label>
+                            <Input @value={{@options.vehicle.vin}} type="text" class="w-full form-input" placeholder="VIN Number" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Make
+                            </label>
+                            <Input @value={{@options.vehicle.make}} type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Model
+                            </label>
+                            <Input @value={{@options.vehicle.model}} type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Year
+                            </label>
+                            <Input @value={{@options.vehicle.year}} type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Driver Assigned
+                            </label>
+                            <ModelSelect @modelName="driver" @selectedModel={{@options.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.vehicle.driver)}} as |model|>
+                                {{model.name}}
+                            </ModelSelect>
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="input-group mb-2">
+                            <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
+                            <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{@options.vehicle.avatar_url}} @onSelect={{fn (mut @options.vehicle.avatar_url)}} as |option key|>
+                                {{titleize (humanize key)}}
+                            </FetchSelect>
+                        </div>
+                        <div>
+                            <img alt={{@options.vehicle.public_id}} src={{@options.vehicle.avatar_url}} class="w-24 h-24" />
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Model Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="input-group mb-2">
+                            <label>
+                                0 To 100 kph
+                            </label>
+                            <Input @value={{@options.vehicle.model_0_to_100_kph}} type="text" class="w-full form-input" placeholder="0 To 100 kph" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Body
+                            </label>
+                            <Input @value={{@options.vehicle.model_body}} type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Doors
+                            </label>
+                            <Input @value={{@options.vehicle.model_doors}} type="text" class="w-full form-input" placeholder="Number of Doors" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Drive
+                            </label>
+                            <Input @value={{@options.vehicle.model_drive}} type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Length (mm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_length_mm}} type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Seats
+                            </label>
+                            <Input @value={{@options.vehicle.model_seats}} type="text" class="w-full form-input" placeholder="Number of Seats" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Top Speed (kph)
+                            </label>
+                            <Input @value={{@options.vehicle.model_top_speed_kph}} type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Transmission Type
+                            </label>
+                            <Input @value={{@options.vehicle.model_transmission_type}} type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Weight (kg)
+                            </label>
+                            <Input @value={{@options.vehicle.model_weight_kg}} type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Wheelbase (mm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_wheelbase_mm}} type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Width (mm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_width_mm}} type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Engine Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="input-group mb-2">
+                            <label>
+                                Engine Bore (mm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_bore_mm}} type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                CC
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_cc}} type="text" class="w-full form-input" placeholder="Engine CC" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Compression
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_compression}} type="text" class="w-full form-input" placeholder=" Engine Compression" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Cylinders
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_cyl}} type="text" class="w-full form-input" placeholder="Number of Cylinders" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Position
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_position}} type="text" class="w-full form-input" placeholder="Engine Position" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Power (ps)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_power_ps}} type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Power (rpm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_power_rpm}} type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Stroke (mm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Torque (nm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_torque_nm}} type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Torque (rpm)
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Valves per Cylinder
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
+                        </div>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Fuel Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <div class="input-group mb-2">
+                            <label>
+                                Fuel
+                            </label>
+                            <Input @value={{@options.vehicle.model_engine_fuel}} type="text" class="w-full form-input" placeholder="Fuel Type" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Fuel Cap (L)
+                            </label>
+                            <Input @value={{@options.vehicle.model_fuel_cap_l}} type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Liters Per km City
+                            </label>
+                            <Input @value={{@options.vehicle.model_lkm_city}} type="text" class="w-full form-input" placeholder="Liters Per km City" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Liters Per km Highway
+                            </label>
+                            <Input @value={{@options.vehicle.model_lkm_hwy}} type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
+                        </div>
+
+                        <div class="input-group mb-2">
+                            <label>
+                                Liters Per km Mixed
+                            </label>
+                            <Input @value={{@options.vehicle.model_lkm_mixed}} type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
+                        </div>
+                    </div>
+                </ContentPanel>
+
+            </div>
+        </div>
+    </div>
+</Modal::Default>