fix: DataTable error/403 state (T1-2)

Author: Fr1ngg

web/admin/src/components/ui/DataTable.tsx

@@ -1,4 +1,6 @@
+import { isForbidden } from "@remnacore/shared";
 import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 
 export type Column<T> = {
   key: string;
@@ -14,6 +16,8 @@ export function DataTable<T>({
   rowKey,
   onRowClick,
   empty = "NO DATA",
+  error,
+  onRetry,
 }: {
   columns: Column<T>[];
   rows: T[];
@@ -22,7 +26,12 @@ export function DataTable<T>({
   rowKey: (r: T) => string;
   onRowClick?: (r: T) => void;
   empty?: string;
+  /** Fetch error, if any. Rendered as a distinct state — NOT the empty state. */
+  error?: unknown;
+  /** Retry callback (e.g. react-query refetch); shown for non-403 errors. */
+  onRetry?: () => void;
 }) {
+  const { t } = useTranslation();
   const grid = { gridTemplateColumns: cols, gap: "14px" } as const;
   return (
     <section className="border border-line bg-surface">
@@ -36,7 +45,28 @@ export function DataTable<T>({
           </span>
         ))}
       </div>
-      {rows.length === 0 ? (
+      {error ? (
+        <div className="flex flex-col items-center gap-3 px-4 py-10 text-center">
+          <span
+            className={`text-[11px] uppercase tracking-[1.5px] ${
+              isForbidden(error) ? "text-warn" : "text-danger"
+            }`}
+          >
+            {isForbidden(error)
+              ? t("common.accessDenied")
+              : t("common.loadFailed")}
+          </span>
+          {!isForbidden(error) && onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="border border-line px-3 py-1.5 text-[10px] uppercase tracking-[1px] text-t3 hover:bg-white/[.03]"
+            >
+              {t("common.retry")}
+            </button>
+          )}
+        </div>
+      ) : rows.length === 0 ? (
         <div className="px-4 py-10 text-center text-[11px] uppercase tracking-[2px] text-t7">
           {empty}
         </div>

web/admin/src/routes/invoices.tsx

@@ -24,7 +24,12 @@ function statusTone(status: InvoiceStatus): Tone {
 export function AdminInvoicesPage() {
   const { t } = useTranslation();
   const [pagination, setPagination] = useState({ limit: 50, offset: 0 });
-  const { data: invoices, isLoading } = useAdminInvoices(pagination);
+  const {
+    data: invoices,
+    isLoading,
+    error,
+    refetch,
+  } = useAdminInvoices(pagination);
 
   const columns: Column<Invoice>[] = [
     {
@@ -89,6 +94,8 @@ export function AdminInvoicesPage() {
       <DataTable<Invoice>
         columns={columns}
         rows={isLoading ? [] : (invoices ?? [])}
+        error={error}
+        onRetry={refetch}
         cols=".9fr 1.1fr .9fr 1fr 1.1fr 1.1fr"
         rowKey={(inv) => inv.id}
         empty={isLoading ? t("common.loading").toUpperCase() : "NO INVOICES"}

web/admin/src/routes/reseller/commissions.tsx

@@ -17,7 +17,12 @@ import { NoShop } from "./dashboard";
 export function ResellerCommissionsPage() {
   const { t } = useTranslation();
   const { activeShopId } = useShopStore();
-  const { data: commissions, isLoading } = useResellerCommissions(activeShopId);
+  const {
+    data: commissions,
+    isLoading,
+    error,
+    refetch,
+  } = useResellerCommissions(activeShopId);
 
   if (!activeShopId) {
     return <NoShop title={t("reseller.commissions.title")} />;
@@ -63,6 +68,8 @@ export function ResellerCommissionsPage() {
       <DataTable
         columns={columns}
         rows={commissions ?? []}
+        error={error}
+        onRetry={refetch}
         cols="1.4fr .8fr .8fr 1fr"
         rowKey={(c) => c.id}
         empty={

web/admin/src/routes/reseller/customers.tsx

@@ -11,7 +11,12 @@ import { NoShop } from "./dashboard";
 export function ResellerCustomersPage() {
   const { t } = useTranslation();
   const { activeShopId } = useShopStore();
-  const { data: customers, isLoading } = useResellerCustomers(activeShopId);
+  const {
+    data: customers,
+    isLoading,
+    error,
+    refetch,
+  } = useResellerCustomers(activeShopId);
 
   if (!activeShopId) {
     return <NoShop title={t("reseller.customers.title")} />;
@@ -50,6 +55,8 @@ export function ResellerCustomersPage() {
       <DataTable
         columns={columns}
         rows={customers ?? []}
+        error={error}
+        onRetry={refetch}
         cols="1.4fr 1fr .6fr 1fr"
         rowKey={(c) => c.user_id}
         empty={isLoading ? t("common.loading") : t("reseller.customers.empty")}

web/admin/src/routes/subscriptions/index.tsx

@@ -27,7 +27,12 @@ export function AdminSubscriptionsPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [pagination, setPagination] = useState({ limit: 50, offset: 0 });
-  const { data: subs, isLoading } = useAdminSubscriptions(pagination);
+  const {
+    data: subs,
+    isLoading,
+    error,
+    refetch,
+  } = useAdminSubscriptions(pagination);
 
   const columns: Column<Subscription>[] = [
     {
@@ -88,6 +93,8 @@ export function AdminSubscriptionsPage() {
       <DataTable<Subscription>
         columns={columns}
         rows={isLoading ? [] : (subs ?? [])}
+        error={error}
+        onRetry={refetch}
         cols=".9fr 1.1fr 1.1fr 1fr 1.1fr 40px"
         rowKey={(s) => s.id}
         onRowClick={(s) =>

web/admin/src/routes/tenants/index.tsx

@@ -35,7 +35,12 @@ export function TenantsPage() {
   const navigate = useNavigate();
   const [showForm, setShowForm] = useState(false);
   const [pagination, setPagination] = useState({ limit: 50, offset: 0 });
-  const { data: tenants, isLoading } = useAdminTenants(pagination);
+  const {
+    data: tenants,
+    isLoading,
+    error,
+    refetch,
+  } = useAdminTenants(pagination);
   const createTenant = useCreateTenant();
 
   const {
@@ -165,6 +170,8 @@ export function TenantsPage() {
       <DataTable<Tenant>
         columns={columns}
         rows={isLoading ? [] : (tenants ?? [])}
+        error={error}
+        onRetry={refetch}
         cols="1.6fr 1fr .9fr 1fr 40px"
         rowKey={(tn) => tn.id}
         onRowClick={(tn) =>

web/admin/src/routes/users/index.tsx

@@ -21,7 +21,7 @@ export function UsersPage() {
   const [pagination, setPagination] = useState({ limit: 50, offset: 0 });
   const [roleFilter, setRoleFilter] = useState<RoleFilter>("all");
   const [search, setSearch] = useState("");
-  const { data: users, isLoading } = useAdminUsers(pagination);
+  const { data: users, isLoading, error, refetch } = useAdminUsers(pagination);
 
   const filtered = useMemo(() => {
     const term = search.trim().toLowerCase();
@@ -108,6 +108,8 @@ export function UsersPage() {
       <DataTable<User>
         columns={columns}
         rows={isLoading ? [] : filtered}
+        error={error}
+        onRetry={refetch}
         cols="1.6fr .8fr .9fr 1fr 40px"
         rowKey={(u) => u.id}
         onRowClick={(u) => navigate({ to: "/users/$id", params: { id: u.id } })}

web/shared/api/errors.ts

@@ -0,0 +1,21 @@
+import { HTTPError } from "ky";
+
+/** True when err is a ky HTTP error with the given status. */
+function hasStatus(err: unknown, status: number): boolean {
+  return err instanceof HTTPError && err.response.status === status;
+}
+
+/** A 403 — the caller is authenticated but lacks permission for the resource. */
+export function isForbidden(err: unknown): boolean {
+  return hasStatus(err, 403);
+}
+
+/** A 401 — the caller is not (or no longer) authenticated. */
+export function isUnauthorized(err: unknown): boolean {
+  return hasStatus(err, 401);
+}
+
+/** Either an auth (401) or authorization (403) failure. */
+export function isAuthError(err: unknown): boolean {
+  return isUnauthorized(err) || isForbidden(err);
+}

web/shared/index.ts

@@ -12,6 +12,7 @@ export {
   apiPutVoid,
 } from "./api/client.js";
 export { ENDPOINTS } from "./api/endpoints.js";
+export * from "./api/errors.js";
 export * from "./api/hooks/useAdmin.js";
 // Hooks - API
 export * from "./api/hooks/useAuth.js";

web/shared/lib/i18n.ts

@@ -6,6 +6,8 @@ const en = {
     loading: "Loading...",
     error: "Something went wrong",
     retry: "Retry",
+    loadFailed: "Failed to load",
+    accessDenied: "Access denied — you don't have permission to view this",
     save: "Save",
     cancel: "Cancel",
     delete: "Delete",
@@ -376,6 +378,8 @@ const ru: typeof en = {
     loading: "Загрузка...",
     error: "Что-то пошло не так",
     retry: "Повторить",
+    loadFailed: "Не удалось загрузить",
+    accessDenied: "Доступ запрещён — у вас нет прав на просмотр",
     save: "Сохранить",
     cancel: "Отмена",
     delete: "Удалить",