add creation date display with CalendarPlus icon to DeliveryCard header
This commit is contained in:
4
frontend/package-lock.json
generated
4
frontend/package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "delivery-tracker",
|
"name": "delivery-tracker",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "delivery-tracker",
|
"name": "delivery-tracker",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tailwindcss/vite": "^4.2.2",
|
"@tailwindcss/vite": "^4.2.2",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "delivery-tracker",
|
"name": "delivery-tracker",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
@@ -1,11 +1,18 @@
|
|||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import { MapPin, Phone, Store, Calendar, MessageSquare, CheckCircle2, Circle, CheckSquare, User, Wrench } from 'lucide-react';
|
import { MapPin, Phone, Store, Calendar, MessageSquare, CheckCircle2, Circle, CheckSquare, User, Wrench, CalendarPlus } from 'lucide-react';
|
||||||
import type { Delivery } from '../../types';
|
import type { Delivery } from '../../types';
|
||||||
import { formatPickupLocation } from '../../types';
|
import { formatPickupLocation } from '../../types';
|
||||||
import { StatusBadge } from './StatusBadge';
|
import { StatusBadge } from './StatusBadge';
|
||||||
import { Card } from '../ui/Card';
|
import { Card } from '../ui/Card';
|
||||||
|
|
||||||
const CITY = 'kokshetau';
|
const CITY = 'kokshetau';
|
||||||
|
const createdAtFormatter = new Intl.DateTimeFormat('ru-RU', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatCreatedAt = (timestamp: number) => createdAtFormatter.format(new Date(timestamp));
|
||||||
|
|
||||||
interface DeliveryCardProps {
|
interface DeliveryCardProps {
|
||||||
delivery: Delivery;
|
delivery: Delivery;
|
||||||
@@ -26,8 +33,12 @@ export const DeliveryCard = memo(({ delivery, onStatusChange, onEdit, onDelete }
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="relative">
|
<Card className="relative">
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between gap-3 mb-3">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex min-w-0 flex-col gap-2">
|
||||||
|
<div className="flex items-center gap-2 text-xs text-[#75777d]">
|
||||||
|
<CalendarPlus size={14} className="shrink-0" />
|
||||||
|
<span className="truncate">Создано {formatCreatedAt(delivery.createdAt)}</span>
|
||||||
|
</div>
|
||||||
<StatusBadge
|
<StatusBadge
|
||||||
status={delivery.status}
|
status={delivery.status}
|
||||||
onClick={() => onStatusChange(delivery.id)}
|
onClick={() => onStatusChange(delivery.id)}
|
||||||
|
|||||||
Reference in New Issue
Block a user