create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/apps/dashboard/src/components/forms/CUUserForm.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { useForm } from "@tanstack/react-form";
+
+import { CUUserSchema } from "@workspace/contracts/admin";
+import { UserRoleEnum, UserStatusEnum } from "@workspace/contracts";
+
+import { Form } from "@workspace/ui/components/form";
+import { Button } from "@workspace/ui/components/button";
+import { InputField } from "@workspace/ui/components/input-field";
+import { SelectField } from "@workspace/ui/components/select-field";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+
+import { useState } from "react";
+import { LoaderCircle } from "lucide-react";
+import { useAdminUser } from "@/hooks/admin";
+import CUFormSkeleton from "@/components/skeleton/CUFormSkeleton";
+
+const CUUserForm = ({ entityId, formType }: BaseCUFormProps) => {
+  const router = useRouter();
+  const { data, mutateAsync, isPending, isLoading } = useAdminUser(entityId);
+  const [changePassword, setChangePassword] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      displayName: "",
+      identifier: data?.email ?? data?.phone,
+      password: undefined,
+      role: "customer",
+      status: "pending",
+      ...data,
+    } as CUUserType,
+    validators: {
+      onSubmit: CUUserSchema,
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        await mutateAsync(value);
+        toast.success(
+          `User ${formType === "add" ? "created" : "updated"} successfully`,
+        );
+        router.push("/admin/users");
+      } catch (err: any) {
+        toast.error(err.message || "Failed to save user");
+      }
+    },
+  });
+
+  if (isLoading) return <CUFormSkeleton />;
+
+  return (
+    <Form form={form} isPending={isPending}>
+      <div>
+        <h2 className="capitalize text-lg font-semibold">
+          {formType === "add" ? "Add New" : "Update"} User
+          {entityId}
+        </h2>
+      </div>
+
+      {/* =========================
+              BASIC INFORMATION
+          ========================== */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Information</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <InputField form={form} name="firstName" label="First Name" />
+          <InputField form={form} name="lastName" label="Last Name" />
+
+          <form.Subscribe
+            selector={(s) => ({
+              firstName: s.values.firstName,
+              lastName: s.values.lastName,
+            })}
+          >
+            {({ firstName, lastName }) => {
+              const displayName = `${firstName} ${lastName || ""}`.trim();
+
+              if (displayName) {
+                form.setFieldValue("displayName", displayName);
+              }
+
+              return (
+                <InputField
+                  form={form}
+                  name="displayName"
+                  label="Display Name"
+                  className="md:col-span-2"
+                />
+              );
+            }}
+          </form.Subscribe>
+        </CardContent>
+      </Card>
+
+      {/* =========================
+              ACCOUNT & SECURITY
+          ========================== */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Account & Security</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <InputField
+            form={form}
+            name="identifier"
+            label="Email / Phone"
+            type="email"
+            disabled={formType === "update"}
+          />
+
+          {!changePassword ? (
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              className="w-fit"
+              onClick={() => setChangePassword(true)}
+            >
+              {formType === "add" ? "Set Password" : "Change Password"}
+            </Button>
+          ) : (
+            <div className="space-y-3 rounded-lg border p-4 bg-muted/10">
+              <InputField
+                form={form}
+                name="password"
+                label="New Password"
+                type="password"
+                autoComplete="new-password"
+              />
+
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={() => setChangePassword(false)}
+                >
+                  Save
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setChangePassword(false);
+                    form.setFieldValue("password", undefined);
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* =========================
+              ROLE & STATUS
+          ========================== */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Role & Status</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <SelectField
+            form={form}
+            name="role"
+            label="Role"
+            options={UserRoleEnum.options}
+          />
+          <SelectField
+            form={form}
+            name="status"
+            label="Status"
+            options={UserStatusEnum.options}
+          />
+        </CardContent>
+      </Card>
+
+      {/* =========================
+              ACTIONS
+          ========================== */}
+      <div className="flex justify-between border-t pt-6">
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={() => router.push("/admin/users")}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+
+        <form.Subscribe selector={(s) => s.canSubmit}>
+          {(canSubmit) => (
+            <Button
+              type="submit"
+              disabled={!canSubmit || isPending}
+              className="min-w-32"
+            >
+              {isPending && (
+                <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              {formType === "add" ? "Create User" : "Update User"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </div>
+    </Form>
+  );
+};
+
+export default CUUserForm;

package/templates/monorepo-starter/apps/dashboard/src/components/forms/MediaForm.tsx

@@ -0,0 +1,35 @@
+import { useForm } from "@tanstack/react-form";
+
+import { mediaUpdateSchema } from "@workspace/contracts/media";
+import { Form } from "@workspace/ui/components/form";
+import { InputField } from "@workspace/ui/components/input-field";
+
+interface MediaFormProps {
+  media: MediaUpdateType;
+  isPublic?: boolean;
+  onSubmit: (data: MediaUpdateType) => void;
+}
+
+const MediaForm = ({ isPublic = true, media, onSubmit }: MediaFormProps) => {
+  const form = useForm({
+    defaultValues: media,
+    validators: {
+      onSubmit: mediaUpdateSchema,
+    },
+    onSubmit: ({ value }) => {
+      onSubmit(value);
+    },
+  });
+
+  return (
+    <Form form={form} btnText="Update Media" className="[&>button]:ml-auto">
+      <div className="grid grid-cols-2 gap-4">
+        <InputField form={form} name="title" label="Title" />
+        {isPublic && <InputField form={form} name="altText" label="Alt Text" />}
+      </div>
+      <InputField form={form} name="notes" type="textarea" label="Notes" />
+    </Form>
+  );
+};
+
+export default MediaForm;

package/templates/monorepo-starter/apps/dashboard/src/components/forms/SocialAuthField.tsx

@@ -0,0 +1,56 @@
+import { redirectToOAuth } from "@workspace/sdk/auth";
+import { Button } from "@workspace/ui/components/button";
+import { FieldSeparator } from "@workspace/ui/components/field";
+
+const SocialAuthField = () => {
+  return (
+    <>
+      <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
+        Or continue with
+      </FieldSeparator>
+      <div className="grid grid-cols-3 gap-4">
+        <Button
+          variant="outline"
+          type="button"
+          onClick={() => redirectToOAuth("apple")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+              fill="currentColor"
+            />
+          </svg>
+          <span className="sr-only">Sign in with Apple</span>
+        </Button>
+        <Button
+          variant="outline"
+          type="button"
+          onClick={() => redirectToOAuth("google")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+              fill="currentColor"
+            />
+          </svg>
+          <span className="sr-only">Sign in with Google</span>
+        </Button>
+        <Button
+          variant="outline"
+          type="button"
+          onClick={() => redirectToOAuth("facebook")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"
+              fill="currentColor"
+            />
+          </svg>
+          <span className="sr-only">Sign in with Meta</span>
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default SocialAuthField;

package/templates/monorepo-starter/apps/dashboard/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { redirect } from "next/navigation";
+
+import {
+  IconDotsVertical,
+  IconLogout,
+  IconNotification,
+  IconUserCircle,
+  IconInnerShadowTop,
+} from "@tabler/icons-react";
+
+import { appName } from "@workspace/shared/constants";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@workspace/ui/components/sidebar";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+
+import useUser from "@/hooks/user";
+import NavMain from "@/components/layout/NavMain";
+import UserCard from "@/components/user/UserCard";
+
+const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
+  const { isMobile, setOpenMobile, toggleSidebar } = useSidebar();
+
+  const { currentUser, isLoading, logoutUser, isLogoutPending, logoutError } =
+    useUser();
+
+  const logout = async () => {
+    await logoutUser();
+    if (logoutError) {
+      toast.error("Error: in Logout User");
+    }
+    toast.success("Logout Successfully.");
+    redirect("/auth/sign-in");
+  };
+
+  const closeSidebar = () => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+  };
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
+              onClick={toggleSidebar}
+            >
+              <IconInnerShadowTop className="size-5!" />
+              <span className="transition-opacity duration-200 ease-linear group-data-[collapsible=icon]:opacity-0">
+                {appName.default}
+              </span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent className="scrollbar-hidden">
+        <NavMain closeSidebar={closeSidebar} />
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  <UserCard currentUser={currentUser} isLoading={isLoading} />
+                  <IconDotsVertical className="ml-auto size-4" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align="end"
+                sideOffset={4}
+              >
+                <DropdownMenuLabel className="p-0 font-normal">
+                  <UserCard currentUser={currentUser} isLoading={isLoading} />
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    asChild
+                    onClick={closeSidebar}
+                  >
+                    <Link href="/users/account">
+                      <IconUserCircle />
+                      Account
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="cursor-pointer">
+                    <IconNotification />
+                    Notifications
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  disabled={isLogoutPending}
+                  onClick={logout}
+                  className="cursor-pointer"
+                >
+                  <IconLogout />
+                  Log out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+};
+
+export default AppSidebar;