Manufacturing · Bill of Materials
Árbol explosionado de componentes (BOM): jerarquía, SKU, cantidad, coste, stock y estado. Construido a partir de primitivos: no existe ningún componente Manufacturing en OutfitKit. Es una Table con padding-left por nivel + Chip de estado. Consulta el ejemplo completo en examples/domain/manufacturing.html.
Composición: .table dentro de un Card + indentación por nivel con padding-left: calc(var(--space-4) * <level>) + Chip para estado de stock + .meta.mono para los SKU.
Componente Cant. Coste Stock Estado
▼ Bicicleta urbana B-Línea FG-BIK-001 1 ud €384,20 — Listo ▼ Cuadro aluminio 6061 SA-FRA-204 1 ud €118,00 42 OK · Tubo 6061-T6 ⌀31,8mm 2,4 m €18,40 96 m OK · Soldadura TIG argón 0,3 h €9,80 — — ▼ Grupo de cambio Shimano Acera CP-DRV-018 1 set €84,50 14 Bajo · Cassette 8v 11-32T 1 ud €22,00 14 Bajo · Desviador trasero 1 ud €34,80 22 OK · Ruedas 700C dobles CP-WHL-073 2 ud €96,00 0 Sin stock · Pintura epoxi blanco mate CN-PNT-012 0,4 L €12,90 38 L OK · Mano de obra ensamblaje 1,8 h €44,00 — —
Copy
<div class="card" style="width:100%">
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr><td><b>▼ Bicicleta urbana B-Línea</b> <span class="meta mono">FG-BIK-001</span></td><td>1 ud</td><td>€384,20</td><td>—</td><td><span class="chip success sm">Listo</span></td></tr>
<tr><td style="padding-left:24px">▼ Cuadro aluminio 6061 <span class="meta mono">SA-FRA-204</span></td><td>1 ud</td><td>€118,00</td><td>42</td><td><span class="chip sm">OK</span></td></tr>
<tr><td style="padding-left:48px">· Tubo 6061-T6 ⌀31,8mm</td><td>2,4 m</td><td>€18,40</td><td>96 m</td><td><span class="chip sm">OK</span></td></tr>
<tr><td style="padding-left:48px">· Soldadura TIG argón</td><td>0,3 h</td><td>€9,80</td><td>—</td><td>—</td></tr>
<tr><td style="padding-left:24px">▼ Grupo de cambio Shimano Acera <span class="meta mono">CP-DRV-018</span></td><td>1 set</td><td>€84,50</td><td>14</td><td><span class="chip warn sm">Bajo</span></td></tr>
<tr><td style="padding-left:48px">· Cassette 8v 11-32T</td><td>1 ud</td><td>€22,00</td><td>14</td><td><span class="chip warn sm">Bajo</span></td></tr>
<tr><td style="padding-left:48px">· Desviador trasero</td><td>1 ud</td><td>€34,80</td><td>22</td><td><span class="chip sm">OK</span></td></tr>
<tr><td style="padding-left:24px">· Ruedas 700C dobles <span class="meta mono">CP-WHL-073</span></td><td>2 ud</td><td>€96,00</td><td>0</td><td><span class="chip danger sm">Sin stock</span></td></tr>
<tr><td style="padding-left:24px">· Pintura epoxi blanco mate <span class="meta mono">CN-PNT-012</span></td><td>0,4 L</td><td>€12,90</td><td>38 L</td><td><span class="chip sm">OK</span></td></tr>
<tr><td style="padding-left:24px">· Mano de obra ensamblaje</td><td>1,8 h</td><td>€44,00</td><td>—</td><td>—</td></tr>
</tbody>
</table>
</div>
Copy
<Card>
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr>
<td><b>▼ Bicicleta urbana B-Línea</b> <span class="meta mono">FG-BIK-001</span></td>
<td>1 ud</td><td>€384,20</td><td>—</td><td><Chip color="success" size="sm">Listo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">▼ Cuadro aluminio 6061 <span class="meta mono">SA-FRA-204</span></td>
<td>1 ud</td><td>€118,00</td><td>42</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:48px">· Tubo 6061-T6 ⌀31,8mm</td>
<td>2,4 m</td><td>€18,40</td><td>96 m</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:48px">· Soldadura TIG argón</td>
<td>0,3 h</td><td>€9,80</td><td>—</td><td>—</td>
</tr>
<tr>
<td style="padding-left:24px">▼ Grupo de cambio Shimano Acera <span class="meta mono">CP-DRV-018</span></td>
<td>1 set</td><td>€84,50</td><td>14</td><td><Chip color="warn" size="sm">Bajo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Ruedas 700C dobles <span class="meta mono">CP-WHL-073</span></td>
<td>2 ud</td><td>€96,00</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Pintura epoxi blanco mate <span class="meta mono">CN-PNT-012</span></td>
<td>0,4 L</td><td>€12,90</td><td>38 L</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Mano de obra ensamblaje</td>
<td>1,8 h</td><td>€44,00</td><td>—</td><td>—</td>
</tr>
</tbody>
</table>
</Card>
Copy
<Card>
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr>
<td><b>▼ Bicicleta urbana B-Línea</b> <span class="meta mono">FG-BIK-001</span></td>
<td>1 ud</td><td>€384,20</td><td>—</td><td><Chip color="success" size="sm">Listo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">▼ Cuadro aluminio 6061 <span class="meta mono">SA-FRA-204</span></td>
<td>1 ud</td><td>€118,00</td><td>42</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:48px">· Tubo 6061-T6 ⌀31,8mm</td>
<td>2,4 m</td><td>€18,40</td><td>96 m</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:48px">· Soldadura TIG argón</td>
<td>0,3 h</td><td>€9,80</td><td>—</td><td>—</td>
</tr>
<tr>
<td style="padding-left:24px">▼ Grupo de cambio Shimano Acera <span class="meta mono">CP-DRV-018</span></td>
<td>1 set</td><td>€84,50</td><td>14</td><td><Chip color="warn" size="sm">Bajo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Ruedas 700C dobles <span class="meta mono">CP-WHL-073</span></td>
<td>2 ud</td><td>€96,00</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Pintura epoxi blanco mate <span class="meta mono">CN-PNT-012</span></td>
<td>0,4 L</td><td>€12,90</td><td>38 L</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">· Mano de obra ensamblaje</td>
<td>1,8 h</td><td>€44,00</td><td>—</td><td>—</td>
</tr>
</tbody>
</table>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Componente Cant. Coste Stock Estado
▼ Mesa madera roble FG-TBL-008 1 ud €212,40 — Listo
SA-WD-014
1 ud €84,00 9 OK
· Tabla roble 220×90×4 1 ud €72,00 9 OK · Barniz mate 0,2 L €12,00 14 L OK
SA-LEG-022
4 ud €96,40 0 Sin stock
· Pata 71cm 4 ud €88,00 0 Sin stock
Copy
<div data-signals="{ openFrame: true, openDrive: false }" style="width:100%">
<div class="card">
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr><td><b>▼ Mesa madera roble</b> <span class="meta mono">FG-TBL-008</span></td><td>1 ud</td><td>€212,40</td><td>—</td><td><span class="chip success sm">Listo</span></td></tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer" data-on:click="$openFrame = !$openFrame" data-text="$openFrame ? '▼' : '▶'"></span>
Tablero macizo <span class="meta mono">SA-WD-014</span>
</td>
<td>1 ud</td><td>€84,00</td><td>9</td><td><span class="chip sm">OK</span></td>
</tr>
<tr data-show="$openFrame"><td style="padding-left:48px">· Tabla roble 220×90×4</td><td>1 ud</td><td>€72,00</td><td>9</td><td><span class="chip sm">OK</span></td></tr>
<tr data-show="$openFrame"><td style="padding-left:48px">· Barniz mate</td><td>0,2 L</td><td>€12,00</td><td>14 L</td><td><span class="chip sm">OK</span></td></tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer" data-on:click="$openDrive = !$openDrive" data-text="$openDrive ? '▼' : '▶'"></span>
Patas hierro forjado <span class="meta mono">SA-LEG-022</span>
</td>
<td>4 ud</td><td>€96,40</td><td>0</td><td><span class="chip danger sm">Sin stock</span></td>
</tr>
<tr data-show="$openDrive"><td style="padding-left:48px">· Pata 71cm</td><td>4 ud</td><td>€88,00</td><td>0</td><td><span class="chip danger sm">Sin stock</span></td></tr>
</tbody>
</table>
</div>
</div>
Copy
<div data-signals="{ openFrame: true, openDrive: false }">
<Card>
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr>
<td><b>▼ Mesa madera roble</b> <span class="meta mono">FG-TBL-008</span></td>
<td>1 ud</td><td>€212,40</td><td>—</td><td><Chip color="success" size="sm">Listo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer"
data-on:click="$openFrame = !$openFrame"
data-text="$openFrame ? '▼' : '▶'"></span>
Tablero macizo <span class="meta mono">SA-WD-014</span>
</td>
<td>1 ud</td><td>€84,00</td><td>9</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr data-show="$openFrame">
<td style="padding-left:48px">· Tabla roble 220×90×4</td>
<td>1 ud</td><td>€72,00</td><td>9</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr data-show="$openFrame">
<td style="padding-left:48px">· Barniz mate</td>
<td>0,2 L</td><td>€12,00</td><td>14 L</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer"
data-on:click="$openDrive = !$openDrive"
data-text="$openDrive ? '▼' : '▶'"></span>
Patas hierro forjado <span class="meta mono">SA-LEG-022</span>
</td>
<td>4 ud</td><td>€96,40</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
<tr data-show="$openDrive">
<td style="padding-left:48px">· Pata 71cm</td>
<td>4 ud</td><td>€88,00</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
</tbody>
</table>
</Card>
</div>
Copy
<div data-signals="{ openFrame: true, openDrive: false }">
<Card>
<table class="table">
<thead>
<tr><th>Componente</th><th>Cant.</th><th>Coste</th><th>Stock</th><th>Estado</th></tr>
</thead>
<tbody>
<tr>
<td><b>▼ Mesa madera roble</b> <span class="meta mono">FG-TBL-008</span></td>
<td>1 ud</td><td>€212,40</td><td>—</td><td><Chip color="success" size="sm">Listo</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer"
data-on:click="$openFrame = !$openFrame"
data-text="$openFrame ? '▼' : '▶'"></span>
Tablero macizo <span class="meta mono">SA-WD-014</span>
</td>
<td>1 ud</td><td>€84,00</td><td>9</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr data-show="$openFrame">
<td style="padding-left:48px">· Tabla roble 220×90×4</td>
<td>1 ud</td><td>€72,00</td><td>9</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr data-show="$openFrame">
<td style="padding-left:48px">· Barniz mate</td>
<td>0,2 L</td><td>€12,00</td><td>14 L</td><td><Chip size="sm">OK</Chip></td>
</tr>
<tr>
<td style="padding-left:24px">
<span style="cursor:pointer"
data-on:click="$openDrive = !$openDrive"
data-text="$openDrive ? '▼' : '▶'"></span>
Patas hierro forjado <span class="meta mono">SA-LEG-022</span>
</td>
<td>4 ud</td><td>€96,40</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
<tr data-show="$openDrive">
<td style="padding-left:48px">· Pata 71cm</td>
<td>4 ud</td><td>€88,00</td><td>0</td><td><Chip color="danger" size="sm">Sin stock</Chip></td>
</tr>
</tbody>
</table>
</Card>
</div>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />