# Static Resources Reference

**Important**: All static resources are located at **project root**, not in skill directory.

## Resource Paths

### Required Resources (Included in Base Template)

**CSS:**

- `static/bootstrap/bootstrap-5.3.3/css/bootstrap.css` - Bootstrap framework
- `tk/css/main.css` - TKE custom styles

**JavaScript:**

- `static/jQuery/3.6.0/jquery.min.js` - jQuery (must load first)
- `tk/js/main-nav.js` - TKE navigation script
- `static/bootstrap/bootstrap-5.3.3/js/bootstrap.bundle.js` - Bootstrap JS

### Optional Resources (Uncomment in Template as Needed)

**CSS Libraries:**

- `static/select2/4.0.3/select2.min.css` - Select2 dropdown styling
- `static/datepicker/2.0/datepicker3.css` - Datepicker styling
- `static/daterangepicker/2.10.3/daterangepicker.css` - Date range picker
- `static/datatables/1.10.7/dataTables.bootstrap.css` - DataTables styling
- `summernote-bs5.min.css` - Rich text editor (Summernote)
- `jquery.treeview.css` - Treeview component

**JavaScript Libraries:**

- `static/select2/4.0.3/select2.full.min.js` - Select2 dropdown
- `static/datepicker/2.0/bootstrap-datepicker.js` - Datepicker
- `static/daterangepicker/2.10.3/daterangepicker.js` - Date range picker
- `static/datatables/1.10.7/jquery.dataTables.min.js` - DataTables core
- `static/datatables/1.10.7/dataTables.bootstrap.min.js` - DataTables Bootstrap integration
- `summernote-bs5.js` - Rich text editor (Summernote)
- `jquery.treeview.js` - Treeview component
- `static/floatThead-2.1.4/dist/jquery.floatThead.min.js` - Sticky table headers

### Image Resources

**Empty States & Error Pages:**

- `tk/img/responsive/no-data.png` - No data empty state
- `tk/img/responsive/no-task.png` - No task empty state
- `tk/img/responsive/error_one.png` - Error page image
- `tk/img/responsive/error_bc.png` - Standard error page image
- `tk/img/responsive/404.png` - 404 page image
- `tk/img/responsive/nopermission_person.png` - No permission page person
- `tk/img/responsive/nopermission_bc.png` - No permission page bottom
- `tk/img/responsive/systemmaintenance.png` - System maintenance page

## Component Resource Mapping

When generating code, check CSV search results for component requirements:

| Component           | Required Resources                                                                          | Check CSV Notes Column |
| ------------------- | ------------------------------------------------------------------------------------------- | ---------------------- |
| Select2             | `select2.min.css`, `select2.full.min.js`                                                | Yes                    |
| Datepicker          | `datepicker3.css`, `bootstrap-datepicker.js`                                            | Yes                    |
| DataTables          | `dataTables.bootstrap.css`, `jquery.dataTables.min.js`, `dataTables.bootstrap.min.js` | Yes                    |
| Summernote          | `summernote-bs5.min.css`, `summernote-bs5.js`                                           | Yes                    |
| Treeview            | `jquery.treeview.css`, `jquery.treeview.js`                                             | Yes                    |
| Sticky Header Table | `jquery.floatThead.min.js`                                                                | Yes                    |
| Empty State         | `tk/img/responsive/no-data.png`                                                           | Yes                    |
| Error Page          | `tk/img/responsive/error_*.png`                                                           | Yes                    |

**Always check CSV search results' "Notes" column for resource requirements!**