COSMA DAILY LOG - Equipment Status Tracking System

A professional equipment tracking application built with Next.js, Tailwind CSS, and MySQL. Monitor equipment status, activities, and operational events with a modern, responsive interface and robust database storage.

Features

• Equipment Log Entries: Create detailed equipment logs with UTC datetime, equipment type, status, and notes
• Equipment Tracking: Visual equipment selection with icons and color-coded indicators
• Status Management: Pre-defined status options with custom status support
• UTC Time Support: All timestamps are stored and displayed in UTC
• Database Storage: MySQL database for persistent data storage
• Review Log Page: Date-based log review with table view
• Dark/Light Mode: Toggle between dark and light themes
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Professional UI: Clean, modern interface with smooth animations and transitions

Equipment Types

• 🏢 Base: Base station equipment
• 🤖 AUV: Autonomous Underwater Vehicle
• 🚤 USV: Unmanned Surface Vehicle
• 🖥️ C2: Command and Control systems
• 🔧 Other: Other equipment types

Status Options

• Started: Equipment has been started
• Launched: Equipment has been launched
• Out of water: Equipment is out of water
• Arrived on site: Equipment has arrived at the site
• Left port: Equipment has left the port
• Beginning of capture: Beginning of data capture
• End of capture: End of data capture
• Communication problem: Communication issues
• Mechanical problem: Mechanical issues
• Code problem: Software/code issues

Prerequisites

• Node.js 18+
• MySQL 8.0+ or MariaDB 10.5+
• npm or yarn

Installation & Setup

1. Clone and Install Dependencies

git clone <repository-url>
cd daily
npm install

2. Database Setup

Option A: Automatic Setup (Recommended)

1. Create a .env.local file in the project root:

# Database Configuration
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=cosma_daily_log

2. Run the database setup script:

npm run setup-db

This will automatically:

• Create the database
• Create all necessary tables
• Insert sample data
• Test the connection

Option B: Manual Setup

1. Create the database manually:

CREATE DATABASE cosma_daily_log;

2. Import the schema:

mysql -u root -p cosma_daily_log < database/schema.sql

3. Start the Application

npm run dev

4. Open http://localhost:3000 in your browser.

Database Schema

The application uses a MySQL database with the following structure:

Tables

• log_entries: Main log entries with datetime, equipment, notes, and timestamp
• log_status: Status entries linked to log entries (many-to-many relationship)

Key Features

• UTC DateTime Storage: All timestamps stored in UTC format
• Equipment Enum: Restricted equipment types for data integrity
• Indexed Queries: Optimized for date-based queries
• Cascade Deletes: Automatic cleanup of related status entries
• Sample Data: Pre-loaded with example entries for testing

Usage

Creating a New Entry

1. Click the "New Entry" button in the header
2. Select the date and time in UTC
3. Choose the equipment type from the available options
4. Add status by clicking on the status buttons or typing custom status
5. Write optional notes about the equipment status or activities
6. Click "Save Entry" to save your log

Reviewing Logs

1. Click "Review Log" button in the header
2. Select a date using the date picker
3. View all entries for that date in a table format
4. Use "Back to Log" to return to the main page

Managing Entries

• View all your entries in chronological order
• Delete entries using the delete button on each entry
• Toggle between dark and light mode using the theme button

API Endpoints

The application provides RESTful API endpoints:

• GET /api/logs - Get all log entries
• POST /api/logs - Create new log entry
• GET /api/logs/[id] - Get specific log entry
• DELETE /api/logs/[id] - Delete log entry
• GET /api/logs/date/[date] - Get logs by date

Technology Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS 4
• Language: TypeScript
• Database: MySQL 8.0+ with mysql2 driver
• Icons: Heroicons (SVG)
• Font: Inter (Google Fonts)

Project Structure

daily/
├── app/
│   ├── api/                    # API routes
│   │   ├── logs/              # Log endpoints
│   │   └── logs/date/         # Date-based queries
│   ├── components/            # React components
│   │   ├── Header.tsx         # Application header
│   │   ├── DailyLogEntry.tsx  # Form for creating entries
│   │   └── LogList.tsx        # Display list of entries
│   ├── review/                # Review log page
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Main application page
├── database/
│   └── schema.sql             # MySQL database schema
├── lib/
│   └── database.ts            # Database configuration
├── scripts/
│   └── setup-database.js      # Database setup script
├── public/                    # Static assets
├── package.json               # Dependencies and scripts
└── README.md                  # This file

Customization

Adding New Equipment Types

Edit the equipmentOptions array in app/components/DailyLogEntry.tsx:

const equipmentOptions = [
  { value: 'base', label: '🏢 Base', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' },
  // Add your custom equipment types here
];

Modifying Status Options

Update the activityOptions array in app/components/DailyLogEntry.tsx:

const activityOptions = [
  'Started', 'Launched', 'Out of water', 'Arrived on site', 'Left port', 
  'Beginning of capture', 'End of capture', 'Communication problem', 'Mechanical problem', 'Code problem',
  'Your New Status' // Add your custom status options here
];

Database Configuration

Modify the database settings in lib/database.ts or use environment variables:

DB_HOST=your_mysql_host
DB_PORT=3306
DB_USER=your_mysql_user
DB_PASSWORD=your_mysql_password
DB_NAME=cosma_daily_log

Troubleshooting

Database Connection Issues

1. Connection Refused: Ensure MySQL is running

   # Ubuntu/Debian
   sudo systemctl start mysql
   
   # macOS
   brew services start mysql
   
   # Windows
   net start mysql

2. Access Denied: Check user permissions

   GRANT ALL PRIVILEGES ON cosma_daily_log.* TO 'your_user'@'localhost';
   FLUSH PRIVILEGES;

3. Database Not Found: Run the setup script

   npm run setup-db

Application Issues

1. Port Already in Use: Change the port

   npm run dev -- -p 3001

2. Build Errors: Clear cache and reinstall

   rm -rf node_modules .next
   npm install

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

Note: For production deployment, ensure your MySQL database is accessible from your hosting platform.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

If you encounter any issues or have questions, please open an issue on GitHub.

---

Built with ❤️ using Next.js, Tailwind CSS, and MySQL