Skip to main content

​
Overview

GIMA’s Asset Management module provides a powerful interface for organizing and tracking all organizational assets through a category-based system. From computers and infrastructure to vehicles and network equipment, manage your entire inventory with ease.

Category-Based Organization

Organize assets into logical categories like COMPUTO, MOBILIARIO, VEHÍCULOS, and REDES

Real-time Search

Instantly filter categories by name or ID as you type

Asset Count Tracking

Each category displays the total number of associated assets

CRUD Operations

Create, read, update, and delete categories with intuitive controls

​
Asset Categories

The system comes pre-configured with essential asset categories defined in src/data/categories.ts: 
export const categories = [
  { 
    id: "CAT-001", 
    name: "COMPUTO", 
    description: "Ordenadores, servidores y periféricos", 
    total: 120 
  },
  { 
    id: "CAT-002", 
    name: "INFRAESTRUCTURA", 
    description: "Aires acondicionados, plantas eléctricas, mobiliario", 
    total: 58 
  },
  { 
    id: "CAT-003", 
    name: "ELECTRICIDAD", 
    description: "Cables, interruptores, enchufes, etc.", 
    total: 85 
  },
];
The page implementation at src/app/categorias-activos/page.tsx uses a slightly different set of example categories including COMPUTO, MOBILIARIO, VEHÍCULOS, and REDES. You can customize these to match your organization’s needs.

​
Using Asset Management

1

Navigate to Categories

Access the asset management interface at /categorias-activosThe page displays the header “CATEGORÍAS” with the subtitle “Clasificación de equipos”
2

Search for Categories

Use the search bar to filter categories in real-time:
const filteredCategories = categories.filter(
  (cat) =>
    cat.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    cat.id.toLowerCase().includes(searchTerm.toLowerCase()),
);
The search matches both category names and IDs.
3

View Category Details

Each category row displays:
  • ID: Unique identifier (e.g., CAT-001)
  • Name: Category name in uppercase
  • Description: Detailed description of included asset types
  • Total Assets: Count badge showing number of assets
4

Manage Categories

Use the action buttons to:
  • Edit: Click the pencil icon to modify category details
  • Delete: Click the trash icon to remove a category (with confirmation)
  • Create: Click “NUEVA CATEGORÍA” button to add new categories

​
Key Features

​
Smart Search Functionality

The search bar provides instant filtering with visual feedback: 
<div className="relative w-72">
  <Search className="absolute left-4 top-3 text-slate-400" size={18} />
  <input
    type="text"
    placeholder="Buscar categoría..."
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    className="w-full bg-slate-50 pl-11 pr-4 py-2.5 rounded-xl"
  />
</div>

​
Safe Delete with Confirmation

The DeleteAlert component prevents accidental deletions: 
<DeleteAlert
  isOpen={isAlertOpen}
  onClose={() => setIsAlertOpen(false)}
  onConfirm={confirmDelete}
  title="¿Eliminar Categoría?"
  description="Esta acción no se puede deshacer."
/>
Deleting a category is permanent. Ensure all assets are reassigned before removing categories.

​
Responsive Table Design

The interface uses a card-based table with hover effects: 
<tr className="hover:bg-blue-50/30 transition-colors group">
  {/* Table cells */}
</tr>

​
User Interface Components

Search Bar: Located in the toolbar with lucide-react Search iconFilter Button: Quick access to advanced filtering optionsResults Counter: Shows total filtered results dynamically
<span className="text-xs font-bold text-slate-400 uppercase tracking-wider">
  Total: {filteredCategories.length} Resultados
</span>

​
State Management

The page uses React hooks for local state management: 
const [categories, setCategories] = useState(initialCategories);
const [searchTerm, setSearchTerm] = useState("");
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [idToDelete, setIdToDelete] = useState<string | null>(null);

​
Delete Handler Implementation

const handleDeleteClick = (id: string) => {
  setIdToDelete(id);
  setIsAlertOpen(true);
};

const confirmDelete = () => {
  setCategories(categories.filter((cat) => cat.id !== idToDelete));
  setIsAlertOpen(false);
  setIdToDelete(null);
};

​
Styling & Design System

GIMA uses a custom Tailwind configuration with branded colors:

gima-navy

Primary dark blue for headers and emphasis

gima-blue

Brand blue for buttons and interactive elements

gima-gray

Muted gray for secondary text

​
Rounded Corners

The design emphasizes soft, rounded corners throughout:
  • Cards: rounded-[2rem]
  • Buttons: rounded-xl
  • Input fields: rounded-xl
  • Badges: rounded-lg
The page includes a back button to return to configuration: 
<Link href="/configuration/settings">
  <button className="flex items-center gap-2 text-gray-500 mt-5 hover:text-[#0d2344] transition-colors">
    <div className="bg-white p-1 rounded-md shadow-sm">
      <ChevronLeft size={16} />
    </div>
    <span className="text-sm font-medium">Volver a configuración</span>
  </button>
</Link>

​
Best Practices

Consistent Naming

Use uppercase names for categories (e.g., COMPUTO, REDES) to maintain consistency

Descriptive IDs

Follow the CAT-XXX pattern for category IDs for easy identification

Detailed Descriptions

Include comprehensive descriptions to help users understand what belongs in each category

Regular Audits

Periodically review asset counts to ensure accuracy
The hover effects on table rows (hover:bg-blue-50/30) provide visual feedback and improve user experience. The group utility allows child elements to respond to parent hover states.

​
Integration Points

  • Dashboard: Asset totals feed into dashboard statistics
  • Maintenance: Categories help organize maintenance schedules
  • Reports: Generate category-based asset reports
  • Configuration: Access via configuration menu

Build docs developers (and LLMs) love

Get started for freeTalk to us