matarial-init 1.0.0

package/src/constants/storageKeys.js

@@ -0,0 +1,151 @@
+export const STORAGE_KEYS = {
+    USERS: "users",
+    CURRENT_USER: "currentUser",
+    BOOKS: "books"
+}
+
+export const SIDEBAR_MENU = [
+    {
+        id: 1,
+        title: "Dashboard",
+        path: "/dashboard",
+        permission: "VIEW_DASHBOARD"
+    },
+    {
+        id: 2,
+        title: "Books",
+        path: "/books",
+        permission: "VIEW_BOOKS"
+    },
+    {
+        id: 3,
+        title: "MyBooks",
+        path: "/mybooks",
+        permission: "VIEW_MyBOOKS"
+    },
+    {
+        id: 4,
+        title: "Members",
+        path: "/members",
+        permission: "VIEW_MEMBER"
+    },
+    {
+        id: 5,
+        title: "Penalty",
+        path: "/penalty",
+        permission: "VIEW_PANALTY"
+    }
+];
+
+export const signUpFields = [
+    {
+        name: "username",
+        type: "text",
+        placeholder: "Username"
+    },
+    {
+        name: "email",
+        type: "email",
+        placeholder: "Email"
+    },
+    {
+        name: "password",
+        type: "password",
+        placeholder: "Password"
+    },
+    {
+        name: "confirmPassword",
+        type: "password",
+        placeholder: "Confirm Password"
+    }
+]
+
+export const memberFields = [
+    {
+        name: "username",
+        type: "text",
+        placeholder: "Username"
+    },
+    {
+        name: "email",
+        type: "email",
+        placeholder: "Email"
+    },
+    {
+        name: "password",
+        type: "password",
+        placeholder: "Password"
+    },
+    {
+        name: "confirmPassword",
+        type: "password",
+        placeholder: "Confirm Password"
+    },
+    {
+        name: "role",
+        type: "select",
+        placeholder: "Role",
+        options: [
+            { value: "member", label: "Member" },
+            { value: "librarian", label: "Librarian" },
+            { value: "admin", label: "Admin" },
+        ]
+    }
+]
+
+export const booksFields = [
+    {
+        name: "title",
+        type: "text",
+        placeholder: "Book Name"
+    },
+    {
+        name: "author",
+        type: "text",
+        placeholder: "Author Name"
+    },
+    {
+        name: "isbn",
+        type: "text",
+        placeholder: "ISBN Number"
+    },
+    {
+        name: "category",
+        type: "text",
+        placeholder: "category Name"
+    },
+    {
+        name: "quantity",
+        type: "number",
+        placeholder: "NBooks Quantity"
+    }
+]
+
+export const mybooksFields = [
+    {
+        name: "returndate",
+        type: "date",
+        placeholder: "Return date"
+    },
+]
+
+export const mamberColumn = [
+    { key: "username", title: "UserName" },
+    { key: "email", title: "Email" },
+    { key: "role", title: "Role" }
+]
+
+export const bookColumn = [
+    { key: "title", title: "Title" },
+    { key: "author", title: "Author" },
+    { key: "isbn", title: "ISBN" },
+    { key: "category", title: "Category" },
+    { key: "quantity", title: "Quantity" }
+
+]
+
+export const Role = {
+    ADMIN: "admin",
+    Member: "member",
+    LIBRARIAN: "librarian"
+}

package/src/context/DataContext.jsx

@@ -0,0 +1,19 @@
+import { useMemo } from "react"
+import { DataContext, defaultSource } from "./dataContext"
+
+export const DataProvider = ({
+  children,
+  source = defaultSource,
+  refreshInterval = null
+}) => {
+  const value = useMemo(() => ({
+    source,
+    refreshInterval
+  }), [source, refreshInterval])
+
+  return (
+    <DataContext.Provider value={value}>
+      {children}
+    </DataContext.Provider>
+  )
+}

package/src/context/dataContext.js

