Feature/custom browse jobs

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx nx build:*)"
+    ]
+  }
+}

CLAUDE.md

@@ -0,0 +1,71 @@
+# PageCreator - Project Guide
+
+## Project Overview
+PageCreator is an NX monorepo CMS library for creating widget-based pages. It provides admin UI, user-facing rendering components, and a backend with models/controllers/routes.
+
+## Architecture
+
+### Monorepo Structure
+```
+pagecreator/
+├── apps/
+│   ├── api/              # Express backend (demo server)
+│   ├── pagecreator/      # Admin UI app (React/Vite)
+│   ├── front/            # Public frontend (Next.js)
+├── libs/
+│   ├── admin/            # Admin UI library (components, contexts, forms)
+│   ├── user/             # User library (widget rendering components)
+│   └── node/             # Backend library (models, services, controllers, routes)
+```
+
+### Tech Stack
+- **Backend**: Express, MongoDB (Mongoose), Redis (caching)
+- **Admin**: React 18, React Hook Form, React Beautiful DnD, React Select
+- **User**: React 18, Swiper (carousel), React Tabs
+- **Build**: NX, TypeScript
+
+### Library Exports
+- `@nichekit/node` → Backend models, routes, controllers
+- `@nichekit/admin` → Admin UI components (Widget, Page, Provider)
+- `@nichekit/user` → User components (Widget, Page, getData)
+
+## Data Model
+- **Page**: name, code, slug, widgets[] (Widget refs)
+- **Widget**: name, code, widgetType, itemsType, items, tabs, collectionItems, layout config
+- **Item**: title, subtitle, altText, link, img, srcset, itemType (Web/Mobile)
+- **Tab**: name, widgetId, collectionItems[]
+- **SrcSet**: width, height, screenSize, itemId
+
+### Widget Types: FixedCard, Carousel, Tabs, Text, HTML
+### Item Types: Image (built-in), plus external collections via setConfig()
+
+## Key Patterns
+- Config via `setConfig()`: collections, customWidgetTypes, languages, redis
+- Redis caching: `widgetData_${code}`, `pageData_${code}`
+- Admin state: React Context (WidgetContext, PageContext, ProviderContext)
+- User lib: Props-based with callbacks (formatItem, onClick, formatHeader, formatFooter)
+- CSS prefixes: `khb_` (admin), `kpc_` (user)
+- Soft delete, unique code validation, multi-language support
+
+## Key Files
+| Area | Path |
+|------|------|
+| Enums | `libs/node/src/types/enums.ts` |
+| Types | `libs/node/src/types/common.ts` |
+| Widget Model | `libs/node/src/models/Widget.ts` |
+| Widget Controller | `libs/node/src/controllers/WidgetController.ts` |
+| Data Service | `libs/node/src/services/dataService.ts` |
+| Widget Form (Admin) | `libs/admin/src/lib/components/Widget/Form/WidgetForm.tsx` |
+| Widget Context | `libs/admin/src/lib/context/WidgetContext.tsx` |
+| Widget Router (User) | `libs/user/src/lib/components/widget/widget.tsx` |
+| Page Component | `libs/user/src/lib/components/page/page.tsx` |
+| User Types | `libs/user/src/lib/types/api.ts` |
+
+## Build Commands
+```bash
+npx nx build node        # Backend library
+npx nx build admin       # Admin library
+npx nx build user        # User library
+npx nx serve api         # API server
+npx nx serve pagecreator # Admin app
+```

apps/api/src/main.ts

@@ -1,5 +1,7 @@
 import './db/db';
 import './models/notification';
+import Blog from './models/blog';
+import BlogCategory from './models/blogCategory';
 import express from 'express';
 import cors from 'cors';
 import path from 'path';
@@ -34,6 +36,12 @@ setConfig({
       collectionName: 'project_assessment',
       searchColumns: ['assessmentNm', 'projectNm'],
     },
+    {
+      title: 'Blogs',
+      collectionName: 'blog',
+      searchColumns: ['title', 'name', 'slug'],
+      match: { isPublished: true, isActive: true },
+    },
   ],
   // redis: {
   //   HOST: 'localhost',
