maskantech/aeroresolve_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement master data management components including sidebar navigation and item table view

Browse Source
This commit is contained in:
azeeee05
2026-08-18 18:20:12 +05:30
parent ee83c09c2d
commit a1ea47c0f5
4 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx
+5 -3
View File
@@ -7,7 +7,7 @@ import {
TrashIcon,
DotsSixVerticalIcon,
} from '@phosphor-icons/react';
import { CustomInput, CustomLoader, CustomButton } from '../../../../components/custom';
import { CustomInput, CustomLoader, CustomButton, Skeleton } from '../../../../components/custom';
import type { FieldDefinition } from '../ActionBuilderTypes';
interface ConfigurationFieldsColumnProps {
@@ -73,8 +73,10 @@ export function ConfigurationFieldsColumn({
{/* Field Cards List */}
<div className="space-y-3 flex-1 overflow-y-auto max-h-[580px] pr-0.5">
{loading ? (
<div className="py-16 flex justify-center">
<CustomLoader label="Loading fields..." />
<div className="flex flex-col gap-3">
<Skeleton width="100%" height={100} className="rounded-[16px]" />
<Skeleton width="100%" height={100} className="rounded-[16px]" />
<Skeleton width="100%" height={100} className="rounded-[16px]" />
</div>
) : !selectedActionTypeId ? (
<div className="py-12 text-center text-slate-400 text-[13px]">
src/app/configuration/actionBuilder/index.tsx
+22 -3
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { CheckCircleIcon } from '@phosphor-icons/react';
import { CustomConfirmationModal, CustomLoader } from '../../../components/custom';
import { CustomConfirmationModal, CustomLoader, Skeleton } from '../../../components/custom';
import {
CategoriesColumn,
@@ -507,8 +507,27 @@ export default function ActionBuilderPage() {
{/* 3-Column Drilldown Layout */}
{loadingCategories && categories.length === 0 ? (
<div className="py-20 flex justify-center bg-white rounded-[20px] border border-gray-100 shadow-sm">
<CustomLoader label="Loading Action Builder Configurations..." />
<div className="grid grid-cols-1 lg:grid-cols-10 gap-2 items-start">
<div className="lg:col-span-3 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
<Skeleton width={150} height={24} />
<Skeleton width="100%" height={40} className="rounded-lg" />
<Skeleton width="100%" height={60} className="rounded-xl" />
<Skeleton width="100%" height={60} className="rounded-xl" />
<Skeleton width="100%" height={60} className="rounded-xl" />
</div>
<div className="lg:col-span-3 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
<Skeleton width={150} height={24} />
<Skeleton width="100%" height={40} className="rounded-lg" />
<Skeleton width="100%" height={60} className="rounded-xl" />
<Skeleton width="100%" height={60} className="rounded-xl" />
<Skeleton width="100%" height={60} className="rounded-xl" />
</div>
<div className="lg:col-span-4 bg-white rounded-[16px] border border-gray-100 p-4 h-[600px] flex flex-col gap-4">
<Skeleton width={200} height={24} />
<Skeleton width="100%" height={40} className="rounded-lg" />
<Skeleton width="100%" height={80} className="rounded-xl" />
<Skeleton width="100%" height={80} className="rounded-xl" />
</div>
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-10 gap-2 items-start">
src/app/configuration/masterData/components/CategorySidebar.tsx
+5 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { ListBulletsIcon, MagnifyingGlassIcon, DatabaseIcon } from '@phosphor-icons/react';
import { CustomInput, CustomLoader } from '../../../../components/custom';
import { CustomInput, Skeleton } from '../../../../components/custom';
import type { MasterDataCategoryItem } from '../MasterDataTypes';
interface CategorySidebarProps {
@@ -43,8 +43,10 @@ export const CategorySidebar: React.FC<CategorySidebarProps> = ({
{/* Categories Selector List */}
{loading ? (
<div className="py-8 flex justify-center">
<CustomLoader label="Loading Categories..." />
<div className="py-2 flex flex-col gap-2">
{Array.from({ length: 12 }).map((_, i) => (
<Skeleton key={i} width="100%" height={38} className="rounded-[10px]" />
))}
</div>
) : filteredCategories.length === 0 ? (
<div className="py-8 text-center text-slate-400 text-[13px]">
src/app/configuration/masterData/components/MasterItemTable.tsx
+24 -3
View File
@@ -10,7 +10,7 @@ import {
import {
CustomButton,
CustomInput,
CustomLoader,
Skeleton,
CustomStatus,
} from '../../../../components/custom';
import type { MasterDataCategoryItem, MasterDataItem } from '../MasterDataTypes';
@@ -87,8 +87,29 @@ export const MasterItemTable: React.FC<MasterItemTableProps> = ({
{/* Items Table */}
{loading ? (
<div className="py-16 flex justify-center">
<CustomLoader label="Loading Category Values..." />
<div className="overflow-x-auto border border-gray-100 rounded-[16px]">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-slate-50/80 border-b border-gray-100 text-[12px] font-bold text-slate-600 uppercase tracking-wider">
<th className="py-3 px-4 w-16">Seq</th>
<th className="py-3 px-4">Value / Label</th>
<th className="py-3 px-4">Code</th>
<th className="py-3 px-4">Status</th>
<th className="py-3 px-4 text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{Array.from({ length: 6 }).map((_, i) => (
<tr key={i}>
<td className="py-3 px-4"><Skeleton width={20} height={16} /></td>
<td className="py-3 px-4"><Skeleton width={120} height={16} /></td>
<td className="py-3 px-4"><Skeleton width={80} height={16} /></td>
<td className="py-3 px-4"><Skeleton width={60} height={20} className="rounded-full" /></td>
<td className="py-3 px-4 flex justify-end"><Skeleton width={40} height={24} /></td>
</tr>
))}
</tbody>
</table>
</div>
) : !selectedCategory ? (
<div className="py-16 text-center text-slate-400 text-[14px]">