Add sales tracking system with customers, analytics, and inventory management
All checks were successful
Deploy / deploy (push) Successful in 2m26s
All checks were successful
Deploy / deploy (push) Successful in 2m26s
- Add customers table (021) and sales/sale_items tables (022) migrations - Add customer CRUD, sale CRUD (transactional with auto inventory decrement/restore), and analytics API endpoints (overview, top sellers, revenue chart, inventory alerts) - Add sales page with NewSaleModal (customer autocomplete, multi-item form, color-based pricing, stock validation) and SaleDetailModal - Add customers page with search, inline editing, and purchase history - Add analytics dashboard with recharts (revenue line chart, top sellers bar, refill vs spulna pie chart, inventory alerts table with stockout estimates) - Add customerService, saleService, analyticsService to frontend API layer - Update sidebar navigation on all admin pages
This commit is contained in:
DaX
869
app/upadaj/sales/page.tsx
Normal file
869
app/upadaj/sales/page.tsx
Normal file
@@ -0,0 +1,869 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { saleService, customerService, filamentService, colorService } from '@/src/services/api';
|
||||
import { Customer, Sale, SaleItem, CreateSaleRequest } from '@/src/types/sales';
|
||||
import { Filament } from '@/src/types/filament';
|
||||
|
||||
interface LineItem {
|
||||
filament_id: string;
|
||||
item_type: 'refill' | 'spulna';
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export default function SalesPage() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
|
||||
// Sales list state
|
||||
const [sales, setSales] = useState<Sale[]>([]);
|
||||
const [totalSales, setTotalSales] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Modal state
|
||||
const [showNewSaleModal, setShowNewSaleModal] = useState(false);
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const [selectedSale, setSelectedSale] = useState<Sale | null>(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
|
||||
const LIMIT = 50;
|
||||
|
||||
// Dark mode init
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const saved = localStorage.getItem('darkMode');
|
||||
setDarkMode(saved !== null ? JSON.parse(saved) : true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
if (darkMode) document.documentElement.classList.add('dark');
|
||||
else document.documentElement.classList.remove('dark');
|
||||
}, [darkMode, mounted]);
|
||||
|
||||
// Auth check
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
const token = localStorage.getItem('authToken');
|
||||
const expiry = localStorage.getItem('tokenExpiry');
|
||||
if (!token || !expiry || Date.now() > parseInt(expiry)) {
|
||||
window.location.href = '/upadaj';
|
||||
}
|
||||
}, [mounted]);
|
||||
|
||||
// Fetch sales
|
||||
const fetchSales = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const data = await saleService.getAll(page, LIMIT);
|
||||
setSales(data.sales);
|
||||
setTotalSales(data.total);
|
||||
} catch {
|
||||
setError('Greska pri ucitavanju prodaja');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
fetchSales();
|
||||
}, [mounted, fetchSales]);
|
||||
|
||||
const totalPages = Math.ceil(totalSales / LIMIT);
|
||||
|
||||
const handleViewDetail = async (sale: Sale) => {
|
||||
try {
|
||||
setDetailLoading(true);
|
||||
setShowDetailModal(true);
|
||||
const detail = await saleService.getById(sale.id);
|
||||
setSelectedSale(detail);
|
||||
} catch {
|
||||
setError('Greska pri ucitavanju detalja prodaje');
|
||||
setShowDetailModal(false);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteSale = async (id: string) => {
|
||||
if (!window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) return;
|
||||
try {
|
||||
await saleService.delete(id);
|
||||
setShowDetailModal(false);
|
||||
setSelectedSale(null);
|
||||
fetchSales();
|
||||
} catch {
|
||||
setError('Greska pri brisanju prodaje');
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('sr-RS', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatPrice = (amount: number) => {
|
||||
return amount.toLocaleString('sr-RS') + ' RSD';
|
||||
};
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-white dark:bg-gray-800 shadow-lg h-screen sticky top-0">
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
|
||||
<nav className="space-y-2">
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Filamenti
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/colors"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Boje
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/requests"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Zahtevi za boje
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/sales"
|
||||
className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
|
||||
>
|
||||
Prodaja
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/customers"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Kupci
|
||||
</a>
|
||||
<a
|
||||
href="/upadaj/analytics"
|
||||
className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
Analitika
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Prodaja</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className="px-3 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
{darkMode ? 'Svetli mod' : 'Tamni mod'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewSaleModal(true)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors font-medium"
|
||||
>
|
||||
Nova prodaja
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sales Table */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
|
||||
) : sales.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">Nema prodaja</div>
|
||||
) : (
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Datum
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Ime kupca
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Stavki
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Cena
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Akcije
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{sales.map((sale) => (
|
||||
<tr key={sale.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
||||
{formatDate(sale.created_at)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
|
||||
{sale.customer_name || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
|
||||
{sale.item_count ?? 0}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||||
{formatPrice(sale.total_amount)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
|
||||
<button
|
||||
onClick={() => handleViewDetail(sale)}
|
||||
className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Detalji
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteSale(sale.id)}
|
||||
className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Obrisi
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-4 flex justify-center items-center gap-2">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Prethodna
|
||||
</button>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Strana {page} od {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Sledeca
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New Sale Modal */}
|
||||
{showNewSaleModal && (
|
||||
<NewSaleModal
|
||||
onClose={() => setShowNewSaleModal(false)}
|
||||
onCreated={() => {
|
||||
setShowNewSaleModal(false);
|
||||
fetchSales();
|
||||
}}
|
||||
formatPrice={formatPrice}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sale Detail Modal */}
|
||||
{showDetailModal && (
|
||||
<SaleDetailModal
|
||||
sale={selectedSale}
|
||||
loading={detailLoading}
|
||||
onClose={() => {
|
||||
setShowDetailModal(false);
|
||||
setSelectedSale(null);
|
||||
}}
|
||||
onDelete={(id) => handleDeleteSale(id)}
|
||||
formatPrice={formatPrice}
|
||||
formatDate={formatDate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- NewSaleModal ---
|
||||
|
||||
function NewSaleModal({
|
||||
onClose,
|
||||
onCreated,
|
||||
formatPrice,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onCreated: () => void;
|
||||
formatPrice: (n: number) => string;
|
||||
}) {
|
||||
const [customerName, setCustomerName] = useState('');
|
||||
const [customerPhone, setCustomerPhone] = useState('');
|
||||
const [customerCity, setCustomerCity] = useState('');
|
||||
const [customerNotes, setCustomerNotes] = useState('');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [items, setItems] = useState<LineItem[]>([{ filament_id: '', item_type: 'refill', quantity: 1 }]);
|
||||
const [filaments, setFilaments] = useState<Filament[]>([]);
|
||||
const [colorPrices, setColorPrices] = useState<Record<string, { cena_refill: number; cena_spulna: number }>>({});
|
||||
const [customerSuggestions, setCustomerSuggestions] = useState<Customer[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState('');
|
||||
const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const suggestionsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [filamentData, colorData] = await Promise.all([
|
||||
filamentService.getAll(),
|
||||
colorService.getAll(),
|
||||
]);
|
||||
setFilaments(filamentData);
|
||||
const priceMap: Record<string, { cena_refill: number; cena_spulna: number }> = {};
|
||||
for (const c of colorData) {
|
||||
priceMap[c.name] = { cena_refill: c.cena_refill || 3499, cena_spulna: c.cena_spulna || 3999 };
|
||||
}
|
||||
setColorPrices(priceMap);
|
||||
} catch {
|
||||
// Data failed to load
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
// Close suggestions on outside click
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (suggestionsRef.current && !suggestionsRef.current.contains(e.target as Node)) {
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, []);
|
||||
|
||||
const handleCustomerSearch = (value: string) => {
|
||||
setCustomerName(value);
|
||||
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
||||
if (value.length < 2) {
|
||||
setCustomerSuggestions([]);
|
||||
setShowSuggestions(false);
|
||||
return;
|
||||
}
|
||||
searchTimeout.current = setTimeout(async () => {
|
||||
try {
|
||||
const results = await customerService.search(value);
|
||||
setCustomerSuggestions(results);
|
||||
setShowSuggestions(results.length > 0);
|
||||
} catch {
|
||||
setCustomerSuggestions([]);
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const selectCustomer = (customer: Customer) => {
|
||||
setCustomerName(customer.name);
|
||||
setCustomerPhone(customer.phone || '');
|
||||
setCustomerCity(customer.city || '');
|
||||
setCustomerNotes(customer.notes || '');
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
const getFilamentById = (id: string): Filament | undefined => {
|
||||
return filaments.find((f) => String(f.id) === String(id));
|
||||
};
|
||||
|
||||
const getFilamentPrice = (filament: Filament, type: 'refill' | 'spulna'): number => {
|
||||
const prices = colorPrices[filament.boja];
|
||||
const base = type === 'refill' ? (prices?.cena_refill || 3499) : (prices?.cena_spulna || 3999);
|
||||
if (filament.sale_active && filament.sale_percentage) {
|
||||
return Math.round(base * (1 - filament.sale_percentage / 100));
|
||||
}
|
||||
return base;
|
||||
};
|
||||
|
||||
const getItemPrice = (item: LineItem): number => {
|
||||
const filament = getFilamentById(item.filament_id);
|
||||
if (!filament) return 0;
|
||||
return getFilamentPrice(filament, item.item_type) * item.quantity;
|
||||
};
|
||||
|
||||
const totalAmount = items.reduce((sum, item) => sum + getItemPrice(item), 0);
|
||||
|
||||
const getAvailableStock = (filament: Filament, type: 'refill' | 'spulna'): number => {
|
||||
return type === 'refill' ? filament.refill : filament.spulna;
|
||||
};
|
||||
|
||||
const updateItem = (index: number, updates: Partial<LineItem>) => {
|
||||
setItems((prev) => {
|
||||
const next = [...prev];
|
||||
next[index] = { ...next[index], ...updates };
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const removeItem = (index: number) => {
|
||||
if (items.length <= 1) return;
|
||||
setItems((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const addItem = () => {
|
||||
setItems((prev) => [...prev, { filament_id: '', item_type: 'refill', quantity: 1 }]);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!customerName.trim()) {
|
||||
setSubmitError('Ime kupca je obavezno');
|
||||
return;
|
||||
}
|
||||
const validItems = items.filter((item) => item.filament_id !== '' && item.quantity > 0);
|
||||
if (validItems.length === 0) {
|
||||
setSubmitError('Dodajte bar jednu stavku');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate stock
|
||||
for (const item of validItems) {
|
||||
const filament = getFilamentById(item.filament_id);
|
||||
if (!filament) {
|
||||
setSubmitError('Nevalidan filament');
|
||||
return;
|
||||
}
|
||||
const available = getAvailableStock(filament, item.item_type);
|
||||
if (item.quantity > available) {
|
||||
setSubmitError(
|
||||
`Nedovoljno zaliha za ${filament.boja} ${filament.tip} (${item.item_type}): dostupno ${available}, trazeno ${item.quantity}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const payload: CreateSaleRequest = {
|
||||
customer: {
|
||||
name: customerName.trim(),
|
||||
phone: customerPhone.trim() || undefined,
|
||||
city: customerCity.trim() || undefined,
|
||||
notes: customerNotes.trim() || undefined,
|
||||
},
|
||||
items: validItems.map((item) => ({
|
||||
filament_id: item.filament_id,
|
||||
item_type: item.item_type,
|
||||
quantity: item.quantity,
|
||||
})),
|
||||
notes: notes.trim() || undefined,
|
||||
};
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setSubmitError('');
|
||||
await saleService.create(payload);
|
||||
onCreated();
|
||||
} catch {
|
||||
setSubmitError('Greska pri kreiranju prodaje');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto m-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Nova prodaja</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{submitError && (
|
||||
<div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded text-sm">
|
||||
{submitError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Customer Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="relative" ref={suggestionsRef}>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Ime kupca *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={customerName}
|
||||
onChange={(e) => handleCustomerSearch(e.target.value)}
|
||||
onFocus={() => customerSuggestions.length > 0 && setShowSuggestions(true)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Ime i prezime"
|
||||
/>
|
||||
{showSuggestions && customerSuggestions.length > 0 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-lg max-h-40 overflow-y-auto">
|
||||
{customerSuggestions.map((c) => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => selectCustomer(c)}
|
||||
className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 text-sm text-gray-900 dark:text-white"
|
||||
>
|
||||
<span className="font-medium">{c.name}</span>
|
||||
{c.city && (
|
||||
<span className="text-gray-500 dark:text-gray-400 ml-2">({c.city})</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Telefon
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={customerPhone}
|
||||
onChange={(e) => setCustomerPhone(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Broj telefona"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Grad
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={customerCity}
|
||||
onChange={(e) => setCustomerCity(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Grad"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beleske o kupcu</div>
|
||||
<textarea
|
||||
value={customerNotes}
|
||||
onChange={(e) => setCustomerNotes(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="npr. stampa figurice, obicno koristi crnu..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Stavke</h3>
|
||||
<button
|
||||
onClick={addItem}
|
||||
className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Dodaj stavku
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{items.map((item, index) => {
|
||||
const filament = getFilamentById(item.filament_id);
|
||||
const available = filament ? getAvailableStock(filament, item.item_type) : 0;
|
||||
const itemPrice = getItemPrice(item);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-wrap gap-3 items-end p-3 bg-gray-50 dark:bg-gray-700/50 rounded border border-gray-200 dark:border-gray-600"
|
||||
>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
|
||||
Filament
|
||||
</label>
|
||||
<select
|
||||
value={item.filament_id}
|
||||
onChange={(e) => updateItem(index, { filament_id: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value={0}>-- Izaberite filament --</option>
|
||||
{filaments
|
||||
.filter((f) => f.kolicina > 0)
|
||||
.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.boja} - {f.tip} {f.finish} (refill: {f.refill}, spulna: {f.spulna})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
|
||||
Tip
|
||||
</label>
|
||||
<select
|
||||
value={item.item_type}
|
||||
onChange={(e) =>
|
||||
updateItem(index, {
|
||||
item_type: e.target.value as 'refill' | 'spulna',
|
||||
quantity: 1,
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="refill">Refill</option>
|
||||
<option value="spulna">Spulna</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="w-24">
|
||||
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
|
||||
Kolicina {filament ? `(max ${available})` : ''}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={available || undefined}
|
||||
value={item.quantity}
|
||||
onChange={(e) => updateItem(index, { quantity: Math.max(1, Number(e.target.value)) })}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32 text-right">
|
||||
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
|
||||
Cena
|
||||
</label>
|
||||
<div className="px-3 py-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{itemPrice > 0 ? formatPrice(itemPrice) : '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => removeItem(index)}
|
||||
disabled={items.length <= 1}
|
||||
className="px-3 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Ukloni
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total */}
|
||||
<div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
|
||||
<span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">{formatPrice(totalAmount)}</span>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Beleske
|
||||
</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Napomena za prodaju..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
|
||||
>
|
||||
Otkazi
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
{submitting ? 'Cuvanje...' : 'Sacuvaj'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- SaleDetailModal ---
|
||||
|
||||
function SaleDetailModal({
|
||||
sale,
|
||||
loading,
|
||||
onClose,
|
||||
onDelete,
|
||||
formatPrice,
|
||||
formatDate,
|
||||
}: {
|
||||
sale: Sale | null;
|
||||
loading: boolean;
|
||||
onClose: () => void;
|
||||
onDelete: (id: string) => void;
|
||||
formatPrice: (n: number) => string;
|
||||
formatDate: (d?: string) => string;
|
||||
}) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Detalji prodaje</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
|
||||
) : !sale ? (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">Prodaja nije pronadjena</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Customer Info */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-400">Ime: </span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">
|
||||
{sale.customer_name || '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-400">Telefon: </span>
|
||||
<span className="text-gray-900 dark:text-white">
|
||||
{sale.customer_phone || '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500 dark:text-gray-400">Datum: </span>
|
||||
<span className="text-gray-900 dark:text-white">{formatDate(sale.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Stavke</h3>
|
||||
{sale.items && sale.items.length > 0 ? (
|
||||
<div className="border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Filament
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Tip
|
||||
</th>
|
||||
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Kolicina
|
||||
</th>
|
||||
<th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
|
||||
Cena
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-600">
|
||||
{sale.items.map((item: SaleItem) => (
|
||||
<tr key={item.id}>
|
||||
<td className="px-4 py-2 text-sm text-gray-900 dark:text-white">
|
||||
{item.filament_boja} - {item.filament_tip} {item.filament_finish}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 capitalize">
|
||||
{item.item_type}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right">
|
||||
{item.quantity}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right font-medium">
|
||||
{formatPrice(item.unit_price * item.quantity)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Nema stavki</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Total */}
|
||||
<div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
|
||||
<span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{formatPrice(sale.total_amount)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{sale.notes && (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Beleske</h3>
|
||||
<p className="text-sm text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-700/50 p-3 rounded">
|
||||
{sale.notes}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) {
|
||||
onDelete(sale.id);
|
||||
}
|
||||
}}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Obrisi prodaju
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
|
||||
>
|
||||
Zatvori
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user