Scribd
Upload
3 views3 pages

Admin Livraison Template

The document is a React component for a delivery administration page that displays delivery information, order details, customer information, payment status, and actions. It includes a data structure for delivery data and renders various cards with relevant information. The component also allows for adding notes and modifying the delivery status or contacting the customer.

Uploaded by

austinrakotomalala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views3 pages

Admin Livraison Template

The document is a React component for a delivery administration page that displays delivery information, order details, customer information, payment status, and actions. It includes a data structure for delivery data and renders various cards with relevant information. The component also allows for adding notes and modifying the delivery status or contacting the customer.

Uploaded by

austinrakotomalala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React from 'react';

import { Truck, Package, User, CreditCard, RotateCcw, Clipboard } from 'lucide-


react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

const DeliveryAdminPage = () => {


// Ces données seraient normalement récupérées depuis une API
const deliveryData = {
id: 'DEL123456',
status: 'En transit',
expectedDate: '2024-10-20',
actualDate: null,
orderId: 'ORD987654',
orderDate: '2024-10-15',
items: [
{ name: 'Produit A', quantity: 2, price: 29.99 },
{ name: 'Produit B', quantity: 1, price: 49.99 },
],
subtotal: 109.97,
shippingFee: 9.99,
total: 119.96,
customer: {
name: 'Jean Dupont',
email: '[email protected]',
phone: '+33 6 12 34 56 78',
billingAddress: '123 Rue de Paris, 75001 Paris, France',
shippingAddress: '123 Rue de Paris, 75001 Paris, France',
},
shipping: {
method: 'Express',
trackingNumber: 'TRACK123456789',
carrier: 'La Poste',
weight: '2.5 kg',
dimensions: '30x20x10 cm',
},
payment: {
method: 'Carte bancaire',
status: 'Payé',
},
};

return (
<div className="p-6 max-w-6xl mx-auto">
<h1 className="text-3xl font-bold mb-6">Administration de la livraison -
{deliveryData.id}</h1>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">


<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Truck className="mr-2" /> Informations de livraison
</CardTitle>
</CardHeader>
<CardContent>
<p><strong>Statut:</strong> {deliveryData.status}</p>
<p><strong>Date prévue:</strong> {deliveryData.expectedDate}</p>
<p><strong>Date réelle:</strong> {deliveryData.actualDate || 'Non
livrée'}</p>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Package className="mr-2" /> Détails de la commande
</CardTitle>
</CardHeader>
<CardContent>
<p><strong>ID Commande:</strong> {deliveryData.orderId}</p>
<p><strong>Date commande:</strong> {deliveryData.orderDate}</p>
<p><strong>Total:</strong> {deliveryData.total}€</p>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle className="flex items-center">
<User className="mr-2" /> Informations client
</CardTitle>
</CardHeader>
<CardContent>
<p><strong>Nom:</strong> {deliveryData.customer.name}</p>
<p><strong>Email:</strong> {deliveryData.customer.email}</p>
<p><strong>Téléphone:</strong> {deliveryData.customer.phone}</p>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle className="flex items-center">
<CreditCard className="mr-2" /> Paiement
</CardTitle>
</CardHeader>
<CardContent>
<p><strong>Méthode:</strong> {deliveryData.payment.method}</p>
<p><strong>Statut:</strong> {deliveryData.payment.status}</p>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle className="flex items-center">
<RotateCcw className="mr-2" /> Actions
</CardTitle>
</CardHeader>
<CardContent>
<button className="bg-blue-500 text-white px-4 py-2 rounded mr-
2">Modifier statut</button>
<button className="bg-green-500 text-white px-4 py-2 rounded">Contacter
client</button>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle className="flex items-center">
<Clipboard className="mr-2" /> Notes
</CardTitle>
</CardHeader>
<CardContent>
<textarea className="w-full p-2 border rounded" rows="4"
placeholder="Ajouter une note..."></textarea>
</CardContent>
</Card>
</div>
</div>
);
};

export default DeliveryAdminPage;

You might also like