Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance FieldWithHistory component with improved tooltip display and time formatting

Browse Source
This commit is contained in:
RKWojs
2025-10-02 10:01:54 +02:00
parent 50760ab099
commit 31736ccc78
1 changed files with 103 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/FieldWithHistory.js
View File

@@ -4,6 +4,8 @@ import { useState, useEffect } from "react";
import Tooltip from "@/components/ui/Tooltip";
import { formatDate } from "@/lib/utils";
import { useTranslation } from "@/lib/i18n";
import { formatDistanceToNow } from "date-fns";
import { pl, enUS } from "date-fns/locale";
export default function FieldWithHistory({
tableName,
@@ -14,11 +16,14 @@ export default function FieldWithHistory({
label = null,
className = "",
}) {
const { t } = useTranslation();
const { t, language } = useTranslation();
const [hasHistory, setHasHistory] = useState(false);
const [history, setHistory] = useState([]);
const [loading, setLoading] = useState(true);
// Get locale for date-fns
const locale = language === 'pl' ? pl : enUS;
useEffect(() => {
const fetchHistory = async () => {
try {
@@ -59,33 +64,95 @@ export default function FieldWithHistory({
// Create tooltip content
const tooltipContent = history.length > 0 && (
<div className="space-y-2">
<div className="font-medium text-white mb-2">{t("common.changeHistory")}:</div>
<div className="space-y-2 max-w-sm">
<div className="flex items-center gap-2 font-semibold text-white mb-3 pb-2 border-b border-gray-600">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{t("common.changeHistory")} ({history.length})
</div>
{history.map((change, index) => (
<div key={change.id} className="text-xs border-b border-gray-600 pb-1 last:border-b-0">
<div className="flex justify-between items-start gap-2">
<div
key={change.id}
className="text-xs border-b border-gray-700 pb-2 last:border-b-0 hover:bg-gray-800/30 p-2 rounded transition-colors"
>
<div className="flex justify-between items-start gap-3 mb-2">
<div className="flex-1">
<div className="text-white font-medium">
{t("common.changedTo")}: {getDisplayValue(change.new_value)}
{/* New Value */}
<div className="flex items-start gap-2 mb-1">
<svg className="w-3.5 h-3.5 text-green-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<div>
<span className="text-green-400 font-medium text-[10px] uppercase tracking-wide block mb-0.5">
{t("common.changedTo")}
</span>
<span className="text-white font-semibold">
{getDisplayValue(change.new_value)}
</span>
</div>
</div>
{/* Old Value */}
{change.old_value && (
<div className="text-gray-400 text-xs">
{t("common.from")}: {getDisplayValue(change.old_value)}
<div className="flex items-start gap-2 mb-1">
<svg className="w-3.5 h-3.5 text-red-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
<div>
<span className="text-red-400 font-medium text-[10px] uppercase tracking-wide block mb-0.5">
{t("common.from")}
</span>
<span className="text-gray-300 line-through">
{getDisplayValue(change.old_value)}
</span>
</div>
</div>
)}
{/* Changed By */}
{change.changed_by_name && (
<div className="text-gray-300">
{t("common.by")} {change.changed_by_name}
<div className="flex items-center gap-1.5 mt-2 text-gray-400">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span className="text-xs">
{t("common.by")} <span className="text-gray-200 font-medium">{change.changed_by_name}</span>
</span>
</div>
)}
</div>
<div className="text-gray-400 text-right text-xs">
{formatDate(change.changed_at)}
{/* Timestamp */}
<div className="text-right flex-shrink-0">
<div className="text-gray-400 text-[10px] whitespace-nowrap">
{formatDistanceToNow(new Date(change.changed_at), {
addSuffix: true,
locale: locale
})}
</div>
<div className="text-gray-500 text-[9px] mt-0.5">
{formatDate(change.changed_at)}
</div>
</div>
</div>
{/* Change Reason */}
{change.change_reason && (
<div className="text-gray-400 text-xs mt-1">
{t("common.reason")}: {change.change_reason}
<div className="mt-2 pt-2 border-t border-gray-700">
<div className="flex items-start gap-1.5">
<svg className="w-3 h-3 text-amber-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<span className="text-amber-400 font-medium text-[10px] uppercase tracking-wide block mb-0.5">
{t("common.reason")}
</span>
<span className="text-gray-300 text-xs italic">
{change.change_reason}
</span>
</div>
</div>
</div>
)}
</div>
@@ -109,17 +176,27 @@ export default function FieldWithHistory({
<p className="text-gray-900 font-medium">{getDisplayValue(currentValue)}</p>
{hasHistory && (
<Tooltip content={tooltipContent}>
<svg
className="w-4 h-4 text-blue-500 hover:text-blue-700 cursor-help"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
<div className="relative group cursor-help">
{/* History Icon with Badge */}
<div className="flex items-center gap-1 px-2 py-1 rounded-full bg-blue-50 hover:bg-blue-100 transition-colors border border-blue-200">
<svg
className="w-3.5 h-3.5 text-blue-600 group-hover:text-blue-700 transition-colors"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span className="text-[10px] font-semibold text-blue-600 group-hover:text-blue-700 transition-colors">
{history.length}
</span>
</div>
</div>
</Tooltip>
)}
</div>