@akanjs/cli 0.0.149 → 0.0.151

package/esm/src/templates/app/lib/user/User.Unit.js

@@ -0,0 +1,18 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/user/User.Unit.tsx
+function getContent(scanResult, dict = {}) {
+  return {
+    filename: "User.Unit.tsx",
+    content: `
+import { ModelProps } from "@akanjs/client";
+
+import { cnst } from "../cnst";
+
+export const Card = ({ className, user }: ModelProps<"user", cnst.LightUser>) => {
+  return <div>{user.id}</div>;
+};
+  `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/lib/user/User.Util.js

@@ -0,0 +1,74 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/user/User.Util.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "User.Util.tsx",
+    content: `
+"use client";
+import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
+import { getQueryMap } from "@akanjs/constant";
+import { cnst, st } from "@${dict.appName}/client";
+import { Data } from "@akanjs/ui";
+import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
+
+export const Stat = ({
+  className,
+  summary,
+  sliceName = "user",
+  queryMap = getQueryMap(cnst.UserSummary),
+  hidePresents,
+}: ModelDashboardProps<cnst.Summary>) => {
+  return (
+    <Data.Dashboard
+      className={className}
+      summary={summary}
+      sliceName={sliceName}
+      queryMap={queryMap}
+      columns={["totalUser", "dau"]}
+      hidePresents={hidePresents}
+    />
+  );
+};
+export const Insight = ({ className, insight, sliceName = "user" }: ModelInsightProps<cnst.UserInsight>) => {
+  return <Data.Insight className={className} insight={insight} sliceName={sliceName} columns={["count"]} />;
+};
+
+interface RestrictProps {
+  id: string;
+}
+export const Restrict = ({ id }: RestrictProps) => {
+  return (
+    <button className="gap-2 btn btn-sm" onClick={() => st.do.restrictUser(id, "Violated Community Guidelines")}>
+      <AiOutlineLock />
+      Restrict
+    </button>
+  );
+};
+
+interface ReleaseProps {
+  id: string;
+}
+export const Release = ({ id }: ReleaseProps) => {
+  return (
+    <button className="gap-2 border-dashed btn btn-sm btn-outline" onClick={() => st.do.releaseUser(id)}>
+      <AiOutlineUnlock />
+      Release
+    </button>
+  );
+};
+
+export const EditSelf = () => {
+  const self = st.use.self();
+  const userModal = st.use.userModal();
+  return userModal !== "edit" ? (
+    <button className="gap-2 btn" onClick={() => st.do.editUser(self)}>
+      <AiOutlineEdit />
+      Edit
+    </button>
+  ) : null;
+};
+`
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/lib/user/User.View.js

@@ -0,0 +1,46 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/user/User.View.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "User.View.tsx",
+    content: `
+import { clsx } from "@akanjs/client";
+import { usePage } from "@${dict.appName}/client";
+import { Avatar } from "@util/ui";
+import { AiOutlineUser } from "react-icons/ai";
+
+import { cnst } from "../cnst";
+
+interface UserViewProps {
+  className?: string;
+  user: cnst.User;
+}
+
+export const General = ({ className, user }: UserViewProps) => {
+  const { l } = usePage();
+  return (
+    <div className={clsx("flex flex-col gap-4", className)}>
+      <div>
+        <div className="font-bold">Profile</div>
+        <div className="text-base">
+          <Avatar
+            className="flex items-center justify-center w-24 h-24"
+            icon={<AiOutlineUser className="text-4xl" />}
+            src={user.image?.url}
+          />
+        </div>
+      </div>
+      <div>
+        <div className="flex gap-2 items-center">
+          <div className="font-bold">Nickname</div>
+        </div>
+        <p className="text-base">{user.nickname}</p>
+      </div>
+    </div>
+  );
+};
+  `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/lib/user/User.Zone.js

@@ -0,0 +1,54 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/user/User.Zone.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "User.Zone.tsx",
+    content: `
+"use client";
+import { ModelsProps } from "@akanjs/client";
+import { DefaultOf } from "@akanjs/signal";
+import { cnst, st, User } from "@${dict.appName}/client";
+import { Data, Model } from "@akanjs/ui";
+
+export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
+  return (
+    <Data.ListContainer
+      init={init}
+      query={query}
+      sliceName={sliceName}
+      renderItem={User.Unit.Card}
+      renderDashboard={User.Util.Stat}
+      renderInsight={User.Util.Insight}
+      renderTemplate={User.Template.General}
+      renderTitle={(user: DefaultOf<cnst.User>) => \`\${user.nickname}\`}
+      renderView={(user: cnst.User) => <User.View.General user={user} />}
+      type="list"
+      columns={["nickname", "status", "lastLoginAt", "createdAt"]}
+      actions={(user: cnst.LightUser, idx) => [
+        "remove",
+        "edit",
+        "view",
+        user.status === "active"
+          ? { type: "restrict", render: () => <User.Util.Restrict id={user.id} /> }
+          : { type: "release", render: () => <User.Util.Release id={user.id} /> },
+      ]}
+    />
+  );
+};
+
+export const Self = () => {
+  const self = st.use.self();
+  const userModal = st.use.userModal();
+  return userModal === "edit" ? (
+    <Model.EditModal type="form" sliceName="user" submitOption={{ path: "self" }}>
+      <User.Template.General />
+    </Model.EditModal>
+  ) : (
+    <User.View.General user={self} />
+  );
+};
+  `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/lib/user/index.js

@@ -0,0 +1,41 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/user/index.tsx
+function getContent(scanResult, dict = {}) {
+  return {
+    filename: "index.tsx",
+    content: `
+import { Signal } from "@akanjs/ui";
+import { AiOutlineUser } from "react-icons/ai";
+
+import * as Template from "./User.Template";
+import * as Unit from "./User.Unit";
+import * as Util from "./User.Util";
+import * as View from "./User.View";
+import * as Zone from "./User.Zone";
+
+export const User = {
+  Menu: {
+    Admin: {
+      key: "user",
+      label: "User",
+      icon: <AiOutlineUser />,
+      render: () => <Zone.Admin />,
+    },
+    Doc: {
+      key: "user",
+      label: "User",
+      icon: <AiOutlineUser />,
+      render: () => <Signal.Doc.Zone refName="user" />,
+    },
+  },
+  Template,
+  Unit,
+  Util,
+  View,
+  Zone,
+};
+    `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/main.js

@@ -9,8 +9,7 @@ import { registerModules } from "./server";
 const bootstrap = async () => {
   const serverMode = process.env.SERVER_MODE as "federation" | "batch" | "all" | null;
   if (!serverMode) throw new Error("SERVER_MODE environment variable is not defined");
-  const app = await createNestApp({ registerModules, serverMode, env });
-  return () => app.close();
+  await createNestApp({ registerModules, serverMode, env });
 };
 void bootstrap();
   `;

package/esm/src/templates/app/public/logo.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1882 268" style="enable-background:new 0 0 1882 268;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF00;}
+	.st1{fill:#ED9027;}
+	.st2{fill:#67B5E6;}
+	.st3{fill:#2A85AD;}
+	.st4{fill:#EAB128;}
+	.st5{fill:#377395;}
+	.st6{fill:#3A6274;}
+	.st7{fill:#4D4C4C;}
+	.st8{fill:#010100;}
+</style>
+<title>Asset 1</title>
+<g>
+	<rect class="st0" width="1882" height="268"/>
+	<g>
+		<g>
+			<path class="st1" d="M313.2,116.6h-94.7l42.7-43.9l-42.7-43.9l0,0c23.9-0.1,47.1,8.4,65.2,24.1
+				C302.3,68.9,313.1,92.1,313.2,116.6z"/>
+			<path class="st2" d="M313.2,233.1h-39.1c-1.1-16.4-3.7-56.5-55.6-68.4C282.6,164.7,313.2,188.3,313.2,233.1z"/>
+			<path class="st3" d="M274.1,233.1h-55.6c-10,0-20.1-1.5-29.7-4.4c19,5.2,38.7-5.9,44-25c4-14.7-1.7-30.4-14.3-39
+				C270.4,176.5,273,216.7,274.1,233.1z"/>
+			<polygon class="st4" points="218.5,28.7 261.2,72.7 218.5,116.6 			"/>
+			<path class="st5" d="M218.5,164.7c16.3,11.2,20.5,33.4,9.3,49.7c-8.6,12.6-24.3,18.3-39,14.3l-2.1-0.7c-0.2-0.1-0.4-0.1-0.7-0.2
+				c-23.9-8-44.1-24.6-56.5-46.5c13.6,14.6,33.3,21.6,53,19l0.9-0.1c9.5-1.4,18.3-6.2,24.7-13.4
+				C213.6,180.6,217.3,172.9,218.5,164.7z"/>
+			<path class="st6" d="M218.5,164.7c-1.3,8.2-4.9,15.9-10.3,22.1c-6.4,7.2-15.2,11.9-24.7,13.4l-0.9,0.1c-19.7,2.6-39.5-4.5-53-19
+				c-15.3-27-17.5-59.5-5.9-88.4c-7.9,35.2,14.2,70.2,49.4,78.1C188.5,174.5,204.7,172.3,218.5,164.7z"/>
+			<path class="st7" d="M199.7,59.4c4.3,3.3,5.1,9.5,1.7,13.9c-3.3,4.3-9.5,5.1-13.9,1.7c-4.3-3.3-5.1-9.5-1.7-13.9c0,0,0,0,0-0.1
+				C189.3,56.8,195.5,56.1,199.7,59.4z"/>
+			<path class="st7" d="M218.5,164.7c-31.7,17.2-71.3,5.5-88.6-26.2c-7.6-13.9-9.8-30.1-6.3-45.5c15.2-38,51.5-63.3,92.5-64.2
+				c-37.6,0.7-67.5,31.7-66.8,69.3c0.7,37.6,31.6,67.5,69.2,66.8V164.7z"/>
+		</g>
+		<path class="st8" d="M451,202.9h-16.9V64h38.6c5.3,0,10.6,0.2,15.9,1c4.6,0.7,9.2,1.7,13.5,3.1c7.5,2.4,14,7,18.8,13.3
+			c4.3,6.5,6.8,14,6.5,21.9c0.2,6.5-1.2,12.8-4.1,18.6c-2.9,5.5-7,10.1-12.3,13.5c-6,3.9-12.5,6.5-19.5,8
+			c-8.4,1.9-17.1,2.9-25.8,2.7c-4.6,0-9.4,0-14.5-0.5L451,202.9z M451,130.3c2.2,0,4.6,0.5,7.2,0.7h7c6.8,0,13.7-0.5,20.5-1.9
+			c4.8-0.7,9.4-2.7,13.7-5.3c3.4-2.2,6.3-5.1,8-8.7c1.7-3.6,2.4-7.7,2.4-11.6c0.2-4.8-1.2-9.4-3.9-13.3c-2.9-3.6-6.8-6.5-11.1-8
+			c-3.4-1.2-6.8-1.9-10.1-2.4c-4.6-0.5-8.9-0.7-13.5-0.7H451V130.3z"/>
+		<path class="st8" d="M609,190.6c4.6,0,9.2-0.5,13.5-1.7c3.6-1,7.2-2.9,10.1-5.1s5.3-4.8,7.2-8s3.4-6.5,4.6-10.1
+			c0.7-2.4,1.2-5.1,1.4-7.7c0-2.9,0.5-5.5,0.5-8V64h16.9v85.9c0,3.4,0,6.8-0.5,10.1c-0.2,3.4-1,6.5-1.7,9.9c-1.2,5.1-3.1,9.9-6,14.2
+			c-2.7,4.3-6,8.2-10.1,11.3c-4.6,3.4-9.6,5.8-15.2,7.5c-6.8,1.9-13.7,2.9-21,2.7c-6.8,0-13.5-0.7-20-2.4c-5.3-1.4-10.4-3.9-14.7-7
+			c-4.1-2.9-7.5-6.3-10.1-10.4c-2.7-4.1-4.6-8.4-6-13.3c-1-3.6-1.9-7.2-2.2-11.1c-0.5-3.9-0.7-7.7-0.7-11.6V64h16.9v86.1
+			c0,3.1,0.2,6.5,0.7,9.6c0.5,3.1,1.2,6,2.2,8.9c2.2,6.5,6.5,12.1,12.1,15.9C593.3,188.9,601.3,190.9,609,190.6z"/>
+		<path class="st8" d="M715.1,202.9h-16.9V64h82.7v15.2h-65.8v44.6h58.4V139h-58.4V202.9z"/>
+		<path class="st8" d="M822.2,202.9h-16.9V64h83v15.2h-65.8v44.6h58.4V139h-58.4v63.9H822.2z"/>
+		<path class="st8" d="M912.6,202.9V64h16.9v138.9H912.6z"/>
+		<path class="st8" d="M1036.1,141.4c8.4,12.3,16.9,24.8,25.3,37.9h0.7c-1-13.5-1.4-27.3-1.4-41.2V64.2h17.1v138.7h-16.9l-54.5-77.4
+			c-9.4-13.5-17.8-26-25.3-37.9h-0.7c1,12.5,1.4,27.5,1.4,44.4v70.9H965V64h16.9L1036.1,141.4z"/>
+		<path class="st8" d="M1214.8,202.9h-16.9V64h38.6c5.3,0,10.6,0.2,15.9,1c4.6,0.7,9.2,1.7,13.5,3.1c7.5,2.4,14,7,18.8,13.3
+			c4.3,6.5,6.8,14,6.5,21.9c0.2,6.5-1.2,12.8-4.1,18.6c-2.9,5.5-7,10.1-12.3,13.5c-6,3.9-12.5,6.5-19.5,8
+			c-8.4,1.9-17.1,2.9-25.8,2.7c-4.6,0-9.4,0-14.5-0.5L1214.8,202.9z M1214.8,130.3c2.4,0,4.8,0.5,7.2,0.7h7c6.8,0,13.7-0.5,20.5-1.9
+			c4.8-1,9.4-2.7,13.7-5.5c3.4-2.2,6.3-5.1,8-8.7s2.4-7.7,2.4-11.6c0.2-4.8-1.2-9.4-3.9-13.3c-2.9-3.6-6.8-6.5-11.1-8
+			c-3.4-1.2-6.8-1.9-10.1-2.4c-4.6-0.5-8.9-0.7-13.5-0.7h-20v51.4H1214.8z"/>
+		<path class="st8" d="M1336.1,64v123.7h67.8v15.2h-84.7V63.8h16.9V64z"/>
+		<path class="st8" d="M1415.9,202.9L1472.6,64h14.7l56.4,138.9h-18.3l-16.6-42h-58.1l-16.6,42H1415.9z M1479.9,85.7
+			c-6,17.4-12.1,33-17.8,47l-5.3,13h46.1l-5.3-13c-5.5-14.5-11.6-30.1-17.4-47H1479.9z"/>
+		<path class="st8" d="M1630.1,76.5c-7.5,0-14.7,1.2-21.7,3.6c-6.5,2.4-12.5,6-17.6,10.9c-5.3,5.1-9.2,11.3-11.8,18.1
+			c-3.1,8.2-4.6,16.6-4.3,25.3c-0.2,8.4,1.2,16.9,4.1,24.8c2.4,6.5,6.3,12.5,11.3,17.4s11.1,8.2,17.8,10.1
+			c7.5,2.4,15.2,3.4,23.2,3.4c2.4,0,4.8,0,7.5-0.5c2.7-0.5,5.3-0.5,8-1c2.9-0.5,5.3-1,8-1.4c2.9-0.5,4.8-1.2,6.8-1.9v15
+			c-4.6,1.7-9.4,2.9-14.2,3.6c-5.5,1-11.1,1.2-16.6,1.2c-10.4,0.2-20.7-1.4-30.6-4.8c-8.4-2.9-16.2-7.7-22.4-14
+			c-6.3-6.3-10.9-13.7-13.7-21.9c-6.5-19.3-6.5-40,0-59.3c3.1-8.7,8-16.6,14.2-23.4c6.3-6.8,14-11.8,22.4-15.2
+			c9.4-3.9,19.5-5.5,29.7-5.5c2.9,0,5.8,0,8.7,0s5.5,0.5,8,1c2.4,0.5,5.1,1,7.2,1.7c1.9,0.5,3.9,1.2,5.8,1.9v15
+			c-4.6-1.4-9.2-2.7-13.7-3.6C1640.2,76.8,1635.2,76.3,1630.1,76.5z"/>
+		<path class="st8" d="M1705.1,188h71.4v15.2h-88V64h84.4v15.2h-67.5v44.6h59.8V139h-59.8L1705.1,188z"/>
+	</g>
+</g>
+</svg>

package/esm/src/templates/app/ui/Footer.js

@@ -0,0 +1,47 @@
+// pkgs/@akanjs/cli/src/templates/app/ui/Footer.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "Footer.tsx",
+    content: `
+import { Image, Link } from "@akanjs/ui";
+
+export const Footer = () => {
+  return (
+    <div className="relative justify-center px-2 pb-12 mt-12 bg-[#f3f3f3] via-secondary-focus to-accent-focus">
+      <div className="container py-10">
+        <div className="justify-between mt-6 md:flex md:mt-10 sm:mt-0">
+          <Link href="/" disabled>
+            <Image src="/logo.svg" className="object-contain fill-black" width={200} height={36} />
+          </Link>
+          <div className="flex gap-4 mt-6 text-xs md:mt-0 md:text-base ">
+            <Link href="/termsofservice">
+              <span className="text-[#777777]">\uC774\uC6A9\uC57D\uAD00</span>
+            </Link>
+            <Link href="/privacy">
+              <span className="text-[#777777]">\uAC1C\uC778\uC815\uBCF4\uCC98\uB9AC\uBC29\uCE68</span>
+            </Link>
+          </div>
+        </div>
+        <div className="items-center justify-between mt-6 text-sm md:text-base md:mt-3 md:flex ">
+          <div className="flex flex-col text-xs md:text-base gap-1 text-[#777777]">
+            ${dict.CompanyName} | CEO_NAME | COMPANY_ADDRESS
+          </div>
+          <div>
+            <div className="flex gap-4 mt-6 text-xs md:text-base md:mt-0">
+              <span className="text-[#777]">\uBB38\uC758</span>
+              <a href="mailto:support@example.com">
+                <span className="text-[#777]">support@example.com</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+  `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/ui/MainHeader.js

@@ -0,0 +1,111 @@
+// pkgs/@akanjs/cli/src/templates/app/ui/MainHeader.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "MainHeader.tsx",
+    content: `
+import { usePage } from "@${dict.appName}/client";
+import {
+  AiOutlineBuild,
+  AiOutlineEdit,
+  AiOutlineHome,
+  AiOutlinePoweroff,
+  AiOutlinePrinter,
+  AiOutlineRobot,
+  AiOutlineSecurityScan,
+  AiOutlineSend,
+  AiOutlineUser,
+  AiOutlineWindows,
+} from "react-icons/ai";
+import { User } from "@shared/client";
+import { Layout, Link } from "@akanjs/ui";
+import { ReactNode } from "react";
+import { clsx } from "@akanjs/client";
+
+type DirType = "home" | "send" | "print" | "self";
+
+const iconMap: { [key in DirType]: ReactNode } = {
+  home: <AiOutlineHome />,
+  send: <AiOutlineSend />,
+  print: <AiOutlinePrinter />,
+  self: <AiOutlineUser />,
+};
+
+interface MainHeaderProps {
+  className?: string;
+  children?: any;
+  items: {
+    type: DirType;
+    name: string;
+    href?: string;
+  }[];
+  type?: "view" | "edit" | "new";
+}
+export const MainHeader = ({ className, children, items, type = "view" }: MainHeaderProps) => {
+  const { l } = usePage();
+  return (
+    <Layout.Header
+      className={clsx("fixed left-0 px-2 py-2 bg-base-100/50 backdrop-blur-sm flex items-center gap-2", className)}
+    >
+      <Layout.Sider>
+        <div className="text-4xl font-lemonmilk w-full text-center my-8">${dict.AppName}</div>
+        <ul className="menu p-4 w-full bg-base-200 text-base-content">
+          {/* <li>
+            <User.Zone.Profile/>
+          </li> */}
+          <li>
+            <Link href="/location" className="flex gap-2 items-center text-lg">
+              {iconMap.home} Home
+            </Link>
+          </li>
+          <li>
+            <Link href="/self" className="flex gap-2 items-center text-lg">
+              {iconMap.self} My Profile
+            </Link>
+          </li>
+          <li>
+            <User.Util.Signout href="/" className="flex gap-2 items-center text-lg text-warning">
+              <AiOutlinePoweroff /> Sign out
+            </User.Util.Signout>
+          </li>
+        </ul>
+      </Layout.Sider>
+      <div className="text-sm breadcrumbs hidden md:block">
+        <ul>
+          {items.slice(0, -2).map(({ type, name, href }, idx) => (
+            <li key={idx}>
+              <Link className="flex gap-1 items-center" href={href}>
+                {iconMap[type]} {name}
+              </Link>
+            </li>
+          ))}
+          <li></li>
+        </ul>
+      </div>
+      <div className="text-sm breadcrumbs -ml-2">
+        <ul>
+          {items.slice(-2).map(({ type, name, href }, idx) => (
+            <li key={idx}>
+              <Link className="flex gap-1 items-center" href={href}>
+                {iconMap[type]} {name}
+              </Link>
+            </li>
+          ))}
+          {type === "new" ? (
+            <li>+ {l("shared.new")}</li>
+          ) : type === "edit" ? (
+            <li className="flex gap-1 items-center">
+              <AiOutlineEdit /> {l("shared.edit")}
+            </li>
+          ) : null}
+        </ul>
+      </div>
+      {children}
+    </Layout.Header>
+  );
+};
+  `
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/crudPages/[__model__Id]/edit/page.js

@@ -0,0 +1,53 @@
+// pkgs/@akanjs/cli/src/templates/crudPages/[__model__Id]/edit/page.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "page.tsx",
+    content: `
+import { AiOutlineTeam } from "react-icons/ai";
+import { Load } from "@akanjs/ui";
+import { fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
+import type { CsrConfig } from "@akanjs/client";
+
+interface PageProps {
+  params: { ${dict.model}Id: string };
+}
+
+export default function Page({ params }: PageProps) {
+  const { l } = usePage();
+  return (
+    <Load.Page
+      of={Page}
+      loader={async () => {
+        const { ${dict.model}Id } = await params;
+        const { ${dict.model}, ${dict.model}Edit } = await fetch.edit${dict.Model}(${dict.model}Id);
+        return { ${dict.model}, ${dict.model}Edit } as const;
+      }}
+      render={({ ${dict.model}, ${dict.model}Edit }) => (
+        <div className="container">
+          <div className="flex justify-between m-4 mt-8">
+            <div className="text-xl text-primary flex gap-2 items-center">
+              <AiOutlineTeam /> {l("shared.updateModel", { model: l("${dict.model}.modelName") })}
+            </div>
+          </div>
+          <Load.Edit
+            className="flex flex-col items-center"
+            sliceName="${dict.model}InPublic"
+            edit={${dict.model}Edit}
+            type="form"
+            onCancel="back"
+            onSubmit="/${dict.model}"
+          >
+            ${dict.Model}.Template.General
+          </Load.Edit>
+        </div>
+      )}
+    />
+  );
+}
+Page.csrConfig = { transition: "none" } satisfies CsrConfig;
+`
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/crudPages/[__model__Id]/page.js

@@ -0,0 +1,63 @@
+// pkgs/@akanjs/cli/src/templates/crudPages/[__model__Id]/page.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "page.tsx",
+    content: `
+import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
+import { Link } from "@akanjs/ui";
+import { Load } from "@akanjs/ui";
+import { getSelf } from "@akanjs/client";
+import { AiOutlineEdit } from "react-icons/ai";
+import type { CsrConfig } from "@akanjs/client";
+
+interface PageProps {
+  params: { ${dict.model}Id: string };
+}
+
+export async function generateMetadata({ params }: PageProps) {
+  const { ${dict.model}Id } = await params;
+  const { ${dict.model} } = await fetch.view${dict.Model}(${dict.model}Id);
+  return {
+    title: ${dict.model}.id,
+    description: ${dict.model}.id,
+    openGraph: {
+      title: ${dict.model}.id,
+      description: ${dict.model}.id,
+      // images: ${dict.model}.thumbnails.map((i) => i.url),
+    },
+  };
+}
+export default function Page({ params }: PageProps) {
+  const { l } = usePage();
+  const self = getSelf({ unauthorize: "/signin" });
+  return (
+    <Load.Page
+      of={Page}
+      loader={async () => {
+        const { ${dict.model}Id } = await params;
+        const { ${dict.model}, ${dict.model}View } = await fetch.view${dict.Model}(${dict.model}Id);
+        return { ${dict.model}, ${dict.model}View } as const;
+      }}
+      render={({ ${dict.model}, ${dict.model}View }) => (
+        <div className="container flex flex-col gap-4">
+          <div className="flex gap-4 font-bold text-lg items-center">
+            ${dict.Model}.Zone.View view={${dict.model}View} />
+            <Link href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
+              <button className="btn">
+                <AiOutlineEdit />
+                {l("shared.updateModel", { model: l("${dict.model}.modelName") })}
+              </button>
+            </Link>
+          </div>
+        </div>
+      )}
+    />
+  );
+}
+Page.csrConfig = { transition: "none" } satisfies CsrConfig;
+`
+  };
+}
+export {
+  getContent as default
+};

package/esm/src/templates/crudPages/new/page.js

@@ -0,0 +1,50 @@
+// pkgs/@akanjs/cli/src/templates/crudPages/new/page.tsx
+function getContent(scanResult, dict) {
+  return {
+    filename: "page.tsx",
+    content: `
+import { AiOutlineTeam } from "react-icons/ai";
+import { Load } from "@akanjs/ui";
+import { cnst, fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
+import { getSelf } from "@akanjs/client";
+import type { CsrConfig } from "@akanjs/client";
+
+export default function Page() {
+  const { l } = usePage();
+  const self = getSelf({ unauthorize: "/signin" });
+  return (
+    <Load.Page
+      of={Page}
+      loader={async () => {
+        const ${dict.model}Form: Partial<cnst.${dict.Model}> = {};
+        return { ${dict.model}Form } as const;
+      }}
+      render={({ ${dict.model}Form }) => (
+        <div className="container">
+          <div className="flex justify-between m-4 mt-8">
+            <div className="text-xl text-primary flex gap-2 items-center">
+              <AiOutlineTeam /> {l("shared.createModel", { model: l("${dict.model}.modelName") })}
+            </div>
+          </div>
+          <Load.Edit
+            className="flex flex-col items-center"
+            sliceName="${dict.model}InPublic"
+            edit={${dict.model}Form}
+            type="form"
+            onCancel="back"
+            onSubmit="/${dict.model}"
+          >
+            ${dict.Model}.Template.General
+          </Load.Edit>
+        </div>
+      )}
+    />
+  );
+}
+Page.csrConfig = { transition: "none" } satisfies CsrConfig;
+  `
+  };
+}
+export {
+  getContent as default
+};