Initial commit
This commit is contained in:
Abdulaziz Axmadaliyev
@@ -6,7 +6,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -27,97 +29,79 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
header .logo { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
|
||||
|
||||
#menu-btn {
|
||||
header .logo {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Home Button */
|
||||
.home-btn {
|
||||
position: absolute;
|
||||
left: 24px; top: 50%;
|
||||
left: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #fff; border: none; padding: 6px 10px;
|
||||
border-radius: 8px; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
#menu-btn svg { stroke: #4f46e5; }
|
||||
|
||||
/* Sidebar */
|
||||
#sidebar {
|
||||
background: #fff;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
padding: 20px;
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -260px;
|
||||
height: 100vh; /* full viewport height */
|
||||
overflow: hidden; /* non-scrollable */
|
||||
transition: left 0.3s ease, box-shadow 0.3s ease;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* keeps logout at bottom */
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
}
|
||||
#sidebar.active { left: 0; }
|
||||
|
||||
#sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#sidebar ul li { margin-bottom: 16px; }
|
||||
#sidebar ul li a {
|
||||
text-decoration: none;
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.25s ease;
|
||||
background: #f9fafb;
|
||||
white-space: nowrap; /* prevent wrapping */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#sidebar ul li a:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(79,70,229,0.3);
|
||||
}
|
||||
|
||||
/* Logout button fixed at bottom */
|
||||
.logout-container {
|
||||
margin-top: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.home-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
.home-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
/* Logout Button */
|
||||
.logout-btn {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: #dc2626;
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
|
||||
background: #ef4444;
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding: 20px;
|
||||
background: #f4f5f7;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
main.shifted { margin-left: 240px; }
|
||||
|
||||
/* Cards */
|
||||
.cards-container {
|
||||
@@ -125,17 +109,34 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
|
||||
.card-row { margin-bottom: 8px; font-size: 14px; color: #374151; }
|
||||
.card-row strong { color: #111827; }
|
||||
.card-actions { margin-top: 12px; }
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-row {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.card-row strong {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.card-actions .btn {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
@@ -147,93 +148,97 @@
|
||||
margin-right: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.card-actions .btn.edit { background: #4f46e5; }
|
||||
.card-actions .btn.confirm { background: #10b981; }
|
||||
.card-actions .btn.decline { background: #ef4444; }
|
||||
.card-actions .btn:hover { opacity: 0.85; transform: translateY(-1px); }
|
||||
|
||||
.card-actions .btn.edit {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
.card-actions .btn.confirm {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.card-actions .btn.decline {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.card-actions .btn:hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
#sidebar { width: 220px; }
|
||||
main.shifted { margin-left: 220px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#sidebar { width: 200px; left: -220px; }
|
||||
#sidebar.active { left: 0; box-shadow: 2px 0 12px rgba(0,0,0,0.2); }
|
||||
main.shifted { margin-left: 0; } /* overlay on small screens */
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.cards-container { grid-template-columns: 1fr; }
|
||||
.card { padding: 14px 16px; }
|
||||
.card-row { font-size: 13px; }
|
||||
.card-actions .btn { font-size: 12px; padding: 5px 8px; margin-bottom: 4px; }
|
||||
.cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-actions .btn {
|
||||
font-size: 12px;
|
||||
padding: 5px 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
header { padding: 12px 16px; }
|
||||
#menu-btn { left: 16px; padding: 4px 8px; }
|
||||
.logo { font-size: 18px; }
|
||||
#sidebar { padding: 16px; }
|
||||
.logout-btn { font-size: 13px; padding: 8px 10px; }
|
||||
header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
left: 16px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.home-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
right: 16px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<button id="menu-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 5h16"/>
|
||||
<path d="M4 12h16"/>
|
||||
<path d="M4 19h16"/>
|
||||
<a href="{% url 'dashboard' %}" class="home-btn" title="Dashboard">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<div class="logo">Xvatayka</div>
|
||||
<form method="post" action="{% url 'logout' %}" style="margin: 0;">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="logout-btn" title="Chiqish">🚪</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
<li><a href="{% url 'dashboard' %}">Dashboard</a></li>
|
||||
<li><a href="{% url 'expense_list' %}">Xarajatlar</a></li>
|
||||
<li><a href="{% url 'income_list' %}">Kirimlar</a></li>
|
||||
<li><a href="{% url 'toy_movement_list' %}">Oʻyinchoq harakatlari</a></li>
|
||||
{% if user.role == "manager" or user.role == "businessman" %}
|
||||
<li><a href="{% url 'device_list' %}">Aparatlar</a></li>
|
||||
<li><a href="{% url 'warehouse_list' %}">Omborlar</a></li>
|
||||
<li><a href="{% url 'user_list' %}">Foydalanuvchilar</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="logout-container">
|
||||
{% if user.is_authenticated %}
|
||||
<form method="post" action="{% url 'logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="logout-btn">Chiqish</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main id="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const menuBtn = document.getElementById('menu-btn');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
|
||||
menuBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
mainContent.classList.toggle('shifted');
|
||||
});
|
||||
|
||||
// Optional: click outside to close
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!sidebar.contains(e.target) && !menuBtn.contains(e.target)) {
|
||||
sidebar.classList.remove('active');
|
||||
mainContent.classList.remove('shifted');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,117 +1,146 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<br>
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Businessman Paneli</h2>
|
||||
<br>
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Businessman Paneli</h2>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<a href="{% url 'create_user' %}" class="dashboard-card">
|
||||
<div class="icon">👤</div>
|
||||
<div class="label">Foydalanuvchi yaratish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_device' %}" class="dashboard-card">
|
||||
<div class="icon">💻</div>
|
||||
<div class="label">Aparat yaratish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_expense' %}" class="dashboard-card">
|
||||
<div class="icon">💸</div>
|
||||
<div class="label">Xarajat qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_income' %}" class="dashboard-card">
|
||||
<div class="icon">📥</div>
|
||||
<div class="label">Kirim qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_warehouse' %}" class="dashboard-card">
|
||||
<div class="icon">🏬</div>
|
||||
<div class="label">Ombor yaratish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_toy_movement' %}" class="dashboard-card">
|
||||
<div class="icon">🚚</div>
|
||||
<div class="label">Oʻyinchoq harakati yaratish</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dashboard-grid">
|
||||
<!-- View/Manage Actions -->
|
||||
<a href="{% url 'expense_list' %}" class="dashboard-card">
|
||||
<div class="icon">📋</div>
|
||||
<div class="label">Xarajatlar</div>
|
||||
</a>
|
||||
<a href="{% url 'toy_movement_list' %}" class="dashboard-card">
|
||||
<div class="icon">📦</div>
|
||||
<div class="label">Oʻyinchoq harakatlari</div>
|
||||
</a>
|
||||
<a href="{% url 'device_list' %}" class="dashboard-card">
|
||||
<div class="icon">🖥️</div>
|
||||
<div class="label">Aparatlar</div>
|
||||
</a>
|
||||
<a href="{% url 'warehouse_list' %}" class="dashboard-card">
|
||||
<div class="icon">🏭</div>
|
||||
<div class="label">Omborlar</div>
|
||||
</a>
|
||||
<a href="{% url 'user_list' %}" class="dashboard-card">
|
||||
<div class="icon">👥</div>
|
||||
<div class="label">Foydalanuvchilar</div>
|
||||
</a>
|
||||
<a href="{% url 'report_list' %}" class="dashboard-card">
|
||||
<div class="icon">📊</div>
|
||||
<div class="label">Kunlik Hisobotlar</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard-card.secondary {
|
||||
background: #f0f4ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
/* Mobile adjustments: keep grid layout, adjust size */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.dashboard-card.secondary:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.dashboard-card.logout-card {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
{% endblock %}
|
||||
.dashboard-card.logout-card:hover {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,33 +1,58 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ title|default:"Yaratish" }}{% endblock %}
|
||||
{% block title %}{{ title|default:"Aparat Yaratish" }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Yaratish" }}</h2>
|
||||
<h2>{{ title|default:"Aparat Yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
<a href="{% url 'device_list' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
Orqaga
|
||||
</a>
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
|
||||
<!-- Address -->
|
||||
<div class="form-group">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.help_text %}
|
||||
<small class="help-text">{{ field.help_text }}</small>
|
||||
{% endif %}
|
||||
{% for error in field.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
<label for="{{ form.address.id_for_label }}">Manzil</label>
|
||||
{{ form.address }}
|
||||
{% for error in form.address.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- District -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.district.id_for_label }}">Tuman</label>
|
||||
{{ form.district }}
|
||||
{% for error in form.district.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Amount -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.amount.id_for_label }}">Summa</label>
|
||||
{{ form.amount }}
|
||||
{% for error in form.amount.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.due_date.id_for_label }}">To'lov muddati</label>
|
||||
{{ form.due_date }}
|
||||
{% for error in form.due_date.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<button type="submit" class="submit-btn">Saqlash</button>
|
||||
</form>
|
||||
@@ -36,7 +61,7 @@
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
margin: 40px auto;
|
||||
background: #fff;
|
||||
padding: 24px 28px;
|
||||
border-radius: 12px;
|
||||
@@ -44,7 +69,7 @@
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
@@ -70,7 +95,6 @@
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
@@ -79,10 +103,9 @@
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
@@ -107,12 +130,6 @@
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
@@ -121,7 +138,7 @@
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
padding: 12px 0;
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
@@ -137,11 +154,10 @@
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<a href="{% url 'expense_list' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
@@ -41,25 +41,42 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
const typeSelect = document.getElementById("id_expense_type");
|
||||
const employeeGroup = document.getElementById("group-employee");
|
||||
const deviceGroup = document.getElementById("group-device");
|
||||
const commentGroup = document.getElementById("group-comment");
|
||||
|
||||
function hideAllConditional() {
|
||||
if (employeeGroup) employeeGroup.style.display = "none";
|
||||
if (deviceGroup) deviceGroup.style.display = "none";
|
||||
if (commentGroup) commentGroup.style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFields() {
|
||||
if (!typeSelect) return;
|
||||
|
||||
const value = typeSelect.value;
|
||||
|
||||
// Hide both initially
|
||||
if (employeeGroup) employeeGroup.style.display = "none";
|
||||
if (deviceGroup) deviceGroup.style.display = "none";
|
||||
// Hide all conditional fields first
|
||||
hideAllConditional();
|
||||
|
||||
// Show relevant fields based on expense type
|
||||
if (value === "salary") {
|
||||
if (employeeGroup) employeeGroup.style.display = "flex";
|
||||
} else if (value === "rent" || value === "maintenance") {
|
||||
if (deviceGroup) deviceGroup.style.display = "flex";
|
||||
} else if (value === "other") {
|
||||
if (commentGroup) commentGroup.style.display = "flex";
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize: hide all conditional fields on page load
|
||||
hideAllConditional();
|
||||
|
||||
// Then show appropriate fields based on current selection
|
||||
toggleFields();
|
||||
if (typeSelect) typeSelect.addEventListener("change", toggleFields);
|
||||
|
||||
// Listen for changes
|
||||
if (typeSelect) {
|
||||
typeSelect.addEventListener("change", toggleFields);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -114,7 +131,8 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
color: #374151;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
@@ -123,7 +141,8 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
@@ -162,4 +181,4 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
.form-container { padding: 20px 16px; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<a href="{% url 'income_list' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
|
||||
148
core/apps/management/templates/common/create/rent_create.html
Normal file
148
core/apps/management/templates/common/create/rent_create.html
Normal file
@@ -0,0 +1,148 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ title|default:"Arenda Yaratish" }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Arenda Yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
Orqaga
|
||||
</a>
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
<div class="form-group">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.help_text %}
|
||||
<small class="help-text">{{ field.help_text }}</small>
|
||||
{% endif %}
|
||||
{% for error in field.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<button type="submit" class="submit-btn">Saqlash</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 24px 28px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
284
core/apps/management/templates/common/create/report_create.html
Normal file
284
core/apps/management/templates/common/create/report_create.html
Normal file
@@ -0,0 +1,284 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Yakuniy Hisobot{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h2>Yakuniy Hisobot</h2>
|
||||
<p class="subtitle">Kunni yakunlash uchun qurilma va oxirgi ko'rsatkichni tanlang</p>
|
||||
</div>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="alert alert-error">
|
||||
{% for error in form.non_field_errors %}
|
||||
<p>⚠️ {{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" id="reportForm" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Device Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.device.id_for_label }}">{{ form.device.label }} <span class="required">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
{{ form.device }}
|
||||
{% if form.device.help_text %}
|
||||
<small class="help-text">{{ form.device.help_text }}</small>
|
||||
{% endif %}
|
||||
{% if form.device.errors %}
|
||||
<div class="field-error">
|
||||
{% for error in form.device.errors %}
|
||||
<p>{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quantity Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.quantity.id_for_label }}">{{ form.quantity.label }} <span class="required">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
{{ form.quantity }}
|
||||
{% if form.quantity.errors %}
|
||||
<div class="field-error">
|
||||
{% for error in form.quantity.errors %}
|
||||
<p>{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="submit-btn">Yakunlash</button>
|
||||
|
||||
<!-- Back Link -->
|
||||
<a href="{% url 'employee_dashboard' %}" class="back-link">Orqaga qaytish</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("reportForm").addEventListener("submit", function(e){
|
||||
const device = document.getElementById("id_device").value;
|
||||
const quantity = document.getElementById("id_quantity").value;
|
||||
|
||||
// Validate before showing confirmation
|
||||
if (!device) {
|
||||
e.preventDefault();
|
||||
alert("Qurilmani tanlang");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!quantity || quantity < 1) {
|
||||
e.preventDefault();
|
||||
alert("Miqdorni to'g'ri kiriting");
|
||||
return;
|
||||
}
|
||||
|
||||
// Show confirmation dialog
|
||||
const deviceText = document.getElementById("id_device").options[
|
||||
document.getElementById("id_device").selectedIndex
|
||||
].text;
|
||||
|
||||
if (!confirm(`Siz kunni yakunlamoqchimisiz?\n\nQurilma: ${deviceText}\nMiqdor: ${quantity}`)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 450px;
|
||||
margin: 40px auto;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
color: #111827;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.alert-error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form Group */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#id_device,
|
||||
#id_quantity {
|
||||
padding: 11px 13px;
|
||||
border: 1.5px solid #d1d5db;
|
||||
border-radius: 9px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: all 0.25s ease;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#id_device:focus,
|
||||
#id_quantity:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
||||
background: #f8f7ff;
|
||||
}
|
||||
|
||||
#id_device:disabled {
|
||||
background: #f3f4f6;
|
||||
color: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#id_quantity::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Help Text */
|
||||
.help-text {
|
||||
font-size: 13px;
|
||||
color: #f59e0b;
|
||||
margin-top: 6px;
|
||||
padding: 8px 10px;
|
||||
background: #fef3c7;
|
||||
border-left: 3px solid #f59e0b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Field Errors */
|
||||
.field-error {
|
||||
margin-top: 6px;
|
||||
padding: 8px 10px;
|
||||
background: #fee2e2;
|
||||
border-left: 3px solid #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.field-error p {
|
||||
margin: 0;
|
||||
color: #dc2626;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.field-error p:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: linear-gradient(135deg, #15803d 0%, #166534 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: #f3f4f6;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
padding: 24px 16px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
@@ -4,31 +4,93 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Yaratish" }}</h2>
|
||||
<h2>{{ title|default:"O'yinchoq harakati yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<a href="{% url 'toy_movement_list' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
Orqaga
|
||||
</a>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="alert alert-error" style="margin-bottom: 16px;">
|
||||
{% for error in form.non_field_errors %}
|
||||
<p>⚠️ {{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
<div class="form-group">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.help_text %}
|
||||
<small class="help-text">{{ field.help_text }}</small>
|
||||
{% endif %}
|
||||
{% for error in field.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<!-- EMPLOYEE FORM (Device + Quantity only) -->
|
||||
{% if request.user.role == "employee" %}
|
||||
<!-- Device Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.device.id_for_label }}">{{ form.device.label }}</label>
|
||||
{{ form.device }}
|
||||
{% if form.device.errors %}
|
||||
<div class="error">{{ form.device.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Quantity Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.quantity.id_for_label }}">{{ form.quantity.label }}</label>
|
||||
{{ form.quantity }}
|
||||
{% if form.quantity.errors %}
|
||||
<div class="error">{{ form.quantity.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- MANAGER/BUSINESSMAN FORM (Full form) -->
|
||||
{% else %}
|
||||
<!-- Movement Type Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.movement_type.id_for_label }}">{{ form.movement_type.label }}</label>
|
||||
{{ form.movement_type }}
|
||||
{% if form.movement_type.errors %}
|
||||
<div class="error">{{ form.movement_type.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- From Warehouse Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.from_warehouse.id_for_label }}">{{ form.from_warehouse.label }}</label>
|
||||
{{ form.from_warehouse }}
|
||||
{% if form.from_warehouse.errors %}
|
||||
<div class="error">{{ form.from_warehouse.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- To Warehouse Field (hidden by default) -->
|
||||
<div class="form-group" id="to-warehouse-group" style="display: none;">
|
||||
<label for="{{ form.to_warehouse.id_for_label }}">{{ form.to_warehouse.label }}</label>
|
||||
{{ form.to_warehouse }}
|
||||
{% if form.to_warehouse.errors %}
|
||||
<div class="error">{{ form.to_warehouse.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Device Field (hidden by default) -->
|
||||
<div class="form-group" id="device-group" style="display: none;">
|
||||
<label for="{{ form.device.id_for_label }}">{{ form.device.label }}</label>
|
||||
{{ form.device }}
|
||||
{% if form.device.errors %}
|
||||
<div class="error">{{ form.device.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Quantity Field -->
|
||||
<div class="form-group">
|
||||
<label for="{{ form.quantity.id_for_label }}">{{ form.quantity.label }}</label>
|
||||
{{ form.quantity }}
|
||||
{% if form.quantity.errors %}
|
||||
<div class="error">{{ form.quantity.errors.0 }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="submit-btn">Saqlash</button>
|
||||
</form>
|
||||
@@ -79,10 +141,29 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.alert-error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
@@ -94,11 +175,14 @@
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1.5px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
@@ -117,6 +201,10 @@
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
padding: 6px 8px;
|
||||
background: #fee2e2;
|
||||
border-left: 3px solid #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
@@ -146,49 +234,37 @@
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const movementType = document.getElementById("id_movement_type");
|
||||
const toWarehouse = document.getElementById("id_to_warehouse");
|
||||
const device = document.getElementById("id_device");
|
||||
const userRole = "{{ request.user.role }}";
|
||||
|
||||
function toggleFields() {
|
||||
const value = movementType.value;
|
||||
// Only show field toggling for manager/businessman
|
||||
if (userRole !== "employee") {
|
||||
const movementTypeSelect = document.getElementById("id_movement_type");
|
||||
const toWarehouseGroup = document.getElementById("to-warehouse-group");
|
||||
const deviceGroup = document.getElementById("device-group");
|
||||
|
||||
if (value === "from_warehouse") { // Ombordan -> Aparatga
|
||||
toWarehouse.parentElement.style.display = "none";
|
||||
device.parentElement.style.display = "";
|
||||
} else if (value === "between_warehouses") { // Ombordan -> Omborga
|
||||
device.parentElement.style.display = "none";
|
||||
toWarehouse.parentElement.style.display = "";
|
||||
} else {
|
||||
toWarehouse.parentElement.style.display = "";
|
||||
device.parentElement.style.display = "";
|
||||
function toggleFields() {
|
||||
const value = movementTypeSelect.value;
|
||||
|
||||
// Reset all to hidden
|
||||
toWarehouseGroup.style.display = "none";
|
||||
deviceGroup.style.display = "none";
|
||||
|
||||
// Show relevant fields based on movement type
|
||||
if (value === "from_warehouse") {
|
||||
// Ombordan -> Aparatga
|
||||
deviceGroup.style.display = "block";
|
||||
} else if (value === "between_warehouses") {
|
||||
// Ombordan -> Omborga
|
||||
toWarehouseGroup.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update movement_type when to_warehouse is selected
|
||||
if (toWarehouse) {
|
||||
toWarehouse.addEventListener("change", function() {
|
||||
if (toWarehouse.value) {
|
||||
movementType.value = "between_warehouses";
|
||||
toggleFields();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update movement_type when device is selected
|
||||
if (device) {
|
||||
device.addEventListener("change", function() {
|
||||
if (device.value) {
|
||||
movementType.value = "from_warehouse";
|
||||
toggleFields();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run on page load
|
||||
if (movementType) {
|
||||
toggleFields();
|
||||
movementType.addEventListener("change", toggleFields);
|
||||
// Listen for changes
|
||||
if (movementTypeSelect) {
|
||||
movementTypeSelect.addEventListener("change", toggleFields);
|
||||
// Initial toggle on page load
|
||||
toggleFields();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="form-container">
|
||||
<h2>{{ title|default:"Yaratish" }}</h2>
|
||||
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<a href="{% url 'user_list' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
@@ -22,10 +22,10 @@
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.help_text %}
|
||||
<small class="help-text">{{ field.help_text }}</small>
|
||||
<p class="help-text">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
{% for error in field.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -35,120 +35,121 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 480px;
|
||||
margin: 40px auto;
|
||||
background: #fff;
|
||||
padding: 24px 28px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 24px 28px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px; /* pill shape */
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition:all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
const roleField = document.getElementById("id_role");
|
||||
const regionGroup = document.getElementById("id_region")?.closest(".form-group");
|
||||
const warehouseGroup = document.getElementById("id_warehouse")?.closest(".form-group");
|
||||
@@ -158,15 +159,23 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
const role = roleField.value;
|
||||
|
||||
// Manager
|
||||
// Hide everything first
|
||||
if (regionGroup) regionGroup.style.display = "none";
|
||||
if (warehouseGroup) warehouseGroup.style.display = "none";
|
||||
// Manager - shows region
|
||||
|
||||
// Employee - shows warehouse only
|
||||
if (role === "manager") {
|
||||
if (regionGroup) regionGroup.style.display = "block";
|
||||
if (warehouseGroup) warehouseGroup.style.display = "none";
|
||||
if (regionGroup) regionGroup.style.display = "flex";
|
||||
}
|
||||
|
||||
// Employee
|
||||
if (role === "employee") {
|
||||
if (regionGroup) regionGroup.style.display = "none";
|
||||
if (warehouseGroup) warehouseGroup.style.display = "flex";
|
||||
}
|
||||
|
||||
// Businessman - shows both region and warehouse
|
||||
if (role === "businessman") {
|
||||
if (regionGroup) regionGroup.style.display = "block";
|
||||
if (warehouseGroup) warehouseGroup.style.display = "block";
|
||||
}
|
||||
}
|
||||
@@ -179,6 +188,4 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -1,10 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
{% extends "base.html" %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page">
|
||||
<div class="card">
|
||||
|
||||
<a href="{% url 'warehouse_list' %}" class="back">
|
||||
← Orqaga
|
||||
</a>
|
||||
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="field">
|
||||
<label for="{{ form.name.id_for_label }}">Nomi</label>
|
||||
{{ form.name }}
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="{{ form.region.id_for_label }}">Hudud</label>
|
||||
{{ form.region }}
|
||||
{{ form.region.errors }}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="{{ form.toys_count.id_for_label }}">O'yinchoqlar Soni</label>
|
||||
{{ form.toys_count }}
|
||||
{{ form.toys_count.errors }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Saqlash</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: #f6f7fb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 40px 20px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: white;
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.card h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.back {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
color: #4f46e5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create Expense{% endblock %}
|
||||
{% block title %}Edit Expense{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
@@ -19,6 +19,29 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.back-btn .icon { width: 16px; height: 16px; }
|
||||
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -31,13 +54,25 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
select, input {
|
||||
select, input, textarea {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
background: #f9fafb;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
select:focus, input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -66,44 +101,74 @@
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<h1>Create Expense</h1>
|
||||
<a href="{% url 'dashboard' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
Orqaga
|
||||
</a>
|
||||
|
||||
<h1>{% if title %}{{ title }}{% else %}Edit Expense{% endif %}</h1>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="error">{{ form.non_field_errors.0 }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST">
|
||||
<form method="POST" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="field" id="field-expense_type">
|
||||
{{ form.expense_type.label_tag }}
|
||||
{{ form.expense_type }}
|
||||
{{ form.expense_type.errors }}
|
||||
{% for error in form.expense_type.errors %}
|
||||
<div class="field-error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="field" id="field-amount">
|
||||
{{ form.amount.label_tag }}
|
||||
{{ form.amount }}
|
||||
{{ form.amount.errors }}
|
||||
{% for error in form.amount.errors %}
|
||||
<div class="field-error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="field" id="field-employee" style="display:none;">
|
||||
{{ form.employee.label_tag }}
|
||||
{{ form.employee }}
|
||||
{{ form.employee.errors }}
|
||||
{% for error in form.employee.errors %}
|
||||
<div class="field-error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="field" id="field-device" style="display:none;">
|
||||
{{ form.device.label_tag }}
|
||||
{{ form.device }}
|
||||
{{ form.device.errors }}
|
||||
{% for error in form.device.errors %}
|
||||
<div class="field-error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="field" id="field-comment" style="display:none;">
|
||||
{{ form.comment.label_tag }}
|
||||
{{ form.comment }}
|
||||
{% for error in form.comment.errors %}
|
||||
<div class="field-error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<button type="submit">
|
||||
{% if title %}{{ title }}{% else %}Create{% endif %}
|
||||
{% if title %}{{ title }}{% else %}Saqlash{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -113,27 +178,38 @@
|
||||
const typeSelect = document.getElementById("id_expense_type");
|
||||
const employeeField = document.getElementById("field-employee");
|
||||
const deviceField = document.getElementById("field-device");
|
||||
const commentField = document.getElementById("field-comment");
|
||||
|
||||
function hideAllConditional() {
|
||||
if (employeeField) employeeField.style.display = "none";
|
||||
if (deviceField) deviceField.style.display = "none";
|
||||
if (commentField) commentField.style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFields() {
|
||||
if (!typeSelect) return;
|
||||
|
||||
const value = typeSelect.value;
|
||||
|
||||
// Reset both
|
||||
employeeField.style.display = "none";
|
||||
deviceField.style.display = "none";
|
||||
// Hide all conditional fields first
|
||||
hideAllConditional();
|
||||
|
||||
// Show relevant fields based on expense type
|
||||
if (value === "salary") {
|
||||
employeeField.style.display = "block";
|
||||
if (employeeField) employeeField.style.display = "block";
|
||||
} else if (value === "rent" || value === "maintenance") {
|
||||
deviceField.style.display = "block";
|
||||
if (deviceField) deviceField.style.display = "block";
|
||||
} else if (value === "other") {
|
||||
if (commentField) commentField.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
if (typeSelect) {
|
||||
// Initialize on page load
|
||||
toggleFields();
|
||||
// Listen for changes
|
||||
typeSelect.addEventListener("change", toggleFields);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create Income{% endblock %}
|
||||
{% block title %}Edit Income{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
@@ -40,7 +40,7 @@
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
button {
|
||||
.submit-btn{
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
padding: 15px;
|
||||
@@ -69,7 +69,7 @@
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<h1>Create Income</h1>
|
||||
<h1>Edit Income</h1>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="error">{{ form.non_field_errors.0 }}</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
{{ form.amount.errors }}
|
||||
</div>
|
||||
|
||||
<button type="submit">
|
||||
<button type="submit" class="submit-btn">
|
||||
{% if title %}{{ title }}{% else %}Create{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -1,10 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
{% extends "base.html" %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="form-container">
|
||||
<h2>{{ title }}</h2>
|
||||
|
||||
<a href="{% url 'businessman_dashboard' %}" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
Orqaga
|
||||
</a>
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.name.id_for_label }}">Nomi</label>
|
||||
{{ form.name }}
|
||||
{% for error in form.name.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.region.id_for_label }}">Hududi</label>
|
||||
{{ form.region }}
|
||||
{% for error in form.region.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.toys_count.id_for_label }}">O'yinchoqlar Soni</label>
|
||||
{{ form.toys_count }}
|
||||
{% for error in form.toys_count.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Saqlash</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 24px 28px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 22px;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 12px;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.form-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -3,7 +3,20 @@
|
||||
{% block title %}Aparatlar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="margin-bottom:20px;">{{ title|default:"Aparatlar" }}</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"Aparatlar" }}</h2>
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<a href="{% url 'create_device' %}" class="btn edit" style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">+ Yaratish</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="cards-container">
|
||||
{% for device in devices %}
|
||||
|
||||
@@ -0,0 +1,401 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<br>
|
||||
<h2 style="text-align:center; margin-bottom:24px;">Arendalar</h2>
|
||||
|
||||
<!-- Hidden CSRF token for JavaScript access -->
|
||||
<input type="hidden" id="csrfToken" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
|
||||
|
||||
<div class="table-container">
|
||||
<table class="styled-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Aparat</th>
|
||||
<th>Hudud</th>
|
||||
<th>To'lov muddati</th>
|
||||
<th>Summa</th>
|
||||
<th>To'landi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for device in devices %}
|
||||
<tr class="{% if not device.is_paid %}{% if device.is_overdue %}row-overdue{% elif device.days_until_due < 1 %}row-red{% elif device.days_until_due < 3 %}row-yellow{% elif device.days_until_due < 5 %}row-green{% endif %}{% endif %}">
|
||||
<td>{{ forloop.counter }}</td>
|
||||
<td>{{ device.address }}</td>
|
||||
<td>{{ device.district.name }}</td>
|
||||
<td>{{ device.due_date|date:"d.m.Y" }}</td>
|
||||
<td class="amount-cell">{{ device.amount }}</td>
|
||||
<td>
|
||||
{% if not device.is_paid %}
|
||||
<input type="checkbox"
|
||||
class="payment-checkbox"
|
||||
data-device-id="{{ device.id }}"
|
||||
data-device-name="{{ device.address }}"
|
||||
data-amount="{{ device.amount }}">
|
||||
{% else %}
|
||||
<span class="paid-badge">✅ To'langan</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="6" style="text-align:center; padding: 30px; color: #6b7280;">
|
||||
Hech qanday arenda topilmadi
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div id="confirmModal" class="modal hidden">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>To'lovni tasdiqlash</h3>
|
||||
<button class="modal-close" type="button">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Siz haqiqatan ham <strong id="modalDeviceName"></strong> uchun <strong id="modalAmount"></strong> so'mlik to'lovni tasdiqlamoqchimisiz?</p>
|
||||
<p style="color: #ef4444; font-size: 13px; margin-top: 12px; display: flex; align-items: center; gap: 6px;">
|
||||
<span>⚠️</span> Bu amalni bekor qilib bo'lmaydi
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button id="cancelBtn" class="btn btn-cancel" type="button">Bekor qilish</button>
|
||||
<button id="confirmBtn" class="btn btn-confirm" type="button">Tasdiqlamoq</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.styled-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.styled-table th,
|
||||
.styled-table td {
|
||||
padding: 14px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.styled-table th {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.styled-table tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.styled-table tbody tr:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.styled-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Row color coding based on days until due - ONLY for unpaid items */
|
||||
.styled-table tbody tr.row-green {
|
||||
background-color: #d1fae5;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-green:hover {
|
||||
background-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-yellow {
|
||||
background-color: #fef3c7;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-yellow:hover {
|
||||
background-color: #fde68a;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-red {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-red:hover {
|
||||
background-color: #fecaca;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-overdue {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.styled-table tbody tr.row-overdue:hover {
|
||||
background-color: #fecaca;
|
||||
}
|
||||
|
||||
.amount-cell {
|
||||
font-weight: 600;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
accent-color: #4f46e5;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.paid-badge {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
background: #d1fae5;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: #f3f4f6;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #e5e7eb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-confirm:hover {
|
||||
background: #059669;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.styled-table th,
|
||||
.styled-table td {
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const modal = document.getElementById('confirmModal');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
const confirmBtn = document.getElementById('confirmBtn');
|
||||
const modalClose = document.querySelector('.modal-close');
|
||||
const modalOverlay = document.querySelector('.modal-overlay');
|
||||
let currentDeviceId = null;
|
||||
|
||||
// Open modal when checkbox is clicked
|
||||
document.querySelectorAll('.payment-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function(e) {
|
||||
if (this.checked) {
|
||||
currentDeviceId = this.dataset.deviceId;
|
||||
const deviceName = this.dataset.deviceName;
|
||||
const amount = this.dataset.amount;
|
||||
|
||||
document.getElementById('modalDeviceName').textContent = deviceName;
|
||||
document.getElementById('modalAmount').textContent = amount;
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal
|
||||
function closeModal() {
|
||||
modal.classList.add('hidden');
|
||||
document.querySelectorAll('.payment-checkbox').forEach(checkbox => {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
}
|
||||
|
||||
cancelBtn.addEventListener('click', closeModal);
|
||||
modalClose.addEventListener('click', closeModal);
|
||||
modalOverlay.addEventListener('click', closeModal);
|
||||
|
||||
// Confirm payment
|
||||
confirmBtn.addEventListener('click', function() {
|
||||
if (currentDeviceId) {
|
||||
// Get CSRF token from hidden input
|
||||
const csrfToken = document.getElementById('csrfToken').value;
|
||||
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = `/edit/device-payments/${currentDeviceId}/`;
|
||||
|
||||
if (csrfToken) {
|
||||
const csrfInput = document.createElement('input');
|
||||
csrfInput.type = 'hidden';
|
||||
csrfInput.name = 'csrfmiddlewaretoken';
|
||||
csrfInput.value = csrfToken;
|
||||
form.appendChild(csrfInput);
|
||||
}
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal on Escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -4,33 +4,256 @@
|
||||
{% block title %}Xarajatlar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="margin-bottom:20px;">{{ title|default:"Xarajatlar" }}</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"Xarajatlar" }}</h2>
|
||||
<a href="{% url 'create_expense' %}" class="btn edit" style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">+ Qo'shish</a>
|
||||
</div>
|
||||
|
||||
<div class="cards-container">
|
||||
{% for obj in expenses %}
|
||||
<div class="card">
|
||||
<div class="card-row"><strong>Miqdor:</strong> {{ obj.amount }}</div>
|
||||
<div class="card-row"><strong>Tur:</strong> {{ obj|attr:"expense_type" }}</div>
|
||||
{% if obj.device %}<div class="card-row"><strong>Aparat:</strong> {{ obj.device.name }}</div>{% else %}{% endif %}
|
||||
{% if obj.employee %}<div class="card-row"><strong>Hodim:</strong> {{ obj.employee.get_full_name }}</div>{% else %}{% endif %}
|
||||
<div class="card-row"><strong>Yaratgan:</strong> {{ obj.created_by.get_full_name }}</div>
|
||||
<div class="card-row"><strong>Tasdiqlanganmi:</strong> {% if obj.confirmed_by %}{{ obj.confirmed_by.get_full_name }}{% else %}Yo'q{% endif %}</div>
|
||||
<div class="card-row"><strong>Yaratilgan sana:</strong> {{ obj.created_at|date:"d.m.Y H:i" }}</div>
|
||||
{% if expenses %}
|
||||
{% for obj in expenses %}
|
||||
<div class="card {% if obj.is_confirmed %}confirmed{% endif %}">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
{% if obj.expense_type == 'other' and obj.comment %}
|
||||
{{ obj.comment }}
|
||||
{% else %}
|
||||
{{ obj.get_expense_type_display }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-number">#{{ forloop.counter }}</div>
|
||||
</div>
|
||||
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<div class="card-actions">
|
||||
{% if not obj.is_confirmed %}
|
||||
<a href="{% url 'confirm_expense' obj.pk %}" class="btn confirm">✔</a>
|
||||
<a href="{% url 'decline_expense' obj.pk %}" class="btn decline">✖</a>
|
||||
{% endif %}
|
||||
{% if role == "businessman" %}
|
||||
<a href="{% url 'edit_expense' obj.pk %}" class="btn edit">Tahrirlash</a>
|
||||
<div class="card-content">
|
||||
<div class="card-row">
|
||||
<span class="label">Miqdor:</span>
|
||||
<span class="amount">{{ obj.amount|floatformat:2 }} so'm</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Sana:</span>
|
||||
<span class="value">{{ obj.created_at|date:"d.m.Y H:i" }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Yaratgan:</span>
|
||||
<span class="value">{{ obj.created_by.get_full_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<div class="card-actions">
|
||||
{% if not obj.is_confirmed %}
|
||||
<a href="{% url 'confirm_expense' obj.pk %}" class="action-btn confirm" title="Tasdiqlash">✔ Tasdiqlash</a>
|
||||
<a href="{% url 'decline_expense' obj.pk %}" class="action-btn decline" title="Rad etish">✖ Rad etish</a>
|
||||
{% else %}
|
||||
<span class="confirmed-badge">✅ Tasdiqlandi</span>
|
||||
{% endif %}
|
||||
{% if role == "businessman" %}
|
||||
<a href="{% url 'edit_expense' obj.pk %}" class="action-btn edit" title="Tahrirlash">✎ Tahrirlash</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #6b7280;">
|
||||
<p style="font-style: italic; margin: 0;">Hech qanday xarajat topilmadi</p>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p style="text-align:center; font-style:italic;">Hech narsa topilmadi</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<style>
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
transition: all 0.2s ease;
|
||||
border-left: 4px solid #4f46e5;
|
||||
}
|
||||
|
||||
.card.confirmed {
|
||||
border-left-color: #10b981;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-row .label {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .value {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .amount {
|
||||
color: #059669;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn.confirm {
|
||||
background: #d1fae5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.action-btn.confirm:hover {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.decline {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.action-btn.decline:hover {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.edit {
|
||||
background: #dbeafe;
|
||||
color: #0284c7;
|
||||
}
|
||||
|
||||
.action-btn.edit:hover {
|
||||
background: #0284c7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.confirmed-badge {
|
||||
display: inline-block;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
box-shadow: 0 2px 8px rgba(79,70,229,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: none;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div[style*="display: flex"] {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
164
core/apps/management/templates/common/lists/report_list.html
Normal file
164
core/apps/management/templates/common/lists/report_list.html
Normal file
@@ -0,0 +1,164 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Hisobotlar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"Hisobotlar" }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="cards-container">
|
||||
{% if reports %}
|
||||
{% for report in reports %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
{{ report.device.address }}
|
||||
</div>
|
||||
<div class="card-number">#{{ forloop.counter }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-row">
|
||||
<span class="label">Miqdor:</span>
|
||||
<span class="quantity">{{ report.quantity }} dona</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Sana:</span>
|
||||
<span class="value">{{ report.created_at|date:"d.m.Y H:i" }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Yaratgan:</span>
|
||||
<span class="value">{{ report.created_by.get_full_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #6b7280;">
|
||||
<p style="font-style: italic; margin: 0;">Hech qanday hisobot topilmadi</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
transition: all 0.2s ease;
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-row .label {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .value {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .quantity {
|
||||
color: #10b981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.edit {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
box-shadow: 0 2px 8px rgba(79,70,229,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div[style*="display: flex"] {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
@@ -3,32 +3,184 @@
|
||||
{% block title %}O'yinchoq harakatlari{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="margin-bottom:20px;">{{ title|default:"O'yinchoq harakatlari" }}</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"O'yinchoq harakatlari" }}</h2>
|
||||
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<div class="card-actions">
|
||||
<a href="{% url 'create_toy_movement_auto' %}" class="btn edit">Yaratish</a>
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<a href="{% url 'create_toy_movement_auto' %}"
|
||||
class="btn edit"
|
||||
style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">
|
||||
+ Yaratish
|
||||
</a>
|
||||
|
||||
{% elif role == "employee" %}
|
||||
<a href="{% url 'create_toy_movement' %}"
|
||||
class="btn edit"
|
||||
style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">
|
||||
+ Yaratish
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="cards-container">
|
||||
{% for tm in toy_movements %}
|
||||
<div class="card">
|
||||
<div class="card-row"><strong>Tur:</strong> {{ tm.get_movement_type_display }}</div>
|
||||
<div class="card-row"><strong>From:</strong> {{ tm.from_warehouse.name }}</div>
|
||||
{% if tm.to_warehouse %}
|
||||
<div class="card-row"><strong>To:</strong> {{ tm.to_warehouse.name }}</div>
|
||||
{% endif %}
|
||||
{% if tm.device %}
|
||||
<div class="card-row"><strong>Aparat:</strong> {{ tm.device.name }}</div>
|
||||
{% endif %}
|
||||
<div class="card-row"><strong>Miqdor:</strong> {{ tm.quantity }}</div>
|
||||
<div class="card-row"><strong>Yaratgan:</strong> {{ tm.created_by.get_full_name }}</div>
|
||||
<div class="card-row"><strong>Sana:</strong> {{ tm.created_at|date:"d.m.Y H:i" }}</div>
|
||||
{% if toy_movements %}
|
||||
{% for tm in toy_movements %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
{% if tm.device %}
|
||||
{{ tm.device.address }}
|
||||
{% elif tm.to_warehouse %}
|
||||
{{ tm.to_warehouse.name }}
|
||||
{% else %}
|
||||
{{ tm.from_warehouse.name }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-number">#{{ forloop.counter }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-row">
|
||||
<span class="label">Miqdor:</span>
|
||||
<span class="quantity">{{ tm.quantity }} dona</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Sana:</span>
|
||||
<span class="value">{{ tm.created_at|date:"d.m.Y H:i" }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Yaratgan:</span>
|
||||
<span class="value">{{ tm.created_by.get_full_name }}</span>
|
||||
</div>
|
||||
<div class="card-row">
|
||||
<span class="label">Turi:</span>
|
||||
<span class="value">{{ tm.get_movement_type_display }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #6b7280;">
|
||||
<p style="font-style: italic; margin: 0;">Hech qanday harakat topilmadi</p>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p style="text-align:center; font-style:italic;">Hech narsa topilmadi</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<style>
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
transition: all 0.2s ease;
|
||||
border-left: 4px solid #4f46e5;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-row .label {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .value {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-row .quantity {
|
||||
color: #059669;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
box-shadow: 0 2px 8px rgba(79,70,229,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div[style*="display: flex"] {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
@@ -3,7 +3,20 @@
|
||||
{% block title %}Foydalanuvchilar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="margin-bottom:20px;">{{ title|default:"Foydalanuvchilar" }}</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"Foydalanuvchilar" }}</h2>
|
||||
{% if role == "manager" or role == "businessman" %}
|
||||
<a href="{% url 'create_user' %}" class="btn edit" style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">+ Yaratish</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="cards-container">
|
||||
{% for user in users %}
|
||||
|
||||
@@ -3,7 +3,20 @@
|
||||
{% block title %}Omborlar{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="margin-bottom:20px;">{{ title|default:"Omborlar" }}</h2>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="margin: 0;">{{ title|default:"Omborlar" }}</h2>
|
||||
{% if role == "businessman" %}
|
||||
<a href="{% url 'create_warehouse' %}" class="btn edit" style="padding: 12px 24px; text-decoration: none; background: #4f46e5; color: #fff; font-weight: 600; border-radius: 10px; transition: all 0.2s ease; display: inline-block; font-size: 15px;">+ Yaratish</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a.btn.edit:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="cards-container">
|
||||
{% for wh in warehouses %}
|
||||
|
||||
@@ -1,105 +1,138 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Hodim Paneli</h2>
|
||||
<br>
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Hodim Paneli</h2>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<a href="{% url 'create_income' %}" class="dashboard-card">
|
||||
<div class="icon">📥</div>
|
||||
<div class="label">Kirim qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_expense' %}" class="dashboard-card">
|
||||
<div class="icon">💸</div>
|
||||
<div class="label">Xarajat qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_toy_movement' %}" class="dashboard-card">
|
||||
<div class="icon">🚚</div>
|
||||
<div class="label">Oʻyinchoq harakati yaratish</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dashboard-grid">
|
||||
<!-- Create Actions -->
|
||||
<a href="{% url 'device_payment_list' %}" class="dashboard-card">
|
||||
<div class="icon">🏠</div>
|
||||
<div class="label">Arendalar</div>
|
||||
</a>
|
||||
<a href="{% url 'expense_list' %}" class="dashboard-card">
|
||||
<div class="icon">📋</div>
|
||||
<div class="label">Xarajatlar</div>
|
||||
</a>
|
||||
<a href="{% url 'toy_movement_list' %}" class="dashboard-card">
|
||||
<div class="icon">📦</div>
|
||||
<div class="label">Oʻyinchoq harakatlari</div>
|
||||
</a>
|
||||
<a href="{% url 'create_report' %}" class="dashboard-card">
|
||||
<div class="icon">📊</div>
|
||||
<div class="label">Yakuniy Hisobot</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card.secondary {
|
||||
background: #f0f4ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card.secondary:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard-card.logout-card {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Mobile adjustments: keep grid layout, adjust size */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.dashboard-card.logout-card:hover {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,112 +1,145 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Manager Paneli</h2>
|
||||
<br>
|
||||
<h2 style="text-align:center; margin-bottom:24px; color:#111827;">Manager Paneli</h2>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<a href="{% url 'create_user' %}" class="dashboard-card">
|
||||
<div class="icon">👤</div>
|
||||
<div class="label">Foydalanuvchi yaratish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_device' %}" class="dashboard-card">
|
||||
<div class="icon">💻</div>
|
||||
<div class="label">Aparat yaratish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_expense' %}" class="dashboard-card">
|
||||
<div class="icon">💸</div>
|
||||
<div class="label">Xarajat qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_income' %}" class="dashboard-card">
|
||||
<div class="icon">📥</div>
|
||||
<div class="label">Kirim qo'shish</div>
|
||||
</a>
|
||||
<a href="{% url 'create_toy_movement' %}" class="dashboard-card">
|
||||
<div class="icon">🚚</div>
|
||||
<div class="label">Oʻyinchoq harakati yaratish</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dashboard-grid">
|
||||
<!-- View/Manage Actions -->
|
||||
<a href="{% url 'expense_list' %}" class="dashboard-card">
|
||||
<div class="icon">📋</div>
|
||||
<div class="label">Xarajatlar</div>
|
||||
</a>
|
||||
<a href="{% url 'toy_movement_list' %}" class="dashboard-card">
|
||||
<div class="icon">📦</div>
|
||||
<div class="label">Oʻyinchoq harakatlari</div>
|
||||
</a>
|
||||
<a href="{% url 'device_list' %}" class="dashboard-card">
|
||||
<div class="icon">🖥️</div>
|
||||
<div class="label">Aparatlar</div>
|
||||
</a>
|
||||
<a href="{% url 'warehouse_list' %}" class="dashboard-card">
|
||||
<div class="icon">🏭</div>
|
||||
<div class="label">Omborlar</div>
|
||||
</a>
|
||||
<a href="{% url 'user_list' %}" class="dashboard-card">
|
||||
<div class="icon">👥</div>
|
||||
<div class="label">Foydalanuvchilar</div>
|
||||
</a>
|
||||
<a href="{% url 'report_list' %}" class="dashboard-card">
|
||||
<div class="icon">📊</div>
|
||||
<div class="label">Kunlik Hisobotlar</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-card:hover .icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard-card.secondary {
|
||||
background: #f0f4ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
/* Mobile adjustments: keep grid layout, adjust size */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.dashboard-card.secondary:hover {
|
||||
background: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.dashboard-card.logout-card {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
{% endblock %}
|
||||
.dashboard-card.logout-card:hover {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
|
||||
.dashboard-card .icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user