Physical address
+
CIPC Physical address
{company.physical_address ? (
{text(company.physical_address)}
) : null}
@@ -278,6 +246,7 @@ export default async function CompanyDetailPage({ params }: Props) {
Postal address
+
CIPC Postal address
{company.postal_address ? (
{text(company.postal_address)}
) : null}
diff --git a/components/CipcAnnualReturns.tsx b/components/CipcAnnualReturns.tsx
new file mode 100644
index 0000000..04fc597
--- /dev/null
+++ b/components/CipcAnnualReturns.tsx
@@ -0,0 +1,494 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface AnnualReturn {
+ id: string;
+ ar_year: number;
+ ar_month: string;
+ is_filed: boolean;
+ date_filed: string;
+ amount_paid: number;
+ ar_non_compliance_date: string;
+ source: string;
+}
+
+interface Props {
+ companyId: string;
+ companyName: string;
+}
+
+const PB_URL = process.env.NEXT_PUBLIC_PB_URL ?? "";
+const PB_TOKEN =
+ typeof window !== "undefined" ? localStorage.getItem("pb_token") ?? "" : "";
+
+async function fetchAnnualReturns(companyId: string): Promise
{
+ const res = await fetch(
+ `${PB_URL}/api/collections/ysterbaard_annual_returns/records?perPage=200&filter=(company="${companyId}")&sort=ar_year,-ar_month`,
+ { headers: { Authorization: `Bearer ${PB_TOKEN}` } }
+ );
+ if (!res.ok) return [];
+ const data = await res.json();
+ return data.items ?? [];
+}
+
+const MONTH_ORDER = [
+ "JANUARY",
+ "FEBRUARY",
+ "MARCH",
+ "APRIL",
+ "MAY",
+ "JUNE",
+ "JULY",
+ "AUGUST",
+ "SEPTEMBER",
+ "OCTOBER",
+ "NOVEMBER",
+ "DECEMBER",
+];
+
+function sortRecords(records: AnnualReturn[]) {
+ return [...records].sort((a, b) => {
+ if (b.ar_year !== a.ar_year) return b.ar_year - a.ar_year;
+ return MONTH_ORDER.indexOf(a.ar_month) - MONTH_ORDER.indexOf(b.ar_month);
+ });
+}
+
+function FiledBadge({ filed }: { filed: boolean }) {
+ return filed ? (
+
+
+ Filed
+
+ ) : (
+
+ Outstanding
+
+ );
+}
+
+function SourceBadge({ source }: { source: string }) {
+ return (
+ {source}
+ );
+}
+
+function formatAmount(amount: number) {
+ const abs = Math.abs(amount);
+ return abs > 0 ? `R ${abs.toLocaleString()}` : "—";
+}
+
+function formatDate(dateStr: string) {
+ if (!dateStr) return "—";
+ const d = new Date(dateStr + "T00:00:00");
+ return d.toLocaleDateString("en-ZA", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+}
+
+export default function CipcAnnualReturns({ companyId, companyName }: Props) {
+ const [records, setRecords] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetchAnnualReturns(companyId).then((data) => {
+ setRecords(data);
+ setLoading(false);
+ });
+ }, [companyId]);
+
+ const sorted = sortRecords(records);
+ const latestYear = sorted[0]?.ar_year;
+
+ // Split into: last-3-filed (most recent 3 filed records), outstanding, non-compliant
+ const filedRecords = sorted.filter((r) => r.is_filed);
+ const outstandingRecords = sorted.filter(
+ (r) => !r.is_filed && !r.ar_non_compliance_date
+ );
+ const nonCompliantRecords = sorted.filter(
+ (r) => !r.is_filed && Boolean(r.ar_non_compliance_date)
+ );
+
+ // Last 3 filed submissions
+ const lastThree = filedRecords.slice(0, 3);
+
+ // Overall compliance state
+ const hasNonCompliant = nonCompliantRecords.length > 0;
+ const hasOutstanding = outstandingRecords.length > 0;
+ const overallState = hasNonCompliant
+ ? "non-compliant"
+ : hasOutstanding
+ ? "outstanding"
+ : filedRecords.length > 0
+ ? "compliant"
+ : "no-data";
+
+ const stateLabel = {
+ "non-compliant": "Non-compliant",
+ outstanding: "Outstanding",
+ compliant: "Compliant",
+ "no-data": "No data",
+ }[overallState];
+
+ const stateVariant = overallState; // used for chip colour
+
+ return (
+
+ {/* Header */}
+
+
+
+ CIPC Annual Returns — Best Portal
+
+
+ From ysterbaard_annual_returns — filed directly on CIPC.
+
+
+ {/* Overall state chips */}
+
+
+
+ {stateLabel}
+
+
+
+ No data
+
+
+
+ Outstanding
+
+
+
+ Non-compliant
+
+
+
+ Loading annual returns…
+
+ ) : sorted.length === 0 ? (
+
+ No annual return records found for {companyName}.
+
+ ) : (
+
+ {/* ── Last 3 submissions table ── */}
+ {lastThree.length > 0 && (
+
+
+ Last 3 submissions
+
+
+
+
+
+ |
+ Year
+ |
+
+ Month
+ |
+
+ Filing Status
+ |
+
+ Date Filed
+ |
+
+ Amount Paid
+ |
+
+
+
+ {lastThree.map((ret) => (
+
+ |
+ {ret.ar_year}
+ |
+
+ {ret.ar_month.toLowerCase()}
+ |
+
+
+ |
+
+ {formatDate(ret.date_filed)}
+ |
+
+ {formatAmount(ret.amount_paid)}
+ |
+
+ ))}
+
+
+
+
+ )}
+
+ {/* ── Outstanding Annual Returns ── */}
+ {outstandingRecords.length > 0 && (
+
+
+ {/* Warning triangle icon */}
+
+
+ Outstanding Annual Returns
+
+
+
+ {outstandingRecords.slice(0, 10).map((ret) => (
+
+
+ {ret.ar_month.charAt(0) +
+ ret.ar_month.slice(1).toLowerCase()}{" "}
+ {ret.ar_year}
+
+
+ Due:{" "}
+ {new Date(ret.ar_year, MONTH_ORDER.indexOf(ret.ar_month), 31)
+ .toLocaleDateString("en-ZA", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ })
+ .replace("Invalid", "—")}
+
+
+ ))}
+ {outstandingRecords.length > 10 && (
+
+ +{outstandingRecords.length - 10} more
+
+ )}
+
+
+ )}
+
+ {/* ── AR Non-Compliant State ── */}
+ {nonCompliantRecords.length > 0 && (
+
+
+ {/* X-circle icon */}
+
+
+ AR Non-Compliant State
+
+
+
+ {nonCompliantRecords.map((ret) => {
+ const complianceDate = ret.ar_non_compliance_date
+ ? new Date(ret.ar_non_compliance_date + "T00:00:00")
+ : null;
+ const now = new Date();
+ const monthsOverdue =
+ complianceDate
+ ? (now.getFullYear() - complianceDate.getFullYear()) * 12 +
+ (now.getMonth() - complianceDate.getMonth())
+ : null;
+ return (
+
+
+
+ {ret.ar_month.charAt(0) +
+ ret.ar_month.slice(1).toLowerCase()}{" "}
+ {ret.ar_year}
+
+
+
+ {complianceDate && (
+
+ Non-compliant:{" "}
+ {complianceDate.toLocaleDateString("en-ZA", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ })}
+
+ )}
+ {monthsOverdue !== null && (
+
+ {monthsOverdue <= 0
+ ? "< 1 month overdue"
+ : `${monthsOverdue} month${monthsOverdue !== 1 ? "s" : ""} overdue`}
+
+ )}
+
+
+ );
+ })}
+
+
+ )}
+
+ {/* ── Full history table (collapsible) ── */}
+ {sorted.length > 3 && (
+
+
+
+ Show all {sorted.length} records
+
+
+
+
+
+ |
+ Year
+ |
+
+ Month
+ |
+
+ Status
+ |
+
+ Date Filed
+ |
+
+ Amount Paid
+ |
+
+ Source
+ |
+
+
+
+ {sorted.map((ret) => (
+
+ |
+ {ret.ar_year}
+ |
+
+ {ret.ar_month.toLowerCase()}
+ |
+
+
+ |
+
+ {formatDate(ret.date_filed)}
+ |
+
+ {formatAmount(ret.amount_paid)}
+ |
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+
+
Compliance snapshot
+
+
+
+ {/* ── 1. BizPortal ── */}
+
+ {/* BizPortal header */}
+
+
+ {/* BizPortal icon */}
+
+
+
+
+
BizPortal — CIPC Annual Returns
+
From ysterbaard_annual_returns
+
+
+
+
+ {/* BizPortal body */}
+
+ {records.length === 0 ? (
+
No annual return records found for {companyName}.
+ ) : (
+
+ {/* Last 3 submissions */}
+
+
Last 3 submissions
+
+
+
+
+ | Year |
+ Month |
+ Date Filed |
+ Amount Paid |
+ Status |
+
+
+
+ {lastThree.length > 0 ? lastThree.map((ret) => (
+
+ | {ret.ar_year} |
+ {ret.ar_month.toLowerCase()} |
+ {formatDate(ret.date_filed)} |
+ {formatAmount(ret.amount_paid)} |
+ {filedBadge(ret.is_filed)} |
+
+ )) : (
+
+ | No filed submissions yet. |
+
+ )}
+
+
+
+
+
+ {/* Next dates row */}
+
+
+
Next submission date
+
{getNextSubmissionDate(latestYear)}
+
+ {nonCompliant ? (() => {
+ const d = new Date(nonCompliant.ar_non_compliance_date + "T00:00:00");
+ const now = new Date();
+ const months = (now.getFullYear() - d.getFullYear()) * 12 + (now.getMonth() - d.getMonth());
+ const overdueLabel = months <= 0 ? "< 1 month overdue" : `${months} month${months !== 1 ? "s" : ""} overdue`;
+ return (
+
+
Non-compliance date
+
{formatDate(nonCompliant.ar_non_compliance_date)}
+
{overdueLabel}
+
+ );
+ })() : (
+
+
Non-compliance date
+
—
+
+ )}
+
+
+ )}
+
+
+
+ {/* ── 2. SARS ── */}
+
+
+
+ {/* SARS icon */}
+
+
+
SARS
+
Income Tax · IRP6 · PAYE
+
+
+
+
+
+
+
No data yet
+
SARS compliance data will appear here once populated in PocketBase.
+
+
+
+
+
-
+