create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/apps/dashboard/src/components/media/MediaCard.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import Image from "next/image";
+import { toast } from "sonner";
+import {
+  MoreVertical,
+  Trash2,
+  Download,
+  ImageIcon,
+  FileIcon,
+  Edit,
+  Info,
+} from "lucide-react";
+
+import { useDialog } from "@workspace/ui/hooks/use-dialog";
+import { useConfirm } from "@workspace/ui/hooks/use-confirm";
+import { cn, handleDownload } from "@workspace/ui/lib/utils";
+import { Button } from "@workspace/ui/components/button";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+
+import MediaDetails from "./MediaDetails";
+import MediaForm from "@/components/forms/MediaForm";
+import { useDeleteMedia, useUpdateMedia } from "@/hooks/media";
+
+interface MediaCardProps {
+  media: MediaResponse;
+  onSelect?: (media: MediaResponse) => void;
+}
+
+export function MediaCard({ media, onSelect }: MediaCardProps) {
+  const { openDialog, closeDialog } = useDialog();
+  const { confirm } = useConfirm();
+  const { updateAsync } = useUpdateMedia(media.id);
+  const { deleteAsync, isDeleting } = useDeleteMedia();
+  const isImage = media.mimeType.startsWith("image/");
+
+  const handleDelete = async (id: string) => {
+    const ok = await confirm();
+    if (!ok) return;
+    await deleteAsync({ id });
+  };
+
+  const handleUpdate = async (data: MediaUpdateType) => {
+    try {
+      await updateAsync(data);
+      toast.success("Media Updated Successfully.");
+      closeDialog();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.log("error:", err);
+      toast.error(err.message);
+    }
+  };
+
+  return (
+    <div
+      onClick={() => onSelect?.(media)}
+      className={cn(
+        "group relative overflow-hidden rounded-xl border bg-background transition-all duration-300 ease-out",
+        onSelect && "cursor-pointer hover:ring-2 hover:ring-primary",
+      )}
+    >
+      {/* Preview */}
+      <div className="relative aspect-square bg-muted overflow-hidden">
+        {isImage ? (
+          <Image
+            src={media.url}
+            alt={media.filename}
+            fill
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <FileIcon className="size-10 text-muted-foreground" />
+          </div>
+        )}
+
+        {/* Top overlay */}
+        <div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out" />
+
+        {/* Actions */}
+        <div className="absolute top-2 right-2 sm:opacity-0 sm:group-hover:opacity-100 sm:transition-all sm:duration-300 ease-out">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                variant="secondary"
+                className="size-8 rounded-full"
+              >
+                <MoreVertical />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="end"
+              className="w-40 [&>div]:cursor-pointer"
+            >
+              <DropdownMenuItem
+                onClick={() =>
+                  openDialog({
+                    title: "Media Details",
+                    content: <MediaDetails media={media} />,
+                  })
+                }
+              >
+                <Info />
+                Details
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="w-full"
+                onClick={() =>
+                  openDialog({
+                    title: "Update Media Form",
+                    content: (
+                      <MediaForm
+                        media={media}
+                        isPublic
+                        onSubmit={handleUpdate}
+                      />
+                    ),
+                  })
+                }
+              >
+                <Edit />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleDownload(media)}>
+                <Download />
+                Download
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onClick={() => handleDelete(media.id)}
+                disabled={isDeleting}
+              >
+                <Trash2 />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* File type badge */}
+        <div className="absolute bottom-2 left-2 flex items-center gap-1 rounded-md bg-black/60 px-2 py-0.5 text-xs text-white">
+          {isImage ? (
+            <ImageIcon className="size-3" />
+          ) : (
+            <FileIcon className="size-3" />
+          )}
+          {media.mimeType.split("/")[1]}
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="space-y-1 p-3">
+        <p className="truncate text-sm font-medium">{media.title}</p>
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span> {(media.size / 1024).toFixed(1)} KB</span>
+          <span>{new Date(media.createdAt).toLocaleDateString()}</span>
+        </div>
+        <span className="truncate text-[11px] text-muted-foreground">
+          By: {media.uploadedBy.displayName}
+        </span>
+      </div>
+    </div>
+  );
+}

