سیستم مدیریت سهام – جبهه

import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";
import { Link } from "react-router-dom";
import Navbar from "../components/Navbar";

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return 
Loading...
;
  }

  return (
    

      {/* Navbar */}
      

      {/* Dashboard Content */}
      

        
        
Manage your stock efficiently with real-time insights.

        {/* Dashboard Cards */}
        

          
            
Manage Products
          
          
            
Stock Overview
          
          
            
Analytics Dashboard
          
        

      
    
  );
};

export default Dashboard;

import { useEffect, useState } from "react"; //for statemanagement and sideeffects.
import { toast } from "react-toastify"; //for notification pop-ups
import { Trash2, Edit3 } from "lucide-react"; //Icons for delete and edit operations.
import api from "../utils/api"; //for api calls.
import Navbar from "./Navbar";  //navbar component
import { useNavigate } from "react-router-dom"; //React router navigation function.

const [products, setProducts] = useState([]);
const [form, setForm] = useState({ name: "", category: "", price: "", quantityInStock: "" });
const [sellForm, setSellForm] = useState({ productId: "", quantity: "" });
const [showAddForm, setShowAddForm] = useState(false);
const [showSellForm, setShowSellForm] = useState(false);
const [editingProduct, setEditingProduct] = useState(null);

useEffect(() => {
  fetchProducts();
}, []);

const fetchProducts = async () => {
  try {
    const { data } = await api.get("/products");
    setProducts(data);
  } catch (error) {
    console.error(error);
    toast.error("Failed to fetch products. Please try again.");
  }
};

const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

const handleSellChange = (e) => {
  const { name, value } = e.target;
  setSellForm((prev) => ({
    ...prev,
    [name]: name === "quantity" ? Number(value) : value, // Ensures quantity is a number
  }));
};

const handleEdit = (product) => {
  setEditingProduct(product._id); // Store product ID
  setForm({ ...product }); // Populate form with product data
  setShowAddForm(true); // Open form modal
};

const handleSubmit = async (e) => {
  e.preventDefault();
  if (!form.name || !form.category || !form.price || !form.quantityInStock) {
    toast.warn("Please fill in all fields before submitting.");
    return;
  }
  try {
    if (editingProduct) {
      await api.put(`/products/${editingProduct}`, form);
      toast.success("Product updated successfully");
      setEditingProduct(null); 
    } else {
      await api.post("/products", form);
      toast.success("Product added successfully");
    }
    fetchProducts();
    setForm({ name: "", category: "", price: "", quantityInStock: "" });
    setShowAddForm(false);
  } catch (error) {
    toast.error(error.response?.data?.message || "Error adding product.");
  }
};

const handleSellSubmit = async (e) => {
  e.preventDefault();
  if (!sellForm.productId || !sellForm.quantity || sellForm.quantity <= 0) {
    toast.warn("Please select a product and enter a valid quantity.");
    return;
  }
  try {
    await api.post("/sales/sell", sellForm);
    toast.success("Product sold successfully! 💰");
    fetchProducts();
    setSellForm({ productId: "", quantity: "" });
    setShowSellForm(false);
  } catch (error) {
    toast.error(error.response?.data?.message || "Error selling product.");
  }
};

const handleDelete = async (id) => {
  try {
    await api.delete(`/products/${id}`);
    toast.success("Product deleted successfully! 🗑️");
    fetchProducts();
  } catch (error) {
    console.error(error);
    toast.error("Error deleting product. Please try again.");
  }
};

const handleImportCSV = async (e) => {
  e.preventDefault();
  const file = e.target.files[0];
  if (!file) {
    toast.warn("Please select a CSV file to import.");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  try {
    await api.post("/csv/import-csv", formData, { headers: { "Content-Type": "multipart/form-data" } });
    toast.success("CSV imported successfully! 📂");
    fetchProducts();
  } catch (error) {
    console.error(error);
    toast.error("Error importing CSV. Please check the file format, and duplicates before Import.");
  }
};

const handleExportCSV = async () => {
  try {
    const response = await api.get("/csv/export-csv", { responseType: "blob" });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "products.csv");
    document.body.appendChild(link);
    link.click();
    toast.success("CSV exported successfully! 📤");
  } catch (error) {
    console.error(error);
    toast.error("Error exporting CSV. Please try again.");
  }
};

