AccountDocuments.tsx

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>}
    </>
  );
}