create-zhx-monorepo 0.3.0 → 2.1.0

package/README.md

@@ -33,4 +33,4 @@ This will generate a ready-to-use monorepo under `my-new-project` with:
 
 ---
 
-Made with ❤️ by **JZ Digital Labs**
+Made with ❤️ by **ZHX Solutions**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zhx-monorepo",
-  "version": "0.3.0",
+  "version": "2.1.0",
   "description": "Create a ZHX monorepo with one command",
   "bin": {
     "create-zhx-monorepo": "bin/index.js"
@@ -8,11 +8,11 @@
   "type": "module",
   "license": "MIT",
   "engines": {
-    "node": ">=18"
+    "node": ">=24"
   },
   "dependencies": {
     "fs-extra": "^11.3.3",
     "prompts": "^2.4.2",
     "kolorist": "^1.8.0"
   }
-}
+}

package/templates/monorepo-starter/apps/dashboard/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}

package/templates/monorepo-starter/apps/dashboard/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "@workspace/config/eslint/next";

package/templates/monorepo-starter/apps/dashboard/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/monorepo-starter/apps/dashboard/next.config.mjs

@@ -0,0 +1,30 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
+  allowedDevOrigins: ["192.168.100.9"],
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
+
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package/templates/monorepo-starter/apps/dashboard/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "dashboard",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "postbuild": "next-sitemap --config sitemap.config.cjs",
+    "start": "next start",
+    "lint": "eslint",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^3.39.0",
+    "@tanstack/react-form": "^1.28.4",
+    "@tanstack/react-query": "^5.90.21",
+    "@workspace/sdk": "workspace:*",
+    "@workspace/shared": "workspace:*",
+    "@workspace/ui": "workspace:*",
+    "cookies-next": "^6.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-dropzone": "^15.0.0",
+    "recharts": "3.7.0",
+    "sonner": "^2.0.7",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.3",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/config": "workspace:*",
+    "@workspace/contracts": "workspace:*",
+    "eslint": "^9.39.3",
+    "eslint-config-next": "^16.1.6"
+  }
+}

package/templates/monorepo-starter/apps/dashboard/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

package/templates/monorepo-starter/apps/dashboard/src/app/(root)/admin/users/[id]/edit/page.tsx

@@ -0,0 +1,8 @@
+import CUUserForm from "@/components/forms/CUUserForm";
+
+const page = async ({ params }: AppPageProps<{ id: string }>) => {
+  const { id } = await params;
+  return <CUUserForm formType="update" entityId={id} />;
+};
+
+export default page;

package/templates/monorepo-starter/apps/dashboard/src/app/(root)/admin/users/[id]/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+
+import { useAdminUser } from "@/hooks/admin";
+import { Badge } from "@workspace/ui/components/badge";
+
+import {
+  type SectionConfig,
+  GenericDetailsPage,
+} from "@/components/shared/GenericDetailsPage";
+
+const sections: SectionConfig<UserResponse>[] = [
+  {
+    title: "Profile Information",
+    fields: [
+      { label: "First Name", accessor: "firstName" },
+      { label: "Last Name", accessor: "lastName" },
+      { label: "Display Name", accessor: "displayName" },
+      { label: "Email", accessor: "email" },
+      {
+        label: "Role",
+        accessor: "role",
+        render: (value) => <Badge variant="outline">{value}</Badge>,
+      },
+      {
+        label: "Status",
+        accessor: "status",
+        render: (value) => <Badge variant="outline">{value}</Badge>,
+      },
+    ],
+    columns: 3,
+  },
+  {
+    title: "Account Details",
+    fields: [
+      {
+        label: "Email Verified",
+        accessor: "isEmailVerified",
+        render: (value) => (
+          <Badge variant={value ? "default" : "outline"}>
+            {value ? "Verified" : "Pending"}
+          </Badge>
+        ),
+      },
+      {
+        label: "Theme",
+        accessor: "preferredTheme",
+      },
+      {
+        label: "Last Login",
+        accessor: "lastLoginAt",
+        format: (value) => (value ? new Date(value).toLocaleString() : "Never"),
+      },
+      {
+        label: "Created At",
+        accessor: "createdAt",
+        format: (value) => new Date(value).toLocaleString(),
+      },
+    ],
+    columns: 2,
+  },
+];
+
+const renderHeader = (data: UserResponse) => (
+  <div className="flex items-center gap-4">
+    {data.image && (
+      <Image
+        src={data.image.url}
+        alt={data.displayName}
+        width={200}
+        height={200}
+        className="w-20 h-20 rounded-full object-cover"
+      />
+    )}
+    <div>
+      <h2 className="text-2xl font-bold">{data.displayName}</h2>
+      <p className="text-muted-foreground">{data.email}</p>
+      <div className="flex items-center gap-2 mt-2">
+        <Badge variant="outline">{data.role}</Badge>
+        <Badge variant={data.status === "active" ? "default" : "outline"}>
+          {data.status}
+        </Badge>
+      </div>
+    </div>
+  </div>
+);
+
+const Page = ({ params }: AppPageProps<{ id: string }>) => {
+  const { id } = React.use(params);
+
+  return (
+    <GenericDetailsPage
+      entityId={id}
+      entityName="User"
+      useQuery={useAdminUser}
+      sections={sections}
+      renderHeader={renderHeader}
+    />
+  );
+};
+
+export default Page;