package/templates/monorepo-starter/apps/dashboard/src/components/media/MediaDetails.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import { FileIcon } from "lucide-react";
+import { formatDate } from "@workspace/shared/utils";
+
+interface MediaDetailsProps {
+  media: MediaResponse;
+}
+
+const MediaDetails = ({ media }: MediaDetailsProps) => {
+  const isImage = media.mimeType.startsWith("image/");
+
+  return (
+    <div className="space-y-6">
+      {/* Preview */}
+      <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+        {isImage ? (
+          <Image
+            src={media.url}
+            alt={media.altText ?? media.title}
+            fill
+            className="object-contain"
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <FileIcon className="size-12 text-muted-foreground" />
+          </div>
+        )}
+      </div>
+
+      {/* Metadata */}
+      <div className="grid grid-cols-2 gap-4 text-sm">
+        <Detail label="Title" value={media.title} />
+        <Detail label="Filename" value={media.title} />
+        <Detail label="Type" value={media.mimeType} />
+        <Detail label="Size" value={`${(media.size / 1024).toFixed(2)} KB`} />
+        <Detail label="Uploaded By" value={media.uploadedBy.displayName} />
+        <Detail label="Uploaded On" value={formatDate(media.createdAt)} />
+        <Detail label="Visibility" value={media.visibility} />
+        {media.notes && <Detail label="Notes" value={media.notes} />}
+      </div>
+    </div>
+  );
+};
+
+const Detail = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) => (
+  <div className="flex flex-col">
+    <span className="text-muted-foreground text-xs">{label}</span>
+    <span className="font-medium break-all">{value}</span>
+  </div>
+);
+
+export default MediaDetails;

