159 lines
3.6 KiB
Markdown
159 lines
3.6 KiB
Markdown
# Phosphat Report v2
|
|
|
|
A Remix application for managing phosphat operations reports with authentication and dashboard.
|
|
|
|
- 📖 [Remix docs](https://remix.run/docs)
|
|
|
|
## Development
|
|
|
|
Run the dev server:
|
|
|
|
```sh
|
|
npm run dev
|
|
```
|
|
|
|
## Deployment
|
|
|
|
First, build your app for production:
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
Then run the app in production mode:
|
|
|
|
```sh
|
|
npm start
|
|
```
|
|
|
|
Now you'll need to pick a host to deploy it to.
|
|
|
|
### DIY
|
|
|
|
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
|
|
|
|
Make sure to deploy the output of `npm run build`
|
|
|
|
- `build/server`
|
|
- `build/client`
|
|
|
|
## Styling
|
|
|
|
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
|
|
|
|
## Quick Start
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Set up the database:
|
|
```bash
|
|
npx prisma generate
|
|
npx prisma db push
|
|
npx prisma db seed
|
|
```
|
|
|
|
3. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open your browser to `http://localhost:5173`
|
|
|
|
## Default Login
|
|
|
|
After seeding, you can login with:
|
|
- **Username:** admin
|
|
- **Password:** password123
|
|
- **Auth Level:** 3 (Super Admin - Full access)
|
|
|
|
## Authentication Levels
|
|
|
|
- **Level 1:** User access (basic functionality)
|
|
- **Level 2:** Admin access (can view dashboard, reports, equipment, management pages)
|
|
- **Level 3:** Super Admin access (full system access including admin panel)
|
|
|
|
## Features
|
|
|
|
- ✅ User authentication (sign up/sign in)
|
|
- ✅ Role-based access control
|
|
- ✅ Dashboard with statistics
|
|
- ✅ Responsive design with Tailwind CSS
|
|
- ✅ SQLite database with Prisma ORM
|
|
- ✅ Session management
|
|
- ✅ Password hashing with bcrypt
|
|
- ✅ Email functionality with SMTP configuration
|
|
- ✅ Mail settings management (Auth Level 3 only)
|
|
|
|
## Database Schema
|
|
|
|
The application includes models for:
|
|
- Employees (users with auth levels)
|
|
- Reports (main data entity)
|
|
- Areas (Petra, Jarash, Rum)
|
|
- DredgerLocations (with classes s, d, sp)
|
|
- ReclamationLocations (Eastern/Western Shoreline)
|
|
- Foreman
|
|
- Equipment
|
|
- MailSettings (SMTP configuration)
|
|
|
|
## Email Functionality
|
|
|
|
The application includes email functionality using Nodemailer:
|
|
|
|
### Mail Settings (Auth Level 3 Required)
|
|
- Configure SMTP settings via `/mail-settings` route
|
|
- Test email connection
|
|
- Secure password storage
|
|
|
|
### Using the Mail Utility
|
|
|
|
```typescript
|
|
import { sendNotificationEmail, sendReportEmail } from "~/utils/mail.server";
|
|
|
|
// Send a simple notification
|
|
const result = await sendNotificationEmail(
|
|
"user@example.com",
|
|
"Report Generated",
|
|
"Your report has been generated successfully."
|
|
);
|
|
|
|
// Send HTML email
|
|
const htmlResult = await sendNotificationEmail(
|
|
["user1@example.com", "user2@example.com"],
|
|
"Weekly Report",
|
|
"<h1>Weekly Report</h1><p>Please find the report attached.</p>",
|
|
true // isHtml
|
|
);
|
|
|
|
// Send report with attachments
|
|
const reportResult = await sendReportEmail(
|
|
"manager@example.com",
|
|
"Daily Operations Report",
|
|
reportData,
|
|
[
|
|
{
|
|
filename: "report.pdf",
|
|
content: pdfBuffer,
|
|
contentType: "application/pdf"
|
|
}
|
|
]
|
|
);
|
|
```
|
|
|
|
### Available Mail Functions
|
|
- `sendEmail(options)` - Core email sending function
|
|
- `sendNotificationEmail(to, subject, message, isHtml)` - Simple notifications
|
|
- `sendReportEmail(to, subject, reportData, attachments)` - Reports with attachments
|
|
- `testEmailConnection()` - Test SMTP configuration
|
|
|
|
## Development
|
|
|
|
The app uses:
|
|
- **Remix** - Full-stack web framework
|
|
- **Prisma** - Database ORM
|
|
- **SQLite** - Database
|
|
- **Tailwind CSS** - Styling
|
|
- **TypeScript** - Type safety |