-
-
{title[path]?.title}
-
{title[path]?.subtitle}
+ <>
+
+
+
{pageTitle.title}
+
{pageTitle.subtitle}
+
+
+ {isAuthenticated && user ? (
+ <>
+
+
{user.name || user.username}
+
+ Sign Out
+
+
+ ) : (
+
setShowSignInModal(true)}
+ className='ml-4 bg-main text-white px-4 py-2 rounded hover:bg-main-dark'
+ >
+ Sign In
+
+ )}
+
-
-
-
User Name
-
-
-
+
+
)
}
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..3279d73
--- /dev/null
+++ b/src/contexts/AuthContext.jsx
@@ -0,0 +1,75 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { api } from '../services/api';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const checkAuth = async () => {
+ try {
+ const token = localStorage.getItem('authToken');
+ if (token) {
+ const response = await api.getCurrentUser();
+ if (response.user) {
+ setUser(response.user);
+ } else {
+ localStorage.removeItem('authToken');
+ }
+ }
+ } catch (error) {
+ localStorage.removeItem('authToken');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ checkAuth();
+ }, []);
+
+ const signIn = async (credentials) => {
+ try {
+ const response = await api.signIn(credentials);
+ if (response.user && response.token) {
+ localStorage.setItem('authToken', response.token);
+ setUser(response.user);
+ return { success: true };
+ }
+ return { success: false, error: 'Invalid response' };
+ } catch (error) {
+ return { success: false, error: error.message || 'Sign in failed' };
+ }
+ };
+
+ const signOut = async () => {
+ try {
+ await api.signOut();
+ } catch (error) {
+ console.error('Sign out error:', error);
+ } finally {
+ localStorage.removeItem('authToken');
+ setUser(null);
+ }
+ };
+
+ const value = {
+ user,
+ loading,
+ signIn,
+ signOut,
+ isAuthenticated: !!user,
+ };
+
+ return
{children} ;
+};
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error('useAuth must be used within AuthProvider');
+ }
+ return context;
+};
+
diff --git a/src/pages/StoreInventory.jsx b/src/pages/StoreInventory.jsx
index 0480320..406f447 100644
--- a/src/pages/StoreInventory.jsx
+++ b/src/pages/StoreInventory.jsx
@@ -1,80 +1,397 @@
-// src/pages/Inventory.jsx
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
import Modal from '../components/Modal';
import Header from '../components/Header';
+import Table from '../components/Table/Table';
+import TableActions from '../components/ActionButton/TableActions';
+import Loading from './Loading';
+import { api } from '../services/api';
+import { useAuth } from '../contexts/AuthContext';
-const Inventory = () => {
- // State for UI
+const StoreInventory = () => {
+ const { storeId } = useParams();
+ const [searchParams] = useSearchParams();
+ const { isAuthenticated } = useAuth();
+
const [activeTab, setActiveTab] = useState('books');
const [showModal, setShowModal] = useState(false);
+ const [editingPriceId, setEditingPriceId] = useState(null);
+ const [editPrice, setEditPrice] = useState('');
+
+ const [books, setBooks] = useState([]);
+ const [authors, setAuthors] = useState([]);
+ const [inventory, setInventory] = useState([]);
+ const [store, setStore] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const [selectedBookId, setSelectedBookId] = useState('');
+ const [newPrice, setNewPrice] = useState('');
+ const [bookSearchTerm, setBookSearchTerm] = useState('');
+
+ const searchTerm = searchParams.get('search') || '';
- // Set active tab based on view query param
- const view = 'books';
useEffect(() => {
- if (view === 'authors' || view === 'books') {
- setActiveTab(view);
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ const [booksData, authorsData, inventoryData, storesData] = await Promise.all([
+ api.getBooks(),
+ api.getAuthors(),
+ api.getInventory(),
+ api.getStores(),
+ ]);
+
+ setBooks(Array.isArray(booksData) ? booksData : [booksData]);
+ setAuthors(Array.isArray(authorsData) ? authorsData : [authorsData]);
+ setInventory(Array.isArray(inventoryData) ? inventoryData : [inventoryData]);
+
+ const currentStore = Array.isArray(storesData)
+ ? storesData.find(s => s.id === parseInt(storeId, 10))
+ : null;
+ setStore(currentStore);
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, [storeId]);
+
+ const authorMap = useMemo(() => {
+ return authors.reduce((map, author) => {
+ map[author.id] = `${author.first_name} ${author.last_name}`;
+ return map;
+ }, {});
+ }, [authors]);
+
+ const storeBooks = useMemo(() => {
+ const storeInventory = inventory.filter(
+ (item) => item.store_id === parseInt(storeId, 10)
+ );
+
+ let booksWithInventory = books
+ .filter((book) => storeInventory.some((item) => item.book_id === book.id))
+ .map((book) => {
+ const inventoryItem = storeInventory.find((item) => item.book_id === book.id);
+ return {
+ ...book,
+ inventory_id: inventoryItem.id,
+ price: inventoryItem.price,
+ author_name: authorMap[book.author_id] || 'Unknown Author',
+ };
+ });
+
+ if (searchTerm.trim()) {
+ const lowerSearch = searchTerm.toLowerCase();
+ booksWithInventory = booksWithInventory.filter((book) =>
+ Object.values(book).some((value) =>
+ String(value).toLowerCase().includes(lowerSearch)
+ )
+ );
}
- }, [view]);
- // Modal controls
- const openModal = () => setShowModal(true);
- const closeModal = () => {
- setShowModal(false);
+ return booksWithInventory;
+ }, [storeId, books, inventory, searchTerm, authorMap]);
+
+ const availableBooks = useMemo(() => {
+ const storeInventory = inventory.filter(
+ (item) => item.store_id === parseInt(storeId, 10)
+ );
+ const inventoryBookIds = new Set(storeInventory.map(item => item.book_id));
+
+ let available = books
+ .filter(book => !inventoryBookIds.has(book.id))
+ .map(book => ({
+ ...book,
+ author_name: authorMap[book.author_id] || 'Unknown Author',
+ }));
+
+ if (bookSearchTerm.trim()) {
+ const lowerSearch = bookSearchTerm.toLowerCase();
+ available = available.filter((book) =>
+ book.name.toLowerCase().includes(lowerSearch) ||
+ book.author_name.toLowerCase().includes(lowerSearch)
+ );
+ }
+
+ return available;
+ }, [books, inventory, storeId, authorMap, bookSearchTerm]);
+
+ const columns = useMemo(
+ () => [
+ { header: 'Book Id', accessorKey: 'id' },
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Pages', accessorKey: 'page_count' },
+ { header: 'Author', accessorKey: 'author_name' },
+ {
+ header: 'Price',
+ accessorKey: 'price',
+ cell: ({ row }) =>
+ editingPriceId === row.original.inventory_id ? (
+
setEditPrice(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleSavePrice(row.original.inventory_id);
+ if (e.key === 'Escape') handleCancelEdit();
+ }}
+ onBlur={() => handleSavePrice(row.original.inventory_id)}
+ className="border border-gray-300 rounded p-1 w-24 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ autoFocus
+ />
+ ) : (
+ `$${row.original.price?.toFixed(2) || '0.00'}`
+ ),
+ },
+ {
+ header: 'Actions',
+ id: 'actions',
+ cell: ({ row }) => (
+
handleEditPrice(row.original)}
+ onDelete={() => handleDeleteBook(row.original.inventory_id, row.original.name)}
+ />
+ ),
+ },
+ ],
+ [editingPriceId, editPrice]
+ );
+
+ const handleEditPrice = (book) => {
+ if (!isAuthenticated) {
+ alert('Please sign in to edit books');
+ return;
+ }
+ setEditingPriceId(book.inventory_id);
+ setEditPrice(book.price?.toString() || '');
+ };
+
+ const handleSavePrice = async (inventoryId) => {
+ if (!isAuthenticated) {
+ alert('Please sign in to edit books');
+ return;
+ }
+
+ const price = parseFloat(editPrice);
+ if (isNaN(price) || price < 0) {
+ alert('Please enter a valid price');
+ return;
+ }
+
+ try {
+ const inventoryItem = inventory.find(item => item.id === inventoryId);
+ if (inventoryItem) {
+ try {
+ await api.updateInventoryItem(inventoryId, { ...inventoryItem, price });
+ } catch {
+ // Fallback: update local state
+ }
+ setInventory(prev =>
+ prev.map(item =>
+ item.id === inventoryId ? { ...item, price } : item
+ )
+ );
+ }
+ } catch (error) {
+ console.error('Error updating price:', error);
+ }
+
+ setEditingPriceId(null);
+ setEditPrice('');
};
+ const handleCancelEdit = () => {
+ setEditingPriceId(null);
+ setEditPrice('');
+ };
+
+ const handleDeleteBook = async (inventoryId, bookName) => {
+ if (!isAuthenticated) {
+ alert('Please sign in to delete books');
+ return;
+ }
+
+ if (window.confirm(`Are you sure you want to remove "${bookName}" from this store?`)) {
+ try {
+ try {
+ await api.deleteInventoryItem(inventoryId);
+ } catch {
+ // Fallback: update local state
+ }
+ setInventory(prev => prev.filter(item => item.id !== inventoryId));
+ } catch (error) {
+ console.error('Error deleting inventory item:', error);
+ }
+ }
+ };
+
+ const handleAddNew = () => {
+ if (!isAuthenticated) {
+ alert('Please sign in to add books to inventory');
+ return;
+ }
+ setShowModal(true);
+ setSelectedBookId('');
+ setNewPrice('');
+ setBookSearchTerm('');
+ };
+
+ const handleSaveNewBook = async () => {
+ if (!selectedBookId || !newPrice) {
+ alert('Please select a book and enter a price');
+ return;
+ }
+
+ const price = parseFloat(newPrice);
+ if (isNaN(price) || price < 0) {
+ alert('Please enter a valid price');
+ return;
+ }
+
+ try {
+ const newInventoryItem = {
+ book_id: parseInt(selectedBookId, 10),
+ store_id: parseInt(storeId, 10),
+ price: price,
+ };
+
+ try {
+ await api.createInventoryItem(newInventoryItem);
+ } catch {
+ // Fallback: update local state
+ }
+
+ const newId = inventory.length > 0
+ ? Math.max(...inventory.map(i => i.id)) + 1
+ : 1;
+ setInventory(prev => [...prev, { id: newId, ...newInventoryItem }]);
+
+ setShowModal(false);
+ setSelectedBookId('');
+ setNewPrice('');
+ setBookSearchTerm('');
+ } catch (error) {
+ console.error('Error adding inventory item:', error);
+ }
+ };
+
+ const initialBooks = useMemo(() => {
+ return availableBooks.slice(0, 7);
+ }, [availableBooks]);
+
+ const filteredBooksForDropdown = useMemo(() => {
+ if (!bookSearchTerm.trim()) {
+ return initialBooks;
+ }
+ return availableBooks;
+ }, [bookSearchTerm, availableBooks, initialBooks]);
+
+ if (loading) {
+ return
setActiveTab('books')}
- className={`px-4 border-b-2 py-2 ${activeTab === 'books' ? 'border-b-main' : 'border-b-transparent'}`}
+ className={`px-4 border-b-2 py-2 ${
+ activeTab === 'books' ? 'border-b-main' : 'border-b-transparent'
+ }`}
>
Books
setActiveTab('authors')}
- className={`px-4 border-b-2 py-2 ${activeTab === 'authors' ? 'border-b-main' : 'border-b-transparent'}`}
+ className={`px-4 border-b-2 py-2 ${
+ activeTab === 'authors' ? 'border-b-main' : 'border-b-transparent'
+ }`}
>
Authors
-
+
{activeTab === 'books' ? (
-
No books found in this store.
+ storeBooks.length > 0 ? (
+
+ ) : (
+
No books found in this store.
+ )
) : (
-
No authors with books in this store.
+
No authors with books in this store.
)}
{
+ setShowModal(false);
+ setSelectedBookId('');
+ setNewPrice('');
+ setBookSearchTerm('');
+ }}
show={showModal}
setShow={setShowModal}
>
+
+
+ Search Book
+
+
Select Book
setSelectedBookId(e.target.value)}
className="border border-gray-300 rounded p-2 w-full"
>
+ Select a book...
+ {filteredBooksForDropdown.map((book) => (
+
+ {book.name} - {book.author_name}
+
+ ))}
+ {filteredBooksForDropdown.length === 0 && (
+
No books available
+ )}
-
Price
+