94 add event fetch from database

.github/workflows/main.yml

@@ -9,19 +9,19 @@ jobs:
   build:
     permissions:
       id-token: write # This is required for requesting the JWT
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+      # - name: Set up Docker Buildx
+      #  uses: docker/setup-buildx-action@v1
 
       - name: configure aws credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
-          role-to-assume: arn:aws:iam::654654236858:role/GithubActions
+          role-to-assume: ${{ secrets.ACTIONS_ROLE_ARN }}
           role-session-name: GitHub_to_AWS_via_FederatedOIDC
           aws-region: us-east-2
 
@@ -31,10 +31,10 @@ jobs:
 
       - name: Build and Push Docker image
         env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry}}
-          REPOSITORY: abide-connect
-          IMAGE_TAG: ${{ github.sha}}
-          DATABASE_URL: "file:./prisma/dev.db"
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.REPOSITORY }}
+          IMAGE_TAG: ${{ github.sha }}
+          DATABASE_URL: 'file:./dev.db'
         run: |
-          docker buildx build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
-          docker buildx build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:prod .
+          docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
+          docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:prod .

app/pages/events/[id].vue

@@ -1,8 +1,10 @@
 <script setup>
+import { router } from 'better-auth/api';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { ref, computed, onMounted } from "vue"
 
 const route = useRoute()
+const router1 = useRouter()
 
 // Get the ID from the route params
 const eventId = route.params.id