package/templates/monorepo-starter/apps/dashboard/src/components/media/MediaGrid.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { IconCloud } from "@tabler/icons-react";
+import { MediaCard } from "./MediaCard";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@workspace/ui/components/empty";
+
+interface MediaGridProps {
+  medias: MediaResponse[];
+  isLoading?: boolean;
+  onSelect?: (media: MediaResponse) => void;
+}
+
+export function MediaGrid({ medias, isLoading, onSelect }: MediaGridProps) {
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div
+            key={i}
+            className="aspect-square rounded-lg bg-muted animate-pulse"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return medias.length > 0 ? (
+    <div className="grid gap-4 grid-cols-[repeat(auto-fill,minmax(160px,1fr))]">
+      {medias.map((m) => (
+        <MediaCard key={m.id} media={m} onSelect={onSelect} />
+      ))}
+    </div>
+  ) : (
+    <Empty className="border border-dashed">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <IconCloud />
+        </EmptyMedia>
+        <EmptyTitle>Cloud Storage Empty</EmptyTitle>
+        <EmptyDescription>
+          Upload files to your cloud storage to access them anywhere.
+        </EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}

package/templates/monorepo-starter/apps/dashboard/src/components/media/MediaUploader.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import Image from "next/image";
+import { X, Upload } from "lucide-react";
+import { type Accept, useDropzone } from "react-dropzone";
+
+import { MediaTypeEnum } from "@workspace/contracts";
+import { cn } from "@workspace/ui/lib/utils";
+import { Input } from "@workspace/ui/components/input";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
+import { useCreateMedia } from "@/hooks/media";
+
+const MAX_FILES = 1;
+const MAX_SIZE = 2 * 1024 * 1024;
+const ACCEPT: Accept = { "image/*": [] };
+
+const PUBLIC_TYPES: MediaType[] = [];
+
+function formatSize(bytes: number) {
+  return bytes < 1024 * 1024
+    ? `${(bytes / 1024).toFixed(2)} KB`
+    : `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function MediaUploader() {
+  const { createAsync, isCreating } = useCreateMedia();
+  const [files, setFiles] = useState<File[]>([]);
+  const [type, setType] = useState<MediaType>("other");
+
+  const visibility: MediaVisibility = PUBLIC_TYPES.includes(type)
+    ? "public"
+    : "private";
+
+  const onDrop = (acceptedFiles: File[]) => {
+    setFiles(acceptedFiles.slice(0, MAX_FILES));
+  };
+
+  const uploadSequentially = async () => {
+    for (const file of files) {
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("type", type);
+        formData.append("visibility", visibility);
+
+        // TODO Implement These
+        // formData.append("title",title );
+        // formData.append("altText",altText );
+        // formData.append("notes",notes );
+
+        await createAsync(formData);
+
+        toast.success(`${file.name} uploaded`);
+        setFiles([]);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (err: any) {
+        if (err?.status === 409) {
+          toast.error("Upload failed", {
+            description: `${file.name} already exists`,
+          });
+        } else {
+          toast.error(`${file.name} failed`, {
+            description: err?.message,
+          });
+        }
+      }
+    }
+  };
+
+  const removeFile = (file: File) => {
+    setFiles((prev) => prev.filter((f) => f !== file));
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: ACCEPT,
+    maxFiles: MAX_FILES,
+    maxSize: MAX_SIZE,
+    multiple: false,
+    disabled: files.length > 0,
+  });
+
+  const maxSizeMB = Math.round(MAX_SIZE / (1024 * 1024));
+
+  return (
+    <div className="space-y-4">
+      {/* TYPE SELECT */}
+      <div className="flex items-center gap-4">
+        <p className="text-sm text-muted-foreground font-medium">Media Type:</p>
+        <Select value={type} onValueChange={(val) => setType(val as MediaType)}>
+          <SelectTrigger className="capitalize">
+            <SelectValue placeholder="Select type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {MediaTypeEnum.options.map((option) => (
+                <SelectItem key={option} value={option} className="capitalize">
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* FILE LIST */}
+      {files.length > 0 && (
+        <div className="space-y-4">
+          {files.map((file) => (
+            <div
+              key={file.name}
+              className="flex items-center justify-between rounded-lg border px-4 py-3"
+            >
+              <div className="flex items-center gap-4">
+                <Image
+                  src={URL.createObjectURL(file)}
+                  alt={file.name}
+                  width={200}
+                  height={200}
+                  className="size-12 object-cover rounded-md"
+                />
+                <div>
+                  <p className="text-sm font-medium truncate">{file.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatSize(file.size)}
+                  </p>
+                </div>
+              </div>
+
+              <button
+                onClick={() => removeFile(file)}
+                disabled={isCreating}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+          ))}
+
+          <div className="flex justify-end">
+            <Button onClick={uploadSequentially} disabled={isCreating}>
+              {isCreating ? "Uploading..." : "Upload"}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* DROPZONE */}
+      {files.length === 0 && (
+        <div
+          {...getRootProps()}
+          className={cn(
+            "flex flex-col items-center justify-center gap-2 rounded-lg border-[1.5px] border-dashed px-6 py-10 text-center cursor-pointer transition",
+            "border-muted hover:border-primary hover:bg-primary/10",
+            isDragActive && "border-primary bg-primary/10",
+          )}
+        >
+          <Input {...getInputProps()} />
+          <Upload className="size-8 text-muted-foreground" />
+          <p className="text-sm font-medium">
+            Click to upload or drag and drop
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Only images • Max 1 file • {maxSizeMB}MB
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MediaUploader;

package/templates/monorepo-starter/apps/dashboard/src/components/media/index.tsx

@@ -0,0 +1,96 @@
+"use client";
+import { useState } from "react";
+import { Library, Upload } from "lucide-react";
+
+import {
+  Tabs,
+  TabsList,
+  TabsContent,
+  TabsTrigger,
+} from "@workspace/ui/components/tabs";
+
+import { MediaGrid } from "./MediaGrid";
+import MediaUploader from "./MediaUploader";
+import { useMedias } from "@/hooks/media";
+import Pagination from "@/components/shared/Pagination";
+import SearchToolbar from "@/components/shared/SearchToolbar";
+
+interface MediaLibraryProps {
+  onSelect?: (media: MediaResponse) => void;
+}
+
+function MediaLibrary({ onSelect }: MediaLibraryProps) {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [search, setSearch] = useState("");
+  const [searchBy, setSearchBy] = useState<MediaQueryType["searchBy"]>("title");
+  const [sortBy, setSortBy] = useState<MediaQueryType["sortBy"]>("createdAt");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  const [filter, setFilter] = useState<string>();
+
+  const { data, isLoading } = useMedias({
+    page,
+    limit,
+    search,
+    searchBy,
+    sortBy,
+    sortOrder,
+  });
+
+  return (
+    <Tabs asChild defaultValue="library">
+      <section className="space-y-16">
+        <div className="flex flex-col sm:flex-row items-center justify-between  gap-4">
+          <TabsList className="bg-transparent gap-4 border w-1/2">
+            <TabsTrigger value="upload">
+              <Upload /> Upload
+            </TabsTrigger>
+            <TabsTrigger value="library">
+              <Library /> Library
+            </TabsTrigger>
+          </TabsList>
+
+          <SearchToolbar<MediaQueryType>
+            search={search}
+            setPage={setPage}
+            setSearch={setSearch}
+            searchBy={searchBy}
+            setSearchBy={setSearchBy}
+            sortBy={sortBy}
+            setSortBy={setSortBy}
+            sortOrder={sortOrder}
+            filter={filter}
+            setFilter={setFilter}
+            setSortOrder={setSortOrder}
+            searchByOptions={[
+              { label: "Filename", value: "title" },
+              { label: "ID", value: "id" },
+            ]}
+          />
+        </div>
+        <TabsContent value="upload">
+          <MediaUploader />
+        </TabsContent>
+        <TabsContent value="library" className="space-y-6">
+          <MediaGrid
+            medias={data?.medias ?? []}
+            isLoading={isLoading}
+            onSelect={onSelect}
+          />
+          {data && (
+            <Pagination
+              total={data.total}
+              limit={limit}
+              currentPage={page}
+              totalPages={data.totalPages}
+              setLimit={setLimit}
+              setPage={setPage}
+            />
+          )}
+        </TabsContent>
+      </section>
+    </Tabs>
+  );
+}
+
+export default MediaLibrary;

package/templates/monorepo-starter/apps/dashboard/src/components/shared/DateWrapper.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { cn } from "@workspace/ui/lib/utils";
+import { formatDate, type DateMode } from "@workspace/shared/utils";
+
+interface DateWrapperProps {
+  date?: Date | string | number | null;
+  mode?: DateMode;
+  formatString?: string;
+  fallback?: React.ReactNode;
+  className?: string;
+  timeZone?: string;
+  title?: string;
+}
+
+const DateWrapper = ({
+  date,
+  title,
+  mode = "date",
+  formatString,
+  fallback = "—",
+  className = "text-sm",
+  timeZone = "UTC",
+}: DateWrapperProps) => {
+  if (!date) return <span className={className}>{fallback}</span>;
+
+  const parsedDate =
+    typeof date === "string" || typeof date === "number"
+      ? new Date(date)
+      : date;
+  if (isNaN(parsedDate.getTime()))
+    return <span className={className}>{fallback}</span>;
+
+  const formatted = formatDate(parsedDate, mode, formatString, timeZone);
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {title && <span>{title}</span>}
+      <span>{formatted}</span>
+    </div>
+  );
+};
+
+export default DateWrapper;