Inventory-Management-System/Mainpage.html at main · parthhanda/Inventory-Management-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STOCKERZZ-Main Page</title>
    <link rel="stylesheet" href="/CSS/Mainpage.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <header>
        <div class="user-info">
            <img src="/Images/user_photo.jpg" alt="User Photo" class="user-photo">
            <p class="welcome-text">Welcome, Parth Handa</p>
        </div>
        <h1>STOCKERZZ</h1>
        <h2>Stock Management System</h2>
        <nav>
            <ul>
                <li><a href="#">Dashboard</a></li>
                <li><a href="#add-stock">Add Stock</a></li>
                <li><a href="#view-stock">View Stock</a></li>
                <li><a href="#" id="logoutBtn">Logout</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="dashboard">
            <h2>Dashboard</h2>
            <div class="dashboard-dropdown">
                <div class="dashboard-item">
                    <h3>Total Products</h3>
                    <p id="total-products">0</p>
                </div>
                <div class="dashboard-item">
                    <h3>Total Stock Value</h3>
                    <p id="total-stock-value">₹0</p>
                </div>
                <div class="dashboard-item">
                    <h3>Total Sales</h3>
                    <p id="total-sales">₹0</p>
                </div>
            </div>
            <div class="chart-container">
                <div id="stock-distribution">
                    <h3>Stock Quantity Distribution</h3>
                    <canvas id="stockChart" style="width: 500px; height: 500px;"></canvas>
                </div>
                <div id="stock-bar-distribution">
                    <canvas id="stockBarChart" style="width: 500px; height: 500px;"></canvas>
                </div>
            </div>
        </section>

        <section id="add-stock">
            <h2>Add New Stock</h2>
            <form id="stockForm">
                <label for="product-name">Product Name:</label>
                <input type="text" id="product-name" name="product-name" required>

                <label for="quantity">Quantity:</label>
                <input type="number" id="quantity" name="quantity" required>

                <label for="price-per-item">Price per Item:</label>
                <input type="number" id="price-per-item" name="price-per-item" step="0.01" required>

                <button type="submit">Add Stock</button>
            </form>
        </section>

        <section id="view-stock">
            <h2>Stock List</h2>
            <table>
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Price per Item</th>
                        <th>Total Price</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="StockTableBody">
                </tbody>
            </table>
        </section>

        <section id="sales">
            <h2>Sales</h2>
            <table>
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Available Quantity</th>
                        <th>Sold Quantity</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="SalesTableBody">
                </tbody>
            </table>
        </section>

        <section id="total-stock">
            <h2>Total Stock</h2>
            <table>
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Remaining Quantity</th>
                        <th>Price per Item</th>
                        <th>Total Value</th>
                    </tr>
                </thead>
                <tbody id="TotalStockTableBody">
                </tbody>
            </table>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 STOCKERZZ. All rights reserved.</p>
    </footer>

    <script src="/JAVASCRIPT/Mainpage.js"></script>
</body>
</html>