create-einja-app 0.2.17 → 0.2.19

package/templates/default/apps/admin/src/components/shared/select-dropdown.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { FormControl } from "{{packageName}}/admin-ui/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "{{packageName}}/admin-ui/ui/select";
+import { Loader } from "lucide-react";
+
+type SelectDropdownProps = {
+  onValueChange?: (value: string) => void;
+  defaultValue: string | undefined;
+  placeholder?: string;
+  isPending?: boolean;
+  items: { label: string; value: string }[] | undefined;
+  disabled?: boolean;
+  className?: string;
+  isControlled?: boolean;
+};
+
+export function SelectDropdown({
+  defaultValue,
+  onValueChange,
+  isPending,
+  items,
+  placeholder,
+  disabled,
+  className = "",
+  isControlled = false,
+}: SelectDropdownProps) {
+  const defaultState = isControlled
+    ? { value: defaultValue, onValueChange }
+    : { defaultValue, onValueChange };
+  return (
+    <Select {...defaultState}>
+      <FormControl>
+        <SelectTrigger disabled={disabled} className={cn(className)}>
+          <SelectValue placeholder={placeholder ?? "Select"} />
+        </SelectTrigger>
+      </FormControl>
+      <SelectContent>
+        {isPending ? (
+          <SelectItem disabled value="loading" className="h-14">
+            <div className="flex items-center justify-center gap-2">
+              <Loader className="h-5 w-5 animate-spin" />
+              {"  "}
+              Loading...
+            </div>
+          </SelectItem>
+        ) : (
+          items?.map(({ label, value }) => (
+            <SelectItem key={value} value={value}>
+              {label}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+}

package/templates/default/apps/admin/src/data/apps.tsx

@@ -0,0 +1,116 @@
+import {
+  BookOpen,
+  CreditCard,
+  Figma,
+  FileText,
+  GitBranch,
+  Github,
+  Mail,
+  MessageCircle,
+  MessageSquare,
+  Package,
+  Phone,
+  Trello,
+  Users,
+  Video,
+} from "lucide-react";
+
+export type App = {
+  name: string;
+  logo: React.ReactElement;
+  connected: boolean;
+  desc: string;
+};
+
+export const apps: App[] = [
+  {
+    name: "Telegram",
+    logo: <MessageCircle className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Telegram for real-time communication.",
+  },
+  {
+    name: "Notion",
+    logo: <FileText className="h-8 w-8" />,
+    connected: true,
+    desc: "Effortlessly sync Notion pages for seamless collaboration.",
+  },
+  {
+    name: "Figma",
+    logo: <Figma className="h-8 w-8" />,
+    connected: true,
+    desc: "View and collaborate on Figma designs in one place.",
+  },
+  {
+    name: "Trello",
+    logo: <Trello className="h-8 w-8" />,
+    connected: false,
+    desc: "Sync Trello cards for streamlined project management.",
+  },
+  {
+    name: "Slack",
+    logo: <MessageSquare className="h-8 w-8" />,
+    connected: false,
+    desc: "Integrate Slack for efficient team communication",
+  },
+  {
+    name: "Zoom",
+    logo: <Video className="h-8 w-8" />,
+    connected: true,
+    desc: "Host Zoom meetings directly from the dashboard.",
+  },
+  {
+    name: "Stripe",
+    logo: <CreditCard className="h-8 w-8" />,
+    connected: false,
+    desc: "Easily manage Stripe transactions and payments.",
+  },
+  {
+    name: "Gmail",
+    logo: <Mail className="h-8 w-8" />,
+    connected: true,
+    desc: "Access and manage Gmail messages effortlessly.",
+  },
+  {
+    name: "Medium",
+    logo: <BookOpen className="h-8 w-8" />,
+    connected: false,
+    desc: "Explore and share Medium stories on your dashboard.",
+  },
+  {
+    name: "Skype",
+    logo: <Phone className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Skype contacts seamlessly.",
+  },
+  {
+    name: "Docker",
+    logo: <Package className="h-8 w-8" />,
+    connected: false,
+    desc: "Effortlessly manage Docker containers on your dashboard.",
+  },
+  {
+    name: "GitHub",
+    logo: <Github className="h-8 w-8" />,
+    connected: false,
+    desc: "Streamline code management with GitHub integration.",
+  },
+  {
+    name: "GitLab",
+    logo: <GitBranch className="h-8 w-8" />,
+    connected: false,
+    desc: "Efficiently manage code projects with GitLab integration.",
+  },
+  {
+    name: "Discord",
+    logo: <Users className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Discord for seamless team communication.",
+  },
+  {
+    name: "WhatsApp",
+    logo: <MessageCircle className="h-8 w-8" />,
+    connected: false,
+    desc: "Easily integrate WhatsApp for direct messaging.",
+  },
+];

package/templates/default/apps/admin/src/data/chats.ts

@@ -0,0 +1,114 @@
+export type Convo = {
+  sender: string;
+  message: string;
+  timestamp: string;
+};
+
+export type ChatUser = {
+  id: string;
+  profile: string;
+  username: string;
+  fullName: string;
+  title: string;
+  messages: Convo[];
+};
+
+export const conversations: ChatUser[] = [
+  {
+    id: "conv1",
+    profile: "https://randomuser.me/api/portraits/men/32.jpg",
+    username: "alex_dev",
+    fullName: "Alex John",
+    title: "Senior Backend Dev",
+    messages: [
+      {
+        sender: "You",
+        message: "See you later, Alex!",
+        timestamp: "2024-08-24T11:15:15",
+      },
+      {
+        sender: "Alex",
+        message: "Alright, talk to you later!",
+        timestamp: "2024-08-24T11:11:30",
+      },
+      {
+        sender: "You",
+        message: "For sure. Anyway, I should get back to reviewing the project.",
+        timestamp: "2024-08-23T09:26:50",
+      },
+      {
+        sender: "Alex",
+        message: "Yeah, let me know what you think.",
+        timestamp: "2024-08-23T09:25:15",
+      },
+      {
+        sender: "You",
+        message: "Oh, nice! I've been waiting for that. I'll check it out later.",
+        timestamp: "2024-08-23T09:24:30",
+      },
+      {
+        sender: "Alex",
+        message: "They've added a dark mode option! It looks really sleek.",
+        timestamp: "2024-08-23T09:23:10",
+      },
+      {
+        sender: "You",
+        message: "No, not yet. What's new?",
+        timestamp: "2024-08-23T09:22:00",
+      },
+      {
+        sender: "Alex",
+        message: "By the way, have you seen the new feature update?",
+        timestamp: "2024-08-23T09:21:05",
+      },
+    ],
+  },
+  {
+    id: "conv2",
+    profile: "https://randomuser.me/api/portraits/women/44.jpg",
+    username: "sarah_designer",
+    fullName: "Sarah Miller",
+    title: "Lead Designer",
+    messages: [
+      {
+        sender: "You",
+        message: "Thanks! Looking forward to it.",
+        timestamp: "2024-08-23T14:30:00",
+      },
+      {
+        sender: "Sarah",
+        message: "I'll send you the final mockups by tomorrow.",
+        timestamp: "2024-08-23T14:28:00",
+      },
+      {
+        sender: "You",
+        message: "That sounds great!",
+        timestamp: "2024-08-23T14:25:00",
+      },
+    ],
+  },
+  {
+    id: "conv3",
+    profile: "https://randomuser.me/api/portraits/men/45.jpg",
+    username: "mike_pm",
+    fullName: "Mike Johnson",
+    title: "Project Manager",
+    messages: [
+      {
+        sender: "Mike",
+        message: "Can we schedule a meeting for tomorrow?",
+        timestamp: "2024-08-22T10:00:00",
+      },
+      {
+        sender: "You",
+        message: "Sure, what time works for you?",
+        timestamp: "2024-08-22T10:05:00",
+      },
+      {
+        sender: "Mike",
+        message: "How about 2 PM?",
+        timestamp: "2024-08-22T10:10:00",
+      },
+    ],
+  },
+];

package/templates/default/apps/admin/src/data/tasks.ts

@@ -0,0 +1,114 @@
+import { faker } from "@faker-js/faker";
+import {
+  AlertCircle,
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  CheckCircle,
+  Circle,
+  CircleOff,
+  HelpCircle,
+  Timer,
+} from "lucide-react";
+import { z } from "zod";
+
+// Schema
+export const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string(),
+  label: z.string(),
+  priority: z.string(),
+});
+
+export type Task = z.infer<typeof taskSchema>;
+
+// Metadata
+export const labels = [
+  {
+    value: "bug",
+    label: "Bug",
+  },
+  {
+    value: "feature",
+    label: "Feature",
+  },
+  {
+    value: "documentation",
+    label: "Documentation",
+  },
+];
+
+export const statuses = [
+  {
+    label: "Backlog",
+    value: "backlog" as const,
+    icon: HelpCircle,
+  },
+  {
+    label: "Todo",
+    value: "todo" as const,
+    icon: Circle,
+  },
+  {
+    label: "In Progress",
+    value: "in progress" as const,
+    icon: Timer,
+  },
+  {
+    label: "Done",
+    value: "done" as const,
+    icon: CheckCircle,
+  },
+  {
+    label: "Canceled",
+    value: "canceled" as const,
+    icon: CircleOff,
+  },
+];
+
+export const priorities = [
+  {
+    label: "Low",
+    value: "low" as const,
+    icon: ArrowDown,
+  },
+  {
+    label: "Medium",
+    value: "medium" as const,
+    icon: ArrowRight,
+  },
+  {
+    label: "High",
+    value: "high" as const,
+    icon: ArrowUp,
+  },
+  {
+    label: "Critical",
+    value: "critical" as const,
+    icon: AlertCircle,
+  },
+];
+
+// Mock data
+// Set a fixed seed for consistent data generation
+faker.seed(12345);
+
+export const tasks = Array.from({ length: 100 }, () => {
+  const statusValues = ["todo", "in progress", "done", "canceled", "backlog"] as const;
+  const labelValues = ["bug", "feature", "documentation"] as const;
+  const priorityValues = ["low", "medium", "high"] as const;
+
+  return {
+    id: `TASK-${faker.number.int({ min: 1000, max: 9999 })}`,
+    title: faker.lorem.sentence({ min: 5, max: 15 }),
+    status: faker.helpers.arrayElement(statusValues),
+    label: faker.helpers.arrayElement(labelValues),
+    priority: faker.helpers.arrayElement(priorityValues),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+    assignee: faker.person.fullName(),
+    description: faker.lorem.paragraph({ min: 1, max: 3 }),
+    dueDate: faker.date.future(),
+  };
+});

package/templates/default/apps/admin/src/data/users.ts

@@ -0,0 +1,90 @@
+import { faker } from "@faker-js/faker";
+import { CreditCard, Shield, UserCheck, Users } from "lucide-react";
+import { z } from "zod";
+
+// Schema
+const userStatusSchema = z.union([
+  z.literal("active"),
+  z.literal("inactive"),
+  z.literal("invited"),
+  z.literal("suspended"),
+]);
+export type UserStatus = z.infer<typeof userStatusSchema>;
+
+const userRoleSchema = z.union([
+  z.literal("superadmin"),
+  z.literal("admin"),
+  z.literal("cashier"),
+  z.literal("manager"),
+]);
+
+const userSchema = z.object({
+  id: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  username: z.string(),
+  email: z.string(),
+  phoneNumber: z.string(),
+  status: userStatusSchema,
+  role: userRoleSchema,
+  createdAt: z.coerce.date(),
+  updatedAt: z.coerce.date(),
+});
+export type User = z.infer<typeof userSchema>;
+
+export const userListSchema = z.array(userSchema);
+
+// Metadata
+export const callTypes = new Map<UserStatus, string>([
+  ["active", "bg-teal-100/30 text-teal-900 dark:text-teal-200 border-teal-200"],
+  ["inactive", "bg-neutral-300/40 border-neutral-300"],
+  ["invited", "bg-sky-200/40 text-sky-900 dark:text-sky-100 border-sky-300"],
+  [
+    "suspended",
+    "bg-destructive/10 dark:bg-destructive/50 text-destructive dark:text-primary border-destructive/10",
+  ],
+]);
+
+export const roles = [
+  {
+    label: "Superadmin",
+    value: "superadmin",
+    icon: Shield,
+  },
+  {
+    label: "Admin",
+    value: "admin",
+    icon: UserCheck,
+  },
+  {
+    label: "Manager",
+    value: "manager",
+    icon: Users,
+  },
+  {
+    label: "Cashier",
+    value: "cashier",
+    icon: CreditCard,
+  },
+] as const;
+
+// Mock data
+// Set a fixed seed for consistent data generation
+faker.seed(67890);
+
+export const users = Array.from({ length: 500 }, () => {
+  const firstName = faker.person.firstName();
+  const lastName = faker.person.lastName();
+  return {
+    id: faker.string.uuid(),
+    firstName,
+    lastName,
+    username: faker.internet.username({ firstName, lastName }).toLocaleLowerCase(),
+    email: faker.internet.email({ firstName }).toLocaleLowerCase(),
+    phoneNumber: faker.phone.number({ style: "international" }),
+    status: faker.helpers.arrayElement(["active", "inactive", "invited", "suspended"]),
+    role: faker.helpers.arrayElement(["superadmin", "admin", "cashier", "manager"]),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+  };
+});

package/templates/default/apps/admin/src/hooks/use-dialog-state.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Custom hook for confirm dialog
+ * @param initialState string | null
+ * @returns A stateful value, and a function to update it.
+ * @example const [open, setOpen] = useDialogState<"approve" | "reject">()
+ */
+export default function useDialogState<T extends string | boolean>(initialState: T | null = null) {
+  const [open, _setOpen] = useState<T | null>(initialState);
+
+  const setOpen = (str: T | null) => _setOpen((prev) => (prev === str ? null : str));
+
+  return [open, setOpen] as const;
+}