|
<!DOCTYPE html> |
|
<html lang="fa" dir="rtl"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>نرمافزار حسابداری ساده</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Noto Naskh Arabic', serif; |
|
} |
|
|
|
.sidebar-item.active { |
|
background-color: #e5e7eb; |
|
border-right: 4px solid #3b82f6; |
|
} |
|
|
|
.print-area { |
|
width: 210mm; |
|
min-height: 297mm; |
|
margin: 0 auto; |
|
padding: 20px; |
|
background: white; |
|
box-shadow: 0 0 5px rgba(0,0,0,0.1); |
|
} |
|
|
|
@media print { |
|
body * { |
|
visibility: hidden; |
|
} |
|
.print-area, .print-area * { |
|
visibility: visible; |
|
} |
|
.print-area { |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
padding: 0; |
|
box-shadow: none; |
|
} |
|
.no-print { |
|
display: none !important; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100"> |
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
<div class="flex flex-col w-64 bg-white border-r border-gray-200"> |
|
<div class="flex items-center justify-center h-16 px-4 bg-blue-600 text-white"> |
|
<span class="text-xl font-bold">حسابداری ساده</span> |
|
</div> |
|
<div class="flex flex-col flex-grow p-4 overflow-y-auto"> |
|
<div class="space-y-2"> |
|
<button onclick="showSection('dashboard')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200 active"> |
|
<i class="fas fa-home ml-2"></i> |
|
<span>داشبورد</span> |
|
</button> |
|
<button onclick="showSection('transactions')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200"> |
|
<i class="fas fa-exchange-alt ml-2"></i> |
|
<span>تراکنشها</span> |
|
</button> |
|
<button onclick="showSection('invoices')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200"> |
|
<i class="fas fa-file-invoice ml-2"></i> |
|
<span>فاکتورها</span> |
|
</button> |
|
<button onclick="showSection('checks')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200"> |
|
<i class="fas fa-money-check-alt ml-2"></i> |
|
<span>چکها</span> |
|
</button> |
|
<button onclick="showSection('reports')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200"> |
|
<i class="fas fa-chart-bar ml-2"></i> |
|
<span>گزارشات</span> |
|
</button> |
|
<button onclick="showSection('settings')" class="sidebar-item flex items-center w-full px-4 py-2 text-right text-gray-700 rounded-lg hover:bg-gray-200"> |
|
<i class="fas fa-cog ml-2"></i> |
|
<span>تنظیمات</span> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-4 border-t border-gray-200"> |
|
<div class="flex items-center"> |
|
<div class="ml-3"> |
|
<p class="text-sm font-medium text-gray-900">مدیر سیستم</p> |
|
<button class="text-xs font-medium text-blue-600 hover:text-blue-500">خروج</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-10"> |
|
<div class="flex justify-around"> |
|
<button onclick="showSection('dashboard')" class="flex flex-col items-center justify-center p-2 text-blue-600"> |
|
<i class="fas fa-home"></i> |
|
<span class="text-xs">داشبورد</span> |
|
</button> |
|
<button onclick="showSection('transactions')" class="flex flex-col items-center justify-center p-2 text-gray-600"> |
|
<i class="fas fa-exchange-alt"></i> |
|
<span class="text-xs">تراکنشها</span> |
|
</button> |
|
<button onclick="showSection('invoices')" class="flex flex-col items-center justify-center p-2 text-gray-600"> |
|
<i class="fas fa-file-invoice"></i> |
|
<span class="text-xs">فاکتورها</span> |
|
</button> |
|
<button onclick="showSection('checks')" class="flex flex-col items-center justify-center p-2 text-gray-600"> |
|
<i class="fas fa-money-check-alt"></i> |
|
<span class="text-xs">چکها</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> |
|
<div class="flex items-center"> |
|
<button class="md:hidden text-gray-500 focus:outline-none" onclick="toggleMobileMenu()"> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
<h1 class="text-lg font-medium text-gray-900 mr-2" id="section-title">داشبورد</h1> |
|
</div> |
|
<div class="flex items-center"> |
|
<div class="relative"> |
|
<button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> |
|
<i class="fas fa-bell"></i> |
|
</button> |
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
</div> |
|
<div class="ml-3 relative"> |
|
<div> |
|
<button class="flex items-center max-w-xs text-sm rounded-full focus:outline-none" id="user-menu"> |
|
<span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500"> |
|
<span class="text-sm font-medium leading-none text-white">مد</span> |
|
</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-auto p-4"> |
|
|
|
<div id="dashboard-section" class="section-content"> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium text-gray-500">موجودی کل</p> |
|
<p class="text-2xl font-bold" id="total-balance">0 ریال</p> |
|
</div> |
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
<i class="fas fa-wallet"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium text-gray-500">درآمد ماه</p> |
|
<p class="text-2xl font-bold text-green-600" id="month-income">0 ریال</p> |
|
</div> |
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
<i class="fas fa-arrow-up"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-sm font-medium text-gray-500">هزینه ماه</p> |
|
<p class="text-2xl font-bold text-red-600" id="month-expense">0 ریال</p> |
|
</div> |
|
<div class="p-3 rounded-full bg-red-100 text-red-600"> |
|
<i class="fas fa-arrow-down"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-lg font-medium">تراکنشهای اخیر</h2> |
|
<button onclick="showSection('transactions')" class="text-sm text-blue-600 hover:text-blue-500">مشاهده همه</button> |
|
</div> |
|
<div class="space-y-3" id="recent-transactions"> |
|
|
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-lg font-medium">چکهای سررسید نشده</h2> |
|
<button onclick="showSection('checks')" class="text-sm text-blue-600 hover:text-blue-500">مشاهده همه</button> |
|
</div> |
|
<div class="space-y-3" id="upcoming-checks"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-lg font-medium">فاکتورهای اخیر</h2> |
|
<button onclick="showSection('invoices')" class="text-sm text-blue-600 hover:text-blue-500">مشاهده همه</button> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره فاکتور</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مشتری</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200" id="recent-invoices"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="transactions-section" class="section-content hidden"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold">مدیریت تراکنشها</h2> |
|
<button onclick="showAddTransactionModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus ml-2"></i> |
|
<span>تراکنش جدید</span> |
|
</button> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-4"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
<div class="mb-4 md:mb-0"> |
|
<label for="transaction-search" class="sr-only">جستجو</label> |
|
<div class="relative"> |
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
<i class="fas fa-search text-gray-400"></i> |
|
</div> |
|
<input type="text" id="transaction-search" class="block w-full pr-10 pl-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="جستجو..."> |
|
</div> |
|
</div> |
|
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2"> |
|
<select id="transaction-type-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه انواع</option> |
|
<option value="income">درآمد</option> |
|
<option value="expense">هزینه</option> |
|
</select> |
|
<select id="transaction-category-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه دستهبندیها</option> |
|
</select> |
|
<input type="date" id="transaction-date-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">دستهبندی</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">توضیحات</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200" id="transactions-list"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
قبلی |
|
</button> |
|
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
بعدی |
|
</button> |
|
</div> |
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
<div> |
|
<p class="text-sm text-gray-700"> |
|
نمایش |
|
<span class="font-medium">1</span> |
|
تا |
|
<span class="font-medium">10</span> |
|
از |
|
<span class="font-medium">20</span> |
|
نتیجه |
|
</p> |
|
</div> |
|
<div> |
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">قبلی</span> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
<button aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
1 |
|
</button> |
|
<button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
2 |
|
</button> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">بعدی</span> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
</nav> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="invoices-section" class="section-content hidden"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold">مدیریت فاکتورها</h2> |
|
<div class="flex space-x-2"> |
|
<button onclick="showAddInvoiceModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus ml-2"></i> |
|
<span>فاکتور جدید</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-4"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
<div class="mb-4 md:mb-0"> |
|
<label for="invoice-search" class="sr-only">جستجو</label> |
|
<div class="relative"> |
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
<i class="fas fa-search text-gray-400"></i> |
|
</div> |
|
<input type="text" id="invoice-search" class="block w-full pr-10 pl-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="جستجو..."> |
|
</div> |
|
</div> |
|
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2"> |
|
<select id="invoice-type-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه انواع</option> |
|
<option value="sale">فروش</option> |
|
<option value="purchase">خرید</option> |
|
</select> |
|
<select id="invoice-status-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه وضعیتها</option> |
|
<option value="paid">پرداخت شده</option> |
|
<option value="unpaid">پرداخت نشده</option> |
|
<option value="partial">پرداخت جزئی</option> |
|
</select> |
|
<input type="date" id="invoice-date-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره فاکتور</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مشتری/فروشنده</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200" id="invoices-list"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
قبلی |
|
</button> |
|
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
بعدی |
|
</button> |
|
</div> |
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
<div> |
|
<p class="text-sm text-gray-700"> |
|
نمایش |
|
<span class="font-medium">1</span> |
|
تا |
|
<span class="font-medium">10</span> |
|
از |
|
<span class="font-medium">20</span> |
|
نتیجه |
|
</p> |
|
</div> |
|
<div> |
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">قبلی</span> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
<button aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
1 |
|
</button> |
|
<button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
2 |
|
</button> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">بعدی</span> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
</nav> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="checks-section" class="section-content hidden"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold">مدیریت چکها</h2> |
|
<div class="flex space-x-2"> |
|
<button onclick="showAddCheckModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-plus ml-2"></i> |
|
<span>چک جدید</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-4"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
<div class="mb-4 md:mb-0"> |
|
<label for="check-search" class="sr-only">جستجو</label> |
|
<div class="relative"> |
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
<i class="fas fa-search text-gray-400"></i> |
|
</div> |
|
<input type="text" id="check-search" class="block w-full pr-10 pl-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="جستجو..."> |
|
</div> |
|
</div> |
|
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2"> |
|
<select id="check-type-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه انواع</option> |
|
<option value="received">دریافتی</option> |
|
<option value="issued">پرداختی</option> |
|
</select> |
|
<select id="check-status-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
<option value="all">همه وضعیتها</option> |
|
<option value="pending">در جریان</option> |
|
<option value="cleared">وصول شده</option> |
|
<option value="returned">برگشتی</option> |
|
</select> |
|
<input type="date" id="check-date-filter" class="block w-full md:w-auto pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره چک</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">بانک</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ سررسید</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200" id="checks-list"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
قبلی |
|
</button> |
|
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
بعدی |
|
</button> |
|
</div> |
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
<div> |
|
<p class="text-sm text-gray-700"> |
|
نمایش |
|
<span class="font-medium">1</span> |
|
تا |
|
<span class="font-medium">10</span> |
|
از |
|
<span class="font-medium">20</span> |
|
نتیجه |
|
</p> |
|
</div> |
|
<div> |
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">قبلی</span> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
<button aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
1 |
|
</button> |
|
<button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
2 |
|
</button> |
|
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">بعدی</span> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
</nav> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="reports-section" class="section-content hidden"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold">گزارشات مالی</h2> |
|
<div class="flex space-x-2"> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
<i class="fas fa-download ml-2"></i> |
|
<span>خروجی Excel</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h3 class="text-lg font-medium mb-4">گزارش درآمد و هزینه</h3> |
|
<div class="flex justify-between mb-2"> |
|
<span>بازه زمانی:</span> |
|
<select class="border border-gray-300 rounded px-2 py-1"> |
|
<option>امروز</option> |
|
<option>هفته جاری</option> |
|
<option selected>ماه جاری</option> |
|
<option>سال جاری</option> |
|
<option>سفارشی</option> |
|
</select> |
|
</div> |
|
<div class="h-64" id="income-expense-chart"> |
|
|
|
</div> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h3 class="text-lg font-medium mb-4">گزارش دستهبندی هزینهها</h3> |
|
<div class="flex justify-between mb-2"> |
|
<span>بازه زمانی:</span> |
|
<select class="border border-gray-300 rounded px-2 py-1"> |
|
<option>امروز</option> |
|
<option>هفته جاری</option> |
|
<option selected>ماه جاری</option> |
|
<option>سال جاری</option> |
|
<option>سفارشی</option> |
|
</select> |
|
</div> |
|
<div class="h-64" id="expense-categories-chart"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-4"> |
|
<h3 class="text-lg font-medium mb-4">گزارش گردش مالی</h3> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">از تاریخ:</label> |
|
<input type="date" class="border border-gray-300 rounded px-2 py-1"> |
|
</div> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">تا تاریخ:</label> |
|
<input type="date" class="border border-gray-300 rounded px-2 py-1"> |
|
</div> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded"> |
|
نمایش گزارش |
|
</button> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">درآمد</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">هزینه</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مانده</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/01</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">5,000,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">2,500,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">12,500,000 ریال</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/02</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">3,000,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">1,000,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">14,500,000 ریال</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/03</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">4,500,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">3,000,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">16,000,000 ریال</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h3 class="text-lg font-medium mb-4">گزارش فاکتورها</h3> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">نوع فاکتور:</label> |
|
<select class="border border-gray-300 rounded px-2 py-1"> |
|
<option>همه</option> |
|
<option>فروش</option> |
|
<option>خرید</option> |
|
</select> |
|
</div> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">وضعیت:</label> |
|
<select class="border border-gray-300 rounded px-2 py-1"> |
|
<option>همه</option> |
|
<option>پرداخت شده</option> |
|
<option>پرداخت نشده</option> |
|
</select> |
|
</div> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">از تاریخ:</label> |
|
<input type="date" class="border border-gray-300 rounded px-2 py-1"> |
|
</div> |
|
<div class="mb-2 md:mb-0"> |
|
<label class="mr-2">تا تاریخ:</label> |
|
<input type="date" class="border border-gray-300 rounded px-2 py-1"> |
|
</div> |
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded"> |
|
نمایش گزارش |
|
</button> |
|
</div> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره فاکتور</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مشتری/فروشنده</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">INV-2023-001</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/01</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">شرکت الف</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5,000,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">پرداخت شده</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">INV-2023-002</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/02</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">شرکت ب</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3,500,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">پرداخت جزئی</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">INV-2023-003</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1402/05/03</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">شرکت ج</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">4,200,000 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">پرداخت نشده</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="settings-section" class="section-content hidden"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold">تنظیمات سیستم</h2> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-4"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<h3 class="text-lg font-medium">تنظیمات پایه</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div> |
|
<label for="company-name" class="block text-sm font-medium text-gray-700 mb-1">نام شرکت/فروشگاه</label> |
|
<input type="text" id="company-name" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="شرکت نمونه"> |
|
</div> |
|
<div> |
|
<label for="financial-year" class="block text-sm font-medium text-gray-700 mb-1">سال مالی</label> |
|
<select id="financial-year" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
<option>1401</option> |
|
<option selected>1402</option> |
|
<option>1403</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="tax-percentage" class="block text-sm font-medium text-gray-700 mb-1">درصد مالیات (٪)</label> |
|
<input type="number" id="tax-percentage" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="9"> |
|
</div> |
|
<div> |
|
<label for="currency" class="block text-sm font-medium text-gray-700 mb-1">واحد پول</label> |
|
<select id="currency" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
<option>ریال</option> |
|
<option>تومان</option> |
|
<option>دلار</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-4"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<h3 class="text-lg font-medium">دستهبندیها</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="mb-4"> |
|
<h4 class="text-md font-medium mb-2">دستهبندی درآمدها</h4> |
|
<div class="flex flex-wrap gap-2" id="income-categories"> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
|
فروش محصولات |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-green-600 hover:text-green-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
|
خدمات |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-green-600 hover:text-green-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
|
سود بانکی |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-green-600 hover:text-green-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
</div> |
|
<div class="mt-2 flex"> |
|
<input type="text" id="new-income-category" class="block w-64 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="دستهبندی جدید"> |
|
<button onclick="addIncomeCategory()" class="ml-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> |
|
افزودن |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h4 class="text-md font-medium mb-2">دستهبندی هزینهها</h4> |
|
<div class="flex flex-wrap gap-2" id="expense-categories"> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"> |
|
مواد اولیه |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-red-600 hover:text-red-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"> |
|
حقوق و دستمزد |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-red-600 hover:text-red-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"> |
|
اجاره |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-red-600 hover:text-red-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800"> |
|
آب و برق و گاز |
|
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 text-red-600 hover:text-red-900"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</span> |
|
</div> |
|
<div class="mt-2 flex"> |
|
<input type="text" id="new-expense-category" class="block w-64 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="دستهبندی جدید"> |
|
<button onclick="addExpenseCategory()" class="ml-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"> |
|
افزودن |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<h3 class="text-lg font-medium">پشتیبانگیری</h3> |
|
</div> |
|
<div class="p-4"> |
|
<div class="mb-4"> |
|
<p class="text-sm text-gray-600 mb-2">پشتیبانگیری خودکار هر <input type="number" class="w-12 border border-gray-300 rounded px-2 py-1 text-sm" value="7"> روز یکبار</p> |
|
<div class="flex items-center"> |
|
<input type="checkbox" id="auto-backup" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> |
|
<label for="auto-backup" class="mr-2 block text-sm text-gray-900">فعال کردن پشتیبانگیری خودکار</label> |
|
</div> |
|
</div> |
|
|
|
<div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-2 md:space-y-0"> |
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-download ml-2"></i> |
|
دریافت پشتیبان |
|
</button> |
|
<button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-upload ml-2"></i> |
|
بازیابی پشتیبان |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="add-transaction-modal" class="fixed z-10 inset-0 overflow-y-auto hidden"> |
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
</div> |
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
<div class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
<div class="sm:flex sm:items-start"> |
|
<div class="mt-3 text-center sm:mt-0 sm:text-right w-full"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">تراکنش جدید</h3> |
|
<div class="mt-2"> |
|
<div class="grid grid-cols-1 gap-4"> |
|
<div> |
|
<label for="transaction-type" class="block text-sm font-medium text-gray-700">نوع تراکنش</label> |
|
<select id="transaction-type" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
<option value="income">درآمد</option> |
|
<option value="expense">هزینه</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="transaction-category" class="block text-sm font-medium text-gray-700">دستهبندی</label> |
|
<select id="transaction-category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
|
|
</select> |
|
</div> |
|
<div> |
|
<label for="transaction-amount" class="block text-sm font-medium text-gray-700">مبلغ (ریال)</label> |
|
<input type="number" id="transaction-amount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</div> |
|
<div> |
|
<label for="transaction-date" class="block text-sm font-medium text-gray-700">تاریخ</label> |
|
<input type="date" id="transaction-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</div> |
|
<div> |
|
<label for="transaction-description" class="block text-sm font-medium text-gray-700">توضیحات</label> |
|
<textarea id="transaction-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
<button type="button" onclick="saveTransaction()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
ذخیره |
|
</button> |
|
<button type="button" onclick="hideModal('add-transaction-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
انصراف |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="add-invoice-modal" class="fixed z-10 inset-0 overflow-y-auto hidden"> |
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
</div> |
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
<div class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
<div class="sm:flex sm:items-start"> |
|
<div class="mt-3 text-center sm:mt-0 sm:text-right w-full"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">فاکتور جدید</h3> |
|
<div class="mt-2"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label for="invoice-type" class="block text-sm font-medium text-gray-700">نوع فاکتور</label> |
|
<select id="invoice-type" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
<option value="sale">فروش</option> |
|
<option value="purchase">خرید</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="invoice-number" class="block text-sm font-medium text-gray-700">شماره فاکتور</label> |
|
<input type="text" id="invoice-number" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" value="INV-2023-001"> |
|
</div> |
|
<div> |
|
<label for="invoice-date" class="block text-sm font-medium text-gray-700">تاریخ</label> |
|
<input type="date" id="invoice-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</div> |
|
<div> |
|
<label for="invoice-customer" class="block text-sm font-medium text-gray-700">مشتری/فروشنده</label> |
|
<input type="text" id="invoice-customer" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<h4 class="text-md font-medium mb-2">آیتمهای فاکتور</h4> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شرح کالا/خدمت</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تعداد</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">قیمت واحد</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تخفیف</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مالیات</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ کل</th> |
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200" id="invoice-items"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<input type="number" value="1" class="block w-20 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<input type="number" value="0" class="block w-28 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<input type="number" value="0" class="block w-20 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<select class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
<option value="0">ندارد</option> |
|
<option value="9">9%</option> |
|
</select> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0 ریال</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
<button class="text-red-600 hover:text-red-900">حذف</button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<button onclick="addInvoiceItem()" class="mt-2 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
<i class="fas fa-plus ml-1"></i> |
|
افزودن آیتم |
|
</button> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div> |
|
<label for="invoice-notes" class="block text-sm font-medium text-gray-700">توضیحات</label> |
|
<textarea id="invoice-notes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> |
|
</div> |
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
<div class="flex justify-between mb-2"> |
|
<span class="font-medium">جمع کل:</span> |
|
<span id="invoice-total">0 ریال</span> |
|
</div> |
|
<div class="flex justify-between mb-2"> |
|
<span class="font-medium">تخفیف:</span> |
|
<span id="invoice-discount">0 ریال</span> |
|
</div> |
|
<div class="flex justify-between mb-2"> |
|
<span class="font-medium">مالیات:</span> |
|
<span id="invoice-tax">0 ریال</span> |
|
</div> |
|
<div class="flex justify-between font-bold text-lg border-t border-gray-200 pt-2"> |
|
<span>مبلغ قابل پرداخت:</span> |
|
<span id="invoice-payable">0 ریال</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
<button type="button" onclick="saveInvoice()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
ذخیره فاکتور |
|
</button> |
|
<button type="button" onclick="printInvoice()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
چاپ فاکتور |
|
</button> |
|
<button type="button" onclick="hideModal('add-invoice-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
انصراف |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="invoice-print-preview" class="hidden print-area"> |
|
<div class="flex justify-between items-start mb-8"> |
|
<div> |
|
<h1 class="text-2xl font-bold">فاکتور فروش</h1> |
|
<p class="text-gray-600">شماره: <span id="print-invoice-number">INV-2023-001</span></p> |
|
<p class="text-gray-600">تاریخ: <span id="print-invoice-date">1402/05/01</span></p> |
|
</div> |
|
<div class="text-left"> |
|
<h2 class="text-xl font-bold" id="print-company-name">شرکت نمونه</h2> |
|
<p class="text-gray-600">شماره اقتصادی: 1234567890</p> |
|
<p class="text-gray-600">تلفن: 021-12345678</p> |
|
<p class="text-gray-600">آدرس: تهران، خیابان نمونه، پلاک ۱۲</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-8"> |
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
<p class="font-medium">مشتری: <span id="print-customer-name">شرکت الف</span></p> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-8"> |
|
<table class="min-w-full border border-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-4 py-2 text-right border border-gray-200">ردیف</th> |
|
<th scope="col" class="px-4 py-2 text-right border border-gray-200">شرح کالا/خدمت</th> |
|
<th scope="col" class="px-4 py-2 text-right border border-gray-200">تعداد</th> |
|
<th scope="col" class="px-4 py-2 text-right border border-gray-200">قیمت واحد</ |
|
</html> |
