mangoose-xempp 1.0.0

package/templates/LMS/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "lms-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.3"
+  }
+}

package/templates/LMS/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/LMS/frontend/src/App.jsx

@@ -0,0 +1,53 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from './context/AuthContext';
+import Layout from './components/Layout';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Dashboard from './pages/Dashboard';
+import Books from './pages/Books';
+import Members from './pages/Members';
+import Borrowings from './pages/Borrowings';
+import Reports from './pages/Reports';
+
+function PrivateRoute({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
+      </div>
+    );
+  }
+  return user ? children : <Navigate to="/login" />;
+}
+
+function PublicRoute({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return null;
+  return user ? <Navigate to="/dashboard" /> : children;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
+      <Route path="/register" element={<PublicRoute><Register /></PublicRoute>} />
+      <Route
+        path="/"
+        element={
+          <PrivateRoute>
+            <Layout />
+          </PrivateRoute>
+        }
+      >
+        <Route index element={<Navigate to="/dashboard" />} />
+        <Route path="dashboard" element={<Dashboard />} />
+        <Route path="books" element={<Books />} />
+        <Route path="members" element={<Members />} />
+        <Route path="borrowings" element={<Borrowings />} />
+        <Route path="reports" element={<Reports />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/dashboard" />} />
+    </Routes>
+  );
+}

package/templates/LMS/frontend/src/components/Layout.jsx

@@ -0,0 +1,61 @@
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const navItems = [
+  { to: '/dashboard', label: 'Dashboard', icon: '📊' },
+  { to: '/books', label: 'Books', icon: '📚' },
+  { to: '/members', label: 'Members', icon: '👥' },
+  { to: '/borrowings', label: 'Borrowings', icon: '📖' },
+  { to: '/reports', label: 'Reports', icon: '📄' },
+];
+
+export default function Layout() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex">
+      <aside className="w-64 bg-primary-900 text-white flex flex-col">
+        <div className="p-6 border-b border-primary-800">
+          <h1 className="text-xl font-bold">📚 LMS</h1>
+          <p className="text-primary-300 text-sm mt-1">Library Management</p>
+        </div>
+        <nav className="flex-1 p-4 space-y-1">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                  isActive ? 'bg-primary-700 text-white' : 'text-primary-200 hover:bg-primary-800'
+                }`
+              }
+            >
+              <span>{item.icon}</span>
+              <span>{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+        <div className="p-4 border-t border-primary-800">
+          <div className="px-4 py-2 mb-2">
+            <p className="text-sm font-medium truncate">{user?.name}</p>
+            <p className="text-xs text-primary-400 truncate">{user?.email}</p>
+          </div>
+          <button onClick={handleLogout} className="w-full btn bg-primary-800 hover:bg-primary-700 text-sm">
+            Logout
+          </button>
+        </div>
+      </aside>
+      <main className="flex-1 overflow-auto">
+        <div className="p-8">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/LMS/frontend/src/components/Modal.jsx

@@ -0,0 +1,15 @@
+export default function Modal({ isOpen, onClose, title, children }) {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-lg font-semibold">{title}</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
+        </div>
+        <div className="p-6">{children}</div>
+      </div>
+    </div>
+  );
+}

package/templates/LMS/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import api from '../services/api';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    const saved = localStorage.getItem('user');
+    if (token && saved) {
+      setUser(JSON.parse(saved));
+      api.get('/auth/me').catch(() => logout());
+    }
+    setLoading(false);
+  }, []);
+
+  const login = async (email, password) => {
+    const { data } = await api.post('/auth/login', { email, password });
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    setUser(data.user);
+    return data;
+  };
+
+  const register = async (name, email, password) => {
+    const { data } = await api.post('/auth/register', { name, email, password });
+    localStorage.setItem('token', data.token);
+    localStorage.setItem('user', JSON.stringify(data.user));
+    setUser(data.user);
+    return data;
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

package/templates/LMS/frontend/src/index.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700;
+  }
+  .btn-secondary {
+    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
+  }
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700;
+  }
+  .btn-success {
+    @apply btn bg-green-600 text-white hover:bg-green-700;
+  }
+  .input {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+  .label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+  .card {
+    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6;
+  }
+}

package/templates/LMS/frontend/src/main.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { AuthProvider } from './context/AuthContext';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/LMS/frontend/src/pages/Books.jsx

@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import Modal from '../components/Modal';
+
+const emptyBook = { title: '', author: '', isbn: '', category: '', quantity: 1, published_year: '' };
+
+export default function Books() {
+  const [books, setBooks] = useState([]);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [form, setForm] = useState(emptyBook);
+  const [error, setError] = useState('');
+
+  const fetchBooks = async () => {
+    setLoading(true);
+    try {
+      const { data } = await api.get('/books', { params: { search: search || undefined } });
+      setBooks(data);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchBooks(); }, []);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    fetchBooks();
+  };
+
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyBook);
+    setError('');
+    setModalOpen(true);
+  };
+
+  const openEdit = (book) => {
+    setEditing(book);
+    setForm({
+      title: book.title,
+      author: book.author,
+      isbn: book.isbn || '',
+      category: book.category || '',
+      quantity: book.quantity,
+      published_year: book.published_year || '',
+    });
+    setError('');
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      const payload = {
+        ...form,
+        quantity: Number(form.quantity),
+        published_year: form.published_year ? Number(form.published_year) : null,
+      };
+      if (editing) {
+        await api.put(`/books/${editing.id}`, payload);
+      } else {
+        await api.post('/books', payload);
+      }
+      setModalOpen(false);
+      fetchBooks();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Operation failed.');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Delete this book?')) return;
+    try {
+      await api.delete(`/books/${id}`);
+      fetchBooks();
+    } catch (err) {
+      alert(err.response?.data?.message || 'Delete failed.');
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Books</h1>
+        <button onClick={openCreate} className="btn-primary">+ Add Book</button>
+      </div>
+
+      <form onSubmit={handleSearch} className="flex gap-2 mb-6">
+        <input
+          className="input max-w-sm"
+          placeholder="Search by title, author, ISBN..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <button type="submit" className="btn-secondary">Search</button>
+      </form>
+
+      <div className="card overflow-x-auto">
+        {loading ? (
+          <div className="flex justify-center py-10"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" /></div>
+        ) : books.length === 0 ? (
+          <p className="text-gray-500 text-center py-10">No books found. Add your first book!</p>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b text-left text-gray-500">
+                <th className="pb-3 pr-4">Title</th>
+                <th className="pb-3 pr-4">Author</th>
+                <th className="pb-3 pr-4">ISBN</th>
+                <th className="pb-3 pr-4">Category</th>
+                <th className="pb-3 pr-4">Qty</th>
+                <th className="pb-3 pr-4">Available</th>
+                <th className="pb-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {books.map((book) => (
+                <tr key={book.id} className="border-b border-gray-50 hover:bg-gray-50">
+                  <td className="py-3 pr-4 font-medium">{book.title}</td>
+                  <td className="py-3 pr-4">{book.author}</td>
+                  <td className="py-3 pr-4 text-gray-500">{book.isbn || '-'}</td>
+                  <td className="py-3 pr-4">{book.category || '-'}</td>
+                  <td className="py-3 pr-4">{book.quantity}</td>
+                  <td className="py-3 pr-4">
+                    <span className={book.available > 0 ? 'text-green-600' : 'text-red-600'}>{book.available}</span>
+                  </td>
+                  <td className="py-3 space-x-2">
+                    <button onClick={() => openEdit(book)} className="text-primary-600 hover:underline">Edit</button>
+                    <button onClick={() => handleDelete(book.id)} className="text-red-600 hover:underline">Delete</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit Book' : 'Add Book'}>
+        {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="label">Title *</label>
+            <input className="input" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} required />
+          </div>
+          <div>
+            <label className="label">Author *</label>
+            <input className="input" value={form.author} onChange={(e) => setForm({ ...form, author: e.target.value })} required />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="label">ISBN</label>
+              <input className="input" value={form.isbn} onChange={(e) => setForm({ ...form, isbn: e.target.value })} />
+            </div>
+            <div>
+              <label className="label">Category</label>
+              <input className="input" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="label">Quantity</label>
+              <input type="number" min="1" className="input" value={form.quantity} onChange={(e) => setForm({ ...form, quantity: e.target.value })} />
+            </div>
+            <div>
+              <label className="label">Published Year</label>
+              <input type="number" className="input" value={form.published_year} onChange={(e) => setForm({ ...form, published_year: e.target.value })} />
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="submit" className="btn-primary flex-1">{editing ? 'Update' : 'Create'}</button>
+            <button type="button" onClick={() => setModalOpen(false)} className="btn-secondary">Cancel</button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}

package/templates/LMS/frontend/src/pages/Borrowings.jsx

@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import Modal from '../components/Modal';
+
+export default function Borrowings() {
+  const [borrowings, setBorrowings] = useState([]);
+  const [books, setBooks] = useState([]);
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [form, setForm] = useState({ book_id: '', member_id: '', due_date: '' });
+  const [error, setError] = useState('');
+  const [filter, setFilter] = useState('');
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [borRes, bookRes, memRes] = await Promise.all([
+        api.get('/borrowings', { params: { status: filter || undefined } }),
+        api.get('/books'),
+        api.get('/members', { params: { status: 'active' } }),
+      ]);
+      setBorrowings(borRes.data);
+      setBooks(bookRes.data.filter((b) => b.available > 0));
+      setMembers(memRes.data);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchData(); }, [filter]);
+
+  const handleIssue = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      await api.post('/borrowings', {
+        book_id: Number(form.book_id),
+        member_id: Number(form.member_id),
+        due_date: form.due_date || undefined,
+      });
+      setModalOpen(false);
+      setForm({ book_id: '', member_id: '', due_date: '' });
+      fetchData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to issue book.');
+    }
+  };
+
+  const handleReturn = async (id) => {
+    if (!confirm('Mark this book as returned?')) return;
+    try {
+      const { data } = await api.put(`/borrowings/${id}/return`);
+      const msg = data.fine > 0 ? `Book returned. Fine: $${data.fine}` : 'Book returned successfully.';
+      alert(msg);
+      fetchData();
+    } catch (err) {
+      alert(err.response?.data?.message || 'Return failed.');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('Delete this record?')) return;
+    try {
+      await api.delete(`/borrowings/${id}`);
+      fetchData();
+    } catch (err) {
+      alert(err.response?.data?.message || 'Delete failed.');
+    }
+  };
+
+  const defaultDue = () => {
+    const d = new Date();
+    d.setDate(d.getDate() + 14);
+    return d.toISOString().split('T')[0];
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Borrowings</h1>
+        <button onClick={() => { setError(''); setModalOpen(true); }} className="btn-primary">+ Issue Book</button>
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        {['', 'borrowed', 'returned'].map((s) => (
+          <button
+            key={s || 'all'}
+            onClick={() => setFilter(s)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filter === s ? 'bg-primary-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            {s === '' ? 'All' : s.charAt(0).toUpperCase() + s.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div className="card overflow-x-auto">
+        {loading ? (
+          <div className="flex justify-center py-10"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" /></div>
+        ) : borrowings.length === 0 ? (
+          <p className="text-gray-500 text-center py-10">No borrowing records.</p>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b text-left text-gray-500">
+                <th className="pb-3 pr-4">Book</th>
+                <th className="pb-3 pr-4">Member</th>
+                <th className="pb-3 pr-4">Borrowed</th>
+                <th className="pb-3 pr-4">Due Date</th>
+                <th className="pb-3 pr-4">Returned</th>
+                <th className="pb-3 pr-4">Status</th>
+                <th className="pb-3 pr-4">Fine</th>
+                <th className="pb-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {borrowings.map((b) => {
+                const overdue = b.status === 'borrowed' && b.due_date < new Date().toISOString().split('T')[0];
+                return (
+                  <tr key={b.id} className="border-b border-gray-50 hover:bg-gray-50">
+                    <td className="py-3 pr-4 font-medium">{b.book_title}</td>
+                    <td className="py-3 pr-4">{b.member_name}</td>
+                    <td className="py-3 pr-4">{b.borrow_date?.split('T')[0]}</td>
+                    <td className={`py-3 pr-4 ${overdue ? 'text-red-600 font-medium' : ''}`}>{b.due_date?.split('T')[0]}</td>
+                    <td className="py-3 pr-4">{b.return_date?.split('T')[0] || '-'}</td>
+                    <td className="py-3 pr-4">
+                      <span className={`px-2 py-1 rounded-full text-xs ${
+                        b.status === 'borrowed'
+                          ? overdue ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                          : 'bg-green-100 text-green-800'
+                      }`}>
+                        {overdue ? 'overdue' : b.status}
+                      </span>
+                    </td>
+                    <td className="py-3 pr-4">{b.fine > 0 ? `$${b.fine}` : '-'}</td>
+                    <td className="py-3 space-x-2 whitespace-nowrap">
+                      {b.status === 'borrowed' && (
+                        <button onClick={() => handleReturn(b.id)} className="text-green-600 hover:underline">Return</button>
+                      )}
+                      <button onClick={() => handleDelete(b.id)} className="text-red-600 hover:underline">Delete</button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title="Issue Book">
+        {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
+        <form onSubmit={handleIssue} className="space-y-4">
+          <div>
+            <label className="label">Book *</label>
+            <select className="input" value={form.book_id} onChange={(e) => setForm({ ...form, book_id: e.target.value })} required>
+              <option value="">Select a book</option>
+              {books.map((b) => (
+                <option key={b.id} value={b.id}>{b.title} — {b.author} ({b.available} avail.)</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="label">Member *</label>
+            <select className="input" value={form.member_id} onChange={(e) => setForm({ ...form, member_id: e.target.value })} required>
+              <option value="">Select a member</option>
+              {members.map((m) => (
+                <option key={m.id} value={m.id}>{m.name} ({m.email})</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="label">Due Date</label>
+            <input
+              type="date"
+              className="input"
+              value={form.due_date || defaultDue()}
+              onChange={(e) => setForm({ ...form, due_date: e.target.value })}
+            />
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="submit" className="btn-primary flex-1">Issue Book</button>
+            <button type="button" onClick={() => setModalOpen(false)} className="btn-secondary">Cancel</button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}