Spaces:

vsj0702
/

Code_editor

Running

App Files Files Community

Code_editor / index.html

Amiali6262

Upload index.html

6aa869d verified 3 months ago

raw

history blame

80.6 kB

	<!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>
	<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></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=Vazirmatn:wght@100..900&display=swap');
	body {
	font-family: 'Vazirmatn', sans-serif;
	}
	.sidebar-item.active {
	background-color: #3b82f6;
	color: white;
	}
	.sidebar-item:hover:not(.active) {
	background-color: #e5e7eb;
	}
	.barcode-container {
	background: white;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	.form-input {
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	width: 100%;
	}
	.form-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 1px #3b82f6;
	}
	.table-row:hover {
	background-color: #f3f4f6;
	}
	</style>
	</head>
	<body class="bg-gray-100">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="w-64 bg-blue-800 text-white flex flex-col">
	<div class="p-4 flex items-center justify-center border-b border-blue-700">
	<i class="fas fa-calculator text-2xl ml-2"></i>
	<h1 class="text-xl font-bold">سیستم مالی یکپارچه</h1>
	</div>
	<div class="flex-1 overflow-y-auto">
	<div class="p-2">
	<div class="mb-4 mt-4">
	<h3 class="px-4 text-sm font-semibold text-blue-200">ساختار سازمانی</h3>
	<ul class="mt-2">
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('org-units')"><i class="fas fa-sitemap ml-2"></i>واحدهای سازمانی</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('job-positions')"><i class="fas fa-user-tie ml-2"></i>پست‌های سازمانی</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('user-groups')"><i class="fas fa-users ml-2"></i>گروه‌های کاربری</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('users')"><i class="fas fa-user ml-2"></i>کاربران</a></li>
	</ul>
	</div>
	<div class="mb-4">
	<h3 class="px-4 text-sm font-semibold text-blue-200">ساختار حسابداری</h3>
	<ul class="mt-2">
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('account-levels')"><i class="fas fa-layer-group ml-2"></i>سطوح حسابداری</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('subsidiary-accounts')"><i class="fas fa-wallet ml-2"></i>حساب‌های معین</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('level4-accounts')"><i class="fas fa-coins ml-2"></i>حساب‌های تفصیلی سطح ۴</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('level5-accounts')"><i class="fas fa-money-bill-wave ml-2"></i>حساب‌های تفصیلی سطح ۵</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('level6-accounts')"><i class="fas fa-piggy-bank ml-2"></i>حساب‌های تفصیلی سطح ۶</a></li>
	</ul>
	</div>
	<div class="mb-4">
	<h3 class="px-4 text-sm font-semibold text-blue-200">مدیریت رویدادها</h3>
	<ul class="mt-2">
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('activities')"><i class="fas fa-tasks ml-2"></i>فعالیت‌ها</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('events')"><i class="fas fa-calendar-check ml-2"></i>رویدادها</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('record-events')"><i class="fas fa-pen ml-2"></i>ثبت رویدادها</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('tracking-codes')"><i class="fas fa-barcode ml-2"></i>کدهای رهگیری</a></li>
	</ul>
	</div>
	<div class="mb-4">
	<h3 class="px-4 text-sm font-semibold text-blue-200">کنترل و گزارشات</h3>
	<ul class="mt-2">
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('tasks')"><i class="fas fa-inbox ml-2"></i>کارتابل</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('reports')"><i class="fas fa-chart-bar ml-2"></i>گزارشات</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('dashboard')"><i class="fas fa-tachometer-alt ml-2"></i>داشبورد</a></li>
	<li><a href="#" class="sidebar-item block px-4 py-2 rounded" onclick="showSection('settings')"><i class="fas fa-cog ml-2"></i>تنظیمات</a></li>
	</ul>
	</div>
	</div>
	</div>
	<div class="p-4 border-t border-blue-700 flex items-center">
	<img src="https://via.placeholder.com/40" alt="User" class="rounded-full w-10 h-10">
	<div class="mr-2">
	<p class="font-medium">کاربر مدیر</p>
	<p class="text-xs text-blue-200">مدیر سیستم</p>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 overflow-auto">
	<!-- Top Navigation -->
	<header class="bg-white shadow-sm">
	<div class="px-4 py-3 flex justify-between items-center border-b">
	<div class="flex items-center">
	<button class="text-gray-500 focus:outline-none lg:hidden">
	<i class="fas fa-bars"></i>
	</button>
	<h2 id="section-title" class="text-lg font-semibold mr-4">داشبورد</h2>
	</div>
	<div class="flex items-center">
	<div class="relative">
	<input type="text" placeholder="جستجو..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	<button class="ml-4 text-gray-500 hover:text-gray-700">
	<i class="fas fa-bell"></i>
	</button>
	<button class="ml-4 text-gray-500 hover:text-gray-700">
	<i class="fas fa-question-circle"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- Content Sections -->
	<main class="p-4">
	<!-- Dashboard Section -->
	<div id="dashboard" class="section-content">
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex justify-between">
	<div>
	<p class="text-gray-500">رویدادهای امروز</p>
	<p class="text-2xl font-bold">24</p>
	</div>
	<div class="bg-blue-100 text-blue-600 p-3 rounded-full">
	<i class="fas fa-calendar-day"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex justify-between">
	<div>
	<p class="text-gray-500">وظایف در انتظار</p>
	<p class="text-2xl font-bold">8</p>
	</div>
	<div class="bg-yellow-100 text-yellow-600 p-3 rounded-full">
	<i class="fas fa-tasks"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex justify-between">
	<div>
	<p class="text-gray-500">رویدادهای تایید شده</p>
	<p class="text-2xl font-bold">42</p>
	</div>
	<div class="bg-green-100 text-green-600 p-3 rounded-full">
	<i class="fas fa-check-circle"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex justify-between">
	<div>
	<p class="text-gray-500">مبلغ کل ماه</p>
	<p class="text-2xl font-bold">12.5M</p>
	</div>
	<div class="bg-purple-100 text-purple-600 p-3 rounded-full">
	<i class="fas fa-money-bill-wave"></i>
	</div>
	</div>
	</div>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<div class="bg-white p-4 rounded-lg shadow lg:col-span-2">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">آخرین رویدادها</h3>
	<a href="#" class="text-blue-600 text-sm">مشاهده همه</a>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد رهگیری</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شرح</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">مبلغ</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101010-00001-00001-000001</td>
	<td class="px-4 py-2 whitespace-nowrap">خرید مواد اولیه</td>
	<td class="px-4 py-2 whitespace-nowrap">5,000,000 ریال</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">تایید شده</span></td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101020-00002-00001-000002</td>
	<td class="px-4 py-2 whitespace-nowrap">پرداخت حقوق</td>
	<td class="px-4 py-2 whitespace-nowrap">12,000,000 ریال</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">در انتظار تایید</span></td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101030-00003-00002-000003</td>
	<td class="px-4 py-2 whitespace-nowrap">خرید تجهیزات</td>
	<td class="px-4 py-2 whitespace-nowrap">8,500,000 ریال</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">در جریان</span></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">وظایف من</h3>
	<a href="#" class="text-blue-600 text-sm">مشاهده همه</a>
	</div>
	<div class="space-y-3">
	<div class="flex items-start">
	<input type="checkbox" class="mt-1">
	<div class="mr-2">
	<p class="text-sm font-medium">تایید رویداد خرید مواد اولیه</p>
	<p class="text-xs text-gray-500">2 ساعت پیش</p>
	</div>
	</div>
	<div class="flex items-start">
	<input type="checkbox" class="mt-1">
	<div class="mr-2">
	<p class="text-sm font-medium">تعریف حساب تفصیلی جدید</p>
	<p class="text-xs text-gray-500">دیروز</p>
	</div>
	</div>
	<div class="flex items-start">
	<input type="checkbox" class="mt-1">
	<div class="mr-2">
	<p class="text-sm font-medium">بررسی گزارش مالی ماهانه</p>
	<p class="text-xs text-gray-500">3 روز پیش</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Organizational Units Section -->
	<div id="org-units" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">واحدهای سازمانی</h3>
	<button onclick="showForm('org-unit-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>واحد جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در واحدهای سازمانی..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام واحد</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">واحد مافوق</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">001</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیریت مالی</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیریت عامل</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">002</td>
	<td class="px-4 py-2 whitespace-nowrap">حسابداری</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیریت مالی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">003</td>
	<td class="px-4 py-2 whitespace-nowrap">تدارکات</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیریت عامل</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="org-unit-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف واحد سازمانی</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد واحد</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام واحد</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">واحد مافوق</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option>مدیریت عامل</option>
	<option>مدیریت مالی</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('org-unit-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Job Positions Section -->
	<div id="job-positions" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">پست‌های سازمانی</h3>
	<button onclick="showForm('job-position-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>پست جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در پست‌های سازمانی..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عنوان پست</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">واحد سازمانی</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیر مالی</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیریت مالی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">102</td>
	<td class="px-4 py-2 whitespace-nowrap">حسابدار</td>
	<td class="px-4 py-2 whitespace-nowrap">حسابداری</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">103</td>
	<td class="px-4 py-2 whitespace-nowrap">کارشناس خرید</td>
	<td class="px-4 py-2 whitespace-nowrap">تدارکات</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="job-position-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف پست سازمانی</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد پست</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">عنوان پست</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">واحد سازمانی</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option>مدیریت مالی</option>
	<option>حسابداری</option>
	<option>تدارکات</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('job-position-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- User Groups Section -->
	<div id="user-groups" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">گروه‌های کاربری</h3>
	<button onclick="showForm('user-group-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>گروه جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در گروه‌های کاربری..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام گروه</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تعداد کاربران</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">G001</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیران سیستم</td>
	<td class="px-4 py-2 whitespace-nowrap">3</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">G002</td>
	<td class="px-4 py-2 whitespace-nowrap">کاربران مالی</td>
	<td class="px-4 py-2 whitespace-nowrap">8</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">G003</td>
	<td class="px-4 py-2 whitespace-nowrap">کاربران تدارکات</td>
	<td class="px-4 py-2 whitespace-nowrap">5</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="user-group-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف گروه کاربری</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد گروه</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام گروه</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">دسترسی‌ها</label>
	<select multiple class="form-input h-32">
	<option>مدیریت واحدهای سازمانی</option>
	<option>مدیریت پست‌ها</option>
	<option>مدیریت گروه‌ها</option>
	<option>مدیریت کاربران</option>
	<option>ثبت رویدادها</option>
	<option>تایید رویدادها</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('user-group-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Users Section -->
	<div id="users" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">کاربران سیستم</h3>
	<button onclick="showForm('user-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>کاربر جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در کاربران..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد کاربری</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام کامل</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">پست سازمانی</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">گروه کاربری</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">U001</td>
	<td class="px-4 py-2 whitespace-nowrap">محمد رضایی</td>
	<td class="px-4 py-2 whitespace-nowrap">مدیر مالی</td>
	<td class="px-4 py-2 whitespace-nowrap">کاربران مالی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">U002</td>
	<td class="px-4 py-2 whitespace-nowrap">فاطمه محمدی</td>
	<td class="px-4 py-2 whitespace-nowrap">حسابدار</td>
	<td class="px-4 py-2 whitespace-nowrap">کاربران مالی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">U003</td>
	<td class="px-4 py-2 whitespace-nowrap">علی حسینی</td>
	<td class="px-4 py-2 whitespace-nowrap">کارشناس خرید</td>
	<td class="px-4 py-2 whitespace-nowrap">کاربران تدارکات</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="user-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف کاربر</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد کاربری</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام کاربری</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">رمز عبور</label>
	<input type="password" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">پست سازمانی</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option>مدیر مالی</option>
	<option>حسابدار</option>
	<option>کارشناس خرید</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">گروه کاربری</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option>مدیران سیستم</option>
	<option>کاربران مالی</option>
	<option>کاربران تدارکات</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('user-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Account Levels Section -->
	<div id="account-levels" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow">
	<h3 class="font-semibold mb-4">سطوح حسابداری</h3>
	<div class="mb-6">
	<div class="flex items-center mb-2">
	<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">1</div>
	<h4 class="mr-2 font-medium">حساب کل</h4>
	</div>
	<p class="text-gray-600 text-sm mr-10">سطح اول ساختار حساب‌ها که شامل گروه‌های اصلی حساب‌ها می‌شود مانند دارایی‌ها، بدهی‌ها، سرمایه، درآمد و هزینه</p>
	</div>
	<div class="mb-6">
	<div class="flex items-center mb-2">
	<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">2</div>
	<h4 class="mr-2 font-medium">حساب معین</h4>
	</div>
	<p class="text-gray-600 text-sm mr-10">سطح دوم که زیرمجموعه حساب کل بوده و جزئیات بیشتری ارائه می‌دهد مانند بانک‌ها، حساب‌های دریافتنی، حساب‌های پرداختنی</p>
	</div>
	<div class="mb-6">
	<div class="flex items-center mb-2">
	<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">3</div>
	<h4 class="mr-2 font-medium">حساب تفصیلی سطح ۴</h4>
	</div>
	<p class="text-gray-600 text-sm mr-10">سطح سوم که معمولاً برای تفکیک شرکت‌های زیرمجموعه یا بخش‌های مختلف سازمان استفاده می‌شود</p>
	</div>
	<div class="mb-6">
	<div class="flex items-center mb-2">
	<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">4</div>
	<h4 class="mr-2 font-medium">حساب تفصیلی سطح ۵</h4>
	</div>
	<p class="text-gray-600 text-sm mr-10">سطح چهارم که معمولاً برای تفکیک پروژه‌ها یا مراکز هزینه استفاده می‌شود</p>
	</div>
	<div>
	<div class="flex items-center mb-2">
	<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">5</div>
	<h4 class="mr-2 font-medium">حساب تفصیلی سطح ۶</h4>
	</div>
	<p class="text-gray-600 text-sm mr-10">سطح پنجم که برای جزئیات بیشتر مانند شماره حساب بانکی یا شماره چک استفاده می‌شود</p>
	</div>
	</div>
	</div>

	<!-- Subsidiary Accounts Section -->
	<div id="subsidiary-accounts" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">حساب‌های معین</h3>
	<button onclick="showForm('subsidiary-account-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>حساب جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در حساب‌های معین..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد حساب کل</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام حساب کل</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد معین</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام معین</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌ها</td>
	<td class="px-4 py-2 whitespace-nowrap">101010</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌های ریالی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌ها</td>
	<td class="px-4 py-2 whitespace-nowrap">101020</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌های ارزی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">121</td>
	<td class="px-4 py-2 whitespace-nowrap">حساب‌های دریافتنی</td>
	<td class="px-4 py-2 whitespace-nowrap">121010</td>
	<td class="px-4 py-2 whitespace-nowrap">مشتریان داخلی</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="subsidiary-account-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف حساب معین</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">حساب کل</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option value="101">101 - بانک‌ها</option>
	<option value="121">121 - حساب‌های دریافتنی</option>
	<option value="131">131 - حساب‌های پرداختنی</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد معین</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام معین</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('subsidiary-account-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Level 4 Accounts Section -->
	<div id="level4-accounts" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">حساب‌های تفصیلی سطح ۴</h3>
	<button onclick="showForm('level4-account-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>حساب جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در حساب‌های تفصیلی سطح ۴..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد معین</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام معین</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد سطح ۴</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام سطح ۴</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101010</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌های ریالی</td>
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت الف</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">101010</td>
	<td class="px-4 py-2 whitespace-nowrap">بانک‌های ریالی</td>
	<td class="px-4 py-2 whitespace-nowrap">00002</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت ب</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">121010</td>
	<td class="px-4 py-2 whitespace-nowrap">مشتریان داخلی</td>
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت ج</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Add/Edit Form (Hidden by default) -->
	<div id="level4-account-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف حساب تفصیلی سطح ۴</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">حساب معین</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option value="101010">101010 - بانک‌های ریالی</option>
	<option value="101020">101020 - بانک‌های ارزی</option>
	<option value="121010">121010 - مشتریان داخلی</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد سطح ۴</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام سطح ۴</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('level4-account-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Level 5 Accounts Section -->
	<div id="level5-accounts" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">حساب‌های تفصیلی سطح ۵</h3>
	<button onclick="showForm('level5-account-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>حساب جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در حساب‌های تفصیلی سطح ۵..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد سطح ۴</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام سطح ۴</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد سطح ۵</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام سطح ۵</th>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
	<th class="px-4 py-2 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 class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت الف</td>
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">پروژه الف</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت الف</td>
	<td class="px-4 py-2 whitespace-nowrap">00002</td>
	<td class="px-4 py-2 whitespace-nowrap">پروژه ب</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	<tr class="table-row">
	<td class="px-4 py-2 whitespace-nowrap">00002</td>
	<td class="px-4 py-2 whitespace-nowrap">شرکت ب</td>
	<td class="px-4 py-2 whitespace-nowrap">00001</td>
	<td class="px-4 py-2 whitespace-nowrap">پروژه ج</td>
	<td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">فعال</span></td>
	<td class="px-4 py-2 whitespace-nowrap">
	<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-edit"></i></button>
	<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<script>
	function showSection(id) {
	document.querySelectorAll('.section-content').forEach(section => {
	section.classList.add('hidden');
	});
	document.getElementById(id).classList.remove('hidden');

	const titles = {
	'dashboard': 'داشبورد',
	'org-units': 'واحدهای سازمانی',
	'job-positions': 'پست‌های سازمانی',
	'user-groups': 'گروه‌های کاربری',
	'users': 'کاربران',
	'account-levels': 'سطوح حسابداری',
	'subsidiary-accounts': 'حساب‌های معین',
	'level4-accounts': 'حساب‌های تفصیلی سطح ۴',
	'level5-accounts': 'حساب‌های تفصیلی سطح ۵',
	'level6-accounts': 'حساب‌های تفصیلی سطح ۶',
	'activities': 'فعالیت‌ها',
	'events': 'رویدادها',
	'record-events': 'ثبت رویدادها',
	'tracking-codes': 'کدهای رهگیری',
	'tasks': 'کارتابل',
	'reports': 'گزارشات',
	'settings': 'تنظیمات'
	};
	document.getElementById('section-title').textContent = titles[id] \|\| '';
	}

	function showForm(id) {
	document.getElementById(id).classList.remove('hidden');
	}

	function hideForm(id) {
	document.getElementById(id).classList.add('hidden');
	}

	document.addEventListener("DOMContentLoaded", function() {
	showSection('dashboard');
	});
	</script>


	<!-- Add/Edit Form (Hidden by default) -->
	<div id="level5-account-form" class="bg-white p-4 rounded-lg shadow hidden">
	<h3 class="font-semibold mb-4">فرم تعریف حساب تفصیلی سطح ۵</h3>
	<form>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">حساب سطح ۴</label>
	<select class="form-input">
	<option>انتخاب کنید</option>
	<option value="00001">00001 - شرکت الف</option>
	<option value="00002">00002 - شرکت ب</option>
	<option value="00003">00003 - شرکت ج</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">کد سطح ۵</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">نام سطح ۵</label>
	<input type="text" class="form-input">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">وضعیت</label>
	<select class="form-input">
	<option>فعال</option>
	<option>غیرفعال</option>
	</select>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" onclick="hideForm('level5-account-form')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 mr-2">انصراف</button>
	<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">ذخیره</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Level 6 Accounts Section -->
	<div id="level6-accounts" class="section-content hidden">
	<div class="bg-white p-4 rounded-lg shadow mb-4">
	<div class="flex justify-between items-center mb-4">
	<h3 class="font-semibold">حساب‌های تفصیلی سطح ۶</h3>
	<button onclick="showForm('level6-account-form')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
	<i class="fas fa-plus ml-2"></i>حساب جدید
	</button>
	</div>
	<div class="mb-4">
	<div class="relative">
	<input type="text" placeholder="جستجو در حساب‌های تفصیلی سطح ۶..." class="form-input pr-10">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد
	</html>