{/* Header */}
    

{/* Action Buttons */}
    

       setShowAddForm(!showAddForm)} className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg">
        {showAddForm ? "Close" : "Add Product"}
      
       setShowSellForm(!showSellForm)} className="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg">
        {showSellForm ? "Close" : "Sell Product"}
      
    

{/* Add Product Form */}
    {showAddForm && (
      
    )}

 {/* Sell Product Form */}
    {showSellForm && (
      
    )}

{/* Product List */}
    
Product List
    

      
          {products.map((product) => (
            
          ))}
        

        

          

            
Product
            
Category
            
Price
            
Stock
            
Actions
          
        
        

              
{product.name}
              
{product.category}
              
${product.price}
              
{product.quantityInStock}
              

                 handleEdit(product)} className="text-blue-400 hover:text-blue-600 p-2">
                  
                
                 handleDelete(product._id)} className="text-red-500 hover:text-red-700 p-2">
                  
                
              
            
      
    

import { useEffect, useState } from "react"; //Manages state and API calls.
import { toast } from "react-toastify"; //Displays error messages if API calls fail.
import api from "../utils/api"; //Axios instance for API requests.
import { useNavigate } from "react-router-dom"; //Enables navigation between pages.

const navigate = useNavigate();
const [stockData, setStockData] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchStockOverview();
}, []);

const fetchStockOverview = async () => {
  try {
    const { data } = await api.get("/stock-overview");
    setStockData(data);
  } catch (error) {
    console.error(error);
    toast.error("Failed to fetch stock overview");
  } finally {
    setLoading(false);
  }
};

 navigate("/dashboard")} 
  className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-300"
>
  Back to Dashboard

  Stock Overview

  {loading ? (
    [...Array(3)].map((_, i) => (
      
    ))
  ) : (
    <>
      

        
Total Items
        
{stockData.totalItems}
      
      

        
Total Sold
        
{stockData.totalSold}
      
      

        
Total Revenue
        

          ${stockData.totalRevenue.toFixed(2)}
        
      
    >
  )}

  
Sold Items
  

    {loading ? (
      [...Array(5)].map((_, i) => (
        

          
          
          
          
        
      ))
    ) : stockData.soldItems.length > 0 ? (
      stockData.soldItems.map((item, index) => (
        

          {item.name} 
          {item.category}
          Sold: {item.quantitySold}
          
            Revenue: ${item.revenueGenerated.toFixed(2)}
          
        
      ))
    ) : (
      
No items sold yet.
    )}
  

import { useEffect, useState } from "react";
import { Bar } from "react-chartjs-2";  //Registers bar chart components.
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import api from "../utils/api"; // Using baseURL configured API
import { useNavigate } from "react-router-dom";

const [stockData, setStockData] = useState([]); //Stores fetched product stock data
const [chartData, setChartData] = useState(null); // Stores formatted data for Chart.js
const [category, setCategory] = useState(""); //Stores user-input filter for product category
const [sortBy, setSortBy] = useState("totalRevenue"); //Stores sorting criteria (totalRevenue or totalSold)
const [order, setOrder] = useState("desc"); //Determines sort order (asc or desc)
const [loading, setLoading] = useState(true); //Tracks data fetching state
const [error, setError] = useState(null); //Stores error messages

useEffect(() => {
  fetchStockData();
  fetchChartData();
}, [category, sortBy, order]);

const fetchStockData = async () => {
  setLoading(true);
  try {
    const response = await api.get(`/analytics/stock`, {
      params: { sortBy, order },
    });

    let filteredData = response.data;

    // Apply case-insensitive filtering on the frontend
    if (category.trim() !== "") {
      const searchQuery = category.toLowerCase();
      filteredData = filteredData.filter(product =>
        product.category.toLowerCase().includes(searchQuery) ||
        product.name.toLowerCase().includes(searchQuery)
      );
    }

    setStockData(filteredData);
  } catch (error) {
    setError("Error fetching stock data");
    console.error("Error fetching stock data:", error);
  } finally {
    setLoading(false);
  }
};

