ez deploy

Dockerfile

@@ -5,7 +5,7 @@
 # This project by default uses pnpm.
 # If you wish to use npm, delete "pnpm-lock.yaml" first.
 
-# 1. pnpm (or npm) i # If you get gnu problems, use --force
+# 1. pnpm (or npm) i # If you get GNU problems, use pnpm (or npm) i --force
 # 2. pnpm (or npm) run build # Sit back while it compiles
 # 3. sudo docker build . -t myapp:latest (replace 'myapp' to whatever tag you wanna give your image)
 
@@ -13,7 +13,7 @@
 # Now you just need to create the container
 
 # Here is an example command for creating a container
-# sudo docker run -d --name myappcontainer --network host -e PORT=3001 myapp:latest
+# sudo docker run -d --name myappcontainer --network host -e PORT=3000 myapp:latest
 
 FROM node:22-alpine
 WORKDIR /app
@@ -27,6 +27,4 @@ ENV HOST=0.0.0.0
 
 EXPOSE 3000
 
-#VOLUME [ "/app" ]
-
 CMD ["node", "/app/server/index.mjs"]

README.md

@@ -7,69 +7,37 @@ Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduct
 Make sure to install dependencies:
 
 ```bash
-# npm
+npm i -g pnpm # (updates your pnpm :D)
-npm install
-
-# pnpm
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
+(this project uses PNPM)
 
 ## Development Server
 
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
-npm run dev
-
-# pnpm
 pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+## Deployment
-
-Build the application for production:
 
 ```bash
-# npm
-npm run build
-
-# pnpm
 pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
 Locally preview production build:
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
 pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
+Start the production server
+```bash
+node .output/server/index.mjs
+```
+
+### Check out the docker file to turn your app into a container for easy deployment!
+
+
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/pages/dashboard.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import type { TableColumn } from "@nuxt/ui"
+import { h } from 'vue'
+
   definePageMeta({
     layout: "dashboard"
   });
@@ -9,12 +12,12 @@
     {
       title: "1",
       icon: "meteor-icons:chevron-up",
-      desc: "pila"
+      desc: "epah ya bro"
     },
     {
       title: "2",
       icon: "majesticons:award",
-      desc: "bolas"
+      desc: "bolinhas de natal ou whatever"
     },
     {
       title: "3",
@@ -23,6 +26,98 @@
     },
 
   ];
+  // create the object itself
+  type Payment = {
+    id: string,
+    date: string,
+    status: string,
+    email: string,
+    amount: number
+
+  }
+  const table_demo = ref<Payment[]>([
+    {
+      id: '4600',
+      date: '2024-03-11T15:30:00',
+      status: 'paid',
+      email: 'james.anderson@example.com',
+      amount: 594
+    },
+    {
+      id: '4599',
+      date: '2024-03-11T10:10:00',
+      status: 'failed',
+      email: 'mia.white@example.com',
+      amount: 276
+    },
+    {
+      id: '4598',
+      date: '2024-03-11T08:50:00',
+      status: 'refunded',
+      email: 'william.brown@example.com',
+      amount: 315
+    },
+    {
+      id: '4597',
+      date: '2024-03-10T19:45:00',
+      status: 'paid',
+      email: 'emma.davis@example.com',
+      amount: 529
+    },
+    {
+      id: '4596',
+      date: '2024-03-10T15:55:00',
+      status: 'paid',
+      email: 'ethan.harris@example.com',
+      amount: 639
+    }
+  ])
+
+  const table_headers: TableColumn<Payment>[] = [
+    {
+      accessorKey: 'id',
+      header: "ID",
+      cell: ({ row }) => `#${row.getValue('id')}`
+    },
+    {
+      accessorKey: 'date',
+      header: "Date",
+      cell: ({ row }) => {
+        return new Date(row.getValue('date')).toLocaleString("pt-PT",{
+          day: "numeric",
+          month: "short",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false
+        })
+      }
+    },
+    {
+      accessorKey: 'status',
+      header: "Status",
+      cell: ({row}) => {
+        let color: string;
+        switch(row.getValue('status')){
+          case "paid":
+            color = "success"; break;
+          case "failed":
+            color = "error"; break;
+          case "refunded":
+            color = "warning"; break;
+          default:
+            color = "neutral";
+        }
+        return h(UBadge, { class: "capitalize", variant: "subtle", color },
+            () => row.getValue("status"))
+        }
+    },
+    {
+      accessorKey: 'amount',
+      header: "Ammount",
+      cell: ({ row }) => { return "€" + row.getValue('amount') }
+    }
+  ]
+
 </script>
 
 <template>
@@ -30,24 +125,26 @@
     
     <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
 
-    <div class="mt-1 mb-2 flex flex-col w-full relative z-0">
+    <div class="mt-1 mb-3 flex flex-col w-full relative z-0">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
       <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
       <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
     </div>
     
-    <div class="mx-auto max-w-220">
+    <!--<div class="mx-auto max-w-220">-->
-      <div class="row">
+      <UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
           <UPageCard 
             v-for="card in cards"
             :title="card.title"
             :description="card.desc"
             :icon="card.icon"
             variant="subtle"
-            class="dark-widget-bg col-md"
+            class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
           />
-        </div>
+      </UPageGrid>
-    </div>
+
+
+    <UTable :data="table_demo" :columns="table_headers"/>
   </UContainer>
 </template>