init project
This commit is contained in:
Ybehrooz
184
.gitignore
vendored
Normal file
184
.gitignore
vendored
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
# Dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# Production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and *not* Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# IDE files
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS generated files
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
|
|
||||||
|
# Backup files
|
||||||
|
*.bak
|
||||||
|
*.backup
|
||||||
|
|
||||||
|
# Local development files
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Package manager lock files (uncomment if you want to ignore them)
|
||||||
|
# package-lock.json
|
||||||
|
# yarn.lock
|
||||||
|
|
||||||
|
# Build artifacts
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Database files (if you add database support later)
|
||||||
|
*.db
|
||||||
|
*.sqlite
|
||||||
|
*.sqlite3
|
||||||
|
|
||||||
|
# PDF output directory (if you want to ignore generated PDFs)
|
||||||
|
/pdfs/
|
||||||
|
/invoices/
|
||||||
|
|
||||||
|
# Custom application specific
|
||||||
|
/config/local.js
|
||||||
|
/public/uploads/
|
||||||
98
README.md
Normal file
98
README.md
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
# نرمافزار حسابداری هلو-مانند
|
||||||
|
|
||||||
|
یک نرمافزار حسابداری کامل با ویژگیهای مشابه هلو، با رابط کاربری فارسی و طراحی مدرن.
|
||||||
|
|
||||||
|
## ویژگیهای اصلی
|
||||||
|
|
||||||
|
### مدیریت پایه
|
||||||
|
- **تعریف شخص**: مدیریت مشتریان و تامینکنندگان
|
||||||
|
- **تعریف کالا**: مدیریت کالاها و محصولات با کد و قیمت
|
||||||
|
- **خرید**: ثبت و مدیریت خریدها با وضعیتهای مختلف
|
||||||
|
- **فروش**: ثبت و مدیریت فروشها با محاسبه درآمد
|
||||||
|
- **انبارداری**: مدیریت موجودی، تنظیم موجودی و هشدار کمبود
|
||||||
|
|
||||||
|
### ویژگیهای پیشرفته (مشابه هلو)
|
||||||
|
- **نمودار حسابها**: سیستم کامل حسابهای کل و تفصیلی
|
||||||
|
- **گزارشهای مالی**: ترازنامه، صورت سود و زیان، تراز آزمایشی
|
||||||
|
- **سیستم فاکتور**: ایجاد و مدیریت فاکتورها با محاسبه مالیات
|
||||||
|
- **پشتیبانی از چندین نوع حساب**: دارایی، بدهی، حقوق صاحبان سهام، درآمد، هزینه
|
||||||
|
|
||||||
|
## تکنولوژیهای استفاده شده
|
||||||
|
|
||||||
|
- React 18
|
||||||
|
- React Router DOM
|
||||||
|
- Tailwind CSS
|
||||||
|
- فونت فارسی Vazir
|
||||||
|
|
||||||
|
## نصب و راهاندازی
|
||||||
|
|
||||||
|
1. نصب وابستگیها:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. اجرای پروژه:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
3. باز کردن مرورگر در آدرس:
|
||||||
|
```
|
||||||
|
http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
## ساختار پروژه
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/
|
||||||
|
│ ├── Dashboard.js # داشبورد اصلی
|
||||||
|
│ ├── PersonManagement.js # مدیریت اشخاص
|
||||||
|
│ ├── ProductManagement.js # مدیریت کالاها
|
||||||
|
│ ├── PurchaseManagement.js # مدیریت خرید
|
||||||
|
│ ├── SalesManagement.js # مدیریت فروش
|
||||||
|
│ ├── InventoryManagement.js # مدیریت انبار
|
||||||
|
│ ├── ChartOfAccounts.js # نمودار حسابها
|
||||||
|
│ ├── FinancialReports.js # گزارشهای مالی
|
||||||
|
│ └── InvoiceSystem.js # سیستم فاکتور
|
||||||
|
├── App.js # کامپوننت اصلی
|
||||||
|
├── App.css # استایلهای سفارشی
|
||||||
|
├── index.js # نقطه ورود
|
||||||
|
└── index.css # استایلهای اصلی
|
||||||
|
```
|
||||||
|
|
||||||
|
## ویژگیهای رابط کاربری
|
||||||
|
|
||||||
|
- طراحی ریسپانسیو (Responsive)
|
||||||
|
- پشتیبانی کامل از زبان فارسی
|
||||||
|
- جهت متن راست به چپ (RTL)
|
||||||
|
- استفاده از فونت فارسی Vazir
|
||||||
|
- طراحی مدرن با Tailwind CSS
|
||||||
|
|
||||||
|
## نحوه استفاده
|
||||||
|
|
||||||
|
### بخشهای اصلی
|
||||||
|
1. **داشبورد**: نمای کلی از آمار و عملیات سریع
|
||||||
|
2. **تعریف شخص**: افزودن، ویرایش و حذف مشتریان و تامینکنندگان
|
||||||
|
3. **تعریف کالا**: مدیریت کالاها با قیمت، موجودی و کد
|
||||||
|
4. **خرید**: ثبت خریدهای جدید و مدیریت وضعیت آنها
|
||||||
|
5. **فروش**: ثبت فروشها و محاسبه درآمد
|
||||||
|
6. **انبارداری**: نظارت بر موجودی و تنظیم آن
|
||||||
|
|
||||||
|
### ویژگیهای پیشرفته (مشابه هلو)
|
||||||
|
7. **نمودار حسابها**: ایجاد و مدیریت ساختار حسابهای کل و تفصیلی
|
||||||
|
8. **گزارشهای مالی**:
|
||||||
|
- ترازنامه با بررسی تعادل
|
||||||
|
- صورت سود و زیان با محاسبه سود/زیان خالص
|
||||||
|
- تراز آزمایشی با ماندههای بدهکار و بستانکار
|
||||||
|
9. **سیستم فاکتور**:
|
||||||
|
- ایجاد فاکتورهای چندقلمی
|
||||||
|
- محاسبه خودکار مالیات
|
||||||
|
- مدیریت وضعیت پرداخت
|
||||||
|
|
||||||
|
## نکات مهم
|
||||||
|
|
||||||
|
- تمام دادهها در حافظه مرورگر ذخیره میشوند
|
||||||
|
- برای ذخیره دائمی دادهها، نیاز به اتصال به پایگاه داده است
|
||||||
|
- قیمتها به ریال نمایش داده میشوند
|
||||||
|
- تاریخها به تقویم شمسی نمایش داده میشوند
|
||||||
20646
package-lock.json
generated
Normal file
20646
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
45
package.json
Normal file
45
package.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "farsi-accounting-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
|
"@testing-library/react": "^13.3.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"jspdf": "^2.5.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.3.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.7",
|
||||||
|
"postcss": "^8.4.14",
|
||||||
|
"tailwindcss": "^3.1.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
21
public/index.html
Normal file
21
public/index.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fa" dir="rtl">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="نرمافزار حسابداری ساده"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
|
||||||
|
<title>نرمافزار حسابداری</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
public/manifest.json
Normal file
15
public/manifest.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "حسابداری",
|
||||||
|
"name": "نرمافزار حسابداری ساده",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
32
src/App.css
Normal file
32
src/App.css
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
/* Additional custom styles for the app */
|
||||||
|
.nav-link {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation for form elements */
|
||||||
|
.form-input:focus {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
82
src/App.js
Normal file
82
src/App.js
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Dashboard from './components/Dashboard';
|
||||||
|
import PersonManagement from './components/PersonManagement';
|
||||||
|
import ProductManagement from './components/ProductManagement';
|
||||||
|
import PurchaseManagement from './components/PurchaseManagement';
|
||||||
|
import SalesManagement from './components/SalesManagement';
|
||||||
|
import InventoryManagement from './components/InventoryManagement';
|
||||||
|
import ChartOfAccounts from './components/ChartOfAccounts';
|
||||||
|
import FinancialReports from './components/FinancialReports';
|
||||||
|
import InvoiceSystem from './components/InvoiceSystem';
|
||||||
|
import InvoiceDemo from './components/InvoiceDemo';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div className="min-h-screen bg-gray-100 farsi-text">
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="bg-blue-600 shadow-lg">
|
||||||
|
<div className="max-w-7xl mx-auto px-4">
|
||||||
|
<div className="flex justify-between h-16">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<h1 className="text-white text-xl font-bold">نرمافزار حسابداری</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4 space-x-reverse">
|
||||||
|
<Link to="/" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
داشبورد
|
||||||
|
</Link>
|
||||||
|
<Link to="/persons" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
تعریف شخص
|
||||||
|
</Link>
|
||||||
|
<Link to="/products" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
تعریف کالا
|
||||||
|
</Link>
|
||||||
|
<Link to="/purchases" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
خرید
|
||||||
|
</Link>
|
||||||
|
<Link to="/sales" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
فروش
|
||||||
|
</Link>
|
||||||
|
<Link to="/inventory" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
انبارداری
|
||||||
|
</Link>
|
||||||
|
<Link to="/chart-of-accounts" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
نمودار حسابها
|
||||||
|
</Link>
|
||||||
|
<Link to="/financial-reports" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
گزارشهای مالی
|
||||||
|
</Link>
|
||||||
|
<Link to="/invoices" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
فاکتور
|
||||||
|
</Link>
|
||||||
|
<Link to="/invoice-demo" className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium">
|
||||||
|
نمونه PDF
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="max-w-7xl mx-auto py-6 px-4">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/persons" element={<PersonManagement />} />
|
||||||
|
<Route path="/products" element={<ProductManagement />} />
|
||||||
|
<Route path="/purchases" element={<PurchaseManagement />} />
|
||||||
|
<Route path="/sales" element={<SalesManagement />} />
|
||||||
|
<Route path="/inventory" element={<InventoryManagement />} />
|
||||||
|
<Route path="/chart-of-accounts" element={<ChartOfAccounts />} />
|
||||||
|
<Route path="/financial-reports" element={<FinancialReports />} />
|
||||||
|
<Route path="/invoices" element={<InvoiceSystem />} />
|
||||||
|
<Route path="/invoice-demo" element={<InvoiceDemo />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
276
src/components/ChartOfAccounts.js
Normal file
276
src/components/ChartOfAccounts.js
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const ChartOfAccounts = () => {
|
||||||
|
const [accounts, setAccounts] = useState([
|
||||||
|
{ id: 1, code: '1000', name: 'داراییها', type: 'دارایی', parentId: null, level: 1 },
|
||||||
|
{ id: 2, code: '1100', name: 'داراییهای جاری', type: 'دارایی', parentId: 1, level: 2 },
|
||||||
|
{ id: 3, code: '1110', name: 'موجودی نقد', type: 'دارایی', parentId: 2, level: 3 },
|
||||||
|
{ id: 4, code: '1111', name: 'صندوق', type: 'دارایی', parentId: 3, level: 4, balance: 5000000 },
|
||||||
|
{ id: 5, code: '1112', name: 'بانک ملی', type: 'دارایی', parentId: 3, level: 4, balance: 25000000 },
|
||||||
|
{ id: 6, code: '1120', name: 'حسابهای دریافتنی', type: 'دارایی', parentId: 2, level: 3 },
|
||||||
|
{ id: 7, code: '1121', name: 'مشتریان', type: 'دارایی', parentId: 6, level: 4, balance: 15000000 },
|
||||||
|
{ id: 8, code: '1200', name: 'موجودی کالا', type: 'دارایی', parentId: 2, level: 3, balance: 30000000 },
|
||||||
|
{ id: 9, code: '2000', name: 'بدهیها', type: 'بدهی', parentId: null, level: 1 },
|
||||||
|
{ id: 10, code: '2100', name: 'بدهیهای جاری', type: 'بدهی', parentId: 9, level: 2 },
|
||||||
|
{ id: 11, code: '2110', name: 'حسابهای پرداختنی', type: 'بدهی', parentId: 10, level: 3 },
|
||||||
|
{ id: 12, code: '2111', name: 'تامینکنندگان', type: 'بدهی', parentId: 11, level: 4, balance: 8000000 },
|
||||||
|
{ id: 13, code: '3000', name: 'حقوق صاحبان سهام', type: 'حقوق صاحبان سهام', parentId: null, level: 1 },
|
||||||
|
{ id: 14, code: '3100', name: 'سرمایه', type: 'حقوق صاحبان سهام', parentId: 13, level: 2, balance: 100000000 },
|
||||||
|
{ id: 15, code: '4000', name: 'درآمدها', type: 'درآمد', parentId: null, level: 1 },
|
||||||
|
{ id: 16, code: '4100', name: 'فروش کالا', type: 'درآمد', parentId: 15, level: 2, balance: 50000000 },
|
||||||
|
{ id: 17, code: '5000', name: 'هزینهها', type: 'هزینه', parentId: null, level: 1 },
|
||||||
|
{ id: 18, code: '5100', name: 'هزینه خرید کالا', type: 'هزینه', parentId: 17, level: 2, balance: 30000000 },
|
||||||
|
{ id: 19, code: '5200', name: 'هزینههای عملیاتی', type: 'هزینه', parentId: 17, level: 2 },
|
||||||
|
{ id: 20, code: '5210', name: 'اجاره', type: 'هزینه', parentId: 19, level: 3, balance: 2000000 },
|
||||||
|
{ id: 21, code: '5220', name: 'حقوق و دستمزد', type: 'هزینه', parentId: 19, level: 3, balance: 5000000 }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingAccount, setEditingAccount] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
type: 'دارایی',
|
||||||
|
parentId: null
|
||||||
|
});
|
||||||
|
|
||||||
|
const accountTypes = ['دارایی', 'بدهی', 'حقوق صاحبان سهام', 'درآمد', 'هزینه'];
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (editingAccount) {
|
||||||
|
// Update existing account
|
||||||
|
setAccounts(accounts.map(account =>
|
||||||
|
account.id === editingAccount.id
|
||||||
|
? {
|
||||||
|
...account,
|
||||||
|
...formData,
|
||||||
|
level: formData.parentId ? accounts.find(a => a.id === parseInt(formData.parentId))?.level + 1 || 1 : 1
|
||||||
|
}
|
||||||
|
: account
|
||||||
|
));
|
||||||
|
setEditingAccount(null);
|
||||||
|
} else {
|
||||||
|
// Add new account
|
||||||
|
const newAccount = {
|
||||||
|
id: Date.now(),
|
||||||
|
...formData,
|
||||||
|
parentId: formData.parentId ? parseInt(formData.parentId) : null,
|
||||||
|
level: formData.parentId ? accounts.find(a => a.id === parseInt(formData.parentId))?.level + 1 || 1 : 1,
|
||||||
|
balance: 0
|
||||||
|
};
|
||||||
|
setAccounts([...accounts, newAccount]);
|
||||||
|
}
|
||||||
|
setFormData({ code: '', name: '', type: 'دارایی', parentId: null });
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (account) => {
|
||||||
|
setEditingAccount(account);
|
||||||
|
setFormData({
|
||||||
|
code: account.code,
|
||||||
|
name: account.name,
|
||||||
|
type: account.type,
|
||||||
|
parentId: account.parentId
|
||||||
|
});
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این حساب اطمینان دارید؟')) {
|
||||||
|
// Also delete child accounts
|
||||||
|
const deleteAccountAndChildren = (accountId) => {
|
||||||
|
const children = accounts.filter(acc => acc.parentId === accountId);
|
||||||
|
children.forEach(child => deleteAccountAndChildren(child.id));
|
||||||
|
setAccounts(accounts.filter(account => account.id !== accountId));
|
||||||
|
};
|
||||||
|
deleteAccountAndChildren(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingAccount(null);
|
||||||
|
setFormData({ code: '', name: '', type: 'دارایی', parentId: null });
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price || 0) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAccountTypeColor = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'دارایی':
|
||||||
|
return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'بدهی':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
case 'حقوق صاحبان سهام':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'درآمد':
|
||||||
|
return 'bg-purple-100 text-purple-800';
|
||||||
|
case 'هزینه':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderAccountTree = (parentId = null, level = 0) => {
|
||||||
|
const children = accounts.filter(acc => acc.parentId === parentId);
|
||||||
|
return children.map(account => (
|
||||||
|
<React.Fragment key={account.id}>
|
||||||
|
<tr className={`${level > 0 ? 'bg-gray-50' : ''}`}>
|
||||||
|
<td className="pr-4" style={{ paddingRight: `${level * 20}px` }}>
|
||||||
|
{account.code}
|
||||||
|
</td>
|
||||||
|
<td style={{ paddingRight: `${level * 20}px` }}>
|
||||||
|
{level > 0 && '└─ '}{account.name}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${getAccountTypeColor(account.type)}`}>
|
||||||
|
{account.type}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="text-left font-bold">
|
||||||
|
{formatPrice(account.balance)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(account)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(account.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{renderAccountTree(account.id, level + 1)}
|
||||||
|
</React.Fragment>
|
||||||
|
));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">نمودار حسابها</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
افزودن حساب جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingAccount ? 'ویرایش حساب' : 'افزودن حساب جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کد حساب</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="code"
|
||||||
|
value={formData.code}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
placeholder="مثال: 1111"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نام حساب</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نوع حساب</label>
|
||||||
|
<select
|
||||||
|
name="type"
|
||||||
|
value={formData.type}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
{accountTypes.map(type => (
|
||||||
|
<option key={type} value={type}>{type}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">حساب والد (اختیاری)</label>
|
||||||
|
<select
|
||||||
|
name="parentId"
|
||||||
|
value={formData.parentId || ''}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="">بدون والد</option>
|
||||||
|
{accounts.map(account => (
|
||||||
|
<option key={account.id} value={account.id}>
|
||||||
|
{account.code} - {account.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingAccount ? 'ویرایش' : 'افزودن'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Accounts Tree Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>کد حساب</th>
|
||||||
|
<th>نام حساب</th>
|
||||||
|
<th>نوع</th>
|
||||||
|
<th>مانده</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{renderAccountTree()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChartOfAccounts;
|
||||||
150
src/components/Dashboard.js
Normal file
150
src/components/Dashboard.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'کل اشخاص',
|
||||||
|
value: '25',
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
icon: '👥',
|
||||||
|
link: '/persons'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'کل کالاها',
|
||||||
|
value: '150',
|
||||||
|
color: 'bg-green-500',
|
||||||
|
icon: '📦',
|
||||||
|
link: '/products'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'خرید امروز',
|
||||||
|
value: '5',
|
||||||
|
color: 'bg-yellow-500',
|
||||||
|
icon: '🛒',
|
||||||
|
link: '/purchases'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'فروش امروز',
|
||||||
|
value: '12',
|
||||||
|
color: 'bg-purple-500',
|
||||||
|
icon: '💰',
|
||||||
|
link: '/sales'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'حسابهای فعال',
|
||||||
|
value: '21',
|
||||||
|
color: 'bg-indigo-500',
|
||||||
|
icon: '📊',
|
||||||
|
link: '/chart-of-accounts'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'فاکتورهای صادر شده',
|
||||||
|
value: '8',
|
||||||
|
color: 'bg-pink-500',
|
||||||
|
icon: '📄',
|
||||||
|
link: '/invoices'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-8">داشبورد</h1>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-8">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<Link
|
||||||
|
key={index}
|
||||||
|
to={stat.link}
|
||||||
|
className="card hover:shadow-lg transition-shadow duration-300"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className={`${stat.color} rounded-full p-3 text-white text-2xl`}>
|
||||||
|
{stat.icon}
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600">{stat.title}</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div className="card">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">عملیات سریع</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Link
|
||||||
|
to="/purchases"
|
||||||
|
className="flex items-center p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">🛒</span>
|
||||||
|
<span className="font-medium">ثبت خرید جدید</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/sales"
|
||||||
|
className="flex items-center p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">💰</span>
|
||||||
|
<span className="font-medium">ثبت فروش جدید</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/persons"
|
||||||
|
className="flex items-center p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">👥</span>
|
||||||
|
<span className="font-medium">افزودن شخص جدید</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/products"
|
||||||
|
className="flex items-center p-3 bg-yellow-50 rounded-lg hover:bg-yellow-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">📦</span>
|
||||||
|
<span className="font-medium">افزودن کالای جدید</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/invoices"
|
||||||
|
className="flex items-center p-3 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">📄</span>
|
||||||
|
<span className="font-medium">ایجاد فاکتور جدید</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/financial-reports"
|
||||||
|
className="flex items-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-2xl ml-3">📊</span>
|
||||||
|
<span className="font-medium">مشاهده گزارشهای مالی</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">آخرین فعالیتها</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span className="text-green-600 ml-3">✓</span>
|
||||||
|
<span className="text-sm">فروش کالای A به مشتری B</span>
|
||||||
|
<span className="text-xs text-gray-500 mr-auto">2 ساعت پیش</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span className="text-blue-600 ml-3">+</span>
|
||||||
|
<span className="text-sm">خرید کالای C از تامینکننده D</span>
|
||||||
|
<span className="text-xs text-gray-500 mr-auto">4 ساعت پیش</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span className="text-purple-600 ml-3">👤</span>
|
||||||
|
<span className="text-sm">افزودن مشتری جدید</span>
|
||||||
|
<span className="text-xs text-gray-500 mr-auto">6 ساعت پیش</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
335
src/components/FinancialReports.js
Normal file
335
src/components/FinancialReports.js
Normal file
@@ -0,0 +1,335 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const FinancialReports = () => {
|
||||||
|
const [selectedReport, setSelectedReport] = useState('balance-sheet');
|
||||||
|
const [reportDate, setReportDate] = useState(new Date().toLocaleDateString('fa-IR'));
|
||||||
|
|
||||||
|
// Sample data for reports
|
||||||
|
const balanceSheetData = {
|
||||||
|
assets: [
|
||||||
|
{ name: 'موجودی نقد', amount: 30000000 },
|
||||||
|
{ name: 'حسابهای دریافتنی', amount: 15000000 },
|
||||||
|
{ name: 'موجودی کالا', amount: 30000000 },
|
||||||
|
{ name: 'داراییهای ثابت', amount: 50000000 }
|
||||||
|
],
|
||||||
|
liabilities: [
|
||||||
|
{ name: 'حسابهای پرداختنی', amount: 8000000 },
|
||||||
|
{ name: 'وامهای کوتاهمدت', amount: 12000000 }
|
||||||
|
],
|
||||||
|
equity: [
|
||||||
|
{ name: 'سرمایه', amount: 100000000 },
|
||||||
|
{ name: 'سود انباشته', amount: 15000000 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const profitLossData = {
|
||||||
|
revenues: [
|
||||||
|
{ name: 'فروش کالا', amount: 50000000 },
|
||||||
|
{ name: 'درآمد خدمات', amount: 5000000 }
|
||||||
|
],
|
||||||
|
expenses: [
|
||||||
|
{ name: 'هزینه خرید کالا', amount: 30000000 },
|
||||||
|
{ name: 'هزینههای عملیاتی', amount: 7000000 },
|
||||||
|
{ name: 'اجاره', amount: 2000000 },
|
||||||
|
{ name: 'حقوق و دستمزد', amount: 5000000 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateTotal = (items) => {
|
||||||
|
return items.reduce((sum, item) => sum + item.amount, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalAssets = calculateTotal(balanceSheetData.assets);
|
||||||
|
const totalLiabilities = calculateTotal(balanceSheetData.liabilities);
|
||||||
|
const totalEquity = calculateTotal(balanceSheetData.equity);
|
||||||
|
const totalRevenues = calculateTotal(profitLossData.revenues);
|
||||||
|
const totalExpenses = calculateTotal(profitLossData.expenses);
|
||||||
|
const netProfit = totalRevenues - totalExpenses;
|
||||||
|
|
||||||
|
const renderBalanceSheet = () => (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold">ترازنامه</h2>
|
||||||
|
<p className="text-gray-600">تاریخ: {reportDate}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
{/* Assets */}
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-blue-800">داراییها</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{balanceSheetData.assets.map((asset, index) => (
|
||||||
|
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||||
|
<span>{asset.name}</span>
|
||||||
|
<span className="font-bold">{formatPrice(asset.amount)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between items-center py-2 border-t-2 border-blue-500 font-bold text-lg">
|
||||||
|
<span>مجموع داراییها</span>
|
||||||
|
<span className="text-blue-600">{formatPrice(totalAssets)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liabilities & Equity */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-red-800">بدهیها</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{balanceSheetData.liabilities.map((liability, index) => (
|
||||||
|
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||||
|
<span>{liability.name}</span>
|
||||||
|
<span className="font-bold">{formatPrice(liability.amount)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between items-center py-2 border-t-2 border-red-500 font-bold">
|
||||||
|
<span>مجموع بدهیها</span>
|
||||||
|
<span className="text-red-600">{formatPrice(totalLiabilities)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-green-800">حقوق صاحبان سهام</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{balanceSheetData.equity.map((equity, index) => (
|
||||||
|
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||||
|
<span>{equity.name}</span>
|
||||||
|
<span className="font-bold">{formatPrice(equity.amount)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between items-center py-2 border-t-2 border-green-500 font-bold">
|
||||||
|
<span>مجموع حقوق صاحبان سهام</span>
|
||||||
|
<span className="text-green-600">{formatPrice(totalEquity)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Balance Check */}
|
||||||
|
<div className="card bg-gray-50">
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-lg font-bold mb-2">بررسی تراز</h3>
|
||||||
|
<p className={`text-lg ${totalAssets === (totalLiabilities + totalEquity) ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{totalAssets === (totalLiabilities + totalEquity) ? '✓ ترازنامه متعادل است' : '✗ ترازنامه نامتعادل است'}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 mt-2">
|
||||||
|
داراییها: {formatPrice(totalAssets)} | بدهیها + حقوق صاحبان سهام: {formatPrice(totalLiabilities + totalEquity)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderProfitLoss = () => (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold">صورت سود و زیان</h2>
|
||||||
|
<p className="text-gray-600">تاریخ: {reportDate}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
{/* Revenues */}
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-green-800">درآمدها</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{profitLossData.revenues.map((revenue, index) => (
|
||||||
|
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||||
|
<span>{revenue.name}</span>
|
||||||
|
<span className="font-bold">{formatPrice(revenue.amount)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between items-center py-2 border-t-2 border-green-500 font-bold text-lg">
|
||||||
|
<span>مجموع درآمدها</span>
|
||||||
|
<span className="text-green-600">{formatPrice(totalRevenues)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expenses */}
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-red-800">هزینهها</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{profitLossData.expenses.map((expense, index) => (
|
||||||
|
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||||
|
<span>{expense.name}</span>
|
||||||
|
<span className="font-bold">{formatPrice(expense.amount)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between items-center py-2 border-t-2 border-red-500 font-bold text-lg">
|
||||||
|
<span>مجموع هزینهها</span>
|
||||||
|
<span className="text-red-600">{formatPrice(totalExpenses)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Net Profit/Loss */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-xl font-bold mb-4">نتیجه فعالیت</h3>
|
||||||
|
<div className={`text-3xl font-bold ${netProfit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{netProfit >= 0 ? 'سود خالص' : 'زیان خالص'}: {formatPrice(Math.abs(netProfit))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div className="bg-green-50 p-3 rounded">
|
||||||
|
<p className="font-bold text-green-800">درآمد کل</p>
|
||||||
|
<p className="text-green-600">{formatPrice(totalRevenues)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-red-50 p-3 rounded">
|
||||||
|
<p className="font-bold text-red-800">هزینه کل</p>
|
||||||
|
<p className="text-red-600">{formatPrice(totalExpenses)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderTrialBalance = () => (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold">تراز آزمایشی</h2>
|
||||||
|
<p className="text-gray-600">تاریخ: {reportDate}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>کد حساب</th>
|
||||||
|
<th>نام حساب</th>
|
||||||
|
<th>بدهکار</th>
|
||||||
|
<th>بستانکار</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1111</td>
|
||||||
|
<td>صندوق</td>
|
||||||
|
<td className="text-left">{formatPrice(5000000)}</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1112</td>
|
||||||
|
<td>بانک ملی</td>
|
||||||
|
<td className="text-left">{formatPrice(25000000)}</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1121</td>
|
||||||
|
<td>مشتریان</td>
|
||||||
|
<td className="text-left">{formatPrice(15000000)}</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1200</td>
|
||||||
|
<td>موجودی کالا</td>
|
||||||
|
<td className="text-left">{formatPrice(30000000)}</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2111</td>
|
||||||
|
<td>تامینکنندگان</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
<td className="text-left">{formatPrice(8000000)}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3100</td>
|
||||||
|
<td>سرمایه</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
<td className="text-left">{formatPrice(100000000)}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4100</td>
|
||||||
|
<td>فروش کالا</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
<td className="text-left">{formatPrice(50000000)}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>5100</td>
|
||||||
|
<td>هزینه خرید کالا</td>
|
||||||
|
<td className="text-left">{formatPrice(30000000)}</td>
|
||||||
|
<td className="text-left">-</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-t-2 border-gray-400 font-bold">
|
||||||
|
<td colSpan="2">مجموع</td>
|
||||||
|
<td className="text-left">{formatPrice(75000000)}</td>
|
||||||
|
<td className="text-left">{formatPrice(158000000)}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">گزارشهای مالی</h1>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={reportDate}
|
||||||
|
onChange={(e) => setReportDate(e.target.value)}
|
||||||
|
className="form-input w-40"
|
||||||
|
placeholder="تاریخ گزارش"
|
||||||
|
/>
|
||||||
|
<button className="btn-primary">
|
||||||
|
چاپ گزارش
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Report Type Selector */}
|
||||||
|
<div className="card mb-6">
|
||||||
|
<div className="flex space-x-4 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedReport('balance-sheet')}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium ${
|
||||||
|
selectedReport === 'balance-sheet'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
ترازنامه
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedReport('profit-loss')}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium ${
|
||||||
|
selectedReport === 'profit-loss'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
صورت سود و زیان
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedReport('trial-balance')}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium ${
|
||||||
|
selectedReport === 'trial-balance'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
تراز آزمایشی
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Report Content */}
|
||||||
|
{selectedReport === 'balance-sheet' && renderBalanceSheet()}
|
||||||
|
{selectedReport === 'profit-loss' && renderProfitLoss()}
|
||||||
|
{selectedReport === 'trial-balance' && renderTrialBalance()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FinancialReports;
|
||||||
299
src/components/InventoryManagement.js
Normal file
299
src/components/InventoryManagement.js
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const InventoryManagement = () => {
|
||||||
|
const [inventory, setInventory] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
product: 'لپتاپ ایسوس',
|
||||||
|
code: 'LAP001',
|
||||||
|
currentStock: 5,
|
||||||
|
minStock: 2,
|
||||||
|
maxStock: 20,
|
||||||
|
unit: 'عدد',
|
||||||
|
lastUpdate: '1403/01/15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
product: 'موبایل سامسونگ',
|
||||||
|
code: 'MOB002',
|
||||||
|
currentStock: 12,
|
||||||
|
minStock: 5,
|
||||||
|
maxStock: 50,
|
||||||
|
unit: 'عدد',
|
||||||
|
lastUpdate: '1403/01/14'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
product: 'کتاب برنامهنویسی',
|
||||||
|
code: 'BOK003',
|
||||||
|
currentStock: 25,
|
||||||
|
minStock: 10,
|
||||||
|
maxStock: 100,
|
||||||
|
unit: 'جلد',
|
||||||
|
lastUpdate: '1403/01/13'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showAdjustmentForm, setShowAdjustmentForm] = useState(false);
|
||||||
|
const [selectedProduct, setSelectedProduct] = useState(null);
|
||||||
|
const [adjustmentData, setAdjustmentData] = useState({
|
||||||
|
type: 'افزایش',
|
||||||
|
quantity: '',
|
||||||
|
reason: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleAdjustmentChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setAdjustmentData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStockAdjustment = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const adjustmentQuantity = parseInt(adjustmentData.quantity);
|
||||||
|
const newStock = adjustmentData.type === 'افزایش'
|
||||||
|
? selectedProduct.currentStock + adjustmentQuantity
|
||||||
|
: selectedProduct.currentStock - adjustmentQuantity;
|
||||||
|
|
||||||
|
if (newStock < 0) {
|
||||||
|
alert('موجودی نمیتواند منفی باشد!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setInventory(inventory.map(item =>
|
||||||
|
item.id === selectedProduct.id
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
currentStock: newStock,
|
||||||
|
lastUpdate: new Date().toLocaleDateString('fa-IR')
|
||||||
|
}
|
||||||
|
: item
|
||||||
|
));
|
||||||
|
|
||||||
|
setShowAdjustmentForm(false);
|
||||||
|
setSelectedProduct(null);
|
||||||
|
setAdjustmentData({ type: 'افزایش', quantity: '', reason: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelAdjustment = () => {
|
||||||
|
setShowAdjustmentForm(false);
|
||||||
|
setSelectedProduct(null);
|
||||||
|
setAdjustmentData({ type: 'افزایش', quantity: '', reason: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStockStatus = (current, min, max) => {
|
||||||
|
if (current <= min) return { status: 'کم', color: 'bg-red-100 text-red-800' };
|
||||||
|
if (current >= max) return { status: 'زیاد', color: 'bg-yellow-100 text-yellow-800' };
|
||||||
|
return { status: 'مناسب', color: 'bg-green-100 text-green-800' };
|
||||||
|
};
|
||||||
|
|
||||||
|
const lowStockItems = inventory.filter(item => item.currentStock <= item.minStock);
|
||||||
|
const totalValue = inventory.reduce((sum, item) => {
|
||||||
|
// Assuming average price for calculation
|
||||||
|
const avgPrice = item.product === 'لپتاپ ایسوس' ? 15000000 :
|
||||||
|
item.product === 'موبایل سامسونگ' ? 8000000 : 150000;
|
||||||
|
return sum + (item.currentStock * avgPrice);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">مدیریت انبار</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAdjustmentForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
تنظیم موجودی
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inventory Summary */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-blue-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
📦
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کل کالاها</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{inventory.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-red-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
⚠️
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کمبود موجودی</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{lowStockItems.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-green-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
💰
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">ارزش کل انبار</p>
|
||||||
|
<p className="text-lg font-bold text-gray-900">{formatPrice(totalValue)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-purple-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
📊
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کل موجودی</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{inventory.reduce((sum, item) => sum + item.currentStock, 0)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Low Stock Alert */}
|
||||||
|
{lowStockItems.length > 0 && (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||||
|
<h3 className="text-red-800 font-bold mb-2">هشدار کمبود موجودی</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{lowStockItems.map(item => (
|
||||||
|
<div key={item.id} className="text-red-700">
|
||||||
|
{item.product} - موجودی فعلی: {item.currentStock} {item.unit} (حداقل: {item.minStock})
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stock Adjustment Form Modal */}
|
||||||
|
{showAdjustmentForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">تنظیم موجودی</h2>
|
||||||
|
<form onSubmit={handleStockAdjustment} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کالا</label>
|
||||||
|
<select
|
||||||
|
value={selectedProduct?.id || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
const product = inventory.find(item => item.id === parseInt(e.target.value));
|
||||||
|
setSelectedProduct(product);
|
||||||
|
}}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{inventory.map(item => (
|
||||||
|
<option key={item.id} value={item.id}>
|
||||||
|
{item.product} (موجودی فعلی: {item.currentStock})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نوع تنظیم</label>
|
||||||
|
<select
|
||||||
|
name="type"
|
||||||
|
value={adjustmentData.type}
|
||||||
|
onChange={handleAdjustmentChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="افزایش">افزایش موجودی</option>
|
||||||
|
<option value="کاهش">کاهش موجودی</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تعداد</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="quantity"
|
||||||
|
value={adjustmentData.quantity}
|
||||||
|
onChange={handleAdjustmentChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">دلیل</label>
|
||||||
|
<textarea
|
||||||
|
name="reason"
|
||||||
|
value={adjustmentData.reason}
|
||||||
|
onChange={handleAdjustmentChange}
|
||||||
|
className="form-input"
|
||||||
|
rows="3"
|
||||||
|
placeholder="دلیل تنظیم موجودی..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
اعمال تغییرات
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancelAdjustment} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Inventory Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>نام کالا</th>
|
||||||
|
<th>کد کالا</th>
|
||||||
|
<th>موجودی فعلی</th>
|
||||||
|
<th>حداقل</th>
|
||||||
|
<th>حداکثر</th>
|
||||||
|
<th>وضعیت</th>
|
||||||
|
<th>آخرین بروزرسانی</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{inventory.map(item => {
|
||||||
|
const stockStatus = getStockStatus(item.currentStock, item.minStock, item.maxStock);
|
||||||
|
return (
|
||||||
|
<tr key={item.id}>
|
||||||
|
<td>{item.product}</td>
|
||||||
|
<td>
|
||||||
|
<span className="bg-gray-100 px-2 py-1 rounded text-sm">
|
||||||
|
{item.code}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="font-bold">{item.currentStock} {item.unit}</td>
|
||||||
|
<td>{item.minStock} {item.unit}</td>
|
||||||
|
<td>{item.maxStock} {item.unit}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${stockStatus.color}`}>
|
||||||
|
{stockStatus.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{item.lastUpdate}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InventoryManagement;
|
||||||
136
src/components/InvoiceDemo.js
Normal file
136
src/components/InvoiceDemo.js
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import InvoicePDF from './InvoicePDF';
|
||||||
|
import { sampleInvoice, sampleInvoice2 } from '../data/sampleInvoice';
|
||||||
|
|
||||||
|
const InvoiceDemo = () => {
|
||||||
|
const handleGenerateSamplePDF = (invoice) => {
|
||||||
|
InvoicePDF.generatePDF(invoice);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenerateSampleHTML = (invoice) => {
|
||||||
|
const invoiceHTML = InvoicePDF.generateHTMLInvoice(invoice);
|
||||||
|
const printWindow = window.open('', '_blank');
|
||||||
|
printWindow.document.write(invoiceHTML);
|
||||||
|
printWindow.document.close();
|
||||||
|
printWindow.focus();
|
||||||
|
printWindow.print();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text p-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-8">نمونه فاکتورهای PDF</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{/* Sample Invoice 1 */}
|
||||||
|
<div className="card">
|
||||||
|
<h2 className="text-xl font-bold mb-4">فاکتور نمونه 1 - فروش تجهیزات کامپیوتری</h2>
|
||||||
|
<div className="space-y-2 mb-4">
|
||||||
|
<p><strong>شماره فاکتور:</strong> {sampleInvoice.invoiceNumber}</p>
|
||||||
|
<p><strong>مشتری:</strong> {sampleInvoice.customer}</p>
|
||||||
|
<p><strong>تعداد اقلام:</strong> {sampleInvoice.items.length}</p>
|
||||||
|
<p><strong>مبلغ کل:</strong> {new Intl.NumberFormat('fa-IR').format(sampleInvoice.total)} ریال</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerateSamplePDF(sampleInvoice)}
|
||||||
|
className="btn-success flex-1"
|
||||||
|
>
|
||||||
|
دانلود PDF
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerateSampleHTML(sampleInvoice)}
|
||||||
|
className="btn-primary flex-1"
|
||||||
|
>
|
||||||
|
چاپ HTML
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sample Invoice 2 */}
|
||||||
|
<div className="card">
|
||||||
|
<h2 className="text-xl font-bold mb-4">فاکتور نمونه 2 - فروش تجهیزات شبکه</h2>
|
||||||
|
<div className="space-y-2 mb-4">
|
||||||
|
<p><strong>شماره فاکتور:</strong> {sampleInvoice2.invoiceNumber}</p>
|
||||||
|
<p><strong>مشتری:</strong> {sampleInvoice2.customer}</p>
|
||||||
|
<p><strong>تعداد اقلام:</strong> {sampleInvoice2.items.length}</p>
|
||||||
|
<p><strong>مبلغ کل:</strong> {new Intl.NumberFormat('fa-IR').format(sampleInvoice2.total)} ریال</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerateSamplePDF(sampleInvoice2)}
|
||||||
|
className="btn-success flex-1"
|
||||||
|
>
|
||||||
|
دانلود PDF
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleGenerateSampleHTML(sampleInvoice2)}
|
||||||
|
className="btn-primary flex-1"
|
||||||
|
>
|
||||||
|
چاپ HTML
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Instructions */}
|
||||||
|
<div className="card mt-8">
|
||||||
|
<h2 className="text-xl font-bold mb-4">راهنمای استفاده</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-start space-x-3 space-x-reverse">
|
||||||
|
<span className="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">1</span>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">دانلود PDF:</p>
|
||||||
|
<p className="text-gray-600">فایل PDF فاکتور را مستقیماً دانلود میکند</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start space-x-3 space-x-reverse">
|
||||||
|
<span className="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">2</span>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">چاپ HTML:</p>
|
||||||
|
<p className="text-gray-600">فاکتور را در پنجره جدید باز کرده و امکان چاپ فراهم میکند</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start space-x-3 space-x-reverse">
|
||||||
|
<span className="bg-purple-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">3</span>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">پیشنمایش:</p>
|
||||||
|
<p className="text-gray-600">در بخش فاکتورها، دکمه "پیشنمایش" را کلیک کنید</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<div className="card mt-8">
|
||||||
|
<h2 className="text-xl font-bold mb-4">ویژگیهای فاکتور PDF</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="font-bold text-green-600">✅ ویژگیهای موجود:</h3>
|
||||||
|
<ul className="space-y-1 text-sm">
|
||||||
|
<li>• طراحی حرفهای و زیبا</li>
|
||||||
|
<li>• پشتیبانی کامل از زبان فارسی</li>
|
||||||
|
<li>• محاسبه خودکار مالیات</li>
|
||||||
|
<li>• نمایش جزئیات کامل مشتری</li>
|
||||||
|
<li>• جدول اقلام با قیمتگذاری</li>
|
||||||
|
<li>• فرمتبندی اعداد به فارسی</li>
|
||||||
|
<li>• قابلیت چاپ و ذخیره</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="font-bold text-blue-600">🔧 قابلیتهای فنی:</h3>
|
||||||
|
<ul className="space-y-1 text-sm">
|
||||||
|
<li>• تولید PDF با jsPDF</li>
|
||||||
|
<li>• نسخه HTML برای چاپ</li>
|
||||||
|
<li>• طراحی ریسپانسیو</li>
|
||||||
|
<li>• پشتیبانی از چندین قلم</li>
|
||||||
|
<li>• بهینهسازی برای چاپ</li>
|
||||||
|
<li>• سازگار با مرورگرهای مختلف</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InvoiceDemo;
|
||||||
257
src/components/InvoicePDF.js
Normal file
257
src/components/InvoicePDF.js
Normal file
@@ -0,0 +1,257 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import jsPDF from 'jspdf';
|
||||||
|
|
||||||
|
const InvoicePDF = {
|
||||||
|
generatePDF: (invoice) => {
|
||||||
|
const doc = new jsPDF();
|
||||||
|
|
||||||
|
// Set font for Persian text (using a basic approach)
|
||||||
|
doc.setFont('helvetica');
|
||||||
|
|
||||||
|
// Company Header
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('شرکت حسابداری نمونه', 105, 20, { align: 'center' });
|
||||||
|
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.text('آدرس: تهران، خیابان ولیعصر، پلاک 123', 105, 30, { align: 'center' });
|
||||||
|
doc.text('تلفن: 021-12345678 | ایمیل: info@company.com', 105, 35, { align: 'center' });
|
||||||
|
|
||||||
|
// Invoice Title
|
||||||
|
doc.setFontSize(18);
|
||||||
|
doc.text('فاکتور فروش', 105, 50, { align: 'center' });
|
||||||
|
|
||||||
|
// Invoice Details
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.text(`شماره فاکتور: ${invoice.invoiceNumber}`, 20, 65);
|
||||||
|
doc.text(`تاریخ: ${invoice.date}`, 20, 70);
|
||||||
|
doc.text(`وضعیت: ${invoice.status}`, 20, 75);
|
||||||
|
|
||||||
|
// Customer Information
|
||||||
|
doc.setFontSize(14);
|
||||||
|
doc.text('اطلاعات مشتری:', 20, 90);
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.text(`نام: ${invoice.customer}`, 20, 100);
|
||||||
|
doc.text(`آدرس: ${invoice.customerAddress}`, 20, 105);
|
||||||
|
|
||||||
|
// Items Table Header
|
||||||
|
doc.setFontSize(12);
|
||||||
|
doc.text('شرح کالا/خدمات', 20, 125);
|
||||||
|
doc.text('تعداد', 100, 125);
|
||||||
|
doc.text('قیمت واحد', 120, 125);
|
||||||
|
doc.text('مبلغ', 160, 125);
|
||||||
|
|
||||||
|
// Draw line under header
|
||||||
|
doc.line(20, 130, 190, 130);
|
||||||
|
|
||||||
|
// Items
|
||||||
|
let yPosition = 140;
|
||||||
|
invoice.items.forEach((item, index) => {
|
||||||
|
doc.text(item.product, 20, yPosition);
|
||||||
|
doc.text(item.quantity.toString(), 100, yPosition);
|
||||||
|
doc.text(InvoicePDF.formatPrice(item.unitPrice), 120, yPosition);
|
||||||
|
doc.text(InvoicePDF.formatPrice(item.total), 160, yPosition);
|
||||||
|
yPosition += 10;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw line under items
|
||||||
|
doc.line(20, yPosition, 190, yPosition);
|
||||||
|
|
||||||
|
// Totals
|
||||||
|
yPosition += 15;
|
||||||
|
doc.text('مجموع:', 120, yPosition);
|
||||||
|
doc.text(InvoicePDF.formatPrice(invoice.subtotal), 160, yPosition);
|
||||||
|
|
||||||
|
yPosition += 10;
|
||||||
|
doc.text('مالیات (10%):', 120, yPosition);
|
||||||
|
doc.text(InvoicePDF.formatPrice(invoice.tax), 160, yPosition);
|
||||||
|
|
||||||
|
yPosition += 10;
|
||||||
|
doc.setFontSize(14);
|
||||||
|
doc.text('مبلغ کل:', 120, yPosition);
|
||||||
|
doc.text(InvoicePDF.formatPrice(invoice.total), 160, yPosition);
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
yPosition += 30;
|
||||||
|
doc.setFontSize(10);
|
||||||
|
doc.text('با تشکر از انتخاب شما', 105, yPosition, { align: 'center' });
|
||||||
|
doc.text('این فاکتور به صورت خودکار تولید شده است', 105, yPosition + 10, { align: 'center' });
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save(`invoice-${invoice.invoiceNumber}.pdf`);
|
||||||
|
},
|
||||||
|
|
||||||
|
formatPrice: (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
},
|
||||||
|
|
||||||
|
// Alternative method using HTML to PDF conversion
|
||||||
|
generateHTMLInvoice: (invoice) => {
|
||||||
|
const invoiceHTML = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fa" dir="rtl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>فاکتور ${invoice.invoiceNumber}</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Vazir', Tahoma, sans-serif;
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.invoice-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 2px solid #333;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.company-name {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.company-info {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.invoice-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.invoice-details {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.invoice-info, .customer-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.invoice-info h3, .customer-info h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.items-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.items-table th, .items-table td {
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.items-table th {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.totals {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.total-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 5px 0;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.total-final {
|
||||||
|
border-top: 2px solid #333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="invoice-container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="company-name">شرکت حسابداری نمونه</div>
|
||||||
|
<div class="company-info">
|
||||||
|
آدرس: تهران، خیابان ولیعصر، پلاک 123<br>
|
||||||
|
تلفن: 021-12345678 | ایمیل: info@company.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="invoice-title">فاکتور فروش</div>
|
||||||
|
|
||||||
|
<div class="invoice-details">
|
||||||
|
<div class="invoice-info">
|
||||||
|
<h3>اطلاعات فاکتور</h3>
|
||||||
|
<p><strong>شماره فاکتور:</strong> ${invoice.invoiceNumber}</p>
|
||||||
|
<p><strong>تاریخ:</strong> ${invoice.date}</p>
|
||||||
|
<p><strong>وضعیت:</strong> ${invoice.status}</p>
|
||||||
|
</div>
|
||||||
|
<div class="customer-info">
|
||||||
|
<h3>اطلاعات مشتری</h3>
|
||||||
|
<p><strong>نام:</strong> ${invoice.customer}</p>
|
||||||
|
<p><strong>آدرس:</strong> ${invoice.customerAddress}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="items-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>شرح کالا/خدمات</th>
|
||||||
|
<th>تعداد</th>
|
||||||
|
<th>قیمت واحد</th>
|
||||||
|
<th>مبلغ</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${invoice.items.map(item => `
|
||||||
|
<tr>
|
||||||
|
<td>${item.product}</td>
|
||||||
|
<td>${item.quantity}</td>
|
||||||
|
<td>${InvoicePDF.formatPrice(item.unitPrice)}</td>
|
||||||
|
<td>${InvoicePDF.formatPrice(item.total)}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('')}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="totals">
|
||||||
|
<div class="total-row">
|
||||||
|
<span>مجموع:</span>
|
||||||
|
<span>${InvoicePDF.formatPrice(invoice.subtotal)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="total-row">
|
||||||
|
<span>مالیات (10%):</span>
|
||||||
|
<span>${InvoicePDF.formatPrice(invoice.tax)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="total-row total-final">
|
||||||
|
<span>مبلغ کل:</span>
|
||||||
|
<span>${InvoicePDF.formatPrice(invoice.total)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>با تشکر از انتخاب شما</p>
|
||||||
|
<p>این فاکتور به صورت خودکار تولید شده است</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return invoiceHTML;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InvoicePDF;
|
||||||
150
src/components/InvoicePreview.js
Normal file
150
src/components/InvoicePreview.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const InvoicePreview = ({ invoice, onClose }) => {
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-4xl my-8">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold">پیشنمایش فاکتور</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-500 hover:text-gray-700 text-2xl"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice Preview */}
|
||||||
|
<div className="border-2 border-gray-300 p-8 bg-white" style={{ minHeight: '800px' }}>
|
||||||
|
{/* Company Header */}
|
||||||
|
<div className="text-center border-b-2 border-gray-400 pb-6 mb-8">
|
||||||
|
<h1 className="text-3xl font-bold mb-4">شرکت حسابداری نمونه</h1>
|
||||||
|
<div className="text-gray-600">
|
||||||
|
<p>آدرس: تهران، خیابان ولیعصر، پلاک 123</p>
|
||||||
|
<p>تلفن: 021-12345678 | ایمیل: info@company.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice Title */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-2xl font-bold">فاکتور فروش</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice Details */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4">اطلاعات فاکتور</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p><strong>شماره فاکتور:</strong> {invoice.invoiceNumber}</p>
|
||||||
|
<p><strong>تاریخ:</strong> {invoice.date}</p>
|
||||||
|
<p><strong>وضعیت:</strong>
|
||||||
|
<span className={`ml-2 px-2 py-1 rounded-full text-xs ${
|
||||||
|
invoice.status === 'پرداخت شده' ? 'bg-green-100 text-green-800' :
|
||||||
|
invoice.status === 'در انتظار پرداخت' ? 'bg-yellow-100 text-yellow-800' :
|
||||||
|
'bg-red-100 text-red-800'
|
||||||
|
}`}>
|
||||||
|
{invoice.status}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4">اطلاعات مشتری</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p><strong>نام:</strong> {invoice.customer}</p>
|
||||||
|
<p><strong>آدرس:</strong> {invoice.customerAddress}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Items Table */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<table className="w-full border-collapse border border-gray-400">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-100">
|
||||||
|
<th className="border border-gray-400 p-3 text-right">شرح کالا/خدمات</th>
|
||||||
|
<th className="border border-gray-400 p-3 text-center">تعداد</th>
|
||||||
|
<th className="border border-gray-400 p-3 text-left">قیمت واحد</th>
|
||||||
|
<th className="border border-gray-400 p-3 text-left">مبلغ</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{invoice.items.map((item, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td className="border border-gray-400 p-3">{item.product}</td>
|
||||||
|
<td className="border border-gray-400 p-3 text-center">{item.quantity}</td>
|
||||||
|
<td className="border border-gray-400 p-3 text-left">{formatPrice(item.unitPrice)}</td>
|
||||||
|
<td className="border border-gray-400 p-3 text-left font-bold">{formatPrice(item.total)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Totals */}
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="flex justify-between items-center py-2 border-b border-gray-300">
|
||||||
|
<span className="font-medium">مجموع:</span>
|
||||||
|
<span className="font-bold">{formatPrice(invoice.subtotal)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center py-2 border-b border-gray-300">
|
||||||
|
<span className="font-medium">مالیات (10%):</span>
|
||||||
|
<span className="font-bold">{formatPrice(invoice.tax)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center py-4 border-t-2 border-gray-400">
|
||||||
|
<span className="text-xl font-bold">مبلغ کل:</span>
|
||||||
|
<span className="text-xl font-bold text-blue-600">{formatPrice(invoice.total)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center mt-12 pt-6 border-t border-gray-300">
|
||||||
|
<p className="text-gray-600 mb-2">با تشکر از انتخاب شما</p>
|
||||||
|
<p className="text-sm text-gray-500">این فاکتور به صورت خودکار تولید شده است</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex justify-center space-x-4 space-x-reverse mt-6">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
// Generate PDF
|
||||||
|
const { generatePDF } = require('./InvoicePDF');
|
||||||
|
generatePDF(invoice);
|
||||||
|
}}
|
||||||
|
className="btn-success px-6 py-2"
|
||||||
|
>
|
||||||
|
دانلود PDF
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
// Generate HTML and print
|
||||||
|
const { generateHTMLInvoice } = require('./InvoicePDF');
|
||||||
|
const invoiceHTML = generateHTMLInvoice(invoice);
|
||||||
|
const printWindow = window.open('', '_blank');
|
||||||
|
printWindow.document.write(invoiceHTML);
|
||||||
|
printWindow.document.close();
|
||||||
|
printWindow.focus();
|
||||||
|
printWindow.print();
|
||||||
|
}}
|
||||||
|
className="btn-primary px-6 py-2"
|
||||||
|
>
|
||||||
|
چاپ فاکتور
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="btn-secondary px-6 py-2"
|
||||||
|
>
|
||||||
|
بستن
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InvoicePreview;
|
||||||
516
src/components/InvoiceSystem.js
Normal file
516
src/components/InvoiceSystem.js
Normal file
@@ -0,0 +1,516 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import InvoicePDF from './InvoicePDF';
|
||||||
|
import InvoicePreview from './InvoicePreview';
|
||||||
|
|
||||||
|
const InvoiceSystem = () => {
|
||||||
|
const [invoices, setInvoices] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
invoiceNumber: 'INV-001',
|
||||||
|
date: '1403/01/15',
|
||||||
|
customer: 'احمد محمدی',
|
||||||
|
customerAddress: 'تهران، خیابان ولیعصر',
|
||||||
|
items: [
|
||||||
|
{ product: 'لپتاپ ایسوس', quantity: 1, unitPrice: 16000000, total: 16000000 },
|
||||||
|
{ product: 'ماوس بیسیم', quantity: 1, unitPrice: 500000, total: 500000 }
|
||||||
|
],
|
||||||
|
subtotal: 16500000,
|
||||||
|
tax: 1650000,
|
||||||
|
total: 18150000,
|
||||||
|
status: 'پرداخت شده'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
invoiceNumber: 'INV-002',
|
||||||
|
date: '1403/01/14',
|
||||||
|
customer: 'فاطمه احمدی',
|
||||||
|
customerAddress: 'اصفهان، خیابان چهارباغ',
|
||||||
|
items: [
|
||||||
|
{ product: 'موبایل سامسونگ', quantity: 2, unitPrice: 8500000, total: 17000000 }
|
||||||
|
],
|
||||||
|
subtotal: 17000000,
|
||||||
|
tax: 1700000,
|
||||||
|
total: 18700000,
|
||||||
|
status: 'در انتظار پرداخت'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingInvoice, setEditingInvoice] = useState(null);
|
||||||
|
const [previewInvoice, setPreviewInvoice] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
customer: '',
|
||||||
|
customerAddress: '',
|
||||||
|
items: [{ product: '', quantity: '', unitPrice: '', total: 0 }],
|
||||||
|
tax: 10
|
||||||
|
});
|
||||||
|
|
||||||
|
const customers = ['احمد محمدی', 'فاطمه احمدی', 'علی رضایی'];
|
||||||
|
const products = ['لپتاپ ایسوس', 'موبایل سامسونگ', 'کتاب برنامهنویسی', 'ماوس بیسیم'];
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleItemChange = (index, field, value) => {
|
||||||
|
const newItems = [...formData.items];
|
||||||
|
newItems[index] = { ...newItems[index], [field]: value };
|
||||||
|
|
||||||
|
if (field === 'quantity' || field === 'unitPrice') {
|
||||||
|
const quantity = parseFloat(field === 'quantity' ? value : newItems[index].quantity) || 0;
|
||||||
|
const unitPrice = parseFloat(field === 'unitPrice' ? value : newItems[index].unitPrice) || 0;
|
||||||
|
newItems[index].total = quantity * unitPrice;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormData(prev => ({ ...prev, items: newItems }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const addItem = () => {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: [...prev.items, { product: '', quantity: '', unitPrice: '', total: 0 }]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeItem = (index) => {
|
||||||
|
if (formData.items.length > 1) {
|
||||||
|
const newItems = formData.items.filter((_, i) => i !== index);
|
||||||
|
setFormData(prev => ({ ...prev, items: newItems }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateTotals = () => {
|
||||||
|
const subtotal = formData.items.reduce((sum, item) => sum + (item.total || 0), 0);
|
||||||
|
const tax = (subtotal * formData.tax) / 100;
|
||||||
|
const total = subtotal + tax;
|
||||||
|
return { subtotal, tax, total };
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const { subtotal, tax, total } = calculateTotals();
|
||||||
|
const invoiceNumber = `INV-${String(invoices.length + 1).padStart(3, '0')}`;
|
||||||
|
|
||||||
|
if (editingInvoice) {
|
||||||
|
// Update existing invoice
|
||||||
|
setInvoices(invoices.map(invoice =>
|
||||||
|
invoice.id === editingInvoice.id
|
||||||
|
? {
|
||||||
|
...invoice,
|
||||||
|
...formData,
|
||||||
|
subtotal,
|
||||||
|
tax,
|
||||||
|
total,
|
||||||
|
items: formData.items.filter(item => item.product && item.quantity && item.unitPrice)
|
||||||
|
}
|
||||||
|
: invoice
|
||||||
|
));
|
||||||
|
setEditingInvoice(null);
|
||||||
|
} else {
|
||||||
|
// Add new invoice
|
||||||
|
const newInvoice = {
|
||||||
|
id: Date.now(),
|
||||||
|
invoiceNumber,
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
...formData,
|
||||||
|
subtotal,
|
||||||
|
tax,
|
||||||
|
total,
|
||||||
|
status: 'در انتظار پرداخت',
|
||||||
|
items: formData.items.filter(item => item.product && item.quantity && item.unitPrice)
|
||||||
|
};
|
||||||
|
setInvoices([newInvoice, ...invoices]);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormData({
|
||||||
|
customer: '',
|
||||||
|
customerAddress: '',
|
||||||
|
items: [{ product: '', quantity: '', unitPrice: '', total: 0 }],
|
||||||
|
tax: 10
|
||||||
|
});
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (invoice) => {
|
||||||
|
setEditingInvoice(invoice);
|
||||||
|
setFormData({
|
||||||
|
customer: invoice.customer,
|
||||||
|
customerAddress: invoice.customerAddress,
|
||||||
|
items: invoice.items.length > 0 ? invoice.items : [{ product: '', quantity: '', unitPrice: '', total: 0 }],
|
||||||
|
tax: 10
|
||||||
|
});
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این فاکتور اطمینان دارید؟')) {
|
||||||
|
setInvoices(invoices.filter(invoice => invoice.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingInvoice(null);
|
||||||
|
setFormData({
|
||||||
|
customer: '',
|
||||||
|
customerAddress: '',
|
||||||
|
items: [{ product: '', quantity: '', unitPrice: '', total: 0 }],
|
||||||
|
tax: 10
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'پرداخت شده':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'در انتظار پرداخت':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'لغو شده':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrintInvoice = (invoice) => {
|
||||||
|
// Generate PDF using jsPDF
|
||||||
|
InvoicePDF.generatePDF(invoice);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrintHTML = (invoice) => {
|
||||||
|
// Generate HTML version and open in new window for printing
|
||||||
|
const invoiceHTML = InvoicePDF.generateHTMLInvoice(invoice);
|
||||||
|
const printWindow = window.open('', '_blank');
|
||||||
|
printWindow.document.write(invoiceHTML);
|
||||||
|
printWindow.document.close();
|
||||||
|
printWindow.focus();
|
||||||
|
printWindow.print();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePreviewInvoice = (invoice) => {
|
||||||
|
setPreviewInvoice(invoice);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { subtotal, tax, total } = calculateTotals();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">سیستم فاکتور</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
ایجاد فاکتور جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice Summary */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-blue-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
📄
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کل فاکتورها</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{invoices.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-green-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
💰
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کل مبلغ</p>
|
||||||
|
<p className="text-lg font-bold text-gray-900">
|
||||||
|
{formatPrice(invoices.reduce((sum, inv) => sum + inv.total, 0))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-yellow-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
⏳
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">در انتظار پرداخت</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{invoices.filter(inv => inv.status === 'در انتظار پرداخت').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-purple-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
✅
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">پرداخت شده</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{invoices.filter(inv => inv.status === 'پرداخت شده').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-4xl my-8">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingInvoice ? 'ویرایش فاکتور' : 'ایجاد فاکتور جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Customer Info */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">مشتری</label>
|
||||||
|
<select
|
||||||
|
name="customer"
|
||||||
|
value={formData.customer}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{customers.map(customer => (
|
||||||
|
<option key={customer} value={customer}>{customer}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">آدرس مشتری</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="customerAddress"
|
||||||
|
value={formData.customerAddress}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Items */}
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<label className="form-label">اقلام فاکتور</label>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={addItem}
|
||||||
|
className="btn-secondary text-sm"
|
||||||
|
>
|
||||||
|
افزودن قلم
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{formData.items.map((item, index) => (
|
||||||
|
<div key={index} className="grid grid-cols-12 gap-2 items-end">
|
||||||
|
<div className="col-span-5">
|
||||||
|
<select
|
||||||
|
value={item.product}
|
||||||
|
onChange={(e) => handleItemChange(index, 'product', e.target.value)}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کالا</option>
|
||||||
|
{products.map(product => (
|
||||||
|
<option key={product} value={product}>{product}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="تعداد"
|
||||||
|
value={item.quantity}
|
||||||
|
onChange={(e) => handleItemChange(index, 'quantity', e.target.value)}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="قیمت واحد"
|
||||||
|
value={item.unitPrice}
|
||||||
|
onChange={(e) => handleItemChange(index, 'unitPrice', e.target.value)}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formatPrice(item.total)}
|
||||||
|
className="form-input bg-gray-100"
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
{formData.items.length > 1 && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => removeItem(index)}
|
||||||
|
className="text-red-600 hover:text-red-800"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tax */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">درصد مالیات</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="tax"
|
||||||
|
value={formData.tax}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">مجموع</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formatPrice(subtotal)}
|
||||||
|
className="form-input bg-gray-100"
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کل با مالیات</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formatPrice(total)}
|
||||||
|
className="form-input bg-gray-100 font-bold"
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingInvoice ? 'ویرایش' : 'ایجاد'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Invoices Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>شماره فاکتور</th>
|
||||||
|
<th>تاریخ</th>
|
||||||
|
<th>مشتری</th>
|
||||||
|
<th>تعداد اقلام</th>
|
||||||
|
<th>مبلغ کل</th>
|
||||||
|
<th>وضعیت</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{invoices.map(invoice => (
|
||||||
|
<tr key={invoice.id}>
|
||||||
|
<td>
|
||||||
|
<span className="bg-blue-100 px-2 py-1 rounded text-sm">
|
||||||
|
{invoice.invoiceNumber}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{invoice.date}</td>
|
||||||
|
<td>{invoice.customer}</td>
|
||||||
|
<td>{invoice.items.length}</td>
|
||||||
|
<td className="font-bold">{formatPrice(invoice.total)}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(invoice.status)}`}>
|
||||||
|
{invoice.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(invoice)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(invoice.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePreviewInvoice(invoice)}
|
||||||
|
className="text-indigo-600 hover:text-indigo-800 text-sm"
|
||||||
|
title="پیشنمایش"
|
||||||
|
>
|
||||||
|
پیشنمایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePrintInvoice(invoice)}
|
||||||
|
className="text-green-600 hover:text-green-800 text-sm"
|
||||||
|
title="دانلود PDF"
|
||||||
|
>
|
||||||
|
PDF
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePrintHTML(invoice)}
|
||||||
|
className="text-purple-600 hover:text-purple-800 text-sm"
|
||||||
|
title="چاپ"
|
||||||
|
>
|
||||||
|
چاپ
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice Preview Modal */}
|
||||||
|
{previewInvoice && (
|
||||||
|
<InvoicePreview
|
||||||
|
invoice={previewInvoice}
|
||||||
|
onClose={() => setPreviewInvoice(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InvoiceSystem;
|
||||||
197
src/components/PersonManagement.js
Normal file
197
src/components/PersonManagement.js
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const PersonManagement = () => {
|
||||||
|
const [persons, setPersons] = useState([
|
||||||
|
{ id: 1, name: 'احمد محمدی', type: 'مشتری', phone: '09123456789', address: 'تهران، خیابان ولیعصر' },
|
||||||
|
{ id: 2, name: 'شرکت پارس', type: 'تامینکننده', phone: '02112345678', address: 'تهران، خیابان آزادی' },
|
||||||
|
{ id: 3, name: 'فاطمه احمدی', type: 'مشتری', phone: '09187654321', address: 'اصفهان، خیابان چهارباغ' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingPerson, setEditingPerson] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
type: 'مشتری',
|
||||||
|
phone: '',
|
||||||
|
address: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (editingPerson) {
|
||||||
|
// Update existing person
|
||||||
|
setPersons(persons.map(person =>
|
||||||
|
person.id === editingPerson.id
|
||||||
|
? { ...person, ...formData }
|
||||||
|
: person
|
||||||
|
));
|
||||||
|
setEditingPerson(null);
|
||||||
|
} else {
|
||||||
|
// Add new person
|
||||||
|
const newPerson = {
|
||||||
|
id: Date.now(),
|
||||||
|
...formData
|
||||||
|
};
|
||||||
|
setPersons([...persons, newPerson]);
|
||||||
|
}
|
||||||
|
setFormData({ name: '', type: 'مشتری', phone: '', address: '' });
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (person) => {
|
||||||
|
setEditingPerson(person);
|
||||||
|
setFormData(person);
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این شخص اطمینان دارید؟')) {
|
||||||
|
setPersons(persons.filter(person => person.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingPerson(null);
|
||||||
|
setFormData({ name: '', type: 'مشتری', phone: '', address: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">مدیریت اشخاص</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
افزودن شخص جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingPerson ? 'ویرایش شخص' : 'افزودن شخص جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نام</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نوع</label>
|
||||||
|
<select
|
||||||
|
name="type"
|
||||||
|
value={formData.type}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="مشتری">مشتری</option>
|
||||||
|
<option value="تامینکننده">تامینکننده</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">شماره تلفن</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">آدرس</label>
|
||||||
|
<textarea
|
||||||
|
name="address"
|
||||||
|
value={formData.address}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
rows="3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingPerson ? 'ویرایش' : 'افزودن'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Persons Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>نام</th>
|
||||||
|
<th>نوع</th>
|
||||||
|
<th>شماره تلفن</th>
|
||||||
|
<th>آدرس</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{persons.map(person => (
|
||||||
|
<tr key={person.id}>
|
||||||
|
<td>{person.name}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${
|
||||||
|
person.type === 'مشتری'
|
||||||
|
? 'bg-blue-100 text-blue-800'
|
||||||
|
: 'bg-green-100 text-green-800'
|
||||||
|
}`}>
|
||||||
|
{person.type}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{person.phone}</td>
|
||||||
|
<td>{person.address}</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(person)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(person.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PersonManagement;
|
||||||
235
src/components/ProductManagement.js
Normal file
235
src/components/ProductManagement.js
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const ProductManagement = () => {
|
||||||
|
const [products, setProducts] = useState([
|
||||||
|
{ id: 1, name: 'لپتاپ ایسوس', code: 'LAP001', price: 15000000, unit: 'عدد', stock: 5 },
|
||||||
|
{ id: 2, name: 'موبایل سامسونگ', code: 'MOB002', price: 8000000, unit: 'عدد', stock: 12 },
|
||||||
|
{ id: 3, name: 'کتاب برنامهنویسی', code: 'BOK003', price: 150000, unit: 'جلد', stock: 25 }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingProduct, setEditingProduct] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
code: '',
|
||||||
|
price: '',
|
||||||
|
unit: 'عدد',
|
||||||
|
stock: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (editingProduct) {
|
||||||
|
// Update existing product
|
||||||
|
setProducts(products.map(product =>
|
||||||
|
product.id === editingProduct.id
|
||||||
|
? { ...product, ...formData, price: parseFloat(formData.price), stock: parseInt(formData.stock) }
|
||||||
|
: product
|
||||||
|
));
|
||||||
|
setEditingProduct(null);
|
||||||
|
} else {
|
||||||
|
// Add new product
|
||||||
|
const newProduct = {
|
||||||
|
id: Date.now(),
|
||||||
|
...formData,
|
||||||
|
price: parseFloat(formData.price),
|
||||||
|
stock: parseInt(formData.stock)
|
||||||
|
};
|
||||||
|
setProducts([...products, newProduct]);
|
||||||
|
}
|
||||||
|
setFormData({ name: '', code: '', price: '', unit: 'عدد', stock: '' });
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (product) => {
|
||||||
|
setEditingProduct(product);
|
||||||
|
setFormData({
|
||||||
|
...product,
|
||||||
|
price: product.price.toString(),
|
||||||
|
stock: product.stock.toString()
|
||||||
|
});
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این کالا اطمینان دارید؟')) {
|
||||||
|
setProducts(products.filter(product => product.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingProduct(null);
|
||||||
|
setFormData({ name: '', code: '', price: '', unit: 'عدد', stock: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">مدیریت کالاها</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
افزودن کالای جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingProduct ? 'ویرایش کالا' : 'افزودن کالای جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">نام کالا</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کد کالا</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="code"
|
||||||
|
value={formData.code}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">قیمت (ریال)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="price"
|
||||||
|
value={formData.price}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">واحد</label>
|
||||||
|
<select
|
||||||
|
name="unit"
|
||||||
|
value={formData.unit}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="عدد">عدد</option>
|
||||||
|
<option value="کیلوگرم">کیلوگرم</option>
|
||||||
|
<option value="متر">متر</option>
|
||||||
|
<option value="لیتر">لیتر</option>
|
||||||
|
<option value="بسته">بسته</option>
|
||||||
|
<option value="کارتن">کارتن</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">موجودی</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="stock"
|
||||||
|
value={formData.stock}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingProduct ? 'ویرایش' : 'افزودن'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Products Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>نام کالا</th>
|
||||||
|
<th>کد کالا</th>
|
||||||
|
<th>قیمت</th>
|
||||||
|
<th>واحد</th>
|
||||||
|
<th>موجودی</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{products.map(product => (
|
||||||
|
<tr key={product.id}>
|
||||||
|
<td>{product.name}</td>
|
||||||
|
<td>
|
||||||
|
<span className="bg-gray-100 px-2 py-1 rounded text-sm">
|
||||||
|
{product.code}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>{formatPrice(product.price)}</td>
|
||||||
|
<td>{product.unit}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${
|
||||||
|
product.stock > 10
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: product.stock > 0
|
||||||
|
? 'bg-yellow-100 text-yellow-800'
|
||||||
|
: 'bg-red-100 text-red-800'
|
||||||
|
}`}>
|
||||||
|
{product.stock}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(product)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(product.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProductManagement;
|
||||||
302
src/components/PurchaseManagement.js
Normal file
302
src/components/PurchaseManagement.js
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const PurchaseManagement = () => {
|
||||||
|
const [purchases, setPurchases] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '1403/01/15',
|
||||||
|
supplier: 'شرکت پارس',
|
||||||
|
product: 'لپتاپ ایسوس',
|
||||||
|
quantity: 2,
|
||||||
|
unitPrice: 15000000,
|
||||||
|
total: 30000000,
|
||||||
|
status: 'تایید شده'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '1403/01/14',
|
||||||
|
supplier: 'تامینکننده الف',
|
||||||
|
product: 'موبایل سامسونگ',
|
||||||
|
quantity: 5,
|
||||||
|
unitPrice: 8000000,
|
||||||
|
total: 40000000,
|
||||||
|
status: 'در انتظار'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingPurchase, setEditingPurchase] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
supplier: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
|
||||||
|
const suppliers = ['شرکت پارس', 'تامینکننده الف', 'تامینکننده ب'];
|
||||||
|
const products = ['لپتاپ ایسوس', 'موبایل سامسونگ', 'کتاب برنامهنویسی'];
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const total = parseFloat(formData.quantity) * parseFloat(formData.unitPrice);
|
||||||
|
|
||||||
|
if (editingPurchase) {
|
||||||
|
// Update existing purchase
|
||||||
|
setPurchases(purchases.map(purchase =>
|
||||||
|
purchase.id === editingPurchase.id
|
||||||
|
? {
|
||||||
|
...purchase,
|
||||||
|
...formData,
|
||||||
|
quantity: parseInt(formData.quantity),
|
||||||
|
unitPrice: parseFloat(formData.unitPrice),
|
||||||
|
total: total
|
||||||
|
}
|
||||||
|
: purchase
|
||||||
|
));
|
||||||
|
setEditingPurchase(null);
|
||||||
|
} else {
|
||||||
|
// Add new purchase
|
||||||
|
const newPurchase = {
|
||||||
|
id: Date.now(),
|
||||||
|
...formData,
|
||||||
|
quantity: parseInt(formData.quantity),
|
||||||
|
unitPrice: parseFloat(formData.unitPrice),
|
||||||
|
total: total
|
||||||
|
};
|
||||||
|
setPurchases([newPurchase, ...purchases]);
|
||||||
|
}
|
||||||
|
setFormData({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
supplier: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (purchase) => {
|
||||||
|
setEditingPurchase(purchase);
|
||||||
|
setFormData({
|
||||||
|
...purchase,
|
||||||
|
quantity: purchase.quantity.toString(),
|
||||||
|
unitPrice: purchase.unitPrice.toString()
|
||||||
|
});
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این خرید اطمینان دارید؟')) {
|
||||||
|
setPurchases(purchases.filter(purchase => purchase.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingPurchase(null);
|
||||||
|
setFormData({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
supplier: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'تایید شده':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'در انتظار':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'لغو شده':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">مدیریت خرید</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
ثبت خرید جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingPurchase ? 'ویرایش خرید' : 'ثبت خرید جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تاریخ</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="date"
|
||||||
|
value={formData.date}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تامینکننده</label>
|
||||||
|
<select
|
||||||
|
name="supplier"
|
||||||
|
value={formData.supplier}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{suppliers.map(supplier => (
|
||||||
|
<option key={supplier} value={supplier}>{supplier}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کالا</label>
|
||||||
|
<select
|
||||||
|
name="product"
|
||||||
|
value={formData.product}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{products.map(product => (
|
||||||
|
<option key={product} value={product}>{product}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تعداد</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="quantity"
|
||||||
|
value={formData.quantity}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">قیمت واحد (ریال)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="unitPrice"
|
||||||
|
value={formData.unitPrice}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">وضعیت</label>
|
||||||
|
<select
|
||||||
|
name="status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="در انتظار">در انتظار</option>
|
||||||
|
<option value="تایید شده">تایید شده</option>
|
||||||
|
<option value="لغو شده">لغو شده</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingPurchase ? 'ویرایش' : 'ثبت'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Purchases Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>تاریخ</th>
|
||||||
|
<th>تامینکننده</th>
|
||||||
|
<th>کالا</th>
|
||||||
|
<th>تعداد</th>
|
||||||
|
<th>قیمت واحد</th>
|
||||||
|
<th>مجموع</th>
|
||||||
|
<th>وضعیت</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{purchases.map(purchase => (
|
||||||
|
<tr key={purchase.id}>
|
||||||
|
<td>{purchase.date}</td>
|
||||||
|
<td>{purchase.supplier}</td>
|
||||||
|
<td>{purchase.product}</td>
|
||||||
|
<td>{purchase.quantity}</td>
|
||||||
|
<td>{formatPrice(purchase.unitPrice)}</td>
|
||||||
|
<td className="font-bold">{formatPrice(purchase.total)}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(purchase.status)}`}>
|
||||||
|
{purchase.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(purchase)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(purchase.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PurchaseManagement;
|
||||||
344
src/components/SalesManagement.js
Normal file
344
src/components/SalesManagement.js
Normal file
@@ -0,0 +1,344 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const SalesManagement = () => {
|
||||||
|
const [sales, setSales] = useState([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '1403/01/15',
|
||||||
|
customer: 'احمد محمدی',
|
||||||
|
product: 'لپتاپ ایسوس',
|
||||||
|
quantity: 1,
|
||||||
|
unitPrice: 16000000,
|
||||||
|
total: 16000000,
|
||||||
|
status: 'تایید شده'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '1403/01/14',
|
||||||
|
customer: 'فاطمه احمدی',
|
||||||
|
product: 'موبایل سامسونگ',
|
||||||
|
quantity: 2,
|
||||||
|
unitPrice: 8500000,
|
||||||
|
total: 17000000,
|
||||||
|
status: 'در انتظار'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingSale, setEditingSale] = useState(null);
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
customer: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
|
||||||
|
const customers = ['احمد محمدی', 'فاطمه احمدی', 'علی رضایی'];
|
||||||
|
const products = ['لپتاپ ایسوس', 'موبایل سامسونگ', 'کتاب برنامهنویسی'];
|
||||||
|
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const total = parseFloat(formData.quantity) * parseFloat(formData.unitPrice);
|
||||||
|
|
||||||
|
if (editingSale) {
|
||||||
|
// Update existing sale
|
||||||
|
setSales(sales.map(sale =>
|
||||||
|
sale.id === editingSale.id
|
||||||
|
? {
|
||||||
|
...sale,
|
||||||
|
...formData,
|
||||||
|
quantity: parseInt(formData.quantity),
|
||||||
|
unitPrice: parseFloat(formData.unitPrice),
|
||||||
|
total: total
|
||||||
|
}
|
||||||
|
: sale
|
||||||
|
));
|
||||||
|
setEditingSale(null);
|
||||||
|
} else {
|
||||||
|
// Add new sale
|
||||||
|
const newSale = {
|
||||||
|
id: Date.now(),
|
||||||
|
...formData,
|
||||||
|
quantity: parseInt(formData.quantity),
|
||||||
|
unitPrice: parseFloat(formData.unitPrice),
|
||||||
|
total: total
|
||||||
|
};
|
||||||
|
setSales([newSale, ...sales]);
|
||||||
|
}
|
||||||
|
setFormData({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
customer: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (sale) => {
|
||||||
|
setEditingSale(sale);
|
||||||
|
setFormData({
|
||||||
|
...sale,
|
||||||
|
quantity: sale.quantity.toString(),
|
||||||
|
unitPrice: sale.unitPrice.toString()
|
||||||
|
});
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
if (window.confirm('آیا از حذف این فروش اطمینان دارید؟')) {
|
||||||
|
setSales(sales.filter(sale => sale.id !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowForm(false);
|
||||||
|
setEditingSale(null);
|
||||||
|
setFormData({
|
||||||
|
date: new Date().toLocaleDateString('fa-IR'),
|
||||||
|
customer: '',
|
||||||
|
product: '',
|
||||||
|
quantity: '',
|
||||||
|
unitPrice: '',
|
||||||
|
status: 'در انتظار'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPrice = (price) => {
|
||||||
|
return new Intl.NumberFormat('fa-IR').format(price) + ' ریال';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'تایید شده':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'در انتظار':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'لغو شده':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate total sales
|
||||||
|
const totalSales = sales.reduce((sum, sale) => sum + sale.total, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="farsi-text">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">مدیریت فروش</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowForm(true)}
|
||||||
|
className="btn-primary"
|
||||||
|
>
|
||||||
|
ثبت فروش جدید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sales Summary */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-green-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
💰
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">کل فروش</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{formatPrice(totalSales)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-blue-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
📊
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">تعداد فروش</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{sales.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="bg-purple-500 rounded-full p-3 text-white text-2xl ml-4">
|
||||||
|
✅
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-600">فروش تایید شده</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{sales.filter(sale => sale.status === 'تایید شده').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Modal */}
|
||||||
|
{showForm && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||||
|
<h2 className="text-xl font-bold mb-4">
|
||||||
|
{editingSale ? 'ویرایش فروش' : 'ثبت فروش جدید'}
|
||||||
|
</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تاریخ</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="date"
|
||||||
|
value={formData.date}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">مشتری</label>
|
||||||
|
<select
|
||||||
|
name="customer"
|
||||||
|
value={formData.customer}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{customers.map(customer => (
|
||||||
|
<option key={customer} value={customer}>{customer}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">کالا</label>
|
||||||
|
<select
|
||||||
|
name="product"
|
||||||
|
value={formData.product}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
{products.map(product => (
|
||||||
|
<option key={product} value={product}>{product}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">تعداد</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="quantity"
|
||||||
|
value={formData.quantity}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">قیمت واحد (ریال)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="unitPrice"
|
||||||
|
value={formData.unitPrice}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label">وضعیت</label>
|
||||||
|
<select
|
||||||
|
name="status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="form-input"
|
||||||
|
>
|
||||||
|
<option value="در انتظار">در انتظار</option>
|
||||||
|
<option value="تایید شده">تایید شده</option>
|
||||||
|
<option value="لغو شده">لغو شده</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button type="submit" className="btn-success flex-1">
|
||||||
|
{editingSale ? 'ویرایش' : 'ثبت'}
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={handleCancel} className="btn-secondary flex-1">
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Sales Table */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>تاریخ</th>
|
||||||
|
<th>مشتری</th>
|
||||||
|
<th>کالا</th>
|
||||||
|
<th>تعداد</th>
|
||||||
|
<th>قیمت واحد</th>
|
||||||
|
<th>مجموع</th>
|
||||||
|
<th>وضعیت</th>
|
||||||
|
<th>عملیات</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{sales.map(sale => (
|
||||||
|
<tr key={sale.id}>
|
||||||
|
<td>{sale.date}</td>
|
||||||
|
<td>{sale.customer}</td>
|
||||||
|
<td>{sale.product}</td>
|
||||||
|
<td>{sale.quantity}</td>
|
||||||
|
<td>{formatPrice(sale.unitPrice)}</td>
|
||||||
|
<td className="font-bold">{formatPrice(sale.total)}</td>
|
||||||
|
<td>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(sale.status)}`}>
|
||||||
|
{sale.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="flex space-x-2 space-x-reverse">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(sale)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(sale.id)}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm"
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SalesManagement;
|
||||||
70
src/data/sampleInvoice.js
Normal file
70
src/data/sampleInvoice.js
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
// Sample invoice data for testing PDF generation
|
||||||
|
export const sampleInvoice = {
|
||||||
|
id: 1,
|
||||||
|
invoiceNumber: 'INV-001',
|
||||||
|
date: '1403/01/15',
|
||||||
|
customer: 'احمد محمدی',
|
||||||
|
customerAddress: 'تهران، خیابان ولیعصر، پلاک 456',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
product: 'لپتاپ ایسوس ROG',
|
||||||
|
quantity: 1,
|
||||||
|
unitPrice: 25000000,
|
||||||
|
total: 25000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: 'ماوس بیسیم Logitech',
|
||||||
|
quantity: 2,
|
||||||
|
unitPrice: 800000,
|
||||||
|
total: 1600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: 'کیبورد مکانیکی',
|
||||||
|
quantity: 1,
|
||||||
|
unitPrice: 1200000,
|
||||||
|
total: 1200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: 'مانیتور 27 اینچ',
|
||||||
|
quantity: 1,
|
||||||
|
unitPrice: 8000000,
|
||||||
|
total: 8000000
|
||||||
|
}
|
||||||
|
],
|
||||||
|
subtotal: 35800000,
|
||||||
|
tax: 3580000,
|
||||||
|
total: 39380000,
|
||||||
|
status: 'پرداخت شده'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const sampleInvoice2 = {
|
||||||
|
id: 2,
|
||||||
|
invoiceNumber: 'INV-002',
|
||||||
|
date: '1403/01/16',
|
||||||
|
customer: 'شرکت فناوری پارس',
|
||||||
|
customerAddress: 'اصفهان، خیابان چهارباغ، برج تجاری پارس',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
product: 'سرور HP ProLiant',
|
||||||
|
quantity: 2,
|
||||||
|
unitPrice: 45000000,
|
||||||
|
total: 90000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: 'سوئیچ شبکه 24 پورت',
|
||||||
|
quantity: 3,
|
||||||
|
unitPrice: 3500000,
|
||||||
|
total: 10500000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: 'کابل شبکه CAT6',
|
||||||
|
quantity: 100,
|
||||||
|
unitPrice: 50000,
|
||||||
|
total: 5000000
|
||||||
|
}
|
||||||
|
],
|
||||||
|
subtotal: 105500000,
|
||||||
|
tax: 10550000,
|
||||||
|
total: 116050000,
|
||||||
|
status: 'در انتظار پرداخت'
|
||||||
|
};
|
||||||
68
src/index.css
Normal file
68
src/index.css
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Vazir', Tahoma, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom styles for Farsi text */
|
||||||
|
.farsi-text {
|
||||||
|
font-family: 'Vazir', Tahoma, sans-serif;
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom button styles */
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
@apply bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
@apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form styles */
|
||||||
|
.form-input {
|
||||||
|
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card styles */
|
||||||
|
.card {
|
||||||
|
@apply bg-white shadow-md rounded-lg p-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table styles */
|
||||||
|
.table {
|
||||||
|
@apply w-full border-collapse border border-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
@apply bg-gray-100 border border-gray-300 px-4 py-2 text-right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td {
|
||||||
|
@apply border border-gray-300 px-4 py-2 text-right;
|
||||||
|
}
|
||||||
11
src/index.js
Normal file
11
src/index.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
17
tailwind.config.js
Normal file
17
tailwind.config.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
'farsi': ['Vazir', 'Tahoma', 'sans-serif'],
|
||||||
|
},
|
||||||
|
direction: {
|
||||||
|
'rtl': 'rtl',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user