ui fix employee page

This commit is contained in:
MuslemRahimi 2025-03-31 23:10:31 +02:00
parent 377ed553b4
commit 547aa8b44d
5 changed files with 64 additions and 62 deletions

View File

@ -91,8 +91,8 @@
? "#047857" ? "#047857"
: "#00FC50"; : "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)" ? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -119,8 +119,8 @@
const options = { const options = {
chart: { chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false, animation: false,
height: 360,
events: { events: {
// Add touch event handling to hide tooltip on mobile // Add touch event handling to hide tooltip on mobile
load: function () { load: function () {
@ -212,26 +212,29 @@
}, },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
distance: 20, distance: 10,
formatter: function () { formatter: function () {
const date = new Date(this?.value); const date = new Date(this?.value);
if (displayData === "1D") { if (displayData === "1D") {
return date?.toLocaleTimeString("en-US", { const timeString = date?.toLocaleTimeString("en-US", {
hour: "2-digit", hour: "numeric",
minute: "2-digit", hour12: true,
}); });
return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
} else if (["1W", "1M"].includes(displayData)) { } else if (["1W", "1M"].includes(displayData)) {
return date?.toLocaleDateString("en-US", { const timeString = date?.toLocaleDateString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
timeZone: "UTC", timeZone: "UTC",
}); });
return `<span class="font-[501] text-xs">${timeString}</span>`;
} else { } else {
return date?.toLocaleDateString("en-US", { const timeString = date?.toLocaleDateString("en-US", {
year: "2-digit", year: "2-digit",
month: "short", month: "short",
timeZone: "UTC", timeZone: "UTC",
}); });
return `<span class="font-[501] text-xs">${timeString}</span>`;
} }
}, },
}, },
@ -290,7 +293,7 @@
data: displayData === "1D" ? seriesData : priceList, data: displayData === "1D" ? seriesData : priceList,
animation: false, animation: false,
color: lineColor, color: lineColor,
lineWidth: 1.3, lineWidth: 1.5,
marker: { marker: {
enabled: false, enabled: false,
}, },
@ -307,7 +310,6 @@
return options; return options;
} }
//const startTimeTracking = performance.now(); //const startTimeTracking = performance.now();
//==========================// //==========================//

View File

