managed to get backend calls to count to work

Author: sylee212

client/src/components/ui/backend/organization_call_backend.ts

@@ -8,6 +8,12 @@ import { generateMockMember } from "@/mocks/Members_Details_Interface_Mocks";
 
 // tha main URL
 export const BASE_INVENTORY_URL = "http://localhost:8000/api/inventory/";
+export const COUNT_ITEMS_DUE_THIS_WEEK_URL =
+  "http://localhost:8000/api/inventory/countDueThisWeek/";
+
+export interface django_count_response_interface {
+  count: number;
+}
 
 // change when backend is ready
 const isDev: boolean = false;
@@ -42,6 +48,21 @@ export const getItems = async (
   }
 };
 
+export const getITemsDueThisWeek =
+  async (): Promise<django_count_response_interface> => {
+    const response = await fetch(`${COUNT_ITEMS_DUE_THIS_WEEK_URL}`);
+
+    // 2. Check if the request was successful
+    if (!response.ok) throw new Error("Failed to fetch");
+
+    // 3. Parse the JSON data
+    // because fetcah returns a response, it isnt the data yet,
+    // its just the response header,
+    // you will need to use .json() to get the data
+    // it converts raw bytes to Javascript objects
+    return await response.json(); // Returns the list from Django
+  };
+
 // --- POST: Create a new item ---
 // .stringify, flattens the object
 // headers: { 'Content-Type': 'application/json' } determine, how the data will be dealt with by the server

client/src/components/ui/backend/organization_clean_backend_calls.ts

@@ -6,10 +6,13 @@ import { Member_Details_Interface } from "@/components/ui/card_organization_memb
 import type { Inventory_Details_Interface } from "../card_organization_inventory_details_modal";
 import {
   BASE_INVENTORY_URL,
+  COUNT_ITEMS_DUE_THIS_WEEK_URL,
   createItem,
   createMember,
   deleteItem,
+  django_count_response_interface,
   getItems,
+  getITemsDueThisWeek,
   getMembers,
   updateItem,
   updateMember,
@@ -45,6 +48,14 @@ export interface organization_clean_backend_calls_return_boolean_members_interfa
   refresh: KeyedMutator<boolean>; // Optional refresh function
 }
 
+export interface organization_clean_backend_calls_return_number_interface {
+  data: number;
+  loading: boolean;
+  error: Error | null;
+  isSuccess: boolean;
+  refresh: KeyedMutator<django_count_response_interface>; // Optional refresh function
+}
+
 /*
 This is the class that will call the backend to get the item data / set the item data / update the item data/ delete the item data
 
@@ -152,6 +163,28 @@ export const useOrganizationBackendGetItems = (
   return res;
 };
 
+export const useOrganizationBackendCountItemsDueThisWeek =
+  (): organization_clean_backend_calls_return_number_interface => {
+    const { data, error, isLoading, mutate } = useSWR(
+      COUNT_ITEMS_DUE_THIS_WEEK_URL, // The "Key" (Unique identifier)
+      getITemsDueThisWeek, // The "Fetcher" (Your function)
+      {
+        refreshInterval: 30, // Poll every 30 seconds 30000ms
+        revalidateOnFocus: true, // Refresh when r clicks back into the tab
+      },
+    );
+
+    const res: organization_clean_backend_calls_return_number_interface = {
+      data: data?.count || 0,
+      loading: isLoading,
+      error: error,
+      isSuccess: !isLoading && !error,
+      refresh: mutate, // SWR calls its refresh function "mutate"
+    };
+
+    return res;
+  };
+
 // This is now a standard function, NOT a hook
 // if it is a hook, it will not work, a hook means swr
 export const createItemClean = async (

client/src/pages/organization_dashboard.tsx

@@ -6,6 +6,8 @@ import { useState } from "react";
 
 import {
   organization_clean_backend_calls_return_interface,
+  organization_clean_backend_calls_return_number_interface,
+  useOrganizationBackendCountItemsDueThisWeek,
   useOrganizationBackendGetItems,
 } from "@/components/ui/backend/organization_clean_backend_calls";
 import Inventory_Details_Modal, {
@@ -18,6 +20,8 @@ import Statistics_Card from "../components/ui/card_organization_statistics";
 import Header from "../components/ui/navbar_organization";
 
 const Organization_Dashboard = () => {
+  // calling backend starts //
+
   // this is for calling the data for the modal
   const {
     data,
@@ -31,6 +35,24 @@ const Organization_Dashboard = () => {
   console.log("Error state:", error);
   console.log("Refresh function:", refresh);
 
+  // this is for calling the data for the modal
+  const {
+    data: countItemsDueThisWeekData,
+    loading: countItemsDueThisWeekLoading,
+    error: countItemsDueThisWeekError,
+    refresh: countItemsDueThisWeekRefresh,
+  }: organization_clean_backend_calls_return_number_interface = useOrganizationBackendCountItemsDueThisWeek();
+
+  console.log(
+    "Data from useOrganizationBackendCountItemsDueThisWeek:",
+    countItemsDueThisWeekData,
+  );
+  console.log("Loading state:", countItemsDueThisWeekLoading);
+  console.log("Error state:", countItemsDueThisWeekError);
+  console.log("Refresh function:", countItemsDueThisWeekRefresh);
+
+  // calling backend ends //
+
   // This is for the overlay modal
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedItemData, setSelectedItemData] =
@@ -93,7 +115,7 @@ const Organization_Dashboard = () => {
             />
             <Statistics_Card
               title="Inventory Due"
-              value={2}
+              value={countItemsDueThisWeekData}
               delta="-10 this week"
               status="down"
             />

server/inventory/views.py

@@ -6,6 +6,10 @@
 from rest_framework import viewsets
 from .models import InventoryItem
 from .serializers import InventoryItemSerializer
+from rest_framework.decorators import action
+from rest_framework.response import Response
+from django.utils import timezone
+from datetime import timedelta
 
 class InventoryItemViewSet(viewsets.ModelViewSet):
     serializer_class = InventoryItemSerializer
@@ -35,4 +39,19 @@ def get_queryset(self):
 # class InventoryItemViewSet(viewsets.ModelViewSet):
 #     # This tells the view where to get the data and how to translate it
 #     queryset = InventoryItem.objects.all()
-#     serializer_class = InventoryItemSerializer
+#     serializer_class = InventoryItemSerializer
+
+    # url = GET /api/inventory/countDueThisWeek/
+    @action(detail=False, methods=['get'])
+    def countDueThisWeek(self, request):
+        # 1. Define the time range
+        now = timezone.now()
+        one_week_later = now + timedelta(days=7)
+        
+        # 2. Filter and count in the database (efficient!)
+        count = InventoryItem.objects.filter(
+            dueOn__range=[now, one_week_later]
+        ).count()
+        
+        # 3. Return a simple response
+        return Response({'count': count})