@@ -234,7 +236,7 @@ const backNavigate = computed(() => {
             icon="i-lucide-arrow-left"
             variant="ghost"
             class="text-brand4"
-            @click="navigateTo(backNavigate)"
+            @click="router1.back()"
           />
 
           <div v-if="admin" class="flex gap-2">

app/pages/events/index.vue

@@ -7,10 +7,46 @@ const tz = getLocalTimeZone()
 
 const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
 
-const eventClick = () => {
-  navigateTo('/events/event1')
+  async function navigateToEvent(eventId) {
+  console.log('Navigating to event:', eventId)
+  await navigateTo(`/events/${eventId}`)
 }
 
+type Event = {
+  id: string
+  title: string
+  startTime: string
+  location: {
+    id: string
+    address: string
+    latitude: number
+    longitude: number
+  }
+  eventAssets: any[]
+}
+
+const { data: eventsData, pending, error } = await useFetch<Event[]>('/api/events', {
+  default: () => [],
+})
+
+const events = computed(() =>
+  (eventsData.value || [])
+  .filter(e => new Date(e.startTime).getTime() >= Date.now())
+  .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+  .slice(0, 6)
+  .map(e => ({
+    id: e.id,
+    title: e.title,
+    date: new Date(e.startTime).toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric'
+  }),
+  location: e.location,
+  image: e.eventAssets?.[0]?.url ?? '/images/image1.jpeg',
+  }))
+)
+
 const isDateDisabled = (d: DateValue) =>
   d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
 </script>
@@ -31,19 +67,53 @@ const isDateDisabled = (d: DateValue) =>
             :first-day-of-week="0"
             class="rounded-2xl"
           />
-
           </UCard>
-        <h3 class="text-lg font-semibold text-brand4 mb-4">
-          Upcoming Events
-        </h3>
-
+             <!-- Upcoming Events -->
+          <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
+            <h3 class="text-2xl font-semibold text-brand4 mb-4">UPCOMING EVENTS</h3>
+            <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+              <div 
+                  v-for="event in events" 
+                  :key="event.id" 
+                  class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+                  @click.stop="navigateToEvent(event.id)">
 
-        <div class="space-y-4">
-          <EventTile :onclick="eventClick"/>
-          <EventTile />
-          <EventTile />
-          <EventTile />
+                  <!-- Event Image Placeholder-->
+                  <div class="h-35 relative overflow-hidden">
+                    <img
+                      :src="event.image"
+                      class="w-full h-full object-cover"
+                    >
+                  </div>
+
+              <!-- Event Content -->
+              <div class="p-2">
+                <h4 class="text-sm font_semibold text-brand4 mb-1.5"> {{ event.title }}</h4>
+              <div class="space-y-2">
+                <!--Date-->
+                <div class="flex items-center text-gray-600 text-[12px]">
+                  <svg class="w-4 h-4 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                    <line x1="16" y1="2" x2="16" y2="6"/>
+                    <line x1="8" y1="2" x2="8" y2="6"/>
+                    <line x1="3" y1="10" x2="21" y2="10"/>
+                  </svg>
+                  <span>{{ event.date }}</span>
+                </div>
+
+                <!--Location-->
+                <div class="flex items-start text-gray-600 text-[10px]">
+                  <svg class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+                    <circle cx="12" cy="10" r="3"/>
+                  </svg>
+                  <span class="leading-tight"> {{ event.location.address }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </template>

app/pages/inbox.vue

@@ -18,31 +18,38 @@ type Notification = {
   isRead: boolean
 }
 
-// notifications
-const notifications = ref<Notification[]>([
-  {
-    id: '1',
-    title: 'Notification 1',
-    content: 'Thank you for choosing Abide Women’s Health. This message contains several important reminders and helpful instructions to ensure your upcoming visit goes as smoothly as possible. Please plan to arrive 10–15 minutes early to allow time for check-in and any necessary paperwork. If you have recently experienced changes in your medical history, medications, or insurance coverage, bring any updated documents with you so our team can review them before your appointment begins.',
-    createdAt: '2025-10-27T10:30:00Z',
-    isRead: false
-  },
-  {
-    id: '2',
-    title: 'Notification 2',
-    content: 'Message 2',
-    createdAt: '2025-10-26T14:15:00Z',
-    isRead:false
-  },
-  {
-    id: '3',
-    title: 'Notification 3',
-    content: 'Message 3',
-    createdAt: '2025-10-25T09:00:00Z',
-    isRead: false
+
+const { data: sessionData } = await useFetch('/api/auth/get-session')
+const userId = computed(() => (sessionData.value as any)?.user?.id ?? '24f667b1-c09f-4b9e-a57f-96b87d94327d')
+
+
+const notifications = ref<Notification[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const fetchNotification = async () => {
+  if (!userId.value) return 
+  loading.value=true
+  error.value = null
+
+  try {
+    const data = await $fetch<{ notifications: Notification[] }>(
+      `/api/notification/${userId.value}`
+    )
+    notifications.value = data.notifications
+  } catch (err) {
+    console.error("Failed to fetch notifications", err)
+    error.value = "Failed to load notifications"
+  } finally {
+    loading.value = false
   }
-])
+}
+watch(userId, (id) => {
+  if (id) fetchNotification()
+}, { immediate: true }) 
 
+console.log('sessionData:', sessionData.value)
+console.log('userId:', userId.value)
 
 // map to uaccordion items
 const accordionItems = computed(() => 

app/pages/index.vue

@@ -11,42 +11,31 @@ const carouselConfig = {
   touchDrag: true,
   autoplay: 6000,
 }
+
+type Event = {
+  id: string
+  title: string
+  startTime: string
+  location: {
+    id: string
+    address: string
+    latitude: number
+    longitude: number
+  }
+  eventAssets: any[]
+}
+
+const { data: eventsData, pending, error } = await useFetch<Event[]>('/api/events', {
+  default: () => [],
+})
+
 const slides = ref([
   { id: 1, src: '/images/image1.jpeg', alt: 'Slide 1' },
   { id: 2, src: '/images/image1.jpeg', alt: 'Slide 2' },
   { id: 3, src: '/images/image1.jpeg', alt: 'Slide 3' },
   { id: 4, src: '/images/image1.jpeg', alt: 'Slide 4' },
 ])
-const events = ref([
-  {
-    id: 1,
-    name: "Event 1",
-    date: "October 07, 2025",
-    location: "Location 1",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 2,
-    name: "Event 2",
-    date: "October 15, 2025",
-    location: "Location 2",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 3,
-    name: "Event 3",
-    date: "November 03, 2025",
-    location: "Location 3",
-    image: "/images/image1.jpeg"
-  },
-  {
-    id: 4,
-    name: "Event 4",
-    date: "November 20, 2025",
-    location: "Location 4",
-    image: "/images/image1.jpeg"
-  },
-])
+
 
 const handleSignUp = () => {
   navigateTo("/auth/sign-up");
@@ -61,7 +50,7 @@ const services = ref([
   },
   {
     id: 2,
-    name: "Postpatrun Care",
+    name: "Postpatrum Care",
     image: "/images/image1.jpeg",
     href: "https://www.abidewomen.org/postpartumcare"
   },
@@ -79,6 +68,24 @@ const services = ref([
   },
 ])
 
+const events = computed(() =>
+  (eventsData.value || [])
+  .filter(e => new Date(e.startTime).getTime() >= Date.now())
+  .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+  .slice(0, 6)
+  .map(e => ({
+    id: e.id,
+    title: e.title,
+    date: new Date(e.startTime).toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric'
+  }),
+  location: e.location,
+  image: e.eventAssets?.[0]?.url ?? '/images/image1.jpeg',
+  }))
+)
+
 </script>
 
 <template>
@@ -115,14 +122,13 @@ const services = ref([
               <div class="h-35 relative overflow-hidden">
                 <img
                   :src="event.image"
-                  :alt="event.name"
                   class="w-full h-full object-cover"
                 >
               </div>
 
               <!-- Event Content -->
               <div class="p-2">
-                <h4 class="text-sm font_semibold text-brand4 mb-1.5"> {{ event.name }}</h4>
+                <h4 class="text-sm font_semibold text-brand4 mb-1.5"> {{ event.title }}</h4>
               <div class="space-y-2">
                 <!--Date-->
                 <div class="flex items-center text-gray-600 text-[12px]">
@@ -141,7 +147,7 @@ const services = ref([
                     <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                     <circle cx="12" cy="10" r="3"/>
                   </svg>
-                  <span class="leading-tight"> {{ event.location }}</span>
+                  <span class="leading-tight"> {{ event.location.address }}</span>
                 </div>
               </div>
             </div>

prisma/schema/user.prisma

@@ -17,6 +17,8 @@ model User_Notification {
   notification   Notification @relation(fields: [notificationId], references: [id])
   notificationId String
 
+  isRead        Boolean       @default(false)
+
   @@id([userId, notificationId])
   @@map("user_notifications")
 }

prisma/seed/events.json

@@ -4,8 +4,8 @@
       "title": "Childcare Conference",
       "shortDesc": "A conference on childcare best practices",
       "description": "A conference bringing together childcare professionals.",
-      "startTime": "2025-12-15T09:00:00.000Z",
-      "endTime": "2025-12-15T17:00:00.000Z",
+      "startTime": "2027-12-15T09:00:00.000Z",
+      "endTime": "2027-12-15T17:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,
@@ -20,8 +20,8 @@
       "title": "Health and Wellness Fair",
       "shortDesc": "A fair promoting health and wellness in the community",
       "description": "An event focused on health screenings and wellness education.",
-      "startTime": "2025-12-20T10:00:00.000Z",
-      "endTime": "2025-12-20T15:00:00.000Z",
+      "startTime": "2027-12-20T10:00:00.000Z",
+      "endTime": "2027-12-20T15:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,
@@ -36,8 +36,8 @@
       "title": "Maternity Awareness",
       "shortDesc": "Maternity problems and their solutions",
       "description": "A presentation increasing awareness of maternity problems and their solutions",
-      "startTime": "2025-12-21T10:00:00.000Z",
-      "endTime": "2025-12-21T15:00:00.000Z",
+      "startTime": "2027-12-21T10:00:00.000Z",
+      "endTime": "2027-12-21T15:00:00.000Z",
       "location": {
         "longitude": 9.896875,
         "latitude": 32.77659,