Folder Structure
Folder structure
Finding what you need is made simpler by a clear and simple folder structure. The folder structure can be found in the directory Uno-dashboard
- public/ : Contains all static files, such as JPGs, PNGs, SVGs, and PDFs.
- src/__mock__/ : Stores all of the project's mock api and data, such as users, products, and invoices.
- src/components/ : Throughout the entire project, we primarily use shadcn components, along with a few custom reusable components integrated within shadcn components. All reusable components are sourced from this folder.
- src/hooks/ : Holds global hooks, such as useApexChartOptions (for ApexChart) .
- src/layout/ : Contains the main layout used for public pages.
- src/sections/ : There were more than 30 pages total in the project, and inside each page's section (components, styled components, and hooks) were pre-existing and based on the page name. As example, for course page sections have continue-courses, traffic-sources, upcoming-task etc.
- src/pages/ : The project included more than 30 pages in total; all of the pages' files were collected in this folder.
- src/router/ : Contains all route configurations (for projects that require a routing system).
- src/utils/ : Stores unique, reusable utility methods used throughout the project.
Uno-admin-dashboard
├─ public
| ├─ images
| ├─ logos
| └─ favicon.svg
│
├─ src
│ ├─ assets
│ │ └─ index.css
│ │
│ ├─ __mock__
│ │ ├─ invoices
│ │ ├─ orders
│ │ ├─ products
│ │ ├─ users
│ │ ├─ mock.ts
│ │ ├─ index.ts
│ │
│ ├─ components
│ │ ├─ form
│ │ │ ├─ SelectField.vue
│ │ │ ├─ TextareaField.vue
│ │ │ ├─ TextField.vue
│ │ │ └─ TextFieldSkeleton.vue
│ │ ├─ table
│ │ │ ├─ DataTable.vue
│ │ │ ├─ DataTableActions.vue
│ │ │ ├─ DataTablePagination.vue
│ │ │ ├─ TextFieldSkeleton.vue
│ │ │ ├─ index.ts
│ │ │ └─ useTable.ts
│ │ ├─ ui
│ │ │ ├─ accordion
│ │ │ | ├─ Accordion.vue
│ │ │ | ├─ AccordionContent.vue
│ │ │ | ├─ AccordionItem.vue
│ │ │ | └─ AccordionTrigger.vue
│ │ │ ├─ advance
│ │ │ | └─ InputSpin.vue
│ │ │ ├─ alert
│ │ │ | ├─ Alert.vue
│ │ │ | ├─ AlertDescription.vue
│ │ │ | ├─ AlertTitle.vue
│ │ │ | └─ index.ts
│ │ │ └─ few more folders..
│ │ ├─ AvatarGroup.vue
│ │ ├─ CustomBreadcrumb.vue
│ │ ├─ DataNotFound.vue
│ │ ├─ Footer.vue
│ │ ├─ Icon.vue
│ │ ├─ Rating.vue
│ │ └─ SearchInput.vue
│ │
│ ├─ data
│ │ ├─ dashboards
│ │ │ ├─ analytics.ts
│ │ │ ├─ career.ts
│ │ │ ├─ course.ts
│ │ │ ├─ finance.ts
│ │ │ └─ sales.ts
│ │ ├─ few more folders..
│ │ ├─ notifications.ts
│ │ ├─ navigation.ts
│ │
│ ├─ hooks
│ │ ├─ useApexChartOptions.ts
│ │ ├─ useFetch.ts
│ │ ├─ useLogo.ts
│ │ └─ useProduct.ts
│ │
│ ├─ layout
│ │ ├─ header
│ │ | ├─ popovers
│ │ | └─ Header.vue
│ │ ├─ sidebar
│ │ | ├─ NavAccordion.vue
│ │ | └─ SidebarNavigation.vue
│ │ ├─ DefaultLayout.vue
│ │ └─ MobileSidebar.vue
│ │
│ ├─ lib
│ │ ├─ currency.ts
│ │ ├─ dateFormat.ts
│ │ ├─ libPhoneNumber.ts
│ │ └─ utils.ts
│ │
│ ├─ pages
│ │ ├─ dashboard
| │ │ ├─ Analytics.vue
| │ │ ├─ Career.vue
| │ │ ├─ Course.vue
| │ │ ├─ Finance.vue
| │ │ └─ Sales.vue
│ │ ├─ invoices
| │ │ ├─ columns.ts
| │ │ ├─ InvoiceCreate.vue
| │ │ ├─ InvoiceEdit.vue
| │ │ ├─ InvoiceOverview.vue
| │ │ └─ Invoices.vue
│ │ ├─ orders
| │ │ ├─ OrderOverview.vue
| │ │ └─ Orders.vue
│ │ ├─ products
| │ │ ├─ columns.ts
| │ │ ├─ ProductCreate.vue
| │ │ ├─ ProductEdit.vue
| │ │ ├─ ProductOverview.vue
| │ │ └─ Products.vue
│ │ ├─ sessions
| │ │ ├─ ForgetPassword.vue
| │ │ ├─ Login.vue
| │ │ ├─ Maintenance.vue
| │ │ ├─ NotFound.vue
| │ │ ├─ Register.vue
| │ │ ├─ ServerError.vue
| │ │ └─ Verification.vue
│ │ ├─ settings
| │ │ └─ some more files...
│ │ ├─ support
| │ │ └─ some more files...
│ │ └─ users
| │ └─ some more files...
│ │
│ ├─ router
│ │ ├─ dashboardRoutes.ts
│ │ ├─ index.ts
│ │ ├─ invoiceRoutes.ts
│ │ ├─ orderRoutes.ts
│ │ ├─ productRoutes.ts
│ │ ├─ settingsRoutes.ts
│ │ ├─ supportRoutes.ts
│ │ └─ userRoutes.ts
│ │
│ ├─ sections
│ │ ├─ analytics
| │ │ └─ some more files..
│ │ ├─ career
| │ │ └─ some more files..
│ │ ├─ course
| │ │ └─ some more files..
│ │ ├─ finance
| │ │ └─ some more files..
│ │ ├─ invoices
| │ │ └─ some more files..
│ │ ├─ orders
| │ │ └─ some more files..
│ │ ├─ products
| │ │ └─ some more files..
│ │ ├─ profile
| │ │ └─ some more files..
│ │ ├─ sales
| │ │ └─ some more files..
│ │ ├─ settings
| │ │ └─ some more files..
│ │ ├─ support
| │ │ └─ some more files..
│ │ └─ users
| | └─ some more files..
│ │
│ ├─ stores
│ │ └─ sidebar.ts
│ │
│ ├─ types
│ │ ├─ Invoice.ts
│ │ ├─ Meta.ts
│ │ ├─ Order.ts
│ │ ├─ Post.ts
│ │ ├─ Product.ts
│ │ ├─ Status.ts
│ │ └─ User.ts
| |
│ ├─ App.vue
│ └─ main.ts
│
├─ .gitignore
├─ components.json
├─ index.html
├─ package.json
├─ package-lock.json
├─ postcss.config.js
├─ README.md
├─ tailwind.config.js
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.js