@suflon/rnmd-reporting 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './navigation';
2
+ export { default as Reporting } from './modules/Reporting';
3
+ export { default as ReportingDetail } from './modules/Reporting/component/ReportingDetail';
4
+ export { default as ReportChart } from './modules/Reporting/component/ReportChart';
5
+ export { default as ReportFilterModal } from './modules/Reporting/component/ReportFilterModal';
@@ -88,7 +88,8 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
88
88
  showActionIcon={false}
89
89
  />
90
90
 
91
- <ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 30 }}>
91
+ {/* Fixed Top Controls */}
92
+ <View>
92
93
  {/* Search Bar */}
93
94
  <View className="px-4 pt-3.5">
94
95
  <SearchFilter
@@ -115,15 +116,16 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
115
116
  <TouchableOpacity
116
117
  key={pick.id || i}
117
118
  onPress={() => handleReportPress(pick)}
119
+ activeOpacity={0.8}
118
120
  className="w-[170px] bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3 border border-slate-200 dark:border-gray-800 gap-1.5"
119
121
  >
120
122
  <View className="w-7 h-7 rounded-lg bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
121
123
  <Icon name="bar-chart-2" type="Feather" size={16} color={iconBrandColor} />
122
124
  </View>
123
- <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-xs font-extrabold" numberOfLines={1}>
125
+ <Text className="text-xs font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
124
126
  {pick.name}
125
127
  </Text>
126
- <Text className="text-[9px] text-slate-500 dark:text-gray-400" numberOfLines={1}>
128
+ <Text className="text-[9px] font-semibold text-slate-500 dark:text-gray-400" numberOfLines={1}>
127
129
  {pick.sub_report_class ? SUB_CLASS_LABEL_MAP[pick.sub_report_class] || pick.sub_report_class : 'Report'}
128
130
  </Text>
129
131
  </TouchableOpacity>
@@ -133,7 +135,7 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
133
135
  )}
134
136
 
135
137
  {/* Category Pills Switcher - Dynamic from response */}
136
- <View className="pt-4">
138
+ <View className="py-4">
137
139
  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
138
140
  {categoryTabs.map((tab) => {
139
141
  const isActive = activeTabId === tab.id;
@@ -144,11 +146,12 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
144
146
  <TouchableOpacity
145
147
  key={tab.id}
146
148
  onPress={() => setActiveTabId(tab.id)}
147
- style={{
148
- backgroundColor: isActive ? themeColors.brand[600] : (isDark ? '#1C1C1E' : '#FFFFFF'),
149
- borderColor: isActive ? themeColors.brand[600] : (isDark ? '#2C2C2E' : '#E2E8F0'),
150
- }}
151
- className="flex-row items-center gap-1.5 px-3.5 py-2 rounded-full border"
149
+ activeOpacity={0.8}
150
+ className={`flex-row items-center gap-1.5 px-3.5 py-2 rounded-full border ${
151
+ isActive
152
+ ? 'bg-violet-600 border-violet-600'
153
+ : 'bg-white dark:bg-background-darkSecondaryBg border-slate-200 dark:border-gray-800'
154
+ }`}
152
155
  >
153
156
  <Icon
154
157
  name={tab.icon}
@@ -157,20 +160,27 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
157
160
  color={isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : themeColors.slate[600])}
158
161
  />
159
162
  <Text
160
- style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#334155') }}
161
- className="text-[11px] font-bold"
163
+ className={`text-[11px] font-bold ${
164
+ isActive
165
+ ? 'text-white'
166
+ : 'text-slate-700 dark:text-gray-200'
167
+ }`}
162
168
  >
163
169
  {tab.label}
164
170
  </Text>
165
171
  <View
166
- style={{
167
- backgroundColor: isActive ? 'rgba(255, 255, 255, 0.25)' : (isDark ? '#2C2C2E' : '#F1F5F9'),
168
- }}
169
- className="rounded-full px-1.5 py-0.5"
172
+ className={`rounded-full px-1.5 py-0.5 ${
173
+ isActive
174
+ ? 'bg-white/25'
175
+ : 'bg-slate-100 dark:bg-gray-800'
176
+ }`}
170
177
  >
171
178
  <Text
172
- style={{ color: isActive ? '#FFFFFF' : (isDark ? '#FFFFFF' : '#475569') }}
173
- className="text-[9px] font-extrabold"
179
+ className={`text-[9px] font-extrabold ${
180
+ isActive
181
+ ? 'text-white'
182
+ : 'text-slate-600 dark:text-gray-300'
183
+ }`}
174
184
  >
175
185
  {count}
176
186
  </Text>
@@ -180,57 +190,58 @@ const Reporting = ({ onBackPress }: { onBackPress?: () => void } = {}) => {
180
190
  })}
181
191
  </ScrollView>
182
192
  </View>
193
+ </View>
183
194
 