package/templates/monorepo-starter/apps/dashboard/src/app/(root)/admin/users/new/page.tsx

@@ -0,0 +1,7 @@
+import CUUserForm from "@/components/forms/CUUserForm";
+
+const page = () => {
+  return <CUUserForm formType="add" />;
+};
+
+export default page;

package/templates/monorepo-starter/apps/dashboard/src/app/(root)/admin/users/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { UserRoleEnum } from "@workspace/contracts";
+import { Badge } from "@workspace/ui/components/badge";
+
+import { useAdminUsers } from "@/hooks/admin";
+import UserCard from "@/components/user/UserCard";
+import ListPage from "@/components/shared/ListPage";
+import DateWrapper from "@/components/shared/DateWrapper";
+import type { ColumnConfig } from "@/components/shared/GenericTable";
+import type { SearchByOption } from "@/components/shared/SearchToolbar";
+
+const userColumns: ColumnConfig<UserResponse, UserQueryType>[] = [
+  {
+    header: "Name",
+    accessor: (u) => (
+      <div className="flex items-center gap-2 min-w-40">
+        <UserCard currentUser={u} variant="avatar" />
+        <span className="font-medium text-sm truncate" title={u.displayName}>
+          {u.displayName}
+        </span>
+      </div>
+    ),
+    sortKey: "displayName",
+  },
+  {
+    header: "Role",
+    accessor: (u) => <Badge variant="secondary">{u.role}</Badge>,
+    sortKey: "role",
+  },
+  {
+    header: "Status",
+    accessor: (u) => (
+      <Badge variant={u.status === "suspended" ? "destructive" : "secondary"}>
+        {u.status}
+      </Badge>
+    ),
+    sortKey: "status",
+  },
+
+  {
+    header: "Email",
+    accessor: "email",
+    sortKey: "email",
+  },
+  {
+    header: "Phone",
+    accessor: "phone",
+    sortKey: "phone",
+  },
+  {
+    header: "Last Login",
+    accessor: (u) =>
+      u.lastLoginAt ? <DateWrapper date={u.lastLoginAt} /> : "—",
+    sortKey: "lastLoginAt",
+  },
+  {
+    header: "Created",
+    accessor: (u) => <DateWrapper date={u.createdAt} />,
+    sortKey: "createdAt",
+  },
+];
+
+const userSearchByOptions: SearchByOption<UserQueryType>[] = [
+  { value: "id", label: "User Id" },
+  { value: "displayName", label: "Name" },
+  { value: "email", label: "Email" },
+];
+
+const page = () => {
+  return (
+    <ListPage
+      entityKey="users"
+      columns={userColumns}
+      searchByOptions={userSearchByOptions}
+      useListHook={useAdminUsers}
+      defaultSortBy="createdAt"
+      defaultSearchBy="displayName"
+      filterConfig={{
+        key: "role",
+        label: "Roles",
+        options: UserRoleEnum.options,
+      }}
+    />
+  );
+};
+
+export default page;