Phosphat Report v2

A Remix application for managing phosphat operations reports with authentication and dashboard.

• 📖 Remix docs

Development

Run the dev server:

npm run dev

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

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 already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.

Quick Start

1. Install dependencies:

npm install

2. Set up the database:

npx prisma generate
npx prisma db push
npx prisma db seed

3. Start the development server:

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

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