diff --git a/src/views/salesorders/OrdersList.vue b/src/views/salesorders/OrdersList.vue
new file mode 100644
index 0000000..be0d458
--- /dev/null
+++ b/src/views/salesorders/OrdersList.vue
@@ -0,0 +1,35 @@
+<template>
+    <h3>Orders List</h3>
+    <v-row>
+        <v-col cols="8" xs="12" sm="12" md="8">
+            <v-card variant="outlined">
+                <RecentOrders :customer="customer" limit=20 doc_status="0"></RecentOrders>
+                <RecentOrders :customer="customer" limit=20 doc_status="2"></RecentOrders>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+<script>
+import Customer from '@/types/CustomerType.vue'
+import RecentOrders from '@/components/RecentOrders.vue'
+
+export default {
+    props: {
+        site_info: {},
+        user_info: {}
+    },
+    components:{
+        RecentOrders
+    },
+    data() {
+        return {
+            customer: new Customer()
+        }
+    },
+    created(){
+        let c_id = this.$route.params.id || 0
+        this.customer.id = c_id
+    }
+}
+
+</script>
diff --git "a/src/views/salesorders/\\" "b/src/views/salesorders/\\"
new file mode 100644
index 0000000..dcb0562
--- /dev/null
+++ "b/src/views/salesorders/\\"
@@ -0,0 +1,135 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
+            <v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn>
+
+        </v-card-title>
+        <v-progress-linear color="blue" :active="orders_loading" indeterminate>
+        </v-progress-linear>
+        <v-container>
+            <v-row dense>
+                <v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
+                    <v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
+                        <v-row dense>
+                            <v-col>
+                                <v-card-title>
+                                    Order: {{ item.doc_no }}
+                                </v-card-title>
+                                <v-card-subtitle>
+                                    {{ formatDate(item.doc_date,"DD/MM/YYYY") }}
+                                    <v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
+                                    <v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon>
+                                    {{ item.doc_status }}
+                                </v-card-subtitle>
+                                <v-card-text>
+                                    {{ item.customer.acc_no }} - {{ item.customer.name }}
+                                </v-card-text>
+                            </v-col>
+                            <v-col>
+                                <v-card-text>
+                                    <!--<h5>Address :</h5>-->
+                                    <template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''">
+                                        <h5>Delivery Address :</h5>
+                                        <template  v-for="(v, k , index) in item.del_addr" :key="index">
+                                            <span class="text-caption" v-if="k != 'id' && (v != '' || v != 0)">
+                                                {{ v }}<br/>
+                                            </span>
+                                        </template>
+                                    </template>
+                                </v-card-text>
+                            </v-col>
+                            <v-col cols=5>
+                                <v-card-text>
+                                    <h5>Items :</h5>
+                                    <span class="text-caption" v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
+                                        {{ i.code }} - {{ i.name }}
+                                        <span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
+                                    </span>
+                                </v-card-text>
+                            </v-col>
+                            <v-col cols=1>
+                                <v-btn variant="text" icon="mdi-exclamation" color="red"></v-btn>
+                            </v-col>
+                        </v-row>
+
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </v-card>
+</template>
+<script>
+import axios from 'axios'
+import Customer from '@/types/CustomerType.vue'
+import methods from '@/CommonMethods.vue'
+export default {
+    props:{
+        customer: new Customer(),
+        doc_status: Number,
+        limit: Number 
+    },
+    watch: {
+        customer() {
+            this.getCustomerRecentOrders()
+        },
+    },
+    mixins: [methods],
+    data() {
+        return {
+            orders_loading: false,
+            orders: [],
+            doc_types: ["Live","","Completed"],
+        }
+    },
+    computed: {
+        prog_col(){
+            if (this.doc_status == 2){
+                return "green"
+            } else {
+                return "blue"
+            }
+        },
+        sortedOrders() {
+            let sorted = this.orders
+            sorted.sort((a, b) => {
+                if (a.doc_date < b.doc_date){
+                    return 1
+                }
+                if (a.doc_date > b.doc_date){
+                    return -1
+                }
+                return 0
+            })
+            return sorted
+        }
+    },
+    methods: {
+        getCustomerRecentOrders(){
+            this.orders_loading = true
+            let url = this.$api_url + "/customers/" + this.customer.id + "/orders/recent"
+            axios.get(url, {
+                params: {
+                    doc_status: this.doc_status,
+                    limit: this.limit || 6
+                }
+            })
+                .then(resp => {
+                    this.orders = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    this.orders_loading = false
+                })
+
+        }
+    },
+    created() {
+        if (this.customer.id != "") {
+            this.getCustomerRecentOrders()
+        }
+    }
+}
+</script>