184
- {/* Report Catalog List */}
185
- <View className="px-4 pt-3.5 gap-2.5">
186
- {loading ? (
187
- <View className="py-10">
188
- <Loader message="Loading reports catalog..." color={iconBrandColor} />
189
- </View>
190
- ) : filteredReports.length === 0 ? (
191
- <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
192
- <Text className="text-slate-500 dark:text-gray-400 text-xs">No reports match the selected category</Text>
193
- </View>
194
- ) : (
195
- filteredReports.map((item) => (
196
- <TouchableOpacity
197
- key={item.id}
198
- onPress={() => handleReportPress(item)}
199
- className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
200
- >
201
- <View className="flex-row items-center gap-3 flex-1">
202
- <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
203
- <Icon
204
- name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
205
- type="Feather"
206
- size={20}
207
- color={iconBrandColor}
208
- />
209
- </View>
195
+ {/* Scrollable Report Catalog List ONLY */}
196
+ <ScrollView className="flex-1" contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 30, gap: 10 }}>
197
+ {loading ? (
198
+ <View className="py-10">
199
+ <Loader message="Loading reports catalog..." color={iconBrandColor} />
200
+ </View>
201
+ ) : filteredReports.length === 0 ? (
202
+ <View className="bg-white dark:bg-background-darkSecondaryBg p-8 rounded-2xl items-center mt-2.5 border border-slate-200 dark:border-gray-800">
203
+ <Text className="text-slate-500 dark:text-gray-400 text-xs font-semibold">No reports match the selected category</Text>
204
+ </View>
205
+ ) : (
206
+ filteredReports.map((item) => (
207
+ <TouchableOpacity
208
+ key={item.id}
209
+ onPress={() => handleReportPress(item)}
210
+ activeOpacity={0.8}
211
+ className="bg-white dark:bg-background-darkSecondaryBg rounded-2xl p-3.5 border border-slate-200 dark:border-gray-800 flex-row items-center"
212
+ >
213
+ <View className="flex-row items-center gap-3 flex-1">
214
+ <View className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-950/40 items-center justify-center">
215
+ <Icon
216
+ name={SUB_CLASS_ICON_MAP[item.sub_report_class] || (item.is_dynamic ? "pie-chart" : "file-text")}
217
+ type="Feather"
218
+ size={20}
219
+ color={iconBrandColor}
220
+ />
221
+ </View>
210
222
 
211
- <View className="flex-1">
212
- <Text style={{ color: isDark ? '#FFFFFF' : '#0F172A' }} className="text-sm font-extrabold" numberOfLines={1}>
213
- {item.name}
223
+ <View className="flex-1">
224
+ <Text className="text-[13px] font-extrabold text-slate-900 dark:text-text-dark-primary" numberOfLines={1}>
225
+ {item.name}
226
+ </Text>
227
+ <View className="flex-row items-center gap-1.5 mt-0.5">
228
+ <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
229
+ {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
230
+ </Text>
231
+ <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
232
+ <Text className="text-[10px] font-semibold text-slate-500 dark:text-gray-400">
233
+ {item.report_type || 'LISTING'}
214
234
  </Text>
215
- <View className="flex-row items-center gap-1.5 mt-0.5">
216
- <Text className="text-[10px] font-bold text-violet-600 dark:text-violet-400">
217
- {SUB_CLASS_LABEL_MAP[item.sub_report_class] || item.sub_report_class || 'Report'}
218
- </Text>
219
- <Text className="text-[10px] text-slate-400 dark:text-gray-500">•</Text>
220
- <Text className="text-[10px] text-slate-500 dark:text-gray-400">
221
- {item.report_type || 'LISTING'}
222
- </Text>
223
- </View>
224
235
  </View>
225
236
  </View>
237
+ </View>
226
238
 
227
- <View className="flex-row items-center gap-1.5">
228
- <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
229
- </View>
230
- </TouchableOpacity>
231
- ))
232
- )}
233
- </View>
239
+ <View className="flex-row items-center gap-1.5">
240
+ <Icon name="chevron-right" type="Feather" size={18} color={iconMutedColor} />
241
+ </View>
242
+ </TouchableOpacity>
243
+ ))
244
+ )}
234
245
  </ScrollView>
235
246
  </SafeAreaView>
236
247
  );
@@ -85,7 +85,7 @@ const DEV_STRINGS: Record<LanguageCode, Record<string, string>> = {
85
85
 
86
86
  // Default dev values
87
87
  const DEFAULT_VALUES = {
88
- authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxOTQxNjg3Nzk1LCJ0aWQiOiJ5aDRsa2pkbiIsImNsdCI6IldFQiIsInNjb3BlIjoiQ09NUEFOWSIsImNvbXBhbnlfaWQiOjIsInJlZ2lvbl9pZCI6MSwic3RhZmZfaWQiOjF9.-Z6cH67dOnYJOoG1Gx49nAOeWrA1wKMO5jMFAbaBjeQ',
88
+ authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxOTQxNzEwNzI5LCJ0aWQiOiJka2t3Ynd1ZyIsImNsdCI6IldFQiIsInNjb3BlIjoiQ09NUEFOWSIsImNvbXBhbnlfaWQiOjIsInJlZ2lvbl9pZCI6MSwic3RhZmZfaWQiOjF9.hPQC0_-uFfHU253gvJi-eJD1HnM8fGWA0lG3IRVs09I',
89
89
  companyId: '2',
90
90
  regionId: '1',
91
91
  staffId: '1',