Introduction & Setup

fleetyu/
├── public/
│   ├── documentation/
├── src/
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── data/
│   ├── hooks/
│   ├── layout/
│   ├── pages/
│   │   ├── app/
│   │   ├── auth/
│   │   ├── dashboard/
│   │   ├── error/
│   │   ├── icons/
│   │   ├── logistics/
│   │   ├── page/
│   │   └── ui/
│   ├── routes/
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

cd Fleetyu

npm install
  # or
  yarn install

npm run dev
  # or
  yarn dev

npm run build
  # or
  yarn build

@theme {
      /* Change your Primary Color here */
      --color-primary-50: #befdf0;
      --color-primary-100: #9cf9e3;
      --color-primary-200: #7af5d6;
      --color-primary-300: #58f1c9;
      --color-primary-400: #36edbc;
      --color-primary-500: #14e9af;
      --color-primary-600: #216d61;  /* Main Primary */
      --color-primary-700: #1b564d;
      --color-primary-800: #154039;
      --color-primary-900: #0e3c34;
  
      --color-primary: var(--color-primary-600);
  }

/* src/index.css */
  @import url('https://fonts.googleapis.com/css2?family=Your+Font+Name&display=swap');
  
  body {
    font-family: 'Your Font Name', sans-serif !important;
  }

// src/pages/reports/NewReport.jsx
  import React from 'react';
  
  const NewReport = () => {
    return (
      <div>
        <h1>New Report Page</h1>
        <p>Your content here</p>
      </div>
    );
  };
  
  export default NewReport;

import NewReport from '../pages/reports/NewReport';
  
  // Inside your Routes component
  <Route path="/new-report" element={<NewReport />} />

{
  "id": "new-report",
  "label": "New Report",
  "icon": "FaFileAlt",
  "link": "/new-report"
}

import Button from '../components/ui/Button';
  import Modal from '../components/ui/Modal';
  import Card from '../components/ui/Card';
  
  function MyPage() {
    return (
      <Card>
        <h2>My Page</h2>
        <Button variant="solid" color="primary">
          Click Me
        </Button>
      </Card>
    );
  }

import ReactApexChart from 'react-apexcharts';
  
  const series = [{
    name: "Shipments",
    data: [100, 40, 28, 51, 42, 109, 100] // Change this data
  }];
  
  const options = {
    chart: { 
      type: 'line',
      toolbar: { show: false }
    },
    colors: ['#027F80'],
    stroke: { curve: 'smooth', width: 3 },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    theme: {
      mode: 'dark' // or 'light'
    }
  };
  
  <ReactApexChart 
    options={options} 
    series={series} 
    type="line" 
    height={350} 
  />

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
  
  const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 },
    { name: 'Apr', value: 800 }
  ];
  
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="value" fill="#027F80" radius={[8, 8, 0, 0]} />
    </BarChart>
  </ResponsiveContainer>

import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  
  // Custom marker icon
  const markerIcon = L.icon({
    iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
    shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });
  
  const mapCenter = [12.9716, 77.5946]; // Bangalore coordinates
  
  <MapContainer 
    center={mapCenter} 
    zoom={12} 
    scrollWheelZoom={false}
    style={{ height: '400px', width: '100%' }}
  >
    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    
    {/* Add route line */}
    <Polyline 
      positions={[[12.9716, 77.5946], [12.985, 77.62]]} 
      pathOptions={{ color: '#027F80', weight: 4 }} 
    />
    
    {/* Add markers */}
    <Marker position={mapCenter} icon={markerIcon}>
      <Popup>Origin Location</Popup>
    </Marker>
    
    <Marker position={[12.985, 77.62]} icon={markerIcon}>
      <Popup>Destination</Popup>
    </Marker>
  </MapContainer>

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
  
  // Sample data
  const data = [
    { id: 1, name: 'Product A', stock: 100, status: 'In Stock' },
    { id: 2, name: 'Product B', stock: 50, status: 'Low Stock' },
    { id: 3, name: 'Product C', stock: 0, status: 'Out of Stock' }
  ];
  
  // Define columns
  const columns = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Product Name' },
    { accessorKey: 'stock', header: 'Stock Quantity' },
    { accessorKey: 'status', header: 'Status' }
  ];
  
  // Initialize table
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });
  
  // Render table
  <table className="table">
    <thead>
      {table.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(header => (
            <th key={header.id}>
              {flexRender(
                header.column.columnDef.header, 
                header.getContext()
              )}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody>
      {table.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>
              {flexRender(
                cell.column.columnDef.cell, 
                cell.getContext()
              )}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>