@@ -66,8 +74,141 @@ app.get('/delete', (req, res) => {
 app.use(resize(path.join(__dirname, 'public')));
 app.use(express.static(path.join(__dirname, './public')));
 
+// Seed test blogs
+async function seedBlogs() {
+  try {
+    const count = await Blog.countDocuments();
+    if (count === 0) {
+      await Blog.insertMany([
+        {
+          title: 'Getting Started with React',
+          value: '123123123123',
+          name: 'Getting Started with React',
+          description: 'A beginner guide to building user interfaces with React.',
+          slug: 'getting-started-with-react',
+          coverImage: '/image/react_intro.png',
+          isPublished: true,
+          isActive: true,
+          isDeleted: false,
+          publishedAt: new Date('2025-08-10T10:00:00.000Z'),
+          viewCount: 250,
+          author: { id: '68c2d1d8ffb1adbf30004ded', nm: 'Ragnar Lothbrok', isActive: true },
+          category: [{ id: '68c92a0426291fe3408a8141', nm: 'Technology', slug: 'technology', isActive: true }],
+        },
+        {
+          title: 'Understanding MongoDB Aggregations',
+          value: '123123123123234',
+          name: 'Understanding MongoDB Aggregations',
+          description: 'Deep dive into MongoDB aggregation pipelines and their use cases.',
+          slug: 'understanding-mongodb-aggregations',
+          coverImage: '/image/mongodb_agg.png',
+          isPublished: true,
+          isActive: true,
+          isDeleted: false,
+          publishedAt: new Date('2025-09-01T08:30:00.000Z'),
+          viewCount: 180,
+          author: { id: '68c2d1d8ffb1adbf30004ded', nm: 'Ragnar Lothbrok', isActive: true },
+          category: [{ id: '68c92a0426291fe3408a8142', nm: 'Database', slug: 'database', isActive: true }],
+        },
+        {
+          title: 'Building REST APIs with Express',
+          value: '123123123123234234',
+          name: 'Building REST APIs with Express',
+          description: 'Learn how to create robust REST APIs using Express.js.',
+          slug: 'building-rest-apis-with-express',
+          coverImage: '/image/express_api.png',
+          isPublished: true,
+          isActive: true,
+          isDeleted: false,
+          publishedAt: new Date('2025-09-10T14:00:00.000Z'),
+          viewCount: 320,
+          author: { id: '68c2d1d8ffb1adbf30004ded', nm: 'Ragnar Lothbrok', isActive: true },
+          category: [{ id: '68c92a0426291fe3408a8141', nm: 'Technology', slug: 'technology', isActive: true }],
+        },
+        {
+          title: 'CSS Grid vs Flexbox',
+          value: '123123123123234234234234',
+          name: 'CSS Grid vs Flexbox',
+          description: 'Comparing CSS Grid and Flexbox for modern web layouts.',
+          slug: 'css-grid-vs-flexbox',
+          coverImage: '/image/css_layout.png',
+          isPublished: true,
+          isActive: true,
+          isDeleted: false,
+          publishedAt: new Date('2025-09-15T12:00:00.000Z'),
+          viewCount: 95,
+          author: { id: '68c2d1d8ffb1adbf30004ded', nm: 'Ragnar Lothbrok', isActive: true },
+          category: [{ id: '68c92a0426291fe3408a8143', nm: 'Design', slug: 'design', isActive: true }],
+        },
+        {
+          title: 'TypeScript Best Practices',
+          name: 'TypeScript Best Practices',
+          description: 'Tips and patterns for writing clean TypeScript code.',
+          slug: 'typescript-best-practices',
+          coverImage: '/image/typescript_tips.png',
+          isPublished: true,
+          isActive: true,
+          isDeleted: false,
+          publishedAt: new Date('2025-09-16T09:12:50.750Z'),
+          viewCount: 410,
+          author: { id: '68c2d1d8ffb1adbf30004ded', nm: 'Ragnar Lothbrok', isActive: true },
+          category: [{ id: '68c92a0426291fe3408a8141', nm: 'Technology', slug: 'technology', isActive: true }],
+        },
+      ]);
+    }
+  } catch (err) {
+    console.error('Error seeding blogs:', err);
+  }
+}
+
+// Seed blog categories
+async function seedBlogCategories() {
+  try {
+    const count = await BlogCategory.countDocuments();
+    if (count === 0) {
+      await BlogCategory.insertMany([
+        {
+          _id: new mongoose.Types.ObjectId('68c92a0426291fe3408a8141'),
+          nm: 'Technology',
+          slug: 'technology',
+          description: 'Articles about technology, programming, and software development',
+          isActive: true,
+          isDeleted: false,
+          createdBy: new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded'),
+          updatedBy: [new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded')],
+        },
+        {
+          _id: new mongoose.Types.ObjectId('68c92a0426291fe3408a8142'),
+          nm: 'Database',
+          slug: 'database',
+          description: 'Database design, optimization, and best practices',
+          isActive: true,
+          isDeleted: false,
+          createdBy: new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded'),
+          updatedBy: [new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded')],
+        },
+        {
+          _id: new mongoose.Types.ObjectId('68c92a0426291fe3408a8143'),
+          nm: 'Design',
+          slug: 'design',
+          description: 'UI/UX design, CSS, and frontend development',
+          isActive: true,
+          isDeleted: false,
+          createdBy: new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded'),
+          updatedBy: [new mongoose.Types.ObjectId('68c2d1d8ffb1adbf30004ded')],
+        },
+      ]);
+      console.log('Blog categories seeded successfully');
+    }
+  } catch (err) {
+    console.error('Error seeding blog categories:', err);
+  }
+}
+
 const port = process.env.port || 3333;
-const server = app.listen(port, () => {
+const server = app.listen(port, async () => {
   console.log('Listening at http://localhost:' + port);
+  await seedBlogCategories();
+  await seedBlogs();
 });
 server.on('error', console.error);

apps/api/src/models/blog.ts

@@ -0,0 +1,20 @@
+import { Schema, model } from 'mongoose';
+import mongoosePaginate from 'mongoose-paginate-v2';
+
+const blogSchema = new Schema(
+  {
+    title: String,
+    name: String,
+    description: String,
+    slug: String,
+    coverImage: String,
+    isPublished: { type: Boolean, default: false },
+    isActive: { type: Boolean, default: true },
+    isDeleted: { type: Boolean, default: false },
+  },
+  { strict: false, timestamps: true }
+);
+
+blogSchema.plugin(mongoosePaginate);
+const Blog = model('blog', blogSchema);
+export default Blog;

apps/api/src/models/blogCategory.ts

@@ -0,0 +1,19 @@
+import { Schema, model } from 'mongoose';
+import mongoosePaginate from 'mongoose-paginate-v2';
+
+const blogCategorySchema = new Schema(
+  {
+    nm: String,
+    slug: String,
+    description: String,
+    isActive: { type: Boolean, default: true },
+    isDeleted: { type: Boolean, default: false },
+    createdBy: Schema.Types.ObjectId,
+    updatedBy: [Schema.Types.ObjectId],
+  },
+  { timestamps: true }
+);
+
+blogCategorySchema.plugin(mongoosePaginate);
+const BlogCategory = model('blogCategory', blogCategorySchema, 'blogCategory');
+export default BlogCategory;

apps/pagecreator/src/main.tsx

@@ -2,7 +2,9 @@ import * as ReactDOM from 'react-dom/client';
 
 import App from './app/app';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(<App />);
+const rootElement = document.getElementById('root') as HTMLElement | null;
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<App /> as unknown as Parameters<typeof root.render>[0]);
+}

libs/admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version":"1.2.6",
+  "version": "1.7.4",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -35,4 +35,4 @@
     "index.js",
     "index.cjs"
   ]
-}
+}

libs/admin/src/lib/api/list.ts

@@ -45,6 +45,10 @@ const apiList = {
     url: `${prefix}/languages`,
     method: 'GET',
   }),
