fix: resolve unused imports, broken functions, and standardizing apiFetch in frontend

frontend/src/pages/Feedback.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
 import { 
   Star, 
@@ -64,12 +64,6 @@ const Feedback: React.FC = () => {
   const [stats, setStats] = useState<FeedbackStats | null>(null);
   const [loading, setLoading] = useState(true);
   
-  // Feedbacks list states
-  const [feedbacks, setFeedbacks] = useState<any[]>([]);
-  const [page, setPage] = useState(0);
-  const [totalElements, setTotalElements] = useState(0);
-  const pageSize = 10;
-
   // Modal states
   const [selectedItem, setSelectedItem] = useState<RatedItem | null>(null);
   const [itemDetails, setItemDetails] = useState<ItemDetail[]>([]);
@@ -77,7 +71,7 @@ const Feedback: React.FC = () => {
   const [detailsLoading, setItemDetailsLoading] = useState(false);
   const [detailsPage, setDetailsPage] = useState(0);
   const [detailsTotal, setDetailsTotal] = useState(0);
-  const detailsPageSize = 5;
+  const [detailsPageSize, setDetailsPageSize] = useState(5);
 
   const fetchStats = async () => {
     setLoading(true);
@@ -92,24 +86,13 @@ const Feedback: React.FC = () => {
     }
   };
 
-  const fetchFeedbacks = async () => {
-    try {
-      const response = await apiFetch(`http://${window.location.hostname}:8080/api/feedback?page=${page}&size=${pageSize}`);
-      const data = await response.json();
-      setFeedbacks(data?.content || []);
-      setTotalElements(data?.totalElements || 0);
-    } catch (error) {
-      console.error('Error fetching feedbacks:', error);
-      setFeedbacks([]);
-    }
-  };
 
   const fetchItemData = async (itemName: string, pageNum: number) => {
     setItemDetailsLoading(true);
     try {
       const [detailsRes, statsRes] = await Promise.all([
-        fetch(`http://${window.location.hostname}:8080/api/feedback/item-details?productName=${encodeURIComponent(itemName)}&page=${pageNum}&size=${detailsPageSize}`),
-        fetch(`http://${window.location.hostname}:8080/api/feedback/item-stats?productName=${encodeURIComponent(itemName)}`)
+        apiFetch(`http://${window.location.hostname}:8080/api/feedback/item-details?productName=${encodeURIComponent(itemName)}&page=${pageNum}&size=${detailsPageSize}`),
+        apiFetch(`http://${window.location.hostname}:8080/api/feedback/item-stats?productName=${encodeURIComponent(itemName)}`)
       ]);
       
       const detailsData = await detailsRes.json();
@@ -130,9 +113,7 @@ const Feedback: React.FC = () => {
     fetchStats();
   }, []);
 
-  useEffect(() => {
-    fetchFeedbacks();
-  }, [page]);
+
 
   useEffect(() => {
     if (selectedItem) {
@@ -462,6 +443,7 @@ const Feedback: React.FC = () => {
                      pageSize={detailsPageSize}
                      totalElements={detailsTotal}
                      onPageChange={setDetailsPage}
+                     onPageSizeChange={setDetailsPageSize}
                    />
                 </div>
               )}

frontend/src/pages/NewArrivals.tsx

@@ -1,7 +1,7 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import React, { useState, useEffect, useRef } from 'react';
 import { 
-  X, Search, RefreshCw, Edit2, Package, Image as ImageIcon, 
+  X, RefreshCw, Edit2, Package, Image as ImageIcon, 
   Clock, Check, Trash2, Rocket, ArrowRight, AlertCircle
 } from 'lucide-react';
 
@@ -62,7 +62,6 @@ const NewArrivals: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const [showSessionModal, setShowSessionModal] = useState(false);
-  const [editingDraft, setEditingDraft] = useState<Product | null>(null);
   const [formData, setFormData] = useState<Product | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   
@@ -91,8 +90,8 @@ const NewArrivals: React.FC = () => {
   const fetchMetadata = async () => {
     try {
       const [stallsRes, itemsRes] = await Promise.all([
-        fetch('/api/stalls'),
-        fetch('/api/base-items?size=100')
+        apiFetch('/api/stalls'),
+        apiFetch('/api/base-items?size=100')
       ]);
       setAllStalls(await stallsRes.json());
       const itemsData = await itemsRes.json();
@@ -103,7 +102,6 @@ const NewArrivals: React.FC = () => {
   };
 
   const handleEdit = (product: Product) => {
-    setEditingDraft(product);
     setFormData({
       ...product,
       sessions: product.sessions && product.sessions.length > 0 ? product.sessions : getDefaultSessions()
@@ -124,7 +122,6 @@ const NewArrivals: React.FC = () => {
       });
       if (response.ok) {
         setShowModal(false);
-        setEditingDraft(null);
         setFormData(null);
         fetchDrafts();
       }

frontend/src/pages/PurchaseSummary.tsx

@@ -1,3 +1,4 @@
+import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
 import { 
   Filter, 
@@ -28,8 +29,8 @@ const PurchaseSummary = () => {
         setIsLoading(true);
         // Fetch summary and bills in parallel
         const [summaryRes, billsRes] = await Promise.all([
-          fetch('/api/purchases/summary'),
-          fetch('/api/purchases/orders')
+          apiFetch('/api/purchases/summary'),
+          apiFetch('/api/purchases/orders')
         ]);
         
         if (summaryRes.ok && billsRes.ok) {

frontend/src/pages/Staff.tsx

@@ -1,27 +1,14 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   UserPlus, 
   Search, 
   Trash2, 
-  Shield, 
   Mail, 
   Lock, 
   Check, 
   X,
-  LayoutGrid,
-  Receipt,
-  Users,
-  ShoppingBag,
-  ShoppingCart,
-  Wallet,
-  BarChart3,
-  Table2,
-  CreditCard,
-  Megaphone,
-  MessageSquare,
-  Store,
   Contact
 } from 'lucide-react';
 
@@ -110,7 +97,7 @@ const Staff = () => {
     }
   };
 
-  const filteredStaff = staff.filter(s => {
+  const filteredStaff = staffList.filter(s => {
     const query = (searchQuery || '').toLowerCase();
     return (s.name || '').toLowerCase().includes(query) ||
            (s.email || '').toLowerCase().includes(query);

frontend/src/pages/Stalls.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../api';
+import { apiFetch } from '../api';
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
@@ -195,8 +195,8 @@ const Stalls: React.FC = () => {
     try {
       const host = window.location.hostname;
       const [prodRes, baseRes] = await Promise.all([
-        fetch(`http://${host}:8080/api/products?size=1000`),
-        fetch(`http://${host}:8080/api/base-items?size=100`)
+        apiFetch(`http://${host}:8080/api/products?size=1000`),
+        apiFetch(`http://${host}:8080/api/base-items?size=100`)
       ]);
       
       if (prodRes.ok) {