@@ -0,0 +1,22 @@
+import { createContext } from "react"
+
+const PUBLIC_API_BASE = "https://jsonplaceholder.typicode.com"
+
+// Default source handler that fetches from the public placeholder API (JSONPlaceholder)
+export const defaultSource = {
+  get: async (key) => {
+    const url = key.startsWith("http://") || key.startsWith("https://")
+      ? key
+      : `${PUBLIC_API_BASE}/${key.replace(/^\//, "")}`
+
+    const response = await fetch(url)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch from ${url} (${response.status} ${response.statusText})`)
+    }
+    return await response.json()
+  },
+  set: async (key, nextData) => nextData,
+  remove: async () => null,
+}
+
+export const DataContext = createContext(null)

package/src/context/useData.jsx

@@ -0,0 +1,98 @@
+import { useCallback, useContext, useEffect, useState } from "react"
+import { DataContext } from "./dataContext"
+
+export const useData = (key) => {
+    const context = useContext(DataContext)
+    const [data, setData] = useState(null)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+
+    if (!context) {
+        throw new Error("useData must be used inside DataProvider")
+    }
+
+    const { source, refreshInterval } = context
+
+    const refresh = useCallback(async () => {
+        setLoading(true)
+        try {
+            const nextData = await source.get(key)
+            setData(nextData)
+            setError(null)
+            return nextData
+        } catch (nextError) {
+            setError(nextError)
+            return null
+        } finally {
+            setLoading(false)
+        }
+    }, [key, source])
+
+    useEffect(() => {
+        let isMounted = true
+        const timeoutId = setTimeout(() => {
+            if (isMounted) {
+                refresh().catch(() => {})
+            }
+        }, 0)
+        return () => {
+            isMounted = false
+            clearTimeout(timeoutId)
+        }
+    }, [refresh])
+
+    useEffect(() => {
+        if (!refreshInterval) return undefined
+        const intervalId = setInterval(() => {
+            refresh().catch(() => {})
+        }, refreshInterval)
+        return () => clearInterval(intervalId)
+    }, [refresh, refreshInterval])
+
+    const save = async (nextData) => {
+        setLoading(true)
+        try {
+            const savedData = await source.set(key, nextData)
+            setData(savedData)
+            setError(null)
+            return savedData
+        } catch (nextError) {
+            setError(nextError)
+            throw nextError
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const collection = Array.isArray(data) ? data : []
+
+    const runMutation = (mutation) => save(mutation(collection))
+
+    const clear = async () => {
+        setLoading(true)
+        try {
+            const nextData = await source.remove(key)
+            setData(nextData)
+            return nextData
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return {
+        data,
+        collection,
+        loading,
+        error,
+        refresh,
+        getData: () => data,
+        findData: (callback) => collection.find(callback),
+        filterData: (callback) => collection.filter(callback),
+        setData: save,
+        addData: (item) => runMutation((items) => [item, ...items]),
+        updateData: (callback) => runMutation((items) => items.map(callback)),
+        deleteData: (callback) => runMutation((items) => items.filter(callback)),
+        clearData: clear,
+        existData: () => data !== null,
+    }
+}

package/src/hooks/usePermission.jsx

@@ -0,0 +1,14 @@
+import { PERMISSIONS } from "../constants/permissions"
+import { STORAGE_KEYS } from "../constants/storageKeys"
+import { getCollection } from "../uttils/persistence"
+
+export const usePermission = () => {
+    const currentUser = getCollection(STORAGE_KEYS.CURRENT_USER)
+    const hashPermission = (permission) => {
+        if (!currentUser) {
+            return false
+        }
+        return PERMISSIONS[permission]?.includes(currentUser?.role)
+    }
+    return { currentUser, hashPermission }
+}

package/src/layout/DashboardLayout.jsx

@@ -0,0 +1,31 @@
+import { Outlet } from "react-router-dom"
+import { Sidebar } from "../components/Sidebar"
+import { Header } from "../components/Header"
+
+export const DashboardLayout = () => {
+    return (
+        <div className="flex h-screen">
+
+            {/* Sidebar */}
+            <aside className="w-64 border-r">
+                <Sidebar />
+            </aside>
+
+            {/* Right Section */}
+            <div className="flex-1 flex flex-col">
+
+                {/* Header */}
+                <header className="h-16 border-b flex items-center px-4 bg-gray-600 text-white font-bold">
+                    <Header />
+                </header>
+
+                {/* Main Content */}
+                <main className="flex-1 overflow-auto p-5">
+                    <Outlet />
+                </main>
+
+            </div>
+
+        </div>
+    )
+}

package/src/layout/PublicLayout.jsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "../components/Navbar"
+
+export const PublicLayout = () => {
+    return (
+        <div>
+            <Navbar />
+            <main>
+                <Outlet />
+            </main>
+        </div>
+    )
+}

package/src/main.jsx

@@ -0,0 +1,10 @@
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.jsx'
+import './App.css'
+import { createRoot } from 'react-dom/client'
+
+createRoot(document.getElementById('root')).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+)

package/src/pages/Books.jsx

@@ -0,0 +1,121 @@
+import { use, useState } from "react";
+import Button from "../components/Button";
+import { Table } from "../components/Table";
+import { bookColumn, booksFields, STORAGE_KEYS } from "../constants/storageKeys";
+import { addData, deleteData, findData, getCollection, updateData } from "../uttils/persistence";
+import { Modal } from "../components/Modal";
+import Input from "../components/Input";
+import { useFormik } from "formik";
+import { toast } from "react-toastify";
+import { addBookSchema } from "../validation/Validation";
+
+const Books = () => {
+  const [open, setOpen] = useState(false)
+  const [editBook, setEditBook] = useState(null)
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+  const [deleteBook, setDeleteBook] = useState(null)
+  const books = getCollection(STORAGE_KEYS.BOOKS) || [];
+
+  const handleSignUp = (values, { setFieldError, resetForm }) => {
+    if (editBook) {
+      updateData(STORAGE_KEYS.BOOKS, (book) =>
+        book.id === editBook.id
+          ? { ...book, ...values }
+          : book
+      );
+      toast.success("Book updated successfully")
+      resetForm()
+      setEditBook(null)
+      setOpen(false)
+      return
+    } else {
+      const existingBook = findData(STORAGE_KEYS.BOOKS, (book) => book.isbn === values.isbn)
+      if (existingBook) {
+        setFieldError("isbn", "isbn already exists")
+        return
+      }
+      addData(STORAGE_KEYS.BOOKS, {
+        id: crypto.randomUUID(),
+        ...values
+      });
+      toast.success("Book added successfull")
+      resetForm()
+      setOpen(false);
+    }
+  }
+
+  const handleEdit = (book) => {
+    setOpen(true)
+    setEditBook(book)
+  }
+
+  const handleDelete = (book) => {
+    setDeleteBook(book)
+    setDeleteModalOpen(true)
+  }
+
+  const confirmDelete = () => {
+    deleteData(STORAGE_KEYS.BOOKS, ((item) => item.id !== deleteBook.id))
+    toast.success("Book Deleted Successfully")
+    setDeleteBook(null);
+    setDeleteModalOpen(false);
+  }
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      title: editBook?.title || "",
+      author: editBook?.author || "",
+      isbn: editBook?.isbn || "",
+      category: editBook?.category || "",
+      quantity: editBook?.quantity || 0
+    },
+    validationSchema: addBookSchema,
+    onSubmit: handleSignUp
+  });
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-bold">Books</h1>
+        <Button className="bg-gray-400 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" text="Add Books" onClick={() => { setOpen(true) }} />
+      </div>
+      <Table data={books} column={bookColumn} action={[{ label: "Edit", onClick: handleEdit, className: "bg-green-700 hover:bg-green-900 text-white" }, { label: "Delete", onClick: handleDelete, className: "bg-red-700 hover:bg-red-900 text-white" }]} />
+      <Modal isOpen={open} onClose={() => setOpen(false)} title="Create new user" submit={formik.handleSubmit}>
+        <form onSubmit={formik.handleSubmit} className="flex flex-col gap-4 border p-4 mb-4 rounded-md shadow-md">
+          <h1 className="border-b-1 p-2 font-bold">Create new Book Collection</h1>
+          {booksFields.map((field, index) =>
+            <div key={field.name}>
+              <Input
+                type={field.type}
+                name={field.name}
+                value={formik.values[field.name]}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                placeholder={field.placeholder}
+                options={field?.options}
+              />
+              {formik.touched[field.name] && formik.errors[field.name] && (
+                <div>
+                  <p className="text-red-400">{formik.errors[field.name]}</p>
+                </div>
+              )}
+            </div>
+          )}
+        </form>
+      </Modal>
+      <Modal
+        isOpen={deleteModalOpen}
+        onClose={() => {
+          setDeleteModalOpen(false);
+          setDeleteBook(null);
+        }}
+        title="Delete Book"
+        submit={confirmDelete}
+      >
+        <p className="p-2 mb-2">{`Are you sure you want to delete ${deleteBook?.title}?`}</p>
+      </Modal>
+    </div>
+  )
+}
+
+export default Books