atlp-rwanda/knights-ecomm-fe | Build 10110879421 | src/pages/Transactions/Transctions.tsx | Coveralls

1

import React, { useState, useEffect } from 'react';

1✔

2

import axios from 'axios';

1✔

3

import { PropagateLoader } from 'react-spinners';

1✔

4

import { ApiResponse } from '../../types/paymentTypes';

1✔

5

1✔

6

const Transactions = () => {

1✔

7

  const [loading, setLoading] = useState(true);

8✔

8

  const [data, setData] = useState<ApiResponse | null>(null);

8✔

9

8✔

10

  useEffect(() => {

8✔

11

    const fetchPayments = async () => {

4✔

12

      const tokenString = localStorage.getItem('userToken');

4✔

13

4✔

14

      if (!tokenString) {

4✔

15

        console.error('Token not found');

2✔

16

        setLoading(false);

2✔

17

        return;

2✔

18

2✔

19

2✔

20

      const { token } = JSON.parse(tokenString);

2✔

21

2✔

22

      setLoading(true);

2✔

23

      try {

2✔

24

        const response = await axios.get<ApiResponse>(`${import.meta.env.VITE_APP_API_URL}/product/transaction`, {

2✔

25

          headers: {

2✔

26

            Authorization: `Bearer ${token}`

2✔

27

2✔

28

});

2✔

29

2✔

30

        setData(response.data);

2✔

31

      } catch (error) {

2✔

32

        console.error('Error fetching payments:', error);

2✔

33

      } finally {

2✔

36

};

4✔

37

2✔

38

    fetchPayments();

2✔

39

  }, []);

4✔

40

4✔

41

  const formatNumber = (number: number) => new Intl.NumberFormat().format(number);

4✔

42

8✔

43

  if (loading) {

8✔

44

    return (

8✔

45

      <div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">

8✔

46

        <PropagateLoader color="#070f2b" />

8✔

47

      </div>

4✔

48

);

4✔

49

4✔

50

4✔

51

  if (!data) {

4✔

52

    return <p className="text-4xl font-bold p-8">No data available</p>;

4✔

53

4✔

54

8✔

55

  return (

2✔

56

    <div className="flex flex-col gap-12 p-8 bg-[#EEF5FF] min-h-[calc(100vh-94px)] " data-testid="transactions">

2✔

57

      <div className="flex flex-col">

2✔

58

        <p className="text-4xl font-bold">Transactions</p>

2✔

59

        <p className="text-[14px] font-light">Home &gt; Transactions</p>

2✔

60

      </div>

2✔

61

2✔

62

      <div className="flex flex-col sm:flex-row gap-4 xmd:gap-14 w-full sm:h-[140px] ">

2✔

63

        <div className="h-full w-full text-white border border-[#D1D1D1] bg-primary items-center sm:items-start justify-center p-8 flex flex-col gap-1 rounded-xl">

2✔

64

          <p className="font-medium text-lg">Total Amount</p>

2✔

65

          {loading ? (

2✔

66

            <p className="text-3xl text-center sm:text-start font-bold">0</p>

2✔

67

          ) : (

2✔

68

            <div className="flex flex-col gap-1">

2✔

69

              <p data-testid="totalVendors" className="text-3xl text-center sm:text-start font-bold">

2✔

70

                {formatNumber(data.statistics.totalAmount)} Rwf

2✔

73

                <span data-testid="averagePayment" className="py-1 text-[13px] px-2 bg-[#4D9A00] rounded-md">

2✔

74

                  Average: {formatNumber(data.statistics.averagePaymentAmount)}

2✔

75

                </span>

2✔

76

                <span data-testid="capturedAmount" className="py-1 text-[13px] px-2 bg-gray-500 rounded-md">

2✔

77

                  Captured: {formatNumber(data.statistics.totalCapturedAmount)}

2✔

78

                </span>

2✔

79

              </div>

2✔

80

            </div>

2✔

81

)}

2✔

82

        </div>

2✔

83

        <div className="h-full w-full bg-white border-[1px] border-[#D1D1D1] text-primary items-center sm:items-start justify-center p-8  flex flex-col gap-1 rounded-xl">

2✔

84

          <p className="font-medium text-lg">Total Transactions</p>

2✔

85

          {loading ? (

2✔

86

            <p className="text-3xl text-center sm:text-start font-bold">0</p>

2✔

87

          ) : (

2✔

88

            <div className="flex flex-col gap-1">

2✔

89

              <p data-testid="totalBuyers" className="text-3xl text-center sm:text-start font-bold">

2✔

90

                {data.statistics.totalPayments}

2✔

91

              </p>

2✔

92

              <div className="flex gap-2 text-white">

2✔

93

                <span data-testid="successfulPayments" className="py-1 text-[13px] px-2 bg-[#4D9A00] rounded-md">

2✔

94

                  Success: {data.statistics.successfulPayments}

2✔

95

                </span>

2✔

96

                <span data-testid="pendingPayments" className="py-1 text-[13px] px-2 bg-gray-500 rounded-md">

8✔

97

                  Pending: {data.statistics.pendingPayments}

8✔

98

                </span>

8✔

99

              </div>

8✔

102

        </div>

2✔

103

      </div>

2✔

104

      <div className=" flex flex-col items-center justify-start gap-y-2 overflow-hidden">

2✔

105

        {data.payments.length > 0 ? (

2✔

106

          <div className="w-full flex flex-col p-8 bg-white rounded-2xl border border-[#D1D1D1] overflow-auto">

2✔

107

            <div className="w-full min-w-[1000px] overflow-x-auto" key={data.payments.length}>

2✔

108

              <div

2✔

109

                data-testid="userPropsTable"

2✔

110

                className="p-2 bg-primary grid grid-cols-12 gap-2 w-full font-medium font-poppins text-white text-[14px] "

2✔

111

2✔

112

                <div className="col-span-1 flex items-center justify-start">

2✔

113

                  <p>No</p>

2✔

114

                </div>

2✔

115

                <div className="col-span-3 flex items-center justify-start">

2✔

116

                  <p>Payment id</p>

2✔

117

                </div>

2✔

118

                <div className="col-span-3 flex items-center justify-start ">

2✔

119

                  <p>Amount</p>

2✔

120

                </div>

2✔

121

                <div className="col-span-2 flex flex-col gap-1 justify-center">

2✔

122

                  <p>Date</p>

8✔

123

                </div>

8✔

124

                <div className="col-span-2 flex items-center justify-start">

8✔

125

                  <p>Status</p>

8✔

126

                </div>

8✔

127

                <div className="col-span-1 flex items-center justify-end">

1✔

128

                  <p>payment method</p>

1✔

129

                </div>

1✔

130

              </div>

1✔

131

              {data.payments.map((payment, index) => {

1✔

132

                return (

1✔

133

                  <div key={payment.id} data-testid="userDiv">

1✔

134

                    <div className="px-2 grid h-[60px] grid-cols-12 gap-2 xmd:w-full font-poppins text-[14px]">

1✔

135

                      <div className="col-span-1 flex items-center justify-start">

1✔

136

                        <p>{index + 1}</p>

1✔

137

                      </div>

1✔

138

                      <div className="col-span-3 flex items-center justify-start max-w-12">

1✔

139

                        <p>{payment.id}</p>

1✔

140

                      </div>

1✔

141

                      <div className="col-span-3 flex items-center justify-start ">

1✔

142

                        <p>{payment.amount}</p>

1✔

143

                      </div>

1✔

144

                      <div className="col-span-2 flex flex-col gap-1 justify-center text-[13px]">

1✔

145

                        {new Date(payment.created * 1000).toLocaleDateString()}

1✔

146

                      </div>

1✔

147

                      {payment.status.toLowerCase() === 'succeeded' ? (

1✔

148

                        <div className="col-span-2 flex items-center gap-1 justify-start">

1✔

149

                          <div className="w-[10px] h-[10px] rounded-full bg-[#4D9A00]"></div>

1✔

150

                          <p>Successful</p>

1✔

151

                        </div>

1✔

152

                      ) : (

1✔

153

                        <div className="col-span-2 flex items-center gap-1 justify-start">

2✔

154

                          <div className="w-[10px] h-[10px] rounded-full bg-[#717171]"></div>

2✔

155

                          <p>Pending</p>

2✔

156

                        </div>

2✔

157

)}

2✔

158

                      <div className="col-span-1 flex items-center justify-end">

2✔

159

                        <p>{payment.payment_method_types[0].toUpperCase()}</p>

2✔

160

                      </div>

2✔

161

                    </div>

2✔

162

                    <div className="w-[1000px] xmd:w-full h-[1px] bg-[#717171] mt-1"></div>

2✔

163

                  </div>

2✔

164

);

2✔

165

})}

2✔

166

            </div>

2✔

167

          </div>

2✔

168

        ) : (

2✔

169

          <p className="text-lg">No Transactions Found</p>

1✔

170

)}

1✔

171

      </div>

1✔

172

    </div>

1✔

173

);

1✔

174

};

1✔

175

1✔

176

export default Transactions;

1✔

atlp-rwanda / knights-ecomm-fe / 10110879421

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1	import React, { useState, useEffect } from 'react';	1✔
2	import axios from 'axios';	1✔
3	import { PropagateLoader } from 'react-spinners';	1✔
4	import { ApiResponse } from '../../types/paymentTypes';	1✔
5		1✔
6	const Transactions = () => {	1✔
7	const [loading, setLoading] = useState(true);	8✔
8	const [data, setData] = useState<ApiResponse \| null>(null);	8✔
9		8✔
10	useEffect(() => {	8✔
11	const fetchPayments = async () => {	4✔
12	const tokenString = localStorage.getItem('userToken');	4✔
13		4✔
14	if (!tokenString) {	4✔
15	console.error('Token not found');	2✔
16	setLoading(false);	2✔
17	return;	2✔
18	}	2✔
19		2✔
20	const { token } = JSON.parse(tokenString);	2✔
21		2✔
22	setLoading(true);	2✔
23	try {	2✔
24	const response = await axios.get<ApiResponse>(`${import.meta.env.VITE_APP_API_URL}/product/transaction`, {	2✔
25	headers: {	2✔
26	Authorization: `Bearer ${token}`	2✔
27	}	2✔
28	});	2✔
29		2✔
30	setData(response.data);	2✔
31	} catch (error) {	2✔
32	console.error('Error fetching payments:', error);	2✔
33	} finally {	2✔
34	setLoading(false);	4!
NEW 35	}	×
36	};	4✔
37		2✔
38	fetchPayments();	2✔
39	}, []);	4✔
40		4✔
41	const formatNumber = (number: number) => new Intl.NumberFormat().format(number);	4✔
42		8✔
43	if (loading) {	8✔
44	return (	8✔
45	<div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">	8✔
46	<PropagateLoader color="#070f2b" />	8✔
47	</div>	4✔
48	);	4✔
49	}	4✔
50		4✔
51	if (!data) {	4✔
52	return <p className="text-4xl font-bold p-8">No data available</p>;	4✔
53	}	4✔
54		8✔
55	return (	2✔
56	<div className="flex flex-col gap-12 p-8 bg-[#EEF5FF] min-h-[calc(100vh-94px)] " data-testid="transactions">	2✔
57	<div className="flex flex-col">	2✔
58	<p className="text-4xl font-bold">Transactions</p>	2✔
59	<p className="text-[14px] font-light">Home > Transactions</p>	2✔
60	</div>	2✔
61		2✔
62	<div className="flex flex-col sm:flex-row gap-4 xmd:gap-14 w-full sm:h-[140px] ">	2✔
63	<div className="h-full w-full text-white border border-[#D1D1D1] bg-primary items-center sm:items-start justify-center p-8 flex flex-col gap-1 rounded-xl">	2✔
64	<p className="font-medium text-lg">Total Amount</p>	2✔
65	{loading ? (	2✔
66	<p className="text-3xl text-center sm:text-start font-bold">0</p>	2✔
67	) : (	2✔
68	<div className="flex flex-col gap-1">	2✔
69	<p data-testid="totalVendors" className="text-3xl text-center sm:text-start font-bold">	2✔
70	{formatNumber(data.statistics.totalAmount)} Rwf	2✔
71	</p>	2!
NEW 72	<div className="flex gap-2 text-white">	✔
73	<span data-testid="averagePayment" className="py-1 text-[13px] px-2 bg-[#4D9A00] rounded-md">	2✔
74	Average: {formatNumber(data.statistics.averagePaymentAmount)}	2✔
75	</span>	2✔
76	<span data-testid="capturedAmount" className="py-1 text-[13px] px-2 bg-gray-500 rounded-md">	2✔
77	Captured: {formatNumber(data.statistics.totalCapturedAmount)}	2✔
78	</span>	2✔
79	</div>	2✔
80	</div>	2✔
81	)}	2✔
82	</div>	2✔
83	<div className="h-full w-full bg-white border-[1px] border-[#D1D1D1] text-primary items-center sm:items-start justify-center p-8 flex flex-col gap-1 rounded-xl">	2✔
84	<p className="font-medium text-lg">Total Transactions</p>	2✔
85	{loading ? (	2✔
86	<p className="text-3xl text-center sm:text-start font-bold">0</p>	2✔
87	) : (	2✔
88	<div className="flex flex-col gap-1">	2✔
89	<p data-testid="totalBuyers" className="text-3xl text-center sm:text-start font-bold">	2✔
90	{data.statistics.totalPayments}	2✔
91	</p>	2✔
92	<div className="flex gap-2 text-white">	2✔
93	<span data-testid="successfulPayments" className="py-1 text-[13px] px-2 bg-[#4D9A00] rounded-md">	2✔
94	Success: {data.statistics.successfulPayments}	2✔
95	</span>	2✔
96	<span data-testid="pendingPayments" className="py-1 text-[13px] px-2 bg-gray-500 rounded-md">	8✔
97	Pending: {data.statistics.pendingPayments}	8✔
98	</span>	8✔
99	</div>	8✔
100	</div>	8!
NEW 101	)}	✔
102	</div>	2✔
103	</div>	2✔
104	<div className=" flex flex-col items-center justify-start gap-y-2 overflow-hidden">	2✔
105	{data.payments.length > 0 ? (	2✔
106	<div className="w-full flex flex-col p-8 bg-white rounded-2xl border border-[#D1D1D1] overflow-auto">	2✔
107	<div className="w-full min-w-[1000px] overflow-x-auto" key={data.payments.length}>	2✔
108	<div	2✔
109	data-testid="userPropsTable"	2✔
110	className="p-2 bg-primary grid grid-cols-12 gap-2 w-full font-medium font-poppins text-white text-[14px] "	2✔
111	>	2✔
112	<div className="col-span-1 flex items-center justify-start">	2✔
113	<p>No</p>	2✔
114	</div>	2✔
115	<div className="col-span-3 flex items-center justify-start">	2✔
116	<p>Payment id</p>	2✔
117	</div>	2✔
118	<div className="col-span-3 flex items-center justify-start ">	2✔
119	<p>Amount</p>	2✔
120	</div>	2✔
121	<div className="col-span-2 flex flex-col gap-1 justify-center">	2✔
122	<p>Date</p>	8✔
123	</div>	8✔
124	<div className="col-span-2 flex items-center justify-start">	8✔
125	<p>Status</p>	8✔
126	</div>	8✔
127	<div className="col-span-1 flex items-center justify-end">	1✔
128	<p>payment method</p>	1✔
129	</div>	1✔
130	</div>	1✔
131	{data.payments.map((payment, index) => {	1✔
132	return (	1✔
133	<div key={payment.id} data-testid="userDiv">	1✔
134	<div className="px-2 grid h-[60px] grid-cols-12 gap-2 xmd:w-full font-poppins text-[14px]">	1✔
135	<div className="col-span-1 flex items-center justify-start">	1✔
136	<p>{index + 1}</p>	1✔
137	</div>	1✔
138	<div className="col-span-3 flex items-center justify-start max-w-12">	1✔
139	<p>{payment.id}</p>	1✔
140	</div>	1✔
141	<div className="col-span-3 flex items-center justify-start ">	1✔
142	<p>{payment.amount}</p>	1✔
143	</div>	1✔
144	<div className="col-span-2 flex flex-col gap-1 justify-center text-[13px]">	1✔
145	{new Date(payment.created * 1000).toLocaleDateString()}	1✔
146	</div>	1✔
147	{payment.status.toLowerCase() === 'succeeded' ? (	1✔
148	<div className="col-span-2 flex items-center gap-1 justify-start">	1✔
149	<div className="w-[10px] h-[10px] rounded-full bg-[#4D9A00]"></div>	1✔
150	<p>Successful</p>	1✔
151	</div>	1✔
152	) : (	1✔
153	<div className="col-span-2 flex items-center gap-1 justify-start">	2✔
154	<div className="w-[10px] h-[10px] rounded-full bg-[#717171]"></div>	2✔
155	<p>Pending</p>	2✔
156	</div>	2✔
157	)}	2✔
158	<div className="col-span-1 flex items-center justify-end">	2✔
159	<p>{payment.payment_method_types[0].toUpperCase()}</p>	2✔
160	</div>	2✔
161	</div>	2✔
162	<div className="w-[1000px] xmd:w-full h-[1px] bg-[#717171] mt-1"></div>	2✔
163	</div>	2✔
164	);	2✔
165	})}	2✔
166	</div>	2✔
167	</div>	2✔
168	) : (	2✔
169	<p className="text-lg">No Transactions Found</p>	1✔
170	)}	1✔
171	</div>	1✔
172	</div>	1✔
173	);	1✔
174	};	1✔
175		1✔
176	export default Transactions;	1✔

atlp-rwanda / knights-ecomm-fe / 10110879421

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous