Skip to content

Instantly share code, notes, and snippets.

@AlexandroMtzG
Created February 6, 2023 04:31
Show Gist options
  • Save AlexandroMtzG/ff159bc73f8ccbafac777c9fb114d89e to your computer and use it in GitHub Desktop.
Save AlexandroMtzG/ff159bc73f8ccbafac777c9fb114d89e to your computer and use it in GitHub Desktop.
import clsx from "clsx";
import { Fragment } from "react";
import { DocumentTypeDto } from "~/modules/codeGeneratorTests/document-types/dtos/DocumentTypeDto";
import { DocumentDto } from "~/modules/codeGeneratorTests/documents/dtos/DocumentDto";
import DateUtils from "~/utils/shared/DateUtils";
import DocumentTypeHelper from "../helpers/DocumentTypeHelper";
interface Props {
year: number;
types: DocumentTypeDto[];
documents: DocumentDto[];
onClick?: (type: DocumentTypeDto, year: number, period: number) => void;
}
export default function AccountDocuments({ year, types, documents, onClick }: Props) {
return (
<div className="overflow-x-auto rounded-lg border border-gray-200 bg-white">
<table className="w-full">
<thead>
<tr>
<th rowSpan={2} className="w-full border border-gray-200 bg-gray-100 px-4 py-2 text-left text-sm font-bold text-gray-600">
Document Type
</th>
{Array.from(Array(12).keys()).map((idx) => (
<Fragment key={idx}>
<th className="w-1/12 border border-gray-200 bg-gray-100 px-4 py-2 text-center text-sm text-gray-600">
<div className="flex">
<div className="font-bold">{DateUtils.getMonthName(idx + 1)}</div>
{DateUtils.isCurrentMonth(year, idx + 1) && (
<div className="text-xs font-medium lowercase text-theme-400">
<span className="inline-flex flex-shrink-0 items-center rounded-full p-1 text-xs font-medium text-red-500">
<svg className="h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
<circle cx={4} cy={4} r={3} />
</svg>
</span>
</div>
)}
</div>
</th>
</Fragment>
))}
</tr>
</thead>
<tbody>
{types.map((type) => (
<tr key={type.name}>
<td className="truncate border border-gray-200 px-4 py-2 text-left text-sm text-gray-600">{type.name}</td>
{DocumentTypeHelper.getDocumentTypePeriods({ type, year }).map((_, idx) => (
<td
key={idx}
className="border text-center text-sm text-gray-600"
colSpan={12 / DocumentTypeHelper.getDocumentTypePeriods({ type, year }).length}
>
<DocumentPeriodStatus
status={DocumentTypeHelper.getDocumentInPeriodStatus({ documents, type, year, period: idx + 1 })}
onClick={() => (onClick ? onClick(type, year, idx + 1) : undefined)}
/>
{/* <TimelineBadge timeline={DocumentTypeHelper.getDocumentTypeTimeline({ type, year, period: idx + 1 })} /> */}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
function DocumentPeriodStatus({ status, onClick }: { status: "valid" | "pending" | "missing" | "n/a"; onClick?: () => void }) {
return (
<div
onClick={onClick}
className={clsx(
"flex h-10 w-full justify-center py-3 text-xs font-bold",
status === "valid" && "bg-teal-100 text-teal-800",
status === "missing" && "bg-red-100 text-red-800",
status === "n/a" && "bg-gray-200 text-gray-800",
status === "pending" && "bg-white text-gray-800",
onClick ? "cursor-pointer" : "cursor-default",
onClick && status === "valid" && "hover:bg-teal-200",
onClick && status === "missing" && "hover:bg-red-200",
onClick && status === "n/a" && "hover:bg-gray-100",
onClick && status === "pending" && "hover:bg-gray-100"
)}
>
{status === "valid" && <span>✓</span>}
{status === "missing" && <span>✗</span>}
{status === "n/a" && <span></span>}
{status === "pending" && (
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
<path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z" />
<path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
</svg>
</span>
)}
</div>
);
}
function TimelineBadge({ timeline }: { timeline: "past" | "current" | "future" }) {
return (
<>
{timeline === "past" && <div className="h-10 w-full bg-orange-100 py-3 text-xs font-bold text-orange-800">Past</div>}
{timeline === "current" && <div className="h-10 w-full bg-teal-100 py-3 text-xs font-bold text-teal-800">Current</div>}
{timeline === "future" && <div className="h-10 w-full bg-gray-100 py-3 text-xs font-bold text-gray-800">Future</div>}
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment