دفترچه تلفن آنلاین شرکت فراپخت ☎️

این پروژه یک وب‌اپلیکیشن مدرن برای مدیریت و جستجوی سریع اطلاعات پرسنل شرکت فراپخت است. برنامه با رویکرد Progressive Web App (PWA) طراحی شده تا تجربه‌ای شبیه به اپلیکیشن‌های موبایل را ارائه دهد و دسترسی به اطلاعات پرسنلی و شماره‌های ویپ را در هر زمان و مکان فراهم کند.

لینک پروژه آنلاین: https://fa-phone.vercel.app/

🌟 ویژگی‌های کلیدی

• جستجوی هوشمند و فیلتر: امکان جستجوی پرسنل بر اساس نام (فارسی و انگلیسی)، کد پرسنلی و شماره ویپ با فیلترهای پیشرفته بر اساس پروژه، بخش و سمت.
• قابلیت PWA: نصب برنامه به صورت یک اپلیکیشن مستقل بر روی دستگاه‌های مختلف (موبایل، دسکتاپ) برای دسترسی آسان.
• سیستم تماس ویپ: قابلیت برقراری تماس مستقیم از طریق مرورگر یا اپلیکیشن‌های خارجی (مانند PortSIP و Zoiper) با شماره‌های ویپ تنها با یک کلیک.
• پنل مدیریت قدرتمند: یک رابط کاربری کامل و امن برای مدیران جهت مدیریت اطلاعات پرسنل، بارگذاری گروهی داده‌ها از طریق فایل‌های اکسل، و نظارت بر امنیت سیستم.
• مدیریت داده‌ها: امکان افزودن، ویرایش و حذف اطلاعات پرسنل به صورت فردی یا گروهی.
• پشتیبان‌گیری و بازیابی: قابلیت تهیه نسخه پشتیبان کامل از تمام داده‌ها و تنظیمات.

💻 فناوری‌های استفاده شده

این پروژه با استفاده از جدیدترین تکنولوژی‌های وب توسعه یافته است:

• فریم‌ورک: Next.js (نسخه 15)
• کتابخانه‌ها: React (نسخه 19) برای رابط کاربری
• استایلینگ: Tailwind CSS (نسخه 4.1.9)
• زبان برنامه‌نویسی: TypeScript
• کامپوننت‌های UI: Shadcn/UI و Radix UI
• اعتبارسنجی: Zod
• فرم‌ها: React Hook Form
• پایگاه داده: PostgreSQL
• محل استقرار: Vercel

📂 ساختار پروژه

ساختار فایل‌ها و پوشه‌ها به صورت منطقی و قابل مقیاس‌گذاری سازماندهی شده است:

.
├── app/                  # صفحات و روت‌های اصلی برنامه (App Router)
│   ├── page.tsx          # صفحه اصلی و رابط کاربری جستجو
│   └── globals.css       # فایل اصلی استایل‌های Tailwind
├── components/           # کامپوننت‌های قابل استفاده مجدد UI
│   ├── ui/               # کامپوننت‌های Shadcn/UI
│   ├── admin-panel.tsx   # پنل مدیریت
│   ├── excel-import-export.tsx # مدیریت فایل‌های اکسل
│   └── ...
├── lib/                  # منطق اصلی و توابع کمکی
│   ├── auth.ts           # مدیریت احراز هویت
│   ├── database.ts       # ارتباط با پایگاه داده PostgreSQL
│   ├── personnel-data.ts # توابع CRUD برای پرسنل
│   ├── call-manager.ts   # مدیریت تماس‌های ویپ
│   └── utils.ts          # توابع عمومی (مانند تبدیل اعداد)
├── public/               # فایل‌های استاتیک (تصاویر، آیکون‌ها)
├── setup-database.js     # اسکریپت راه‌اندازی و پر کردن اولیه دیتابیس
├── .env.local            # فایل تنظیمات محیطی (credential دیتابیس)
├── next.config.mjs       # فایل تنظیمات Next.js
└── package.json          # لیست وابستگی‌ها و اسکریپت‌ها

🚀 نصب و راه‌اندازی پروژه

برای اجرای این پروژه، شما باید Node.js و PostgreSQL را روی سیستم خود نصب داشته باشید.

۱. راه‌اندازی پایگاه داده

1. یک دیتابیس PostgreSQL جدید ایجاد کنید.
2. فایل .env.local را در ریشه پروژه ایجاد کرده و اطلاعات اتصال به دیتابیس را به صورت زیر در آن وارد کنید:

DATABASE_URL="postgresql://[USER]:[PASSWORD]@[HOST]:[PORT]/[DATABASE_NAME]"

3. اسکریپت setup-database.js را برای ایجاد جداول و ورود داده‌های اولیه اجرا کنید:

node setup-database.js

پس از اتمام موفقیت‌آمیز، پایگاه داده شما با داده‌های پیش‌فرض پر می‌شود.

۲. نصب وابستگی‌ها

1. به دلیل استفاده از pnpm در پروژه، ابتدا این پکیج منیجر را نصب کنید:

npm install -g pnpm

2. وابستگی‌های پروژه را نصب کنید:

pnpm install

۳. اجرای برنامه

پروژه را در حالت توسعه (Development) اجرا کنید:

pnpm dev

برنامه در آدرس http://localhost:3000 قابل دسترس خواهد بود.

🔐 ورود به پنل مدیریت

برای دسترسی به قابلیت‌های مدیریت و وارد کردن/صادر کردن داده‌ها، از حساب کاربری پیش‌فرض استفاده کنید:

• نام کاربری: admin
• رمز عبور: admin

نکته مهم: برای امنیت بیشتر، پس از اولین ورود، رمز عبور پیش‌فرض را از طریق بخش تنظیمات در پنل مدیریت تغییر دهید.

📞 راهنمای استفاده از قابلیت تماس ویپ

برنامه به صورت هوشمند تلاش می‌کند تا با استفاده از پروتکل‌های مختلف، تماس را با اپلیکیشن ویپ شما (مانند PortSIP) برقرار کند. کافی است روی شماره ویپ پرسنل مورد نظر کلیک کنید.