matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shippedby to event feed

Browse Source
This commit is contained in:
Matt
2025-01-09 11:10:49 -05:00
parent 254a9a6511
commit 225e63a985
3 changed files with 78 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
dashboard/src/components/dashboard/EventFeed.jsx
View File

@@ -679,72 +679,26 @@ const EventDialog = ({ event, children }) => {
{event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
<>
<div className="grid gap-6 sm:grid-cols-2">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Shipping Address</CardTitle>
</CardHeader>
<CardContent className="space-y-1">
<p className="text-sm font-medium">{details.ShippingName}</p>
{details.ShippingStreet1 && (
<p className="text-sm text-muted-foreground">{details.ShippingStreet1}</p>
)}
{details.ShippingStreet2 && (
<p className="text-sm text-muted-foreground">{details.ShippingStreet2}</p>
)}
<p className="text-sm text-muted-foreground">
{details.ShippingCity}, {details.ShippingState} {details.ShippingZip}
</p>
{details.ShippingCountry !== "US" && (
<p className="text-sm text-muted-foreground">{details.ShippingCountry}</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Tracking Information</CardTitle>
</CardHeader>
<CardContent className="space-y-1">
<p className="text-sm font-medium">{details.TrackingNumber}</p>
<p className="text-sm text-muted-foreground">
{formatShipMethod(details.ShipMethod)}
</p>
</CardContent>
</Card>
<div className="mt-1">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{toTitleCase(details.ShippingName)}
</span>
<span className="text-sm text-gray-500">•</span>
<span className="text-sm text-gray-500">
#{details.OrderId}
</span>
</div>
<div className="text-sm text-gray-500">
{formatShipMethodSimple(details.ShipMethod)}
{event.event_properties?.ShippedBy && (
<>
<span className="text-sm text-gray-500"> • </span>
<span className="text-sm font-medium text-blue-600 dark:text-blue-400">Shipped by {event.event_properties.ShippedBy}</span>
</>
)}
</div>
</div>
<Card className="mt-6">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Shipped Items</CardTitle>
</CardHeader>
<CardContent>
<div className="divide-y">
{details.Items?.map((item, i) => (
<div key={i} className="flex gap-4 py-4 first:pt-0 last:pb-0">
{item.ImgThumb && (
<img
src={item.ImgThumb}
alt={item.ProductName}
className="w-16 h-16 object-cover rounded bg-muted"
/>
)}
<div className="flex-1 min-w-0">
<p className="font-medium text-sm">{item.ProductName}</p>
<p className="text-sm text-muted-foreground">
Shipped: {item.QuantitySent} of {item.QuantityOrdered}
</p>
{item.QuantityBackordered > 0 && (
<Badge variant="secondary" className="mt-2">
{item.QuantityBackordered} Backordered
</Badge>
)}
</div>
</div>
))}
</div>
</CardContent>
</Card>
</>
)}
@@ -1038,15 +992,19 @@ const EventCard = ({ event }) => {
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{toTitleCase(details.ShippingName)}
</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-500">
<span className="text-sm text-gray-500">•</span>
<span className="text-sm text-gray-500">
#{details.OrderId}
</span>
<span className="text-sm text-gray-500">•</span>
<span className="font-medium text-blue-600 dark:text-blue-400">
{formatShipMethodSimple(details.ShipMethod)}
</span>
</div>
<div className="text-sm text-gray-500">
{formatShipMethodSimple(details.ShipMethod)}
{event.event_properties?.ShippedBy && (
<>
<span className="text-sm text-gray-500"> • </span>
<span className="text-sm font-medium text-blue-600 dark:text-blue-400">Shipped by {event.event_properties.ShippedBy}</span>
</>
)}
</div>
</div>
</>
@@ -1179,14 +1137,12 @@ const EventFeed = ({
},
});
// Ensure we have the datetime field in the response
// Keep the original event structure intact
const processedEvents = (response.data.data || []).map((event) => ({
...event,
datetime: event.attributes?.datetime || event.datetime,
event_properties: {
...event.event_properties,
datetime: event.attributes?.datetime || event.datetime,
},
// Don't spread event_properties to preserve the nested structure
event_properties: event.attributes?.event_properties || {}
}));
setEvents(processedEvents);

10
dashboard/src/components/dashboard/MiniEventFeed.jsx
View File

@@ -250,6 +250,11 @@ const EventCard = ({ event }) => {
#{details.OrderId} • {formatShipMethodSimple(details.ShipMethod)}
</div>
</div>
{event.event_properties?.ShippedBy && (
<div className={`text-sm font-medium ${eventType.textColor} opacity-90 truncate mt-1`}>
Shipped by {event.event_properties.ShippedBy}
</div>
)}
</>
)}
@@ -369,10 +374,7 @@ const MiniEventFeed = ({
const processedEvents = (response.data.data || []).map((event) => ({
...event,
datetime: event.attributes?.datetime || event.datetime,
event_properties: {
...event.event_properties,
datetime: event.attributes?.datetime || event.datetime,
},
event_properties: event.attributes?.event_properties || {}
}));
setEvents(processedEvents);