@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/components/crud-empty-state.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { FilterX, Inbox, Search } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+
+import { Button } from "../../ui";
+
+interface CrudEmptyStateProps {
+  config: EntityConfig;
+  hasSearch?: boolean;
+  hasFilters?: boolean;
+  onClearSearch?: () => void;
+  onClearFilters?: () => void;
+  onCreate?: () => void;
+  canCreate?: boolean;
+}
+
+export function CrudEmptyState({
+  config,
+  hasSearch = false,
+  hasFilters = false,
+  onClearSearch,
+  onClearFilters,
+  onCreate,
+  canCreate = false,
+}: CrudEmptyStateProps) {
+  const hasActiveFilters = hasSearch || hasFilters;
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center py-16 sm:py-20 px-4"
+      role="status"
+      aria-live="polite"
+    >
+      <div
+        className="rounded-full bg-muted/50 p-4 sm:p-5 mb-4 sm:mb-6 transition-all duration-300"
+        aria-hidden="true"
+      >
+        {hasActiveFilters ? (
+          <Search className="h-8 w-8 sm:h-10 sm:w-10 text-muted-foreground" />
+        ) : (
+          <Inbox className="h-8 w-8 sm:h-10 sm:w-10 text-muted-foreground" />
+        )}
+      </div>
+
+      <h3 className="text-lg sm:text-xl font-semibold mb-2 sm:mb-3 text-center">
+        {hasActiveFilters
+          ? "No results found"
+          : `No ${config.pluralLabel.toLowerCase()} yet`}
+      </h3>
+
+      <p className="text-sm sm:text-base text-muted-foreground text-center max-w-md mb-6 sm:mb-8 px-2">
+        {hasActiveFilters
+          ? `We couldn't find any ${config.pluralLabel.toLowerCase()} matching your search or filters. Try adjusting your filters or search terms.`
+          : `Get started by creating your first ${config.label.toLowerCase()}.`}
+      </p>
+
+      <div className="flex items-center gap-2 sm:gap-3 flex-wrap justify-center w-full sm:w-auto">
+        {hasActiveFilters && (
+          <>
+            {hasSearch && onClearSearch && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onClearSearch}
+                className="gap-2 w-full sm:w-auto"
+                aria-label="Clear search"
+              >
+                <Search className="h-4 w-4" aria-hidden="true" />
+                <span className="hidden sm:inline">Clear search</span>
+                <span className="sm:hidden">Clear</span>
+              </Button>
+            )}
+            {hasFilters && onClearFilters && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onClearFilters}
+                className="gap-2 w-full sm:w-auto"
+                aria-label="Clear all filters"
+              >
+                <FilterX className="h-4 w-4" aria-hidden="true" />
+                <span className="hidden sm:inline">Clear filters</span>
+                <span className="sm:hidden">Clear</span>
+              </Button>
+            )}
+          </>
+        )}
+
+        {!hasActiveFilters && canCreate && onCreate && (
+          <Button
+            onClick={onCreate}
+            size="sm"
+            className="w-full sm:w-auto"
+            aria-label={`Create new ${config.label.toLowerCase()}`}
+          >
+            Create {config.label}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/crud/components/crud-export-button.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useState } from "react";
+import { Download, ChevronDown } from "lucide-react";
+
+import type { ActiveFilter, ExportOptions } from "../../types";
+
+import { buildQueryString } from "../lib/crud-utils";
+
+import { toast } from "sonner";
+import { Button } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/primitives/client";
+
+interface CrudExportButtonProps {
+  endpoint: string;
+  filters?: ActiveFilter[];
+  search?: string;
+  canExport?: boolean;
+  format?: ExportOptions["format"];
+}
+
+export function CrudExportButton({
+  endpoint,
+  filters = [],
+  search,
+  canExport = true,
+}: CrudExportButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+
+  if (!canExport) {
+    return null;
+  }
+
+  const handleExport = async (scope: "current" | "all") => {
+    setLoading(true);
+
+    try {
+      // If scope is 'all', we ignore the current filters
+      const activeFilters = scope === "current" ? filters : undefined;
+      const activeSearch = scope === "current" ? search : undefined;
+
+      const queryParams = buildQueryString({
+        page: 1,
+        pageSize: 10000, // Large page size for export
+        filters:
+          activeFilters && activeFilters.length > 0 ? activeFilters : undefined,
+        search: activeSearch,
+      });
+
+      // Always force format to xlsx
+      const url = `${endpoint}?${queryParams}&format=xlsx`;
+
+      const response = await fetch(url);
+      if (!response.ok) {
+        // Try to get error message from response
+        let errorMessage = "Export failed";
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.error || errorMessage;
+        } catch {
+          // If response is not JSON, use status text
+          errorMessage = `${response.status} ${response.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const blob = await response.blob();
+
+      // Get filename from Content-Disposition header or use default
+      const contentDisposition = response.headers.get("Content-Disposition");
+      let filename = `export.xlsx`;
+      if (contentDisposition) {
+        // Parse filename from Content-Disposition header
+        // Format: attachment; filename="filename.ext" or attachment; filename=filename.ext
+        // Try multiple patterns to handle different formats
+        let filenameMatch = contentDisposition.match(
+          /filename\*?=['"]?([^'";\n]+)['"]?/i,
+        );
+        if (!filenameMatch) {
+          filenameMatch = contentDisposition.match(
+            /filename[^=]*=\s*['"]?([^'";\n]+)['"]?/i,
+          );
+        }
+        if (filenameMatch && filenameMatch[1]) {
+          filename = filenameMatch[1].trim();
+          // Remove any trailing underscores, spaces, or quotes
+          filename = filename.replace(/[_\s"']+$/, "");
+        }
+      }
+
+      // Ensure filename has correct extension
+      if (!filename.toLowerCase().endsWith(".xlsx")) {
+        filename = `${filename}.xlsx`;
+      }
+
+      // Download file
+      const downloadUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      // Delay revoke to ensure download completes
+      // Revoke after a short delay to allow browser to start download
+      setTimeout(() => {
+        URL.revokeObjectURL(downloadUrl);
+      }, 100);
+
+      toast.success("Export Successful", {
+        description: `File "${filename}" downloaded successfully`,
+      });
+    } catch (error) {
+      console.error("Export error:", error);
+      toast.error("Export Failed", {
+        description:
+          error instanceof Error ? error.message : "Please try again.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={loading}
+        className="rounded-r-none border-r-0"
+        onClick={() => handleExport("current")}
+      >
+        <Download className="mr-2 h-4 w-4" />
+        {loading ? "Exporting..." : "Export"}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={loading}
+            className="rounded-l-none px-2"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => handleExport("current")}>
+            Export Current View (XLSX)
+            {filters.length > 0 && (
+              <span className="ml-2 text-xs text-muted-foreground">
+                (Filtered)
+              </span>
+            )}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleExport("all")}>
+            Export All Data (XLSX)
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}