@tailor-platform/erp-kit 0.2.0 → 0.2.2

package/templates/scaffold/app/frontend/src/graphql/index.ts

@@ -0,0 +1,15 @@
+import { initGraphQLTada } from "gql.tada";
+
+import type { introspection } from "./generated/graphql-env.d";
+
+export const graphql = initGraphQLTada<{
+  introspection: introspection;
+  scalars: {
+    DateTime: string;
+    Date: string;
+    Time: string;
+  };
+}>();
+
+export type { FragmentOf, ResultOf, VariablesOf } from "gql.tada";
+export { readFragment } from "gql.tada";

package/templates/scaffold/app/frontend/src/index.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@import "@tailor-platform/app-shell/styles";
+@import "@tailor-platform/app-shell/theme.css";

package/templates/scaffold/app/frontend/src/lib/auth-client.ts

@@ -0,0 +1,17 @@
+import { createAuthClient } from "@tailor-platform/app-shell";
+
+const appUri = import.meta.env.VITE_TAILOR_APP_URL as string | undefined;
+const clientId = import.meta.env.VITE_TAILOR_CLIENT_ID as string | undefined;
+
+if (!appUri) {
+  throw new Error("VITE_TAILOR_APP_URL must be set");
+}
+
+if (!clientId) {
+  throw new Error("VITE_TAILOR_CLIENT_ID must be set");
+}
+
+export const authClient = createAuthClient({
+  appUri,
+  clientId,
+});

package/templates/scaffold/app/frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/scaffold/app/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/scaffold/app/frontend/src/pages/page.tsx

@@ -0,0 +1,20 @@
+import { Layout, type AppShellPageProps } from "@tailor-platform/app-shell";
+
+const HomePage = () => {
+  return (
+    <Layout columns={1} title="Home">
+      <Layout.Column>
+        <p className="text-sm text-muted-foreground">This app was scaffolded with erp-kit.</p>
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+HomePage.appShellPageProps = {
+  meta: {
+    title: "Home",
+  },
+  guards: [],
+} satisfies AppShellPageProps;
+
+export default HomePage;

package/templates/scaffold/app/frontend/src/pages/user-management/page.tsx

@@ -0,0 +1,19 @@
+import { type AppShellPageProps, useNavigate } from "@tailor-platform/app-shell";
+import { useEffect } from "react";
+
+const UserManagementPage = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    void navigate("/user-management/user", { replace: true });
+  }, [navigate]);
+  return null;
+};
+
+UserManagementPage.appShellPageProps = {
+  meta: {
+    title: "User Management",
+  },
+  guards: [],
+} satisfies AppShellPageProps;
+
+export default UserManagementPage;

package/templates/scaffold/app/frontend/src/pages/user-management/profile/page.tsx