+  BLOG_CATEGORIES: ({ prefix }: API_INPUT_TYPE) => ({
+    url: `${prefix}/blog-categories`,
+    method: 'GET',
+  }),
   // Image Upload API
   IMAGE_UPLOAD: ({ prefix }: API_INPUT_TYPE) => ({
     url: `${prefix}/upload`,

libs/admin/src/lib/components/Page/Form/PageForm.tsx

@@ -16,7 +16,12 @@ import {
 import { CONSTANTS } from '../../../constants/common';
 import { useProviderState } from '../../../context/ProviderContext';
 
-const PageForm = ({ formRef }: FormProps) => {
+const PageForm = ({
+  formRef,
+  onFilterClick,
+  filterQuery,
+  onPrimaryButtonClick,
+}: FormProps) => {
   const { commonTranslations } = useProviderState();
   const {
     data,
@@ -109,6 +114,26 @@ const PageForm = ({ formRef }: FormProps) => {
     if (destination) onChangeWidgetSequence(source.index, destination.index);
   };
 
+  const handlePageSubmit = (formData: Record<string, unknown>) => {
+    const dataToSubmit =
+    typeof filterQuery !== 'undefined'
+    ? { ...formData, filterQuery }
+    : formData;
+    const submitPayload =
+      Array.isArray(selectedWidgets) && selectedWidgets.length > 0
+        ? {
+            ...dataToSubmit,
+            widgets: selectedWidgets.map((item) => ({
+              _id: item.value,
+              label: item.label,
+              code: item.code,
+            })),
+          }
+        : dataToSubmit;
+    onPrimaryButtonClick?.(undefined, submitPayload);
+    return onPageFormSubmit(dataToSubmit);
+  };
+
   // Schemas
   const pageFormSchema: SchemaType[] = [
     {
@@ -163,7 +188,7 @@ const PageForm = ({ formRef }: FormProps) => {
     <div className="khb_form">
       <SimpleForm
         schema={pageFormSchema}
-        onSubmit={onPageFormSubmit}
+        onSubmit={handlePageSubmit}
         ref={formRef}
         isUpdating={formState === 'UPDATE'}
         register={register}
@@ -186,7 +211,12 @@ const PageForm = ({ formRef }: FormProps) => {
         }}
       /> */}
 
-      <DNDItemsList onDragEnd={onDragEnd} items={selectedWidgets} />
+      <DNDItemsList
+        onDragEnd={onDragEnd}
+        onFilterClick={onFilterClick ? () => onFilterClick(data) : undefined}
+        items={selectedWidgets}
+        disableSettings={data?.canDel === false}
+      />
     </div>
   );
 };