Refactor frontend to Composition API and improve UI/UX
Major Changes: - Migrate components from Options API to Composition API with <script setup> - Add centralized service layer (serviceService, deliveryService, adminService) - Implement new reusable components (EnhancedButton, EnhancedModal, StatCard, etc.) - Add theme store for consistent theming across application - Improve ServiceCalendar with federal holidays and better styling - Refactor customer profile and tank estimation components - Update all delivery and payment pages to use centralized services - Add utility functions for formatting and validation - Update Dockerfiles for better environment configuration - Enhance Tailwind config with custom design tokens UI Improvements: - Modern, premium design with glassmorphism effects - Improved form layouts with FloatingInput components - Better loading states and empty states - Enhanced modals and tables with consistent styling - Responsive design improvements across all pages Technical Improvements: - Strict TypeScript types throughout - Better error handling and validation - Removed deprecated api.js in favor of TypeScript services - Improved code organization and maintainability
This commit is contained in:
@@ -123,19 +123,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, markRaw } from 'vue'
|
||||
import axios from 'axios'
|
||||
import authHeader from '../../../services/auth.header'
|
||||
import { deliveryService } from '../../../services/deliveryService'
|
||||
import authService from '../../../services/authService'
|
||||
import { Delivery } from '../../../types/models'
|
||||
import Header from '../../../layouts/headers/headerauth.vue'
|
||||
import PaginationComp from '../../../components/pagination.vue'
|
||||
import SideBar from '../../../layouts/sidebar/sidebar.vue'
|
||||
import Footer from '../../../layouts/footers/footer.vue'
|
||||
import {notify} from "@kyvg/vue3-notification";
|
||||
|
||||
// Reactive data
|
||||
@@ -157,22 +155,15 @@ const getPage = (pageVal: any) => {
|
||||
get_oil_orders(pageVal)
|
||||
}
|
||||
|
||||
const userStatus = () => {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
const userStatus = async () => {
|
||||
try {
|
||||
const response = await authService.whoami();
|
||||
if (response.data.ok) {
|
||||
user.value = response.data.user;
|
||||
user.value = response.data.user;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
user.value = null
|
||||
})
|
||||
} catch (error) {
|
||||
user.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
const get_oil_orders = async (pageVal: number) => {
|
||||
@@ -185,28 +176,30 @@ const get_oil_orders = async (pageVal: number) => {
|
||||
}
|
||||
}
|
||||
|
||||
const deleteCall = (delivery_id: any) => {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
|
||||
axios({
|
||||
method: 'delete',
|
||||
url: path,
|
||||
headers: authHeader(),
|
||||
}).then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "deleted delivery",
|
||||
type: "success",
|
||||
});
|
||||
getPage(page.value)
|
||||
} else {
|
||||
notify({
|
||||
title: "Failure",
|
||||
text: "error deleting delivery",
|
||||
type: "success",
|
||||
});
|
||||
const deleteCall = async (delivery_id: number) => {
|
||||
try {
|
||||
const response = await deliveryService.delete(delivery_id);
|
||||
if (response.data.ok) {
|
||||
notify({
|
||||
title: "Success",
|
||||
text: "deleted delivery",
|
||||
type: "success",
|
||||
});
|
||||
getPage(page.value)
|
||||
} else {
|
||||
notify({
|
||||
title: "Failure",
|
||||
text: "error deleting delivery",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
notify({
|
||||
title: "Failure",
|
||||
text: "error deleting delivery",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
|
||||
Reference in New Issue
Block a user