@ -89,8 +89,8 @@
? "#047857" ? "#047857"
: "#00FC50"; : "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.3)" ? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.3)"; //"rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -117,8 +117,8 @@
const options = { const options = {
chart: { chart: {
backgroundColor: $mode === "light" ? "#fff" : "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360,
animation: false, animation: false,
height: 360,
events: { events: {
// Add touch event handling to hide tooltip on mobile // Add touch event handling to hide tooltip on mobile
load: function () { load: function () {
@ -210,26 +210,29 @@
}, },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "black" : "white" },
distance: 20, distance: 10,
formatter: function () { formatter: function () {
const date = new Date(this?.value); const date = new Date(this?.value);
if (displayData === "1D") { if (displayData === "1D") {
return date?.toLocaleTimeString("en-US", { const timeString = date?.toLocaleTimeString("en-US", {
hour: "2-digit", hour: "numeric",
minute: "2-digit", hour12: true,
}); });
return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
} else if (["1W", "1M"].includes(displayData)) { } else if (["1W", "1M"].includes(displayData)) {
return date?.toLocaleDateString("en-US", { const timeString = date?.toLocaleDateString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
timeZone: "UTC", timeZone: "UTC",
}); });
return `<span class="font-[501] text-xs">${timeString}</span>`;
} else { } else {
return date?.toLocaleDateString("en-US", { const timeString = date?.toLocaleDateString("en-US", {
year: "2-digit", year: "2-digit",
month: "short", month: "short",
timeZone: "UTC", timeZone: "UTC",
}); });
return `<span class="font-[501] text-xs">${timeString}</span>`;
} }
}, },
}, },
@ -288,7 +291,7 @@
data: displayData === "1D" ? seriesData : priceList, data: displayData === "1D" ? seriesData : priceList,
animation: false, animation: false,
color: lineColor, color: lineColor,
lineWidth: 1.3, lineWidth: 1.5,
marker: { marker: {
enabled: false, enabled: false,
}, },

View File

@ -93,8 +93,8 @@
? "#047857" ? "#047857"
: "#00FC50"; : "#00FC50";
const fillColorStart = isNegative const fillColorStart = isNegative
? "rgba(204, 38, 26, 0.5)" ? "rgba(204, 38, 26, 0.4)"
: "rgb(4, 120, 87, 0.5)"; //"rgba(0, 252, 80, 0.3)"; : "rgb(4, 120, 87, 0.4)"; //"rgba(0, 252, 80, 0.3)";
const fillColorEnd = isNegative const fillColorEnd = isNegative
? "rgba(204, 38, 26, 0.004)" ? "rgba(204, 38, 26, 0.004)"
: "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)"; : "rgb(4, 120, 87, 0.004)"; //"rgba(0, 252, 80, 0.004)";
@ -295,7 +295,7 @@
data: displayData === "1D" ? seriesData : priceList, data: displayData === "1D" ? seriesData : priceList,
animation: false, animation: false,
color: lineColor, color: lineColor,
lineWidth: 1.8, lineWidth: 1.5,
marker: { marker: {
enabled: false, enabled: false,
}, },
@ -757,7 +757,7 @@
>Bid</td >Bid</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{$wsBidPrice !== 0 && $wsBidPrice !== null >{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice ? $wsBidPrice
: ((data?.getStockQuote?.bid !== 0 : ((data?.getStockQuote?.bid !== 0
@ -791,7 +791,7 @@
>Revenue (ttm)</td >Revenue (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{@html stockDeck?.revenueTTM !== null && >{@html stockDeck?.revenueTTM !== null &&
stockDeck?.revenueTTM !== 0 stockDeck?.revenueTTM !== 0
? abbreviateNumber(stockDeck?.revenueTTM, false, true) ? abbreviateNumber(stockDeck?.revenueTTM, false, true)
@ -805,7 +805,7 @@
>Net Income (ttm)</td >Net Income (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{@html stockDeck?.netIncomeTTM !== null >{@html stockDeck?.netIncomeTTM !== null
? abbreviateNumber(stockDeck?.netIncomeTTM, false, true) ? abbreviateNumber(stockDeck?.netIncomeTTM, false, true)
: "n/a"}</td : "n/a"}</td
@ -819,7 +819,7 @@
>EPS (ttm)</td >EPS (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.eps ?? "n/a"}</td >{data?.getStockQuote?.eps ?? "n/a"}</td
></tr ></tr
> >
@ -830,7 +830,7 @@
>PE Ratio (ttm)</td >PE Ratio (ttm)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.pe ?? "n/a"}</td >{data?.getStockQuote?.pe ?? "n/a"}</td
></tr ></tr
> >
@ -841,7 +841,7 @@
>Forward PE</td >Forward PE</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{stockDeck?.forwardPE ?? "n/a"}</td >{stockDeck?.forwardPE ?? "n/a"}</td
></tr ></tr
> >
@ -861,7 +861,7 @@
> >
</td> </td>
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getAnalystSummary?.consensusRating !== null && >{data?.getAnalystSummary?.consensusRating !== null &&
data?.getAnalystSummary?.consensusRating !== "n/a" && data?.getAnalystSummary?.consensusRating !== "n/a" &&
data?.getAnalystSummary?.consensusRating !== undefined data?.getAnalystSummary?.consensusRating !== undefined
@ -880,7 +880,7 @@
>Ask</td >Ask</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{$wsAskPrice !== 0 && $wsAskPrice !== null >{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice ? $wsAskPrice
: ((data?.getStockQuote?.ask !== 0 : ((data?.getStockQuote?.ask !== 0
@ -895,7 +895,7 @@
>Volume</td >Volume</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.volume?.toLocaleString( >{data?.getStockQuote?.volume?.toLocaleString(
"en-us", "en-us",
)}</td )}</td
@ -908,7 +908,7 @@
>Avg. Volume (20D)</td >Avg. Volume (20D)</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.avgVolume !== undefined >{data?.getStockQuote?.avgVolume !== undefined
? data?.getStockQuote?.avgVolume?.toLocaleString( ? data?.getStockQuote?.avgVolume?.toLocaleString(
"en-us", "en-us",
@ -923,7 +923,7 @@
>Open</td >Open</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.open?.toFixed(2)}</td >{data?.getStockQuote?.open?.toFixed(2)}</td
></tr ></tr
> >
@ -934,7 +934,7 @@
>Previous Close</td >Previous Close</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.previousClose?.toFixed(2)}</td >{data?.getStockQuote?.previousClose?.toFixed(2)}</td
></tr ></tr
> >
@ -945,7 +945,7 @@
>Day's Range</td >Day's Range</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed( >{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(
2, 2,
)}</td )}</td
@ -958,7 +958,7 @@
>52-Week Range</td >52-Week Range</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed( >{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(
2, 2,
)}</td )}</td
@ -971,7 +971,7 @@
>Beta</td >Beta</td
> >
<td <td
class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold xs:px-1 sm:text-right" class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm text-[1rem] font-semibold dark:font-normal xs:px-1 sm:text-right"
>{stockDeck?.beta?.toFixed(2)}</td >{stockDeck?.beta?.toFixed(2)}</td
></tr ></tr
> >

View File

@ -6,7 +6,7 @@ export const load = async ({ locals, params }) => {
}; };
// make the POST request to the endpoint // make the POST request to the endpoint
const response = await fetch(apiURL + "/history-employees", { const response = await fetch(apiURL + "/historical-employees", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",

View File

@ -39,7 +39,7 @@
function sortByDate(liste) { function sortByDate(liste) {
//Slice copies the list otherwise employeesHistory will reverse too //Slice copies the list otherwise employeesHistory will reverse too
return liste?.slice()?.sort(function (a, b) { return liste?.slice()?.sort(function (a, b) {
return new Date(b?.filingDate) - new Date(a?.filingDate); return new Date(b?.date) - new Date(a?.date);
}); });
} }
@ -49,12 +49,12 @@
// Create a sorted copy of the employee history from oldest to newest // Create a sorted copy of the employee history from oldest to newest
const sortedHistory = [...employeeHistory].sort( const sortedHistory = [...employeeHistory].sort(
(a, b) => new Date(a.filingDate) - new Date(b.filingDate), (a, b) => new Date(a.date) - new Date(b.date),
); );
if (sortBy === "Total") { if (sortBy === "Total") {
sortedHistory.forEach((record) => { sortedHistory.forEach((record) => {
dateList.push(record.filingDate.slice(0, 4)); dateList.push(record.date.slice(0, 4));
valueList.push(record.employeeCount); valueList.push(record.employeeCount);
}); });
} else if (sortBy === "Change") { } else if (sortBy === "Change") {
@ -64,7 +64,7 @@
const change = next - current; const change = next - current;
// Push the later date since the change happens between current and next // Push the later date since the change happens between current and next
dateList.push(sortedHistory[i + 1].filingDate.slice(0, 4)); dateList.push(sortedHistory[i + 1].date.slice(0, 4));
valueList.push(change); valueList.push(change);
} }
} else if (sortBy === "Growth") { } else if (sortBy === "Growth") {
@ -78,7 +78,7 @@
} else { } else {
valueList.push(0); valueList.push(0);
} }
dateList.push(sortedHistory[i + 1].filingDate.slice(0, 4)); dateList.push(sortedHistory[i + 1].date.slice(0, 4));
} }
} }
@ -140,20 +140,17 @@
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in a custom format // Format the x value to display time in a custom format
let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class="m-auto text-[1rem] font-[501]">Year ${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
month: "short",
day: "numeric",
})}</span><br>`; })}</span><br>`;
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points.forEach((point) => { this.points.forEach((point) => {
tooltipContent += ` tooltipContent += `
<span style="display:inline-block; width:10px; height:10px; background-color:${point.color}; border-radius:50%; margin-right:5px;"></span>
<span class="font-semibold text-sm">${point.series.name}:</span> <span class="font-semibold text-sm">${point.series.name}:</span>
<span class="font-normal text-sm">${abbreviateNumber(point.y)}</span><br>`; <span class="font-normal text-sm mt-1">${point?.y?.toLocaleString("en-US")}</span><br>`;
}); });
return tooltipContent; return tooltipContent;
@ -161,7 +158,7 @@
}, },
series: [ series: [
{ {
name: sortBy, name: "Employees",
data: valueList, data: valueList,
color: $mode === "light" ? "#2C6288" : "#fff", color: $mode === "light" ? "#2C6288" : "#fff",
animation: false, animation: false,
@ -169,7 +166,7 @@
], ],
plotOptions: { plotOptions: {
column: { column: {
borderRadius: 2, borderRadius: 1,
}, },
}, },
legend: { legend: {
@ -193,7 +190,7 @@
// Add data rows // Add data rows
historyList.forEach((item, index) => { historyList.forEach((item, index) => {
const date = new Date(item.filingDate).toLocaleString("en-US", { const date = new Date(item.date).toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
@ -244,8 +241,8 @@
function generateEmployeeInfoHTML() { function generateEmployeeInfoHTML() {
if (employeeHistory?.length !== 0 && !dateDistance) { if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat("en").format(employees); const formattedEmployees = new Intl.NumberFormat("en").format(employees);
const latestFilingDate = new Date( const latestdate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"], employeeHistory[employeeHistory.length - 1]["date"],
).toLocaleString("en-US", { ).toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -263,7 +260,7 @@
return ` return `
<span> <span>
${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection} ${$displayCompanyName} had ${formattedEmployees} employees on ${latestdate}. The number of employees ${changeDirection}
by ${formattedChangeRate} or by ${formattedChangeRate} or
<span class="${growthRateClass}"> <span class="${growthRateClass}">
${growthRate}% ${growthRate}%
@ -273,8 +270,8 @@
`; `;
} else if (employeeHistory?.length !== 0 && dateDistance) { } else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees); const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date( const latestdate = new Date(
employeeHistory[employeeHistory.length - 1]["filingDate"], employeeHistory[employeeHistory.length - 1]["date"],
).toLocaleString("en-US", { ).toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@ -283,7 +280,7 @@
return ` return `
<span> <span>
${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year. ${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestdate}. Since then, the company has not submitted any additional employee data for more than a year.
</span> </span>
`; `;
} else { } else {
@ -305,7 +302,7 @@
changeRate = employees - employeeHistory?.at(-2)?.employeeCount; changeRate = employees - employeeHistory?.at(-2)?.employeeCount;
dateDistance = dateDistance =
new Date(employeeHistory[employeeHistory?.length - 1]["filingDate"]) < new Date(employeeHistory[employeeHistory?.length - 1]["date"]) <
new Date(new Date().setFullYear(new Date().getFullYear() - 1)) new Date(new Date().setFullYear(new Date().getFullYear() - 1))
? true ? true
: false; : false;
@ -331,7 +328,7 @@
</script> </script>
<SEO <SEO
title={`${$displayCompanyName} (${$stockTicker}) Number of Employees ${historyList?.at(-1)?.filingDate?.slice(0, 4)} - ${historyList?.at(0)?.filingDate?.slice(0, 4)} · Stocknear`} title={`${$displayCompanyName} (${$stockTicker}) Number of Employees ${historyList?.at(-1)?.date?.slice(0, 4)} - ${historyList?.at(0)?.date?.slice(0, 4)} · Stocknear`}
description={`Current and historical number of employees for ${$displayCompanyName} (${$stockTicker}) with related statistics, a chart and a data table.`} description={`Current and historical number of employees for ${$displayCompanyName} (${$stockTicker}) with related statistics, a chart and a data table.`}
/> />
@ -557,7 +554,7 @@
<td <td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap" class="text-start text-sm sm:text-[1rem] whitespace-nowrap"
> >
{new Date(item?.filingDate)?.toLocaleString("en-US", { {new Date(item?.date)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",