test frontend build

.github/workflows/uffizzi-build.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - name: Checkout git repo
         uses: actions/checkout@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2        
       - name: Generate UUID image name
         id: uuid
         run: echo "UUID_TAG_APP=$(uuidgen)" >> $GITHUB_ENV
@@ -33,11 +31,10 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
 
   build-nginx:
+    needs: 
+      - build-application
     name: Build and Push `nginx`
     runs-on: ubuntu-latest
     if: ${{ github.event_name != 'pull_request' || github.event.action != 'closed' }}
@@ -65,6 +62,8 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/nginx/Dockerfile
+          build-args: |
+            BASE_IMAGE=${{ needs.build-application.outputs.tags }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

resources/scripts/admin/layouts/LayoutBasic.vue

@@ -12,6 +12,8 @@
       class="h-screen h-screen-ios overflow-y-auto md:pl-56 xl:pl-64 min-h-0"
     >
       <div class="pt-16 pb-16">
+        <h1>Testing</h1>
+
         <router-view />
       </div>
     </main>

resources/scripts/admin/layouts/LayoutInstallation.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="h-screen overflow-y-auto text-base">
+    <h1>Testing</h1>
     <NotificationRoot />
 
     <div class="container mx-auto px-4">

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -93,6 +93,9 @@
         >
           {{ pageHeading }}
         </h1>
+
+        <h1>Testing</h1>
+
         <p
           class="
             hidden

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -15,13 +15,6 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
-      dark:from-gray-700/70 dark:to-gray-800/70
-      bg-primary-500
-      dark:bg-transparent
-      dark:backdrop-blur-xl
-      dark:shadow-glass
-      dark:border
-      dark:border-white/10
     "
   >
     <router-link
@@ -60,7 +53,6 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
-        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -15,9 +15,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay
-          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
-        />
+        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
       </TransitionChild>
 
       <TransitionChild
@@ -29,9 +27,7 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div
-          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
-        >
+        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -54,7 +50,8 @@
                   focus:outline-none
                   focus:ring-2
                   focus:ring-inset
-                focus:ring-white"
+                  focus:ring-white
+                "
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -85,8 +82,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-                    : 'text-black dark:text-gray-300',
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
+                    : 'text-black',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -103,10 +100,6 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
-              <LightDarkSwitch
-                :show-label="false"
-                class="absolute right-6 top-6 !w-auto"
-              />
             </nav>
           </div>
         </div>
@@ -123,13 +116,14 @@
       hidden
       w-56
       h-screen
+      pb-32
+      overflow-y-auto
       bg-white
       border-r border-gray-200 border-solid
       xl:w-64
       md:fixed md:flex md:flex-col md:inset-y-0
       pt-16
-    dark:border-gray-800
-    dark:bg-gray-800/80"
+    "
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -142,8 +136,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
+            ? 'text-primary-500 border-primary-500 bg-gray-100 '
+            : 'text-black',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -151,8 +145,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
+              ? 'text-primary-500 group-hover:text-primary-500 '
+              : 'text-gray-400 group-hover:text-black',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -160,9 +154,6 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
-    <LightDarkSwitch
-      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
-    />
   </div>
 </template>
 
@@ -178,7 +169,6 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
-import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/global.js

@@ -34,7 +34,6 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-      isDarkModeOn: false,
 
       downloadReport: null,
     }),

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -113,10 +113,10 @@
 
       <div v-if="companyStore.companies.length !== 1" class="py-5">
         <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">
           {{ $tc('settings.company_info.delete_company') }}
         </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
+        <div class="mt-2 max-w-xl text-sm text-gray-500">
           <p>
             {{ $tc('settings.company_info.delete_company_description') }}
           </p>

resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue

@@ -7,7 +7,7 @@
           {{ $t('settings.menu_title.exchange_rate') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
+          class="mt-2 text-sm leading-snug text-left text-gray-500"
           style="max-width: 680px"
         >
           {{ $t('settings.exchange_rate.providers_description') }}

resources/scripts/admin/views/settings/customization/NumberCustomizer.vue

@@ -1,12 +1,12 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t(`settings.customization.${type}s.${type}_number_format_description`)
-    "
-  >
+  <h6 class="text-gray-900 text-lg font-medium">
     {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{
+      $t(`settings.customization.${type}s.${type}_number_format_description`)
+    }}
+  </p>
 
   <div class="overflow-x-auto">
     <table class="w-full mt-6 table-fixed">
@@ -29,7 +29,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           ></th>
           <th
@@ -42,7 +41,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
             "
           >
             Component
@@ -57,7 +55,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
             "
           >
             Parameter
@@ -72,14 +69,13 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           ></th>
         </tr>
       </thead>
       <draggable
         v-model="selectedFields"
-        class="divide-y divide-gray-200 dark:divide-gray-600"
+        class="divide-y divide-gray-200"
         item-key="id"
         tag="tbody"
         handle=".handle"
@@ -101,13 +97,12 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
-                  dark:text-primary-400
                 "
               >
                 {{ element.label }}
               </label>
 
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <p class="text-xs text-gray-500 mt-1">
                 {{ element.description }}
               </p>
             </td>

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue

@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.estimates.convert_estimate_description')
-    "
-    >
+  <h6 class="text-gray-900 text-lg font-medium">
     {{ $tc('settings.customization.estimates.convert_estimate_options') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.estimates.convert_estimate_description') }}
+  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
       {{ $t('settings.customization.estimates.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.expiry_date_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
       {{ $t('settings.customization.estimates.expiry_date') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.expiry_date_description') }}
+    </p>
 
     <BaseSwitchSection
       v-model="expiryDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.invoices.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
       {{ $t('settings.customization.invoices.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.invoices.default_invoice_email_body')"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.due_date_description')
-    "
-  >
+    <h6 class="text-gray-900 text-lg font-medium">
       {{ $t('settings.customization.invoices.due_date') }}
-  </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.due_date_description') }}
+    </p>
 
     <BaseSwitchSection
       v-model="dueDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue

@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.retrospective_edits_description')
-    "
-  >
+  <h6 class="text-gray-900 text-lg font-medium">
     {{ $tc('settings.customization.invoices.retrospective_edits') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
+  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-     <BaseHeading
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.payments.default_formats_description')
-      "
-    >
+    <h6 class="text-gray-900 text-lg font-medium">
       {{ $t('settings.customization.payments.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.payments.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.payments.default_payment_email_body')"

resources/scripts/components/LightDarkSwitcher.vue

@@ -1,101 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<script lang="ts" setup>
-import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { computed, ref } from 'vue'
-defineProps({
-  showLabel: {
-    type: Boolean,
-    default: true,
-  },
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const globalStore = useGlobalStore()
-
-const enabled = ref(
-  localStorage.getItem('theme') === 'dark' ||
-    document.documentElement.classList.contains('dark')
-)
-
-globalStore.isDarkModeOn = enabled
-
-function onChange(val) {
-  if (val) {
-    localStorage.theme = 'dark'
-    document.documentElement.classList.add('dark')
-    document.documentElement.style.setProperty('color-scheme', 'dark')
-    globalStore.isDarkModeOn = true
-  } else {
-    localStorage.theme = 'light'
-    document.documentElement.classList.remove('dark')
-    document.documentElement.style.setProperty('color-scheme', 'light')
-    globalStore.isDarkModeOn = false
-  }
-}
-</script>
-
-<template>
-  <div class="w-full flex justify-center">
-    <SwitchGroup
-      as="div"
-      class="flex items-center"
-      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
-    >
-      <Switch
-        v-model="enabled"
-        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
-        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
-        @update:modelValue="onChange"
-      >
-        <span class="sr-only">Use setting</span>
-        <span
-          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
-        >
-          <span
-            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-            :class="[
-              enabled
-                ? 'opacity-0 ease-out duration-100'
-                : 'opacity-100 ease-in duration-200',
-            ]"
-            aria-hidden="true"
-          >
-            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
-          </span>
-          <span
-            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-            :class="[
-              enabled
-                ? 'opacity-100 ease-in duration-200'
-                : 'opacity-0 ease-out duration-100',
-            ]"
-            aria-hidden="true"
-          >
-            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
-          </span>
-        </span>
-      </Switch>
-      <SwitchLabel
-        v-if="showLabel"
-        as="span"
-        class="cursor-pointer"
-        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
-      >
-        <span
-          v-if="enabled"
-          class="text-sm font-medium text-gray-500 dark:text-gray-400"
-        >
-          Dark Mode
-        </span>
-        <span v-else class="text-sm font-medium text-gray-500">
-          Light Mode
-        </span>
-      </SwitchLabel>
-    </SwitchGroup>
-  </div>
-</template>

resources/scripts/components/base/BaseHeading.vue

@@ -2,21 +2,6 @@
   <h6 :class="typeClass">
     <slot />
   </h6>
-  
-  <p
-    v-if="subtitle"
-    class="
-      mt-2
-      text-sm
-      leading-snug
-      text-gray-500
-      dark:text-gray-400
-      max-w-[680px]
-    "
-  >
-    {{ subtitle }}
-  </p>
-
 </template>
 
 <script setup>
@@ -29,16 +14,12 @@ const props = defineProps({
       return ['section-title', 'heading-title'].indexOf(value) !== -1
     },
   },
-  subtitle: {
-    type: String,
-    default: '',
-  },
 })
 
 const typeClass = computed(() => {
   return {
-    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
+    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
+    'text-gray-500 uppercase text-base': props.type === 'section-title',
   }
 })
 </script>

resources/scripts/components/base/BaseSettingCard.vue

@@ -11,7 +11,7 @@
             mt-2
             text-sm
             leading-snug
-            text-left text-gray-500 dark:text-gray-400
+            text-left text-gray-500
             max-w-[680px]
           "
         >

resources/views/app.blade.php

@@ -17,7 +17,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!-- Module Styles -->
-    @foreach (\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
+    @foreach(\Crater\Services\Module\ModuleFacade::allStyles() as $name => $path)
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
@@ -25,8 +25,8 @@
 </head>
 
 <body
-    class="h-full overflow-hidden bg-gray-100 dark:bg-gray-900 dark:text-white font-base
-    @if (isset($current_theme)) theme-{{ $current_theme }} @else theme-{{ get_app_setting('admin_portal_theme') ?? 'crater' }} @endif ">
+    class="h-full overflow-hidden bg-gray-100 font-base
+    @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'crater'}} @endif ">
 
     <!-- Module Scripts -->
     @foreach (\Crater\Services\Module\ModuleFacade::allScripts() as $name => $path)
@@ -38,14 +38,6 @@
     @endforeach
 
     <script type="module">
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark')
-            document.documentElement.style.setProperty('color-scheme', 'dark');
-        } else {
-            document.documentElement.classList.remove('dark')
-            document.documentElement.style.setProperty('color-scheme', 'light')
-        }
-
         @if(isset($customer_logo))
 
         window.customer_logo = "/storage/{{$customer_logo}}"

tailwind.config.js

@@ -19,7 +19,6 @@ module.exports = {
     './resources/scripts/**/*.js',
     './resources/scripts/**/*.vue',
   ],
-  darkMode: 'class',
   theme: {
     extend: {
       colors: {

uffizzi/Dockerfile

@@ -11,7 +11,8 @@ RUN apt-get update && apt-get install -y \
     unzip \
     libzip-dev \
     libmagickwand-dev \
-    mariadb-client
+    mariadb-client \
+    npm
 
 # Clear cache
 RUN apt-get clean && rm -rf /var/lib/apt/lists/*
@@ -45,4 +46,19 @@ RUN chmod -R 775 composer.json composer.lock \
 RUN chown -R $(whoami):$(whoami) /var/log/
 RUN chmod -R 775 /var/log
 
+# Cleanup manually generated build files
+RUN rm -rf /var/www/public/build
+RUN npm config set user 0
+RUN npm config set unsafe-perm true
+# Frontend bulding
+RUN sed -i 's/DB_CONNECTION=mysql/DB_CONNECTION=sqlite/g' /var/www/.env
+RUN sed -i 's/DB_DATABASE=crater/DB_DATABASE=\/tmp\/crater.sqlite/g' /var/www/.env
+RUN touch /tmp/crater.sqlite
+RUN composer install --no-interaction --prefer-dist
+RUN npm i -f
+RUN npm install --save-dev sass
+RUN export NODE_OPTIONS="--max-old-space-size=4096" && /usr/bin/npx vite build --target=es2020
+RUN sed -i 's/DB_CONNECTION=sqlite/DB_CONNECTION=mysql/g' /var/www/.env
+RUN sed -i 's/DB_DATABASE=\/tmp\/crater.sqlite/DB_DATABASE=crater/g' /var/www/.env
+
 USER crater-user

uffizzi/nginx/Dockerfile

@@ -1,7 +1,9 @@
+ARG BASE_IMAGE
+
+FROM $BASE_IMAGE as build
 FROM nginx:1.17-alpine
 
 RUN rm /etc/nginx/conf.d/default.conf
 
-COPY ./ /var/www
+COPY --from=build /var/www /var/www
 COPY ./uffizzi/nginx/nginx /etc/nginx/conf.d/
-