{"id":105077,"date":"2025-04-08T06:33:45","date_gmt":"2025-04-08T02:03:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/"},"modified":"2025-04-08T06:33:45","modified_gmt":"2025-04-08T02:03:45","slug":"%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/","title":{"rendered":"\u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0647\u0627\u0645 &#8211; \u062c\u0628\u0647\u0647"},"content":{"rendered":"<div data-article-id=\"2389910\" id=\"article-body\">\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0627 \u0628\u0627 \ud83d\udc49 auth \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631 \u062e\u0635\u0648\u0635\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0628\u062e\u0634 \u062c\u0644\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fls5l4xg4e8yejd4rgvcq.png\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u06a9\u0631\u062f\u0646\" loading=\"lazy\" width=\"723\" height=\"775\" title=\"\"><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#1_%DB%8C%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF_pagesDashboardjsx\" >1. \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f pages\/Dashboard.jsx<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Manage_Products\" >Manage Products<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Stock_Overview\" >Stock Overview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Analytics_Dashboard\" >Analytics Dashboard<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#2_componentsProductManagementjsx\" >2 components\/ProductManagement.jsx<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Product_List\" >Product List<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#3_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%B3%D9%87%D8%A7%D9%85_componentsStockOverviewjsx\" >3. \u0645\u0624\u0644\u0641\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0633\u0647\u0627\u0645 components\/StockOverview.jsx<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Stock_Overview-2\" >Stock Overview<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Total_Items\" >Total Items<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Total_Sold\" >Total Sold<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Total_Revenue\" >Total Revenue<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Sold_Items\" >Sold Items<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#4_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C_componentsAnalyticsjsx\" >4. \u0645\u0624\u0644\u0641\u0647 \u062a\u062d\u0644\u06cc\u0644\u06cc components\/Analytics.jsx<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Sales_Revenue_Overview\" >Sales &amp; Revenue Overview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#5_%D8%B5%D9%81%D8%AD%D9%87_%D9%81%D8%B1%D9%88%D8%AF_pagesLandingPagejsx\" >5 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f pages\/LandingPage.jsx<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#featuretitle\" >{feature.title}<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d8%b3%d9%87%d8%a7%d9%85-%d8%ac%d8%a8%d9%87%d9%87\/#Secure_Login\" >Secure Login<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%DB%8C%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF_pagesDashboardjsx\"><\/span>\n<p>  1. \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>pages\/Dashboard.jsx<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<blockquote>\n<p>\u0645\u0646 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0645\u0646 \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<\/blockquote>\n<ul>\n<li>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u060c \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062e\u0635\u0648\u0635\u06cc \u0628\u0627\u0634\u062f \u060c \u06cc\u0639\u0646\u06cc \u067e\u0633 \u0627\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0641\u0642\u0637 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0622\u0646 \u0631\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0648\u0627\u06af\u0630\u0627\u0631\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 AuthContext.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0646\u0628\u0627\u0634\u062f \u060c \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0627 \u0645\u0636\u0645\u0648\u0646 \u062a\u06cc\u0631\u0647 \u0628\u0627 \u06cc\u06a9 \u0646\u0627\u0648\u0628\u0631.<\/p>\n<\/li>\n<li>\n<p>\u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u067e\u06cc\u0627\u0645 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631. name.<\/p>\n<\/li>\n<li>\n<p>\u0627\u0631\u0627\u0626\u0647 \u0633\u0647 \u067e\u06cc\u0648\u0646\u062f \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0637\u0631\u062d \u0634\u0628\u06a9\u0647 \u0628\u0627 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0645\u0646\u0627\u0633\u0628.<\/p>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useContext } from \"react\";\nimport { AuthContext } from \"..\/context\/AuthContext\";\nimport { Link } from \"react-router-dom\";\nimport Navbar from \"..\/components\/Navbar\";\n\nconst Dashboard = () =&gt; {\n  const { user } = useContext(AuthContext);\n\n  if (!user) {\n    return <p>Loading...<\/p>;\n  }\n\n  return (\n    <div classname=\"min-h-screen bg-gray-900 text-white flex flex-col\">\n      {\/* Navbar *\/}\n      <navbar\/>\n\n      {\/* Dashboard Content *\/}\n      <div classname=\"flex-grow flex flex-col items-center justify-center px-6\">\n        \n        <p classname=\"text-gray-400 mb-8\">Manage your stock efficiently with real-time insights.<\/p>\n\n        {\/* Dashboard Cards *\/}\n        <p>\n          <link to=\"\/products\" classname=\"p-6 bg-white\/10 backdrop-blur-lg rounded-xl text-center hover:bg-white\/20 transition\"\/>\n            <h2 classname=\"text-xl font-semibold\"><span class=\"ez-toc-section\" id=\"Manage_Products\"><\/span>Manage Products<span class=\"ez-toc-section-end\"><\/span><\/h2>\n          \n          <link to=\"\/stock-overview\" classname=\"p-6 bg-white\/10 backdrop-blur-lg rounded-xl text-center hover:bg-white\/20 transition\"\/>\n            <h2 classname=\"text-xl font-semibold\"><span class=\"ez-toc-section\" id=\"Stock_Overview\"><\/span>Stock Overview<span class=\"ez-toc-section-end\"><\/span><\/h2>\n          \n          <link to=\"\/analytics\" classname=\"p-6 bg-white\/10 backdrop-blur-lg rounded-xl text-center hover:bg-white\/20 transition\"\/>\n            <h2 classname=\"text-xl font-semibold\"><span class=\"ez-toc-section\" id=\"Analytics_Dashboard\"><\/span>Analytics Dashboard<span class=\"ez-toc-section-end\"><\/span><\/h2>\n          \n        <\/p>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default Dashboard;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u0645 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"2_componentsProductManagementjsx\"><\/span>\n<p>  2 <code>components\/ProductManagement.jsx<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u062a\u0646\u0638\u06cc\u0645 \u0648\u0627\u0631\u062f\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useEffect, useState } from \"react\"; \/\/for statemanagement and sideeffects.\nimport { toast } from \"react-toastify\"; \/\/for notification pop-ups\nimport { Trash2, Edit3 } from \"lucide-react\"; \/\/Icons for delete and edit operations.\nimport api from \"..\/utils\/api\"; \/\/for api calls.\nimport Navbar from \".\/Navbar\";  \/\/navbar component\nimport { useNavigate } from \"react-router-dom\"; \/\/React router navigation function.\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a<\/li>\n<li>\u0645\u062d\u0635\u0648\u0644\u0627\u062a: \u0630\u062e\u06cc\u0631\u0647 \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a.<\/li>\n<\/ul>\n<ol>\n<li>\n<p>\u0641\u0631\u0645: \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\/\u0648\u06cc\u0631\u0627\u06cc\u0634.<\/p>\n<\/li>\n<li>\n<p>Sellform: \u0630\u062e\u06cc\u0631\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0641\u0631\u0648\u0634.<\/p>\n<\/li>\n<li>\n<p>Showaddform \u060c ShowsEllForm: \u0641\u0631\u0645 \u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\/\u0641\u0631\u0648\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a.<\/p>\n<\/li>\n<li>\n<p>EditingProduct: \u0634\u0646\u0627\u0633\u0647 \u0645\u062d\u0635\u0648\u0644 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0634\u062f\u0647 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const [products, setProducts] = useState([]);\nconst [form, setForm] = useState({ name: \"\", category: \"\", price: \"\", quantityInStock: \"\" });\nconst [sellForm, setSellForm] = useState({ productId: \"\", quantity: \"\" });\nconst [showAddForm, setShowAddForm] = useState(false);\nconst [showSellForm, setShowSellForm] = useState(false);\nconst [editingProduct, setEditingProduct] = useState(null);\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0627\u0632 API \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f \u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u0633\u067e\u0633 \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e API \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>useEffect(() =&gt; {\n  fetchProducts();\n}, []);\n\nconst fetchProducts = async () =&gt; {\n  try {\n    const { data } = await api.get(\"\/products\");\n    setProducts(data);\n  } catch (error) {\n    console.error(error);\n    toast.error(\"Failed to fetch products. Please try again.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0631\u0628\u0631 \u0634\u06a9\u0644 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleChange = (e) =&gt; setForm({ ...form, [e.target.name]: e.target.value });\n\nconst handleSellChange = (e) =&gt; {\n  const { name, value } = e.target;\n  setSellForm((prev) =&gt; ({\n    ...prev,\n    [name]: name === \"quantity\" ? Number(value) : value, \/\/ Ensures quantity is a number\n  }));\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0645\u062d\u0635\u0648\u0644\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleEdit = (product) =&gt; {\n  setEditingProduct(product._id); \/\/ Store product ID\n  setForm({ ...product }); \/\/ Populate form with product data\n  setShowAddForm(true); \/\/ Open form modal\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a 1.If EditingProduct \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u2192 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f (Put \/Products \/: ID).<\/li>\n<\/ul>\n<p>2.else \u2192 \u0627\u06cc\u062c\u0627\u062f \u0645\u062d\u0635\u0648\u0644 \u062c\u062f\u06cc\u062f (\u067e\u0633\u062a \/\u0645\u062d\u0635\u0648\u0644\u0627\u062a).<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleSubmit = async (e) =&gt; {\n  e.preventDefault();\n  if (!form.name || !form.category || !form.price || !form.quantityInStock) {\n    toast.warn(\"Please fill in all fields before submitting.\");\n    return;\n  }\n  try {\n    if (editingProduct) {\n      await api.put(`\/products\/${editingProduct}`, form);\n      toast.success(\"Product updated successfully\");\n      setEditingProduct(null); \n    } else {\n      await api.post(\"\/products\", form);\n      toast.success(\"Product added successfully\");\n    }\n    fetchProducts();\n    setForm({ name: \"\", category: \"\", price: \"\", quantityInStock: \"\" });\n    setShowAddForm(false);\n  } catch (error) {\n    toast.error(error.response?.data?.message || \"Error adding product.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0641\u0631\u0648\u0634 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 1. \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0641\u0631\u0648\u0634 (\u067e\u0633\u062a \/\u0641\u0631\u0648\u0634 \/\u0641\u0631\u0648\u0634) \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<p>2. \u0647\u0646\u06af\u0627\u0645 \u0641\u0631\u0648\u0634 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u060c \u062a\u0639\u062f\u0627\u062f \u0633\u0647\u0627\u0645 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleSellSubmit = async (e) =&gt; {\n  e.preventDefault();\n  if (!sellForm.productId || !sellForm.quantity || sellForm.quantity &lt;= 0) {\n    toast.warn(\"Please select a product and enter a valid quantity.\");\n    return;\n  }\n  try {\n    await api.post(\"\/sales\/sell\", sellForm);\n    toast.success(\"Product sold successfully! \ud83d\udcb0\");\n    fetchProducts();\n    setSellForm({ productId: \"\", quantity: \"\" });\n    setShowSellForm(false);\n  } catch (error) {\n    toast.error(error.response?.data?.message || \"Error selling product.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleDelete = async (id) =&gt; {\n  try {\n    await api.delete(`\/products\/${id}`);\n    toast.success(\"Product deleted successfully! \ud83d\uddd1\ufe0f\");\n    fetchProducts();\n  } catch (error) {\n    console.error(error);\n    toast.error(\"Error deleting product. Please try again.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0648\u0627\u0631\u062f\u0627\u062a CSV<\/li>\n<li>\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 CSV \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<\/ul>\n<ol>\n<li>\u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a Data Multipart\/Form \u0631\u0627 \u0628\u0647\/CSV\/Import-CSV \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleImportCSV = async (e) =&gt; {\n  e.preventDefault();\n  const file = e.target.files[0];\n  if (!file) {\n    toast.warn(\"Please select a CSV file to import.\");\n    return;\n  }\n\n  const formData = new FormData();\n  formData.append(\"file\", file);\n\n  try {\n    await api.post(\"\/csv\/import-csv\", formData, { headers: { \"Content-Type\": \"multipart\/form-data\" } });\n    toast.success(\"CSV imported successfully! \ud83d\udcc2\");\n    fetchProducts();\n  } catch (error) {\n    console.error(error);\n    toast.error(\"Error importing CSV. Please check the file format, and duplicates before Import.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0635\u0627\u062f\u0631\u0627\u062a CSV 1. \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc CSV \u0627\u0632 \/CSV \/Export-CSV.<\/li>\n<\/ul>\n<p>2. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleExportCSV = async () =&gt; {\n  try {\n    const response = await api.get(\"\/csv\/export-csv\", { responseType: \"blob\" });\n    const url = window.URL.createObjectURL(new Blob([response.data]));\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.setAttribute(\"download\", \"products.csv\");\n    document.body.appendChild(link);\n    link.click();\n    toast.success(\"CSV exported successfully! \ud83d\udce4\");\n  } catch (error) {\n    console.error(error);\n    toast.error(\"Error exporting CSV. Please try again.\");\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>  \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a.<\/li>\n<li>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062c\u062f\u06cc\u062f<\/li>\n<\/ul>\n<ol>\n<li>\n<p>\u0641\u0631\u0648\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/p>\n<\/li>\n<li>\n<p>\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646\/\u0635\u0627\u062f\u0631\u0627\u062a \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc CSV<\/p>\n<\/li>\n<li>\n<p>\u0648\u06cc\u0631\u0627\u06cc\u0634 \u0648 \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/p>\n<\/li>\n<li>\n<p>\u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\u0628\u062e\u0634 \u0647\u062f\u0631 \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062f\u06a9\u0645\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u2192 \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<p>\u0639\u0646\u0648\u0627\u0646: &#8220;\u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u0635\u0648\u0644&#8221; \u2192 \u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0648\u0627\u0631\u062f\u0627\u062a \u0648 \u0635\u0627\u062f\u0631\u0627\u062a CSV \u2192 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 CSV \u0648\u0627\u0631\u062f \u0634\u0648\u062f.<br \/>list \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 CSV \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{\/* Header *\/}\n    \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0627\u06a9\u0634\u0646 1. \u062f\u06a9\u0645\u0647 &#8220;\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0645\u062d\u0635\u0648\u0644&#8221; \u2192 \u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0644 Add\/Edit \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<p>2. \u062f\u06a9\u0645\u0647 &#8220;\u0641\u0631\u0648\u0634 \u0645\u062d\u0635\u0648\u0644&#8221; \u2192 \u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0644 \u0641\u0631\u0648\u0634 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{\/* Action Buttons *\/}\n    <p>\n      <button onclick=\"{()\"> setShowAddForm(!showAddForm)} className=\"bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg\"&gt;\n        {showAddForm ? \"Close\" : \"Add Product\"}\n      <\/button>\n      <button onclick=\"{()\"> setShowSellForm(!showSellForm)} className=\"bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg\"&gt;\n        {showSellForm ? \"Close\" : \"Sell Product\"}\n      <\/button>\n    <\/p>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f 1. \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062c\u062f\u06cc\u062f \u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0645\u0648\u062c\u0648\u062f \u060c \u0641\u0631\u0645 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<p>2.Fields: \u0646\u0627\u0645 \u0645\u062d\u0635\u0648\u0644 \u060c \u062f\u0633\u062a\u0647 \u060c \u0642\u06cc\u0645\u062a \u060c \u0645\u0642\u062f\u0627\u0631 \u0633\u0647\u0627\u0645<\/p>\n<p>\u062f\u06a9\u0645\u0647 3.Submit \u2192 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u06a9\u0645\u0647 4.cancel \u2192 \u0641\u0631\u0645 \u0631\u0627 \u0645\u06cc \u0628\u0646\u062f\u062f \u0648 \u062d\u0627\u0644\u062a \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{\/* Add Product Form *\/}\n    {showAddForm &amp;&amp; (\n      \n    )}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0641\u0631\u0645 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0647 \u0641\u0631\u0648\u0634 \u0645\u06cc \u0631\u0633\u0627\u0646\u062f.<\/li>\n<\/ul>\n<p>2.Fields:<br \/>\u06a9\u0634\u0648\u06cc\u06cc: \u0645\u062d\u0635\u0648\u0644\u06cc \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0644\u0627\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\u0648\u0631\u0648\u062f\u06cc \u06a9\u0645\u06cc\u062a: \u062a\u0639\u062f\u0627\u062f \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0641\u0631\u0648\u0634 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\u0627\u0631\u0633\u0627\u0644 \u062f\u06a9\u0645\u0647 \u2192 \u0633\u0647\u0627\u0645 \u0641\u0631\u0648\u0634 \u0648 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code> {\/* Sell Product Form *\/}\n    {showSellForm &amp;&amp; (\n      \n    )}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>1. \u0647\u0645\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>2.Columns:<br \/>\u0646\u0627\u0645 \u0645\u062d\u0635\u0648\u0644 \u060c \u062f\u0633\u062a\u0647 \u060c \u0642\u06cc\u0645\u062a \u060c \u0645\u0642\u062f\u0627\u0631 \u0633\u0647\u0627\u0645 \u060c \u0627\u0642\u062f\u0627\u0645\u0627\u062a<br \/>\u062f\u06a9\u0645\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u2192 \u0641\u0631\u0645 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0632 \u067e\u06cc\u0634 \u067e\u0631 \u0634\u062f\u0647 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<br \/>DELETE BUTTON \u2192 \u0645\u062d\u0635\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{\/* Product List *\/}\n    <h3 classname=\"text-xl font-bold mb-4 mt-6\"><span class=\"ez-toc-section\" id=\"Product_List\"><\/span>Product List<span class=\"ez-toc-section-end\"><\/span><\/h3>\n    <div classname=\"bg-gray-800 p-4 rounded-lg shadow-md\">\n      <table classname=\"w-full text-left\">\n        <thead>\n          <tr classname=\"border-b border-gray-700 text-gray-300\">\n            <th classname=\"p-3\">Product<\/th>\n            <th>Category<\/th>\n            <th>Price<\/th>\n            <th>Stock<\/th>\n            <th>Actions<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          {products.map((product) =&gt; (\n            <tr key=\"{product._id}\" classname=\"border-b border-gray-700 text-gray-200\">\n              <td classname=\"p-3\">{product.name}<\/td>\n              <td>{product.category}<\/td>\n              <td>${product.price}<\/td>\n              <td>{product.quantityInStock}<\/td>\n              <td classname=\"flex gap-2\">\n                <button onclick=\"{()\"> handleEdit(product)} className=\"text-blue-400 hover:text-blue-600 p-2\"&gt;\n                  <edit3 size=\"{20}\"\/>\n                <\/button>\n                <button onclick=\"{()\"> handleDelete(product._id)} className=\"text-red-500 hover:text-red-700 p-2\"&gt;\n                  <trash2 size=\"{20}\"\/>\n                <\/button>\n              <\/td>\n            <\/tr>\n          ))}\n        <\/tbody>\n      <\/table>\n    <\/div>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"3_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C_%D8%B3%D9%87%D8%A7%D9%85_componentsStockOverviewjsx\"><\/span>\n<p>  3. \u0645\u0624\u0644\u0641\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0633\u0647\u0627\u0645 <code>components\/StockOverview.jsx<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useEffect, useState } from \"react\"; \/\/Manages state and API calls.\nimport { toast } from \"react-toastify\"; \/\/Displays error messages if API calls fail.\nimport api from \"..\/utils\/api\"; \/\/Axios instance for API requests.\nimport { useNavigate } from \"react-router-dom\"; \/\/Enables navigation between pages.\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a<\/li>\n<\/ul>\n<p>1.StockData the \u062c\u0632\u0626\u06cc\u0627\u062a \u0633\u0647\u0627\u0645 \u0628\u0631\u06af\u0631\u0641\u062a\u0647 \u0627\u0632 API \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u2192 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0647\u0646\u0648\u0632 \u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u06af\u0630\u0627\u0631\u06cc \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const navigate = useNavigate();\nconst [stockData, setStockData] = useState(null);\nconst [loading, setLoading] = useState(true);\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>useEffect(() =&gt; {\n  fetchStockOverview();\n}, []);\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0648\u0627\u06a9\u0634\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u0633\u0647\u0627\u0645 \u0627\u0632 API<\/li>\n<\/ul>\n<p>1. \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u0633\u0647\u0627\u0645 \u060c API (\/\u0646\u0645\u0627\u06cc \u0633\u0647\u0627\u0645) \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>2. \u062e\u0637\u0627\u0647\u0627\u06cc HANDLES (\u062e\u0637\u0627\u06cc \u0633\u06cc\u0627\u0647\u0647 \u0647\u0627 + \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u0646\u0627\u0646 \u062a\u0633\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f).<\/p>\n<p>3.Sets \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647 FALSE \u067e\u0633 \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const fetchStockOverview = async () =&gt; {\n  try {\n    const { data } = await api.get(\"\/stock-overview\");\n    setStockData(data);\n  } catch (error) {\n    console.error(error);\n    toast.error(\"Failed to fetch stock overview\");\n  } finally {\n    setLoading(false);\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a UI \u06cc\u0627 \u0645\u0624\u0644\u0641\u0647<\/li>\n<\/ul>\n<p>1. \u0646\u0627\u0648\u0628\u0631\u06cc<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><button onclick=\"{()\"> navigate(\"\/dashboard\")} \n  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\"\n&gt;\n  <span>Back to Dashboard<\/span>\n<\/button>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0628\u062e\u0634 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0633\u0647\u0627\u0645\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><h2 classname=\"text-3xl font-bold text-gray-100 mb-6 text-center w-full\"><span class=\"ez-toc-section\" id=\"Stock_Overview-2\"><\/span>\n  Stock Overview\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u06a9\u0627\u0631\u062a \u062f\u0627\u062f\u0647 \u0633\u0647\u0627\u0645 3 \u0645\u0639\u06cc\u0627\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f: \u06a9\u0644 \u06a9\u0627\u0644\u0627\u0647\u0627 \u060c \u06a9\u0644 \u0641\u0631\u0648\u062e\u062a\u0647 \u0634\u062f\u0647 \u060c \u06a9\u0644 \u062f\u0631\u0622\u0645\u062f <\/li>\n<\/ol>\n<p>\u0627\u062b\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0627\u0633\u06a9\u0644\u062a: \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0627\u0644\u0633 \u0645\u062a\u062d\u0631\u06a9 \u060c \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><div classname=\"grid grid-cols-3 gap-6 text-center\">\n  {loading ? (\n    [...Array(3)].map((_, i) =&gt; (\n      \n    ))\n  ) : (\n    &lt;&gt;\n      <div classname=\"p-6 bg-gray-800 rounded-lg shadow-md\">\n        <h3 classname=\"text-lg font-semibold text-gray-300\"><span class=\"ez-toc-section\" id=\"Total_Items\"><\/span>Total Items<span class=\"ez-toc-section-end\"><\/span><\/h3>\n        <p classname=\"text-2xl font-bold text-white\">{stockData.totalItems}<\/p>\n      <\/div>\n      <div classname=\"p-6 bg-gray-800 rounded-lg shadow-md\">\n        <h3 classname=\"text-lg font-semibold text-gray-300\"><span class=\"ez-toc-section\" id=\"Total_Sold\"><\/span>Total Sold<span class=\"ez-toc-section-end\"><\/span><\/h3>\n        <p classname=\"text-2xl font-bold text-white\">{stockData.totalSold}<\/p>\n      <\/div>\n      <div classname=\"p-6 bg-gray-800 rounded-lg shadow-md\">\n        <h3 classname=\"text-lg font-semibold text-gray-300\"><span class=\"ez-toc-section\" id=\"Total_Revenue\"><\/span>Total Revenue<span class=\"ez-toc-section-end\"><\/span><\/h3>\n        <p classname=\"text-2xl font-bold text-green-400\">\n          ${stockData.totalRevenue.toFixed(2)}\n        <\/p>\n      <\/div>\n    &gt;\n  )}\n<\/div>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0644\u06cc\u0633\u062a \u0645\u0648\u0627\u0631\u062f \u0641\u0631\u0648\u062e\u062a\u0647 \u0634\u062f\u0647<\/li>\n<\/ol>\n<ul>\n<li>\n<p>\u0645\u0648\u0627\u0631\u062f \u0641\u0631\u0648\u062e\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0647\u0646\u0648\u0632 \u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u06af\u0630\u0627\u0631\u06cc \u0627\u0633\u062a \u060c \u0627\u062b\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0633\u06a9\u0644\u062a \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0631\u0632 \u0641\u062c\u06cc\u0639\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f (\u0647\u0646\u0648\u0632 \u06a9\u0627\u0644\u0627\u06cc \u0641\u0631\u0648\u062e\u062a\u0647 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a.)<\/p>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><div classname=\"mt-8 bg-gray-800 p-6 rounded-lg shadow-md\">\n  <h3 classname=\"text-xl font-bold text-gray-100 mb-4\"><span class=\"ez-toc-section\" id=\"Sold_Items\"><\/span>Sold Items<span class=\"ez-toc-section-end\"><\/span><\/h3>\n  <ul classname=\"divide-y divide-gray-700\">\n    {loading ? (\n      [...Array(5)].map((_, i) =&gt; (\n        <li key=\"{i}\" classname=\"p-4 flex justify-between animate-pulse\">\n          \n          \n          \n          \n        <\/li>\n      ))\n    ) : stockData.soldItems.length &gt; 0 ? (\n      stockData.soldItems.map((item, index) =&gt; (\n        <li key=\"{index}\" classname=\"p-4 flex justify-between\">\n          <span classname=\"font-semibold text-white\">{item.name}<\/span> \n          <span classname=\"text-gray-400\">{item.category}<\/span>\n          <span classname=\"text-green-500\">Sold: {item.quantitySold}<\/span>\n          <span classname=\"text-blue-400\">\n            Revenue: ${item.revenueGenerated.toFixed(2)}\n          <\/span>\n        <\/li>\n      ))\n    ) : (\n      <p classname=\"text-gray-500 text-center\">No items sold yet.<\/p>\n    )}\n  <\/ul>\n<\/div>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C_componentsAnalyticsjsx\"><\/span>\n<p>  4. \u0645\u0624\u0644\u0641\u0647 \u062a\u062d\u0644\u06cc\u0644\u06cc <code>components\/Analytics.jsx<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u0648\u0627\u0631\u062f\u0627\u062a \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0647.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useEffect, useState } from \"react\";\nimport { Bar } from \"react-chartjs-2\";  \/\/Registers bar chart components.\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Title,\n  Tooltip,\n  Legend,\n} from \"chart.js\";\nimport api from \"..\/utils\/api\"; \/\/ Using baseURL configured API\nimport { useNavigate } from \"react-router-dom\";\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const [stockData, setStockData] = useState([]); \/\/Stores fetched product stock data\nconst [chartData, setChartData] = useState(null); \/\/ Stores formatted data for Chart.js\nconst [category, setCategory] = useState(\"\"); \/\/Stores user-input filter for product category\nconst [sortBy, setSortBy] = useState(\"totalRevenue\"); \/\/Stores sorting criteria (totalRevenue or totalSold)\nconst [order, setOrder] = useState(\"desc\"); \/\/Determines sort order (asc or desc)\nconst [loading, setLoading] = useState(true); \/\/Tracks data fetching state\nconst [error, setError] = useState(null); \/\/Stores error messages\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc UseEffect fetchstockdata \u0648 fetchchartdata \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u060c \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u06cc\u0627 \u0633\u0641\u0627\u0631\u0634 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>useEffect(() =&gt; {\n  fetchStockData();\n  fetchChartData();\n}, [category, sortBy, order]);\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0647\u0627\u0645 1. \u062f\u0631\u062e\u0648\u0627\u0633\u062a API \u0631\u0627 \u0628\u0647 \/\u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \/\u0633\u0647\u0627\u0645 \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u0633\u0647\u0627\u0645.<\/li>\n<\/ul>\n<p>2. \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0641\u06cc\u0644\u062a\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u06af\u0631\u0648\u0647 (\u0645\u0648\u0631\u062f \u062d\u0633\u0627\u0633).<\/p>\n<p>3.Updates StockData \u0628\u0627 \u0646\u062a\u0627\u06cc\u062c \u0641\u06cc\u0644\u062a\u0631 \u0634\u062f\u0647.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const fetchStockData = async () =&gt; {\n  setLoading(true);\n  try {\n    const response = await api.get(`\/analytics\/stock`, {\n      params: { sortBy, order },\n    });\n\n    let filteredData = response.data;\n\n    \/\/ Apply case-insensitive filtering on the frontend\n    if (category.trim() !== \"\") {\n      const searchQuery = category.toLowerCase();\n      filteredData = filteredData.filter(product =&gt;\n        product.category.toLowerCase().includes(searchQuery) ||\n        product.name.toLowerCase().includes(searchQuery)\n      );\n    }\n\n    setStockData(filteredData);\n  } catch (error) {\n    setError(\"Error fetching stock data\");\n    console.error(\"Error fetching stock data:\", error);\n  } finally {\n    setLoading(false);\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>1.Calls API \/Analytics \/Chart-Data \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u06a9\u0644 \u062f\u0631\u0622\u0645\u062f \u0648 \u06a9\u0644 \u0641\u0631\u0648\u062e\u062a\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0647\u0631 \u06af\u0631\u0648\u0647.<\/p>\n<p>2. \u067e\u0627\u0633\u062e \u0628\u0647 ChartData \u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u062f\u0627\u0631 \u0646\u0645\u0648\u062f\u0627\u0631.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const fetchChartData = async () =&gt; {\n  try {\n    const response = await api.get(`\/analytics\/chart-data`);\n    const data = response.data;\n    setChartData({\n      labels: data.map((item) =&gt; item.category),\n      datasets: [\n        {\n          label: \"Total Revenue\",\n          data: data.map((item) =&gt; item.totalRevenue || 0),\n          backgroundColor: \"rgba(54, 162, 235, 0.6)\",\n        },\n        {\n          label: \"Total Sold\",\n          data: data.map((item) =&gt; item.totalSold || 0),\n          backgroundColor: \"rgba(255, 99, 132, 0.6)\",\n        },\n      ],\n    });\n  } catch (error) {\n    setError(\"Error fetching chart data\");\n    console.error(\"Error fetching chart data:\", error);\n  }\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u067e\u06cc\u0627\u0632<\/li>\n<li>\u062f\u06a9\u0645\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><button onclick=\"{()\"> navigate(\"\/dashboard\")} \n  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\"\n&gt;\n  <span>Back to Dashboard<\/span>\n<\/button>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0641\u06cc\u0644\u062a\u0631\u0647\u0627 \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc<\/li>\n<li>\u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646: \u0641\u06cc\u0644\u062a\u0631\u0647\u0627 \u0628\u0631\u0627\u0633\u0627\u0633 \u062f\u0633\u062a\u0647.<\/li>\n<li>\u06a9\u0634\u0648\u06cc\u06cc: 1.Sort by (TotalRevelue \/ Totalsold). 2. \u0633\u0641\u0627\u0631\u0634 (ASC \/ DESC).\n<\/li>\n<\/ol>\n<ol>\n<li>\u062c\u062f\u0648\u0644 \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0647\u0627\u0645<\/li>\n<\/ol>\n<p>\u0645\u062d\u0635\u0648\u0644 \u060c \u062f\u0633\u062a\u0647 \u060c \u062a\u0639\u062f\u0627\u062f \u0641\u0631\u0648\u0634 \u0648 \u062f\u0631\u0622\u0645\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u0632 StockData \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0631\u062f\u06cc\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><table classname=\"w-full border-collapse border border-gray-700\">\n  <thead>\n    <tr classname=\"bg-gray-800\">\n      <th classname=\"p-2 border border-gray-700\">Product<\/th>\n      <th classname=\"p-2 border border-gray-700\">Category<\/th>\n      <th classname=\"p-2 border border-gray-700\">Items Sold<\/th>\n      <th classname=\"p-2 border border-gray-700\">Revenue<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    {stockData.map((product) =&gt; (\n      <tr key=\"{product._id}\" classname=\"text-center bg-gray-700\">\n        <td classname=\"p-2 border border-gray-600\">{product.name}<\/td>\n        <td classname=\"p-2 border border-gray-600\">{product.category}<\/td>\n        <td classname=\"p-2 border border-gray-600\">{product.itemsSold}<\/td>\n        <td classname=\"p-2 border border-gray-600\">\n          ${product.totalRevenue ? product.totalRevenue.toFixed(2) : \"0.00\"}\n        <\/td>\n      <\/tr>\n    ))}\n  <\/tbody>\n<\/table>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0646\u0645\u0648\u062f\u0627\u0631 \u0646\u0645\u0648\u062f\u0627\u0631 \u0646\u0648\u0627\u0631<\/li>\n<li>\u0627\u06af\u0631 ChartData \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u0646\u0645\u0648\u062f\u0627\u0631 \u0646\u0648\u0627\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{chartData &amp;&amp; (\n  <p>\n    <h2 classname=\"text-xl font-bold\"><span class=\"ez-toc-section\" id=\"Sales_Revenue_Overview\"><\/span>Sales &amp; Revenue Overview<span class=\"ez-toc-section-end\"><\/span><\/h2>\n    <bar data=\"{chartData}\"\/>\n  <\/p>\n)}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"5_%D8%B5%D9%81%D8%AD%D9%87_%D9%81%D8%B1%D9%88%D8%AF_pagesLandingPagejsx\"><\/span>\n<p>  5 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f <code>pages\/LandingPage.jsx<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { useNavigate } from \"react-router-dom\";\nimport { ShoppingCart, BarChart3, FileText, LogIn } from \"lucide-react\";\nimport { AuthContext } from \"..\/context\/AuthContext\";\nimport { useContext, useState } from \"react\";\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062a\u0639\u0631\u06cc\u0641 \u0645\u0624\u0644\u0641\u0647 \u0648 AuthChecks<\/li>\n<\/ul>\n<p>1. \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0632 AuthContext \u062e\u0627\u0631\u062c \u06a9\u0646\u06cc\u062f.<\/p>\n<p>2.Isopen \u062f\u06cc\u062f\u06af\u0627\u0647 \u06a9\u0634\u0648\u06cc\u06cc \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0634\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u060c \u0686\u06a9 \u0647\u0627\u06cc 3.isauthenticated \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const LandingPage = () =&gt; {\n  const { user, logout } = useContext(AuthContext);\n  const [isOpen, setIsOpen] = useState(false);\n  const navigate = useNavigate();\n\n  const handleLogout = () =&gt; {\n    logout();\n    navigate(\"https:\/\/dev.to\/\");\n    setIsOpen(false);\n  };\n\n  const isAuthenticated = !!localStorage.getItem(\"token\");\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0631\u0648\u06cc \u0645\u0634\u062e\u0635\u0627\u062a Handling \u060c \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleProfileClick = async () =&gt; {\n  if (!isOpen) {\n    await user;\n  }\n  setIsOpen(!isOpen);\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const handleNavigation = (path) =&gt; {\n  navigate(isAuthenticated ? path : \"\/login\");\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0637\u0631\u062d \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \/\/ \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>return (\n  <div classname=\"min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6 relative\">\n\n\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<ul>\n<li>Navbar section\n1.If the user is logged in, show a profile button.<\/li>\n<\/ul>\n\n<p>2.Clicking Profile reveals a dropdown with name, email, and a logout button.<\/p>\n\n<p>3.If not logged in, show Login &amp; Register buttons.<br\/><\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>{user ? (\n  \n) : (\n  <p>\n    <button onclick=\"{()\"> navigate(\"\/login\")} className=\"text-white hover:text-blue-400 transition duration-300\"&gt;Login<\/button>\n    <span classname=\"text-gray-500\">|<\/span>\n    <button onclick=\"{()\"> navigate(\"\/auth\/register\")} className=\"text-white hover:text-green-400 transition duration-300\"&gt;Register<\/button>\n  <\/p>\n)}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634 \u0642\u0647\u0631\u0645\u0627\u0646 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><header classname=\"text-center max-w-3xl\">\n  \n  <p classname=\"text-gray-300\">\n    A powerful tool to track inventory, manage stock levels, and generate reports efficiently.\n  <\/p>\n<\/header>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>1.Displays 3 \u06a9\u0627\u0631\u062a \u0648\u06cc\u0698\u06af\u06cc (\u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u0635\u0648\u0644 \u060c \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0633\u0647\u0627\u0645 \u060c \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644).<\/p>\n<p>2. \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u060c \u06a9\u0627\u0631\u062a \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u06cc\u0645\u0646 \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><section classname=\"mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-center\">\n  {[\n    {\n      path: \"\/products\",\n      icon: <shoppingcart size=\"{40}\" classname=\"text-yellow-400 mx-auto mb-3\"\/>,\n      title: \"Product Management\",\n      description: \"Easily add, edit, and delete products in stock.\",\n    },\n    {\n      path: \"\/stock-overview\",\n      icon: <barchart3 size=\"{40}\" classname=\"text-green-400 mx-auto mb-3\"\/>,\n      title: \"Stock Overview\",\n      description: \"Monitor available stock, items sold, and revenue trends.\",\n    },\n    {\n      path: \"\/analytics\",\n      icon: <filetext size=\"{40}\" classname=\"text-purple-400 mx-auto mb-3\"\/>,\n      title: \"Analysis\",\n      description: \"Generate reports in charts.\",\n    },\n  ].map((feature, index) =&gt; (\n    <div key=\"{index}\" onclick=\"{()\"> handleNavigation(feature.path)}\n      className=\"bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300\"&gt;\n      {feature.icon}\n      <h3 classname=\"text-xl font-semibold\"><span class=\"ez-toc-section\" id=\"featuretitle\"><\/span>{feature.title}<span class=\"ez-toc-section-end\"><\/span><\/h3>\n      <p classname=\"text-gray-400 mt-2\">{feature.description}<\/p>\n    <\/div>\n  ))}\n\n  {!isAuthenticated &amp;&amp; (\n    <div onclick=\"{()\"> navigate(\"\/login\")}\n      className=\"bg-gray-800 p-6 rounded-lg shadow-md cursor-pointer hover:bg-gray-700 transition duration-300\"&gt;\n      <login size=\"{40}\" classname=\"text-red-400 mx-auto mb-3\"\/>\n      <h3 classname=\"text-xl font-semibold\"><span class=\"ez-toc-section\" id=\"Secure_Login\"><\/span>Secure Login<span class=\"ez-toc-section-end\"><\/span><\/h3>\n      <p classname=\"text-gray-400 mt-2\">Ensure security with JWT-based authentication.<\/p>\n    <\/div>\n  )}\n<\/section>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><footer classname=\"mt-12 text-gray-500 text-center\">\n  \u00a9 {new Date().getFullYear()} Stock Management System By Shaik Reshma\n<\/footer>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u062f \u0645\u0646\u0628\u0639 \u067e\u0631\u0648\u0698\u0647 \u0645\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \ud83d\udc49github \u0648 \u0644\u06cc\u0646\u06a9 \u0645\u0633\u062a\u0642\u0631 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u060c \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631 \u0645\u0648\u0631\u062f \u06a9\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a Frontend \u0627\u0633\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 NPM Run Dev \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0647\u0631\u06af\u0648\u0646\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0628\u062e\u0634 \u0646\u0638\u0631\u0627\u062a \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<blockquote>\n<pre class=\"highlight plaintext\"><code>                       Let's grow together!\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw58nvux1017sjq3ydf51.png\" alt=\"TQ\" loading=\"lazy\" width=\"562\" height=\"594\" title=\"\"><\/p>\n<\/blockquote>\n<p>          <\/code><\/div>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u0627 \u0628\u0627 \ud83d\udc49 auth \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0633\u06cc\u0631 \u062e\u0635\u0648\u0635\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0628\u062e\u0634 \u062c\u0644\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u0645. 1. \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f pages\/Dashboard.jsx \u0645\u0646 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0645\u0646 \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":105078,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4jbbfsqx70x42poeiepl.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=105077"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105078"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}