matarial-init 1.0.0

package/src/pages/DashBoard.jsx

@@ -0,0 +1,414 @@
+import { useState, useMemo } from "react"
+import { useData } from "../context/useData"
+import Button from "../components/Button"
+import { Table } from "../components/Table"
+import { Modal } from "../components/Modal"
+import Input from "../components/Input"
+import { toast } from "react-toastify"
+
+const RESOURCE_OPTIONS = [
+  { key: "posts", label: "Posts", description: "Articles & Announcements" },
+  { key: "todos", label: "Todos", description: "Tasks & Workflows" },
+  { key: "users", label: "Users", description: "Team & Member Directory" },
+]
+
+const DashBoard = () => {
+  const [selectedResource, setSelectedResource] = useState("posts")
+  const [searchTerm, setSearchTerm] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 8
+
+  // Modal states
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false)
+  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const [activeItem, setActiveItem] = useState(null)
+  const [newTitle, setNewTitle] = useState("")
+  const [newBody, setNewBody] = useState("")
+
+  // Dynamic workflow via DataContext
+  const {
+    collection,
+    loading,
+    error,
+    refresh,
+    addData,
+    deleteData
+  } = useData(selectedResource)
+
+  // Reset pagination & search when resource switches
+  const handleResourceChange = (key) => {
+    setSelectedResource(key)
+    setCurrentPage(1)
+    setSearchTerm("")
+  }
+
+  // Filter items based on search term
+  const filteredItems = useMemo(() => {
+    if (!collection) return []
+    if (!searchTerm.trim()) return collection
+
+    const query = searchTerm.toLowerCase()
+    return collection.filter((item) => {
+      const titleMatch = item.title ? String(item.title).toLowerCase().includes(query) : false
+      const nameMatch = item.name ? String(item.name).toLowerCase().includes(query) : false
+      const bodyMatch = item.body ? String(item.body).toLowerCase().includes(query) : false
+      const emailMatch = item.email ? String(item.email).toLowerCase().includes(query) : false
+      return titleMatch || nameMatch || bodyMatch || emailMatch
+    })
+  }, [collection, searchTerm])
+
+  // Pagination calculation
+  const totalPages = Math.max(1, Math.ceil(filteredItems.length / pageSize))
+  const paginatedItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize
+    return filteredItems.slice(start, start + pageSize)
+  }, [filteredItems, currentPage, pageSize])
+
+  // Dynamically configure table columns based on active resource
+  const columns = useMemo(() => {
+    if (selectedResource === "posts") {
+      return [
+        { key: "id", title: "ID" },
+        { key: "title", title: "Title" },
+        { key: "preview", title: "Description" },
+        { key: "userId", title: "User ID" },
+      ]
+    }
+    if (selectedResource === "todos") {
+      return [
+        { key: "id", title: "ID" },
+        { key: "title", title: "Task Title" },
+        { key: "statusText", title: "Status" },
+        { key: "userId", title: "Assignee ID" },
+      ]
+    }
+    return [
+      { key: "id", title: "ID" },
+      { key: "name", title: "Full Name" },
+      { key: "email", title: "Email Address" },
+      { key: "companyName", title: "Company" },
+    ]
+  }, [selectedResource])
+
+  // Format data for table display
+  const tableData = useMemo(() => {
+    return paginatedItems.map((item) => ({
+      ...item,
+      preview: item.body ? (item.body.length > 75 ? `${item.body.slice(0, 75)}...` : item.body) : "-",
+      statusText: item.completed !== undefined ? (item.completed ? "✓ Completed" : "⏳ Pending") : "-",
+      companyName: item.company?.name || "-",
+    }))
+  }, [paginatedItems])
+
+  // Action handlers
+  const handleView = (item) => {
+    setActiveItem(item)
+    setIsViewModalOpen(true)
+  }
+
+  const handleDeletePrompt = (item) => {
+    setActiveItem(item)
+    setIsDeleteModalOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (!activeItem) return
+    deleteData((item) => item.id !== activeItem.id)
+    toast.success("Item removed from dynamic context collection!")
+    setIsDeleteModalOpen(false)
+    setActiveItem(null)
+  }
+
+  const handleCreateItem = (e) => {
+    if (e) e.preventDefault()
+    if (!newTitle.trim()) {
+      toast.error("Please enter a title")
+      return
+    }
+
+    const newItem = {
+      id: Date.now(),
+      title: newTitle.trim(),
+      body: newBody.trim() || "Dynamic context record added dynamically.",
+      userId: 1,
+      completed: false,
+    }
+
+    addData(newItem)
+    toast.success("New record dynamically added to context!")
+    setNewTitle("")
+    setNewBody("")
+    setIsAddModalOpen(false)
+  }
+
+  const handleRefresh = async () => {
+    try {
+      await refresh()
+      toast.info(`Refreshed ${selectedResource} from placeholder API!`)
+    } catch {
+      toast.error("Failed to refresh data")
+    }
+  }
+
+  const tableActions = [
+    {
+      label: "View",
+      onClick: handleView,
+      className: "bg-blue-600 hover:bg-blue-700 text-white font-medium py-1 px-3 rounded text-sm",
+    },
+    {
+      label: "Delete",
+      onClick: handleDeletePrompt,
+      className: "bg-red-600 hover:bg-red-700 text-white font-medium py-1 px-3 rounded text-sm",
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Header Banner */}
+      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-gray-800">Dynamic Workflow Dashboard</h1>
+            <span className="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded-full border border-green-300">
+              Live Context Connected
+            </span>
+          </div>
+          <p className="text-sm text-gray-500 mt-1">
+            Dynamic data fetched and managed via <code className="bg-gray-100 px-1 py-0.5 rounded text-gray-700 font-mono text-xs">DataContext</code> &amp; <code className="bg-gray-100 px-1 py-0.5 rounded text-gray-700 font-mono text-xs">useData</code> from public placeholder API (<code className="text-blue-600">jsonplaceholder.typicode.com/{selectedResource}</code>).
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded border border-gray-300 flex items-center gap-2"
+            text={loading ? "Fetching..." : "↻ Refresh"}
+            onClick={handleRefresh}
+            disabled={loading}
+          />
+          <Button
+            className="bg-gray-700 hover:bg-gray-800 text-white font-medium py-2 px-4 rounded"
+            text="+ Add Record"
+            onClick={() => setIsAddModalOpen(true)}
+          />
+        </div>
+      </div>
+
+      {/* Metrics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Total Records</p>
+          <p className="text-2xl font-bold text-gray-800 mt-1">{collection?.length || 0}</p>
+          <span className="text-xs text-gray-400">Public API items in context</span>
+        </div>
+
+        <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Filtered Results</p>
+          <p className="text-2xl font-bold text-blue-600 mt-1">{filteredItems.length}</p>
+          <span className="text-xs text-gray-400">Matching current search</span>
+        </div>
+
+        <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Active Endpoint</p>
+          <p className="text-lg font-bold text-gray-700 mt-1 truncate">/{selectedResource}</p>
+          <span className="text-xs text-gray-400">JSONPlaceholder REST API</span>
+        </div>
+
+        <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Workflow Mode</p>
+          <p className="text-lg font-bold text-green-600 mt-1">Dynamic State</p>
+          <span className="text-xs text-gray-400">Mutations &amp; live sync active</span>
+        </div>
+      </div>
+
+      {/* Dynamic Resource Switcher & Controls */}
+      <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 space-y-4">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          {/* Resource Selector Tabs */}
+          <div className="flex flex-wrap gap-2">
+            {RESOURCE_OPTIONS.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                onClick={() => handleResourceChange(item.key)}
+                className={`px-4 py-2 rounded-md font-medium text-sm transition cursor-pointer ${
+                  selectedResource === item.key
+                    ? "bg-gray-800 text-white shadow-sm"
+                    : "bg-gray-100 hover:bg-gray-200 text-gray-700"
+                }`}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Search Input */}
+          <div className="w-full md:w-72">
+            <Input
+              type="text"
+              name="search"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value)
+                setCurrentPage(1)
+              }}
+              placeholder={`Search ${selectedResource}...`}
+            />
+          </div>
+        </div>
+
+        {/* Data Container with Loading / Error / Content */}
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-500 space-y-3">
+            <div className="animate-spin rounded-full h-10 w-10 border-4 border-gray-300 border-t-gray-800"></div>
+            <p className="text-sm font-medium">Fetching dynamic data from public placeholder API...</p>
+          </div>
+        ) : error ? (
+          <div className="bg-red-50 border border-red-200 rounded-md p-4 text-center">
+            <p className="text-red-700 font-medium">Failed to fetch data from placeholder API.</p>
+            <p className="text-xs text-red-500 mt-1">{error.message || String(error)}</p>
+            <Button
+              className="mt-3 bg-red-600 hover:bg-red-700 text-white font-medium py-1.5 px-4 rounded text-sm"
+              text="Retry Connection"
+              onClick={handleRefresh}
+            />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="overflow-x-auto">
+              <Table
+                data={tableData}
+                column={columns}
+                action={tableActions}
+              />
+            </div>
+
+            {/* Pagination Controls */}
+            {filteredItems.length > pageSize && (
+              <div className="flex justify-between items-center pt-3 border-t text-sm text-gray-600">
+                <span>
+                  Showing {(currentPage - 1) * pageSize + 1} to{" "}
+                  {Math.min(currentPage * pageSize, filteredItems.length)} of {filteredItems.length} records
+                </span>
+                <div className="flex items-center gap-2">
+                  <Button
+                    className="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded text-sm"
+                    text="← Prev"
+                    disabled={currentPage === 1}
+                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                  />
+                  <span className="font-semibold text-gray-700">
+                    {currentPage} / {totalPages}
+                  </span>
+                  <Button
+                    className="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded text-sm"
+                    text="Next →"
+                    disabled={currentPage >= totalPages}
+                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Add New Item Modal */}
+      <Modal
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        title={`Add Dynamic Record (${selectedResource.toUpperCase()})`}
+        submit={handleCreateItem}
+      >
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-1">
+              Title / Name
+            </label>
+            <Input
+              type="text"
+              name="title"
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              placeholder={`Enter new ${selectedResource} title...`}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-1">
+              Description / Content
+            </label>
+            <textarea
+              className="input w-full min-h-[90px]"
+              name="body"
+              value={newBody}
+              onChange={(e) => setNewBody(e.target.value)}
+              placeholder="Enter details..."
+            />
+          </div>
+          <p className="text-xs text-gray-400 italic">
+            This item will be dynamically prepended to the context collection using <code className="font-mono">addData()</code>.
+          </p>
+        </div>
+      </Modal>
+
+      {/* View Item Details Modal */}
+      <Modal
+        isOpen={isViewModalOpen}
+        onClose={() => {
+          setIsViewModalOpen(false)
+          setActiveItem(null)
+        }}
+        title="Record Details"
+        submit={() => {
+          setIsViewModalOpen(false)
+          setActiveItem(null)
+        }}
+      >
+        {activeItem && (
+          <div className="space-y-3 py-2 text-sm text-gray-700">
+            <div className="bg-gray-50 p-3 rounded border">
+              <p className="font-bold text-gray-900 text-base">{activeItem.title || activeItem.name}</p>
+              {activeItem.email && <p className="text-xs text-blue-600 font-mono mt-0.5">{activeItem.email}</p>}
+            </div>
+
+            {activeItem.body && (
+              <div>
+                <p className="text-xs font-semibold text-gray-500 uppercase">Body</p>
+                <p className="mt-1 bg-white p-2 border rounded text-gray-800">{activeItem.body}</p>
+              </div>
+            )}
+
+            <div className="grid grid-cols-2 gap-2 text-xs text-gray-500">
+              <p><span className="font-semibold text-gray-700">Record ID:</span> {activeItem.id}</p>
+              {activeItem.userId && <p><span className="font-semibold text-gray-700">User ID:</span> {activeItem.userId}</p>}
+              {activeItem.completed !== undefined && (
+                <p>
+                  <span className="font-semibold text-gray-700">Status:</span>{" "}
+                  {activeItem.completed ? "Completed" : "Pending"}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* Confirm Delete Modal */}
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onClose={() => {
+          setIsDeleteModalOpen(false)
+          setActiveItem(null)
+        }}
+        title="Confirm Delete"
+        submit={confirmDelete}
+      >
+        <p className="py-2 text-gray-700">
+          Are you sure you want to remove item #{activeItem?.id} (<strong>{activeItem?.title || activeItem?.name}</strong>) from the dynamic context collection?
+        </p>
+      </Modal>
+    </div>
+  )
+}
+
+export default DashBoard

package/src/pages/Home.jsx

@@ -0,0 +1,9 @@
+const Home = () => {
+  return (
+    <div>
+        <h1>Welcome to the Home Page</h1>
+    </div>
+  )
+}
+
+export default Home

package/src/pages/Members.jsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import Button from "../components/Button";
+import { Table } from "../components/Table";
+import { mamberColumn, memberFields, STORAGE_KEYS } from "../constants/storageKeys";
+import { addData, findData, getCollection } from "../uttils/persistence";
+import { Modal } from "../components/Modal";
+import Input from "../components/Input";
+import { addMemberSchema } from "../validation/Validation";
+import { useFormik } from "formik";
+import { toast } from "react-toastify";
+
+const Members = () => {
+  const [open, setOpen] = useState(false)
+  const users = getCollection(STORAGE_KEYS.USERS) || [];
+
+  const handleSignUp = (values, { setFieldError, resetForm }) => {
+    const existingUser = findData(STORAGE_KEYS.USER, (user) => user.email === values.email)
+
+    if (existingUser) {
+      setFieldError("email", "Email already exists")
+      return
+    }
+
+    const { confirmPassword, ...user } = values
+    const userData = {
+      id: crypto.randomUUID(),
+      ...user
+    }
+    addData(STORAGE_KEYS.USERS, userData)
+    toast.success("User added successfull")
+    resetForm()
+    setOpen(false);
+  }
+
+  const formik = useFormik({
+    initialValues: {
+      username: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+      role: "member"
+    },
+    validationSchema: addMemberSchema,
+    onSubmit: handleSignUp
+  });
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-bold">Members</h1>
+        <Button className="bg-gray-400 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" text="Add Member" onClick={() => { setOpen(true) }} />
+      </div>
+      <Table data={users} column={mamberColumn}/>
+      <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">Please Sign Up</h1>
+          {memberFields.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>
+    </div>
+  )
+}
+
+export default Members

package/src/pages/MyBooks.jsx

@@ -0,0 +1,79 @@
+import { use, useState } from "react";
+import Button from "../components/Button";
+import { Table } from "../components/Table";
+import { bookColumn, mybooksFields, 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 { myBookSchema } from "../validation/Validation";
+
+const MyBooks = () => {
+    const [open, setOpen] = useState(false)
+    const [selectbook, setSelectBook] = useState(null)
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+    const [deleteBook, setDeleteBook] = useState(null)
+    const books = getCollection(STORAGE_KEYS.BOOKS) || [];
+    const today = new Date();
+    const maxDate = new Date();
+    maxDate.setDate(maxDate.getDate() + 7);
+    const handleBorrowBook = (values, { setFieldError, resetForm }) => {
+        const user = getCollection(STORAGE_KEYS.CURRENT_USER)
+        console.log("user and book is here :::>>><<<", user, selectedBook)
+    }
+
+    const handleBorrow = (book) => {
+        setOpen(true)
+        setSelectBook(book)
+    }
+
+    const handleReturn = (book) => {
+        console.log("book", book)
+    }
+
+
+    const formik = useFormik({
+        enableReinitialize: true,
+        initialValues: {
+            return_date: selectbook?.return_date || "",
+        },
+        validationSchema: myBookSchema(today),
+        onSubmit: handleBorrowBook
+    });
+    return (
+        <div>
+            <div className="flex justify-between items-center mb-4">
+                <h1 className="text-2xl font-bold">MyBooks</h1>
+            </div>
+            <Table data={books} column={bookColumn} action={[{ label: "Borrow Book", onClick: handleBorrow, className: "bg-green-700 hover:bg-green-900 text-white" }, { label: "Return Book", onClick: handleReturn, className: "bg-red-700 hover:bg-red-900 text-white" }]} />
+            <Modal isOpen={open} onClose={() => setOpen(false)} title="Borrow Book" submit={formik.handleSubmit}>
+                <form onSubmit={formik.handleSubmit} className="flex flex-col gap-4 border p-4 mb-4 rounded-md shadow-md">
+                    <h5>Please select book return date</h5>
+                    {mybooksFields.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}
+                                min={today.toISOString().split("T")[0]}
+                                max={maxDate.toISOString().split("T")[0]}
+                            />
+                            {formik.touched[field.name] && formik.errors[field.name] && (
+                                <div>
+                                    <p className="text-red-400">{formik.errors[field.name]}</p>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </form>
+            </Modal>
+        </div>
+    )
+}
+
+export default MyBooks

package/src/pages/Penalty.jsx

@@ -0,0 +1,9 @@
+const Penalty = () => {
+  return (
+    <div>
+        <h1>Welcome to the Penalty Page.</h1>
+    </div>
+  )
+}
+
+export default Penalty

package/src/pages/SignUp.jsx

@@ -0,0 +1,69 @@
+import { useId, useState } from "react";
+import Button from "../components/Button";
+import Input from "../components/Input";
+import { useFormik } from "formik";
+import { signUpSchema } from "../validation/Validation";
+import { addData, findData } from "../uttils/persistence";
+import { signUpFields, STORAGE_KEYS } from "../constants/storageKeys";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+const SignUp = () => {
+    const navigate = useNavigate()
+    const id = useId();
+    const handleSignUp = (values, { setFieldError, resetForm }) => {
+        const ExistingUser = findData(STORAGE_KEYS.USERS, (user) => user.email === values.email)
+        if (ExistingUser) {
+            setFieldError("email", "Email already exists.");
+            return;
+        }
+        const { confirmPassword, ...user } = values
+        const userData = {
+            id: crypto.randomUUID(),
+            role: "member",
+            ...user
+        }
+        addData(STORAGE_KEYS.USERS, userData)
+        toast.success("Sign Up successful! Please Sign In.")
+        resetForm()
+        navigate("/signin")
+    }
+    const formik = useFormik({
+        initialValues: {
+            username: "",
+            email: "",
+            password: "",
+            confirmPassword: ""
+        },
+        validationSchema: signUpSchema,
+        onSubmit: handleSignUp
+    })
+
+    return (
+        <div className="flex flex-col gap-4 items-center justify-center h-screen">
+            <form onSubmit={formik.handleSubmit} className="w-[20%] flex flex-col gap-4 border p-4 rounded-md shadow-md">
+                <h1 className="border-b-1 p-2 font-bold">Please Sign Up</h1>
+                {signUpFields.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}
+                        />
+                        {formik.touched[field.name] && formik.errors[field.name] && (
+                            <div>
+                                <p className="text-red-400">{formik.errors[field.name]}</p>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <Button text="Sign Up" type="submit" />
+            </form>
+        </div>
+    )
+}
+
+export default SignUp