const fetchChartData = async () => {
  try {
    const response = await api.get(`/analytics/chart-data`);
    const data = response.data;
    setChartData({
      labels: data.map((item) => item.category),
      datasets: [
        {
          label: "Total Revenue",
          data: data.map((item) => item.totalRevenue || 0),
          backgroundColor: "rgba(54, 162, 235, 0.6)",
        },
        {
          label: "Total Sold",
          data: data.map((item) => item.totalSold || 0),
          backgroundColor: "rgba(255, 99, 132, 0.6)",
        },
      ],
    });
  } catch (error) {
    setError("Error fetching chart data");
    console.error("Error fetching chart data:", error);
  }
};

 navigate("/dashboard")} 
  className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-300"
>
  Back to Dashboard

    {stockData.map((product) => (
      
    ))}
  

  

    

      
Product
      
Category
      
Items Sold
      
Revenue
    
  
  

        
{product.name}
        
{product.category}
        
{product.itemsSold}
        

          ${product.totalRevenue ? product.totalRevenue.toFixed(2) : "0.00"}
        
      

{chartData && (
  

    
Sales & Revenue Overview
    
  

)}

import { useNavigate } from "react-router-dom";
import { ShoppingCart, BarChart3, FileText, LogIn } from "lucide-react";
import { AuthContext } from "../context/AuthContext";
import { useContext, useState } from "react";

const LandingPage = () => {
  const { user, logout } = useContext(AuthContext);
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate("https://dev.to/");
    setIsOpen(false);
  };

  const isAuthenticated = !!localStorage.getItem("token");

const handleProfileClick = async () => {
  if (!isOpen) {
    await user;
  }
  setIsOpen(!isOpen);
};

const handleNavigation = (path) => {
  navigate(isAuthenticated ? path : "/login");
};

return (
  





    

    








Navbar section
1.If the user is logged in, show a profile button.


2.Clicking Profile reveals a dropdown with name, email, and a logout button.

3.If not logged in, show Login & Register buttons.



{user ? (
  
) : (
  

     navigate("/login")} className="text-white hover:text-blue-400 transition duration-300">Login
    |
     navigate("/auth/register")} className="text-white hover:text-green-400 transition duration-300">Register
  
)}




    

    




عنوان بخش قهرمان و توضیحات برای صفحه فرود.




  
  

    A powerful tool to track inventory, manage stock levels, and generate reports efficiently.
  





    

    



1.Displays 3 کارت ویژگی (مدیریت محصول ، نمای کلی سهام ، تجزیه و تحلیل).
2. اگر کاربر تأیید نشده باشد ، کارت اضافی برای ورود به سیستم ایمن ظاهر می شود.


  {[
    {
      path: "/products",
      icon: ,
      title: "Product Management",
      description: "Easily add, edit, and delete products in stock.",
    },
    {
      path: "/stock-overview",
      icon: ,
      title: "Stock Overview",
      description: "Monitor available stock, items sold, and revenue trends.",
    },
    {
      path: "/analytics",
      icon: ,
      title: "Analysis",
      description: "Generate reports in charts.",
    },
  ].map((feature, index) => (
    
 handleNavigation(feature.path)}
      className="bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300">
      {feature.icon}
      
{feature.title}
      
{feature.description}
    
  ))}

  {!isAuthenticated && (
    
 navigate("/login")}
      className="bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300">
      
      
Secure Login
      
Ensure security with JWT-based authentication.
    
  )}





    

    









    

    



کد منبع پروژه من را بررسی کنید 👉github و لینک مستقر را پیدا خواهید کرد ، آن را در آنجا آزمایش کنید.
این همه چیز در مورد کد تنظیمات Frontend است و برنامه NPM Run Dev را اجرا کنید. برای هرگونه نمایش داده شده در بخش نظرات واکنش نشان می دهد.

                       Let's grow together!