feat: initialize new project with Kanban dashboard and ledger
This commit is contained in:
Vivek
commit
1c5c195abc
26 changed files with 820 additions and 0 deletions
2
.env
Normal file
2
.env
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
VITE_SUPABASE_URL=http://supabasekong-fih38liv55125sbp2w17z2da.187.127.178.110.sslip.io
|
||||||
|
VITE_SUPABASE_ANON_KEY=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTc4MDg1ODgwMCwiZXhwIjo0OTM2NTMyNDAwLCJyb2xlIjoiYW5vbiJ9.zAIGJwSek9J4_GCYKTRqquFeiajBDAzChWBlidP3Ayk
|
||||||
35
Dockerfile
Normal file
35
Dockerfile
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
# Build stage
|
||||||
|
FROM node:18-alpine AS builder
|
||||||
|
|
||||||
|
# Install git (needed by some npm postinstall scripts)
|
||||||
|
RUN apk add --no-cache git
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package files
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
# Copy source files
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build the Vite production bundle
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production stage - tiny static server
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# Copy custom config (removes default, sets SPA fallback)
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Copy built assets
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Expose port (Coolify expects 80 by default)
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# Start nginx in foreground
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
53
README-COOLIFY.md
Normal file
53
README-COOLIFY.md
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
# Coolify Deployment Guide for Internal Freight App
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
- Supabase project URL & anon key (set in `.env`)
|
||||||
|
- Node.js >= 18 (handled via Docker build)
|
||||||
|
- Your VPS has Docker + Coolify installed
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
```
|
||||||
|
internal-freight-app/
|
||||||
|
├── Dockerfile # Docker build for Coolify
|
||||||
|
├── .dockerignore # Ignore unwanted files
|
||||||
|
├── .env.example # Environment variables template
|
||||||
|
├── nginx.conf # Nginx reverse proxy config (default Coolify)
|
||||||
|
├── vite.config.ts # Vite config (for asset handling)
|
||||||
|
├── src/
|
||||||
|
│ └── ... # React + TypeScript source
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployment Steps on Coolify
|
||||||
|
|
||||||
|
1. **Create Application in Coolify**
|
||||||
|
- Source: **Git Repository** → URL = `http://forgejo-vil3xyowqk0qsh4hiqy77e3h.187.127.178.110.sslip.io/iamcoolvivek007/internal-freight-app.git`
|
||||||
|
- Build Pack: **Dockerfile**
|
||||||
|
- Port: `5173` (Vite dev) or `3000` (if using a different server)
|
||||||
|
|
||||||
|
2. **Environment Variables**
|
||||||
|
- In **Coolify > Application > Environment**, set these:
|
||||||
|
- `VITE_SUPABASE_URL` = your Supabase project URL (e.g., `https://xyz.supabase.co`)
|
||||||
|
- `VITE_SUPABASE_ANON_KEY` = your Supabase anon/public key
|
||||||
|
|
||||||
|
3. **Deploy**
|
||||||
|
- Click **Save & Deploy**. Coolify will push every commit to main automatically (or via webhook).
|
||||||
|
|
||||||
|
4. **Database**
|
||||||
|
- Apply the Supabase schema from `supabase-schema.sql` in Supabase SQL Editor:
|
||||||
|
```sql
|
||||||
|
-- (schema content)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Local Development (Optional)
|
||||||
|
```bash
|
||||||
|
git clone <repo-url>
|
||||||
|
cp .env.example .env
|
||||||
|
# Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
- All data stored in Supabase (no local database required).
|
||||||
|
- For production, swap `npm run dev` with `npm run preview` or add a Nginx server in Coolify (Dockerfile handles this automatically).
|
||||||
9
README.md
Normal file
9
README.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# New Project
|
||||||
|
|
||||||
|
A new freight forwarding project.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
1. Clone the repo
|
||||||
|
2. Install dependencies
|
||||||
|
3. Run the project
|
||||||
12
index.html
Normal file
12
index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Freight Internal App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
nginx.conf
Normal file
13
nginx.conf
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
server {
|
||||||
|
listen 80 default_server;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss;
|
||||||
|
}
|
||||||
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "internal-freight-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@supabase/supabase-js": "^2.39.0",
|
||||||
|
"@tanstack/react-query": "^5.28.0",
|
||||||
|
"@tanstack/react-table": "^8.15.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.24",
|
||||||
|
"@types/react-dom": "^18.2.8",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"vite": "^5.2.0",
|
||||||
|
"typescript": "^5.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
13
public/index.html
Normal file
13
public/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>FreightDesk Internal</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
src/App.jsx
Normal file
36
src/App.jsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
|
||||||
|
import Dashboard from './components/Dashboard.jsx'
|
||||||
|
import Kanban from './components/Kanban.jsx'
|
||||||
|
import Shippers from './components/Shippers.jsx'
|
||||||
|
import Drivers from './components/Drivers.jsx'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
<header className="bg-white shadow">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">FreightDesk Internal</h1>
|
||||||
|
<nav className="mt-2 flex space-x-4">
|
||||||
|
<Link to="/" className="text-blue-600 hover:underline">Dashboard</Link>
|
||||||
|
<Link to="/kanban" className="text-blue-600 hover:underline">Loads Board</Link>
|
||||||
|
<Link to="/shippers" className="text-blue-600 hover:underline">Shippers</Link>
|
||||||
|
<Link to="/drivers" className="text-blue-600 hover:underline">Drivers</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main className="max-w-7xl mx-auto p-4">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/kanban" element={<Kanban />} />
|
||||||
|
<Route path="/shippers" element={<Shippers />} />
|
||||||
|
<Route path="/drivers" element={<Drivers />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
10
src/App.tsx
Normal file
10
src/App.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import LoadTable from './components/LoadTable';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<div className="p-4">
|
||||||
|
<h1 className="text-2xl font-bold mb-4">Freight Desk - Internal App</h1>
|
||||||
|
<LoadTable />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
src/components/Dashboard.jsx
Normal file
92
src/components/Dashboard.jsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { supabase } from '../services/supabase.js'
|
||||||
|
|
||||||
|
function Dashboard() {
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
totalLoads: 0,
|
||||||
|
pendingLoads: 0,
|
||||||
|
totalCommission: 0,
|
||||||
|
pendingFromShipper: 0,
|
||||||
|
pendingToDriver: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Fetch stats from Supabase
|
||||||
|
const fetchStats = async () => {
|
||||||
|
try {
|
||||||
|
// Total loads
|
||||||
|
const { count: totalLoads } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('*', { count: 'exact', head: true })
|
||||||
|
|
||||||
|
// Pending loads (not settled)
|
||||||
|
const { count: pendingLoads } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('*', { count: 'exact', head: true })
|
||||||
|
.neq('status', 'settled')
|
||||||
|
|
||||||
|
// Sum of commission
|
||||||
|
const { data: commissionData } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('commission')
|
||||||
|
|
||||||
|
const totalCommission = commissionData?.reduce((sum, l) => sum + (parseFloat(l.commission) || 0), 0) || 0
|
||||||
|
|
||||||
|
// Sum of pending_from_shipper
|
||||||
|
const { data: pendingShipperData } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('pending_from_shipper')
|
||||||
|
|
||||||
|
const pendingFromShipper = pendingShipperData?.reduce((sum, l) => sum + (parseFloat(l.pending_from_shipper) || 0), 0) || 0
|
||||||
|
|
||||||
|
// Sum of pending_to_driver
|
||||||
|
const { data: pendingDriverData } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('pending_to_driver')
|
||||||
|
|
||||||
|
const pendingToDriver = pendingDriverData?.reduce((sum, l) => sum + (parseFloat(l.pending_to_driver) || 0), 0) || 0
|
||||||
|
|
||||||
|
setStats({
|
||||||
|
totalLoads: totalLoads || 0,
|
||||||
|
pendingLoads: pendingLoads || 0,
|
||||||
|
totalCommission,
|
||||||
|
pendingFromShipper,
|
||||||
|
pendingToDriver
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching stats:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchStats()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h2 className="text-xl font-semibold">Dashboard</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||||
|
<StatCard title="Total Loads" value={stats.totalLoads} icon="📦" />
|
||||||
|
<StatCard title="Pending Loads" value={stats.pendingLoads} icon="⏳" />
|
||||||
|
<StatCard title="Total Commission" value={`₹${stats.totalCommission.toLocaleString()}`} icon="💰" />
|
||||||
|
<StatCard title="Pending from Shipper" value={`₹${stats.pendingFromShipper.toLocaleString()}`} icon="📥" />
|
||||||
|
<StatCard title="Pending to Driver" value={`₹${stats.pendingToDriver.toLocaleString()}`} icon="📤" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({ title, value, icon }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-500">{title}</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 mt-1">{value}</p>
|
||||||
|
</div>
|
||||||
|
<span className="text-3xl">{icon}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Dashboard
|
||||||
58
src/components/Drivers.jsx
Normal file
58
src/components/Drivers.jsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { supabase } from '../services/supabase.js'
|
||||||
|
|
||||||
|
function Drivers() {
|
||||||
|
const [drivers, setDrivers] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchDrivers = async () => {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('drivers')
|
||||||
|
.select('*')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
setDrivers(data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching drivers:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchDrivers()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center py-8">Loading drivers...</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Drivers</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{drivers.length > 0 ? (
|
||||||
|
drivers.map(driver => (
|
||||||
|
<DriverCard key={driver.id} driver={driver} />
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 col-span-full">No drivers found. Add your first driver!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DriverCard({ driver }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
|
||||||
|
<div className="font-semibold">{driver.name}</div>
|
||||||
|
<div className="text-sm text-gray-600">Vehicle: {driver.vehicle_number || 'N/A'}</div>
|
||||||
|
<div className="text-sm text-gray-600">Contact: {driver.contact || 'N/A'}</div>
|
||||||
|
<div className="text-sm text-gray-600">Total Earnings: ₹{driver.total_earnings?.toLocaleString() || '0'}</div>
|
||||||
|
<div className="text-sm text-gray-600">Pending Payments: ₹{driver.pending_payments?.toLocaleString() || '0'}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Drivers
|
||||||
116
src/components/Kanban.jsx
Normal file
116
src/components/Kanban.jsx
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { supabase } from '../services/supabase.js'
|
||||||
|
|
||||||
|
const STATUS_COLUMNS = [
|
||||||
|
{ id: 'pending', title: 'Pending', color: 'bg-gray-200' },
|
||||||
|
{ id: 'assigned', title: 'Assigned', color: 'bg-blue-200' },
|
||||||
|
{ id: 'loaded', title: 'Loaded / In Transit', color: 'bg-yellow-200' },
|
||||||
|
{ id: 'delivered', title: 'Delivered', color: 'bg-green-200' },
|
||||||
|
{ id: 'settled', title: 'Settled', color: 'bg-purple-200' }
|
||||||
|
]
|
||||||
|
|
||||||
|
function Kanban() {
|
||||||
|
const [loads, setLoads] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLoads = async () => {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('*')
|
||||||
|
.order('date', { ascending: false })
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
setLoads(data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching loads:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchLoads()
|
||||||
|
|
||||||
|
// Subscribe to real-time updates
|
||||||
|
const subscription = supabase
|
||||||
|
.from('loads')
|
||||||
|
.on('*', (payload) => {
|
||||||
|
setLoads(prev => {
|
||||||
|
const updated = prev.filter(l => l.id !== payload.new.id)
|
||||||
|
return [...updated, payload.new]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.subscribe()
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
subscription.unsubscribe()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleStatusChange = async (loadId, newStatus) => {
|
||||||
|
try {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.update({ status: newStatus })
|
||||||
|
.eq('id', loadId)
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating status:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center py-8">Loading loads...</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Loads Board</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||||
|
{STATUS_COLUMNS.map((column) => (
|
||||||
|
<div key={column.id} className={`rounded-lg p-4 ${column.color}`}>
|
||||||
|
<h3 className="font-semibold mb-3">{column.title}</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{loads
|
||||||
|
.filter(load =>
|
||||||
|
column.id === 'pending'
|
||||||
|
? load.status === 'pending lead' || load.status === 'pending collection'
|
||||||
|
: column.id === 'assigned'
|
||||||
|
? load.status === 'assigned vehicle'
|
||||||
|
: column.id === 'loaded'
|
||||||
|
? load.status === 'loaded / in transit'
|
||||||
|
: column.id === 'delivered'
|
||||||
|
? load.status === 'delivered'
|
||||||
|
: load.status === 'settled'
|
||||||
|
)
|
||||||
|
.map(load => (
|
||||||
|
<LoadCard
|
||||||
|
key={load.id}
|
||||||
|
load={load}
|
||||||
|
onStatusChange={handleStatusChange}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function LoadCard({ load, onStatusChange }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-3 cursor-move">
|
||||||
|
<div className="font-medium text-sm">{load.shipper || load.id}</div>
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
{load.from} → {load.to}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-700 mt-1">
|
||||||
|
₹{parseFloat(load.freight_charged || 0).toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Kanban
|
||||||
0
src/components/LoadForm.tsx
Normal file
0
src/components/LoadForm.tsx
Normal file
10
src/components/LoadTable.tsx
Normal file
10
src/components/LoadTable.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function LoadTable() {
|
||||||
|
return (
|
||||||
|
<div className="p-6 border rounded-md shadow-sm">
|
||||||
|
<h2 className="text-lg font-semibold mb-4">Freight Loads</h2>
|
||||||
|
<p className="text-gray-600">Data will load from Supabase</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
102
src/components/Payments.jsx
Normal file
102
src/components/Payments.jsx
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { supabase } from '../services/supabase.js'
|
||||||
|
|
||||||
|
function Payments() {
|
||||||
|
const [payments, setPayments] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchPayments = async () => {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('loads')
|
||||||
|
.select('*')
|
||||||
|
.neq('status', 'pending lead')
|
||||||
|
.neq('status', 'available vehicle')
|
||||||
|
.order('date', { ascending: false })
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
setPayments(data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching payments:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchPayments()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const totalAdvance = payments.reduce((sum, p) => sum + (parseFloat(p.advance_received) || 0), 0)
|
||||||
|
const totalPaidToDriver = payments.reduce((sum, p) => sum + (parseFloat(p.paid_to_driver) || 0), 0)
|
||||||
|
const totalPendingShipper = payments.reduce((sum, p) => sum + (parseFloat(p.pending_from_shipper) || 0), 0)
|
||||||
|
const totalPendingDriver = payments.reduce((sum, p) => sum + (parseFloat(p.pending_to_driver) || 0), 0)
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center py-8">Loading payments...</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Payments</h2>
|
||||||
|
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-sm text-gray-500">Total Advance Received</div>
|
||||||
|
<div className="text-2xl font-bold text-green-600">₹{totalAdvance.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-sm text-gray-500">Paid to Drivers</div>
|
||||||
|
<div className="text-2xl font-bold text-red-600">₹{totalPaidToDriver.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-sm text-gray-500">Pending from Shipper</div>
|
||||||
|
<div className="text-2xl font-bold text-yellow-600">₹{totalPendingShipper.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="text-sm text-gray-500">Pending to Driver</div>
|
||||||
|
<div className="text-2xl font-bold text-purple-600">₹{totalPendingDriver.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Table */}
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Shipper</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Route</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Freight</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Advance</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Paid to Driver</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-200">
|
||||||
|
{payments.map(payment => (
|
||||||
|
<tr key={payment.id}>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">{payment.date || 'N/A'}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">{payment.shipper || payment.id}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">{payment.from} → {payment.to}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">₹{parseFloat(payment.freight_charged || 0).toLocaleString()}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">₹{parseFloat(payment.advance_received || 0).toLocaleString()}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">₹{parseFloat(payment.paid_to_driver || 0).toLocaleString()}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span className={`inline-flex px-2 py-1 text-xs rounded-full ${
|
||||||
|
payment.status === 'settled' ? 'bg-green-100 text-green-800' :
|
||||||
|
payment.status === 'pending collection' ? 'bg-yellow-100 text-yellow-800' :
|
||||||
|
'bg-gray-100 text-gray-800'
|
||||||
|
}`}>
|
||||||
|
{payment.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Payments
|
||||||
130
src/components/Shippers.jsx
Normal file
130
src/components/Shippers.jsx
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { supabase } from '../services/supabase.js'
|
||||||
|
|
||||||
|
function Shippers() {
|
||||||
|
const [shippers, setShippers] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [newShipper, setNewShipper] = useState({
|
||||||
|
name: '',
|
||||||
|
contact: '',
|
||||||
|
email: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchShippers = async () => {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('shippers')
|
||||||
|
.select('*')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
setShippers(data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching shippers:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchShippers()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('shippers')
|
||||||
|
.insert([newShipper])
|
||||||
|
|
||||||
|
if (error) throw error
|
||||||
|
|
||||||
|
// Refresh list
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('shippers')
|
||||||
|
.select('*')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
|
||||||
|
setShippers(data || [])
|
||||||
|
setNewShipper({ name: '', contact: '', email: '' })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding shipper:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) return <div className="text-center py-8">Loading shippers...</div>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h2 className="text-xl font-semibold">Shippers</h2>
|
||||||
|
|
||||||
|
{/* Add Shipper Form */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newShipper.name}
|
||||||
|
onChange={(e) => setNewShipper({ ...newShipper, name: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Contact</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={newShipper.contact}
|
||||||
|
onChange={(e) => setNewShipper({ ...newShipper, contact: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={newShipper.email}
|
||||||
|
onChange={(e) => setNewShipper({ ...newShipper, email: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Add Shipper
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Shippers List */}
|
||||||
|
<div>
|
||||||
|
{shippers.length > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{shippers.map(shipper => (
|
||||||
|
<ShipperCard key={shipper.id} shipper={shipper} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500">No shippers found. Add your first shipper above!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ShipperCard({ shipper }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
|
||||||
|
<div className="font-semibold">{shipper.name}</div>
|
||||||
|
<div className="text-sm text-gray-600">Contact: {shipper.contact}</div>
|
||||||
|
<div className="text-sm text-gray-600">Email: {shipper.email || 'N/A'}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Shippers
|
||||||
3
src/index.css
Normal file
3
src/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
6
src/lib/supabase.ts
Normal file
6
src/lib/supabase.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createClient } from '@supabase/supabase-js';
|
||||||
|
|
||||||
|
export const supabase = createClient(
|
||||||
|
process.env.VITE_SUPABASE_URL as string,
|
||||||
|
process.env.VITE_SUPABASE_ANON_KEY as string
|
||||||
|
);
|
||||||
9
src/main.jsx
Normal file
9
src/main.jsx
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
)
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
6
src/services/supabase.js
Normal file
6
src/services/supabase.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createClient } from '@supabase/supabase-js'
|
||||||
|
|
||||||
|
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
|
||||||
|
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY
|
||||||
|
|
||||||
|
export const supabase = createClient(supabaseUrl, supabaseKey)
|
||||||
48
src/types/index.ts
Normal file
48
src/types/index.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
export interface Load {
|
||||||
|
id: string;
|
||||||
|
date: string | null;
|
||||||
|
status: string;
|
||||||
|
vehicle: string | null;
|
||||||
|
from: string | null;
|
||||||
|
via: string | null;
|
||||||
|
to: string | null;
|
||||||
|
shipper: string | null;
|
||||||
|
load_type: string | null;
|
||||||
|
item: string | null;
|
||||||
|
deliveries: string | null;
|
||||||
|
freight_charged: number | null;
|
||||||
|
advance_received: number | null;
|
||||||
|
paid_to_driver: number | null;
|
||||||
|
commission: number | null;
|
||||||
|
driver_freight: number | null;
|
||||||
|
pending_from_shipper: number | null;
|
||||||
|
pending_to_driver: number | null;
|
||||||
|
notes: string | null;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type LoadFormData = Omit<Load, 'id' | 'created_at' | 'updated_at'>;
|
||||||
|
|
||||||
|
export const STATUS_OPTIONS = [
|
||||||
|
'settled',
|
||||||
|
'commission received',
|
||||||
|
'commission adjusted',
|
||||||
|
'commission due',
|
||||||
|
'pending collection',
|
||||||
|
'partially pending',
|
||||||
|
'fully pending from shipper',
|
||||||
|
'assigned vehicle',
|
||||||
|
'loaded / in transit',
|
||||||
|
'partial',
|
||||||
|
'available vehicle',
|
||||||
|
'pending lead',
|
||||||
|
'handled directly by shipper',
|
||||||
|
'reconciled',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const LOAD_TYPE_OPTIONS = [
|
||||||
|
'Full load',
|
||||||
|
'Part load',
|
||||||
|
'Mixed / multi-drop',
|
||||||
|
] as const;
|
||||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue