15 | {
16 | ordering.type === head.name ?
17 | ()
18 | :
19 | ()
20 | }
21 |
22 |
23 | )
24 | }
25 |
32 | 
33 | |
34 |
35 | 
36 | |
37 |
38 | 
39 | |
40 |
19 |
49 |
20 |
29 |
30 |
21 |
28 |
22 |
24 | { role && role.name }
23 |
25 | Kembali
26 |
27 | 29 |
31 |
47 |
48 | Izin
32 |
33 | {
34 | permissions && permissions.map(permission => {
35 | return (
36 |
43 |
44 |
45 |
46 |
37 | {permission.name} {role && role.perms[permission.slug] ? : }
38 |
39 | )
40 | })
41 | }
42 |
15 |
53 |
16 |
25 |
26 |
17 |
24 |
18 |
20 | { product && product.name }
19 |
21 | Kembali
22 |
23 | 25 |
27 |
28 |
29 |
30 |
50 |
51 |
52 | | Kode | 32 |{product && product.code} | 33 |Harga Jual | 34 |{ product && product.price_formatted } | 35 |
|---|---|---|---|
| Harga Beli | 38 |{ product && product.cost_formatted } | 39 |Harga Grosir | 40 |{ product && product.wholesale_formatted } | 41 |
| Kategori | 44 |{ product && product.category && product.category.name } | 45 |Stok | 46 |{ product && product.qty && product.qty.amount }/{ product && product.unit && product.unit.name } | 47 |
17 |
64 |
18 |
27 |
28 |
19 |
26 |
20 |
22 | { user && user.name }
21 |
23 | Kembali
24 |
25 | 27 |
29 |
62 |
63 |
30 |
31 |
61 |
32 | 
33 |
34 |
35 |
36 |
37 |
59 |
60 | | Nama: | 39 |{user && user.name} | 40 |||
|---|---|---|---|
| Email: | 43 |{user && user.email} | 44 |Nomor Telfon: | 45 |{user && user.phone_number} | 46 |
| Peranan: | 49 |{user && user.role && user.role.name } | 50 |Tempat tanggal lahir: | 51 |{user && user.place_of_birth}, {user && user.date_of_birth_formatted} | 52 |
| Alamat: | 55 |{user && user.address} | 56 |||
17 |
18 |
72 |
73 |
74 | )
75 | }
76 | }
77 |
78 | export default DefaultScreen
79 |
--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
1 | .autocomplete-wrapper {
2 | position: relative;
3 | }
4 |
5 | .autocomplete {
6 | position: absolute;
7 | z-index: 2;
8 | background-color: #fff;
9 | width: 100%;
10 | /* border: 1px solid #eee; */
11 | }
12 |
13 | .autocomplete > ul {
14 | padding: 0px;
15 | list-style: none;
16 | }
17 |
18 | .autocomplete > ul > li {
19 | padding: 10px;
20 | border-bottom: 1px solid #eee;
21 | cursor: pointer;
22 | transition: all .2s ease-in-out;
23 | }
24 | .autocomplete > ul > li:hover {
25 | background-color: #007bff;
26 | border-color: #007bff;
27 | color: #fff;
28 | }
29 |
30 | .dropdown-active {
31 | background-color: #007bff;
32 | }
33 |
34 | .dropdown-active > a {
35 | color: #fff;
36 | }
37 |
38 | .table-custom > tbody p {
39 | margin-bottom: 0px;
40 | font-weight: bold;
41 | }
42 |
43 | .table-custom > tbody > tr > td {
44 | font-weight: normal !important;
45 | }
46 |
47 | .table-responsive {
48 | display: table;
49 | }
50 |
51 | .clickable-row {
52 | cursor: pointer;
53 | }
54 |
55 | .table-custom th {
56 | position: relative;
57 | cursor: pointer;
58 | padding-right: 35px !important;
59 | }
60 |
61 | .table-sorting {
62 | position: absolute;
63 | top: 10px;
64 | right: 10px;
65 | color: #ccc;
66 | }
67 |
68 | .table-sorting.active {
69 | color: #007bff;
70 | }
71 |
72 | .table-custom td p {
73 | margin-bottom: 0px !important;
74 | }
75 |
76 | .table-custom td div {
77 | margin-top: 10px;
78 | }
79 |
80 | .table-custom td div button:first-child {
81 | margin-right: 5px;
82 | }
83 |
84 | .table-scrollable tbody{
85 | display:block;
86 | overflow:auto;
87 | height:200px;
88 | width:100%;
89 | }
90 |
91 | .dropzone-wrapper {
92 | border: 2px dashed #eee;
93 | }
94 |
95 | .table-scrollable thead tr, .table-scrollable tfoot tr {
96 | display:block;
97 | }
98 |
99 | .table-scrollable tr > th, .table-scrollable tr > td {
100 | width: 33.3%;
101 | }
102 |
103 | .table-scrollable tr > td {
104 | font-weight: normal;
105 | position: relative;
106 | }
107 |
108 | .table-scrollable tr > td:last-child {
109 | padding-right: 35px;
110 | }
111 |
112 | .table-scrollable tr > td > button.btn-remove {
113 | position: absolute;
114 | right: 0px;
115 | top: 5px;
116 | }
117 |
118 | .table-scrollable-two thead, .table-scrollable tbody tr {
119 | display: table;
120 | width: 100%;
121 | table-layout: fixed;
122 | }
123 |
124 | .table-scrollable-two tbody {
125 | display: block;
126 | overflow-y: scroll;
127 | overflow-x: hidden;
128 | max-height: 150px;
129 | }
130 |
131 | .table-scrollable-two {
132 | display: block;
133 | }
134 |
135 | .table-scrollable-two tfoot {
136 | display: block;
137 | }
138 |
139 | .btn-close-modal {
140 | position: absolute;
141 | right: 0;
142 | }
143 |
144 | .react-datepicker-wrapper {
145 | width: 100% !important;
146 | }
147 |
148 | .receipt {
149 | font-family: monospace;
150 | padding: 10px;
151 | border: 1px solid #aaa;
152 | }
153 |
154 | .term-and-condition {
155 | padding: 20px;
156 | border: 1px solid #e1e1e1;
157 | height: 200px;
158 | overflow-y: scroll;
159 | }
160 |
161 | .btn-disabled {
162 | cursor: not-allowed;
163 | }
164 |
165 | .loading {
166 | position: absolute;
167 | width: 100%;
168 | height: 100vh;
169 | background-color: #fff;
170 | top: 0;
171 | z-index: 2;
172 | color: #ccc;
173 | display: flex;
174 | justify-content: center;
175 | align-items: center;
176 | }
177 |
178 | .pointer {
179 | cursor: pointer;
180 | color: #007bff !important;
181 | }
182 |
183 | .pointer:focus, .pointer[aria-expanded="true"] {
184 | color: #fff !important;
185 | }
186 |
187 | .dropdown-active .pointer {
188 | color: #fff !important;
189 | }
190 |
191 | .uploading {
192 | opacity: .5;
193 | cursor: not-allowed;
194 | }
195 |
196 | .is-invalid-select .css-yk16xz-control {
197 | border-color: hsl(355, 70%, 54%) !important;
198 | }
199 |
200 | .img-avatar {
201 | height: 50px;
202 | object-fit: cover;
203 | }
204 |
205 |
206 | .table-scrollable tbody{
207 | display:block;
208 | overflow:auto;
209 | max-height:200px;
210 | width:100%;
211 | }
212 |
213 | .table-scrollable thead tr, .table-scrollable tfoot tr {
214 | display:block;
215 | }
216 |
217 | .table-scrollable tr > th, .table-scrollable tr > td {
218 | width: 33.3%;
219 | }
220 |
221 | .table-scrollable tr > td {
222 | font-weight: normal;
223 | position: relative;
224 | }
225 |
226 | .table-scrollable tr > td:last-child {
227 | padding-right: 35px;
228 | }
229 |
230 | .table-scrollable tr > td > button.btn-remove {
231 | position: absolute;
232 | right: 0px;
233 | top: 5px;
234 | }
235 |
236 | .table-scrollable tfoot > tr > th {
237 | width: 100%;
238 | }
--------------------------------------------------------------------------------
/src/views/Expense/ViewExpense.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react'
2 | import 'react-datepicker/dist/react-datepicker.css'
3 | import { connect } from 'react-redux'
4 | import { withToastManager } from 'react-toast-notifications'
5 | import { Link } from 'react-router-dom'
6 | import { getExpense } from '../../store/actions/ExpenseActions'
7 |
8 | class ViewExpense extends Component {
9 |
10 | componentDidMount() {
11 | this.props.getExpense(this.props.match.params.id)
12 | }
13 |
14 | render() {
15 | const { expense } = this.props
16 | return (
17 |
19 |
20 | Kasir Kita 2.0
21 |
22 |
34 | -
23 |
-
24 |
27 |
28 | 29 | 30 |31 |
32 |
35 |
36 |
71 |
37 |
67 | -
38 | {
39 | permissions && permissions.length > 0 && permissions.map(permission => {
40 | return (
41 | permission.children && permission.children.length > 0 ? (
42 |
- child.slug).includes(path) ? 'dropdown-active' : ''}`} key={permission._id}>
43 |
44 | {permission.name}
45 |
46 |
47 | 48 | { 49 | permission.children.map(child => { 50 | return ( 51 |56 |
{child.name} 52 | ) 53 | }) 54 | } 55 |
57 | ) : (
58 | -
59 |
{permission.name} 60 |
61 | )
62 | )
63 | })
64 | }
65 |
68 | {this.props.children}
69 |
70 |
19 |
20 |
82 |
21 |
30 |
31 |
32 |
22 |
29 |
23 |
25 | { expense && expense.number }
24 |
26 | Kembali
27 |
28 | 30 |
33 |
81 |
34 |
80 |
35 |
36 |
37 |
57 |
58 | | Nama Toko / Pemasok | 39 |{ expense && expense.supplier_name } | 40 |Penanggung Jawab | 41 |{ expense && expense.in_charge ? expense.in_charge.name : '-' } | 42 |
|---|---|---|---|
| Tanggal Pembelian | 45 |{ expense && expense.payment_date_formatted } | 46 |Di buat oleh | 47 |{ expense && expense.user ? expense.user.name : '-'} | 48 |
| Bukti | 51 |{ expense && expense.evidence ? {expense.evidence} : '-' } | 52 |Catatan | 53 |{ expense && expense.notes } | 54 |
59 |
61 |
62 |
78 |
79 | Pembelian
60 || Nama Barang | 64 |Harga Beli | 65 |Qty | 66 |Total | 67 |
|---|---|---|---|
| { expense && expense.product_name} | 72 |{ expense && expense.price_formatted} | 73 |{ expense && expense.qty} | 74 |{ expense && expense.total_formatted} | 75 |
95 | {
96 | checkFetching && (
97 |
137 | )
138 | }
139 | }
140 |
141 | const mapStateToProps = (state) => {
142 | return {
143 | checkFetching: state.checkUser.fetching,
144 | checkFetched: state.checkUser.fetched,
145 | checkUserExists: state.checkUser.userExists,
146 | checkError: state.checkUser.error,
147 | loginFetching: state.login.fetching,
148 | loginFetched: state.login.fetched,
149 | loginMessage: state.login.message,
150 | loginError: state.login.error,
151 | loginSuccess: state.login.success,
152 | loginRedirect: state.login.redirect
153 | }
154 | }
155 |
156 | const mapDispatchToProps = (dispatch) => {
157 | return {
158 | checkUser: () => dispatch(checkUser()),
159 | login: (data) => dispatch(login(data))
160 | }
161 | }
162 |
163 | export default connect(mapStateToProps, mapDispatchToProps)(withToastManager(Login))
164 |
--------------------------------------------------------------------------------
/src/store/actions/AuthActions.js:
--------------------------------------------------------------------------------
1 | import Axios from 'axios'
2 | import { url } from '../../global'
3 |
4 | const checkUser = () => {
5 | return (dispatch, getState) => {
6 |
7 | dispatch({
8 | type: 'CHECK_USER_PENDING'
9 | })
10 |
11 | Axios.get(`${url}/check`).then(res => {
12 | dispatch({
13 | type: 'CHECK_USER_SUCCESS',
14 | userExists: res.data.user_exists
15 | })
16 | }).catch(error => {
17 |
18 | if (!error.response) {
19 | dispatch({
20 | type: 'CHECK_USER_FAILED',
21 | error: {
22 | status: null,
23 | connection: true,
24 | statusText: 'Koneksi Terputus',
25 | data: {
26 | message: 'Silahkan periksa koneksi backend, lihat tutorial di sini https://github.com/kasirkita/Kasir-Kita'
27 | }
28 | }
29 | })
30 |
31 | } else {
32 |
33 | dispatch({
34 | type: 'CHECK_USER_FAILED',
35 | error: error.response
36 | })
37 | }
38 |
39 | })
40 | }
41 | }
42 |
43 | const register = (data) => {
44 | return async (dispatch, getState) => {
45 |
46 | const {
47 | name,
48 | email,
49 | password,
50 | password_confirmation
51 | } = data
52 |
53 | dispatch({
54 | type: 'REGISTER_PENDING'
55 | })
56 |
57 | await Axios.post(`${url}/register`, {
58 |
59 | name,
60 | email,
61 | password,
62 | password_confirmation
63 |
64 | }).then(res => {
65 |
66 | const setting = res.data.setting
67 | sessionStorage.setItem('decimal_separator', setting ? setting.decimal_separator : '.')
68 | sessionStorage.setItem('thousand_separator', setting ? setting.thousand_separator : '.' )
69 | sessionStorage.setItem('currency', setting ? setting.currency : '')
70 | sessionStorage.setItem('printer', setting ? setting.printer : '')
71 | sessionStorage.setItem('tax', setting ? setting.tax : '')
72 | sessionStorage.setItem('logo', setting.logo_url)
73 | sessionStorage.setItem('logo_remove', setting.logo_remove ? setting.logo_remove : false)
74 | sessionStorage.setItem('shop_name', setting.name ? setting.name : '')
75 | sessionStorage.setItem('address', setting.address ? setting.address : '')
76 | sessionStorage.setItem('phone_number', setting.phone_number ? setting.phone_number : '')
77 | sessionStorage.setItem('divider', setting.divider ? setting.divider : '')
78 |
79 |
80 | dispatch({
81 | type: 'REGISTER_SUCCESS',
82 | token: res.data.token,
83 | data: res.data.data,
84 | message: res.data.message
85 | })
86 | }).catch(error => {
87 | if (!error.response) {
88 | dispatch({
89 | type: 'REGISTER_FAILED',
90 | error: {
91 | status: null,
92 | connection: true,
93 | statusText: 'Koneksi Terputus',
94 | data: {
95 | message: 'Silahkan periksa koneksi backend, lihat tutorial di sini https://github.com/kasirkita/Kasir-Kita'
96 | }
97 | }
98 | })
99 |
100 | } else {
101 |
102 | dispatch({
103 | type: 'REGISTER_FAILED',
104 | error: error.response
105 | })
106 | }
107 | })
108 | }
109 | }
110 |
111 |
112 | const login = (data) => {
113 | return (dispatch, getState) => {
114 |
115 | const {
116 | email,
117 | password
118 | } = data
119 |
120 | dispatch({
121 | type: 'LOGIN_PENDING'
122 | })
123 |
124 | Axios.post(`${url}/login`, {
125 | email,
126 | password
127 |
128 | }).then(res => {
129 |
130 | const setting = res.data.setting
131 | sessionStorage.setItem('decimal_separator', setting ? setting.decimal_separator : '.')
132 | sessionStorage.setItem('thousand_separator', setting ? setting.thousand_separator : '.' )
133 | sessionStorage.setItem('currency', setting ? setting.currency : '')
134 | sessionStorage.setItem('printer', setting ? setting.printer : '')
135 | sessionStorage.setItem('tax', setting ? setting.tax : '')
136 | sessionStorage.setItem('logo', setting.logo_url)
137 | sessionStorage.setItem('logo_remove', setting.logo_remove ? setting.logo_remove : false)
138 | sessionStorage.setItem('shop_name', setting.name ? setting.name : '')
139 | sessionStorage.setItem('address', setting.address ? setting.address : '')
140 | sessionStorage.setItem('phone_number', setting.phone_number ? setting.phone_number : '')
141 | sessionStorage.setItem('divider', setting.divider ? setting.divider : '')
142 |
143 | dispatch({
144 | type: 'LOGIN_SUCCESS',
145 | token: res.data.token,
146 | data: res.data.data,
147 | message: res.data.message,
148 | permissions: res.data.permissions,
149 | redirect: res.data.redirect
150 | })
151 | }).catch(error => {
152 | if (!error.response) {
153 | dispatch({
154 | type: 'LOGIN_FAILED',
155 | error: {
156 | status: null,
157 | connection: true,
158 | statusText: 'Koneksi Terputus',
159 | data: {
160 | message: 'Silahkan periksa koneksi backend, lihat tutorial di sini https://github.com/kasirkita/Kasir-Kita'
161 | }
162 | }
163 | })
164 |
165 | } else {
166 |
167 | dispatch({
168 | type: 'LOGIN_FAILED',
169 | error: error.response
170 | })
171 | }
172 | })
173 | }
174 | }
175 |
176 | export { checkUser, register, login }
--------------------------------------------------------------------------------
/src/views/Supplier/AddSupplier.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { saveSupplier } from '../../store/actions/SupplierActions'
4 | import { connect } from 'react-redux'
5 | import { withToastManager } from 'react-toast-notifications'
6 | import Error from '../Errors/Error'
7 |
8 | class AddSupplier extends Component {
9 |
10 | state = {
11 | name: '',
12 | email: '',
13 | phone_number: '',
14 | address: ''
15 | }
16 |
17 | handleSave = () => {
18 | this.props.saveSupplier(this.state)
19 | }
20 |
21 | handleReset = () => {
22 |
23 | this.setState({
24 | name: '',
25 | email: '',
26 | phone_number: '',
27 | address: ''
28 | })
29 | }
30 |
31 | handleChange = (name) => (e) => {
32 | this.setState({
33 | ...this.state,
34 | [name]: e.target.value
35 | })
36 | }
37 |
38 | componentDidUpdate = (prevProps) => {
39 |
40 | const { toastManager } = this.props;
41 |
42 | if (prevProps.type !== this.props.type || prevProps.success !== this.props.success) {
43 | if (this.props.type === 'save') {
44 |
45 | if (this.props.success) {
46 |
47 | toastManager.add(this.props.message, {
48 | appearance: 'success',
49 | autoDismiss: true
50 | });
51 |
52 | return this.props.history.push('/suppler')
53 |
54 | } else {
55 |
56 | toastManager.add(this.props.message, {
57 | appearance: 'error',
58 | autoDismiss: true
59 | });
60 | }
61 | }
62 | }
63 | }
64 |
65 |
66 | render() {
67 |
68 | const { error, fetching } = this.props
69 |
70 | const {
71 | name,
72 | email,
73 | phone_number,
74 | address
75 | } = this.state
76 |
77 | const validate = error && error.data && error.data.errors
78 |
79 | if (error && error.status !== 422)
80 | return
101 |
136 | Masuk
102 |Silahkan masukan username dan password
103 |
104 |
134 |
135 |
85 |
86 |
137 |
87 |
96 |
97 |
98 |
99 |
88 |
95 |
89 |
91 | Tambah Pemasok
90 |
92 | Kembali
93 |
94 | 96 |
100 |
129 |
101 |
102 |
103 | {
104 | validate && validate.name && (
105 |
109 |
110 |
111 | { validate.name[0] }
106 | )
107 | }
108 |
112 |
113 |
114 | {
115 | validate && validate.email && (
116 |
120 |
121 | { validate.email[0] }
117 | )
118 | }
119 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
130 |
131 |
136 |
132 |
133 |
134 |
135 |
138 |
139 | { 140 | fetching ? ( 141 | 142 | ) : ( 143 | 144 | ) 145 | } 146 | 147 |
148 | 139 | { 140 | fetching ? ( 141 | 142 | ) : ( 143 | 144 | ) 145 | } 146 | 147 |
18 |
19 |
119 |
20 |
29 |
30 |
31 |
21 |
28 |
22 |
24 | { purchase && purchase.number }
23 |
25 | Kembali
26 |
27 | 29 |
32 |
118 |
33 |
117 |
34 |
35 |
36 |
56 |
57 | | Pemasok | 38 |{ purchase && purchase.supplier ? purchase.supplier.name : '-' } | 39 |Penanggung Jawab | 40 |{ purchase && purchase.in_charge ? purchase.in_charge.name : '-' } | 41 |
|---|---|---|---|
| Tanggal Pembelian | 44 |{ purchase && purchase.payment_date_formatted } | 45 |Di buat oleh | 46 |{ purchase && purchase.user ? purchase.user.name : '-'} | 47 |
| Bukti | 50 |{ purchase && purchase.evidence ? {purchase.evidence} : '-' } | 51 |Catatan | 52 |{ purchase && purchase.notes } | 53 |
58 |
60 |
61 |
115 |
116 | Pembelian
59 || Nama Barang | 63 |Harga Beli | 64 |Harga Jual | 65 |Harga Grosir | 66 |Kuantitas | 67 |Subtotal | 68 |
|---|---|---|---|---|---|
| {detail.product_name} | 77 |{detail.cost_formatted} | 78 |{detail.price_formatted} | 79 |{detail.wholesale_formatted} | 80 |{detail.qty} | 81 |{detail.subtotal_formatted} | 82 |
| Tidak ada data | 88 ||||||
| Subtotal | 97 |{purchase && purchase.subtotal_formatted} | 98 |||||
| Pajak | 101 |{purchase && purchase.tax_formatted} | 102 |||||
| Total Diskon | 105 |-{purchase && purchase.total_discount_formatted} | 106 |||||
| Total | 109 |{purchase && purchase.total_formatted} | 110 |||||
117 |
118 |
169 |
119 |
128 |
129 |
130 |
131 |
120 |
127 |
121 |
123 | Ubah Pemasok
122 |
124 | Kembali
125 |
126 | 128 |
132 |
161 |
133 |
134 |
135 | {
136 | validate && validate.name && (
137 |
141 |
142 |
143 | { validate.name[0] }
138 | )
139 | }
140 |
144 |
145 |
146 | {
147 | validate && validate.email && (
148 |
152 |
153 | { validate.email[0] }
149 | )
150 | }
151 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
162 |
163 |
168 |
164 |
165 |
166 |
167 |
170 |
171 | { 172 | fetching ? ( 173 | 174 | ) : ( 175 | 176 | ) 177 | } 178 | 179 |
180 | 171 | { 172 | fetching ? ( 173 | 174 | ) : ( 175 | 176 | ) 177 | } 178 | 179 |
18 |
19 |
126 |
20 |
29 |
30 |
31 |
21 |
28 |
22 |
24 | { sales && sales.number }
23 |
25 | Kembali
26 |
27 | 29 |
32 |
125 |
33 |
124 |
34 |
35 |
36 |
50 |
51 | | Pelanggan | 38 |{ sales && sales.customer ? sales.customer.name : '-' } | 39 |Kasir | 40 |{ sales && sales.user ? sales.user.name : '-' } | 41 |
|---|---|---|---|
| Metode Pembayaran | 44 |{ sales && sales.payment_type === 'cash' ? 'Tunai' : 'Kartu' } | 45 |Status | 46 |{ sales && sales.status === 'done' ? Selesai : Ditahan } | 47 |
52 |
54 |
55 |
122 |
123 | Belanjaan
53 || Nama Barang | 57 |Harga | 58 |Kuantitas | 59 |Diskon | 60 |Subtotal | 61 |
|---|---|---|---|---|
| {detail.product_name} | 70 |{detail.price_formatted} | 71 |{detail.qty} | 72 |-{detail.discount_formatted} | 73 |{detail.subtotal_formatted} | 74 |
| Tidak ada data | 80 |||||
| Subtotal | 89 |{sales && sales.subtotal_formatted} | 90 ||||
| Pajak | 93 |{sales && sales.tax_formatted} | 94 ||||
| Total Diskon | 97 |-{sales && sales.total_discount_formatted} | 98 ||||
| Total | 101 |{sales && sales.total_formatted} | 102 ||||
| Pembayaran | 109 |{sales && sales.amount_formatted} | 110 ||||
| Kembalian | 113 |{sales && sales.change_formatted} | 114 ||||