updated page layouts and format

layout
env
2025-07-30 11:32:53 -04:00 · 2025-07-29 13:44:47 -04:00 · 2025-07-29 13:06:19 -04:00 · 2025-07-28 18:43:03 -04:00 · 2024-01-24 23:08:43 -05:00 · 2024-01-24 23:00:57 -05:00
23 changed files with 4020 additions and 1428 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+.idea/
+.dist/
+node_modules/
--- a/.env
+++ b/.env
@@ -1 +0,0 @@
-VITE_API=http://localhost:8000
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 .idea/
+
+.env
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v19.6.0
+v22.14.0
--- a/README.md
+++ b/README.md
@@ -1,18 +1,6 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support For `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+```shell
+nvm use
+npm run build
+docker run -p 5173:80 -v $(PWD)/dist:/usr/share/caddy/ --rm caddy
+```
+[http://localhost:5173](http://localhost:5173)
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Load Data Manager</title>
+    <title>Gun Manager</title>
    <script src="https://kit.fontawesome.com/1a962b66c9.js" crossorigin="anonymous"></script>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,19 +9,21 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "axios": "^1.4.0",
-    "primevue": "^3.30.2",
-    "sass": "^1.62.1",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "@primeuix/themes": "^1.2.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "axios": "^1.11.0",
+    "primevue": "^4.3.6",
+    "sass": "^1.89.2",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2",
-    "vue-tsc": "^1.4.2"
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-vue-devtools": "^8.0.0",
+    "vue-tsc": "^3.0.4"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,11 @@
 <template>
+  <Toast />
  <div class="flex flex-row flex-wrap m-10 justify-around">
    <router-view />
  </div>
 </template>
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'

-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({})
+const Toast = defineAsyncComponent(() => import('primevue/toast'))
 </script>
-
-<style>
-body {
-  font-family: var(--font-family);
-}
-</style>
--- a/src/assets/guns.gif
+++ b/src/assets/guns.gif
--- a/src/components/GunForm.vue
+++ b/src/components/GunForm.vue
@@ -1,6 +1,6 @@
 <template>
  <Card>
-    <template #header>
+    <template #title>
      <div class="ml-5 pt-10">
        <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
        <h2 v-else class="text-3xl">Add Gun</h2>
@@ -53,7 +53,7 @@
        <div class="w-full mt-5">
          <div class="flex gap-2" style="flex-direction: column">
            <label for="date_purchased">Date Purchased</label>
-            <Calendar v-model="gun.date_purchased"/>
+            <DatePicker date-format="mm/dd/yy" v-model="gun.date_purchased"/>
          </div>
        </div>
        <div class="w-full mt-5">
@@ -62,37 +62,80 @@
            <Textarea v-model="gun.notes"/>
          </div>
        </div>
-        <div class="w-full mt-5">
+        <div class="w-full mt-5" v-if="gun.id">
          <div class="flex gap-2" style="flex-direction: column">
            <label for="value_amount">Photos</label>
            <FileUpload
-                :showUploadButton="gun.id === false"
                :showCancelButton="false"
                accept="image/*"
-                :multiple="gun.id === null"
+                multiple
+                :url="`${url}/gun/photo/${gun.id}`"
+                @upload="$emit('upload')"
            />
          </div>
        </div>
        <div class="w-full mt-5">
-          <Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
          <router-link to="/guns">
-            <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
+            <Button severity="secondary" class="mr-3" icon="fa-sharp fa-light fa-arrow-left" label="Back"/>
          </router-link>
+          <Button :loading="loading" @click="$emit('save')" severity="success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
+          <ConfirmPopup />
+          <Button @click="confirmDelete" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
        </div>
      </div>
    </template>
  </Card>
-
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from 'vue'
+import axios from "axios"
+import { useConfirm } from 'primevue/useconfirm'
+import { useRouter } from 'vue-router'

-export default defineComponent({
-  props: {
+const confirm = useConfirm()
+const router = useRouter()
+
+const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'))
+const InputText = defineAsyncComponent(() => import('primevue/inputtext'))
+const InputNumber = defineAsyncComponent(() => import('primevue/inputnumber'))
+const DatePicker = defineAsyncComponent(() => import('primevue/datepicker'))
+const Textarea = defineAsyncComponent(() => import('primevue/textarea'))
+const FileUpload = defineAsyncComponent(() => import('primevue/fileupload'))
+const Button = defineAsyncComponent(() => import('primevue/button'))
+const Card = defineAsyncComponent(() => import('primevue/card'))
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
  gun: {
    type: Object,
    required: true
  }
-  }
 })
+
+const url = computed(() => {
+  return import.meta.env.VITE_API
+})
+
+function confirmDelete() {
+  confirm.require({
+    message: 'Are you sure you want to delete this gun?',
+    header: 'Confirmation',
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      deleteGun()
+    },
+    reject: () => {
+    }
+  });
+}
+
+function deleteGun() {
+  axios.delete(`${import.meta.env.VITE_API}/gun/${props.gun.id}`)
+      .then(() => {
+        router.push('/guns')
+      })
+}
 </script>
--- a/src/localstorage/index.ts
+++ b/src/localstorage/index.ts
@@ -0,0 +1,21 @@
+export function SaveToLocalStorage<T>(key: string, value: T): void {
+  try {
+    const serializedValue = JSON.stringify(value);
+    localStorage.setItem(key, serializedValue);
+  } catch (error) {
+    console.error("Error saving to localStorage", error);
+  }
+}
+
+export function GetFromLocalStorage<T>(key: string): T | null {
+  try {
+    const serializedValue = localStorage.getItem(key);
+    if (serializedValue === null) {
+      return null;
+    }
+    return JSON.parse(serializedValue) as T;
+  } catch (error) {
+    console.error("Error reading from localStorage", error);
+    return null;
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,42 +1,24 @@
 import { createApp } from 'vue'
-// @ts-ignore
+import Aura from '@primeuix/themes/aura';
+
 import App from './App.vue'
 import router from './router'
 import PrimeVue from 'primevue/config';
-import "primevue/resources/primevue.min.css";
-import "primevue/resources/themes/viva-dark/theme.css";
-import "./styles.css"
+
+import './styles.css'

 const app = createApp(App)
 app.use(router)
-app.use(PrimeVue)
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    prefix: "p-",
+  },
+})

-import Menubar from 'primevue/menubar';
-import Button from "primevue/button"
-import Card from 'primevue/card';
-import Calendar from "primevue/calendar";
-import Dropdown from 'primevue/dropdown';
-import InputNumber from 'primevue/inputnumber';
-import Textarea from 'primevue/textarea';
-import FileUpload from 'primevue/fileupload';
-import InputText from 'primevue/inputtext';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import ColumnGroup from 'primevue/columngroup';
-import Row from 'primevue/row';
-
-app.component('Button', Button);
-app.component('Card', Card);
-app.component('Menubar', Menubar);
-app.component('Dropdown', Dropdown);
-app.component('InputNumber', InputNumber);
-app.component('FileUpload', FileUpload);
-app.component('InputText', InputText);
-app.component('DataTable', DataTable);
-app.component('Column', Column);
-app.component('ColumnGroup', ColumnGroup);
-app.component('Calendar', Calendar);
-app.component('Row', Row);
-app.component('Textarea', Textarea);
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+app.use(ConfirmationService)
+app.use(ToastService)

 app.mount('#app')
--- a/src/pages/Add.vue
+++ b/src/pages/Add.vue
@@ -1,31 +1,20 @@
 <template>
  <div class="md:w-2/3">
-    <GunForm @save="save" :gun="gun" />
+    <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
  </div>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
-import {Nullable} from "primevue/ts-helpers";
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue'
 import axios from "axios";
 import {Response} from "../types/Response";
-import GunForm from "../components/GunForm.vue";
+import { useRouter } from 'vue-router'

-interface Data {
-  gun: {
-    make: string
-    model: string
-    serial_number: string
-    purchase_amount: Nullable<number>
-    value_amount: Nullable<number>
-    date_purchased: string
-    notes: string
-  }
-}
+const router = useRouter();

-export default defineComponent({
-  components: {GunForm},
-  data: (): Data => ({
-    gun: {
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'));
+
+const loading = ref(false);
+const gun = ref({
  make: "",
  model: "",
  serial_number: "",
@@ -33,14 +22,14 @@ export default defineComponent({
  value_amount: 0,
  date_purchased: "",
  notes: ""
-    }
-  }),
-  methods: {
-    save() {
-      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
-        this.$router.push('/gun/' + r.data.payload.id)
+});
+
+const photos = ref<Array<File>>([]);
+
+function save() {
+  loading.value = true
+  axios.post(import.meta.env.VITE_API + '/gun', gun.value).then((r: Response<{ id: number }>) => {
+    router.push(`/edit/${r.data.payload.id}`)
  })
 }
-  }
-})
 </script>
--- a/src/pages/Edit.vue
+++ b/src/pages/Edit.vue
@@ -1,65 +1,118 @@
 <template>
-  <div class="w-full flex flex-row flex-wrap justify-around">
-    <div class="w-full lg:w-1/2 m-5">
-      <GunForm @save="save" :gun="gun"/>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+    <div class="w-full">
+      <GunForm :loading="loading" @upload="getGun" v-if="gun" @save="save" :gun="gun"/>
    </div>
-    <div class="mt-10 w-full lg:w-1/2 m-5">
+
+    <div class="">
      <Card>
        <template #content v-if="gun != null">
          <h3 class="text-lg font-bold">
            Images
          </h3>
-          <div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;" class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
+          <div
+               class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
            <div>
-              <a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`">
-                <img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/>
-                {{ photo.file_name }}
-              </a>
+              <Image
+                  preview
+                  :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`"
+              >
+                <template #original="slotProps">
+                  <img
+                      :style="slotProps.style"
+                      :src="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`"
+                      alt="Gun Photo"
+                  />
+                </template>
+              </Image>
            </div>
            <div>
-              <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
+              <ConfirmPopup />
+              <Button size="small" @click="deletePhoto(photo.id)">
+                <i style="color: red;" class="fa-regular fa-1x fa-trash mr-1"></i> Delete Photo
+              </Button>
            </div>
          </div>
        </template>
      </Card>
    </div>
  </div>
-
 </template>
-<script lang="ts">
-import {defineComponent} from "vue"
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref } from 'vue'
 import axios from "axios"
 import {Response} from "../types/Response"
 import {Guns} from "../types/guns";
-import GunForm from "../components/GunForm.vue";
+import { useRoute } from 'vue-router'
+import { useToast } from 'primevue'
+import { useConfirm } from 'primevue/useconfirm'

-interface Data {
-  gun: Guns | null
-}
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'))
+const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'));
+const Image = defineAsyncComponent(() => import('primevue/image'));
+const Button = defineAsyncComponent(() => import('primevue/button'));
+const Card = defineAsyncComponent(() => import('primevue/card'));

-export default defineComponent({
-  components: {GunForm},
-  data: (): Data => ({
-    gun: null
-  }),
-  created() {
-    this.getGun()
-  },
-  computed: {
-    remoteUrl() {
+const route = useRoute()
+const toast = useToast()
+const confirm = useConfirm()
+
+const loading = ref(false)
+const gun = ref<Guns | null>(null)
+
+const remoteUrl = computed(() => {
  return import.meta.env.VITE_API
-    }
-  },
-  methods: {
-    getGun() {
-      axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
-          .then((r: Response<Guns>) => {
-            this.gun = r.data.payload
 })
-    },
-    save() {

-    }
-  }
+function getGun() {
+  axios.get(import.meta.env.VITE_API + `/gun/${route.params.id}`)
+      .then((r: Response<Guns>) => {
+        gun.value = r.data.payload
      })
+}
+
+function deletePhoto(photoId: number) {
+  confirm.require({
+    message: 'Are you sure you want to delete this photo?',
+    acceptClass: 'p-button-danger',
+    acceptIcon: 'fa-solid fa-trash',
+    rejectIcon: 'fa-solid fa-ban',
+    accept: () => {
+      deletePhotoConfirmed(photoId)
+    },
+    reject: () => {}
+  })
+}
+
+function deletePhotoConfirmed(photoId: number) {
+  axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
+  .then(() => {
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: 'Photo deleted successfully',
+      life: 3000
+    })
+    getGun()
+  })
+}
+
+function save() {
+  loading.value = true
+  axios.put(import.meta.env.VITE_API + `/gun/${route.params.id}`, gun.value)
+      .then(() => {
+        toast.add({
+          severity: 'success',
+          summary: 'Success',
+          detail: 'Gun updated successfully',
+          life: 3000
+        })
+        getGun()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+}
+
+getGun()
 </script>
--- a/src/pages/Guns.vue
+++ b/src/pages/Guns.vue
@@ -1,14 +1,39 @@
 <template>
-  <Card>
+  <Card class="w-full">
    <template #title>
      Gun List
    </template>
    <template #content>
-      <DataTable class="p-datatable-sm"  :value="guns">
-        <Column sortable field="id" header="ID"></Column>
-        <Column sortable field="make" header="Make"></Column>
-        <Column sortable field="model" header="Model"></Column>
-        <Column sortable field="value_amount" header="Value">
+      <span class="p-input-icon-left w-full">
+        <InputGroup class="mb-2">
+          <InputGroupAddon>
+            <i class="fa-solid fa-2x fa-magnifying-glass"></i>
+          </InputGroupAddon>
+          <InputText
+              size="small"
+              v-model="filters.global.value"
+              class="w-full mb-3"
+              placeholder="Search"
+          />
+        </InputGroup>
+
+      </span>
+      <DataTable
+          v-if="sortField"
+          :sortField="sortField.field"
+          :sortOrder="sortField.direction"
+          :globalFilterFields="['make', 'model']"
+          :loading="loading"
+          filterDisplay="row"
+          v-model:filters="filters"
+          :value="guns"
+          size="small"
+          @sort="onSortChange"
+      >
+        <Column :sortable="true" field="id" header="ID"></Column>
+        <Column :sortable="true" field="make" header="Make"></Column>
+        <Column :sortable="true" field="model" header="Model"></Column>
+        <Column :sortable="true" field="value_amount" header="Value">
          <template #body="slotProps">
            ${{ slotProps.data.value_amount }}
          </template>
@@ -31,35 +56,81 @@
  </Card>
 </template>
 <script lang="ts">
-import {defineComponent} from "vue";
+const LocalStorageKey = 'sortField'
+</script>
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import {Guns} from "../types/guns";
 import {Response} from "../types/Response";
 import axios from 'axios'
+import { DataTableFilterMetaData, DataTableSortEvent } from 'primevue/datatable'
+import Column from 'primevue/column';
+import { GetFromLocalStorage, SaveToLocalStorage } from '../localstorage'

-interface Data {
-  guns: Array<Guns>
+const Button = defineAsyncComponent(() => import('primevue/button'));
+const Card = defineAsyncComponent(() => import('primevue/card'));
+const InputText = defineAsyncComponent(() => import('primevue/inputtext'));
+const DataTable = defineAsyncComponent(() => import('primevue/datatable'));
+const InputGroup = defineAsyncComponent(() => import('primevue/inputgroup'));
+const InputGroupAddon = defineAsyncComponent(() => import('primevue/inputgroupaddon'));
+
+const guns = ref<Guns[]>([])
+const loading = ref<boolean>(false)
+const filters = ref<{global: DataTableFilterMetaData}>({
+  global: {
+    value: "",
+    matchMode: "contains"
+  } as DataTableFilterMetaData
+})
+
+const sortField = ref<{ field: string, direction: number } | null>(GetFromLocalStorage(LocalStorageKey))
+
+if (!sortField.value) {
+  sortField.value = { field: 'id', direction: 1 }
 }

-export default defineComponent({
-  data: (): Data => ({
-    guns: []
-  }),
-  computed: {
-    total() {
+const total = computed(() => {
  let total = 0;

-      this.guns.map(g => {
+  guns.value.map(g => {
    total += g.value_amount
  })

  return total
-    }
-  },
-  created() {
+})
+
+function fetchGuns() {
+  loading.value = true
  axios.get(import.meta.env.VITE_API + '/gun')
      .then((r: Response<Array<Guns>>) => {
-            this.guns = r.data.payload
+        guns.value = r.data.payload
      })
-  },
+      .finally(() => {
+        loading.value = false
+      })
+}
+
+function onSortChange(event: DataTableSortEvent) {
+  let field = event.sortField || 'id'
+  let direction = event.sortOrder || 1
+
+  if (typeof field !== 'string') {
+    field = 'id'
+  }
+
+  if (!direction || typeof direction === 'undefined') {
+    direction = 1
+  }
+
+  SaveToLocalStorage<{ field: string, direction: number }>(LocalStorageKey, {
+    field: field,
+    direction: direction
+  })
+
+  console.log('onSortChange', event)
+}
+
+onMounted(() => {
+  fetchGuns()
 })
 </script>
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,15 +1,19 @@
 <template>
-<Card class="w-full lg:w-1/2 text-center">
+<Card class="w-full md:w-1/2 text-center">
  <template #title> Welcome to Your Gun Database</template>
  <template #content>
+    <img :src="imgUrl" alt="Gun Database Logo" />
    <router-link to="/guns">
-      <Button>Go To Gun List</Button>
+      <Button class="mt-3">Go To Gun List</Button>
    </router-link>
  </template>
 </Card>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue'

-export default defineComponent({})
+import imgUrl from '../assets/guns.gif'
+
+const Card = defineAsyncComponent(() => import('primevue/card'));
+const Button = defineAsyncComponent(() => import('primevue/button'));
 </script>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,14 +1,9 @@
-import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

-// @ts-ignore
-import Index from "../pages/Index.vue";
-// @ts-ignore
-import BulletCreate from "../pages/bullets/Create.vue";
-// @ts-ignore
-import BulletList from "../pages/bullets/List.vue";
-import Guns from "../pages/Guns.vue";
-import Add from "../pages/Add.vue";
-import Edit from "../pages/Edit.vue";
+const Index = () => import('../pages/Index.vue');
+const Guns = () => import('../pages/Guns.vue');
+const Add  = () => import('../pages/Add.vue');
+const Edit = () => import('../pages/Edit.vue');

 const routes = [
    {
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
--- a/src/types/guns.d.ts
+++ b/src/types/guns.d.ts
@@ -1,13 +1,13 @@
 export interface Guns {
-    id: Number
+    id: number
    make: string
    model: string
-    value_amount: Number
+    value_amount: number
    purchase_amount: number
    photos: Array<Photo>
 }

 export interface Photo {
-    id: Number
+    id: number
    file_name: string
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,9 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,vue}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
  theme: {
    extend: {},
  },
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import vueDevTools from 'vite-plugin-vue-devtools'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss(), vueDevTools(
+    {
+      launchEditor: 'webstorm'
+    }
+  )],
 })
Author	SHA1	Message	Date
Ron Rise	156d77850a	updated page layouts and format	2025-07-30 11:32:53 -04:00
Ron Rise	7358bb1a4c	layout	2025-07-29 13:44:47 -04:00
Ron Rise	e2bc025d6f	env	2025-07-29 13:06:19 -04:00
Ron Rise	c049df9a9f	Add Docker support and update project dependencies; refactor components to use async imports	2025-07-28 18:43:03 -04:00
Ron Rise	26f44fd4ab	This was the most stupid bug in the world, fixed in the smartest way ever	2024-01-24 23:08:43 -05:00
Ron Rise	d49e27bbb0	This bug has driven lots of coders completely mad. You won't believe how it ended up being fixed	2024-01-24 23:00:57 -05:00
Ron Rise	1fe91f4dfa	Never gonna make you cry	2024-01-24 22:39:01 -05:00
Ron Rise	d0803a69ea	Pig	2023-08-07 22:47:26 -04:00
Ron Rise	ac85b16cd8	Ugh. Bad rebase.	2023-08-07 22:12:09 -04:00
Ron Rise	1260cd5a8b	this is how we generate our shit.	2023-08-07 22:08:54 -04:00
Ron Rise	26da7c6281	last hope failed, maybe now	2023-08-07 22:04:04 -04:00
Ron Rise	b7b03f8bab	derp, helper method rename	2023-08-07 21:17:33 -04:00
Ron Rise	5183277554	REALLY FUCKING FIXED	2023-08-07 20:55:32 -04:00