@@ -0,0 +1,97 @@
+import {
+  Layout,
+  DescriptionCard,
+  type AppShellPageProps,
+  useAuth,
+} from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+const MeQuery = graphql(`
+  query Me {
+    me {
+      id
+      name
+      email
+      status
+    }
+  }
+`);
+
+const ProfilePage = () => {
+  const { logout } = useAuth();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: MeQuery,
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.me) {
+    return (
+      <ErrorFallback
+        title="Failed to load profile"
+        message="An error occurred while fetching your profile."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  const profile = data.me;
+
+  return (
+    <Layout columns={2} title="My Profile">
+      <Layout.Column>
+        <DescriptionCard
+          data={profile}
+          title="Profile Information"
+          fields={[
+            { key: "name", label: "Name" },
+            { key: "email", label: "Email", meta: { copyable: true } },
+            {
+              key: "status",
+              label: "Status",
+              type: "badge",
+              meta: {
+                badgeVariantMap: {
+                  ACTIVE: "success",
+                  PENDING: "warning",
+                  INACTIVE: "neutral",
+                },
+              },
+            },
+          ]}
+        />
+      </Layout.Column>
+      <Layout.Column>
+        <Card>
+          <CardHeader>
+            <CardTitle>Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Button
+              variant="ghost"
+              className="w-full justify-start"
+              onClick={() => {
+                void logout();
+              }}
+            >
+              Sign out
+            </Button>
+          </CardContent>
+        </Card>
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+ProfilePage.appShellPageProps = {
+  meta: {
+    title: "My Profile",
+  },
+} satisfies AppShellPageProps;
+
+export default ProfilePage;

package/templates/scaffold/app/frontend/src/pages/user-management/user/[id]/components/user-detail.tsx

@@ -0,0 +1,58 @@
+import { DescriptionCard } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+
+export const UserDetailFragment = graphql(`
+  fragment UserDetail on User {
+    id
+    name
+    email
+    status
+    createdAt
+    updatedAt
+  }
+`);
+
+interface UserDetailProps {
+  user: FragmentOf<typeof UserDetailFragment>;
+}
+
+export const UserDetail = ({ user: userFragment }: UserDetailProps) => {
+  const user = readFragment(UserDetailFragment, userFragment);
+
+  return (
+    <DescriptionCard
+      data={user}
+      title="User Information"
+      columns={3}
+      fields={[
+        { key: "name", label: "Name" },
+        { key: "email", label: "Email", meta: { copyable: true } },
+        {
+          key: "status",
+          label: "Status",
+          type: "badge",
+          meta: {
+            badgeVariantMap: {
+              ACTIVE: "success",
+              PENDING: "warning",
+              INACTIVE: "neutral",
+            },
+          },
+        },
+        { type: "divider" },
+        {
+          key: "createdAt",
+          label: "Created At",
+          type: "date",
+          meta: { dateFormat: "medium" },
+        },
+        {
+          key: "updatedAt",
+          label: "Updated At",
+          type: "date",
+          meta: { dateFormat: "relative" },
+        },
+      ]}
+    />
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/user/[id]/page.tsx

@@ -0,0 +1,51 @@
+import { Layout, useParams, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { UserDetail, UserDetailFragment } from "./components/user-detail";
+import { graphql } from "@/graphql";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const UserQuery = graphql(
+  `
+    query User($id: ID!) {
+      user(id: $id) {
+        ...UserDetail
+      }
+    }
+  `,
+  [UserDetailFragment],
+);
+
+const UserPage = () => {
+  const { id } = useParams();
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: UserQuery,
+    variables: { id: id! },
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data?.user) {
+    return (
+      <ErrorFallback
+        title="Failed to load user"
+        message="An error occurred while fetching the user details."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout columns={1} title="User Detail">
+      <Layout.Column>
+        <UserDetail user={data.user} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+UserPage.appShellPageProps = {
+  meta: { title: "User Detail" },
+} satisfies AppShellPageProps;
+
+export default UserPage;

package/templates/scaffold/app/frontend/src/pages/user-management/user/components/users-table.tsx

@@ -0,0 +1,101 @@
+import { Link } from "@tailor-platform/app-shell";
+import { graphql, type FragmentOf, readFragment } from "@/graphql";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/composed/empty-state";
+
+const UserRowFragment = graphql(`
+  fragment UserRow on User {
+    id
+    name
+    email
+    status
+    createdAt
+  }
+`);
+
+export const UsersTableFragment = graphql(
+  `
+    fragment UsersTable on UserConnection {
+      edges {
+        node {
+          ...UserRow
+        }
+      }
+    }
+  `,
+  [UserRowFragment],
+);
+
+interface UserRowProps {
+  user: FragmentOf<typeof UserRowFragment>;
+}
+
+const UserRow = ({ user: userFragment }: UserRowProps) => {
+  const user = readFragment(UserRowFragment, userFragment);
+  return (
+    <TableRow>
+      <TableCell>{user.name}</TableCell>
+      <TableCell>{user.email}</TableCell>
+      <TableCell>
+        <Badge variant={user.status === "ACTIVE" ? "default" : "secondary"}>{user.status}</Badge>
+      </TableCell>
+      <TableCell>{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "-"}</TableCell>
+      <TableCell>
+        <Button variant="ghost" size="sm" asChild>
+          <Link to={user.id}>View</Link>
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+interface UsersTableProps {
+  data: FragmentOf<typeof UsersTableFragment>;
+}
+
+export const UsersTable = ({ data }: UsersTableProps) => {
+  const connection = readFragment(UsersTableFragment, data);
+
+  if (connection.edges.length === 0) {
+    return (
+      <EmptyState
+        title="No users"
+        message="Get started by creating a new user."
+        action={
+          <Button asChild>
+            <Link to="create">Create User</Link>
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Created At</TableHead>
+          <TableHead />
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {connection.edges.map((edge) => {
+          const { id } = readFragment(UserRowFragment, edge.node);
+          return <UserRow key={id} user={edge.node} />;
+        })}
+      </TableBody>
+    </Table>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/user/create/components/create-user-form.tsx

@@ -0,0 +1,99 @@
+import { useNavigate, useToast } from "@tailor-platform/app-shell";
+import { useMutation } from "urql";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { graphql } from "@/graphql";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+const CreateUserMutation = graphql(`
+  mutation CreateUser($name: String!, $email: String!) {
+    createUser(name: $name, email: $email) {
+      message
+    }
+  }
+`);
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.email("Invalid email address"),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const CreateUserForm = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [, createUser] = useMutation(CreateUserMutation);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+    },
+  });
+
+  const onSubmit = (values: FormValues) => {
+    void createUser(values, { additionalTypenames: ["User"] }).then((result) => {
+      if (result.error) {
+        toast.error(result.error.message);
+        return;
+      }
+      toast.success("User created successfully");
+      void navigate("..");
+    });
+  };
+
+  const onCancel = () => {
+    void navigate("..");
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)} className="max-w-md space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="Enter email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex gap-2">
+          <Button type="submit">Create</Button>
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/scaffold/app/frontend/src/pages/user-management/user/create/page.tsx

@@ -0,0 +1,19 @@
+import type { AppShellPageProps } from "@tailor-platform/app-shell";
+import { CreateUserForm } from "./components/create-user-form";
+
+const CreateUserPage = () => {
+  return (
+    <div className="p-4">
+      <h1 className="mb-4 text-2xl font-bold">Create User</h1>
+      <CreateUserForm />
+    </div>
+  );
+};
+
+CreateUserPage.appShellPageProps = {
+  meta: {
+    title: "Create User",
+  },
+} satisfies AppShellPageProps;
+
+export default CreateUserPage;

package/templates/scaffold/app/frontend/src/pages/user-management/user/page.tsx

@@ -0,0 +1,61 @@
+import { Layout, Link, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { useQuery } from "urql";
+import { UsersTable, UsersTableFragment } from "./components/users-table";
+import { graphql } from "@/graphql";
+import { Button } from "@/components/ui/button";
+import { ErrorFallback } from "@/components/composed/error-fallback";
+import { Loading } from "@/components/composed/loading";
+
+const UsersQuery = graphql(
+  `
+    query Users {
+      users {
+        ...UsersTable
+      }
+    }
+  `,
+  [UsersTableFragment],
+);
+
+const UsersPage = () => {
+  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
+    query: UsersQuery,
+  });
+
+  if (fetching) return <Loading />;
+
+  if (error || !data) {
+    return (
+      <ErrorFallback
+        title="Failed to load users"
+        message="An error occurred while fetching the user list."
+        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
+      />
+    );
+  }
+
+  return (
+    <Layout
+      columns={1}
+      title="Users"
+      actions={[
+        <Button key="create" asChild>
+          <Link to="create">Create User</Link>
+        </Button>,
+      ]}
+    >
+      <Layout.Column>
+        <UsersTable data={data.users} />
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+UsersPage.appShellPageProps = {
+  meta: {
+    title: "Users",
+  },
+  guards: [],
+} satisfies AppShellPageProps;
+
+export default UsersPage;

package/templates/scaffold/app/frontend/src/providers/graphql-provider.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import type { EnhancedAuthClient } from "@tailor-platform/app-shell";
+import { Provider as UrqlProvider, createClient, cacheExchange, fetchExchange } from "urql";
+
+interface GraphQLProviderProps {
+  authClient: EnhancedAuthClient;
+  children: React.ReactNode;
+}
+
+export const GraphQLProvider = ({ authClient, children }: GraphQLProviderProps) => {
+  const client = useMemo(() => {
+    return createClient({
+      url: `${authClient.getAppUri()}/query`,
+      exchanges: [cacheExchange, fetchExchange],
+      requestPolicy: "cache-first",
+      fetch: authClient.fetch,
+    });
+  }, [authClient]);
+
+  return <UrqlProvider value={client}>{children}</UrqlProvider>;
+};

package/templates/scaffold/app/frontend/tsconfig.app.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "gql.tada/ts-plugin",
+        "schema": "./src/graphql/generated/schema.graphql",
+        "tadaOutputLocation": "./src/graphql/generated/graphql-env.d.ts"
+      }
+    ]
+  },
+  "include": ["src"]
+}

package/templates/scaffold/app/frontend/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "gql.tada/ts-plugin",
+        "schema": "./src/graphql/generated/schema.graphql",
+        "tadaOutputLocation": "./src/graphql/generated/graphql-env.d.ts"
+      }
+    ]
+  }
+}

package/templates/scaffold/app/frontend/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["vite.config.ts"]
+}