@imksh/create 1.0.26 → 1.0.28

package/templates/layers/react/typescript/src/components/common/modals/ConfirmModal.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { AlertCircle, Trash2, Info } from "lucide-react";
+import Modal from "../Modal";
+export type ConfirmModalType = "danger" | "warning" | "info";
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: React.ReactNode;
+  type?: ConfirmModalType;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  type = "danger",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isLoading = false,
+}) => {
+
+
+  const getTypeStyles = () => {
+    switch (type) {
+      case "danger":
+        return {
+          icon: <Trash2 size={24} className="text-error relative z-10" />,
+          iconBg: "bg-error/10 border-error/20",
+          iconGlow: "bg-error/20",
+          btn: "bg-gradient-to-r from-error to-error/80 hover:from-error/90 hover:to-error text-error-content border-none shadow-[0_4px_12px_rgba(239,68,68,0.25)] hover:shadow-[0_6px_16px_rgba(239,68,68,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-error/20",
+        };
+      case "warning":
+        return {
+          icon: <AlertCircle size={24} className="text-warning relative z-10" />,
+          iconBg: "bg-warning/10 border-warning/20",
+          iconGlow: "bg-warning/20",
+          btn: "bg-gradient-to-r from-warning to-warning/80 hover:from-warning/90 hover:to-warning text-warning-content border-none shadow-[0_4px_12px_rgba(245,158,11,0.25)] hover:shadow-[0_6px_16px_rgba(245,158,11,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-warning/20",
+        };
+      default:
+        return {
+          icon: <Info size={24} className="text-info relative z-10" />,
+          iconBg: "bg-info/10 border-info/20",
+          iconGlow: "bg-info/20",
+          btn: "bg-gradient-to-r from-info to-info/80 hover:from-info/90 hover:to-info text-info-content border-none shadow-[0_4px_12px_rgba(14,165,233,0.25)] hover:shadow-[0_6px_16px_rgba(14,165,233,0.4)] hover:-translate-y-0.5 transition-all duration-300",
+          border: "border-info/20",
+        };
+    }
+  };
+
+  const styles = getTypeStyles();
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      hideHeader
+      size="sm"
+      className={`p-8 !max-w-md ${styles.border}`}
+    >
+      <div className={`absolute top-0 left-0 w-full h-1 ${styles.btn.split(' ')[0]} ${styles.btn.split(' ')[1]}`}></div>
+
+      <div className="flex flex-col items-center text-center">
+        {/* Icon with glowing effect */}
+        <div className="relative mb-5">
+          <div className={`absolute inset-0 rounded-full blur-xl animate-pulse-glow ${styles.iconGlow}`}></div>
+          <div className={`relative w-14 h-14 rounded-full flex items-center justify-center border ${styles.iconBg} shadow-inner`}>
+            {styles.icon}
+          </div>
+        </div>
+
+        <h3 className="font-bold text-2xl mb-3 text-base-content tracking-tight">
+          {title}
+        </h3>
+        
+        <div className="text-base-content/70 mb-8 leading-relaxed text-sm px-2">
+          {message}
+        </div>
+      </div>
+      
+      <div className="flex items-center justify-center gap-4 w-full">
+        <button 
+          type="button" 
+          className="btn btn-ghost rounded-xl px-6 flex-1 hover:-translate-y-0.5 transition-all duration-300" 
+          onClick={() => {
+            if (!isLoading) onClose();
+          }} 
+          disabled={isLoading}
+        >
+          {cancelText}
+        </button>
+        <button
+          type="button"
+          className={`btn rounded-xl px-6 flex-1 ${styles.btn}`}
+          onClick={onConfirm}
+          disabled={isLoading}
+        >
+          {isLoading ? <span className="loading loading-spinner loading-sm"></span> : confirmText}
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

package/templates/layers/react/typescript/src/components/common/modals/DocViewerModal.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useResumeStore } from "../../store/useResumeStore";
+import Modal from "../Modal";
+
+interface DocViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  documentUrl?: string;
+}
+
+export const DocViewerModal = ({ isOpen, onClose, documentUrl }: DocViewerModalProps) => {
+  const { analysisResult } = useResumeStore();
+
+  const finalUrl = documentUrl || analysisResult?.documentUrl;
+  const textContent = analysisResult?.resumeText;
+
+  if (!isOpen || (!finalUrl && !textContent)) return null;
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title="Document Viewer"
+      size="2xl"
+    >
+      <div className="h-[75vh] w-full">
+        {finalUrl ? (
+          <iframe
+            src={finalUrl}
+            className="w-full h-full rounded-lg border border-base-300 bg-base-100"
+            title="Resume Document"
+          />
+        ) : (
+          <div className="bg-base-100 p-6 rounded-lg border border-base-300 whitespace-pre-wrap font-mono text-sm shadow-inner h-full overflow-y-auto">
+            {textContent}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};

package/templates/{mern-react-native/client → layers/react/typescript}/src/components/layout/SidebarLayout.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import SidebarHeader from "../ui/SidebarHeader";
-import Sidebar from "../ui/sidebar";
+import Sidebar from "../ui/Sidebar";
 import { useUiStore } from "../../store/useUiStore";
 import appConfig from "../../config/appConfig";
 

package/templates/{mern/client/src/components/ui/sidebar.jsx → layers/react/typescript/src/components/ui/Sidebar.tsx}

@@ -50,9 +50,9 @@ const Sidebar = () => {
             {/* Header */}
             <div className="h-16 border-b border-base-300 flex items-center justify-between px-5">
               <div className="flex items-center gap-3">
-                {appConfig.app.img ? (
+                {appConfig.app.logo ? (
                   <img
-                    src={appConfig.app.img}
+                    src={appConfig.app.logo}
                     alt=""
                     className="w-8 h-8 rounded-lg"
                   />
@@ -89,7 +89,7 @@ const Sidebar = () => {
                     to={item.path}
                     onClick={isMobile ? close : undefined}
                     className={({ isActive }) =>
-                      `flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
+                      `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
                       ${
                         isActive
                           ? "bg-primary text-primary-content"
@@ -104,7 +104,7 @@ const Sidebar = () => {
                     />
 
                     {!collapsed && (
-                      <span className="font-medium transition-all duration-300">
+                      <span className="font-medium transition-all duration-0 whitespace-nowrap">
                         {item.title}
                       </span>
                     )}

package/templates/{mern-react-native/client → layers/react/typescript}/src/components/ui/SidebarHeader.tsx

@@ -1,11 +1,18 @@
 import { FiMenu } from "react-icons/fi";
 import { useUiStore } from "../../store/useUiStore";
 
-const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
-  const { toggleSidebar } = useUiStore();
+import { Breadcrumbs } from "../common/Breadcrumbs";
+
+interface SidebarHeaderProps {
+  title?: string;
+  actions?: React.ReactNode;
+}
+
+const SidebarHeader = ({ title = "Dashboard", actions = null }: SidebarHeaderProps) => {
+  const { toggleSidebar, breadcrumbs } = useUiStore();
 
   return (
-    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
+    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-200 flex items-center justify-between px-4 lg:px-6">
       <div className="flex items-center gap-3">
         <button
           onClick={toggleSidebar}
@@ -14,7 +21,11 @@ const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
           <FiMenu size={22} />
         </button>
 
-        <h1 className="text-xl font-bold">{title}</h1>
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <Breadcrumbs items={breadcrumbs} />
+        ) : (
+          <h1 className="text-xl font-bold">{title}</h1>
+        )}
       </div>
 
       <div className="flex items-center gap-2">

package/templates/{react-ts → layers/react/typescript}/src/store/useUiStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { ReactNode } from "react";
+import { BreadcrumbItem } from "../components/common/Breadcrumbs";
 
 export interface UiState {
   open: boolean;
@@ -7,8 +8,12 @@ export interface UiState {
   isMobileMenuOpened: boolean;
   headerTitle: string;
   headerActions: ReactNode;
+  breadcrumbs: BreadcrumbItem[] | null;
+  layoutClass: string;
+  setLayoutClass: (layoutClass: string) => void;
   setHeaderTitle: (title: string) => void;
   setHeaderActions: (actions: ReactNode) => void;
+  setBreadcrumbs: (breadcrumbs: BreadcrumbItem[] | null) => void;
   toggleCollapsed: () => void;
   setMobileMenuOpened: (open: boolean) => void;
   toggleMobileMenuOpened: () => void;
@@ -18,16 +23,23 @@ export interface UiState {
   toggleSidebar: () => void;
   openSidebar: () => void;
   close: () => void;
+  isModalOpen: boolean;
+  setModalOpen: (open: boolean) => void;
 }
 
 export const useUiStore = create<UiState>((set, get) => ({
   open: false,
+  isModalOpen: false,
   collapsed: false,
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
+  breadcrumbs: null,
+  layoutClass: "",
+  setLayoutClass: (layoutClass: string) => set({ layoutClass }),
   setHeaderTitle: (title: string) => set({ headerTitle: title }),
   setHeaderActions: (actions: ReactNode) => set({ headerActions: actions }),
+  setBreadcrumbs: (breadcrumbs: BreadcrumbItem[] | null) => set({ breadcrumbs }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
 
   setMobileMenuOpened: (open) => {
@@ -71,4 +83,9 @@ export const useUiStore = create<UiState>((set, get) => ({
     set({
       open: false,
     }),
+
+  setModalOpen: (open: boolean) =>
+    set({
+      isModalOpen: open,
+    }),
 }));