File size: 9,801 Bytes
0bb49b0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans "Inventory Dashboard - Virtual Fitting System" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-2">{% trans "Inventory Dashboard" %}</h1>
        <p class="text-xl text-gray-600">{% trans "Manage your product inventory" %}</p>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-md p-6">
            <p class="text-gray-600 mb-2">{% trans "Total Variants" %}</p>
            <p class="text-3xl font-bold text-gray-900">{{ total_variants }}</p>
        </div>
        <div class="bg-green-50 rounded-xl shadow-md p-6">
            <p class="text-green-700 mb-2">{% trans "In Stock" %}</p>
            <p class="text-3xl font-bold text-green-600">{{ in_stock|length }}</p>
        </div>
        <div class="bg-yellow-50 rounded-xl shadow-md p-6">
            <p class="text-yellow-700 mb-2">{% trans "Low Stock" %}</p>
            <p class="text-3xl font-bold text-yellow-600">{{ low_stock|length }}</p>
        </div>
        <div class="bg-red-50 rounded-xl shadow-md p-6">
            <p class="text-red-700 mb-2">{% trans "Out of Stock" %}</p>
            <p class="text-3xl font-bold text-red-600">{{ out_of_stock|length }}</p>
        </div>
    </div>

    <!-- Low Stock Alert -->
    {% if low_stock %}
    <div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-6 mb-8">
        <h2 class="text-xl font-bold text-yellow-900 mb-4">{% trans "Low Stock Alerts" %}</h2>
        <div class="space-y-2">
            {% for variant in low_stock %}
            <div class="flex items-center justify-between bg-white rounded-lg p-4">
                <div>
                    <p class="font-medium text-gray-900">{{ variant.localized_product_name }}</p>
                    <p class="text-sm text-gray-600">{% trans "Size" %}: {{ variant.size.name }} | {% trans "Color" %}: {{ variant.localized_color_name }}</p>
                </div>
                <span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg font-bold">
                    {{ variant.inventory.quantity|default:0 }} {% trans "left" %}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Out of Stock Alert -->
    {% if out_of_stock %}
    <div class="bg-red-50 border-2 border-red-200 rounded-xl p-6 mb-8">
        <h2 class="text-xl font-bold text-red-900 mb-4">{% trans "Out of Stock" %}</h2>
        <div class="space-y-2">
            {% for variant in out_of_stock %}
            <div class="flex items-center justify-between bg-white rounded-lg p-4">
                <div>
                    <p class="font-medium text-gray-900">{{ variant.localized_product_name }}</p>
                    <p class="text-sm text-gray-600">{% trans "Size" %}: {{ variant.size.name }} | {% trans "Color" %}: {{ variant.localized_color_name }}</p>
                </div>
                <span class="px-4 py-2 bg-red-100 text-red-800 rounded-lg font-bold">
                    {% trans "Out of Stock" %}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- All Inventory -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">{% trans "All Inventory" %}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[#EAF3F8]">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Product" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">{% trans "Size" %}
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Color" %}
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Quantity" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Status" %}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for variant in in_stock %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                            {{ variant.inventory.quantity|default:0 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                {% trans "In Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                    {% for variant in low_stock %}
                    <tr class="bg-yellow-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-yellow-900">
                            {{ variant.inventory.quantity|default:0 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                {% trans "Low Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                    {% for variant in out_of_stock %}
                    <tr class="bg-red-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-red-900">0</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                {% trans "Out of Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-8 text-center">
        <a href="/admin/fitting_system/inventory/"
            class="bg-[#1B3A6B] text-white px-8 py-3 rounded-lg font-bold hover:bg-[#2E5FA3] transition">
            {% trans "Manage Inventory in Admin Panel" %}
        </a>
    </div>
</div>
{% endblock %}